页面原型设计03

展示一点前端的代码吧

路由
import Vue from 'vue'
import Router from 'vue-router'
import { getLoginUser, removeTokenCookie } from '../assets/js/assist'
import Login from '../pages/login'
import Scene from '../pages/scene'
import Test from '../pages/Test.vue'
import SysManage from '../pages/sysmanage'
import Echarts from '../pages/echarts'
import BDMap from '../pages/bdmap'
Vue.use(Router)

const menuType = {
  header: 'headerMenu',
  left: 'leftMenu'
}

let router = new Router({
  routes: [
    {
      path: '/',
      name: 'Login',
      component: Login
    },
    {
      path: '/test',
      name: 'Test',
      component: Test
    },
    {
      path: '/scene',
      name: 'Scene',
      component: Scene
    },
    {
      path: '/scene/develop',
      name: 'SceneDevelop',
      component: Scene.SceneDevelop
    },
    {
      path: '/sys',
      name: '',
      component: SysManage,
      type: menuType.header,
      children: [
        { path: 'user', name: '用户管理', component: SysManage.User, type: menuType.left },
        { path: 'role', name: '角色管理', component: SysManage.Role, type: menuType.left },

        { path: 'contract', name: '合同管理', component: SysManage.ContractManagementView, type: menuType.left },
        { path: 'contract/generation', name: '合同生成制令', component: SysManage.ContractGeneration, type: menuType.left },
        { path: 'contract/batch-tracking', name: '合同产品批次追踪', component: SysManage.BatchTracking, type: menuType.left },
        { path: 'contract/data-association', name: '合同数据关联', component: SysManage.DataAssociation, type: menuType.left },

        { path: 'production', name: '生产管理', component: SysManage.ProductionManagementView, type: menuType.left },
        { path: 'production/quantity', name: '确定投产数量', component: SysManage.ProductionQuantity, type: menuType.left },
        { path: 'production/plan-monitoring', name: '生产计划监控', component: SysManage.PlanMonitoring, type: menuType.left },
        { path: 'production/multi-process', name: '多流程生产监控', component: SysManage.MultiProcessMonitoring, type: menuType.left },

        { path: 'mold', name: '模具库管理', component: SysManage.MoldManagementView, type: menuType.left },
        { path: 'mold/data-collection', name: '模具数据采集', component: SysManage.MoldDataCollection, type: menuType.left },
        { path: 'mold/usage-record', name: '模具使用与维护记录', component: SysManage.MoldUsageRecord, type: menuType.left },
        { path: 'mold/inventory', name: '模具库存管理', component: SysManage.MoldInventory, type: menuType.left },

        { path: 'team', name: '班组生产数据管理', component: SysManage.TeamProductionDataView, type: menuType.left },
        { path: 'team/process-collection', name: '工序数据采集', component: SysManage.ProcessCollection, type: menuType.left },
        { path: 'team/hand-over', name: '班组交接管理', component: SysManage.HandOverManagement, type: menuType.left },
        { path: 'team/assessment', name: '班组考核与成本核算', component: SysManage.Assessment, type: menuType.left },

        { path: 'quality', name: '质量管理', component: SysManage.QualityManagementView, type: menuType.left },
        { path: 'quality/inspection-data', name: '质量检验数据采集', component: SysManage.InspectionDataCollection, type: menuType.left },
        { path: 'quality/nonconformance', name: '不合格品管理', component: SysManage.NonconformanceManagement, type: menuType.left },
        { path: 'quality/traceability', name: '质量追溯与分析', component: SysManage.QualityTraceability, type: menuType.left },

        { path: 'equipment', name: '设备管理', component: SysManage.EquipmentManagementView, type: menuType.left },
        { path: 'equipment/maintenance', name: '设备维修与保养记录', component: SysManage.EquipmentMaintenance, type: menuType.left },
        { path: 'equipment/status-monitoring', name: '设备状态监测', component: SysManage.EquipmentStatusMonitoring, type: menuType.left },
        { path: 'equipment/cost-accounting', name: '设备成本核算', component: SysManage.EquipmentCostAccounting, type: menuType.left },

        { path: 'material', name: '物料管理', component: SysManage.MaterialManagementView, type: menuType.left },
        { path: 'material/purchase', name: '物料采购与库存管理', component: SysManage.MaterialPurchase, type: menuType.left },
        { path: 'material/usage-cost', name: '物料领用与成本分摊', component: SysManage.MaterialUsageCost, type: menuType.left },
        { path: 'material/traceability', name: '物料追溯', component: SysManage.MaterialTraceability, type: menuType.left },

        { path: 'outsourcing', name: '外协管理', component: SysManage.OutsourcingManagementView, type: menuType.left },
        { path: 'outsourcing/purchase', name: '外协采购管理', component: SysManage.OutsourcingPurchase, type: menuType.left },
        { path: 'outsourcing/inspection', name: '外协产品检验', component: SysManage.OutsourcingInspection, type: menuType.left },
        { path: 'outsourcing/cost-accounting', name: '外协成本核算', component: SysManage.OutsourcingCostAccounting, type: menuType.left },

        { path: 'report', name: '报表与分析', component: SysManage.ReportManagementView, type: menuType.left },
        { path: 'report/generation', name: '生产报表生成', component: SysManage.ProductionReport, type: menuType.left },
        { path: 'report/cost-analysis', name: '成本分析报表', component: SysManage.CostAnalysisReport, type: menuType.left },
        { path: 'report/performance', name: '效率与绩效分析', component: SysManage.PerformanceAnalysis, type: menuType.left },

        { path: 'system', name: '系统管理', component: SysManage.SystemManagementView, type: menuType.left },
        { path: 'system/user-permissions', name: '用户权限管理', component: SysManage.UserPermissions, type: menuType.left },
        { path: 'system/data-backup', name: '数据备份与恢复', component: SysManage.DataBackup, type: menuType.left },
        { path: 'system/settings', name: '系统设置与维护', component: SysManage.SystemSettings, type: menuType.left }
      ]
    },
    {
      path: '/echarts',
      name: '',
      component: Echarts,
      type: menuType.header,
      children: [
        {path: 'dashboard', name: '仪表盘', component: Echarts.Dashboard, type: menuType.left},
        {path: 'line', name: '折线图', component: Echarts.Line, type: menuType.left},
        {path: 'area', name: '面积图', component: Echarts.Area, type: menuType.left},
        {path: 'bar', name: '柱状图', component: Echarts.Bar, type: menuType.left},
        {path: 'linebar', name: '折线&柱状混图', component: Echarts.LineBar, type: menuType.left},
        {path: 'pie', name: '饼图图', component: Echarts.Pie, type: menuType.left}
      ]
    }
   /*  {
      path: '/bdmap',
      name: '',
      component: BDMap,
      type: menuType.header,
      children: [
        {path: 'heat', name: '热力图', component: BDMap.HeatMap, type: menuType.left},
        {path: 'polygon', name: '区域图', component: BDMap.Polygon, type: menuType.left},
        {path: 'pg-heat', name: '区域热力图', component: BDMap.PGHeat, type: menuType.left}
      ]
    } */
  ]
})

