修改bug

.env.dev

@@ -1,7 +1,7 @@
 ###
  # @Author: Do not edit
  # @Date: 2023-08-29 09:40:39
- # @LastEditTime: 2023-11-07 19:11:56
+ # @LastEditTime: 2023-11-14 14:00:11
  # @LastEditors: zhp
  # @Description:
 ###
@@ -18,7 +18,7 @@ VUE_APP_TITLE = MES系统
 # VUE_APP_BASE_API = 'http://192.168.2.173:48080'
 # VUE_APP_BASE_API = 'http://192.168.1.49:48080'
 # VUE_APP_BASE_API = 'http://192.168.1.8:48080'
-VUE_APP_BASE_API = 'http://192.168.0.33:48082'
+VUE_APP_BASE_API = 'http://192.168.4.159:48080'
 # VUE_APP_BASE_API = 'http://192.168.1.56:48080'
 # VUE_APP_BASE_API = 'http://192.168.4.159:48080'
 # 路由懒加载

src/api/monitoring/statisticalData.js

@@ -1,7 +1,7 @@
 /*
  * @Author: zhp
  * @Date: 2023-11-07 14:10:18
- * @LastEditTime: 2023-11-07 16:29:55
+ * @LastEditTime: 2023-11-14 14:46:04
  * @LastEditors: zhp
  * @Description:
  */

src/assets/img/jiantou.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="30px" height="26px" viewBox="0 0 30 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 60 (88103) - https://sketch.com -->
+    <title>icon/流程箭头备份 5</title>
+    <desc>Created with Sketch.</desc>
+    <g id="3_工艺流程" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="3-自定义工艺流程" transform="translate(-633.000000, -397.000000)">
+            <g id="icon/流程箭头" transform="translate(630.000000, 392.000000)">
+                <g id="编组-2" opacity="0.50218564" stroke-width="1" fill-rule="evenodd" transform="translate(3.000000, 5.000000)">
+                    <ellipse id="椭圆形" fill="#404040" cx="2.12742382" cy="13.0763435" rx="2.12742382" ry="2.21252078"></ellipse>
+                    <ellipse id="椭圆形备份" fill="#404040" cx="8.51227147" cy="13.0763435" rx="2.12742382" ry="2.21252078"></ellipse>
+                    <path d="M19.4593901,1.4429655 L21.8675258,3.61583195 C26.9580675,8.25644103 29.2570896,10.731031 29.7057398,12.459385 C29.748906,12.6160198 29.7763246,12.7796115 29.7855806,12.9482608 L29.7881771,13.0128311 L29.7890859,13.0763435 C29.7890859,13.2480738 29.7702733,13.4152344 29.7346744,13.5757179 C29.3077404,15.5566713 26.3837971,18.5124849 19.4593901,24.7097215 C18.5688126,25.5067745 17.2255693,25.4020797 16.4591722,24.4758791 C15.6927751,23.5496785 15.7934432,22.1527055 16.6840207,21.3556525 L18.3602818,19.843801 C20.3525013,18.0317598 21.9577562,16.511737 23.1725229,15.2878856 L14.8971191,15.2888643 C13.7221754,15.2888643 12.7696953,14.298285 12.7696953,13.0763435 C12.7696953,11.9075299 13.6411516,10.9503974 14.7451872,10.869378 L14.8971191,10.8638227 L23.171515,10.8637859 L22.3958746,10.0940454 C20.9337911,8.66258056 19.0284153,6.89523125 16.6840207,4.7970345 C15.7934432,3.9999815 15.6927751,2.60300846 16.4591722,1.67680788 C17.2255693,0.750607307 18.5688126,0.645912508 19.4593901,1.4429655 Z" id="形状结合" fill="#545454" fill-rule="nonzero"></path>
+                </g>
+                <rect id="矩形" x="0" y="0" width="36" height="36"></rect>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/styles/ruoyi.scss

