Merge pull request 'projects/mesxc-zhp' (#183) from projects/mesxc-zhp into projects/mesxc-test

Reviewed-on: #183

src/assets/icons/svg/order.svg

@@ -1 +1,14 @@
-<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><defs><style/></defs><path d="M459.954 607.201h233.734c14.352 0 25.941-11.088 25.941-24.799 0-13.623-11.588-24.71-25.941-24.71H459.954c-14.353 0-25.987 11.087-25.987 24.71 0 13.71 11.634 24.8 25.987 24.8zm-77.937 217.186l287.564-.272v-.634c9.37-1.494 16.66-9.233 16.66-19.054 0-9.773-7.29-17.694-16.66-19.233v-.633H369.5c-27.275 0-51.95-38.47-51.95-65.215V303.761c.182-1.041.634-1.992.634-3.123 0-10.997-8.985-20.003-20.032-20.003-11.023 0-20.01 9.007-20.01 20.003v418.708c0 54.037 48.939 105.04 103.875 105.04zm311.67-734.462c-3.235 0-311.669-.814-311.669-.814-51.292 0-96.314 39.1-102.108 88.294-.182 1.086-.657 2.037-.657 3.169 0 .09.023.135.023.18 0 .047-.023.09-.023.182h.067c.181 10.86 9.032 19.685 19.942 19.685 10.933 0 19.762-8.825 19.965-19.685h.226c6.044-24.665 27.028-52.044 50.048-52.044h284.755c-.406 60.46 0 118.435 0 118.435 0 54.532 35.992 91.642 91.36 91.642h90.428v380.377c.338 44.261-33.703 65.758-62.18 65.215v.272c-10.23.723-18.426 9.188-18.426 19.594 0 10.454 8.196 18.737 18.426 19.417v.272c.248 0 .498-.092.746-.092.184 0 .34.092.522.092.972 0 1.812-.408 2.74-.545 52.288-3.755 97.58-52.314 97.58-104.225V299.778L693.688 89.925zm51.928 209.853c-27.684 0-51.927-51.412-51.927-78.7V142.377l129.839 157.4h-77.912zM459.955 483.47h233.733c14.352 0 25.941-11.041 25.941-24.709 0-13.667-11.588-24.754-25.941-24.754H459.954c-14.353 0-25.987 11.087-25.987 24.754 0 13.669 11.634 24.71 25.987 24.71zM716.71 841.356c-8.534 0-15.327 6.246-17.114 14.257l-.476-.045c-21.73 44.17-40.426 34.032-62.295 34.032H252.18c-27.277 0-64.466-38.512-64.466-65.213V322.315c0-24.801 29.857-58.607 55.954-63.403v-.544c10.572-.543 19.083-9.142 19.083-19.867 0-10.681-8.511-19.28-19.083-19.777v-.227c-.181.044-.34.091-.52.091-.158 0-.272-.09-.43-.09-1.245 0-2.353.497-3.553.724-50.704 5.203-90.86 52.134-90.86 103.093v502.07c0 54.035 48.938 105.039 103.875 105.039h389.558c47.105 0 78.255-17.199 90.542-61.684 1.36-2.534 2.33-5.25 2.33-8.327.002-9.866-8.009-18.057-17.9-18.057z"/></svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>周转进度</title>
+    <g id="新增看板" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="周转看板" transform="translate(-996.000000, -149.000000)" fill-rule="nonzero">
+            <g id="编组-26备份-2" transform="translate(972.000000, 125.000000)">
+                <g id="周转进度" transform="translate(24.000000, 24.000000)">
+                    <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="24" height="24"></rect>
+                    <path d="M14.5,8.25 L14.5,2 L4,2 C2.8954305,2 2,2.8954305 2,4 L2,14.5 L2,14.5 L8.25,14.5 L8.25,8.25 L14.5,8.25 Z M15.75,9.5 L15.75,15.75 L9.5,15.75 L9.5,22 L20,22 C21.1045695,22 22,21.1045695 22,20 L22,9.5 L22,9.5 L15.75,9.5 Z" id="形状" fill="#59D0E2"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/OperationalOverview/coldBoard.vue

@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2021-07-19 15:18:30
  * @LastEditors: zhp
- * @LastEditTime: 2024-01-11 15:54:50
+ * @LastEditTime: 2024-01-17 14:00:15
  * @Description:
 -->
 <template>
@@ -30,8 +30,9 @@
       <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="'切割数据'" :size="'small'" :title-icon="'eqAlarm'">
-            <base-table1 :page="1" :limit="999" :show-index="false" :table-config="cutProps"
+            <!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="cutProps"
-              :table-data="cutTableDataList" />
+              :table-data="cutTableDataList" /> -->
+            <dv-scroll-board :config="cutConfig" style="width:100%;height:350px" ref='cutScrollBoard' />
           </base-container>
         </el-col>
 
@@ -48,8 +49,9 @@
 
         <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
           <base-container :title="'ISRA 缺陷数据'" :size="'small'" :title-icon="'scrap'">
-            <base-table1 :page="1" :limit="999" :show-index="false" :table-config="ISRATableProps"
+            <!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="ISRATableProps"
-              :table-data="ISRAList" />
+              :table-data="ISRAList" /> -->
+            <dv-scroll-board :config="ISRAConfig" style="width:100%;height:350px" ref='ISRAScrollBoard' />
           </base-container>
         </el-col>
       </el-row>
@@ -78,25 +80,30 @@
           </base-container>
         </el-col>
         <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="14">
-          <base-container :height="318 + 338 + 16" :size="'eqStatus'" :title="'设备状态监控'" :title-icon="'eqMonitoring'">
+          <base-container :no-padding="true" :height="318 + 338 + 16" :size="'eqStatus'" :title="'设备状态监控'"
+            :title-icon="'eqMonitoring'">
             <!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
               <top-radio-group />
             </div> -->
             <!-- 像下面这样表格里的limit值，也许可以用js动态计算出来 -->
             <el-col :span="6" style="">
               <div style="font-size:20px;margin: 5px 0 10px 0">融化风机</div>
-              <base-table1 :page="1" :limit="999" :show-index="false" :table-config="EqMonitoringPropsFun"
+              <!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="EqMonitoringPropsFun"
-                :table-data="funList" />
+                :table-data="funList" />    -->
+              <dv-scroll-board :config="funConfig" style="width:100%;height:350px" ref='funScrollBoard' />
             </el-col>
             <el-col :span="6">
               <div style="font-size:20px;margin: 5px 0 10px 0;">退火风机</div>
-              <base-table1 :page="1" :limit="999" :show-index="false" :table-config="EqMonitoringPropsFun"
+              <!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="EqMonitoringPropsFun"
-                :table-data="annealFunList" />
+                :table-data="annealFunList" /> -->
+              <dv-scroll-board :config="annealFunConfig" style="width:100%;height:350px" ref='annealFunScrollBoard' />
             </el-col>
             <el-col :span="12" style="float: right;">
               <div style="font-size:20px;margin: 5px 0 10px 0;">产线设备</div>
-              <base-table1 :page="1" :limit="999" :show-index="false" :table-config="EqMonitoringProps"
+              <!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="EqMonitoringProps"
-                :table-data="realEqList" />
+                :table-data="realEqList" /> -->
+              <dv-scroll-board :config="realEqConfig" style="width:100%;height:350px" ref='realEqScrollBoard' />
+
             </el-col>
             <!-- <double-y-chart :id="'doubleYChart'" :name-list="cxNameList" :data-list="cxDataList" :height="359"
               :show-legend="true" /> -->
@@ -136,11 +143,12 @@ import pileBarChart from './components/pileBarChart'
 import colorDiv from './components/colorDiv'
 
 // import axios from '@/utils/request'
-import doubleYChart from './components/doubleYChart '
+import doubleYChart from './components/coldDoubleYChart'
 // import elementResizeDetectorMaker from 'element-resize-detector';
 // var erd = elementResizeDetectorMaker(); //创建实例
 // let resizeFun = null
 import { parseTime } from '../core/mixins/code-filter';
+import { formatDate } from '@/utils'
 
 
 import LinearBarChart from './components/linearBarChart'
@@ -264,6 +272,61 @@ export default {
       ISRATableProps,
       orderList: [],
       times: '',
+      cutConfig: {
+        header: ['序号', '产线', '时间', '规格', '良品面积', '废品面积', '良品率'],
+        headerBGC: 'rgba(32, 55, 96, 0.8)',
+        oddRowBGC: 'rgba(32, 55, 96, 0.8)',
+        evenRowBGC: 'rgba(14, 32, 62, 0.8)',
+        columnWidth: [70,70, 130, 150, 110,110,90],
+        align: ['center'],
+        data: [],
+        // index:true,
+        rowNum: 10
+      },
+      funConfig: {
+        header: ['序号', '设备名称', '运行状态'],
+        headerBGC: 'rgba(32, 55, 96, 0.8)',
+        oddRowBGC: 'rgba(32, 55, 96, 0.8)',
+        evenRowBGC: 'rgba(14, 32, 62, 0.8)',
+        columnWidth: [60, 90, 90],
+        align: ['center'],
+        data: [],
+        // index:true,
+        rowNum: 10
+      },
+      realEqConfig: {
+        header: ['序号', '产线', '设备名称', '设备编码', '运行状态','故障状态'],
+        headerBGC: 'rgba(32, 55, 96, 0.8)',
+        oddRowBGC: 'rgba(32, 55, 96, 0.8)',
+        evenRowBGC: 'rgba(14, 32, 62, 0.8)',
+        columnWidth: [60, 80, 90,90,90,90],
+        align: ['center'],
+        data: [],
+        // index:true,
+        rowNum: 10
+      },
+      annealFunConfig: {
+        header: ['序号', '设备名称', '运行状态'],
+        headerBGC: 'rgba(32, 55, 96, 0.8)',
+        oddRowBGC: 'rgba(32, 55, 96, 0.8)',
+        evenRowBGC: 'rgba(14, 32, 62, 0.8)',
+        columnWidth: [60, 90, 90],
+        align: ['center'],
+        data: [],
+        // index:true,
+        rowNum: 10
+      },
+      ISRAConfig: {
+        header: ['序号', '产线', '时间', '缺陷类型', '缺陷数量', '占比'],
+        headerBGC: 'rgba(32, 55, 96, 0.8)',
+        oddRowBGC: 'rgba(32, 55, 96, 0.8)',
+        evenRowBGC: 'rgba(14, 32, 62, 0.8)',
+        columnWidth: [70, 70, 130, 150, 110, 110,],
+        align: ['center'],
+        data: [],
+        // index:true,
+        rowNum: 10
+      },
       ISRAList:[],
       EnergyMonitoringNameList: [],
       equipmentList: [],
@@ -484,22 +547,47 @@ export default {
       if (this.funWsData.type === 'AnnealFanInfo') {
         let arr = []
         for (let i in this.funWsData.data.annealFanInfo) {
-          arr.push({
+          // arr.push({
-            equipmentName: i,
+          //   equipmentName: i,
-            status: this.funWsData.data.annealFanInfo[i]
+          //   status: this.funWsData.data.annealFanInfo[i]
-          })
+          // })
+          arr.push([
+            // console.log(item)
+            `
+          <span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
+            </span>`,
+            // formatDate(item.planStartTime) || '',
+            `
+          <span style="color:rgba(255,255,255,0.5)" >${i || ''}
+            </span>`,
+            `<span style="color:rgba(255,255,255,0.5)">${this.funWsData.data.annealFanInfo[i] || ''}</span>`,
+          ])
         }
-        this.annealFunList = arr
+        this.annealFanConfig.data = arr
+        this.$refs['annealFanScrollBoard'].updateRows(arr)
       }
       if (this.funWsData.type === 'FanInfo') {
         let arr = []
         for (let i in this.funWsData.data.fanInfo) {
-          arr.push({
+          // arr.push({
-            equipmentName: i,
+          //   equipmentName: i,
-            status: this.funWsData.data.fanInfo[i]
+          //   status: this.funWsData.data.fanInfo[i]
-          })
+          // })
+          arr.push([
+            // console.log(item)
+            `
+          <span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
+            </span>`,
+            // formatDate(item.planStartTime) || '',
+            `
+          <span style="color:rgba(255,255,255,0.5)" >${i || ''}
+            </span>`,
+            `<span style="color:rgba(255,255,255,0.5)">${this.funWsData.data.fanInfo[i] || ''}</span>`,
+          ])
         }
-        this.funList = arr
+        this.funConfig.data = arr
+        this.$refs['funScrollBoard'].updateRows(arr)
+        // this.funList = arr
       }
     },
     cutWebsocketOnOpen() {
@@ -511,30 +599,49 @@ export default {
       this.CutInitWebSocket()
     },
     getSize(str) {
-      console.log(str.match(/\d+(\.\d+)?/g))
+      // console.log(str.match(/\d+(\.\d+)?/g))
      let size =  str.match(/\d+(\.\d+)?/g).map(ele => {
         return parseFloat(ele)
      })
-      console.log(size[0] + '*' + size[1] + '*' + size[2]);
+      // console.log(size[0] + '*' + size[1] + '*' + size[2]);
       return size[0] + '*' + size[1] + '*' + size[2]
     },
     // 数据接收
     cutWebsocketOnMessage(e) {
       this.cutWsData = e?.data ? JSON.parse(e?.data) : {}
       if (this.cutWsData.type === 'cutting' && this.cutWsData.name === 'table') {
-        this.cutTableDataList = this.cutWsData.productHourData.map((ele, index) => {
+        // this.cutTableDataList = this.cutWsData.productHourData.map((ele, index) => {
-          // if (ele.progressRate != 1) {
+        //   // if (ele.progressRate != 1) {
-          return {
+        //   return {
-            id: ele.id,
+        //     id: ele.id,
-            lineName: ele.lineName,
+        //     lineName: ele.lineName,
-            time: ele.time,
+        //     time: ele.time,
-            size: this.getSize(ele.size),
+        //     size: this.getSize(ele.size),
-            productArea: ele.productArea + '㎡',
+        //     productArea: ele.productArea + '㎡',
-            wasteArea: ele.wasteArea + '㎡',
+        //     wasteArea: ele.wasteArea + '㎡',
-            product: (ele.product * 100).toFixed(2)
+        //     product: (ele.product * 100).toFixed(2)
-          }
         //   }
-        });
+        //   // }
+        // });
+        let cutArr = this.cutWsData.productHourData.map((item, index) => [
+          // console.log(item)
+          `
+          <span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
+            </span>`,
+          // formatDate(item.planStartTime) || '',
+          `
+          <span style="color:rgba(255,255,255,0.5)" >${item.lineName || ''}
+            </span>`,
+          `<span style="color:rgba(255,255,255,0.5)">${formatDate(item.time) || ''}</span>`,
+          `<span style="color:rgba(255,255,255,0.5)">${this.getSize(item.size) || ''}</span>`,
+          `<span style="color:rgba(255,255,255,0.5)">${item.productArea + '㎡' || ''}</span>`,
+          `<span style="color:rgba(255,255,255,0.5)">${item.wasteArea + '㎡' || ''}</span>`,
+          `<div style = "${(item.product * 100).toFixed(2) > 91 ? 'display:block;color:rgba(255,255,255,0.5)' : 'display:none;'}">${(item.product * 100).toFixed(2) + '%' || ''}</div>
+           <div style = "${(item.product * 100).toFixed(2) < 91 ? 'display:block; color:rgba(255, 209, 96, 1)' : 'display:none;'}">${(item.product * 100).toFixed(2) + '%' || ''}</div>`
+        ])
+        this.cutConfig.data = cutArr
+        this.$refs['cutScrollBoard'].updateRows(cutArr)
+
       } else if (this.cutWsData.type === 'cutting' && this.cutWsData.name === 'chart' && this.cutWsData.dateType === 'day') {
         let nameList = []
         let nameWasteList = []
@@ -571,33 +678,51 @@ export default {
       // let obj = JSON.parse(data.data)
       this.SJGWsData = e?.data ? JSON.parse(e?.data) : {}
       if (this.SJGWsData.type === 'isra') {
-        this.ISRAList = this.SJGWsData.detData.map((ele, index) => {
+        // this.ISRAList = this.SJGWsData.detData.map((ele, index) => {
-          // if (ele.progressRate != 1) {
+        //   // if (ele.progressRate != 1) {
-          return {
+        //   return {
-            id: ele.id,
+        //     id: ele.id,
-            linename: ele.linename,
+        //     linename: ele.linename,
-            type: ele.type,
+        //     type: ele.type,
-            num: ele.num,
+        //     num: ele.num,
-            time:ele.time,
+        //     time:ele.time,
-            percent: ele.percent
-          }
-          // }
-        });
-      } else if (this.SJGWsData.type === 'equipment') {
-        this.realEqList = this.SJGWsData.detData.map((ele, index) => {
-          // if (ele.progressRate != 1) {
-          return {
-            line: ele.line,
-            name: ele.name,
-            code: ele.code,
-            run: ele.run,
-            error: ele.error,
         //     percent: ele.percent
-          }
         //   }
-        });
+        //   // }
-
+        // });
+        console.log(this.SJGWsData.detData);
+        let ISRAArr = this.SJGWsData.detData.map((item, index) => [
+          // console.log(item)
+          `<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
+            </span>`,
+          // formatDate(item.planStartTime) || '',
+          `
+          <span style="color:rgba(255,255,255,0.5)" >${item.linename || ''}
+            </span>`,
+          `<span style="color:rgba(255,255,255,0.5)">${item.time || ''}</span>`,
+          `<span style="color:rgba(255,255,255,0.5)">${item.type || ''}</span>`,
+          `<span style="color:rgba(255,255,255,0.5)">${item.num || ''}</span>`,
+          `<span style="color:rgba(255,255,255,0.5)">${item.percent|| ''}</span>`,
+        ])
+        this.ISRAConfig.data = ISRAArr
+        this.$refs['ISRAScrollBoard'].updateRows(ISRAArr)
+      } else if (this.SJGWsData.type === 'equipment') {
+        this.realEqList = this.SJGWsData.detData.map((ele, index) =>[
+            // console.log(item)
+            `<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
+            </span>`,
+            // formatDate(item.planStartTime) || '',
+            `
+          <span style="color:rgba(255,255,255,0.5)" >${item.line || ''}
+            </span>`,
+          `<span style="color:rgba(255,255,255,0.5)">${item.name || ''}</span>`,
+          `<span style="color:rgba(255,255,255,0.5)">${item.code || ''}</span>`,
+          `<span style="color:rgba(255,255,255,0.5)">${item.run || ''}</span>`,
+          `<span style="color:rgba(255,255,255,0.5)">${item.error || ''}</span>`,
+          ]);
       }
+      this.realEqConfig.data = this.realEqList
+      this.$refs['realEqScrollBoard'].updateRows(this.realEqList)
     },
     windowWidth(value) {
       this.clientWidth = value
@@ -818,4 +943,44 @@ export default {
 /* .container-main {
   min-height: calc(100vh - 10em);
 } */
+.orange {
+  color: rgba(255, 209, 96, 1)
+}
+
+.white {
+  color: rgba(255, 255, 255, 0.5)
+}
+.tooltip {
+  position: relative;
+  display: inline-block;
+}
+.tooltip .tooltiptext {
+  visibility: hidden;
+  width: 120px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px 0;
+  position: absolute;
+  z-index: 1;
+  bottom: 150%;
+  left: 50%;
+  margin-left: -60px;
+}
+
+.tooltip .tooltiptext::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: black transparent transparent transparent;
+}
+
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+}
 </style>

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

@@ -2,7 +2,7 @@
  * @Author: gtz
  * @Date: 2022-01-19 15:58:17
  * @LastEditors: zhp
- * @LastEditTime: 2024-01-11 15:54:37
+ * @LastEditTime: 2024-01-17 14:57:00
  * @Description: file content
  * @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue
 -->
@@ -22,12 +22,21 @@
     </template>
 
     <div class="bar-item">
-      <div v-if="title" class="bar-title">
+      <div v-if="title" class="bar-title" ds>
         <span>
           <svg-icon :icon-class="titleIcon" style="font-size: 1em; position: relative; top: .08em" />
           {{ title }}
         </span>
+        <!-- <span style="font-size: 20px;color:#52FFF8;margin-left: 10px;margin-top: 2px;">
+          {{ time +'-'+ time2 }}
+        </span> -->
       </div>
+      <!-- <div v-if="true" class="bar-title">
+        <span>
+          <svg-icon :icon-class="titleIcon" style="font-size: 1em; position: relative; top: .08em" />
+          {{ title }}
+        </span>
+      </div> -->
       <div class="bar-content" :class="{ 'p-0': noContentPadding }">
         <slot />
       </div>
@@ -83,21 +92,39 @@ export default {
   data() {
     return {
       curIndex: 0,
+      time: null,
+      time2:null
       // imgUrl: require(`../../../../assets/img/${this.back}.png`),
     }
   },
   created() {
-    // console.log(this.back);
+  },
-    // this.$nextTick(() => {
+  mounted () {
-    // this.$refs.baseContainer.style = `background:url('../../../../assets/img/${this.back}.png') no-repeat;)`
+    this.time = this.format(new Date().setHours(7,0,0));
-    // })
+    // console.log(time);
-    // console.log(this.$refs.baseContainer.style)
+    //前一天时间
+    this.time2 = this.format(new Date().setHours(7, 0, 0) - 86400000 * 1);
+    console.log(new Date().setHours(7, 0, 0) - 86400000 * 1);
   },
   methods: {
+    add0(m) {
+      return m < 10 ? '0' + m : m
+    },
+    format(shijianchuo) {
+      //shijianchuo是整数，否则要parseInt转换
+      var time = new Date(shijianchuo);
+      var y = time.getFullYear();
+      var m = time.getMonth() + 1;
+      var d = time.getDate();
+      var h = time.getHours();
+      var mm = time.getMinutes();
+      var s = time.getSeconds();
+      return y + '-' + this.add0(m) + '-' + this.add0(d) + ' ' + h + '时'
+    },
     changeTab(num) {
       this.curIndex = num
       this.$emit('tabSelect', num)
-    }
+    },
   }
 }
 </script>
@@ -198,11 +225,13 @@ export default {
     color: #ffffff;
     font-size: 24px;
     padding: 0.67em;
+    display: flex;
   }
 
   .bar-content {
     // padding: 1em;
     flex: 1 auto;
+    position: relative;
   }
 
   .no-padding {

src/views/OperationalOverview/components/baseTable.vue

@@ -1,7 +1,7 @@
 <!--
  * @Date: 2020-12-14 09:07:03
  * @LastEditors: zhp
- * @LastEditTime: 2024-01-08 14:09:05
+ * @LastEditTime: 2024-01-12 14:30:46
  * @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
  * @Description:
 -->
@@ -110,12 +110,12 @@ export default {
     },
     classOption() {
       return {
-        step: 0.3, // 数值越大速度滚动越快
+        step: 0.2, // 数值越大速度滚动越快
-        limitMoveNum: 1, // 开始无缝滚动的数据量 this.list
+        limitMoveNum: 10, // 开始无缝滚动的数据量 this.list
         hoverStop: true, // 是否开启鼠标悬停stop
         direction: 1, // 0向下 1向上 2向左 3向右
         openWatch: true, // 开启数据实时监控刷新dom
-        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleHeight: 0/1, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
         singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
         waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
       };

src/views/OperationalOverview/components/coldDoubleYChart.vue

@@ -0,0 +1,292 @@
+
+<!--
+ * @Author: zhp
+ * @Date: 2023-09-21 09:06:28
+ * @LastEditTime: 2024-01-17 15:26:04
+ * @LastEditors: zhp
+ * @Description:
+-->
+<template>
+  <div>
+    <div :id="id" class="productChart" :style="{ height:   '390px', 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: [{
+        type: 'bar',
+        data: [],
+        barWidth: 6
+      }]
+    }
+  },
+  mounted() {
+    console.log('mounted')
+    console.log('borderRadius: ', this.borderRadius)
+    // this.$nextTick(() => {
+    //   this.initChart()
+    // })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart(nameList, passRateList, outputNumList) {
+      console.log(nameList, passRateList)
+     let  series= [
+        {
+          name: '产线产量',
+          type: 'bar',
+          yAxisIndex: 1,
+         itemStyle: {
+           normal: {
+             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+               { offset: 0, color: '#9DD5FF' },
+               { offset: 0.3, color: '#1295FF' }
+             ]),
+             label: {
+               show: true,		//开启显示
+               position: 'top',	//在上方显示
+               textStyle: {	    //数值样式
+                 color: '#ced1d5',
+                 fontSize: 12
+               }
+             },
+            }
+            // barBorderRadius: this.borderRadius
+          },
+          barWidth: 12,
+         data: outputNumList
+        },
+        {
+          name: '产线良品率',
+          symbol: 'circle', //变为实心圆
+          type: 'line',
+          yAxisIndex: 0,
+          areaStyle: {
+            opacity: 0.8,
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: 'rgba(255, 209, 96, 0.18)'
+              },
+              {
+                offset: 1,
+                color: 'rgba(255, 234, 153, 0)'
+              }
+            ])
+          },
+          itemStyle: {
+            normal: {
+              color: 'rgba(255, 209, 96, 1)', //改变折线点的颜色
+              lineStyle: {
+                color: 'rgba(255, 209, 96, 1)' //改变折线颜色
+              }
+            }
+          },
+          data: passRateList
+        }
+      ]
+      // 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: {
+          left: "3%",
+          right: "5%",
+          bottom: "3%",
+          containLabel: true
+        },
+        legend: {
+          itemWidth: 10,
+          itemHeight: 10,
+          top: '1%',
+          right: '20px',
+          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: nameList
+        },
+        // yAxis: {
+
+        // },
+        yAxis: [
+          {
+            min: function() { // 取最小值向下取整为最小刻度
+              return 0
+            },
+            max: function(value) { // 取最大值向上取整为最大刻度
+              return Math.ceil(value.max)
+            },
+            scale: true,
+            type: 'value',
+            name: '良品率/%',
+            nameTextStyle: {// y轴上方单位的颜色
+              color: '#fff',
+              align: "left",
+            },
+            position: 'right',
+            alignTicks: true,
+            axisLine: {
+              show: true,
+              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: {
+              color: "#fff",
+              // fontSize: 10,
+              align: "right",
+            },
+            position: 'left',
+            alignTicks: true,
+            axisLine: {
+              show: true,
+              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]
+            //   }jik078u7uut9890999999999999999999999999999999999999999999999999999999999999995u8
+            // },
+          }
+        ],
+        series: series
+      })
+    }
+  }
+}
+</script>
+<style>
+.productChart{
+  top: -40px;
+}
+</style>