/**
 * 不做登录校验的路由集合
 * @type {[*]}
 */
const unLoginCheckRoutes = ['/noauth', '/test', '/console']

router.beforeEach(function (to, from, next) {
  // 是否要做登录及权限校验
  let loginCheck = false
  unLoginCheckRoutes.forEach(r => {
    if (to.path === '/' || (r !== '/' && to.path.startsWith(r))) {
      loginCheck = false
    }
  })
  if (loginCheck) {
    let user = getLoginUser()
    if (user === null) {
      removeTokenCookie()
      next('/')
    }
  } else {
    let _route = {}
    router.options.routes.forEach(r => {
      if (r.path === to.path) _route = r
    })
    if (_route === {} || _route.children === undefined || _route.children.length === 0) {
      next()
    } else {
      let _firstR = _route.children[0]
      next(to.path + '/' + _firstR.path)
    }
  }
})
export default router

import SysManage from './SysManage.vue'
import User from './user/User.vue'
import Role from './role/Role.vue'

// 合同管理
import ContractManagementView from './contract/ContractManagementView.vue';
import ContractGeneration from './contract/ContractGeneration.vue';
import BatchTracking from './contract/BatchTracking.vue';
import DataAssociation from './contract/DataAssociation.vue';

// 生产管理
import ProductionManagementView from './production/ProductionManagementView.vue';
import ProductionQuantity from './production/ProductionQuantity.vue';
import PlanMonitoring from './production/PlanMonitoring.vue';
import MultiProcessMonitoring from './production/MultiProcessMonitoring.vue';