@@ -104,8 +104,8 @@ h6 {
 			word-break: break-word;
 			background-color: #f8f8f9;
 			color: #515a6e;
-			height: 40px;
-			font-size: 13px;
+			// height: 40px;
+			// font-size: 13px;
 		}
 	}
 	.el-table__body-wrapper {

src/router/index.js

@@ -82,6 +82,31 @@ export const constantRoutes = [
     // }
     // ]
   },
+  {
+    path: '/AGVBoard',
+    name: 'AGVBoard',
+    component: Layout,
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import(/* webpackChunkName: "about" */ '@/views/OperationalOverview/AGVBoard.vue')
+  },
+    {
+    path: '/coldBoard',
+    name: 'coldBoard',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import(/* webpackChunkName: "about" */ '@/views/OperationalOverview/coldBoard.vue')
+  },
+     {
+    path: '/processingBoard',
+    name: 'processingBoard',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import(/* webpackChunkName: "about" */ '@/views/OperationalOverview/processingBoard.vue')
+  },
   {
     path: '/user',
     component: Layout,

src/views/OperationalOverview/AGVBoard.vue

@@ -0,0 +1,976 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-07-19 15:18:30
+ * @LastEditors: zhp
+ * @LastEditTime: 2023-11-14 10:46:52
+ * @Description:
+-->
+<template>
+  <div id="container" ref="container" class="visual-container" :style="styles">
+    <el-row class="container-title" :style="{
+      height: 88 + 'px',
+      lineHeight: 88 + 'px',
+      fontSize: 31 + 'px'
+    }">
+      <img src="../../assets/img/logo.png" style="width:1.1em;position:relative;top:.4em" alt="">
+      许昌安彩AGV原片周转看板
+      <!-- <el-button
+        type="text"
+        class="title-button"
+        :style="{ right: 33 + 'px', top: 37 + 'px' }"
+        @click="changeFullScreen"
+      >
+        <svg-icon v-if="isFullScreen" icon-class="unFullScreenView" />
+        <svg-icon v-else icon-class="fullScreenView" />
+      </el-button> -->
+    </el-row>
+    <el-row class="container-main flex-col" type="flex">
+      <el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="15 * beilv" type="flex" class="flex-1">
+        <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
+          <base-container :beilv="1" :title="'搬运任务'" :title-icon="'5_1'" :back="'energy'">
+            <base-table1 :page="1" :limit="9" :show-index="false" :beilv="1" :table-config="qualityYearTableProps"
+              :table-data="qualityYearList" />
+          </base-container>
+        </el-col>
+        <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
+          <base-container :beilv="1" :title="'周转进度'" :title-icon="'5_3'" :back="'energy'">
+            <!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
+              <top-radio-group />
+            </div> -->
+
+            <!-- 为外部添加一个容器并显式地设置一个高度: -->
+            <!-- <div style="height: 300px;"> -->
+            <div style="width:100%; overflow: hidden scroll;">
+              <!-- <el-row style="margin-bottom: 1em">
+                    <p class="now-team-title">加工工单进度</p>
+                  </el-row> -->
+              <el-row v-for="op in orderProcessList" :key="op.id" style="margin-bottom: 1em">
+                <el-progress :percentage="op.outRate * 100" class="custom-progress-bar" />
+                <p v-if="op.outRate === 1" class="now-secondary-title" style="color:#4679FD">
+                  <i class="el-icon-check" />
+                  {{ op.name }}
+                </p>
+                <p v-else class="now-secondary-title">{{ op.name }}</p>
+              </el-row>
+              <!-- <el-row>
+                    <el-progress :percentage="100" class="custom-progress-bar" />
+                    <p class="now-secondary-title" style="color:#4679FD">
+                      <i class="el-icon-check" />
+                      成都碲化镉5000一期订单
+                    </p>
+                  </el-row>
+                  <el-row>
+                    <el-progress :percentage="85" class="custom-progress-bar" />
+                    <p class="now-secondary-title">成都碲化镉二订单</p>
+                  </el-row>
+                  <el-row>
+                    <el-progress :percentage="85" class="custom-progress-bar" />
+                    <p class="now-secondary-title">长利订单1000</p>
+                  </el-row>
+                  <el-row>
+                    <el-progress :percentage="85" class="custom-progress-bar" />
+                    <p class="now-secondary-title">国际工程20号订单</p>
+                  </el-row>
+                  <el-row>
+                    <el-progress :percentage="85" class="custom-progress-bar" />
+                    <p class="now-secondary-title">铜铟镓硒眉山10万订单</p>
+                  </el-row> -->
+            </div>
+            <!-- </div> -->
+          </base-container>
+        </el-col>
+      </el-row>
+
+      <el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="12 * beilv" type="flex" class="flex-1">
+        <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
+          <base-container :beilv="1" :height="256" :title="'库存管理'" :title-icon="'5_5'" :back="'energy'">
+            <!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
+              <top-radio-group />
+            </div> -->
+            <el-row :gutter="9 * beilv">
+              <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24">
+                <base-table :page="1" :limit="9" :show-index="false" :beilv="1" :table-config="inventoryTableProps"
+                  :table-data="inventoryList" />
+              </el-col>
+              <!-- <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
+                <base-table3
+                  :page="2"
+                  :limit="5"
+                  :beilv="1"
+                  :table-config="qualityTableProps2"
+                  :table-data="qualityList2"
+                />
+              </el-col> -->
+            </el-row>
+          </base-container>
+        </el-col>
+        <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
+          <base-container :beilv="1" :height="318 + 338 + 16" :title="'库位信息'" :title-icon="'5_4'" :back="'energy'">
+            <!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
+              <top-radio-group />
+            </div> -->
+            <!-- 像下面这样表格里的limit值，也许可以用js动态计算出来 -->
+            <base-table2 :page="1" :limit="9" :show-index="false" :beilv="1" :table-config="locationTableProps"
+              :table-data="locationList" />
+          </base-container>
+        </el-col>
+      </el-row>
+
+      <!-- end  -->
+      <!-- <el-col :span="16">
+              <el-row>
+                <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24">
+                  <base-container :beilv="1" :height="672">
+                    <base-video :video-height="624" :beilv="1" />
+                  </base-container>
+                </el-col>
+              </el-row>
+            </el-col>
+      -->
+    </el-row>
+  </div>
+</template>
+
+<script>
+import baseContainer from './components/baseContainer'
+import baseTable1 from './components/baseTable'
+import baseTable from './components/baseTable'
+import baseTable2 from './components/baseTable'
+// import TopRadioGroup from './components/topRadioGroup'
+// import pieChart1 from './components/PieChart'
+// import pieChart2 from './components/PieChart'
+// import pieChart3 from './components/PieChart'
+// import { mapGetters } from 'vuex'
+import screenfull from 'screenfull'
+// import BaseVideo from './components/baseVideo.vue'
+// import alarmLevel from './components/alarmLevel'
+// import axios from '@/utils/request'
+// import doubleYChart from './components/doubleYChart '
+// import elementResizeDetectorMaker from 'element-resize-detector';
+// var erd = elementResizeDetectorMaker(); //创建实例
+// import LinearBarChart from './components/linearBarChart'
+const qualityTableProps1 = [
+  {
+    prop: 'name',
+    label: '产线名称'
+  },
+  {
+    prop: 'createTime',
+    label: '发生时间'
+  },
+  {
+    prop: 'code',
+    label: '质量编码'
+  },
+  {
+    prop: 'content',
+    label: '质量内容'
+  }
+]
+const qualityTableProps2 = [
+  {
+    prop: 'name',
+    label: '工序名称'
+  },
+  {
+    prop: 'createTime',
+    label: '发生时间'
+  },
+  {
+    prop: 'code',
+    label: '质量编码'
+  },
+  {
+    prop: 'content',
+    label: '质量内容'
+  }
+]
+const cxNameList = ['周一', '周二', '周三', '周四', '周五']
+
+const cxDataList = [
+  {
+    topColor: '#9DD5FF',
+    bottomColor: '#1295FF',
+    name: '电耗能',
+    data: [100, 150, 121, 97, 140]
+  },
+  {
+    topColor: '#FF8BC3',
+    bottomColor: '#EB46A1',
+    name: '水耗能',
+    data: [110, 110, 151, 77, 110]
+  },
+  {
+    topColor: '#85F6E9',
+    bottomColor: '#2EC6B4',
+    name: '天然气',
+    data: [110, 120, 171, 287, 40]
+  },
+  {
+    topColor: '#9496FF',
+    bottomColor: '#6567FF',
+    name: '焦炉煤气',
+    data: [140, 157, 122, 27, 240]
+  },
+  {
+    topColor: '#F68E8A',
+    bottomColor: '#E95552',
+    name: '余热发电',
+    data: [170, 180, 127, 17, 340]
+  },
+  {
+    topColor: '#FFE873',
+    bottomColor: '#E7AE2A',
+    name: '二氧化硫',
+    data: [140, 160, 121, 57, 170]
+  }
+]
+
+const qualityList1 = [
+  { name: '钢一线', createTime: '2021.10.21 24:59:59', code: '2121321231', content: '气泡' },
+  { name: '钢二线', createTime: '2021.11.22 24:59:59', code: '3321123213', content: '气泡' },
+  { name: '钢三线', createTime: '2021.12.12 24:59:59', code: '4535435345', content: '气泡' },
+  { name: '钢四线', createTime: '2021.12.20 24:59:59', code: '5465465466', content: '气泡' },
+  { name: '钢五线', createTime: '2021.12.02 24:59:59', code: '2132131312', content: '气泡' },
+  { name: '钢一线', createTime: '2021.10.21 24:59:59', code: '2121321231', content: '气泡' },
+  { name: '钢二线', createTime: '2021.11.22 24:59:59', code: '3321123213', content: '气泡' },
+  { name: '钢三线', createTime: '2021.12.12 24:59:59', code: '4535435345', content: '气泡' },
+  { name: '钢四线', createTime: '2021.12.20 24:59:59', code: '5465465466', content: '气泡' },
+  { name: '钢五线', createTime: '2021.12.02 24:59:59', code: '2132131312', content: '气泡' },
+  { name: '钢一线', createTime: '2021.10.21 24:59:59', code: '2121321231', content: '气泡' },
+  { name: '钢二线', createTime: '2021.11.22 24:59:59', code: '3321123213', content: '气泡' },
+  { name: '钢三线', createTime: '2021.12.12 24:59:59', code: '4535435345', content: '气泡' },
+  { name: '钢四线', createTime: '2021.12.20 24:59:59', code: '5465465466', content: '气泡' },
+  { name: '钢五线', createTime: '2021.12.02 24:59:59', code: '2132131312', content: '气泡' },
+  { name: '钢六线', createTime: '2021.12.11 24:59:59', code: '2132131212', content: '气泡' }
+]
+const qualityList2 = [
+  { name: '上片', createTime: '2021.10.22 24:59:59', code: '2132132133', content: '气泡' },
+  { name: '磨边', createTime: '2021.12.21 24:59:59', code: '2132131232', content: '气泡' },
+  { name: '清洗', createTime: '2021.12.12 24:59:59', code: '1232131312', content: '气泡' },
+  { name: '激光打孔', createTime: '2021.12.13 24:59:59', code: '2132132131', content: '气泡' },
+  { name: 'AR镀膜', createTime: '2021.10.23 24:59:59', code: '2311212232', content: '气泡' },
+  { name: '固化', createTime: '2021.09.22 24:59:59', code: '21321321312', content: '气泡' },
+  { name: '清洗', createTime: '2021.12.12 24:59:59', code: '1232131312', content: '气泡' },
+  { name: '激光打孔', createTime: '2021.12.13 24:59:59', code: '2132132131', content: '气泡' },
+  { name: 'AR镀膜', createTime: '2021.10.23 24:59:59', code: '2311212232', content: '气泡' },
+  { name: '固化', createTime: '2021.09.22 24:59:59', code: '21321321312', content: '气泡' },
+  { name: '上片', createTime: '2021.10.22 24:59:59', code: '2132132133', content: '气泡' },
+  { name: '磨边', createTime: '2021.12.21 24:59:59', code: '2132131232', content: '气泡' },
+  { name: '清洗', createTime: '2021.12.12 24:59:59', code: '1232131312', content: '气泡' },
+  { name: '激光打孔', createTime: '2021.12.13 24:59:59', code: '2132132131', content: '气泡' },
+  { name: 'AR镀膜', createTime: '2021.10.23 24:59:59', code: '2311212232', content: '气泡' },
+  { name: '固化', createTime: '2021.09.22 24:59:59', code: '21321321312', content: '气泡' },
+  { name: '丝网印刷', createTime: '2021.12.21 24:59:59', code: '21321322132', content: '气泡' },
+  { name: '钢化炉', createTime: '2021.12.20 24:59:59', code: '21321312321', content: '气泡' },
+  { name: '检测设备', createTime: '2021.12.12 24:59:59', code: '21321322132', content: '气泡' },
+  { name: '包装设备', createTime: '2021.12.23 24:59:59', code: '39284982931', content: '气泡' }
+]
+const legendData1 = [
+  {
+    name: '设备1',
+    icon: 'circle',
+    value: 196
+  },
+  {
+    name: '设备2',
+    icon: 'circle',
+    value: 147
+  },
+  {
+    name: '设备3',
+    icon: 'circle',
+    value: 24
+  },
+  {
+    name: '设备4',
+    icon: 'circle',
+    value: 85
+  },
+  {
+    name: '设备5',
+    icon: 'circle',
+    value: 8
+  },
+  {
+    name: '设备6',
+    icon: 'circle',
+    value: 112
+  },
+  {
+    name: '设备7',
+    icon: 'circle',
+    value: 146
+  },
+  {
+    name: '设备8',
+    icon: 'circle',
+    value: 27
+  },
+  {
+    name: '设备9',
+    icon: 'circle',
+    value: 2
+  },
+  {
+    name: '设备10',
+    icon: 'circle',
+    value: 90
+  }
+]
+const legendData2 = [
+  {
+    name: '磨边',
+    icon: 'circle',
+    value: 196
+  },
+  {
+    name: '清洗',
+    icon: 'circle',
+    value: 135
+  },
+  {
+    name: '固化',
+    icon: 'circle',
+    value: 144
+  },
+  {
+    name: '镀膜',
+    icon: 'circle',
+    value: 97
+  },
+  {
+    name: '激光打孔',
+    icon: 'circle',
+    value: 12
+  },
+  {
+    name: '丝网印刷',
+    icon: 'circle',
+    value: 10
+  },
+  {
+    name: '钢化炉',
+    icon: 'circle',
+    value: 3
+  }
+]
+const legendData3 = [
+  {
+    name: '钢一线',
+    icon: 'circle',
+    value: 196
+  },
+  {
+    name: '钢二线',
+    icon: 'circle',
+    value: 133
+  },
+  {
+    name: '钢三线',
+    icon: 'circle',
+    value: 24
+  },
+  {
+    name: '钢四线',
+    icon: 'circle',
+    value: 77
+  },
+  {
+    name: '钢五线',
+    icon: 'circle',
+    value: 77
+  }
+]
+const locationTableProps = [
+  {
+    prop: 'eqName',
+    label: '库位名称'
+  },
+  {
+    prop: 'eqCode',
+    label: '存放物件名称'
+  },
+  {
+    prop: 'productCode',
+    label: '编码'
+  },
+  {
+    prop: 'level',
+    label: '存放位置',
+    // subcomponent: alarmLevel,
+    align: 'center'
+  },
+  {
+    prop: 'unit',
+    label: '单位',
+    // subcomponent: alarmLevel,
+    align: 'center'
+  },
+  {
+    prop: 'product',
+    label: '数量'
+  },
+  {
+    prop: 'time',
+    label: '入库时间'
+  }
+]
+
+const locationList = [
+  { eqName: '备件库D-D区-14', eqCode: '原件', level: '中', product: '12323', productCode: 'WLXX20220919000147', unit: '片', time: '2023年9月10日' },
+  { eqName: '辅料库D-D区-1', eqCode: '螺丝刀', level: '下', product: ' 123', productCode: 'WLXX20210415000158', unit: '个', time: '2023年9月10日' },
+  {
+    eqName: '	辅料库A-D区-1', eqCode: '清洗剂', level: '上', product: ' 123', productCode: 'WLXX20210415000157', unit: '瓶', time: '2023年9月10日'
+  },
+  { eqName: '备件库D-D区-14', eqCode: '原件', level: '中', product: '12323', productCode: 'WLXX20220919000147', unit: '片', time: '2023年9月10日' },
+  { eqName: '辅料库D-D区-1', eqCode: '螺丝刀', level: '下', product: ' 123', productCode: 'WLXX20210415000158', unit: '个', time: '2023年9月10日' },
+  {
+    eqName: '	辅料库A-D区-1', eqCode: '清洗剂', level: '上', product: ' 123', productCode: 'WLXX20210415000157', unit: '瓶', time: '2023年9月10日'
+  },
+  { eqName: '备件库D-D区-14', eqCode: '原件', level: '中', product: '12323', productCode: 'WLXX20220919000147', unit: '片', time: '2023年9月10日' },
+  { eqName: '辅料库D-D区-1', eqCode: '螺丝刀', level: '下', product: ' 123', productCode: 'WLXX20210415000158', unit: '个', time: '2023年9月10日' },
+  {
+    eqName: '	辅料库A-D区-1', eqCode: '清洗剂', level: '上', product: ' 123', productCode: 'WLXX20210415000157', unit: '瓶', time: '2023年9月10日'
+  },
+  { eqName: '备件库D-D区-14', eqCode: '原件', level: '中', product: '12323', productCode: 'WLXX20220919000147', unit: '片', time: '2023年9月10日' },
+  { eqName: '辅料库D-D区-1', eqCode: '螺丝刀', level: '下', product: ' 123', productCode: 'WLXX20210415000158', unit: '个', time: '2023年9月10日' },
+  {
+    eqName: '	辅料库A-D区-1', eqCode: '清洗剂', level: '上', product: ' 123', productCode: 'WLXX20210415000157', unit: '瓶', time: '2023年9月10日'
+  },
+  { eqName: '备件库D-D区-14', eqCode: '原件', level: '中', product: '12323', productCode: 'WLXX20220919000147', unit: '片', time: '2023年9月10日' },
+  { eqName: '辅料库D-D区-1', eqCode: '螺丝刀', level: '下', product: ' 123', productCode: 'WLXX20210415000158', unit: '个', time: '2023年9月10日' },
+  {
+    eqName: '	辅料库A-D区-1', eqCode: '清洗剂', level: '上', product: ' 123', productCode: 'WLXX20210415000157', unit: '瓶', time: '2023年9月10日'
+  }
+]
+const inventoryTableProps = [
+  {
+    prop: 'eqName',
+    label: '物件名称'
+  },
+  {
+    prop: 'eqCode',
+    label: '存放区域'
+  },
+  {
+    prop: 'productCode',
+    label: '编码'
+  },
+  {
+    prop: 'level',
+    label: '规格',
+    // subcomponent: alarmLevel,
+    align: 'center'
+  },
+  {
+    prop: 'unit',
+    label: '单位',
+    // subcomponent: alarmLevel,
+    align: 'center'
+  },
+  {
+    prop: 'product',
+    label: '数量'
+  },
+  {
+    prop: 'time',
+    label: '入库时间'
+  }
+]
+
+const inventoryList = [
+  { eqName: '原片', eqCode: '辅料库', level: '133*289', product: ' 12323', productCode: 'WLXX20220919000147', unit: '片', time: '2023年9月10日' },
+  { eqName: '磨轮', eqCode: '辅料库', level: '133*289', product: ' 12323', productCode: 'WLXX20210415000158', unit: '片', time: '2023年9月10日' },
+  {
+    eqName: '	包装辅材', eqCode: '辅料库', level: '133*289', product: ' 12323', productCode: 'WLXX20210415000157', unit: '片', time: '2023年9月10日' },
+  {
+    eqName: '	螺丝刀', eqCode: '备件库', level: '', product: ' 123', productCode: 'WLXX20220919000147', unit: '个', time: '2023年9月10日' },
+  {
+    eqName: '	清洗剂', eqCode: '备件库', level: '200mm', product: ' 123', productCode: 'WLXX20220919000147', unit: '瓶', time: '2023年9月10日' },
+  { eqName: '原片', eqCode: '辅料库', level: '133*289', product: ' 12323', productCode: 'WLXX20220919000147', unit: '片', time: '2023年9月10日' },
+  { eqName: '磨轮', eqCode: '辅料库', level: '133*289', product: ' 12323', productCode: 'WLXX20210415000158', unit: '片', time: '2023年9月10日' },
+  {
+    eqName: '	包装辅材', eqCode: '辅料库', level: '133*289', product: ' 12323', productCode: 'WLXX20210415000157', unit: '片', time: '2023年9月10日'
+  },
+  {
+    eqName: '	螺丝刀', eqCode: '备件库', level: '', product: ' 123', productCode: 'WLXX20220919000147', unit: '个', time: '2023年9月10日'
+  },
+  {
+    eqName: '	清洗剂', eqCode: '备件库', level: '200mm', product: ' 123', productCode: 'WLXX20220919000147', unit: '瓶', time: '2023年9月10日'
+  }
+]
+const qualityYearTableProps = [
+  {
+    prop: 'eqName',
+    label: '作业号'
+  },
+  {
+    prop: 'eqCode',
+    label: '执行叉车'
+  },
+  {
+    prop: 'level',
+    label: '库位',
+    // subcomponent: alarmLevel,
+    align: 'center'
+  },
+  {
+    prop: 'product',
+    label: '成品规格'
+  },
+  {
+    prop: 'productCode',
+    label: '成品编码'
+  },
+  {
+    prop: 'time',
+    label: '时间'
+  }
+]
+
+const qualityYearList = [
+  { eqName: 'RQ20230910', eqCode: '1-01', level: '成品库D-D区-14', product: ' 2.2-1033*2089', productCode: 'CP5651696323', time: '2023年9月10日' },
+  { eqName: 'RQ20230911', eqCode: '1-02', level: '成品库A-A区-1', product: ' 3.2-1033*2089', productCode: 'CP563232323', time: '2023年9月11日' },
+  { eqName: 'RQ20230912', eqCode: '2-01', level: '成品库D-D区-1', product: ' 1.2-1033*2089', productCode: 'CP5651696321', time: '2023年9月12日' },
+  { eqName: 'RQ20230913', eqCode: '1-03', level: '成品库A-B区-1', product: ' 2.2-1033*2089', productCode: 'CP5651696323', time: '2023年9月13日' },
+  { eqName: 'RQ20230914', eqCode: '2-02', level: '成品库D-D区-2', product: ' 3.2-1033*2089', productCode: 'CP565169322', time: '2023年9月14日' },
+  { eqName: 'RQ20230915', eqCode: '1-01', level: '成品库B-A区-4', product: ' 1.2-1033*2089', productCode: 'CP56516962323', time: '2023年9月15日' },
+  { eqName: 'RQ20230916', eqCode: '1-03', level: '成品库A-A区-2', product: ' 2.2-1033*2089', productCode: 'CP5651694343', time: '2023年9月16日' },
+  { eqName: 'RQ20230917', eqCode: '1-02', level: '成品库C-D区-12', product: '4.2-1033*2089', productCode: 'CP5651692323', time: '2023年9月17日' },
+  { eqName: 'RQ20230918', eqCode: '2-01', level: '成品库A-D区-4', product: ' 5.2-1033*2089', productCode: 'CP5651696232', time: '2023年9月18日' },
+  { eqName: 'RQ20230919', eqCode: '2-02', level: '成品库C-D区-9', product: ' 1.2-1033*2089', productCode: 'CP5651696323', time: '2023年9月19日' },
+  { eqName: 'RQ20230920', eqCode: '2-03', level: '成品库D-D区-4', product: ' 5.2-1033*2089', productCode: 'CP5651696323', time: '2023年9月20日' },
+  { eqName: 'RQ20230920', eqCode: '2-04', level: '成品库D-D区-4', product: ' 2.2-1033*2089', productCode: 'CP5651696323', time: '2023年9月20日' },
+  { eqName: 'RQ20230920', eqCode: '2-05', level: '成品库A-D区-4', product: ' 5.2-1033*2089', productCode: 'CP5651696323', time: '2023年9月20日' },
+  { eqName: 'RQ20230920', eqCode: '3-03', level: '成品库B-D区-4', product: ' 3.2-1033*2089', productCode: 'CP5651696323', time: '2023年9月20日' },
+  { eqName: 'RQ20230920', eqCode: '1-03', level: '成品库C-D区-4', product: ' 2.2-1033*2089', productCode: 'CP5651696323', time: '2023年9月20日' }
+]
+const qualityMonthTableProps = [
+  {
+    prop: 'lineName',
+    label: '产线名'
+  },
+  {
+    prop: 'process',
+    label: '工序'
+  },
+  {
+    prop: 'eqName',
+    label: '设备名'
+  },
+  {
+    prop: 'eqCode',
+    label: '设备编码'
+  },
+  {
+    prop: 'long',
+    label: '总运行时长(h)'
+  },
+  // {
+  //   prop: 'createTime',
+  //   label: '保养时间'
+  // },
+  {
+    prop: 'status',
+    label: '设备状态'
+  }
+  // {
+  //   prop: 'nextCreateTime',
+  //   label: '下次保养时间'
+  // }
+  // {
+  //   prop: 'nextLong',
+  //   label: '距离保养时间(天)',
+  //   // subcomponent: nextDay,
+  //   align: 'center'
+  // }
+]
+
+const qualityMonthList = [
+  {
+    lineName: '钢一线',
+    process: '41',
+    eqName: '设备1',
+    eqCode: '2312312',
+    long: '255',
+    // createTime: '2021-02-25 12:00:01',
+    status: '报警'
+    // nextCreateTime: '2022-12-25 12:00:01',
+    // nextLong: 365
+  },
+  {
+    lineName: '钢二线',
+    process: '41',
+    eqName: '设备2',
+    eqCode: '43434',
+    long: '255',
+    // createTime: '2021-11-25 12:00:01',
+    status: '正常'
+    // nextCreateTime: '2022-12-25 12:00:01',
+    // nextLong: 4
+  },
+  {
+    lineName: '钢三线',
+    process: '41',
+    eqName: '设备3',
+    eqCode: '23213212',
+    long: '255',
+    // createTime: '2021-10-25 12:00:01',
+    status: '故障停机'
+    // nextCreateTime: '2022-12-25 12:00:01',
+    // nextLong: 24
+  },
+  {
+    lineName: '钢四线',
+    process: '41',
+    eqName: '设备4',
+    eqCode: '23213',
+    long: '255',
+    // createTime: '2021-02-25 12:00:01',
+    status: '故障停机'
+    // nextCreateTime: '2022-12-25 12:00:01',
+    // nextLong: -36
+  },
+  {
+    lineName: '钢五线',
+    process: '41',
+    eqName: '设备5',
+    eqCode: '23121312',
+    long: '255',
+    // createTime: '2021-06-25 12:00:01',
+    status: '待机'
+    // nextCreateTime: '2022-12-25 12:00:01',
+    // nextLong: 111
+  }
+]
+
+// let resizeFun = null
+
+export default {
+  name: 'ProductionMonitoringCockpit',
+  components: {
+    baseContainer,
+    baseTable1,
+    baseTable,
+    baseTable2
+    // TopRadioGroup,
+    // doubleYChart
+    // LinearBarChart
+    // pieChart1,
+    // pieChart2
+    // pieChart3
+    // BaseVideo
+  },
+  data() {
+    return {
+      beilv: 1,
+      beilv2: 1,
+      clientWidth:0,
+      value: 100,
+      qualityYearTableProps,
+      cxNameList,
+      inventoryTableProps,
+      inventoryList,
+      locationList,
+      locationTableProps,
+      cxDataList,
+      qualityYearList,
+      isFullScreen: false,
+      orderProcessList: [
+        {
+          name: '作业号RQ232323',
+          outRate: '0.8'
+        },
+        {
+          name: '作业号RQ2232232',
+          outRate: '0.7'
+        },
+        {
+          name: '作业号RQ2232232',
+          outRate: '1'
+        },
+        {
+          name: '作业号RQ2545444',
+          outRate: '0.6'
+        },
+        {
+          name: '作业号RQ232322',
+          outRate: '0.5'
+        },
+        {
+          name: '作业号RQ20230911',
+          outRate: '0.4'
+        }
+      ],
+      qualityTableProps1,
+      qualityMonthList,
+      qualityMonthTableProps,
+      modelMonth: '',
+      qualityList1,
+      qualityTableProps2,
+      qualityList2,
+      dateType: '0',
+      legendData1,
+      legendData2,
+      legendData3
+    }
+  },
+  computed: {
+    // ...mapGetters(['sidebar']),
+    styles() {
+      const v = Math.floor(this.value * this.beilv2 * 100) / 10000
+      return {
+        transform: `scale(${v})`,
+        transformOrigin: 'top left'
+      }
+    }
+  },
+
+  watch: {
+    clientWidth(val) {
+      if (!this.timer) {
+        this.clientWidth = val
+        this.beilv2 = this.clientWidth / 1920
+        this.timer = true
+        let _this = this
+        setTimeout(function () {
+          _this.timer = false
+        }, 500)
+      }
+      // 这里可以添加修改时的方法
+      this.windowWidth(val);
+    }
+  },
+  created() {
+    // this.fetchList('exception-alarm')
+    // this.fetchList('inAndOutOfEachLine')
+    // this.fetchList('order-process')
+    // this.fetchList('line-chart-data')
+    this.init()
+    this.windowWidth(document.documentElement.clientWidth)
+  },
+  mounted() {
+    const _this = this;
+    window.onresize = () => {
+      return (() => {
+        _this.clientWidth = `${document.documentElement.clientWidth}`
+        this.beilv2 = _this.clientWidth / 1920
+      })()
+    }
+    // this.beilv2 = window.innerWidth / 1920
+    // addEventListener('resize', resizeFun = () => {
+    //   this.beilv2 = window.innerWidth / 1920
+    // })
+    // erd.listenTo(document, (element) => {
+    //   console.log(element.offsetWidth)
+    //   this.beilv2 = element.offsetWidth / 1920
+
+    //   // var width = element.offsetWidth;
+    //   // var height = element.offsetHeight;
+    // });
+  },
+  // beforeDestroy() {
+  //   //离开页面删除检测器和所有侦听器
+  //   // erd.uninstall(document); //这里用ref是因为vue离开页面后获取不到dom
+  //   removeEventListener('resize', resizeFun)
+  // },
+  methods: {
+    windowWidth(value) {
+      this.clientWidth = value
+    },
+    // fetchList(type) {
+    //   switch (type) {
+    //     case 'order-process':
+    //       return axios({
+    //         url: '/analysis/factory-monitor/order',
+    //         method: 'post'
+    //       }).then(res => {
+    //         if (res.data) {
+    //           console.log(res)
+    //           this.orderProcessList = res.data
+    //           // this.orderProcessList = [
+    //           //   { id: 1, name: '订单1', outRate: 0.5 },
+    //           //   { id: 2, name: '订单2', outRate: 0.54 },
+    //           //   { id: 3, name: '订单3', outRate: 0.45 },
+    //           //   { id: 4, name: '订单4', outRate: 0.65 },
+    //           //   { id: 5, name: '订单5', outRate: 0.35 },
+    //           //   { id: 6, name: '订单6', outRate: 0.15 },
+    //           //   { id: 7, name: '订单7', outRate: 0.5 },
+    //           //   { id: 8, name: '订单8', outRate: 0.5 }
+    //           // ]
+    //         } else {
+    //           this.orderProcessList.splice(0)
+    //         }
+    //       })
+    //   }
+    // },
+    change() {
+      this.isFullScreen = screenfull.isFullscreen
+    },
+    init() {
+      if (screenfull.enabled) {
+        screenfull.on('change', this.change)
+      }
+    },
+    destroy() {
+      if (screenfull.enabled) {
+        screenfull.off('change', this.change)
+      }
+    },
+    changeFullScreen() {
+      console.log(this.beilv);
+      if (!screenfull.enabled) {
+        this.$message({
+          message: 'you browser can not work',
+          type: 'warning'
+        })
+        return false
+      }
+      screenfull.toggle(this.$refs.container)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.visual-container {
+  width: 1920px;
+  height: 1080px;
+  background: url('../../assets/img/OperationalOverview/back.png') no-repeat;
+  background-size: cover;
+  // opacity: .8;
+  .container-title {
+    width: 100%;
+    background: url('../../assets/img/OperationalOverview/title.png') no-repeat;
+    background-size: 100% 100%;
+    color: #00fff0;
+    text-align: center;
+
+    .title-button {
+      color: #00fff0;
+      font-size: 20px;
+      position: absolute;
+    }
+  }
+
+  .container-main {
+    padding: 10px;
+  }
+}
+
+.now-team-title {
+  margin: 0;
+  margin-top: -1em;
+  font-size: 1.2em;
+  line-height: 2em;
+  color: #fff;
+}
+
+.main-title {
+  text-align: center;
+}
+
+.now-secondary-title {
+  margin: 0;
+  font-size: 1em;
+  line-height: 2em;
+  color: #fff;
+}
+
+.now-team-content {
+  font-size: 3em;
+  line-height: 1em;
+  color: #52fff1;
+  text-align: center;
+}
+
+::v-deep .el-progress-bar__inner {
+  background-color: unset;
+  background-image: linear-gradient(to right, #4573fe, #47f8dc);
+}
+ .visual-select {
+   position: absolute;
+   right: 1em;
+   top: 2em;
+ }
+
+//  .container-main {
+//    padding: 5px;
+//  }
+
+</style>
+
+<style lang="scss">
+.visual-container {
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+    background-color: transparent;
+  }
+
+  ::-webkit-scrollbar-track-piece {
+    background: #1b2b3d;
+  }
+
+  ::-webkit-scrollbar-corner {
+    background: #1b2b3d;
+  }
+
+  ::-webkit-scrollbar-track {
+    width: 6px;
+    background: #1b2b3d;
+    -webkit-border-radius: 2em;
+    -moz-border-radius: 2em;
+    border-radius: 2em;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: rgba($color: #5bc4be, $alpha: 0.7);
+    background-clip: padding-box;
+    min-height: 28px;
+    -webkit-border-radius: 2em;
+    -moz-border-radius: 2em;
+    border-radius: 2em;
+    transition: background-color 0.3s;
+    cursor: pointer;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: rgba($color: #5bc4be, $alpha: 1);
+  }
+}
+    .el-input {
+      min-height: 10px;
+    }
+
+    .el-input__inner {
+      background-color: rgba($color: #31878c, $alpha: 0.29);
+      border: rgba($color: #31878c, $alpha: 0.29);
+      color: aliceblue;
+    }
+
+    .el-divider--vertical {
+      height: 174px;
+      width: 1px;
+      border: rgba(255, 255, 255, 0.15);
+      color: rgba(255, 255, 255, 0.15);
+      margin-left: 3em;
+    }
+</style>
+
+<style scoped>
+.flex-col {
+  flex-direction: column;
+}
+
+.flex-1 {
+  flex: 1 1;
+}
+.h-full {
+  height: calc(100vh - 150px);
+}
+/* .container-main {
+  min-height: calc(100vh - 10em);
+} */
+</style>

src/views/OperationalOverview/components/BarChart.vue

@@ -0,0 +1,127 @@
+
+<template>
+  <div>
+    <div :id="id" :class="className" :style="{ height: height, width:width}" />
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+import 'echarts/theme/macarons' // echarts theme
+import resize from './mixins/resize'
+
+export default {
+  name: 'OverviewBar',
+  mixins: [resize],
+  props: {
+    id: {
+      type: String,
+      default: 'OverviewLine'
+    },
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    beilv: {
+      type: Number,
+      default: 1
+    },
+    height: {
+      type: String,
+      default: '300px'
+    },
+    showLegend: {
+      type: Boolean,
+      default: false
+    },
+    legendData: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.getElementById(this.id))
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        grid: {
+          top: 10,
+          left: '2%',
+          right: '2%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              type: 'solid',
+              color: '#123341', // 左边线的颜色
+              width: '1'// 坐标线的宽度
+            }
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#666a74' // 坐标值得具体的颜色
+
+            }
+          },
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+        },
+        yAxis: {
+          axisLine: {
+            lineStyle: {
+              type: 'solid',
+              color: '#123341', // 左边线的颜色
+              width: '1'// 坐标线的宽度
+            }
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#666a74' // 坐标值得具体的颜色
+
+            }
+          },
+          type: 'value'
+        },
+        series: [
+          {
+            data: [120, 200, 150, 80, 70, 110, 130],
+            type: 'bar',
+            showBackground: true,
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            }
+          }
+        ]
+      })
+    }
+  }
+}
+</script>

src/views/OperationalOverview/components/LineChart.vue

@@ -0,0 +1,253 @@
+<!--
+ * @Author: zwq
+ * @Date: 2022-01-21 14:43:06
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-01-24 13:27:41
+ * @Description:
+-->
+<template>
+  <div>
+    <!-- <div :id="id" :class="className" :style="{ height: '65%', width:width}" /> -->
+    <div :id="id" :class="className" :style="{ paddingTop: '1.25em', height: height + 'px', width:width}" />
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+import 'echarts/theme/macarons' // echarts theme
+import resize from './mixins/resize'
+
+export default {
+  name: 'OverviewBar',
+  mixins: [resize],
+  props: {
+    id: {
+      type: String,
+      default: 'OverviewLine'
+    },
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    beilv: {
+      type: Number,
+      default: 1
+    },
+    height: {
+      type: String,
+      default: '300px'
+    },
+    legendPosition: {
+      type: String,
+      default: 'center'
+    },
+    showLegend: {
+      type: Boolean,
+      default: false
+    },
+    legendData: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.getElementById(this.id))
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'axis'
+        },
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '0',
+          containLabel: true
+        },
+        legend: {
+          itemHeight: 10,
+          itemWidth: 10,
+          x: this.legendPosition, // 可设定图例在左、右、居中
+          y: 'top', // 可设定图例在上、下、居中
+          show: this.showLegend,
+          data: this.legendData,
+          top: 28,
+          right: '1%',
+          textStyle: {
+            fontSize: 12,
+            color: '#ced1d5'
+          }
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          splitLine: { show: false }, // 去除网格线
+          axisLine: {
+            lineStyle: {
+              type: 'solid',
+              color: '#123341', // 左边线的颜色
+              width: '1'// 坐标线的宽度
+            }
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#666a74' // 坐标值得具体的颜色
+
+            }
+          },
+          data: ['1', '5', '15', '20', '25', '30']
+        },
+        yAxis: {
+          type: 'value',
+          splitLine: { show: false }, // 去除网格线
+          axisLine: {
+            lineStyle: {
+              type: 'solid',
+              color: '#123341', // 左边线的颜色
+              width: '1'// 坐标线的宽度
+            }
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#666a74' // 坐标值得具体的颜色
+
+            }
+          }
+        },
+        series: [
+          {
+            name: this.showLegend ? this.legendData[0].name : '',
+            type: 'line',
+            itemStyle: {
+              normal: {
+                color: '#3574a8',
+                lineStyle: {
+                  color: '#3574a8'
+                }
+              }
+            },
+            data: [120, 32, 101, 134, 90, 230, 210]
+          },
+          {
+            name: this.showLegend ? this.legendData[1].name : '',
+            type: 'line',
+            itemStyle: {
+              normal: {
+                color: '#9f3476',
+                lineStyle: {
+                  color: '#9f3476'
+                }
+              }
+            },
+            data: [270, 182, 191, 234, 290, 230, 210]
+          },
+          {
+            name: this.showLegend ? this.legendData[2].name : '',
+            type: 'line',
+            itemStyle: {
+              normal: {
+                color: '#30959d',
+                lineStyle: {
+                  color: '#30959d'
+                }
+              }
+            },
+            data: [160, 32, 301, 154, 190, 330, 210]
+          },
+          {
+            name: this.showLegend ? this.legendData[3].name : '',
+            type: 'line',
+            itemStyle: {
+              normal: {
+                color: '#5255be',
+                lineStyle: {
+                  color: '#5255be'
+                }
+              }
+            },
+            data: [150, 132, 21, 234, 190, 130, 320]
+          },
+          {
+            name: this.showLegend ? this.legendData[4].name : '',
+            type: 'line',
+            itemStyle: {
+              normal: {
+                color: '#8b4449',
+                lineStyle: {
+                  color: '#8b4449'
+                }
+              }
+            },
+            data: [210, 332, 201, 34, 290, 230, 320]
+          },
+          {
+            name: this.showLegend ? this.legendData[5].name : '',
+            type: 'line',
+            itemStyle: {
+              normal: {
+                color: '#a29848',
+                lineStyle: {
+                  color: '#a29848'
+                }
+              }
+            },
+            data: [20, 62, 101, 34, 190, 30, 120]
+          },
+          {
+            name: this.showLegend && this.legendData[6] ? this.legendData[6].name : '',
+            type: 'line',
+            itemStyle: {
+              normal: {
+                color: '#a29848',
+                lineStyle: {
+                  color: '#a29848'
+                }
+              }
+            },
+            data: [20, 62, 101, 34, 190, 30, 120]
+          },
+          {
+            name: this.showLegend && this.legendData[7] ? this.legendData[7].name : '',
+            type: 'line',
+            itemStyle: {
+              normal: {
+                color: '#a29848',
+                lineStyle: {
+                  color: '#a29848'
+                }
+              }
+            },
+            data: [20, 62, 101, 34, 190, 30, 120]
+          }
+        ]
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart{
+  margin-top: -3em
+}
+</style>

