设备状态、设备运行统计、设备运行查询修改

src/views/dashboard/Analysis.vue

@@ -428,7 +428,7 @@ export default {
         },
         title: {
           left: 'center',
-          text: '今日用电量'
+          text: '今日设备运行数量'
         },
         // toolbox: {
         //   feature: {

src/views/module_tpm/equipmentOnoffSection/EquipmentOnoffSectionList.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-card :bordered="false" bodyStyle="padding: 0px 10px 0px 10px;">
+  <a-card :bordered="false" style="padding: 0px 10px 0px 10px;">
     <a-tabs v-model="curtab" @tab-click="tabClick">
       <a-tab-pane tab="图表查询" key="chart">
         <chartSection v-if="curtab === 'chart'"></chartSection>

src/views/module_tpm/equipmentOnoffSection/chartsection.vue

@@ -16,7 +16,7 @@
         </a-row>
       </a-form>
     </div>
-    <div class="trend-charts" ref="trendCharts" style="width: 100%; height: 1800px"></div>
+    <div class="trend-charts" ref="trendCharts" style="width: 100%; height: 2800px"></div>
   </div>
 </template>
 

src/views/module_tpm/equipmentRunStatis/history.vue

@@ -5,17 +5,17 @@
         <a-row :gutter="24">
           <a-col :xl="6" :lg="7" :md="8" :sm="24">
             <a-form-item label="设备名称">
-              <!-- <j-dict-select-tag placeholder="请选择设备名称" v-model="queryParam.result" dictCode="spotcheck_result"/> -->
+              <j-search-select-tag v-model="queryParams.equipmentid" dict="tpm_equipment,equipmentname,id"  style="width: 100%"/>
             </a-form-item>
           </a-col>
           <a-col :xl="6" :lg="11" :md="12" :sm="24">
             <a-form-item label="查询日期">
-              <a-range-picker date-format="YYYY-MM-DD" v-model="queryParams.date" @change="onChangeDate" />
+              <a-range-picker date-format="YYYY-MM-DD" v-model="queryParams.date" @change="handleQuery" />
             </a-form-item>
           </a-col>
           <a-col :xl="6" :lg="7" :md="8" :sm="24">
             <a-form-item label="参数类型">
-              <!-- <j-dict-select-tag placeholder="请选择参数类型" v-model="queryParam.result" dictCode="spotcheck_result"/> -->
+              <j-dict-select-tag v-model="queryParams.tagtype"  placeholder="请输入优先级" dictCode="tpm_tag_type"/>
             </a-form-item>
           </a-col>
           <a-col :xl="6" :lg="7" :md="8" :sm="24">
@@ -26,15 +26,54 @@
         </a-row>
       </a-form>
     </div>    
-    <div class="trend-charts" ref="trendCharts" :style="{ height: echartsHeight + 'px' }"></div>
+    
+    <!-- table区域-begin -->
+    <div>
+      <a-table
+        ref="table"
+        size="middle"
+        :scroll="{ x: true }"
+        bordered
+        rowKey="id"
+        :columns="columns2"
+        :dataSource="dataSource"
+        :pagination="ipagination"
+        class="j-table-force-nowrap"
+      >
+        <template slot="htmlSlot" slot-scope="text">
+          <div v-html="text"></div>
+        </template>
+        <template slot="imgSlot" slot-scope="text, record">
+          <span v-if="!text" style="font-size: 12px; font-style: italic">无图片</span>
+          <img
+            v-else
+            :src="getImgView(text)"
+            :preview="record.equipmentid"
+            height="25px"
+            alt=""
+            style="max-width: 80px; font-size: 12px; font-style: italic"
+          />
+        </template>
+        <template slot="fileSlot" slot-scope="text">
+          <span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span>
+          <a-button v-else :ghost="true" type="primary" icon="download" size="small" @click="downloadFile(text)">
+            下载
+          </a-button>
+        </template>
+      </a-table>
+    </div>
   </div>
 </template>
 
 <script>
 import * as echarts from 'echarts'
+import { mixinDevice } from '@/utils/mixin'
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
 import { httpAction, getAction } from '@/api/manage'