// 模具库管理
import MoldManagementView from './mold/MoldManagementView.vue';
import MoldDataCollection from './mold/MoldDataCollection.vue';
import MoldUsageRecord from './mold/MoldUsageRecord.vue';
import MoldInventory from './mold/MoldInventory.vue';

// 班组生产数据管理
import TeamProductionDataView from './team/TeamProductionDataView.vue';
import ProcessCollection from './team/ProcessCollection.vue';
import HandOverManagement from './team/HandOverManagement.vue';
import Assessment from './team/Assessment.vue';

// 质量管理
import QualityManagementView from './quality/QualityManagementView.vue';
import InspectionDataCollection from './quality/InspectionDataCollection.vue';
import NonconformanceManagement from './quality/NonconformanceManagement.vue';
import QualityTraceability from './quality/QualityTraceability.vue';

// 设备管理
import EquipmentManagementView from './equipment/EquipmentManagementView.vue';
import EquipmentMaintenance from './equipment/EquipmentMaintenance.vue';
import EquipmentStatusMonitoring from './equipment/EquipmentStatusMonitoring.vue';
import EquipmentCostAccounting from './equipment/EquipmentCostAccounting.vue';

// 物料管理
import MaterialManagementView from './material/MaterialManagementView.vue';
import MaterialPurchase from './material/MaterialPurchase.vue';
import MaterialUsageCost from './material/MaterialUsageCost.vue';
import MaterialTraceability from './material/MaterialTraceability.vue';

// 外协管理
import OutsourcingManagementView from './outsourcing/OutsourcingManagementView.vue';
import OutsourcingPurchase from './outsourcing/OutsourcingPurchase.vue';
import OutsourcingInspection from './outsourcing/OutsourcingInspection.vue';
import OutsourcingCostAccounting from './outsourcing/OutsourcingCostAccounting.vue';

// 报表与分析
import ReportManagementView from './report/ReportManagementView.vue';
import ProductionReport from './report/ProductionReport.vue';
import CostAnalysisReport from './report/CostAnalysisReport.vue';
import PerformanceAnalysis from './report/PerformanceAnalysis.vue';

// 系统管理
import SystemManagementView from './system/SystemManagementView.vue';
import UserPermissions from './system/UserPermissions.vue';
import DataBackup from './system/DataBackup.vue';
import SystemSettings from './system/SystemSettings.vue';

SysManage.User = User;
SysManage.Role = Role;

// 合同管理
SysManage.ContractManagementView = ContractManagementView;
SysManage.ContractGeneration = ContractGeneration;
SysManage.BatchTracking = BatchTracking;
SysManage.DataAssociation = DataAssociation;

// 生产管理
SysManage.ProductionManagementView = ProductionManagementView;
SysManage.ProductionQuantity = ProductionQuantity;
SysManage.PlanMonitoring = PlanMonitoring;
SysManage.MultiProcessMonitoring = MultiProcessMonitoring;