src/views/OperationalOverview/components/PieChart.vue

@@ -0,0 +1,221 @@
+<!--
+ * @Author: zwq
+ * @Date: 2022-01-21 14:43:06
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-01-24 09:12:18
+ * @Description:
+-->
+<template>
+  <div :id="id" :class="className" :style="{ height: computedHeight, width: width }" />
+</template>
+
+<script>
+import echarts from 'echarts'
+import 'echarts/theme/macarons' // echarts theme
+import resize from './mixins/resize'
+
+export default {
+  name: 'OverviewBar',
+  mixins: [resize],
+  props: {
+    id: {
+      type: String,
+      default: 'DefaultPieChart'
+    },
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    beilv: {
+      type: Number,
+      default: 1
+    },
+    height: {
+      type: String,
+      default: '300px'
+    },
+    showCenterTitle: {
+      type: Boolean,
+      default: false
+    },
+    showLegend: {
+      type: Boolean,
+      default: false
+    },
+    legendConfig: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    },
+    seriesConfig: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    },
+    seriesData: {
+      type: Array,
+      default: () => []
+    },
+    barColor: {
+      type: Array,
+      default: () => [
+        '#5fe1d2',
+        '#ffb2b0',
+        '#8e90ff',
+        '#f058aa',
+        '#8652da',
+        '#87fb84',
+        '#61b9ff',
+        '#fdf6a6',
+        '#ffc465',
+        '#98d9ff'
+      ]
+    }
+  },
+  data() {
+    const lData = this.seriesData
+    return {
+      chart: null,
+      defaultConfig: {
+        // 默认的legend配置
+        legend: {
+          orient: 'vertical',
+          left: '75%',
+          bottom: 0,
+          itemHeight: 10,
+          itemWidth: 10,
+          formatter: function(name) {
+            let pieLegendVale = {}
+            lData.filter((item, index) => {
+              if (item.name === name) {
+                pieLegendVale = item
+              }
+            })
+            const arr = ['{b|' + pieLegendVale.name + '}', '{a|' + pieLegendVale.value + '}']
+            return arr.join(' ')
+          },
+          textStyle: {
+            rich: {
+              a: {
+                align: 'center',
+                fontSize: 10,
+                color: '#f988bf',
+                lineHeight: 16
+              },
+              b: {
+                // verticalAlign: 'top',
+                align: 'center',
+                fontSize: 10,
+                color: '#dddfe1'
+              }
+            }
+          }
+        },
+        // 默认的series配置
+        series: {
+          center: ['35%', '50%'],
+          radius: ['40%', '70%'],
+          avoidLabelOverlap: false,
+          emphasis: {
+            label: {
+              show: true,
+              fontSize: '20',
+              fontWeight: 'bold'
+            }
+          }
+        }
+      }
+    }
+  },
+  computed: {
+    computedHeight: function() {
+      if (/[0-9]+%$/.test(this.height)) {
+        // 如果是百分比
+        return this.height
+      }
+      return this.height * this.beilv + 'px'
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.getElementById(this.id))
+      this.chart.setOption({
+        title: this.showCenterTitle
+          ? {
+            text: '总共',
+            subtext: this.seriesData.reduce((pre, cur) => pre + cur.value, 0),
+            top: '32%',
+            left: '49%',
+            textAlign: 'center',
+            itemGap: 5,
+            textStyle: {
+              color: '#c0c0c0',
+              fontSize: 16,
+              fontWeight: 'lighter',
+              lineHeight: 15
+            },
+            subtextStyle: {
+              color: '#fff',
+              fontSize: 24,
+              lineHeight: 20
+            }
+          }
+          : {},
+        tooltip: {
+          trigger: 'item'
+        },
+        grid: {
+          top: '0px',
+          right: '0px',
+          bottom: '0px',
+          left: '0px',
+          containLabel: true
+        },
+        legend: {
+          // 默认配置
+          ...this.defaultConfig.legend,
+          // 外部传入配置
+          ...this.legendConfig
+        },
+        color: this.barColor,
+        series: [
+          {
+            name: 'default name',
+            type: 'pie',
+            // 默认series配置
+            ...this.defaultConfig.series,
+            // 外部传入配置
+            ...this.seriesConfig,
+            data: this.seriesData
+          }
+        ]
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* .chart >>> div:first-child{
+  background-color: red;
+  height: 100% !important;
+} */
+</style>

src/views/OperationalOverview/components/ProductionAndOperationCenterCockpit/BarChart.vue

@@ -0,0 +1,158 @@
+<!--
+ * @Author: zhp
+ * @Date: 2022-01-23 16:50:39
+ * @LastEditTime: 2022-01-25 15:43:52
+ * @LastEditors: zhp
+ * @Description:
+-->
+
+<template>
+  <div>
+    <div :id="id" :class="className" :style="{ height: height, width:width}" />
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+import 'echarts/theme/macarons' // echarts theme
+import resize from '../mixins/resize'
+
+export default {
+  name: 'OverviewBar',
+  mixins: [resize],
+  props: {
+    id: {
+      type: String,
+      default: 'OverviewLine'
+    },
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    beilv: {
+      type: Number,
+      default: 1
+    },
+    height: {
+      type: String,
+      default: '300px'
+    },
+    showLegend: {
+      type: Boolean,
+      default: false
+    },
+    legendData: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.getElementById(this.id))
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        grid: {
+          top: '10%',
+          left: '2%',
+          right: '2%',
+          bottom: '3%',
+          containLabel: true
+        },
+        legend: {
+          itemHeight: 10,
+          x: 'right', // 可设定图例在左、右、居中
+          y: 'top', // 可设定图例在上、下、居中
+          itemWidth: 10,
+          show: this.showLegend,
+          data: this.legendData,
+          right: '1%',
+          textStyle: {
+            fontSize: 12,
+            color: '#ced1d5'
+          }
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              type: 'solid',
+              color: '#123341', // 左边线的颜色
+              width: '1'// 坐标线的宽度
+            }
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#666a74' // 坐标值得具体的颜色
+            }
+          },
+          data: ['钢一线', '钢二线', '钢三线', '钢四线', '钢五线', '钢六线']
+        },
+        yAxis: {
+          type: 'value',
+          scale: true,
+          max: 12,
+          min: 0,
+          splitNumber: 5,
+          splitLine: {
+            lineStyle: {
+              color: '#213259'
+            }
+          },
+          boundaryGap: [0.2, 0.2],
+          axisLabel: {
+            formatter: '{value} h',
+            textStyle: {
+              color: 'white'
+            }
+          }
+        },
+        series: [
+          {
+            name: this.legendData[0].name,
+            type: 'bar',
+            data: this.legendData[0].data,
+            markLine: {
+              data: [{ type: 'average', name: 'Avg' }]
+            },
+            barWidth: '10%',
+            itemStyle: this.legendData[0].itemStyle
+          },
+          {
+            name: this.legendData[1].name,
+            type: 'bar',
+            data: this.legendData[1].data,
+            barWidth: '10%',
+            itemStyle: this.legendData[1].itemStyle
+          }
+        ]
+      })
+    }
+  }
+}
+</script>

src/views/OperationalOverview/components/ProductionAndOperationCenterCockpit/BarChartOne.vue

@@ -0,0 +1,158 @@
+<!--
+ * @Author: zhp
+ * @Date: 2022-01-23 16:50:39
+ * @LastEditTime: 2022-01-25 15:44:26
+ * @LastEditors: zhp
+ * @Description:
+-->
+
+<template>
+  <div>
+    <div :id="id" :class="className" :style="{ height: height, width:width}" />
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+import 'echarts/theme/macarons' // echarts theme
+import resize from '../mixins/resize'
+
+export default {
+  name: 'OverviewBar',
+  mixins: [resize],
+  props: {
+    id: {
+      type: String,
+      default: 'OverviewLine'
+    },
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    beilv: {
+      type: Number,
+      default: 1
+    },
+    height: {
+      type: String,
+      default: '300px'
+    },
+    showLegend: {
+      type: Boolean,
+      default: false
+    },
+    legendData: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.getElementById(this.id))
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        grid: {
+          top: '10%',
+          left: '2%',
+          right: '2%',
+          bottom: '3%',
+          containLabel: true
+        },
+        legend: {
+          itemHeight: 10,
+          x: 'right', // 可设定图例在左、右、居中
+          y: 'top', // 可设定图例在上、下、居中
+          itemWidth: 10,
+          show: this.showLegend,
+          data: this.legendData,
+          right: '1%',
+          textStyle: {
+            fontSize: 12,
+            color: '#ced1d5'
+          }
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              type: 'solid',
+              color: '#123341', // 左边线的颜色
+              width: '1'// 坐标线的宽度
+            }
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#666a74' // 坐标值得具体的颜色
+            }
+          },
+          data: ['钢一线', '钢二线', '钢三线', '钢四线', '钢五线', '钢六线']
+        },
+        yAxis: {
+          type: 'value',
+          scale: true,
+          max: 12,
+          min: 0,
+          splitNumber: 5,
+          splitLine: {
+            lineStyle: {
+              color: '#213259'
+            }
+          },
+          boundaryGap: [0.2, 0.2],
+          axisLabel: {
+            formatter: '{value} h',
+            textStyle: {
+              color: 'white'
+            }
+          }
+        },
+        series: [
+          {
+            name: this.legendData[0].name,
+            type: 'bar',
+            data: this.legendData[0].data,
+            markLine: {
+              data: [{ type: 'average', name: 'Avg' }]
+            },
+            barWidth: '10%',
+            itemStyle: this.legendData[0].itemStyle
+          },
+          {
+            name: this.legendData[1].name,
+            type: 'bar',
+            data: this.legendData[1].data,
+            barWidth: '10%',
+            itemStyle: this.legendData[1].itemStyle
+          }
+        ]
+      })
+    }
+  }
+}
+</script>

src/views/OperationalOverview/components/ProductionAndOperationCenterCockpit/baseContainer/index.vue