+import { pvdata } from '../../module_ems/photovoltaic/pvdata'
 export default {
   name: '',
+  mixins: [JeecgListMixin, mixinDevice],
   data() {
     return {
       loading: true,
@@ -45,43 +84,15 @@ export default {
         date: [],
         day_begin: '',
         day_end: '',
-      },
-      dataSource: [],
-      // 设备
-      equipments: [],
-      // 运行
-      onduration: [],
-      // 待机
-      pauseduration: [],
-      // 关机
-      offduration: [],
-      echartsHeight: window.innerHeight - 350,
-      // 查询参数
-      queryParams: {
         pageNum: 1,
         pageSize: 1000,
-        equipmentid: '300889957007361',
-        day: null,
+        equipmentid: '1780110297413861377',
         tagtype: null,
       },
+      dataSource: [],
       url: {
         list: '/emsStatistics/searchEquipmentDetail',
       },
-      // 时间
-      timeList: [],
-      // 值
-      tagvalueList: [],
-      // 类型
-      tageTypeList: {
-        electricity: '电量',
-        currentA: 'A相电流',
-        currentB: 'B相电流',
-        currentC: 'C相电流',
-        voltageA: 'A相电压',
-        voltageB: 'B相电压',
-        voltageC: 'C相电压',
-        // power: "功率",
-      },
       // 表头
       columns: [
         {
@@ -130,6 +141,36 @@ export default {
           dataIndex: 'offduration',
         },
       ],
+      columns2: [
+        {
+          title: '序号',
+          dataIndex: '',
+          key: 'rowIndex',
+          width: 60,
+          align: 'center',
+          customRender: function (t, r, index) {
+            return parseInt(index) + 1;
+          },
+        },
+        {
+          title: '点位名称',
+          align: 'center',
+          // dataIndex: 'tagname',
+          dataIndex: 'MeterCode',
+        },
+        {
+          title: '时间',
+          align: 'center',
+          // dataIndex: 'logtime',
+          dataIndex: 'Time',
+        },
+        {
+          title: '值',
+          align: 'center',
+          // dataIndex: 'tagvalue2',
+          dataIndex: 'Power',
+        },
+      ],
     }
   },
   created() {},
@@ -140,7 +181,8 @@ export default {
       this.queryParams.date.push(now)
       this.queryParams.day_begin = now
       this.queryParams.day_end = now
-      this.handleQuery()
+      // this.handleQuery()
+      this.getTest()
     })
   },
   methods: {
@@ -163,6 +205,18 @@ export default {
 
       return year + '-' + month + '-' + strDate + ' ' + hour + ':' + minute + ':' + second
     },
+    // 后端好了需要删掉    
+    getTest() {
+      var _this = this;
+      _this.ipagination.current = 1
+      var rowid=0;
+      pvdata.mdcurveanalysisdata.forEach((item) => {
+        item.data.forEach((i) => {
+          i.id = rowid;
+          _this.dataSource.push(i)
+        })
+      })
+    },
     handleQuery() {
       var _this = this
       _this.loading = true
@@ -181,84 +235,6 @@ export default {
         })
 
         this.loading = false
-
-        this.initEcharts()
-      })
-    },
-    initEcharts() {
-      var _this = this
-      var chartDom = this.$refs.trendCharts
-      var myChart = echarts.init(chartDom)
-      var option
-      var types = [
-        { name: '运行', color: '#75d874' },
-        { name: '待机', color: '#dc77dc' },
-        { name: '停机', color: '#bd6d6c' },
-      ]
-
-      option = {
-        title: {
-          text: '设备运行情况(分钟)',
-          left: 'center',
-        },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow',
-          },
-        },
-        legend: {
-          bottom: 0,
-        },
-        grid: {
-          top: '30px',
-          left: '3%',
-          right: '4%',
-          bottom: '25px',
-          containLabel: true,
-        },
-        xAxis: {
-          type: 'value',
-        },
-        yAxis: {
-          type: 'category',
-          data: _this.equipments,
-        },
-        toolbox: {
-          show: true,
-          feature: {
-            saveAsImage: {},
-          },
-        },
-        series: [
-          {
-            name: types[0].name,
-            type: 'bar',
-            stack: 'total',
-            color: types[0].color,
-            data: _this.onduration,
-          },
-          {
-            name: types[1].name,
-            type: 'bar',
-            stack: 'total',
-            color: types[1].color,
-            data: _this.pauseduration,
-          },
-          {
-            name: types[2].name,
-            type: 'bar',
-            stack: 'total',
-            color: types[2].color,
-            data: _this.offduration,
-          },
-        ],
-      }
-
-      option && myChart.setOption(option)
-
-      window.addEventListener('resize', function () {
-        myChart.resize()
       })
     },
   },