// 模具库管理
SysManage.MoldManagementView = MoldManagementView;
SysManage.MoldDataCollection = MoldDataCollection;
SysManage.MoldUsageRecord = MoldUsageRecord;
SysManage.MoldInventory = MoldInventory;

// 班组生产数据管理
SysManage.TeamProductionDataView = TeamProductionDataView;
SysManage.ProcessCollection = ProcessCollection;
SysManage.HandOverManagement = HandOverManagement;
SysManage.Assessment = Assessment;

// 质量管理
SysManage.QualityManagementView = QualityManagementView;
SysManage.InspectionDataCollection = InspectionDataCollection;
SysManage.NonconformanceManagement = NonconformanceManagement;
SysManage.QualityTraceability = QualityTraceability;

// 设备管理
SysManage.EquipmentManagementView = EquipmentManagementView;
SysManage.EquipmentMaintenance = EquipmentMaintenance;
SysManage.EquipmentStatusMonitoring = EquipmentStatusMonitoring;
SysManage.EquipmentCostAccounting = EquipmentCostAccounting;

// 物料管理
SysManage.MaterialManagementView = MaterialManagementView;
SysManage.MaterialPurchase = MaterialPurchase;
SysManage.MaterialUsageCost = MaterialUsageCost;
SysManage.MaterialTraceability = MaterialTraceability;

// 外协管理
SysManage.OutsourcingManagementView = OutsourcingManagementView;
SysManage.OutsourcingPurchase = OutsourcingPurchase;
SysManage.OutsourcingInspection = OutsourcingInspection;
SysManage.OutsourcingCostAccounting = OutsourcingCostAccounting;

// 报表与分析
SysManage.ReportManagementView = ReportManagementView;
SysManage.ProductionReport = ProductionReport;
SysManage.CostAnalysisReport = CostAnalysisReport;
SysManage.PerformanceAnalysis = PerformanceAnalysis;

// 系统管理
SysManage.SystemManagementView = SystemManagementView;
SysManage.UserPermissions = UserPermissions;
SysManage.DataBackup = DataBackup;
SysManage.SystemSettings = SystemSettings;

export default SysManage

<template>
  <c-layout>
    <c-menu>
      <c-menu-item path="/sys/user" icon="address-book" name="用户管理"/>
      <c-menu-item path="/sys/role" icon="address-book" name="角色管理"/>
      <c-menu-item path="/sys/contract" icon="file" name="合同管理">
  <c-menu-item path="/sys/contract/generation" icon="file" name="合同生成制令"/>
  <c-menu-item path="/sys/contract/batch-tracking" icon="file" name="合同产品批次追踪"/>
  <c-menu-item path="/sys/contract/data-association" icon="file" name="合同数据关联"/>
</c-menu-item>

<c-menu-item path="/sys/production" icon="cogs" name="生产管理">
  <c-menu-item path="/sys/production/quantity" icon="cogs" name="确定投产数量"/>
  <c-menu-item path="/sys/production/plan-monitoring" icon="cogs" name="生产计划监控"/>
  <c-menu-item path="/sys/production/multi-process" icon="cogs" name="多流程生产监控"/>
</c-menu-item>

<c-menu-item path="/sys/mold" icon="tool" name="模具库管理">
  <c-menu-item path="/sys/mold/data-collection" icon="tool" name="模具数据采集"/>
  <c-menu-item path="/sys/mold/usage-record" icon="tool" name="模具使用与维护记录"/>
  <c-menu-item path="/sys/mold/inventory" icon="tool" name="模具库存管理"/>
</c-menu-item>

<c-menu-item path="/sys/team" icon="group" name="班组生产数据管理">
  <c-menu-item path="/sys/team/process-collection" icon="group" name="工序数据采集"/>
  <c-menu-item path="/sys/team/hand-over" icon="group" name="班组交接管理"/>
  <c-menu-item path="/sys/team/assessment" icon="group" name="班组考核与成本核算"/>