@@ -0,0 +1,144 @@
+<!--
+ * @Author: gtz
+ * @Date: 2022-01-19 15:58:17
+ * @LastEditors: zhp
+ * @LastEditTime: 2022-01-24 09:01:07
+ * @Description: file content
+ * @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue
+-->
+<template>
+  <div class="base-container" :style="{height: height + 'px', fontSize: 12 + 'px'}">
+    <div class="line" />
+    <div class="line line-vertical" />
+    <div class="line line-right" />
+    <div class="line line-right-vertical" />
+    <div class="line line-bottom" />
+    <div class="line line-bottom-vertical" />
+    <div class="line line-bottom-right" />
+    <div class="line line-bottom-right-vertical" />
+    <div class="bar-item">
+      <div v-if="title" class="bar-title">
+        <span>
+          <svg-icon :icon-class="titleIcon" style="font-size: 1.5em; position: relative; top: .08em" />
+          {{ title }}
+        </span>
+      </div>
+      <div class="bar-content">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BaseContainer',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    titleIcon: {
+      type: String,
+      default: ''
+    },
+    height: {
+      type: Number,
+      default: 200
+    },
+    baseSize: {
+      type: Number,
+      default: 12
+    },
+    beilv: {
+      type: Number,
+      default: 1
+    }
+  },
+  data() {
+    return {
+      curIndex: 0
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    changeTab(num) {
+      this.curIndex = num
+      this.$emit('tabSelect', num)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.base-container {
+  color: #fff;
+  width: 100%;
+  background-color: rgba($color: #061027, $alpha: 0.15);
+  position: relative;
+  padding: .5em;
+  border: 2px solid;
+  border-image: linear-gradient(90deg, rgba(82, 255, 241, 0.6), rgba(95, 190, 249, 0), rgba(82, 255, 241, 0.6)) 2 2;
+  .line {
+    position: absolute;
+    border-top: 4px solid #52FFF1;
+    width: 2em;
+    top: -.25em;
+    left: -.25em;
+    &-vertical {
+      top: calc(-5em / 12);
+      left: calc(-1em / 12);
+      transform: rotate(90deg);
+      transform-origin: left;
+    }
+    &-right {
+      top: -.25em;
+      right: -.25em;
+      left: inherit;
+    }
+    &-right-vertical {
+      top: calc(-5em / 12);
+      right: calc(-1em / 12);
+      left: inherit;
+      transform: rotate(-90deg);
+      transform-origin: right;
+    }
+    &-bottom {
+      top: inherit;
+      left: -.25em;
+      bottom: -.25em;
+    }
+    &-bottom-vertical {
+      top: inherit;
+      left: calc(-1em / 12);
+      bottom: calc(-5em / 12);
+      transform: rotate(-90deg);
+      transform-origin: left;
+    }
+    &-bottom-right {
+      top: inherit;
+      left: inherit;
+      right: -.25em;
+      bottom: -.25em;
+    }
+    &-bottom-right-vertical {
+      top: inherit;
+      left: inherit;
+      right: calc(-1em / 12);
+      bottom: calc(-5em / 12);
+      transform: rotate(90deg);
+      transform-origin: right;
+    }
+  }
+  .bar-title {
+    width: 100%;
+    color: #52FFF1;
+    font-size: 1.5em;
+    padding: .1em;
+  }
+  .bar-content{
+    padding: 1em;
+  }
+}
+</style>

src/views/OperationalOverview/components/ProductionAndOperationCenterCockpit/baseTable.vue

@@ -0,0 +1,170 @@
+<!--
+ * @Date: 2020-12-14 09:07:03
+ * @LastEditors: zhp
+ * @LastEditTime: 2023-11-13 16:41:13
+ * @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\ProductionAndOperationCenterCockpit\baseTable.vue
+ * @Description:
+-->
+<template>
+  <div class="visual-base-table-container">
+    <el-table
+      v-loading="isLoading"
+      :header-cell-style="{background:'rgba(79,114,136,0.29)',color:'#fff',height: 28 + 'px',padding: 0}"
+      :row-style="setRowStyle"
+      :data="renderData"
+      border
+      style="width: 100%; background: transparent"
+    >
+      <el-table-column
+        v-for="item in renderTableHeadList"
+        :key="item.prop"
+        :show-overflow-tooltip="showOverflow"
+        v-bind="item"
+      >
+        <template slot-scope="scope">
+
+          <component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}" @emitData="emitData" />
+          <span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
+
+        </template>
+      </el-table-column>
+      <slot name="content" />
+    </el-table>
+  </div>
+</template>
+<script>
+import { isObject, isString } from 'lodash'
+export default {
+  name: 'BaseTable',
+  filters: {
+    commonFilter: (source, filterType = a => a) => {
+      return filterType(source)
+    }
+  },
+  props: {
+    tableData: {
+      type: Array,
+      required: true,
+      validator: val => val.filter(item => !isObject(item)).length === 0
+    },
+    tableConfig: {
+      type: Array,
+      required: true,
+      validator: val => val.filter(item => !isString(item.prop) || !isString(item.label)).length === 0
+    },
+    isLoading: {
+      type: Boolean,
+      required: false
+    },
+    page: {
+      type: Number,
+      required: false,
+      default: 1
+    },
+    limit: {
+      type: Number,
+      required: false,
+      default: 5
+    },
+    beilv: {
+      type: Number,
+      default: 1
+    },
+    showOverflow: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      tableConfigBak: [],
+      selectedBox: new Array(20).fill(true)
+    }
+  },
+  computed: {
+    renderData() {
+      if (this.tableData && !this.tableData[0]._pageIndex) {
+        this.tableData.forEach((item, index) => {
+          item._pageIndex = (this.page - 1) * this.limit + index + 1
+        })
+      }
+      return this.tableData.slice((this.page - 1) * this.limit, this.page * this.limit)
+    },
+    renderTableHeadList() {
+      return this.tableConfig.filter((item, index) => {
+        return this.selectedBox[index]
+      })
+    }
+  },
+  beforeMount() {
+    this.selectedBox = new Array(20).fill(true)
+  },
+  // mounted() {
+  //   this.tableConfigBak = cloneDeep(this.tableConfig).map(item => {
+  //     return {
+  //       ...item,
+  //       selected: true
+  //     }
+  //   })
+  // },
+  methods: {
+    emitData(val) {
+      this.$emit('emitFun', val)
+    },
+    setRowStyle(v) {
+      if (v.rowIndex % 2 === 0) {
+        return {
+          background: 'rgba(76,97,123,0.2)',
+          color: '#fff',
+          height: 26 * this.beilv + 'px',
+          padding: 0
+        }
+      } else {
+        return {
+          background: 'rgba(79,114,136,0.29)',
+          color: '#fff',
+          height: 26 * this.beilv + 'px',
+          padding: 0
+        }
+      }
+    }
+  }
+}
+</script>
+<style lang="scss">
+@import "~@/styles/index.scss";
+.visual-base-table-container {
+  .el-table {
+    border: 0;
+  }
+  .el-table::before,.el-table--border::after {
+    background-color: transparent;
+  }
+  .el-table th,td{
+    border-color: #0D1728 !important;
+    padding: 0;
+  }
+  .el-table tr {
+    background: transparent;
+  }
+  .el-table__row:hover > td {
+    background-color: rgba(79,114,136,0.29) !important;
+    }
+
+  .el-table__row--striped:hover > td {
+    background-color: rgba(79,114,136,0.29) !important;
+  }
+}
+// .setting {
+//   text-align: right;
+//   padding: 15px;
+//   .setting-box {
+//     width: 100px;
+//   }
+//   i {
+//     color: #aaa;
+//     @extend .pointer;
+//   }
+// }
+
+</style>

src/views/OperationalOverview/components/ProductionAndOperationCenterCockpit/colorDiv.vue

@@ -0,0 +1,31 @@
+<!--
+ * @Author: zhp
+ * @Date: 2022-01-23 21:02:57
+ * @LastEditTime: 2022-01-23 21:08:21
+ * @LastEditors: zhp
+ * @Description:
+-->
+<template>
+  <div
+    style=" width: 1em;
+  height: 1em;
+  border-radius: 50%;
+  margin:auto"
+    :style="{background:injectData.colour}"
+  />
+</template>
+
+<script>
+export default {
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  methods: {
+    emitClick() {
+    }
+  }
+}
+</script>

src/views/OperationalOverview/components/ProductionAndOperationCenterCockpit/topGroup.vue

@@ -0,0 +1,60 @@
+<!--
+ * @Author: zhp
+ * @Date: 2022-01-22 18:05:45
+ * @LastEditTime: 2022-01-23 10:50:29
+ * @LastEditors: zhp
+ * @Description:
+-->
+<template>
+  <div style="width:100%,text-align:center">
+    <div style="text-align:center">
+      <el-radio-group v-model="dateType" size="mini">
+        <el-radio-button v-for="item in labelList" :key="item.index" :label="item.index">
+          {{ item.label }}
+        </el-radio-button>
+      </el-radio-group>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TopGroup',
+  props: {
+    dateType: {
+      type: String,
+      default: '0'
+    },
+    labelList: {
+      type: Array,
+      required: true
+    }
+  },
+  data() {
+    return {}
+  },
+  mounted() {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-radio-button__inner {
+  width: 100%;
+  border: none;
+  background: #133648;
+  margin-bottom: 1em;
+  margin-top: -0.5em;
+  color: white;
+  line-height: 14px;
+  outline: none;
+  box-shadow: none;
+}
+::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
+  background: #3eb0ae;
+  border: none;
+  color: white;
+  outline: none;
+  box-shadow: none;
+}
+</style>

src/views/OperationalOverview/components/ProductionLineMonitoringCockpit/nowTeam.vue

@@ -0,0 +1,83 @@
+<!--
+ * @Author: gtz
+ * @Date: 2022-01-20 14:12:10
+ * @LastEditors: zhp
+ * @LastEditTime: 2022-01-25 16:57:00
+ * @Description: file content
+ * @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\ProductionLineMonitoringCockpit\nowTeam.vue
+-->
+<template>
+  <div class="now-team">
+    <el-row style="margin-bottom: 3em">
+      <p class="now-team-title">- 开始时间 -</p>
+      <p class="now-team-content blue">2021.1.26 13:30:21</p>
+    </el-row>
+    <el-row style="margin-bottom: 1em">
+      <el-col :span="8">
+        <p class="now-team-title">- 班组名称 -</p>
+        <p style="font-size:2em" class="now-team-content blue">中班执行一组</p>
+      </el-col>
+      <el-col :span="8">
+        <p class="now-team-title">- 原片投入(片) -</p>
+        <p class="now-team-content blue">122</p>
+      </el-col>
+      <el-col :span="8">
+        <p class="now-team-title">- 投入面积(㎡) -</p>
+        <p class="now-team-content blue">12000</p>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="8">
+        <p class="now-team-title">- 产品规格 -</p>
+        <p class="now-team-content blue">110</p>
+      </el-col>
+      <el-col :span="8">
+        <p class="now-team-title">- 执行工单 -</p>
+        <p class="now-team-content blue">110</p>
+      </el-col>
+      <el-col :span="8">
+        <p class="now-team-title">- 成品率 -</p>
+        <p class="now-team-content blue">98.8%</p>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'ProductionMonitoringCockpit',
+  data() {
+    return {}
+  },
+  computed: {},
+  mounted() {},
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.now-team{
+  width: 100%;
+  .now-team-title{
+    font-size: 1em;
+    line-height: 2em;
+    text-align: center;
+    color: #fff;
+  }
+  p {
+    margin: 0;
+  }
+  .now-team-content{
+    font-size: 2.5em;
+    font-weight: 300;
+    line-height: 1em;
+    color: #fff;
+    text-align: center;
+  }
+  .blue {
+    color: #52FFF1;
+  }
+}
+</style>

src/views/OperationalOverview/components/SimpleLineChart.vue

@@ -0,0 +1,229 @@
+<!--
+ * @Author: lb
+ * @Date: 2022-01-21 14:43:06
+ * @LastEditors: zhp
+ * @LastEditTime: 2023-02-07 13:46:05
+ * @Description: 简单折线图
+-->
+<template>
+  <div ref="SimpleLineChart" :style="{ height: height ? height + 'px' : '100%', width: '100%' }" />
+</template>
+
+<script>
+import echarts from 'echarts'
+import 'echarts/theme/macarons' // echarts theme
+import resize from './mixins/resize'
+
+const AxisLine = {
+  lineStyle: {
+    type: 'solid',
+    color: '#123341',
+    width: '1'
+  }
+}
+
+const AxisLabel = {
+  textStyle: {
+    color: '#666a74'
+  }
+}
+
+/**
+ * 2022.8.23 TODO:
+ * 1.一份数据三张表
+ * 2.切换选项卡时只更新一张表的数据
+ * 3.注释掉成品率条形图，改为将“投入、产出”拆分图，与“成品率”合计三张
+ */
+
+class ChartOption {
+  constructor() {
+    this.color = [
+      '#3574a8',
+      '#9f3476',
+      '#30959d',
+      '#5255be',
+      '#8b4449',
+      '#a29848',
+      '#FF6600',
+      '#FFFF00',
+      '#91cc75',
+      '#fac858',
+      '#ee6666',
+      '#73c0de',
+      '#3ba272',
+      '#fc8452',
+      '#9a60b4',
+      '#ea7ccc'
+    ]
+    this.tooltip = { trigger: 'axis' }
+    this.grid = {
+      left: '2%',
+      right: '2%',
+      bottom: '5%',
+      height: '80%',
+      containLabel: true
+    }
+    this.legend = {
+      itemHeight: 10,
+      itemWidth: 10,
+      y: 'top',
+      x: 'center',
+      top: 0,
+      // right: '1%',
+      data: [
+        /** dynamic */
+      ],
+      // right: '1%',
+      textStyle: {
+        fontSize: 12,
+        color: '#ced1d5'
+      }
+    }
+    this.xAxis = {
+      type: 'category',
+      boundaryGap: false,
+      splitLine: { show: false },
+      axisLine: AxisLine,
+      axisLabel: { ...AxisLabel, rotate: 20 },
+      data: [
+        /** dynamic */
+      ]
+    }
+    this.yAxis = {
+      type: 'value',
+      splitLine: { show: false },
+      axisLine: AxisLine,
+      axisLabel: AxisLabel
+    }
+    this.series = [
+      /** dynmaic */
+    ]
+  }
+
+  /**
+   * @param {object} rawdata
+   */
+  setLegend(rawdata) {
+    if (rawdata) {
+      const data = Object.keys(rawdata)
+      this.legend.data = data.map(item => ({ icon: 'roundRect', name: item }))
+    }
+  }
+
+  /**
+   * @param {object} rawdata
+   */
+  setCategory(rawdata) {
+    if (rawdata) {
+      if (Object.keys(rawdata).length > 0) {
+        const first = rawdata[Object.keys(rawdata)[0]]
+        this.xAxis.data = Object.keys(first)
+      }
+    }
+  }
+
+  /**
+   * @param {object} rawdata
+   */
+  setData(rawdata) {
+    if (rawdata) {
+      this.series = []
+      for (const key in rawdata) {
+        this.series.push({
+          name: key,
+          type: 'line',
+          data: Object.entries(rawdata[key]).map(([subkey, value]) => value)
+        })
+      }
+    }
+  }
+
+  clearOptions() {
+    this.legend.data.splice(0)
+    this.xAxis.data.splice(0)
+    this.series.splice(0)
+  }
+  // add more...
+}
+
+export default {
+  name: 'SimpleLineChart',
+  mixins: [resize],
+  props: {
+    beilv: {
+      type: Number,
+      default: 1
+    },
+    height: {
+      type: Number,
+      default: 1
+    },
+    legend: {
+      type: Array,
+      default: () => []
+    },
+    caty: {
+      type: Array,
+      default: () => []
+    },
+    dataList: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      defaultOpts: new ChartOption()
+    }
+  },
+  computed: {
+    showLegend() {
+      return this.legend.length > 0
+    }
+  },
+  watch: {
+    dataList: {
+      handler: function(val) {
+        this.updateChartOptions()
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose()
+      this.chart = null
+    }
+  },
+  methods: {
+    initChart() {
+      if (!this.chart) {
+        this.chart = echarts.init(this.$refs.SimpleLineChart)
+        this.updateChartOptions()
+      }
+    },
+
+    updateChartOptions() {
+      if (!this.chart) return
+      this.defaultOpts.clearOptions()
+      /** set */
+      this.defaultOpts.setLegend(this.dataList)
+      this.defaultOpts.setCategory(this.dataList)
+      this.defaultOpts.setData(this.dataList)
+      /** log */
+      this.chart.setOption({ ...this.defaultOpts })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart {
+  margin-top: -3em;
+}
+</style>

src/views/OperationalOverview/components/alarmLevel.vue

@@ -0,0 +1,51 @@
+<!--
+ * @Date: 2020-12-14 09:07:03
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-01-23 00:14:53
+ * @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
+ * @Description:
+-->
+<template>
+  <span class="alarm-level">
+    <span
+      style="display: inline-block; height: .6em;width: .6em; border-radius: .3em; position: relative;"
+      :style="{background: colorList[injectData.level].back, boxShadow: `0px 0px 2px 2px ${colorList[injectData.level].border}`}"
+    />
+    {{ injectData.level }}级
+  </span>
+</template>
+<script>
+export default {
+  name: 'NextDay',
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      colorList: {
+        1: {
+          back: 'rgba(255, 12, 12, 1)',
+          border: 'rgba(255, 12, 12, .5)'
+        },
+        2: {
+          back: 'rgba(255, 183, 12, 1)',
+          border: 'rgba(255, 183, 12, .5)'
+        },
+        3: {
+          back: 'rgba(39, 96, 255, 1)',
+          border: 'rgba(39, 96, 255, .5)'
+        },
+        4: {
+          back: 'rgba(12, 255, 30, 1)',
+          border: 'rgba(12, 255, 30, .5)'
+        }
+      }
+    }
+  },
+  methods: {
+  }
+}
+</script>

src/views/OperationalOverview/components/baseContainer/index.vue

@@ -0,0 +1,195 @@
+<!--
+ * @Author: gtz
+ * @Date: 2022-01-19 15:58:17
+ * @LastEditors: zhp
+ * @LastEditTime: 2023-11-14 13:28:27
+ * @Description: file content
+ * @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue
+-->
+<template>
+  <div class="base-container" ref="baseContainer" :style="{ height: '100%', fontSize: 12 + 'px', padding: 12 + 'px' }"
+    :class="{ 'no-padding': noPadding, 'border-none': !showLine }">
+    <!-- <div class="base-container" :style="{height: height + 'px', fontSize: 12 + 'px', padding: 12 + 'px'}"> -->
+    <template v-if="showLine">
+      <div class="line" />
+      <div class="line line-vertical" />
+      <div class="line line-right" />
+      <div class="line line-right-vertical" />
+      <div class="line line-bottom" />
+      <div class="line line-bottom-vertical" />
+      <div class="line line-bottom-right" />
+      <div class="line line-bottom-right-vertical" />
+    </template>
+
+    <div class="bar-item">
+      <div v-if="title" class="bar-title">
+        <span>
+          <svg-icon :icon-class="titleIcon" style="font-size: 1.5em; position: relative; top: .08em" />
+          {{ title }}
+        </span>
+      </div>
+      <div class="bar-content" :class="{ 'p-0': noContentPadding }">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BaseContainer',
+  props: {
+    showLine: {
+      type: Boolean,
+      default: true
+    },
+    noPadding: {
+      type: Boolean,
+      default: false
+    },
+    back: {
+      type: String,
+      default: ''
+    },
+    noContentPadding: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    titleIcon: {
+      type: String,
+      default: ''
+    },
+    height: {
+      type: Number,
+      default: 200
+    },
+    baseSize: {
+      type: Number,
+      default: 12
+    },
+    beilv: {
+      type: Number,
+      default: 1
+    }
+  },
+  data() {
+    return {
+      curIndex: 0,
+      // imgUrl: require(`../../../../assets/img/${this.back}.png`),
+    }
+  },
+  created() {
+    // console.log(this.back);
+    // this.$nextTick(() => {
+    // this.$refs.baseContainer.style = `background:url('../../../../assets/img/${this.back}.png') no-repeat;)`
+    // })
+    // console.log(this.$refs.baseContainer.style)
+  },
+  methods: {
+    changeTab(num) {
+      this.curIndex = num
+      this.$emit('tabSelect', num)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+.base-container {
+  color: #fff;
+  width: 100%;
+  // background-color: rgba($color: #061027, $alpha: 0.15);
+  position: relative;
+  // border: 2px solid;
+    background: url('../../../../assets/img/energy.png') no-repeat;
+    background-size: 100% 100%;
+  //   border-radius: 40px 0px 40px 0px;
+  // border-image: linear-gradient(360deg, rgba(157, 246, 254, 0.05), rgba(100, 233, 252, 0.9)) 2 2;
+  // .line {
+  //   position: absolute;
+  //   border-top: 4px solid #52fff1;
+  //   width: 2em;
+  //   top: -0.25em;
+  //   left: -0.25em;
+  //   &-vertical {
+  //     top: calc(-5em / 12);
+  //     left: calc(-1em / 12);
+  //     transform: rotate(90deg);
+  //     transform-origin: left;
+  //   }
+  //   &-right {
+  //     top: -0.25em;
+  //     right: -0.25em;
+  //     left: inherit;
+  //   }
+  //   &-right-vertical {
+  //     top: calc(-5em / 12);
+  //     right: calc(-1em / 12);
+  //     left: inherit;
+  //     transform: rotate(-90deg);
+  //     transform-origin: right;
+  //   }
+  //   &-bottom {
+  //     top: inherit;
+  //     left: -0.25em;
+  //     bottom: -0.25em;
+  //   }
+  //   &-bottom-vertical {
+  //     top: inherit;
+  //     left: calc(-1em / 12);
+  //     bottom: calc(-5em / 12);
+  //     transform: rotate(-90deg);
+  //     transform-origin: left;
+  //   }
+  //   &-bottom-right {
+  //     top: inherit;
+  //     left: inherit;
+  //     right: -0.25em;
+  //     bottom: -0.25em;
+  //   }
+  //   &-bottom-right-vertical {
+  //     top: inherit;
+  //     left: inherit;
+  //     right: calc(-1em / 12);
+  //     bottom: calc(-5em / 12);
+  //     transform: rotate(90deg);
+  //     transform-origin: right;
+  //   }
+  // }
+
+  .bar-item {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .bar-title {
+    width: 100%;
+    color: #52fff1;
+    font-size: 1.5em;
+    padding: 0.67em;
+  }
+
+  .bar-content {
+    padding: 1em;
+    flex: 1 auto;
+  }
+
+  .no-padding {
+    padding: 0;
+  }
+
+  .p-0 {
+    padding: 0;
+  }
+
+  &.border-none {
+    border: none;
+  }
+}
+</style>

src/views/OperationalOverview/components/baseContainer1/index.vue

@@ -0,0 +1,187 @@
+<!--
+ * @Author: gtz
+ * @Date: 2022-01-19 15:58:17
+ * @LastEditors: zhp
+ * @LastEditTime: 2023-09-21 16:15:14
+ * @Description: file content
+ * @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue
+-->
+<template>
+  <div
+    class="base-container"
+    :style="{ height: '100%', fontSize: 12 + 'px', padding: 12 + 'px' }"
+    :class="{ 'no-padding': noPadding, 'border-none': !showLine }"
+  >
+    <!-- <div class="base-container" :style="{height: height + 'px', fontSize: 12 + 'px', padding: 12 + 'px'}"> -->
+    <template v-if="showLine">
+      <div class="line" />
+      <div class="line line-vertical" />
+      <div class="line line-right" />
+      <div class="line line-right-vertical" />
+      <div class="line line-bottom" />
+      <div class="line line-bottom-vertical" />
+      <div class="line line-bottom-right" />
+      <div class="line line-bottom-right-vertical" />
+    </template>
+
+    <div class="bar-item">
+      <div v-if="title" class="bar-title">
+        <span>
+          <svg-icon :icon-class="titleIcon" style="font-size: 1.5em; position: relative; top: .08em" />
+          {{ title }}
+        </span>
+      </div>
+      <div class="bar-content" :class="{ 'p-0': noContentPadding }">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BaseContainer',
+  props: {
+    showLine: {
+      type: Boolean,
+      default: true
+    },
+    noPadding: {
+      type: Boolean,
+      default: false
+    },
+    noContentPadding: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    titleIcon: {
+      type: String,
+      default: ''
+    },
+    height: {
+      type: Number,
+      default: 200
+    },
+    baseSize: {
+      type: Number,
+      default: 12
+    },
+    beilv: {
+      type: Number,
+      default: 1
+    }
+  },
+  data() {
+    return {
+      curIndex: 0
+    }
+  },
+  mounted() {},
+  methods: {
+    changeTab(num) {
+      this.curIndex = num
+      this.$emit('tabSelect', num)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+.base-container {
+  color: #fff;
+  width: 100%;
+  background-color: rgba($color: #061027, $alpha: 0.15);
+  position: relative;
+  // border: 2px solid;
+    background: url('../../../../assets/img/bg-bottom-item.png') no-repeat;
+      background-size: 100% 100%;
+  //   border-radius: 40px 0px 40px 0px;
+  // border-image: linear-gradient(360deg, rgba(157, 246, 254, 0.05), rgba(100, 233, 252, 0.9)) 2 2;
+  // .line {
+  //   position: absolute;
+  //   border-top: 4px solid #52fff1;
+  //   width: 2em;
+  //   top: -0.25em;
+  //   left: -0.25em;
+  //   &-vertical {
+  //     top: calc(-5em / 12);
+  //     left: calc(-1em / 12);
+  //     transform: rotate(90deg);
+  //     transform-origin: left;
+  //   }
+  //   &-right {
+  //     top: -0.25em;
+  //     right: -0.25em;
+  //     left: inherit;
+  //   }
+  //   &-right-vertical {
+  //     top: calc(-5em / 12);
+  //     right: calc(-1em / 12);
+  //     left: inherit;
+  //     transform: rotate(-90deg);
+  //     transform-origin: right;
+  //   }
+  //   &-bottom {
+  //     top: inherit;
+  //     left: -0.25em;
+  //     bottom: -0.25em;
+  //   }
+  //   &-bottom-vertical {
+  //     top: inherit;
+  //     left: calc(-1em / 12);
+  //     bottom: calc(-5em / 12);
+  //     transform: rotate(-90deg);
+  //     transform-origin: left;
+  //   }
+  //   &-bottom-right {
+  //     top: inherit;
+  //     left: inherit;
+  //     right: -0.25em;
+  //     bottom: -0.25em;
+  //   }
+  //   &-bottom-right-vertical {
+  //     top: inherit;
+  //     left: inherit;
+  //     right: calc(-1em / 12);
+  //     bottom: calc(-5em / 12);
+  //     transform: rotate(90deg);
+  //     transform-origin: right;
+  //   }
+  // }
+
+  .bar-item {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .bar-title {
+    width: 100%;
+    color: #52fff1;
+    font-size: 1.5em;
+    padding: 0.67em;
+  }
+
+  .bar-content {
+    padding: 1em;
+    flex: 1 auto;
+  }
+
+  .no-padding {
+    padding: 0;
+  }
+
+  .p-0 {
+    padding: 0;
+  }
+
+  &.border-none {
+    border: none;
+  }
+}
+</style>

src/views/OperationalOverview/components/baseTable.vue

@@ -0,0 +1,187 @@
+<!--
+ * @Date: 2020-12-14 09:07:03
+ * @LastEditors: zhp
+ * @LastEditTime: 2023-11-14 10:11:09
+ * @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
+ * @Description:
+-->
+<template>
+  <div class="visual-base-table-container">
+    <el-table
+      v-loading="isLoading"
+      :header-cell-style="{background:'rgba(4, 74, 132, .19)',color:'#fff'}"
+      :row-style="setRowStyle"
+      :data="renderData"
+      border
+      style="width: 100%; background: transparent"
+    >
+      <el-table-column
+        v-if="page && limit && showIndex"
+        prop="_pageIndex"
+        :label="'tableHeader.index' | i18nFilter"
+        :width="70"
+        align="center"
+      />
+      <el-table-column
+        v-for="item in renderTableHeadList"
+        :key="item.prop"
+        :show-overflow-tooltip="showOverflow"
+        v-bind="item"
+      >
+        <template slot-scope="scope">
+
+          <component
+            :is="item.subcomponent"
+            v-if="item.subcomponent"
+            :inject-data="{...scope.row, ...item}"
+            @emitData="emitData"
+          />
+          <span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
+
+        </template>
+      </el-table-column>
+      <slot name="content" />
+    </el-table>
+  </div>
+</template>
+<script>
+import { isObject, isString } from 'lodash'
+export default {
+  name: 'BaseTable',
+  filters: {
+    commonFilter: (source, filterType = a => a) => {
+      return filterType(source)
+    }
+  },
+  props: {
+    tableData: {
+      type: Array,
+      required: true,
+      validator: val => val.filter(item => !isObject(item)).length === 0
+    },
+    tableConfig: {
+      type: Array,
+      required: true,
+      validator: val => val.filter(item => !isString(item.prop) || !isString(item.label)).length === 0
+    },
+    isLoading: {
+      type: Boolean,
+      required: false
+    },
+    page: {
+      type: Number,
+      required: false,
+      default: 1
+    },
+    limit: {
+      type: Number,
+      required: false,
+      default: 5
+    },
+    beilv: {
+      type: Number,
+      default: 1
+    },
+    showOverflow: {
+      type: Boolean,
+      default: true
+    },
+    showIndex: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      tableConfigBak: [],
+      selectedBox: new Array(100).fill(true)
+    }
+  },
+  computed: {
+    renderData() {
+      if (this.tableData.length && !this.tableData[0]._pageIndex) {
+        this.tableData.forEach((item, index) => {
+          item._pageIndex = (this.page - 1) * this.limit + index + 1
+        })
+      }
+      return this.tableData.slice((this.page - 1) * this.limit, this.page * this.limit)
+    },
+    renderTableHeadList() {
+      return this.tableConfig.filter((item, index) => {
+        return this.selectedBox[index]
+      })
+    }
+  },
+  beforeMount() {
+    this.selectedBox = new Array(100).fill(true)
+  },
+  methods: {
+    emitData(val) {
+      this.$emit('emitFun', val)
+    },
+    setRowStyle(v) {
+      if (v.rowIndex % 2 === 0) {
+        return {
+          background: 'rgba(14, 32, 62, 1)',
+          color: 'rgba(255,255,255,0.5)',
+          height: 26  + 'px',
+          lineHeight: 26 + 'px',
+          padding: 0,
+          fontSize: 12  + 'px'
+        }
+      } else {
+        return {
+          background: 'rgba(32, 55, 96, 1)',
+          color: 'rgba(255,255,255,0.5)',
+          height: 26  + 'px',
+          lineHeight: 26  + 'px',
+          padding: 0,
+          fontSize: 12  + 'px'
+        }
+      }
+    },
+    setCellStyle() {
+      return {
+        // lineHeight: 23  + 'px'
+      }
+    }
+  }
+}
+</script>
+<style lang="scss">
+@import "../styles/index.scss";
+.visual-base-table-container {
+  .el-table {
+    border: 0;
+  }
+  .el-table::before,.el-table--border::after {
+    background-color: transparent;
+  }
+  .el-table th,td{
+    border-color: #0D1728 !important;
+    padding: 0;
+  }
+  .el-table tr {
+    background: transparent;
+  }
+  .el-table__row:hover > td {
+    background-color: rgba(79,114,136,0.29) !important;
+    }
+
+  .el-table__row--striped:hover > td {
+    background-color: rgba(79,114,136,0.29) !important;
+  }
+}
+// .setting {
+//   text-align: right;
+//   padding: 15px;
+//   .setting-box {
+//     width: 100px;
+//   }
+//   i {
+//     color: #aaa;
+//     @extend .pointer;
+//   }
+// }
+
+</style>

src/views/OperationalOverview/components/baseVideo.vue

@@ -0,0 +1,40 @@
+<!--
+ * @Date: 2020-12-14 09:07:03
+ * @LastEditors: zhp
+ * @LastEditTime: 2023-11-13 16:41:28
+ * @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
+ * @Description:
+-->
+<template>
+  <div class="base-video-container">
+    <!-- <video id="v1" :style="{height: videoHeight + 'px'}" :src="require('../../../assets/video/3d.mkv')" autoplay loop muted /> -->
+  </div>
+</template>
+<script>
+export default {
+  name: 'BaseVideo',
+  props: {
+    videoHeight: {
+      type: Number,
+      default: () => 200
+    },
+    beilv: {
+      type: Number,
+      default: () => 1
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .base-video-container{
+    width: 100%;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+  }
+</style>

src/views/OperationalOverview/components/doubleYChart .vue

@@ -0,0 +1,325 @@
+<!--
+ * @Author: zhp
+ * @Date: 2023-09-21 09:06:28
+ * @LastEditTime: 2023-10-16 14:20:45
+ * @LastEditors: zhp
+ * @Description:
+-->
+<template>
+  <div>
+    <div :id="id" :class="className" :style="{ height: height + 'px', width: width }" />
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import 'echarts/theme/macarons' // echarts theme
+import resize from './mixins/resize'
+
+export default {
+  name: 'OverviewBar',
+  mixins: [resize],
+  props: {
+    id: {
+      type: String,
+      default: 'linearBarChart'
+    },
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    borderRadius: {
+      type: Array,
+      default: () => [9, 9, 0, 0]
+    },
+    beilv: {
+      type: Number,
+      default: 1
+    },
+    height: {
+      type: Number,
+      default: 200
+    },
+    showLegend: {
+      type: Boolean,
+      default: false
+    },
+    nameList: {
+      type: Array,
+      default: () => []
+    },
+    dataList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      series: []
+    }
+  },
+  mounted() {
+    console.log('mounted')
+    console.log('borderRadius: ', this.borderRadius)
+
+    this.series = [
+      {
+        name: this.dataList[0].name,
+        type: 'bar',
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: this.dataList[0].topColor },
+            { offset: 1, color: this.dataList[0].bottomColor }
+          ]),
+          barBorderRadius: this.borderRadius
+        },
+        data: this.dataList[0].data,
+        barWidth: 6
+      },
+      {
+        name: this.dataList[1].name,
+        type: 'bar',
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: this.dataList[1].topColor },
+            { offset: 1, color: this.dataList[1].bottomColor }
+          ]),
+          barBorderRadius: this.borderRadius
+        },
+        data: this.dataList[1].data,
+        barWidth: 6
+      },
+      {
+        name: this.dataList[2].name,
+        type: 'bar',
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: this.dataList[2].topColor },
+            { offset: 1, color: this.dataList[2].bottomColor }
+          ]),
+          // borderRadius: [5, 5, 0, 0]
+          barBorderRadius: this.borderRadius
+        },
+        data: this.dataList[2].data,
+        barWidth: 6
+      },
+      {
+        name: this.dataList[3].name,
+        type: 'bar',
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: this.dataList[3].topColor },
+            { offset: 1, color: this.dataList[3].bottomColor }
+          ]),
+          // borderRadius: [5, 5, 0, 0]
+          barBorderRadius: this.borderRadius
+        },
+        data: this.dataList[3].data,
+        barWidth: 6
+      },
+      {
+        name: this.dataList[4].name,
+        type: 'bar',
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: this.dataList[4].topColor },
+            { offset: 1, color: this.dataList[4].bottomColor }
+          ]),
+          // borderRadius: [5, 5, 0, 0]
+          barBorderRadius: this.borderRadius
+        },
+        data: this.dataList[4].data,
+        barWidth: 6
+      },
+      {
+        name: this.dataList[5].name,
+        type: 'bar',
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: this.dataList[5].topColor },
+            { offset: 1, color: this.dataList[5].bottomColor }
+          ]),
+          // borderRadius: [5, 5, 0, 0]
+          barBorderRadius: this.borderRadius
+        },
+        data: this.dataList[5].data,
+        barWidth: 6
+      }
+    ]
+
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      console.log(1)
+      const colors = ['#5470C6', '#91CC75', '#EE6666']
+      this.chart = echarts.init(document.getElementById(this.id))
+      this.chart.setOption({
+        color: colors,
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross'
+          }
+        },
+        grid: {
+          right: '20%'
+        },
+        legend: {
+          data: ['产线产量', '产线良品率'],
+          textStyle: {
+            fontSize: 12 * this.beilv,
+            color: '#ced1d5'
+          }
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              type: 'solid',
+              color: '#213259', // 左边线的颜色
+              width: '1' // 坐标线的宽度
+            }
+          },
+          axisLabel: {
+            textStyle: {
+              color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: '#213259'
+            }
+          },
+          data: ['钢一线', '钢二线', '钢三线', '钢四线', '钢五线', '钢六线', '钢七线', '钢八线']
+        },
+        // yAxis: {
+
+        // },
+        yAxis: [
+          {
+            min: function() { // 取最小值向下取整为最小刻度
+              return 0
+            },
+            max: function(value) { // 取最大值向上取整为最大刻度
+              return Math.ceil(value.max)
+            },
+            scale: true,
+            type: 'value',
+            name: '良品率/%',
+            nameTextStyle: {// y轴上方单位的颜色
+              color: '#fff'
+            },
+            position: 'right',
+            alignTicks: true,
+            axisLine: {
+              lineStyle: {
+                type: 'solid',
+                color: '#213259', // 左边线的颜色
+                width: '1' // 坐标线的宽度
+              }
+            },
+            axisLabel: {
+              textStyle: {
+                color: '#ced1d5', // 坐标值得具体的颜色
+                formatter: '{value} 片'
+
+              }
+            },
+            splitLine: {
+              lineStyle: {
+                color: '#213259'
+              }
+            }
+            // type: 'value'
+            // axisLine: {
+            //   show: true,
+            //   lineStyle: {
+            //     color: colors[0]
+            //   }
+            // },
+          },
+          {
+            min: function() { // 取最小值向下取整为最小刻度
+              return 0
+            },
+            max: function(value) { // 取最大值向上取整为最大刻度
+              return Math.ceil(value.max)
+            },
+            scale: true,
+            type: 'value',
+            name: '产量/片', // y轴上方的单位
+            nameTextStyle: {// y轴上方单位的颜色
+              color: '#fff'
+            },
+            position: 'left',
+            alignTicks: true,
+            axisLine: {
+              lineStyle: {
+                type: 'solid',
+                color: '#213259', // 左边线的颜色
+                width: '1' // 坐标线的宽度
+              }
+            },
+            axisLabel: {
+              textStyle: {
+                color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
+                formatter: '{value} 片'
+              }
+            },
+            splitLine: {
+              lineStyle: {
+                color: '#213259'
+              }
+            }
+            // type: 'value'
+            // axisLine: {
+            //   show: true,
+            //   lineStyle: {
+            //     color: colors[1]
+            //   }
+            // },
+          }
+        ],
+        series: [
+          {
+            name: '产线产量',
+            type: 'bar',
+            yAxisIndex: 1,
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#9DD5FF' },
+                { offset: 1, color: '#1295FF' }
+              ])
+              // barBorderRadius: this.borderRadius
+            },
+            data: [
+              2032, 3032, 1802, 2932, 2322, 2613, 2873, 2561
+            ]
+          },
+          {
+            name: '产线良品率',
+            type: 'line',
+            yAxisIndex: 0,
+            data: [98, 97, 94, 97.6, 98.2, 98.2, 97.4, 98.5]
+          }
+        ]
+      })
+    }
+  }
+}
+</script>