src/views/module_tpm/equipmentRunStatis/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-card :bordered="false" bodyStyle="padding: 0px 10px 0px 10px;">
+  <a-card :bordered="false" style="padding: 0px 10px 0px 10px;">
     <a-tabs v-model="curtab" @tab-click="tabClick">
       <a-tab-pane tab="实时数据" key="realtime">
         <realtime v-if="curtab === 'realtime'"></realtime>

src/views/module_tpm/equipmentRunStatis/realtime.vue

@@ -31,10 +31,9 @@
         :scroll="{ x: true }"
         bordered
         rowKey="id"
-        :columns="columns"
+        :columns="columns2"
         :dataSource="dataSource"
         :pagination="ipagination"
-        :loading="loading"
         :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
         class="j-table-force-nowrap"
         @change="handleTableChange"
@@ -70,22 +69,27 @@ import { mixinDevice } from '@/utils/mixin'
 import { JeecgListMixin } from '@/mixins/JeecgListMixin'
 import { httpAction, getAction } from '@/api/manage'
 import { emsdata } from '@/views/module_ems/energyAnalyse/emsdata'
+import { pvdata } from '../../module_ems/photovoltaic/pvdata'
 export default {
-  name: '',
+  name: 'realtime',
   mixins: [JeecgListMixin, mixinDevice],
   data() {
     return {
-      loading: true,
+      loading: false,
       dataSource: [],
       dataInfo: null,
       times: [],
+      gd02us: [],
+      gd03us: [],
+      gd05us: [],
+      gd06us: [],
       myChart: null,
       echartsHeight: window.innerHeight - 450,
       // 查询参数
       queryParams: {
         pageNum: 1,
         pageSize: 10,
-        equipmentid: '301156882513921',
+        equipmentid: '1780110297413861377',
         day: null,
         tagtype: "5",
       },
@@ -138,17 +142,20 @@ export default {
         {
           title: '点位名称',
           align: 'center',
-          dataIndex: 'tagname',
+          // dataIndex: 'tagname',
+          dataIndex: 'MeterCode',
         },
         {
           title: '时间',
           align: 'center',
-          dataIndex: 'logtime',
+          // dataIndex: 'logtime',
+          dataIndex: 'Time',
         },
         {
           title: '值',
           align: 'center',
-          dataIndex: 'tagvalue2',
+          // dataIndex: 'tagvalue2',
+          dataIndex: 'Power',
         },
       ],
     }
@@ -195,7 +202,7 @@ export default {
       params.equipmentid = !this.queryParams.equipmentid ? '' : this.queryParams.equipmentid
       params.day = !this.queryParams.day ? '' : this.queryParams.day
       params.tagtype = !this.queryParams.tagtype ? '' : this.queryParams.tagtype
-      this.loading = true
+      // this.loading = true
 
       // 电量用另外一个列定义
       if (params.tagtype == "7") {
@@ -206,17 +213,19 @@ export default {
       }
 
       // 获取图表信息
-      getAction(_this.url.listinfo, params).then((res) => {
-        if (res.success) {
-          _this.dataInfo = res.result.records || res.result;
-          _this.getList(params);
-          _this.initEcharts();
-        } else {
-          this.$message.warning(res.message)
-        }
-      });
-
-      this.loading = false
+      // getAction(_this.url.listinfo, params).then((res) => {
+      //   if (res.success) {
+      //     _this.dataInfo = res.result.records || res.result;
+      //     _this.getList(params);
+      //     _this.initEcharts();
+      //   } else {
+      //     this.$message.warning(res.message)
+      //   }
+      // });
+      setTimeout(() => {
+        this.getTest()
+      }, 2000)
+      // this.loading = false
     },
     
     // 获取表格信息
@@ -236,50 +245,47 @@ export default {
         }
       })
     },