src/views/OperationalOverview/components/doubleYChart .vue

@@ -1,13 +1,13 @@
 <!--
  * @Author: zhp
  * @Date: 2023-09-21 09:06:28
- * @LastEditTime: 2024-01-11 15:52:09
+ * @LastEditTime: 2024-01-17 13:56:46
  * @LastEditors: zhp
  * @Description:
 -->
 <template>
   <div>
-    <div :id="id" :class="className" :style="{ height: height + 'px', width: width }" />
+    <div :id="id" class="productChart" :style="{ height:   '390px', width: width }" />
   </div>
 </template>
 
@@ -70,9 +70,9 @@ export default {
   mounted() {
     console.log('mounted')
     console.log('borderRadius: ', this.borderRadius)
-    this.$nextTick(() => {
+    // this.$nextTick(() => {
-      this.initChart()
+    //   this.initChart()
-    })
+    // })
   },
   beforeDestroy() {
     if (!this.chart) {
@@ -83,6 +83,7 @@ export default {
   },
   methods: {
     initChart(nameList, passRateList, outputNumList) {
+      console.log(nameList, passRateList)
      let  series= [
         {
           name: '产线产量',
@@ -151,11 +152,12 @@ export default {
           left: "3%",
           right: "5%",
           bottom: "3%",
-          width: 'auto',
-          height: "auto",
           containLabel: true
         },
         legend: {
+          itemWidth: 10,
+          itemHeight: 10,
+          right: '20px',
           data: ['产线产量', '产线良品率'],
           textStyle: {
             fontSize: 12 * this.beilv,
@@ -281,3 +283,8 @@ export default {
   }
 }
 </script>
+<style>
+.productChart{
+  top: -40px;
+}
+</style>

src/views/OperationalOverview/components/linearBarChart.vue

@@ -173,3 +173,4 @@ export default {
   }
 }
 </script>
+

src/views/OperationalOverview/components/pileBarChart.vue

@@ -1,13 +1,13 @@
 <!--
  * @Author: zhp
  * @Date: 2023-12-27 13:54:52
- * @LastEditTime: 2023-12-29 16:28:26
+ * @LastEditTime: 2024-01-17 10:09:36
  * @LastEditors: zhp
  * @Description:
 -->
 <template>
   <div>
-    <div :id="id" :class="className" :style="{ height: height + 'px', width: width }" />
+    <div :id="id" class="productChart" :style="{ height: height + 'px', width: width }" />
   </div>
 </template>
 
@@ -133,14 +133,17 @@ export default {
       // }
       this.chart.setOption({
         legend: {
+          // top: '2.5%',
+          // right: '20px',
           textStyle: {
             color: '#ffffff'
           }
         },
         grid: {
+          top:'80',
           left: '3%',
           right: '4%',
-          bottom: '3%',
+          // bottom: '3%',
           width: 'auto',
           height: 'auto',
           containLabel: true
@@ -213,3 +216,7 @@ export default {
   }
 }
 </script>
+<style scoped lang="scss">
+
+
+</style>

src/views/OperationalOverview/processingBoard.vue

@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2021-07-19 15:18:30
  * @LastEditors: zhp
- * @LastEditTime: 2024-01-12 09:59:58
+ * @LastEditTime: 2024-01-17 13:52:44
  * @Description:
 -->
 <template>
@@ -32,22 +32,25 @@
           <base-container :title="'设备报警'" :size="'small'" :height="318" :title-icon="'eqAlarm'">
             <!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="qualityYearTableProps"
               :table-data="equipmentList" /> -->
-            <base-table1 :page="1" :limit="999" :show-index="false" :table-config="qualityYearTableProps"
+            <!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="qualityYearTableProps"
-              :table-data="qualityYearList" />
+              :table-data="qualityYearList" /> -->
+            <dv-scroll-board :config="eqConfig" style="width:100%;height:350px" ref='eqScrollBoard' />
+
           </base-container>
         </el-col>
 
         <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
           <base-container :title="'各工序缺陷汇总'" :size="'small'" :title-icon="'scrap'">
-            <base-table1 :page="1" :limit="999" :show-index="false" :table-config="qualityMonthTableProps"
-              :table-data="qualityMonthList" />
             <!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="qualityMonthTableProps"
               :table-data="qualityMonthList" /> -->
+            <!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="qualityMonthTableProps"
+              :table-data="qualityMonthList" /> -->
+            <dv-scroll-board :config="processConfig" style="width:100%;height:350px" ref='processScrollBoard' />
           </base-container>
         </el-col>
 
         <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
-          <base-container :height="318" :size="'small'" :title="'工单监控'" :title-icon="'eqMonitoring'">
+          <base-container :height="318" :size="'small'" :title="'工单监控'" :title-icon="'order'">
             <!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
               <top-radio-group />
             </div> -->
@@ -126,8 +129,7 @@
               <top-radio-group />
             </div> -->
             <!-- 像下面这样表格里的limit值，也许可以用js动态计算出来 -->
-            <double-y-chart ref="productLineChart" :id=" 'doubleYChart' " :name-list="cxNameList"
+            <double-y-chart ref="productLineChart" :id=" 'doubleYChart' " :height="359" :show-legend="true" />
-              :data-list="cxDataList" :height="359" :show-legend="true" />
           </base-container>
         </el-col>
       </el-row>
@@ -547,6 +549,28 @@ export default {
       // offsetWidth: null,
       qualityYearTableProps,
       cxNameList,
+      eqConfig: {
+        header: ['序号', '设备名称', '工序', '损耗片数', '缺陷类型'],
+        headerBGC: 'rgba(32, 55, 96, 0.8)',
+        oddRowBGC: 'rgba(32, 55, 96, 0.8)',
+        evenRowBGC: 'rgba(14, 32, 62, 0.8)',
+        columnWidth: [70, 130, 100, 120, 110,],
+        align: ['center'],
+        data: [],
+        // index:true,
+        rowNum: 10
+      },
+      processConfig: {
+        header: ['序号', '产线名', '设备编码', '设备状态', '是否故障'],
+        headerBGC: 'rgba(32, 55, 96, 0.8)',
+        oddRowBGC: 'rgba(32, 55, 96, 0.8)',
+        evenRowBGC: 'rgba(14, 32, 62, 0.8)',
+        columnWidth: [70, 70, 130, 150, 110,],
+        align: ['center'],
+        data: [],
+        // index:true,
+        rowNum: 10
+      },
       cxDataList,
       productLineList:[],
       qualityYearList,
@@ -607,8 +631,7 @@ export default {
     this.SJGInitWebSocket()
     this.getTimes()
     this.$refs.EnergyMonitoringChart.initChart(['Y61', 'Y62', 'Y63', 'Y64', 'Y65',], [3134, 2323, 3232, 3233, 2321])
-    this.$refs.productLineChart.initChart(['Y61', 'Y62', 'Y63', 'Y64', 'Y65',], ['98', '97', '98.7', '98.5', '98.3',], ['4532', '1223', '3442', '4343', '2232'])
+    this.$refs.productLineChart.initChart(['Y61', 'Y62', 'Y63', 'Y64', 'Y65',], [98, 97, 98.7, 98.5, 98.3,], [3134, 2323, 3232, 3233, 2321])
-
     const _this = this;
     _this.beilv2 = document.documentElement.clientWidth / 1920
     window.onresize = () => {
@@ -651,13 +674,28 @@ export default {
         // console.log('11111', res);
         this.productLineList = res.data
       })
-      // this.$axios.get(
+      this.$axios.get(
-      //   'base/quality-inspection-record/dayStatistics',
+        'base/quality-inspection-record/dayStatistics',
-      //   'get',
+        'get',
-      // ).then((res) => {
+      ).then((res) => {
-      //   // console.log('11111', res);
+        // console.log('11111', res);
-      //   this.qualityMonthList = res.data ? res.data : []
+        if (res.data) {
-      // })
+          let processArr = res.data.map((item, index) => [
+            // console.log(item)
+            `<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
+            </span>`,
+            // formatDate(item.planStartTime) || '',
+            `
+          <span style="color:rgba(255,255,255,0.5)" >${item.productionLineName || ''}
+            </span>`,
+            `<span style="color:rgba(255,255,255,0.5)">${item.sectionName || ''}</span>`,
+            `<span style="color:rgba(255,255,255,0.5)">${item.count || ''}</span>`,
+            `<span style="color:rgba(255,255,255,0.5)">${item.inspectionTypeName || ''}</span>`,
+          ])
+          this.processConfig.data = processArr
+          this.$refs['processScrollBoard'].updateRows(processArr)
+        }
+      })
     },
     getTimes() {
       setInterval(this.getTimesInterval, 1000);
@@ -752,17 +790,31 @@ export default {
         });
         console.log(this.orderList)
       } else if (this.SJGWsData.type === 'equipment') {
-        this.equipmentList = this.SJGWsData.detData.map((ele, index) => {
+        // this.equipmentList = this.SJGWsData.detData.map((ele, index) => {
-          // if (ele.progressRate != 1) {
+        //   // if (ele.progressRate != 1) {
-            return {
+        //     return {
-              id: ele.id,
+        //       id: ele.id,
-              name: ele.name,
+        //       name: ele.name,
-              code: ele.code,
+        //       code: ele.code,
-              status: ele.status,
+        //       status: ele.status,
-              error: ele.error=== true ? '是' : '否'
+        //       error: ele.error=== true ? '是' : '否'
-            }
         //     }
-        });
+        //   // }
+        // });
+        let eqArr = this.SJGWsData.detData.map((item, index) => [
+          // console.log(item)
+          `<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
+            </span>`,
+          // formatDate(item.planStartTime) || '',
+          `
+          <span style="color:rgba(255,255,255,0.5)" >${item.name || ''}
+            </span>`,
+          `<span style="color:rgba(255,255,255,0.5)">${item.code || ''}</span>`,
+          `<span style="color:rgba(255,255,255,0.5)">${item.status || ''}</span>`,
+          `<span style="color:rgba(255,255,255,0.5)">${item.error || ''}</span>`,
+        ])
+        this.eqConfig.data = eqArr
+        this.$refs['eqScrollBoard'].updateRows(eqArr)
         // console.log(SJGWsData.orderList)
       } else if (this.SJGWsData.type === 'productline') {
         // console.log(this.wsData.detData);
@@ -1061,7 +1113,7 @@ export default {
   flex: 1 1;
 }
 .h-full {
-  height: calc(100vh - 150px);
+  height: calc(100vh);
 }
 /* .container-main {
   min-height: calc(100vh - 10em);

src/views/quality/base/qualityHotMaterial/add-or-updata.vue

@@ -1,13 +1,13 @@
 <!--
  * @Author: zhp
  * @Date: 2023-12-08 13:46:17
- * @LastEditTime: 2024-01-09 16:03:22
+ * @LastEditTime: 2024-01-16 14:59:33
  * @LastEditors: zhp
  * @Description:
 -->
 <template>
-  <el-drawer :visible.sync="visible" :show-close="false" :wrapper-closable="false" class="drawer" size="50%">
+  <el-drawer :visible.sync="visible" :show-close="true" :wrapper-closable="false" class="drawer" size="50%">
-    <small-title slot="title" :no-padding="true">
+    <small-title slot="title" :no-padding="true" @close="handleClose">
       {{ isdetail ? '详情' : !dataForm.id ? '新增' : '编辑' }}
     </small-title>
     <div class="content">
@@ -90,6 +90,18 @@
               </span>
             </el-form-item>
           </el-col>
+          <el-col :span="4">
+            <el-form-item :prop="'checkValueList.' + index + '.minValue'" label="最小值"
+              :rules="[{ required: true, message: '最小值', trigger: 'blur' }]">
+              <el-input disabled style="width: 90%;margin-right: 10px;" v-model="item.minValue"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="4">
+            <el-form-item :prop="'checkValueList.' + index + '.minValue'" label="最大值"
+              :rules="[{ required: true, message: '最大值', trigger: 'blur' }]">
+              <el-input disabled style="width: 90%;margin-right: 10px;" v-model="item.maxValue"></el-input>
+            </el-form-item>
+          </el-col>
         </el-row>
         <el-row :gutter="24">
           <el-col :span="8">
@@ -252,6 +264,10 @@ export default {
         this.dataForm.checkValueList[index].isStandard = false
       }
     },
+    handleClose() {
+      this.ingredientList = undefined
+      console.log(222222222);
+    },
     dataFormSubmit() {
       this.$refs["dataForm"].validate((valid) => {
         if (!valid) {
@@ -288,7 +304,9 @@ export default {
             Promise.all(array).then(res => {
               console.log(res)
               this.visible = false;
+              this.$modal.msgSuccess("修改成功");
               this.$emit("refreshDataList");
+              this.ingredientList = []
             }).catch(error => {
               // 如果任何一个请求失败，将会进入这个 catch 块
               console.log(error)
@@ -326,6 +344,7 @@ export default {
           Promise.all(array).then(res => {
             this.$modal.msgSuccess("新增成功");
             this.visible = false;
+            this.ingredientList= []
             this.$emit("refreshDataList");
           }).catch(error => {
             // 如果任何一个请求失败，将会进入这个 catch 块
@@ -434,6 +453,7 @@ export default {
 		init(id, isdetail) {
       this.initData()
       this.getDict()
+      this.ingredientList = []
 			this.isdetail = isdetail || false;
 			this.dataForm.id = id || undefined;
 			this.visible = true;
@@ -445,7 +465,6 @@ export default {
 
 			this.$nextTick(() => {
 				this.$refs['dataForm'].resetFields();
-
 				if (this.dataForm.id) {
           // 获取产品详情
           let valueList = []
@@ -459,6 +478,7 @@ export default {
               valueList = arr.map((ele) => {
                 // console.log(ele)
                 return {
+                  checkDetId:ele.id,
                   maxValue: ele.maxValue,
                   minValue: ele.minValue
                 }
@@ -472,8 +492,8 @@ export default {
                     id: ele.id,
                     checkDetId: ele.id,
                     checkValue: ele.checkValue,
-                    // isStandard: true,
+                    maxValue:null,
-                    // showIcon: false,
+                    minValue: null
                   }
                 })
                 console.log(this.ingredientList);
@@ -487,9 +507,15 @@ export default {
                     showIcon: false,
                   }
                 })
+                valueList.forEach((ele, index) => {
+                  if (this.ingredientList[index].checkDetId >= ele.checkDetId) {
+                    this.ingredientList[index].minValue = ele.minValue
+                    this.ingredientList[index].maxValue = ele.maxValue
+                  }
+                })
                 valueList.forEach((ele,index) => {
                   console.log(ele);
-                    if (this.dataForm.checkValueList[index].checkValue >= ele.minValue && this.dataForm.checkValueList[index].checkValue <= ele.maxValue) {
+                  if (this.dataForm.checkValueList[index].checkDetId >= ele.checkDetId && this.dataForm.checkValueList[index].checkValue >= ele.minValue && this.dataForm.checkValueList[index].checkValue <= ele.maxValue) {
                       this.dataForm.checkValueList[index].showIcon = true
                       this.dataForm.checkValueList[index].isStandard = true
                     } else {
@@ -512,7 +538,8 @@ export default {
 		},
 		goback() {
 			this.$emit('refreshDataList');
-			this.visible = false;
+      this.visible = false
+      this.ingredientList = []
 			// this.initData();
 		},
 		goEdit() {