src/views/OperationalOverview/components/linearBarChart.vue

@@ -0,0 +1,237 @@
+<template>
+  <div>
+    <div :id="id" :class="className" :style="{ height: height + 'px', width: width }" />
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import 'echarts/theme/macarons' // echarts theme
+import resize from './mixins/resize'
+
+export default {
+  name: 'OverviewBar',
+  mixins: [resize],
+  props: {
+    id: {
+      type: String,
+      default: 'linearBarChart'
+    },
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    borderRadius: {
+      type: Array,
+      default: () => [9, 9, 0, 0]
+    },
+    beilv: {
+      type: Number,
+      default: 1
+    },
+    height: {
+      type: Number,
+      default: 200
+    },
+    showLegend: {
+      type: Boolean,
+      default: false
+    },
+    nameList: {
+      type: Array,
+      default: () => []
+    },
+    dataList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      series: []
+    }
+  },
+  mounted() {
+    console.log('mounted')
+    console.log('borderRadius: ', this.borderRadius)
+
+    this.series = [
+      {
+        name: this.dataList[0].name,
+        type: 'bar',
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: this.dataList[0].topColor },
+            { offset: 1, color: this.dataList[0].bottomColor }
+          ]),
+          barBorderRadius: this.borderRadius
+        },
+        data: this.dataList[0].data,
+        barWidth: 6
+      },
+      {
+        name: this.dataList[1].name,
+        type: 'bar',
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: this.dataList[1].topColor },
+            { offset: 1, color: this.dataList[1].bottomColor }
+          ]),
+          barBorderRadius: this.borderRadius
+        },
+        data: this.dataList[1].data,
+        barWidth: 6
+      },
+      {
+        name: this.dataList[2].name,
+        type: 'bar',
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: this.dataList[2].topColor },
+            { offset: 1, color: this.dataList[2].bottomColor }
+          ]),
+          // borderRadius: [5, 5, 0, 0]
+          barBorderRadius: this.borderRadius
+        },
+        data: this.dataList[2].data,
+        barWidth: 6
+      },
+      {
+        name: this.dataList[3].name,
+        type: 'bar',
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: this.dataList[3].topColor },
+            { offset: 1, color: this.dataList[3].bottomColor }
+          ]),
+          // borderRadius: [5, 5, 0, 0]
+          barBorderRadius: this.borderRadius
+        },
+        data: this.dataList[3].data,
+        barWidth: 6
+      },
+      {
+        name: this.dataList[4].name,
+        type: 'bar',
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: this.dataList[4].topColor },
+            { offset: 1, color: this.dataList[4].bottomColor }
+          ]),
+          // borderRadius: [5, 5, 0, 0]
+          barBorderRadius: this.borderRadius
+        },
+        data: this.dataList[4].data,
+        barWidth: 6
+      },
+      {
+        name: this.dataList[5].name,
+        type: 'bar',
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: this.dataList[5].topColor },
+            { offset: 1, color: this.dataList[5].bottomColor }
+          ]),
+          // borderRadius: [5, 5, 0, 0]
+          barBorderRadius: this.borderRadius
+        },
+        data: this.dataList[5].data,
+        barWidth: 6
+      }
+    ]
+
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      console.log(1)
+      this.chart = echarts.init(document.getElementById(this.id))
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        grid: {
+          top: 30,
+          left: '2%',
+          right: '2%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              type: 'solid',
+              color: '#213259', // 左边线的颜色
+              width: '1' // 坐标线的宽度
+            }
+          },
+          axisLabel: {
+            textStyle: {
+              color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: '#213259'
+            }
+          },
+          data: this.nameList
+        },
+        yAxis: {
+          axisLine: {
+            lineStyle: {
+              type: 'solid',
+              color: '#213259', // 左边线的颜色
+              width: '1' // 坐标线的宽度
+            }
+          },
+          axisLabel: {
+            textStyle: {
+              color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: '#213259'
+            }
+          },
+          type: 'value'
+        },
+        legend: {
+          itemHeight: 10,
+          itemWidth: 10,
+          x: 'center', // 可设定图例在左、右、居中
+          y: 'top', // 可设定图例在上、下、居中
+          show: this.showLegend,
+          data: this.dataList,
+          right: '1%',
+          textStyle: {
+            fontSize: 12 * this.beilv,
+            color: '#ced1d5'
+          }
+        },
+        series: this.series
+      })
+    }
+  }
+}
+</script>

src/views/OperationalOverview/components/mixins/resize.js

@@ -0,0 +1,55 @@
+import { debounce } from '@/utils'
+
+export default {
+  data() {
+    return {
+      $_sidebarElm: null,
+      $_resizeHandler: null
+    }
+  },
+  mounted() {
+    this.$_resizeHandler = debounce(() => {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    }, 100)
+    this.$_initResizeEvent()
+    this.$_initSidebarResizeEvent()
+  },
+  beforeDestroy() {
+    this.$_destroyResizeEvent()
+    this.$_destroySidebarResizeEvent()
+  },
+  // to fixed bug when cached by keep-alive
+  // https://github.com/PanJiaChen/vue-element-admin/issues/2116
+  activated() {
+    this.$_initResizeEvent()
+    this.$_initSidebarResizeEvent()
+  },
+  deactivated() {
+    this.$_destroyResizeEvent()
+    this.$_destroySidebarResizeEvent()
+  },
+  methods: {
+    // use $_ for mixins properties
+    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
+    $_initResizeEvent() {
+      window.addEventListener('resize', this.$_resizeHandler)
+    },
+    $_destroyResizeEvent() {
+      window.removeEventListener('resize', this.$_resizeHandler)
+    },
+    $_sidebarResizeHandler(e) {
+      if (e.propertyName === 'width') {
+        this.$_resizeHandler()
+      }
+    },
+    $_initSidebarResizeEvent() {
+      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
+      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    $_destroySidebarResizeEvent() {
+      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
+    }
+  }
+}

src/views/OperationalOverview/components/nextDay.vue

@@ -0,0 +1,40 @@
+<!--
+ * @Date: 2020-12-14 09:07:03
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-01-23 00:14:53
+ * @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
+ * @Description:
+-->
+<template>
+  <div class="next-day" :style="{background: injectData.nextLong < 0 ? 'rgba(255, 84, 76, 0.6)' : injectData.nextLong < 10 ? 'rgba(251, 211, 80, 0.6)' : 'rgba(142, 254, 83, 0.6)'}">
+    {{ injectData.nextLong }}
+  </div>
+</template>
+<script>
+export default {
+  name: 'NextDay',
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .next-day{
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+</style>

src/views/OperationalOverview/components/threeBarChart.vue

@@ -0,0 +1,237 @@
+
+<template>
+  <div>
+    <div :id="id" :class="className" :style="{ height: height + 'px', width:width}" />
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+import 'echarts/theme/macarons' // echarts theme
+import resize from './mixins/resize'
+
+export default {
+  name: 'OverviewBar',
+  mixins: [resize],
+  props: {
+    id: {
+      type: String,
+      default: 'threeBarChart'
+    },
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    beilv: {
+      type: Number,
+      default: 1
+    },
+    height: {
+      type: Number,
+      default: 200
+    },
+    showLegend: {
+      type: Boolean,
+      default: false
+    },
+    nameList: {
+      type: Array,
+      default: () => []
+    },
+    dataList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      series: []
+    }
+  },
+  mounted() {
+    if (this.dataList.length > 1) {
+      this.series = [
+        { // 柱体
+          name: this.dataList[0].name,
+          type: 'bar',
+          barWidth: 30,
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: this.dataList[0].topColor },
+              { offset: 1, color: this.dataList[0].bottomColor }
+            ])
+          },
+          data: this.dataList[0].data
+        },
+        { // 柱顶
+          name: this.dataList[0].name,
+          type: 'pictorialBar',
+          barWidth: 20,
+          symbol: 'diamond',
+          symbolPosition: 'end',
+          symbolOffset: [0, '-50%'],
+          symbolSize: [30, 12],
+          zlevel: 2,
+          itemStyle: { color: this.dataList[0].topColor },
+          data: this.dataList[0].data
+        },
+        { // 柱底
+          name: this.dataList[0].name,
+          type: 'pictorialBar',
+          barWidth: 20,
+          symbol: 'diamond',
+          symbolOffset: [0, '50%'],
+          symbolSize: [30, 15],
+          itemStyle: { color: this.dataList[0].bottomColor },
+          data: this.dataList[0].data
+        },
+        { // 柱体
+          name: this.dataList[1].name,
+          type: 'bar',
+          barWidth: 30,
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: this.dataList[1].topColor },
+              { offset: 1, color: this.dataList[1].bottomColor }
+            ])
+          },
+          data: this.dataList[1].data
+        },
+        { // 柱顶
+          name: this.dataList[1].name,
+          type: 'pictorialBar',
+          barWidth: 20,
+          symbol: 'diamond',
+          symbolPosition: 'end',
+          symbolOffset: [0, '-50%'],
+          symbolSize: [30, 12],
+          zlevel: 2,
+          itemStyle: { color: this.dataList[1].topColor },
+          data: this.dataList[1].data
+        },
+        { // 柱底
+          name: this.dataList[1].name,
+          type: 'pictorialBar',
+          barWidth: 20,
+          symbol: 'diamond',
+          symbolOffset: [0, '50%'],
+          symbolSize: [30, 15],
+          itemStyle: { color: this.dataList[1].topColor },
+          data: this.dataList[1].data
+        }
+      ]
+    } else {
+      this.series = [
+        { // 柱体
+          name: this.dataList[0].name,
+          type: 'bar',
+          barWidth: 12,
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: this.dataList[0].topColor },
+              { offset: 1, color: this.dataList[0].bottomColor }
+            ])
+          },
+          data: this.dataList[0].data
+        },
+        { // 柱顶
+          name: this.dataList[0].name,
+          type: 'pictorialBar',
+          barWidth: 12,
+          symbol: 'diamond',
+          symbolPosition: 'end',
+          symbolOffset: [0, '-50%'],
+          symbolSize: [12, 6],
+          zlevel: 2,
+          itemStyle: { color: this.dataList[0].topColor },
+          data: this.dataList[0].data
+        },
+        { // 柱底
+          name: this.dataList[0].name,
+          type: 'pictorialBar',
+          barWidth: 12,
+          symbol: 'diamond',
+          symbolOffset: [0, '50%'],
+          symbolSize: [12, 6],
+          itemStyle: { color: this.dataList[0].bottomColor },
+          data: this.dataList[0].data
+        }
+      ]
+    }
+    this.$nextTick(() => {
+      console.log(this.series)
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.getElementById(this.id))
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        grid: {
+          top: 10,
+          left: '2%',
+          right: '2%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              type: 'solid',
+              color: '#213259', // 左边线的颜色
+              width: '1'// 坐标线的宽度
+            }
+          },
+          axisLabel: {
+            textStyle: {
+              color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
+            }
+          },
+          data: this.nameList
+        },
+        yAxis: {
+          axisLine: {
+            lineStyle: {
+              type: 'solid',
+              color: '#213259', // 左边线的颜色
+              width: '1'// 坐标线的宽度
+            }
+          },
+          axisLabel: {
+            textStyle: {
+              color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
+
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: '#213259'
+            }
+          },
+          type: 'value'
+        },
+        series: this.series
+      })
+    }
+  }
+}
+</script>

src/views/OperationalOverview/components/topRadioGroup.vue