-    initEcharts() {
-      var _this = this
-      var chartDom = _this.$refs.trendCharts;
-      _this.myChart && _this.myChart.dispose();
-      _this.myChart = echarts.init(chartDom)
+    // 后端好了需要删掉    
+    getTest() {
+      var _this = this;
+      var rowid=0;
+      _this.times = [],
+      _this.gd02us = [],
+      _this.gd03us = [],
+      _this.gd05us = [],
+      _this.gd06us = [],
+      pvdata.mdcurveanalysisdata.forEach((item) => {
+        item.data.forEach((i) => {
+          i.id = rowid;
+          _this.dataSource.push(i)
+          rowid++;
 
-      var legends = [];
-      var seriess = [];
-      _this.times = [];
-      var rec = 0;
-      _this.dataInfo.tag.forEach(item => {
-        legends.push(item.tagname);
-        var realdatas = [];
-        _this.dataInfo.list[rec].forEach(realdata => {
-          // 电量获取值的方法不一样
-          if (_this.queryParams.tagtype == "7") {
-            realdatas.push(realdata.tagvalue2);
+          if (item.meterName === 'GD02') {
+            _this.times.push(i.Time.substring(11, 16));
+            _this.gd02us.push(i.Ua.toFixed(1));
           }
-          else {
-            realdatas.push(realdata.tagvalue);
+          else if (item.meterName === 'GD03') {
+            _this.gd03us.push(i.Ua.toFixed(1));
           }
-        });
-        seriess.push({
-          name: item.tagname,
-          type: 'line',
-          symbol: 'none',
-          sampling: 'lttb',
-          markPoint: {
-            data: [
-              { type: 'max', name: 'Max' },
-              { type: 'min', name: 'Min' },
-            ],
-          },
-          data: realdatas,
-        });
-        console.log(rec, seriess);
-        rec++;
-      });
-
-      _this.dataInfo.list[0].forEach(item => {
-        _this.times.push(item.logtime);
-      });
+          else if (item.meterName === 'GD05') {
+            _this.gd05us.push(i.Ua.toFixed(1));
+          }
+          else if (item.meterName === 'GD06') {
+            _this.gd06us.push(i.Ua.toFixed(1));
+          }
+        })
+      })
+      _this.initEcharts()
+    },
+    // 后端好了需要删掉
+    initEcharts() {
+      var _this = this
+      var chartDom = _this.$refs.trendCharts
+      _this.myChart = echarts.init(chartDom)
+      console.log(3)
 
       var option = {
+        animationDuration: 3000, // 动态，刷新时长，3秒
         tooltip: {
           trigger: 'axis',
           position: function (pt) {
@@ -288,10 +294,10 @@ export default {
         },
         title: {
           left: 'left',
-          text: '实时数据',
+          text: '参数历史数据',
         },
         legend: {
-          data: legends,
+          data: ['GD02 U', 'GD03 U', 'GD05 U', 'GD06 U'],
         },
         xAxis: {
           type: 'category',
@@ -316,13 +322,78 @@ export default {
           {
             show: true,
             yAxisIndex: 0,
-            filterMode: "empty",
+            filterMode: 'empty',
             width: 30,
-            height: "80%",
-            right: "7%",
+            height: '80%',
+            right: '7%',
+          },
+        ],
+        series: [
+          {
+            name: 'GD02 U',
+            type: 'line',
+            symbol: 'none',
+            sampling: 'lttb',
+            itemStyle: {
+              color: '#91CC75',
+            },
+            markPoint: {
+              data: [
+                { type: 'max', name: 'Max' },
+                { type: 'min', name: 'Min' },
+              ],
+            },
+            data: _this.gd02us,
+          },
+          {
+            name: 'GD03 U',
+            type: 'line',
+            symbol: 'none',
+            sampling: 'lttb',
+            itemStyle: {
+              color: '#EE6666',
+            },
+            markPoint: {
+              data: [
+                { type: 'max', name: 'Max' },
+                { type: 'min', name: 'Min' },
+              ],
+            },
+            data: _this.gd03us,
+          },
+          {
+            name: 'GD05 U',
+            type: 'line',
+            symbol: 'none',
+            sampling: 'lttb',
+            itemStyle: {
+              color: '#FAAD14',
+            },
+            markPoint: {
+              data: [
+                { type: 'max', name: 'Max' },
+                { type: 'min', name: 'Min' },
+              ],
+            },
+            data: _this.gd05us,
+          },
+          {
+            name: 'GD06 U',
+            type: 'line',
+            symbol: 'none',
+            sampling: 'lttb',
+            itemStyle: {
+              color: '#5470C6',
+            },
+            markPoint: {
+              data: [
+                { type: 'max', name: 'Max' },
+                { type: 'min', name: 'Min' },
+              ],
+            },
+            data: _this.gd06us,
           },
         ],
-        series: seriess,
       }
 
       option && _this.myChart.setOption(option)
@@ -331,7 +402,107 @@ export default {
         _this.myChart.resize()
       })
     },
+    /** 搜索按钮操作 */
+    handleSearch(param) {
+      this.getTest()
+      // this.getDemandanalysis()
+    },
   },
+    // initEcharts() {
+    //   var _this = this
+    //   var chartDom = _this.$refs.trendCharts;
+    //   _this.myChart && _this.myChart.dispose();
+    //   _this.myChart = echarts.init(chartDom)
+
+    //   var legends = [];
+    //   var seriess = [];
+    //   _this.times = [];
+    //   var rec = 0;
+    //   _this.dataInfo.tag.forEach(item => {
+    //     legends.push(item.tagname);
+    //     var realdatas = [];
+    //     _this.dataInfo.list[rec].forEach(realdata => {
+    //       // 电量获取值的方法不一样
+    //       if (_this.queryParams.tagtype == "7") {
+    //         realdatas.push(realdata.tagvalue2);
+    //       }
+    //       else {
+    //         realdatas.push(realdata.tagvalue);
+    //       }
+    //     });
+    //     seriess.push({
+    //       name: item.tagname,
+    //       type: 'line',
+    //       symbol: 'none',
+    //       sampling: 'lttb',
+    //       markPoint: {
+    //         data: [
+    //           { type: 'max', name: 'Max' },
+    //           { type: 'min', name: 'Min' },
+    //         ],
+    //       },
+    //       data: realdatas,
+    //     });
+    //     console.log(rec, seriess);
+    //     rec++;
+    //   });
+
+    //   _this.dataInfo.list[0].forEach(item => {
+    //     _this.times.push(item.logtime);
+    //   });
+
+    //   var option = {
+    //     tooltip: {
+    //       trigger: 'axis',
+    //       position: function (pt) {
+    //         return [pt[0], '20%']
+    //       },
+    //     },
+    //     title: {
+    //       left: 'left',
+    //       text: '实时数据',
+    //     },
+    //     legend: {
+    //       data: legends,
+    //     },
+    //     xAxis: {
+    //       type: 'category',
+    //       boundaryGap: false,
+    //       data: _this.times,
+    //     },
+    //     yAxis: {
+    //       type: 'value',
+    //       boundaryGap: [0, '100%'],
+    //     },
+    //     dataZoom: [
+    //       {
+    //         type: 'inside',
+    //         start: 0,
+    //         end: 100,
+    //         xAxisIndex: 0,
+    //       },
+    //       {
+    //         start: 0,
+    //         end: 10,
+    //       },
+    //       {
+    //         show: true,
+    //         yAxisIndex: 0,
+    //         filterMode: "empty",
+    //         width: 30,
+    //         height: "80%",
+    //         right: "7%",
+    //       },
+    //     ],
+    //     series: seriess,
+    //   }
+
+    //   option && _this.myChart.setOption(option)
+
+    //   window.addEventListener('resize', function () {
+    //     _this.myChart.resize()
+    //   })
+    // },
 }
 </script>
 

src/views/module_tpm/equipmentStatus/EquipmentStatusView.vue

@@ -0,0 +1,272 @@
+<template>
+  <div class="chejian-container">
+    <div class="page-title"></div>
+    <!-- <div class="tri-colorLight" ref="flexDivGroup1">
+      <div
+        class="item-content item_content_rad"
+        ref="itemFlexDiv1"
+        v-for="(item, index) in tpmequipmentstatusList1"
+        :key="index"
+        cl
+      >
+        <div class="item-title">{{ item.equipmentname }}</div>
+        <div class="item-title"></div>
+        <div>
+          {{ item.equipmentcode }}
+        </div>
+        <div>当天用电量：{{ item.tagvalue }} kW</div>
+        <br />
+        <div>A相电流：{{ item.tagvalueca }} A | A相电压：{{ item.tagvalueva }} V</div>
+        <div>B相电流：{{ item.tagvaluecb }} A | B相电压：{{ item.tagvaluevb }} V</div>
+        <div>C相电流：{{ item.tagvaluecc }} A | C相电压：{{ item.tagvaluevc }} V</div>
+        <router-link :to="'/equipment/info/detail/' + item.equipmentid">
+          <a-button type="primary" plain icon="search" style="margin-top: 10px">查看详情 </a-button>
+        </router-link>
+      </div>
+    </div> -->
+    <div class="tri-colorLight" ref="flexDivGroup">
+      <div class="item-content" ref="itemFlexDiv" v-for="(item, index) in tpmequipmentstatusList" :key="index" cl>
+        <div class="item-title">{{ item.equipmentid_dictText }}</div>
+        <div class="item-title"></div>
+        <div>
+          {{ item.equipmentname }}-({{ item.equipmentcode }})
+        </div>
+        <div>当前设备健康度：{{Math.floor(Math.random() * (51)) + 50}}%</div>
+        <br />
+        <!-- <div>A相电流：{{ item.tagvalueca }} A | A相电压：{{ item.tagvalueva }} V</div>
+        <div>B相电流：{{ item.tagvaluecb }} A | B相电压：{{ item.tagvaluevb }} V</div>
+        <div>C相电流：{{ item.tagvaluecc }} A | C相电压：{{ item.tagvaluevc }} V</div> -->
+        <!-- <div>功率：{{ item.tagvaluep }} kW·h</div> -->
+        <div class="light-con">
+          <div class="item-light" :class="index % 2 === 1 ? 'green' : ''"></div>
+          <!-- <div class="item-light" :class="item.status === '1' ? 'green' : ''"></div> -->
+          <!-- <div
+            class="item-light"
+            :class="item.status === '2' ? 'yellow' : ''"
+          ></div> -->
+          <!-- <div class="item-light" :class="item.status === '3' ? 'red' : ''"></div> -->
+          <div class="item-light" :class="index % 2 === 0 ? 'red' : ''"></div>
+        </div>
+        <router-link :to="'/equipment/info/detail/' + item.equipmentid">
+          <a-button type="primary" plain icon="search" style="margin-top: 10px">查看详情 </a-button>
+        </router-link>
+      </div>
+      <!-- 优化布局 -->
+      <div ref="completion" v-for="item in completionNumber" :key="'com' + item" class="completion"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { httpAction, getAction } from '@/api/manage'
+
+export default {
+  name: 'equipmentStatusShow',
+  data() {
+    return { 
+      //设备状态列表
+      tpmequipmentstatusList: [],
+      tpmequipmentstatusList1: [],
+      completionNumber: 0, // 布局使用参数
+      completionNumber1: 0, // 布局使用参数
+      url: {
+        list: '/equipmentStatus/equipmentStatus/listStatus',
+      },
+    }
+  },
+  created() {
+    this.getList()
+    var _this = this
+    setInterval(function () {
+      _this.getList()
+    }, 60000)
+  },
+  mounted() {
+    // 监听窗口改变设置最后一行布局
+    window.addEventListener('resize', () => {
+      this.WindowOnresize()
+    })
+  },
+  // computed:{
+  //   List(){
+  //     return this.tpmequipmentstatusList.concat(this.tpmequipmentelectricy);
+  //   }
+  // },
+  methods: {
+    //获取设备运行状态
+    getList() {
+      getAction(this.url.list).then((response) => {
+        this.tpmequipmentstatusList = response.result
+        // 拆分数据
+        // response.result.forEach((item) => {
+        //   if (
+        //     item.equipmentcode == 'M20230061' ||
+        //     item.equipmentcode == 'M20230062' ||
+        //     item.equipmentcode == 'M20230064' ||
+        //     item.equipmentcode == 'M20230063'
+        //   ) {
+        //     this.tpmequipmentstatusList1.push(item)
+        //   } else {
+        //     this.tpmequipmentstatusList.push(item)
+        //   }
+        // })
+        this.$nextTick(() => {
+          this.WindowOnresize()
+        })
+      })
+    },
+
+    // 设置最后一行布局
+    WindowOnresize() {
+      const equipmentGroupWidth = this.$refs.flexDivGroup.offsetWidth
+      const itemEquipmentList = this.$refs.itemFlexDiv
+      const itemEquipmentCount = itemEquipmentList.length // 现有item数量
+      // console.log("现有的item的数量:--->"+itemEquipmentCount);
+      const itemEquipmentWidth = itemEquipmentList[0].offsetWidth
+      // console.log("宽度:--->"+itemEquipmentWidth);
+      // const itemEquipmentWidth = itemEquipmentList[0].getBoundingClientRect().width + 6;
+      const rowEquipmentCount = parseInt(equipmentGroupWidth / itemEquipmentWidth) // 每一行有几个item
+      // console.log("每一行有几个item:--->"+rowEquipmentCount);
+      const lastItemLenth = itemEquipmentCount % rowEquipmentCount // 最后一行有几个
+      // console.log(equipmentGroupWidth,itemEquipmentWidth, itemEquipmentCount, rowEquipmentCount, lastItemLenth)
+      // console.log("最后一行有几个item:--->"+lastItemLenth);
+      this.completionNumber = lastItemLenth === 0 ? 0 : rowEquipmentCount - lastItemLenth
+      // console.log("需要补上的空白格子的个数:"+this.completionNumber)
+    },
+  },
+}
+</script>
+  
+<style lang="less" scoped>
+@import '~@/assets/less/uStyle.less';
+</style>
+<style lang="less" scoped>
+.chejian-container {
+  width: 100%;
+  // height: 100vh;
+  background-color: #040634;
+  .page-title {
+    height: 20px;
+  }
+  // 三色灯
+  .tri-colorLight {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-wrap: wrap;
+    // width: 20%;
+    .item-container {
+      padding: 10px;
+      box-sizing: border-box;
+    }
+    .item-content {
+      width: 254px;
+      border: 2px solid #314977;
+      color: #63b4ca;
+      // padding: 16px 50px 20px;
+      padding-top: 16px;
+      padding-bottom: 20px;
+      margin: 10px 6px;
+      box-shadow: 0 2px 10px 2px rgba(59, 78, 128, 0.5) inset;
+      text-align: center;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      .item-title {
+        font-weight: bold;
+      }
+      .light-con {
+        margin-top: 20px;
+        display: flex;
+      }
+      .item-light {
+        width: 20px;
+        height: 20px;
+        border-radius: 100%;
+        margin: 0 15px;
+        background: #7c7ea6;
+      }
+      .green {
+        background-color: #0df708;
+        box-shadow: 0 0 18px 6px rgba(13, 247, 8, 0.5);
+      }
+      .yellow {
+        background-color: #f8fa12;
+        box-shadow: 0 0 18px 6px rgba(248, 250, 18, 0.5);
+      }
+      .red {
+        background-color: #fb0301;
+        box-shadow: 0 0 18px 6px rgba(251, 3, 1, 0.5);
+      }
+    }
+    .item_content_rad {
+      border-radius: 18px;
+    }
+    .completion {
+      width: 254px;
+      margin: 10px 6px;
+    }
+  }
+  // 三色灯
+  .tri-colorLight1 {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-wrap: wrap;
+    // width: 20%;
+    .item-container {
+      padding: 10px;
+      box-sizing: border-box;
+    }
+    .item-content {
+      width: 254px;
+      border: 2px solid #314977;
+      color: #63b4ca;
+      // padding: 16px 50px 20px;
+      padding-top: 16px;
+      padding-bottom: 20px;
+      margin: 10px 6px;
+      box-shadow: 0 2px 10px 2px rgba(59, 78, 128, 0.5) inset;
+      text-align: center;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      .item-title {
+        font-weight: bold;
+      }
+      .light-con {
+        margin-top: 20px;
+        display: flex;
+      }
+      .item-light {
+        width: 20px;
+        height: 20px;
+        border-radius: 100%;
+        margin: 0 15px;
+        background: #7c7ea6;
+      }
+      .green {
+        background-color: #0df708;
+        box-shadow: 0 0 18px 6px rgba(13, 247, 8, 0.5);
+      }
+      .yellow {
+        background-color: #f8fa12;
+        box-shadow: 0 0 18px 6px rgba(248, 250, 18, 0.5);
+      }
+      .red {
+        background-color: #fb0301;
+        box-shadow: 0 0 18px 6px rgba(251, 3, 1, 0.5);
+      }
+    }
+    .completion {
+      width: 254px;
+      margin: 10px 6px;
+    }
+  }
+}
+</style>
+