</c-menu-item>

<c-menu-item path="/sys/quality" icon="check" name="质量管理">
  <c-menu-item path="/sys/quality/inspection-data" icon="check" name="质量检验数据采集"/>
  <c-menu-item path="/sys/quality/nonconformance" icon="check" name="不合格品管理"/>
  <c-menu-item path="/sys/quality/traceability" icon="check" name="质量追溯与分析"/>
</c-menu-item>

<c-menu-item path="/sys/equipment" icon="wrench" name="设备管理">
  <c-menu-item path="/sys/equipment/maintenance" icon="wrench" name="设备维修与保养记录"/>
  <c-menu-item path="/sys/equipment/status-monitoring" icon="wrench" name="设备状态监测"/>
  <c-menu-item path="/sys/equipment/cost-accounting" icon="wrench" name="设备成本核算"/>
</c-menu-item>

<c-menu-item path="/sys/material" icon="archive" name="物料管理">
  <c-menu-item path="/sys/material/purchase" icon="archive" name="物料采购与库存管理"/>
  <c-menu-item path="/sys/material/usage-cost" icon="archive" name="物料领用与成本分摊"/>
  <c-menu-item path="/sys/material/traceability" icon="archive" name="物料追溯"/>
</c-menu-item>

<c-menu-item path="/sys/outsourcing" icon="external-link" name="外协管理">
  <c-menu-item path="/sys/outsourcing/purchase" icon="external-link" name="外协采购管理"/>
  <c-menu-item path="/sys/outsourcing/inspection" icon="external-link" name="外协产品检验"/>
  <c-menu-item path="/sys/outsourcing/cost-accounting" icon="external-link" name="外协成本核算"/>
</c-menu-item>

<c-menu-item path="/sys/report" icon="file-text" name="报表与分析">
  <c-menu-item path="/sys/report/generation" icon="file-text" name="生产报表生成"/>
  <c-menu-item path="/sys/report/cost-analysis" icon="file-text" name="成本分析报表"/>
  <c-menu-item path="/sys/report/performance" icon="file-text" name="效率与绩效分析"/>
</c-menu-item>

<c-menu-item path="/sys/system" icon="cogs" name="系统管理">
  <c-menu-item path="/sys/system/user-permissions" icon="cogs" name="用户权限管理"/>
  <c-menu-item path="/sys/system/data-backup" icon="cogs" name="数据备份与恢复"/>
  <c-menu-item path="/sys/system/settings" icon="cogs" name="系统设置与维护"/>
</c-menu-item>


    </c-menu>
  </c-layout>
</template>

<script>

</script>

<style>

</style>

<template>
  <div class="tracking-container">

    <h2 class="title">合同产品批次追踪</h2>

    <div class="input-group">
      <input
        type="text"
        v-model="batchNumber"
        placeholder="请输入批次号"
        class="batch-input"
      />
      <button @click="trackBatch" class="track-button">追踪</button>
    </div>

    <div v-if="trackingInfo" class="tracking-info">
      <h3>追踪信息:</h3>
      <p>{{ trackingInfo }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      batchNumber: '',
      trackingInfo: ''
    };
  },
  methods: {
    trackBatch() {
      // 模拟追踪逻辑
      this.trackingInfo = `批次号 ${this.batchNumber} 的状态为：在生产中。`;
    }
  }
}
</script>

<style scoped>
.tracking-container {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.title {
  margin-bottom: 20px;
  font-size: 24px;
}

.input-group {
  display: flex;
  margin-bottom: 20px;
}

.batch-input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 10px;
}

.track-button {
  padding: 10px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.track-button:hover {
  background-color: #0056b3;
}

.tracking-info {
  margin-top: 20px;
  padding: 10px;
  background-color: #e9f5ff;
  border-left: 4px solid #007bff;
}
</style>