@@ -0,0 +1,86 @@
+<!--
+ * @Author: zwq
+ * @Date: 2022-01-21 14:27:34
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-01-21 15:55:08
+ * @Description:
+-->
+
+<template>
+  <div class="top-radio-group" style="width:100%;text-align:center;">
+    <el-radio-group v-model="radioModel" size="mini" @change="handleChange">
+      <el-radio-button v-for="item in radioList" :key="item.value" :label="item.value">
+        {{ item.name }}
+      </el-radio-button>
+    </el-radio-group>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TopRadioGroup',
+  props: {
+    dateType: {
+      type: Number,
+      default: 0
+    },
+    radioList: {
+      type: Array,
+      default: () => {
+        return [{ value: '0', name: '当天' }, { value: '1', name: '本周' }, { value: '2', name: '本月' }]
+      }
+    }
+  },
+  data() {
+    return {
+      radioModel: 0
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.radioModel = this.dateType
+    })
+  },
+  methods: {
+    handleChange(v) {
+      this.$emit('change-time-range', v)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.top-radio-group >>> .el-radio-group {
+  display: flex;
+  width: 100%;
+}
+
+.top-radio-group >>> .el-radio-button {
+  flex: 1 1;
+}
+
+.top-radio-group >>> .el-radio-button__inner {
+  padding: 4px 0;
+  text-align: center;
+}
+
+::v-deep .el-radio-button__inner {
+  width: 100%;
+  border: none;
+  background: #133648;
+  padding: 3px 2em;
+  margin-bottom: 1em;
+  margin-top: -0.5em;
+  color: white;
+  line-height: 14px;
+  outline: none;
+  box-shadow: none;
+}
+::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
+  background: #3eb0ae;
+  border: none;
+  color: white;
+  outline: none;
+  box-shadow: none;
+}
+</style>

src/views/OperationalOverview/components/utilChart.vue

@@ -0,0 +1,67 @@
+<!--
+ * @Date: 2020-12-14 09:07:03
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-01-23 00:14:53
+ * @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
+ * @Description:
+-->
+<template>
+  <el-row class="util-chart">
+    <el-col :span="20" class="chart-main-box">
+      <div class="chart-main">
+        <div class="chart-cover" :style="{width: percent + '%', backgroundImage: `linear-gradient(to right, ${leftColor}, ${rightColor})`}" />
+      </div>
+    </el-col>
+    <el-col :span="3" :offset="1">
+      {{ percent }}%
+    </el-col>
+  </el-row>
+</template>
+<script>
+export default {
+  name: 'UtilChart',
+  props: {
+    percent: {
+      type: Number,
+      default: () => 0
+    },
+    leftColor: {
+      type: String,
+      default: () => 'rgba(18, 149, 255, 1)'
+    },
+    rightColor: {
+      type: String,
+      default: () => 'rgba(157, 213, 255, 1)'
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .util-chart{
+    width: 100%;
+    .chart-main-box {
+      position: relative;
+      height: 1em;
+      .chart-main {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 100%;
+        background: rgba(30, 45, 69, 1);
+        border-radius: 1em;
+        .chart-cover {
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          left: 0;
+          border-radius: 1em;
+        }
+      }
+    }
+  }
+</style>

src/views/OperationalOverview/components/videoFooter.vue

@@ -0,0 +1,66 @@
+<!--
+ * @Date: 2020-12-14 09:07:03
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-01-23 00:14:53
+ * @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
+ * @Description:
+-->
+<template>
+  <el-row class="base-footer-container" :style="{height: 36 + 'px'}">
+    <el-col v-for="item in footerList" :key="item" :span="4" class="base-footer-item" :style="{lineHeight: 36 + 'px', fontSize: 18 + 'px'}" :class="check === item ? 'isActive' : ''" @click.native="handleCheck(item)">
+      {{ item }}
+    </el-col>
+  </el-row>
+</template>
+<script>
+export default {
+  name: 'BaseFooter',
+  props: {
+    beilv: {
+      type: Number,
+      default: () => 1
+    }
+  },
+  data() {
+    return {
+      footerList: ['钢1线', '钢2线', '钢3线', '钢4线', '钢5线', '钢6线'],
+      check: '钢1线'
+    }
+  },
+  methods: {
+    handleCheck(name) {
+      this.check = name
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .base-footer-container{
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    .base-footer-item {
+      text-align: center;
+      cursor: pointer;
+      background: rgba($color: #133648, $alpha: 0.29);
+    }
+    .isActive {
+      background: linear-gradient(to right, rgba($color: #4E8E9B, $alpha: 0.29), #2DA99F, rgba($color: #265562, $alpha: 0.29));
+      position: relative;
+    }
+    .isActive::before {
+      content: '';
+      position: absolute;
+      top: -10px;
+      left: 0;
+      height:0;
+      width: 100%;
+      height: 10px;
+      transform-origin: 50% 100% 0;
+      transform: perspective(40px)  rotateX(45deg);
+      background-image: linear-gradient(to right, rgba($color: #4E8E9B, $alpha: 0.29), #2DA99F, rgba($color: #265562, $alpha: 0.29));
+    }
+  }
+</style>

src/views/OperationalOverview/processingBoard.vue

@@ -0,0 +1,969 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-07-19 15:18:30
+ * @LastEditors: zhp
+ * @LastEditTime: 2023-10-17 11:10:22
+ * @Description:
+-->
+<template>
+  <div id="container" ref="container" class="visual-container" :style="styles">
+    <el-row
+      class="container-title"
+      :style="{
+        height: 88 + 'px',
+        lineHeight: 88 + 'px',
+        fontSize: 31 + 'px'
+      }"
+    >
+      <img src="../../assets/img/logo.png" style="width:1.1em;position:relative;top:.4em" alt="">
+      许昌安彩深加工看板
+      <!-- <el-button
+        type="text"
+        class="title-button"
+        :style="{ right: 33 + 'px', top: 37 + 'px' }"
+        @click="changeFullScreen"
+      >
+        <svg-icon v-if="isFullScreen" icon-class="unFullScreenView" />
+        <svg-icon v-else icon-class="fullScreenView" />
+      </el-button> -->
+    </el-row>
+    <el-row class="container-main flex-col" type="flex">
+      <el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="15" type="flex" class="flex-1">
+        <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
+          <base-container  :title="'设备报警'" :title-icon="'5_1'">
+            <base-table1
+              :page="1"
+              :limit="9"
+              :show-index="false"
+              :table-config="qualityYearTableProps"
+              :table-data="qualityYearList"
+            />
+          </base-container>
+        </el-col>
+
+        <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
+          <base-container :title="'各工序缺陷汇总'" :title-icon="'5_2'">
+            <div class="visual-select">
+              <el-select v-model="modelMonth" size="mini" placeholder="">
+                <el-option key="1" value="钢1线" label="钢1线" default />
+              </el-select>
+            </div>
+            <base-table1
+              :page="1"
+              :limit="9"
+              :show-index="false"
+
+              :table-config="qualityMonthTableProps"
+              :table-data="qualityMonthList"
+            />
+          </base-container>
+        </el-col>
+
+        <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
+          <base-container  :title="'设备监控'" :title-icon="'5_3'">
+            <!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
+              <top-radio-group />
+            </div> -->
+
+            <!-- 为外部添加一个容器并显式地设置一个高度: -->
+            <!-- <div style="height: 300px;"> -->
+            <div style="width:100%; overflow: hidden scroll;">
+              <!-- <el-row style="margin-bottom: 1em">
+                    <p class="now-team-title">加工工单进度</p>
+                  </el-row> -->
+              <el-row v-for="op in orderProcessList" :key="op.id" style="margin-bottom: 1em">
+                <el-progress :percentage="op.outRate * 100" class="custom-progress-bar" />
+                <p v-if="op.outRate === 1" class="now-secondary-title" style="color:#4679FD">
+                  <i class="el-icon-check" />
+                  {{ op.name }}
+                </p>
+                <p v-else class="now-secondary-title">{{ op.name }}</p>
+              </el-row>
+              <!-- <el-row>
+                    <el-progress :percentage="100" class="custom-progress-bar" />
+                    <p class="now-secondary-title" style="color:#4679FD">
+                      <i class="el-icon-check" />
+                      成都碲化镉5000一期订单
+                    </p>
+                  </el-row>
+                  <el-row>
+                    <el-progress :percentage="85" class="custom-progress-bar" />
+                    <p class="now-secondary-title">成都碲化镉二订单</p>
+                  </el-row>
+                  <el-row>
+                    <el-progress :percentage="85" class="custom-progress-bar" />
+                    <p class="now-secondary-title">长利订单1000</p>
+                  </el-row>
+                  <el-row>
+                    <el-progress :percentage="85" class="custom-progress-bar" />
+                    <p class="now-secondary-title">国际工程20号订单</p>
+                  </el-row>
+                  <el-row>
+                    <el-progress :percentage="85" class="custom-progress-bar" />
+                    <p class="now-secondary-title">铜铟镓硒眉山10万订单</p>
+                  </el-row> -->
+            </div>
+            <!-- </div> -->
+          </base-container>
+        </el-col>
+      </el-row>
+
+      <el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="12" type="flex" class="flex-1">
+        <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
+          <base-container  :height="256" :title="'能源监控'" :title-icon="'5_5'">
+            <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
+              <top-radio-group />
+            </div>
+            <el-row :gutter="9">
+              <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24">
+                <linear-bar-chart
+                  :name-list="cxNameList"
+                  :data-list="cxDataList"
+                  :height="359"
+
+                  :show-legend="true"
+                />
+              </el-col>
+              <!-- <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
+                <base-table3
+                  :page="2"
+                  :limit="5"
+
+                  :table-config="qualityTableProps2"
+                  :table-data="qualityList2"
+                />
+              </el-col> -->
+            </el-row>
+          </base-container>
+        </el-col>
+        <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
+          <base-container  :height="318 + 338 + 16" :title="'产线产量及良品率'" :title-icon="'5_4'">
+            <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
+              <top-radio-group />
+            </div>
+            <!-- 像下面这样表格里的limit值，也许可以用js动态计算出来 -->
+            <double-y-chart
+              :id=" 'doubleYChart' "
+              :name-list="cxNameList"
+              :data-list="cxDataList"
+              :height="359"
+
+              :show-legend="true"
+            />
+          </base-container>
+        </el-col>
+      </el-row>
+
+      <!-- end  -->
+      <!-- <el-col :span="16">
+              <el-row>
+                <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24">
+                  <base-container  :height="672">
+                    <base-video :video-height="624"  />
+                  </base-container>
+                </el-col>
+              </el-row>
+            </el-col>
+      -->
+    </el-row>
+  </div>
+</template>
+
+<script>
+import baseContainer from './components/baseContainer'
+import baseTable1 from './components/baseTable'
+// import baseTable2 from './components/baseTable'
+// import baseTable3 from './components/baseTable'
+import TopRadioGroup from './components/topRadioGroup'
+// import pieChart1 from './components/PieChart'
+// import pieChart2 from './components/PieChart'
+// import pieChart3 from './components/PieChart'
+// import { mapGetters } from 'vuex'
+import screenfull from 'screenfull'
+// import BaseVideo from './components/baseVideo.vue'
+import alarmLevel from './components/alarmLevel'
+// import axios from '@/utils/request'
+import doubleYChart from './components/doubleYChart '
+// import elementResizeDetectorMaker from 'element-resize-detector';
+// var erd = elementResizeDetectorMaker(); //创建实例
+// let resizeFun = null
+
+import LinearBarChart from './components/linearBarChart'
+const qualityTableProps1 = [
+  {
+    prop: 'name',
+    label: '产线名称'
+  },
+  {
+    prop: 'createTime',
+    label: '发生时间'
+  },
+  {
+    prop: 'code',
+    label: '质量编码'
+  },
+  {
+    prop: 'content',
+    label: '质量内容'
+  }
+]
+const qualityTableProps2 = [
+  {
+    prop: 'name',
+    label: '工序名称'
+  },
+  {
+    prop: 'createTime',
+    label: '发生时间'
+  },
+  {
+    prop: 'code',
+    label: '质量编码'
+  },
+  {
+    prop: 'content',
+    label: '质量内容'
+  }
+]
+const cxNameList = ['周一', '周二', '周三', '周四', '周五']
+
+const cxDataList = [
+  {
+    topColor: '#9DD5FF',
+    bottomColor: '#1295FF',
+    name: '电耗能',
+    data: [100, 150, 121, 97, 140]
+  },
+  {
+    topColor: '#FF8BC3',
+    bottomColor: '#EB46A1',
+    name: '水耗能',
+    data: [110, 110, 151, 77, 110]
+  },
+  {
+    topColor: '#85F6E9',
+    bottomColor: '#2EC6B4',
+    name: '天然气',
+    data: [110, 120, 171, 287, 40]
+  },
+  {
+    topColor: '#9496FF',
+    bottomColor: '#6567FF',
+    name: '焦炉煤气',
+    data: [140, 157, 122, 27, 240]
+  },
+  {
+    topColor: '#F68E8A',
+    bottomColor: '#E95552',
+    name: '余热发电',
+    data: [170, 180, 127, 17, 340]
+  },
+  {
+    topColor: '#FFE873',
+    bottomColor: '#E7AE2A',
+    name: '二氧化硫',
+    data: [140, 160, 121, 57, 170]
+  }
+]
+
+const qualityList1 = [
+  { name: '钢一线', createTime: '2021.10.21 24:59:59', code: '2121321231', content: '气泡' },
+  { name: '钢二线', createTime: '2021.11.22 24:59:59', code: '3321123213', content: '气泡' },
+  { name: '钢三线', createTime: '2021.12.12 24:59:59', code: '4535435345', content: '气泡' },
+  { name: '钢四线', createTime: '2021.12.20 24:59:59', code: '5465465466', content: '气泡' },
+  { name: '钢五线', createTime: '2021.12.02 24:59:59', code: '2132131312', content: '气泡' },
+  { name: '钢一线', createTime: '2021.10.21 24:59:59', code: '2121321231', content: '气泡' },
+  { name: '钢二线', createTime: '2021.11.22 24:59:59', code: '3321123213', content: '气泡' },
+  { name: '钢三线', createTime: '2021.12.12 24:59:59', code: '4535435345', content: '气泡' },
+  { name: '钢四线', createTime: '2021.12.20 24:59:59', code: '5465465466', content: '气泡' },
+  { name: '钢五线', createTime: '2021.12.02 24:59:59', code: '2132131312', content: '气泡' },
+  { name: '钢一线', createTime: '2021.10.21 24:59:59', code: '2121321231', content: '气泡' },
+  { name: '钢二线', createTime: '2021.11.22 24:59:59', code: '3321123213', content: '气泡' },
+  { name: '钢三线', createTime: '2021.12.12 24:59:59', code: '4535435345', content: '气泡' },
+  { name: '钢四线', createTime: '2021.12.20 24:59:59', code: '5465465466', content: '气泡' },
+  { name: '钢五线', createTime: '2021.12.02 24:59:59', code: '2132131312', content: '气泡' },
+  { name: '钢六线', createTime: '2021.12.11 24:59:59', code: '2132131212', content: '气泡' }
+]
+const qualityList2 = [
+  { name: '上片', createTime: '2021.10.22 24:59:59', code: '2132132133', content: '气泡' },
+  { name: '磨边', createTime: '2021.12.21 24:59:59', code: '2132131232', content: '气泡' },
+  { name: '清洗', createTime: '2021.12.12 24:59:59', code: '1232131312', content: '气泡' },
+  { name: '激光打孔', createTime: '2021.12.13 24:59:59', code: '2132132131', content: '气泡' },
+  { name: 'AR镀膜', createTime: '2021.10.23 24:59:59', code: '2311212232', content: '气泡' },
+  { name: '固化', createTime: '2021.09.22 24:59:59', code: '21321321312', content: '气泡' },
+  { name: '清洗', createTime: '2021.12.12 24:59:59', code: '1232131312', content: '气泡' },
+  { name: '激光打孔', createTime: '2021.12.13 24:59:59', code: '2132132131', content: '气泡' },
+  { name: 'AR镀膜', createTime: '2021.10.23 24:59:59', code: '2311212232', content: '气泡' },
+  { name: '固化', createTime: '2021.09.22 24:59:59', code: '21321321312', content: '气泡' },
+  { name: '上片', createTime: '2021.10.22 24:59:59', code: '2132132133', content: '气泡' },
+  { name: '磨边', createTime: '2021.12.21 24:59:59', code: '2132131232', content: '气泡' },
+  { name: '清洗', createTime: '2021.12.12 24:59:59', code: '1232131312', content: '气泡' },
+  { name: '激光打孔', createTime: '2021.12.13 24:59:59', code: '2132132131', content: '气泡' },
+  { name: 'AR镀膜', createTime: '2021.10.23 24:59:59', code: '2311212232', content: '气泡' },
+  { name: '固化', createTime: '2021.09.22 24:59:59', code: '21321321312', content: '气泡' },
+  { name: '丝网印刷', createTime: '2021.12.21 24:59:59', code: '21321322132', content: '气泡' },
+  { name: '钢化炉', createTime: '2021.12.20 24:59:59', code: '21321312321', content: '气泡' },
+  { name: '检测设备', createTime: '2021.12.12 24:59:59', code: '21321322132', content: '气泡' },
+  { name: '包装设备', createTime: '2021.12.23 24:59:59', code: '39284982931', content: '气泡' }
+]
+const legendData1 = [
+  {
+    name: '设备1',
+    icon: 'circle',
+    value: 196
+  },
+  {
+    name: '设备2',
+    icon: 'circle',
+    value: 147
+  },
+  {
+    name: '设备3',
+    icon: 'circle',
+    value: 24
+  },
+  {
+    name: '设备4',
+    icon: 'circle',
+    value: 85
+  },
+  {
+    name: '设备5',
+    icon: 'circle',
+    value: 8
+  },
+  {
+    name: '设备6',
+    icon: 'circle',
+    value: 112
+  },
+  {
+    name: '设备7',
+    icon: 'circle',
+    value: 146
+  },
+  {
+    name: '设备8',
+    icon: 'circle',
+    value: 27
+  },
+  {
+    name: '设备9',
+    icon: 'circle',
+    value: 2
+  },
+  {
+    name: '设备10',
+    icon: 'circle',
+    value: 90
+  }
+]
+const legendData2 = [
+  {
+    name: '磨边',
+    icon: 'circle',
+    value: 196
+  },
+  {
+    name: '清洗',
+    icon: 'circle',
+    value: 135
+  },
+  {
+    name: '固化',
+    icon: 'circle',
+    value: 144
+  },
+  {
+    name: '镀膜',
+    icon: 'circle',
+    value: 97
+  },
+  {
+    name: '激光打孔',
+    icon: 'circle',
+    value: 12
+  },
+  {
+    name: '丝网印刷',
+    icon: 'circle',
+    value: 10
+  },
+  {
+    name: '钢化炉',
+    icon: 'circle',
+    value: 3
+  }
+]
+const legendData3 = [
+  {
+    name: '钢一线',
+    icon: 'circle',
+    value: 196
+  },
+  {
+    name: '钢二线',
+    icon: 'circle',
+    value: 133
+  },
+  {
+    name: '钢三线',
+    icon: 'circle',
+    value: 24
+  },
+  {
+    name: '钢四线',
+    icon: 'circle',
+    value: 77
+  },
+  {
+    name: '钢五线',
+    icon: 'circle',
+    value: 77
+  }
+]
+const qualityYearTableProps = [
+  {
+    prop: 'eqName',
+    label: '设备名称'
+  },
+  {
+    prop: 'eqCode',
+    label: '设备编码'
+  },
+  {
+    prop: 'level',
+    label: '报警级别',
+    subcomponent: alarmLevel,
+    align: 'center'
+  },
+  {
+    prop: 'content',
+    label: '报警内容'
+  }
+]
+
+const qualityYearList = [
+  { eqName: '钢化炉', eqCode: '21321312', level: 1, content: 'Temperature high' },
+  { eqName: '磨边机', eqCode: '32323232', level: 4, content: 'Device warning/alarm' },
+  { eqName: '镀膜机', eqCode: '32213213', level: 3, content: 'Temperature high' },
+  { eqName: '钢化清洗机', eqCode: '21321323', level: 1, content: 'P030: JET: Note: Transportation subsequent machine is not running' },
+  { eqName: '固化机', eqCode: '21321321', level: 2, content: 'P040' },
+  { eqName: '磨边清洗机', eqCode: '21321321', level: 2, content: 'M4033.6' },
+  { eqName: '预热机', eqCode: '21321321', level: 2, content: 'M4033.6' },
+  { eqName: '下片机', eqCode: '21321321', level: 3, content: 'P040' },
+  {
+    eqName: '冷却机', eqCode: '21321321', level: 4, content: 'P0xx: Pos. number exhaust UVnumber: Reserve' },
+  {
+    eqName: 'A储片机106', eqCode: '21321321', level: 1, content: 'P0xx: Pos. number exhaust UVnumber: Reserve' },
+  { eqName: '二次清洗机', eqCode: '21321321', level: 2, content: 'Temperature high' },
+  { eqName: '二次磨边机', eqCode: '21321321', level: 2, content: 'Temperature high' },
+  { eqName: '测试设备', eqCode: '21321321', level: 2, content: 'Temperature high' }
+
+]
+const qualityMonthTableProps = [
+  {
+    prop: 'lineName',
+    label: '产线名'
+  },
+  {
+    prop: 'process',
+    label: '工序'
+  },
+  {
+    prop: 'eqName',
+    label: '设备名'
+  },
+  {
+    prop: 'eqCode',
+    label: '设备编码'
+  },
+  {
+    prop: 'long',
+    label: '总运行时长(h)'
+  },
+  // {
+  //   prop: 'createTime',
+  //   label: '保养时间'
+  // },
+  {
+    prop: 'status',
+    label: '设备状态'
+  }
+  // {
+  //   prop: 'nextCreateTime',
+  //   label: '下次保养时间'
+  // }
+  // {
+  //   prop: 'nextLong',
+  //   label: '距离保养时间(天)',
+  //   // subcomponent: nextDay,
+  //   align: 'center'
+  // }
+]
+
+const qualityMonthList = [
+  {
+    lineName: '钢一线',
+    process: '41',
+    eqName: '二次清洗机',
+    eqCode: '2312312',
+    long: '200',
+    // createTime: '2021-02-25 12:00:01',
+    status: '报警'
+    // nextCreateTime: '2022-12-25 12:00:01',
+    // nextLong: 365
+  },
+  {
+    lineName: '钢二线',
+    process: '41',
+    eqName: '锻造机',
+    eqCode: '43434',
+    long: '252',
+    // createTime: '2021-11-25 12:00:01',
+    status: '正常'
+    // nextCreateTime: '2022-12-25 12:00:01',
+    // nextLong: 4
+  },
+  {
+    lineName: '钢三线',
+    process: '41',
+    eqName: '设备3',
+    eqCode: '23213212',
+    long: '100',
+    // createTime: '2021-10-25 12:00:01',
+    status: '故障停机'
+    // nextCreateTime: '2022-12-25 12:00:01',
+    // nextLong: 24
+  },
+  {
+    lineName: '钢四线',
+    process: '41',
+    eqName: '设备4',
+    eqCode: '23213',
+    long: '322',
+    // createTime: '2021-02-25 12:00:01',
+    status: '故障停机'
+    // nextCreateTime: '2022-12-25 12:00:01',
+    // nextLong: -36
+  },
+  {
+    lineName: '钢五线',
+    process: '41',
+    eqName: '设备5',
+    eqCode: '23121312',
+    long: '232',
+    // createTime: '2021-06-25 12:00:01',
+    status: '待机'
+    // nextCreateTime: '2022-12-25 12:00:01',
+    // nextLong: 111
+  },
+  {
+    lineName: '钢五线',
+    process: '41',
+    eqName: '设备5',
+    eqCode: '23121312',
+    long: '212',
+    // createTime: '2021-06-25 12:00:01',
+    status: '待机'
+    // nextCreateTime: '2022-12-25 12:00:01',
+    // nextLong: 111
+  },
+  {
+    lineName: '钢五线',
+    process: '41',
+    eqName: '设备5',
+    eqCode: '23121312',
+    long: '123',
+    // createTime: '2021-06-25 12:00:01',
+    status: '镀膜机'
+    // nextCreateTime: '2022-12-25 12:00:01',
+    // nextLong: 111
+  },
+  {
+    lineName: '钢五线',
+    process: '41',
+    eqName: '清洗机',
+    eqCode: '23121312',
+    long: '322',
+    // createTime: '2021-06-25 12:00:01',
+    status: 'Remote'
+    // nextCreateTime: '2022-12-25 12:00:01',
+    // nextLong: 111
+  },
+  {
+    lineName: '钢五线',
+    process: '41',
+    eqName: '磨边机',
+    eqCode: '23121312',
+    long: '232',
+    // createTime: '2021-06-25 12:00:01',
+    status: 'Non-scheduled'
+    // nextCreateTime: '2022-12-25 12:00:01',
+    // nextLong: 111
+  },
+  {
+    lineName: '钢五线',
+    process: '41',
+    eqName: '磨边机',
+    eqCode: '23121312',
+    long: '232',
+    // createTime: '2021-06-25 12:00:01',
+    status: 'Non-scheduled'
+    // nextCreateTime: '2022-12-25 12:00:01',
+    // nextLong: 111
+  },
+  {
+    lineName: '钢五线',
+    process: '41',
+    eqName: '磨边机',
+    eqCode: '23121312',
+    long: '232',
+    // createTime: '2021-06-25 12:00:01',
+    status: 'Non-scheduled'
+    // nextCreateTime: '2022-12-25 12:00:01',
+    // nextLong: 111
+  },
+  {
+    lineName: '钢五线',
+    process: '41',
+    eqName: '磨边机',
+    eqCode: '23121312',
+    long: '232',
+    // createTime: '2021-06-25 12:00:01',
+    status: 'Non-scheduled'
+    // nextCreateTime: '2022-12-25 12:00:01',
+    // nextLong: 111
+  },
+  {
+    lineName: '钢五线',
+    process: '41',
+    eqName: '磨边机',
+    eqCode: '23121312',
+    long: '232',
+    // createTime: '2021-06-25 12:00:01',
+    status: 'Non-scheduled'
+    // nextCreateTime: '2022-12-25 12:00:01',
+    // nextLong: 111
+  }
+]
+const orderProcessList = [
+  {
+    id: '1', outRate: '.8', name: '凯盛0322'
+  }, {
+    id: '1', outRate: '.4', name: '光伏玻璃4.0'
+  }, {
+    id: '1', outRate: '.5', name: '光伏玻璃3.0'
+  }, {
+    id: '1', outRate: '.3', name: '光伏玻璃2.0'
+  }, {
+    id: '1', outRate: '.5', name: '光伏玻璃1.0'
+  }, {
+    id: '1', outRate: '.8', name: '光伏玻璃'
+  },
+  {
+    id: '1', outRate: '.8', name: '统计订单'
+  }
+]
+export default {
+  name: 'ProductionMonitoringCockpit',
+  components: {
+    baseContainer,
+    baseTable1,
+    // baseTable2,
+    // baseTable3,
+    TopRadioGroup,
+    doubleYChart,
+    LinearBarChart
+    // pieChart1,
+    // pieChart2
+    // pieChart3
+    // BaseVideo
+  },
+  data() {
+    return {
+      beilv2: 1,
+      beilv: 1,
+      value: 100,
+      // offsetWidth: null,
+      qualityYearTableProps,
+      cxNameList,
+      cxDataList,
+      qualityYearList,
+      clientWidth: 0,
+      containerWidth: 111111,
+      isFullScreen: false,
+      // orderProcessList: [],
+      orderProcessList,
+      qualityTableProps1,
+      qualityMonthList,
+      qualityMonthTableProps,
+      modelMonth: '',
+      qualityList1,
+      qualityTableProps2,
+      qualityList2,
+      dateType: '0',
+      legendData1,
+      legendData2,
+      legendData3
+    }
+  },
+  computed: {
+    // ...mapGetters(['sidebar']),
+    styles() {
+      const v = Math.floor(this.value * this.beilv2 * 100) / 10000
+      return {
+        transform: `scale(${v})`,
+        transformOrigin: 'top left'
+      }
+    }
+  },
+
+  watch: {
+    clientWidth(val) {
+      if (!this.timer) {
+        this.clientWidth = val
+        this.beilv2 = this.clientWidth / 1920
+        this.timer = true
+        let _this = this
+        setTimeout(function () {
+          _this.timer = false
+        }, 500)
+      }
+      // 这里可以添加修改时的方法
+      this.windowWidth(val);
+    }
+  },
+  created() {
+    // this.fetchList('exception-alarm')
+    // this.fetchList('inAndOutOfEachLine')
+    // this.fetchList('order-process')
+    // this.fetchList('line-chart-data')
+    this.init()
+    this.windowWidth(document.documentElement.clientWidth)
+  },
+  mounted() {
+    const _this = this;
+    window.onresize = () => {
+      return (() => {
+        _this.clientWidth = `${document.documentElement.clientWidth}`
+        this.beilv2 = _this.clientWidth / 1920
+      })()
+    }
+    // this.beilv2 = window.innerWidth / 1920
+    // addEventListener('resize', resizeFun = () => {
+    //   this.beilv2 = window.innerWidth / 1920
+    // })
+    // erd.listenTo(document, (element) => {
+    //   console.log(element.offsetWidth)
+    //   this.beilv2 = element.offsetWidth / 1920
+
+    //   // var width = element.offsetWidth;
+    //   // var height = element.offsetHeight;
+    // });
+  },
+  // beforeDestroy() {
+  //   //离开页面删除检测器和所有侦听器
+  //   // erd.uninstall(document); //这里用ref是因为vue离开页面后获取不到dom
+  //   removeEventListener('resize', resizeFun)
+  // },
+  methods: {
+    windowWidth(value) {
+      this.clientWidth = value
+    },
+    // fetchList(type) {
+    //   switch (type) {
+    //     case 'order-process':
+    //       return axios({
+    //         url: '/analysis/factory-monitor/order',
+    //         method: 'post'
+    //       }).then(res => {
+    //         if (res.data) {
+    //           this.orderProcessList = res.data
+    //           // this.orderProcessList = [
+    //           //   { id: 1, name: '订单1', outRate: 0.5 },
+    //           //   { id: 2, name: '订单2', outRate: 0.54 },
+    //           //   { id: 3, name: '订单3', outRate: 0.45 },
+    //           //   { id: 4, name: '订单4', outRate: 0.65 },
+    //           //   { id: 5, name: '订单5', outRate: 0.35 },
+    //           //   { id: 6, name: '订单6', outRate: 0.15 },
+    //           //   { id: 7, name: '订单7', outRate: 0.5 },
+    //           //   { id: 8, name: '订单8', outRate: 0.5 }
+    //           // ]
+    //         } else {
+    //           this.orderProcessList.splice(0)
+    //         }
+    //       })
+    //   }
+    // },
+    change() {
+      this.isFullScreen = screenfull.isFullscreen
+    },
+    init() {
+      if (screenfull.enabled) {
+        screenfull.on('change', this.change)
+      }
+    },
+    destroy() {
+      if (screenfull.enabled) {
+        screenfull.off('change', this.change)
+      }
+    },
+    changeFullScreen() {
+      this.containerWidth = 223223223
+      if (!screenfull.enabled) {
+        this.$message({
+          message: 'you browser can not work',
+          type: 'warning'
+        })
+        return false
+      }
+      screenfull.toggle(this.$refs.container)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.visual-container {
+  width: 1920px;
+  height: 1080px;
+  background: url('../../assets/img/OperationalOverview/back.png') no-repeat;
+  background-size: cover;
+  // opacity: .8;
+  .container-title {
+    width: 100%;
+    background: url('../../assets/img/OperationalOverview/title.png') no-repeat;
+    background-size: 100% 100%;
+    color: #00fff0;
+    text-align: center;
+
+    .title-button {
+      color: #00fff0;
+      font-size: 20px;
+      position: absolute;
+    }
+  }
+
+  .container-main {
+    padding: 10px;
+  }
+}
+
+.now-team-title {
+  margin: 0;
+  margin-top: -1em;
+  font-size: 1.2em;
+  line-height: 2em;
+  color: #fff;
+}
+
+.main-title {
+  text-align: center;
+}
+
+.now-secondary-title {
+  margin: 0;
+  font-size: 1em;
+  line-height: 2em;
+  color: #fff;
+}
+
+.now-team-content {
+  font-size: 3em;
+  line-height: 1em;
+  color: #52fff1;
+  text-align: center;
+}
+
+::v-deep .el-progress-bar__inner {
+  background-color: unset;
+  background-image: linear-gradient(to right, #4573fe, #47f8dc);
+}
+ .visual-select {
+   position: absolute;
+   right: 1em;
+   top: 2em;
+ }
+
+//  .container-main {
+//    padding: 0px;
+//  }
+
+
+</style>
+
+<style lang="scss">
+.visual-container {
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+    background-color: transparent;
+  }
+
+  ::-webkit-scrollbar-track-piece {
+    background: #1b2b3d;
+  }
+
+  ::-webkit-scrollbar-corner {
+    background: #1b2b3d;
+  }
+
+  ::-webkit-scrollbar-track {
+    width: 6px;
+    background: #1b2b3d;
+    -webkit-border-radius: 2em;
+    -moz-border-radius: 2em;
+    border-radius: 2em;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: rgba($color: #5bc4be, $alpha: 0.7);
+    background-clip: padding-box;
+    min-height: 28px;
+    -webkit-border-radius: 2em;
+    -moz-border-radius: 2em;
+    border-radius: 2em;
+    transition: background-color 0.3s;
+    cursor: pointer;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: rgba($color: #5bc4be, $alpha: 1);
+  }
+}
+    .el-input {
+      min-height: 10px;
+    }
+
+    .el-input__inner {
+      background-color: rgba($color: #31878c, $alpha: 0.29);
+      border: rgba($color: #31878c, $alpha: 0.29);
+      color: aliceblue;
+    }
+
+    .el-divider--vertical {
+      height: 174px;
+      width: 1px;
+      border: rgba(255, 255, 255, 0.15);
+      color: rgba(255, 255, 255, 0.15);
+      margin-left: 3em;
+    }
+
+</style>
+
+<style scoped>
+.flex-col {
+  flex-direction: column;
+}
+
+.flex-1 {
+  flex: 1 1;
+}
+.h-full {
+  height: calc(100vh - 150px);
+}
+/* .container-main {
+  min-height: calc(100vh - 10em);
+} */
+</style>

src/views/OperationalOverview/styles/btn.scss

@@ -0,0 +1,99 @@
+@import './variables.scss';
+
+@mixin colorBtn($color) {
+  background: $color;
+
+  &:hover {
+    color: $color;
+
+    &:before,
+    &:after {
+      background: $color;
+    }
+  }
+}
+
+.blue-btn {
+  @include colorBtn($blue)
+}
+
+.light-blue-btn {
+  @include colorBtn($light-blue)
+}
+
+.red-btn {
+  @include colorBtn($red)
+}
+
+.pink-btn {
+  @include colorBtn($pink)
+}
+
+.green-btn {
+  @include colorBtn($green)
+}
+
+.tiffany-btn {
+  @include colorBtn($tiffany)
+}
+
+.yellow-btn {
+  @include colorBtn($yellow)
+}
+
+.pan-btn {
+  font-size: 14px;
+  color: #fff;
+  padding: 14px 36px;
+  border-radius: 8px;
+  border: none;
+  outline: none;
+  transition: 600ms ease all;
+  position: relative;
+  display: inline-block;
+
+  &:hover {
+    background: #fff;
+
+    &:before,
+    &:after {
+      width: 100%;
+      transition: 600ms ease all;
+    }
+  }
+
+  &:before,
+  &:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 2px;
+    width: 0;
+    transition: 400ms ease all;
+  }
+
+  &::after {
+    right: inherit;
+    top: inherit;
+    left: 0;
+    bottom: 0;
+  }
+}
+
+.custom-button {
+  display: inline-block;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  background: #fff;
+  color: #fff;
+  -webkit-appearance: none;
+  text-align: center;
+  box-sizing: border-box;
+  outline: 0;
+  margin: 0;
+  padding: 10px 15px;
+  font-size: 14px;
+  border-radius: 4px;
+}

src/views/OperationalOverview/styles/element-ui.scss

@@ -0,0 +1,173 @@
+// cover some element-ui styles
+
+.el-breadcrumb__inner,
+.el-breadcrumb__inner a {
+  font-weight: 400 !important;
+}
+
+.el-upload {
+  input[type="file"] {
+    display: none !important;
+  }
+}
+
+.el-upload__input {
+  display: none;
+}
+
+.cell {
+  .el-tag {
+    margin-right: 0px;
+  }
+}
+
+.visual-container {
+  .el-table {
+    .cell {
+      line-height: 1.2em !important;
+    }
+  }
+}
+.app-container {
+  .el-table th>.cell {
+    color: rgb(0, 0, 0,0.85);
+  }
+  .el-table__body tr.current-row>td {
+    background-color: #EAF1FC;
+  }
+    
+}
+.el-table--medium th, .el-table--medium td {
+  padding: 5px 0;
+}
+
+::v-deep .el-table__fixed-right {
+	right: 0 !important;
+	height: 100% !important;
+}
+.el-button--mini {
+  padding: 4px 0;
+}
+.small-padding {
+  .cell {
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+}
+
+.fixed-width {
+  .el-button--mini {
+    padding: 7px 10px;
+    min-width: 60px;
+  }
+}
+
+.status-col {
+  .cell {
+    padding: 0 10px;
+    text-align: center;
+
+    .el-tag {
+      margin-right: 0px;
+    }
+  }
+}
+
+.el-button--primary {
+  background-color: #0B58FF !important;
+  border-color: #0B58FF !important;
+}
+// to fixed https://github.com/ElemeFE/element/issues/2461
+.el-dialog {
+  transform: none;
+  left: 0;
+  position: relative;
+  margin: 0 auto;
+  border-radius: 4px;
+}
+
+.el-dialog__header {
+  padding: 12px 24px 8px;
+  border-bottom: 1px solid #E9E9E9;
+  text-align: left;
+}
+
+.el-dialog__title {
+  font-size: 16px;
+  font-weight: 700;
+  color: rgba(0, 0, 0, 0.85);
+}
+
+.el-form-item__label {
+  font-size: 14px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.65);
+  padding-right: 8px;
+}
+
+.el-dialog__headerbtn {
+  top: 16px;
+  right: 24px;
+}
+
+.el-form-item--medium .el-form-item__label {
+  line-height: 32px;
+}
+
+.el-button--medium {
+  padding: 8px 16px;
+}
+
+.el-select {
+  width: 100%;
+}
+
+.el-switch.is-checked .el-switch__core {
+  background-color: #0B58FF;
+  border-color: #0B58FF;
+}
+
+.el-radio__input.is-checked .el-radio__inner {
+  background-color: #0B58FF;
+  border-color: #0B58FF;
+}
+
+.el-button--text{
+  color:#0B58FF;
+}
+
+.el-tabs__item.is-active {
+  color: #0b58ff;
+}
+
+.el-tooltip__popper.is-dark {
+  max-width: 1100px;
+}
+// refine element ui upload
+.upload-container {
+  .el-upload {
+    width: 100%;
+
+    .el-upload-dragger {
+      width: 100%;
+      height: 200px;
+    }
+  }
+}
+
+// dropdown
+.el-dropdown-menu {
+  a {
+    display: block
+  }
+}
+
+// fix date-picker ui bug in filter-item
+.el-range-editor.el-input__inner {
+  display: inline-flex !important;
+}
+
+// to fix el-date-picker css style
+.el-range-separator {
+  box-sizing: content-box;
+}

src/views/OperationalOverview/styles/element-variables.scss

@@ -0,0 +1,31 @@
+/**
+* I think element-ui's default theme color is too light for long-term use.
+* So I modified the default color and you can modify it to your liking.
+**/
+
+/* theme color */
+$--color-primary: #1890ff;
+$--color-success: #13ce66;
+$--color-warning: #ffba00;
+$--color-danger: #ff4949;
+// $--color-info: #1E1E1E;
+
+$--button-font-weight: 400;
+
+// $--color-text-regular: #1f2d3d;
+
+$--border-color-light: #dfe4ed;
+$--border-color-lighter: #e6ebf5;
+
+$--table-border: 1px solid #dfe6ec;
+
+/* icon font path, required */
+$--font-path: "~element-ui/lib/theme-chalk/fonts";
+
+@import "~element-ui/packages/theme-chalk/src/index";
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  theme: $--color-primary;
+}

src/views/OperationalOverview/styles/index.scss

@@ -0,0 +1,319 @@
+@import './variables.scss';
+@import './mixin.scss';
+@import './transition.scss';
+@import './element-ui.scss';
+@import './sidebar.scss';
+@import './btn.scss';
+
+body {
+  height: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+}
+
+label {
+  font-weight: 700;
+}
+
+html {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+#app {
+  height: 100%;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+.no-padding {
+  padding: 0px !important;
+}
+
+.padding-content {
+  padding: 4px 0;
+}
+
+a:focus,
+a:active {
+  outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+  cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+}
+
+div:focus {
+  outline: none;
+}
+
+.fr {
+  float: right;
+}
+
+.fl {
+  float: left;
+}
+
+.pr-5 {
+  padding-right: 5px;
+}
+
+.pl-5 {
+  padding-left: 5px;
+}
+
+.block {
+  display: block;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.inlineBlock {
+  display: block;
+}
+
+.clearfix {
+  &:after {
+    visibility: hidden;
+    display: block;
+    font-size: 0;
+    content: " ";
+    clear: both;
+    height: 0;
+  }
+}
+
+aside {
+  background: #eef1f6;
+  padding: 8px 24px;
+  margin-bottom: 20px;
+  border-radius: 2px;
+  display: block;
+  line-height: 32px;
+  font-size: 16px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  color: #2c3e50;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  a {
+    color: #337ab7;
+    cursor: pointer;
+
+    &:hover {
+      color: rgb(32, 160, 255);
+    }
+  }
+}
+
+//main-container全局样式
+.app-container {
+  margin:0 16px 0;
+  background-color: #fff;
+  border-radius: 4px;
+  padding: 16px 16px 0;
+  height: calc(100vh - 134px);
+  overflow: auto;
+}
+
+.components-container {
+  margin: 30px 50px;
+  position: relative;
+}
+
+//  覆盖原有的分页样式-start
+
+.el-pagination {
+  position: relative;
+}
+ 
+.el-pagination.is-background .btn-prev,.el-pagination.is-background .btn-next,.el-pagination.is-background .el-pager li {
+  background-color: #fff;
+}
+
+.el-pagination__jump {
+  margin-left: 125px;
+}
+
+.el-pagination__sizes {
+  position: absolute;
+  right: 100px;
+}
+
+.el-pagination.is-background .el-pager li:not(.disabled).active {
+  background-color: #0B58FF;
+}
+.el-pagination .el-select .el-input .el-input__inner {
+  height: 22px;
+}
+.el-badge__content {
+  border: none;
+}
+//  覆盖原有的分页样式-end
+
+.text-center {
+  text-align: center
+}
+
+.sub-navbar {
+  height: 50px;
+  line-height: 50px;
+  position: relative;
+  width: 100%;
+  text-align: right;
+  padding-right: 20px;
+  transition: 600ms ease position;
+  background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
+
+  .subtitle {
+    font-size: 20px;
+    color: #fff;
+  }
+
+  &.draft {
+    background: #d0d0d0;
+  }
+
+  &.deleted {
+    background: #d0d0d0;
+  }
+}
+
+.link-type,
+.link-type:focus {
+  color: #337ab7;
+  cursor: pointer;
+
+  &:hover {
+    color: rgb(32, 160, 255);
+  }
+}
+
+.filter-container {
+  padding-bottom: 10px;
+
+  .filter-item {
+    display: inline-block;
+    vertical-align: middle;
+    margin-bottom: 10px;
+  }
+}
+
+//refine vue-multiselect plugin
+.multiselect {
+  line-height: 16px;
+}
+
+.multiselect--active {
+  z-index: 1000 !important;
+}
+
+// 业务代码中
+.content-row {
+  padding: 10px 0;
+}
+
+.el-dialog {
+  width: 1000px;
+}
+.el-dialog__body {
+  padding: 30px 40px;
+}
+
+.el-dialog__wrapper {
+  backdrop-filter: blur(5px);
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-track-piece {
+  background-color:rgba(144,147,153,0);
+}
+
+::-webkit-scrollbar-corner {
+  background-color:rgba(144,147,153,0);
+}
+
+::-webkit-scrollbar-track {
+  width: 6px;
+  background: rgba(144,147,153,0);
+  -webkit-border-radius: 2em;
+  -moz-border-radius: 2em;
+  border-radius: 2em;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgba(144,147,153,.5);
+  background-clip: padding-box;
+  min-height: 28px;
+  -webkit-border-radius: 2em;
+  -moz-border-radius: 2em;
+  border-radius: 2em;
+  transition: background-color .3s;
+  cursor: pointer;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(144,147,153,.3);
+}
+
+// 数据分析单选框样式覆盖
+
+.app-container{
+  .data-analysis-radio{
+    .el-radio-button__inner {
+      border: 0;
+      padding: 7px 0;
+      margin: 0 15px;
+    }
+    .el-radio-button__orig-radio:checked+.el-radio-button__inner{
+      background-color: transparent;
+      color: #606266;
+      box-shadow: 0 0 0 0 transparent;
+      border-bottom: 2px solid #0B58FF;
+    }
+    .el-radio-button:first-child .el-radio-button__inner,
+    .el-radio-button:last-child .el-radio-button__inner {
+      border-radius: 0;
+    }
+  }
+}
+
+.el-table--group, .el-table--border {
+  border: none;
+}
+
+// 全局loading样式覆盖
+.el-loading-mask{
+  z-index: 99999;
+}
+
+
+input::-webkit-input-placeholder { 
+  /* WebKit browsers */ 
+  font-size:12px;
+} 
+input::-moz-placeholder { 
+  /* Mozilla Firefox 19+ */ 
+  font-size:12px;
+} 
+input:-ms-input-placeholder { 
+  font-size:12px;
+}

src/views/OperationalOverview/styles/mixin.scss

@@ -0,0 +1,66 @@
+@mixin clearfix {
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}
+
+@mixin scrollBar {
+  &::-webkit-scrollbar-track-piece {
+    background: #d3dce6;
+  }
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #99a9bf;
+    border-radius: 20px;
+  }
+}
+
+@mixin relative {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+@mixin pct($pct) {
+  width: #{$pct};
+  position: relative;
+  margin: 0 auto;
+}
+
+@mixin triangle($width, $height, $color, $direction) {
+  $width: $width/2;
+  $color-border-style: $height solid $color;
+  $transparent-border-style: $width solid transparent;
+  height: 0;
+  width: 0;
+
+  @if $direction==up {
+    border-bottom: $color-border-style;
+    border-left: $transparent-border-style;
+    border-right: $transparent-border-style;
+  }
+
+  @else if $direction==right {
+    border-left: $color-border-style;
+    border-top: $transparent-border-style;
+    border-bottom: $transparent-border-style;
+  }
+
+  @else if $direction==down {
+    border-top: $color-border-style;
+    border-left: $transparent-border-style;
+    border-right: $transparent-border-style;
+  }
+
+  @else if $direction==left {
+    border-right: $color-border-style;
+    border-top: $transparent-border-style;
+    border-bottom: $transparent-border-style;
+  }
+}

src/views/OperationalOverview/styles/sidebar.scss

@@ -0,0 +1,209 @@
+#app {
+
+  .main-container {
+    min-height: 100%;
+    transition: margin-left .28s;
+    // margin-left: $sideBarWidth;
+    position: relative;
+  }
+
+  .sidebar-container {
+    transition: width 0.28s;
+    // width: $sideBarWidth !important;
+    // background-color: $menuBg;
+    height: 100%;
+    position: fixed;
+    font-size: 0px;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1001;
+    overflow: hidden;
+
+    // reset element-ui css
+    .horizontal-collapse-transition {
+      transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
+    }
+
+    .scrollbar-wrapper {
+      overflow-x: hidden !important;
+    }
+
+    .el-scrollbar__bar.is-vertical {
+      right: 0px;
+    }
+
+    .el-scrollbar {
+      height: 100%;
+    }
+
+    &.has-logo {
+      .el-scrollbar {
+        height: calc(100% - 50px);
+      }
+    }
+
+    .is-horizontal {
+      display: none;
+    }
+
+    a {
+      display: inline-block;
+      width: 100%;
+      overflow: hidden;
+    }
+
+    .svg-icon {
+      margin-right: 16px;
+    }
+
+    .el-menu {
+      border: none;
+      height: 100%;
+      width: 100% !important;
+    }
+
+    // menu hover
+    .submenu-title-noDropdown,
+    .el-submenu__title {
+      &:hover {
+        // background-color: $menuHover !important;
+      }
+    }
+
+    .is-active>.el-submenu__title {
+      // color: $subMenuActiveText !important;
+    }
+
+    & .nest-menu .el-submenu>.el-submenu__title,
+    & .el-submenu .el-menu-item {
+      // min-width: $sideBarWidth !important;
+      // background-color: $subMenuBg !important;
+
+      &:hover {
+        // background-color: $subMenuHover !important;
+      }
+    }
+  }
+
+  .hideSidebar {
+    .sidebar-container {
+      width: 54px !important;
+    }
+
+    .main-container {
+      margin-left: 54px;
+    }
+
+    .submenu-title-noDropdown {
+      padding: 0 !important;
+      position: relative;
+
+      .el-tooltip {
+        padding: 0 !important;
+
+        .svg-icon {
+          margin-left: 20px;
+        }
+      }
+    }
+
+    .el-submenu {
+      overflow: hidden;
+
+      &>.el-submenu__title {
+        padding: 0 !important;
+
+        .svg-icon {
+          margin-left: 20px;
+        }
+
+        .el-submenu__icon-arrow {
+          display: none;
+        }
+      }
+    }
+
+    .el-menu--collapse {
+      .el-submenu {
+        &>.el-submenu__title {
+          &>span {
+            height: 0;
+            width: 0;
+            overflow: hidden;
+            visibility: hidden;
+            display: inline-block;
+          }
+        }
+      }
+    }
+  }
+
+  .el-menu--collapse .el-menu .el-submenu {
+    // min-width: $sideBarWidth !important;
+  }
+
+  // mobile responsive
+  .mobile {
+    .main-container {
+      margin-left: 0px;
+    }
+
+    .sidebar-container {
+      transition: transform .28s;
+      // width: $sideBarWidth !important;
+    }
+
+    &.hideSidebar {
+      .sidebar-container {
+        pointer-events: none;
+        transition-duration: 0.3s;
+        // transform: translate3d(-$sideBarWidth, 0, 0);
+      }
+    }
+  }
+
+  .withoutAnimation {
+
+    .main-container,
+    .sidebar-container {
+      transition: none;
+    }
+  }
+}
+
+// when menu collapsed
+.el-menu--vertical {
+  &>.el-menu {
+    .svg-icon {
+      margin-right: 16px;
+    }
+  }
+
+  .nest-menu .el-submenu>.el-submenu__title,
+  .el-menu-item {
+    &:hover {
+      // you can use $subMenuHover
+      // background-color: $menuHover !important;
+    }
+  }
+
+  // the scroll bar appears when the subMenu is too long
+  >.el-menu--popup {
+    max-height: 100vh;
+    overflow-y: auto;
+
+    &::-webkit-scrollbar-track-piece {
+      background: #d3dce6;
+    }
+
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #99a9bf;
+      border-radius: 20px;
+    }
+  }
+}

src/views/OperationalOverview/styles/transition.scss

@@ -0,0 +1,48 @@
+// global transition css
+
+/* fade */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.28s;
+}
+
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
+}
+
+/* fade-transform */
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+  transition: all .5s;
+}
+
+.fade-transform-enter {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+/* breadcrumb transition */
+.breadcrumb-enter-active,
+.breadcrumb-leave-active {
+  transition: all .5s;
+}
+
+.breadcrumb-enter,
+.breadcrumb-leave-active {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+.breadcrumb-move {
+  transition: all .5s;
+}
+
+.breadcrumb-leave-active {
+  position: absolute;
+}

src/views/OperationalOverview/styles/variables.scss

@@ -0,0 +1,35 @@
+// base color
+$blue:#324157;
+$light-blue:#3A71A8;
+$red:#C03639;
+$pink: #E65D6E;
+$green: #30B08F;
+$tiffany: #4AB7BD;
+$yellow:#FEC171;
+$panGreen: #30B08F;
+
+// sidebar
+$menuText:#bfcbd9;
+$menuActiveText:#409EFF;
+$subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951
+
+$menuBg:#304156;
+$menuHover:#263445;
+
+$subMenuBg:#0B253F;
+$subMenuHover:#001528;
+
+$sideBarWidth: 248px;
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  menuText: $menuText;
+  menuActiveText: $menuActiveText;
+  subMenuActiveText: $subMenuActiveText;
+  // menuBg: $menuBg;
+  menuHover: $menuHover;
+  subMenuBg: $subMenuBg;
+  subMenuHover: $subMenuHover;
+  sideBarWidth: $sideBarWidth;
+}

src/views/quality/base/qualityScrapDet/index.vue

@@ -43,9 +43,9 @@ import basicPage from '../../../core/mixins/basic-page';
 import { parseTime } from '../../../core/mixins/code-filter';
 import {
   getQualityScrapDetPage,
-  deleteQualityScrapDet
+  deleteQualityScrapDet,
 } from '@/api/base/qualityScrapDet';
-
+import { getList, } from "@/api/base/qualityScrapType";
 const tableProps = [
 	{
 		prop: 'createTime',
@@ -98,10 +98,18 @@ export default {
 			formConfig: [
 				{
 					type: 'input',
-					label: '批次名',
-					placeholder: '批次名',
-					param: 'name',
-				},
+          label: '报废原因',
+          placeholder: '报废原因',
+          param: 'content',
+        },
+        {
+          type: 'select',
+          label: '报废类型',
+          selectOptions: [],
+          labelField: 'name',
+          valueField: 'id',
+          param: 'typeId',
+        },
 				{
 					type: 'button',
 					btnName: '查询',
@@ -124,7 +132,10 @@ export default {
 	components: {
 		AddOrUpdate,
 	},
-	created() {},
+  created() { },
+  mounted () {
+    this.getDict();
+  },
 	methods: {
 		// 获取数据列表
     getDataList() {
@@ -134,13 +145,19 @@ export default {
         this.listQuery.total = response.data.total;
         this.dataListLoading = false;
       });
+    },
+    async getDict() {
+      // 物料列表
+      const res = await getList();
+      this.formConfig[1].selectOptions = res.data;
     },
 		buttonClick(val) {
 			switch (val.btnName) {
 				case 'search':
 					this.listQuery.pageNo = 1;
 					this.listQuery.pageSize = 10;
-					this.listQuery.name = val.name ? val.name : undefined;
+          this.listQuery.content = val.content ? val.content : undefined;
+          this.listQuery.typeId = val.typeId ? val.typeId : undefined;
 					this.getDataList();
 					break;
 				case 'reset':

src/views/quality/base/qualityScrapType/index.vue

@@ -98,8 +98,8 @@ export default {
 			formConfig: [
 				{
 					type: 'input',
-					label: '批次名',
-					placeholder: '批次名',
+					label: '报废类型',
+          placeholder: '报废类型',
 					param: 'name',
 				},
 				{

src/views/quality/monitoring/currentData/index.vue

@@ -9,12 +9,18 @@
         <el-tabs v-model="activeName" :stretch="true" @tab-click="handleTabClick">
           <el-tab-pane :label="'\u2002表格数据\u2002'" name="table">
             <!-- 列表 -->
+            <div class="blue-title">产品名：{{ productDetail.name }} 产品规格：{{ productDetail.specifications }}</div>
             <base-table class="base-table__margin" :table-props="productProps" :page="1" :limit="10" :table-data="list">
             </base-table>
+            <div v-for="(item,index) in downProps" :key="index">
+              <div class="blue-title">工单:{{ list[index].workOrderName }}</div>
+              <base-table class="base-table__margin" :table-props="item" :page="1" :limit="10"
+                :table-data="downList[index]">
+              </base-table>
+            </div>
           </el-tab-pane>
           <el-tab-pane :label="'\u3000图形数据\u3000'" name="chart" style="overflow: inherit">
-            <!-- <base-table class="base-table__margin" :table-props="valueTableProps" :page="1" :limit="10"
-          :table-data="valueList" @emitFun="handleEmitFun"></base-table> -->
+            <div id="main" style="height: 500px;width: 1000px;"></div>
           </el-tab-pane>
         </el-tabs>
       </el-col>
@@ -49,7 +55,7 @@ import {
 // import Editor from '@/components/Editor';
 import moment from 'moment';
 // import DialogForm from './dialogForm.vue';
-
+import * as echarts from 'echarts';
 // import basicPageMixin from '@/mixins/lb/basicPageMixin';
 export default {
   name: 'statisticalData',
@@ -61,6 +67,12 @@ export default {
     return {
       list: [],
       dynamicProps: [],
+      downProps: [],
+      downList: [],
+      productDetail: {
+        name: null,
+        specifications:null,
+      },
       activeName: 'table',
       searchBarFormConfig: [
         // {
@@ -202,19 +214,19 @@ export default {
       return [
         {
           // width: 160,
-          prop: 'inspectionContent',
-          label: '检测内容',
+          prop: 'workOrderName',
+          label: '工单名',
         },
         ...this.dynamicProps,
         {
           // width: 128,
           prop: 'sumInput',
-          label: '检测类型总数',
+          label: '上片总数',
         },
         {
           // width: 128,
-          prop: 'scrapRatio',
-          label: '比例(%)',
+          prop: 'sumOutput',
+          label: '下片总数',
           // subcomponent: {
           // 	name: 'TextOnly',
           // 	props: {
@@ -259,7 +271,61 @@ export default {
     }
     this.getList()
   },
-	methods: {
+  methods: {
+    handleTabClick() {
+      if (this.activeName === 'chart') {
+        var chartDom = document.getElementById('main');
+        var myChart = echarts.init(chartDom);
+        var option;
+        let arrXAxis = []
+        this.list.forEach((ele) => {
+          arrXAxis.push(ele.workOrderName)
+        })
+        this.downList.forEach((ele) => {
+          ele.forEach((item) => {
+            if (ele.length !==0 && item.productionline) {
+              arrXAxis.push('产线' + item.productionline)
+
+            }
+          })
+        })
+        let arrYAxis = []
+        this.list.forEach((ele) => {
+          // console.log(ele);
+          arrYAxis.push(ele.sumInput)
+        })
+        this.downList.forEach((ele) => {
+          ele.forEach((item) => {
+            console.log(item);
+            // if (ele.length !== 0 && item.productionline) {
+            arrYAxis.push(item.sumInput)
+            // }
+          })
+        })
+        // console.log(arrXAxis);
+        option = {
+          xAxis: {
+            type: 'category',
+            data: arrXAxis
+          },
+          yAxis: {
+            type: 'value'
+          },
+          series: [
+            {
+              data: arrYAxis,
+              type: 'bar',
+              showBackground: true,
+              backgroundStyle: {
+                color: 'rgba(180, 180, 180, 0.2)'
+              }
+            }
+          ]
+        };
+
+        option && myChart.setOption(option);
+      }
+    },
     /** 获取搜索栏的产线列表 */
     // async getDict() {
     //   const res = await getProductList()
@@ -297,31 +363,71 @@ export default {
 		/** 查询列表 */
 		async getDataList() {
 			this.loading = true;
-			// 执行查询
+      // 执行查询
+      this.downProps= []
       const res = await getInspectionData(this.queryParams)
       console.log(res);
-      this.dynamicProps = this.filterNameData(res.data[0].upPart)
+      this.productDetail.name = res.data[0].productName
+      this.productDetail.specifications = res.data[0].specifications
+      // this.productName = res.data[0].productName
+      this.dynamicProps = this.filterNameData(res.data[0].upPart.nameData)
       console.log(this.dynamicProps)
       this.list = this.filterData(res.data[0].upPart.data)
-      console.log(this.list);
-    },
-    filterNameData(upData) {
-      console.log(upData);
-      // upData.forEach((ele) => {
-        const ndSet = new Set();
-      upData.nameData.forEach((nd) => {
-          ndSet.add(nd.name);
-        });
-        return Array.from(ndSet.values())
-          .sort()
-          .map((name) => ({
-            prop: name,
-            label: name,
-          }));
-      // })
+      console.log(this.list)
+      res.data[0].downPart.forEach((ele) => {
+        // console.log(ele.data);
+        let arr = this.downFilterNameData(ele.nameData)
+        if (arr.length !== 0) {
+          let propArr = [{
+            // width: 160,
+            prop: 'inspectionContent',
+            label: '检测内容',
+          },
+          ...arr,
+          {
+            // width: 128,
+            prop: 'sumInput',
+            label: '原片总数',
+            },
+            {
+              // width: 128,
+              prop: 'sumScrap',
+              label: '未通过检测总数',
+            },
+          {
+            // width: 128,
+            prop: 'scrapRatio',
+            label: '报废比例',
+          }]
+          this.downProps.push(propArr)
+        }
+        // this.downProps = []
+      })
+      res.data[0].downPart.forEach((ele) => {
+        // console.log(ele.data);
+        let arr =this.downFilterData(ele.data)
+        if (arr.length !== 0) {
+          this.downList.push(arr)
+        }
+        // this.downProps = []
+      })
 
+      // console.log(this.downList);
     },
-    filterData(data) {
+    downFilterNameData(nameData) {
+      const ndSet = new Set();
+      nameData.forEach((nd) => {
+        ndSet.add(nd.name);
+      });
+      return Array.from(ndSet.values())
+        .sort()
+        .map((name) => ({
+          prop: name,
+          label: name,
+        }));
+      // })
+    },
+    downFilterData(data) {
       return data.map((item) => {
         const { data: innerData } = item;
         const keyValuePairs = {};
@@ -333,6 +439,39 @@ export default {
           ...keyValuePairs,
           sumInput: item.sumInput,
           scrapRatio: item.scrapRatio,
+          sumScrap: item.sumScrap
+        };
+      });
+    },
+    filterNameData(nameData) {
+      // console.log(upData);
+      // upData.forEach((ele) => {
+      const ndSet = new Set();
+
+      nameData.forEach((nd) => {
+          ndSet.add(nd.name);
+      });
+        return Array.from(ndSet.values())
+          .sort()
+          .map((name) => ({
+            prop: name,
+            label: name,
+          }));
+      // })
+    },
+    filterData(data) {
+      return data.map((item) => {
+        const { data: innerData } = item;
+        const keyValuePairs = {};
+        innerData.map((d) => {
+          keyValuePairs[d.dynamicName] = d.dynamicValue;
+        });
+        return {
+          inspectionContent: item.inspectionContent,
+          workOrderName: item.workOrderName,
+          ...keyValuePairs,
+          sumInput: item.sumInput,
+          sumOutput: item.sumOutput,
         };
       });
     },
@@ -456,5 +595,24 @@ export default {
     height: 36px;
   }
 }
+.blue-title {
+  position: relative;
+  padding: 4px 0;
+  padding-left: 12px;
+  font-size: 14px;
+  color: #606266;
+  font-weight: 700;
+  margin-bottom: 12px;
 
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 6px;
+    height: 16px;
+    width: 4px;
+    border-radius: 1px;
+    background: #0b58ff;
+  }
+}
 </style>

src/views/quality/monitoring/deviceParameters/index.vue

@@ -15,7 +15,7 @@
 			">
       <div class="factory-list__selector" style="margin: 12px" title="点击切换工厂" @mouseenter="factoryListOpen = true"
         @mouseleave="factoryListOpen = false">
-        {{ currentFactory?.label || '点我选择工厂' }}
+        {{ currentFactory?.label || '点我选择设备' }}
         <div class="factory-list__wrapper" :class="{ open: factoryListOpen }">
           <ul class="factory-list" v-if="sidebarContent.length" @click.prevent="factoryChangeHandler">
             <li v-for="fc in sidebarContent" :key="fc.id" :data-value="fc.id" class="factory-list__item"

src/views/quality/monitoring/statisticalData/index.vue

@@ -69,8 +69,9 @@ export default {
           type: 'select',
           label: '工单号',
           placeholder: '请选择工单号',
-          param: 'workOrderId',
+          param: 'workOrderIdList',
           selectOptions: [],
+          multiple:true,
         },
 				{
 					type: 'select',
@@ -188,8 +189,8 @@ export default {
 			// },
 			// 查询参数
 			queryParams: {
-        workOrderId: undefined,
-        productId: undefined,
+        workOrderIdList:undefined,
+        productionId: undefined,
         startTime: undefined,
         endTime: undefined,
 				// productionLineId: null,
@@ -244,21 +245,24 @@ export default {
     },
   },
   mounted() {
-    if (this.$route.params.startTime && this.$route.params.endTime) {
-      this.searchBarFormConfig[0].defaultSelect = [
-        this.$route.params.startTime,
-        this.$route.params.endTime,
-      ];
-      this.queryParams.param = {};
-      this.$set(
-        this.queryParams.param,
-        'startTime',
-        this.$route.params.startTime
-      );
-      this.$set(this.queryParams.param, 'endTime', this.$route.params.endTime);
-    } else {
-      this.searchBarFormConfig[0].defaultSelect = [];
+    if (this.$route.query.woIdString) {
+      this.queryParams.workOrderIdList = this.$route.query.woIdString
     }
+    // if (this.$route.params.startTime && this.$route.params.endTime) {
+    //   this.searchBarFormConfig[0].defaultSelect = [
+    //     this.$route.params.startTime,
+    //     this.$route.params.endTime,
+    //   ];
+    //   this.queryParams.param = {};
+    //   this.$set(
+    //     this.queryParams.param,
+    //     'startTime',
+    //     this.$route.params.startTime
+    //   );
+    //   this.$set(this.queryParams.param, 'endTime', this.$route.params.endTime);
+    // } else {
+    //   this.searchBarFormConfig[0].defaultSelect = [];
+    // }
     this.getList()
   },
 	methods: {
@@ -302,7 +306,8 @@ export default {
 			// 执行查询
       const {
         data: { data, otherList, otherMap, nameData },
-      } = await  getStatisticalDataPage(this.queryParams)
+      } = await getStatisticalDataPage(this.queryParams)
+      console.log(this.queryParams);
       this.dynamicProps = this.filterNameData(nameData)
       this.list = this.filterData(data);
     },
@@ -336,8 +341,8 @@ export default {
 		/** 取消按钮 */
     handleSearchBarBtnClick(val) {
       if (val.btnName === 'search') {
-        this.queryParams.workOrderId = val.workOrderId ? val.workOrderId : undefined
-        this.queryParams.productId = val.productId ? val.productId : undefined
+        this.queryParams.workOrderIdList = val.workOrderIdList ? val.workOrderIdList : undefined
+        this.queryParams.productionId = val.productionId ? val.productionId : undefined
         this.queryParams.startTime = val.checkTime ? val.checkTime[0] : undefined
         this.queryParams.endTime = val.checkTime ? val.checkTime[1] : undefined