添加白坯页面

src/api/board/cs3.js

@@ -0,0 +1,61 @@
+import request from '@/utils/request'
+
+// 查询产量
+export function dryRoomDataCarousel(query) {
+  return request({
+    url: '/mes/wcsInterface/dryRoomDataCarousel',
+    method: 'post',
+    data: {
+      "factory": "999"
+    }
+  });
+}
+
+// 查询产量
+export function getHourProductionList(query) {
+  return request({
+    url: '/mes/reportWork/getHourProductionList',
+    method: 'get',
+    params: query
+  });
+}
+
+export function EnergyExpend(query) {
+  return request({
+    url: '/mes/h5/EnergyExpend',
+    method: 'get',
+    params: query
+  });
+}
+
+export function agvdata(query) {
+  return request({
+    url: 'http://192.168.202.25:9001/api/scada/agvdata',
+    method: 'get',
+    params: query
+  });
+}
+
+export function PlanAchievementRate(query) {
+  return request({
+    url: '/mes/reportWork/PlanAchievementRate',
+    method: 'get',
+    params: query
+  });
+}
+
+export function getHfChartDatas(query) {
+  return request({
+    url: '/quality/qcProCheck/getHfChartDatas',
+    method: 'get',
+    params: query
+  });
+}
+
+export function getHourProductionLists(query) {
+  return request({
+    url: '/mes/reportWork/getHourProductionLists',
+    method: 'get',
+    params: query
+  });
+}

src/views/cs/index2.vue

@@ -101,7 +101,7 @@
       <div :class="((equipmentData||[])[k]||{}).quantity>0 ? 'ring':'ring1'" :style="`top:${i.top}%;left:${i.left}%`" v-for="(i,k) in ringLocation"></div>
 
 
-      <div :class="`${i.isGoods? 'agv2':'agv1'}`" v-for="i in agvData" v-show="i.show"
+      <div :class="`${i.IsLoad? 'agv2':'agv1'}`" v-for="i in agvData" v-show="i.show"
            :style="`${getLocation(i.x,i.y)}transform: rotate(${parseFloat(i.rotate )- 180}deg);`"></div>
     </div>
   </div>
@@ -300,7 +300,7 @@ export default {
             x: (v.X - 126061) / this.siteData.x,
             y: (71313 - (v.Y - 116722)) / this.siteData.y,
             rotate: v.Angle,
-            isGoods: false,
+            IsLoad: v.IsLoad,
             show: v.X < 245000 && v.X > 126000 && v.Y < 187000 && v.Y > 116000
             // show: true
           })
@@ -320,7 +320,8 @@ export default {
             let f2 = new TWEEN.Tween(this.agvData.find(r => r.id === v.AgvId)).to({
               x: (v.X - 126061) / this.siteData.x,
               y: (71313 - (v.Y - 116722)) / this.siteData.y,
-              show: v.X < 245000 && v.X > 126000 && v.Y < 187000 && v.Y > 116000
+              show: v.X < 245000 && v.X > 126000 && v.Y < 187000 && v.Y > 116000,
+              IsLoad: v.IsLoad,
               // show: true
             }, time - 100).start().onComplete(()=>{
               f2 = null
@@ -331,7 +332,7 @@ export default {
               x: (v.X - 126061) / this.siteData.x,
               y: (71313 - (v.Y - 116722)) / this.siteData.y,
               rotate: v.Angle,
-              isGoods: false,
+              IsLoad: v.IsLoad,
               show: v.X < 245000 && v.X > 126000 && v.Y < 187000 && v.Y > 116000
               // show: true
             })

src/views/cs/index3.vue

@@ -1,63 +1,102 @@
 <template>
   <div class="bg">
     <div class="title">白坯车间数字应用大屏</div>
+    <div class="modelTitle" style=" top: 15.2%;left: 3%;">烘房状态</div>
+    <div class="modelTitle" style="top:15.2%;left:32%">设备运行数据</div>
+    <div class="modelTitle" style="top:15.2%;left:71%">烘房白坯质量统计</div>
+    <div class="modelTitle" style="top:65%;left:32%">近7天产量</div>
+    <div class="modelTitle" style="top:65%;left:71%">计划达成率</div>
+    <div class="title1" style="top:24%;left:34%">成型机数量：</div>
+    <div class="title1" style="top:24%;left:52.5%">烘房数量：</div>
+    <div class="title1" style="top:45%;left:34%">烘房耗电量：</div>
+    <div class="title1" style="top:45%;left:52.5%">AGV数量：</div>
+    <div class="unit1" style="top: 31.3%;left: 45.5%;">车</div>
+    <div class="unit1" style="top: 31.3%;left: 63.5%">车</div>
+    <div class="unit1" style="top: 51.3%;left: 45.5%;">KWh</div>
+    <div class="unit1" style="top: 51.3%;left: 63.5%;">台</div>
+    <div class="num1" style="top: 31.5%;left: 39.5%;">{{ CData.length }}</div>
+    <div class="num1" style="top:31.5%;left:57.7%">{{ HData.length }}</div>
+    <div class="num1" style="top:51.6%;left:39.5%">{{ expend }}</div>
+    <div class="num1" style="top:51.6%;left:57.7%">{{ agvData.length }}</div>
+    <div class="title2" style="top: 73.5%;left: 86.8%;">计划生产数量：</div>
+    <div class="title2" style="top: 85.3%;left: 86.8%;">实际生产数量：</div>
+    <div class="unit2" style="top: 76.5%;left: 95%;">车</div>
+    <div class="unit2" style="top: 88.5%;left: 95%;">车</div>
+    <div class="num2" style="top: 76.8%;left: 90.7%;color:#12fdae">{{ proData.totalRecordCount }}</div>
+    <div class="num2" style="top: 88.6%;left: 90.7%;color:#48b5fd">{{ proData.sumChe }}</div>
+    <div class="num3" style="top: 80.3%;left: 78.6%;">{{ percent }}</div>
+    <div class="title3" style="top: 91%;left: 78.8%;">计划达成率</div>
 
     <div class="table1">
-      <div style="background-color: #094170">
+      <div style="background-color: #0d61aa;height: 5%;line-height: calc(3.9vh - 8px);color:#fbfafd">
         <div class="scrollTable" style="font-weight: bold;">
-          告警编号
+          烘房
         </div>
         <div class="scrollTable" style="font-weight: bold;">
-          告警类型
+          温度
         </div>
         <div class="scrollTable" style="font-weight: bold;">
-          告警单元
+          湿度
         </div>
         <div class="scrollTable" style="font-weight: bold;">
-          操作
+          在生产
+        </div>
+        <div class="scrollTable" style="font-weight: bold;">
+          单车耗能
         </div>
       </div>
       <vue-seamless-scroll
         :class-option="{...chart1TableOption,limitMoveNum:10}"
         :data="table1Data"
-        class="case-item"
+        style="height: 94%;overflow: hidden;margin-top: 1%"
-        style="height: 84%;overflow: hidden;"
       >
         <div
           v-for="(item, index) in table1Data"
           :key="index"
+          class="case-item"
 
         >
           <div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
             <div
-              class="scrollTable">
+              class="scrollTable" style="color:#49b2fc">
-              {{ item.no }}
+              {{ item.equipment_code }}
             </div>
             <div
-              class="scrollTable">
+              class="scrollTable" style="color:#49b2fc">
-              {{ item.alarmInfoType === '1' ? '设备报警' : '' }}
+              {{ item.temperature }}℃
-              {{ item.alarmInfoType === '2' ? '监控单元报警' : '' }}
-              {{ item.alarmInfoType === '3' ? '离线报警' : '' }}
-              {{ item.alarmInfoType === '4' ? '电子围栏' : '' }}
             </div>
             <div
-              class="scrollTable">
+              class="scrollTable" style="color:#49b2fc">
-              {{ item.location }}
+              {{ item.humidity }}
             </div>
-            <div class="scrollTable" style="width: 25%">
+            <div
-              <el-button v-if="item.status === '0'" size="mini" type="primary" @click="dispose(item)">处理</el-button>
+              class="scrollTable" style="color:#49b2fc">
-              <span v-else>已处理</span>
+              {{ item.dollyNumber }}
+            </div>
+            <div
+              class="scrollTable" style="color:#49b2fc">
+              {{ item.expend }}KWh
             </div>
           </div>
         </div>
       </vue-seamless-scroll>
     </div>
+    <Chart ref="chart1" class="chart1"></Chart>
+    <Chart ref="chart2" class="chart2"></Chart>
   </div>
 </template>
 <script>
 
 import Chart from "@/components/Charts/Chart";
 import vueSeamlessScroll from "vue-seamless-scroll";
+import {
+  agvdata,
+  avgdata,
+  dryRoomDataCarousel,
+  EnergyExpend, getHfChartDatas,
+  getHourProductionList, getHourProductionLists,
+  PlanAchievementRate
+} from "../../api/board/cs3";
 
 export default {
   components: {
@@ -75,20 +114,221 @@ export default {
         singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
         singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
         waitTime: 0,
-        autoPlay: false,
-        navigation: false
       },
-      table1Data: []
+      table1Data: [],
+      CData: [],
+      HData: [],
+      expend: 0,
+      agvData: [],
+      proData: {},
+      percent: ''
     }
   },
-  methods: {},
   mounted() {
+    this.getData()
+  },
+  methods: {
+    getData() {
+      dryRoomDataCarousel().then(e => {
+        this.table1Data = e.data.dryingroomList || []
+      })
+
+      getHourProductionList().then(e => {
+        this.CData = e.filter(v => v.equName.includes('成型机'))
+        this.HData = e.filter(v => v.equName.includes('烘房'))
+      })
+      EnergyExpend().then(e => {
+        this.expend = e.map(v => v.expend).reduce((a, b) => a + b, 0).toFixed(2)
+      })
+      agvdata().then(e => {
+        this.agvData = e.Data
+      })
+      PlanAchievementRate().then(e => {
+        this.proData = e.data
+        this.percent = e.msg
+      })
+      getHfChartDatas({
+        createTimeStart: '2024-11-02 00:00:00',
+        createTimeEnd: '2024-11-04 00:00:00',
+        chartType: 'cp'
+      }).then(e => {
+        let option = {
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              // Use axis to trigger tooltip
+              type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
+            }
+          },
+          legend: {
+            textStyle: {
+              color: '#eee'
+            }
+          },
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'value'
+          },
+          yAxis: {
+            type: 'category',
+            axisLabel: {
+              color: '#ccc'
+            },
+            data: e.checkList.map(v => v.machineName),
+          },
+          series: [
+            {
+              name: '合格数量',
+              type: 'bar',
+              stack: 'total',
+              label: {
+                show: true,
+                position:'insideRight',
+                formatter:"{c}车",
+                color:"#000"
+              },
+              emphasis: {
+                focus: 'series'
+              },
+              itemStyle: {
+                color:{
+                  type: 'linear',
+                  x: 0,
+                  y: 0,
+                  x2: 1,
+                  y2: 0,
+                  colorStops: [{
+                    offset: 0, color: '#1e60f2' // 0% 处的颜色
+                  }, {
+                    offset: 1, color: '#00b9ff' // 100% 处的颜色
+                  }],
+                  global: false // 缺省为 false
+                }
+              },
+              data: e.checkList.map(v => parseFloat(v.quality))
+            },
+            {
+              name: '不合格数量',
+              type: 'bar',
+              stack: 'total',
+              label: {
+                show: true,
+                position:'right'
+              },
+              emphasis: {
+                focus: 'series'
+              },
+              data: e.checkList.map(v => 0)
+            },
+          ]
+        };
+        this.$refs.chart1.setData(option)
+      })
+      getHourProductionLists().then(e => {
+        console.log(e)
+        let option1 = {
+          grid: {
+            top: '15%',
+            bottom: '10%',
+            left: '5%',
+            right: '3%'
+          },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow',
+              label: {
+                show: true
+              }
             }
+          },
+          legend: {
+            right: 0,
+            textStyle: {
+              color: '#eee'
+            }
+          },
+          xAxis: {
+            data: e.map(v=>v.pdate),
+            axisLine: {
+              show: true, //隐藏X轴轴线
+              lineStyle: {
+                color: '#fff'
+              }
+            },
+            axisTick: {
+              show: true //隐藏X轴刻度
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: '#fff' //X轴文字颜色
+              }
+            }
+          },
+          yAxis: [
+            {
+              type: 'value',
+              name: '单位：车',
+              nameTextStyle: {
+                color: '#fff'
+              },
+              splitLine: {
+                show: false
+              },
+              axisTick: {
+                show: true
+              },
+              axisLine: {
+                show: true,
+                lineStyle: {
+                  color: '#fff'
+                }
+              },
+              axisLabel: {
+                show: true,
+                textStyle: {
+                  color: '#fff'
+                }
+              }
+            }
+          ],
+          series: [
+            {
+              name: '产量',
+              type: 'line',
+              smooth: true, //平滑曲线显示
+              showAllSymbol: true, //显示所有图形。
+              symbol: "emptyCircle", //标记的图形为实心圆
+              symbolSize: 5, //标记的大小
+              // itemStyle: {
+              //   //折线拐点标志的样式
+              //   color: "#058cff",
+              // },
+              // lineStyle: {
+              //   color: "#058cff",
+              // },
+              // areaStyle: {
+              //   color: "rgba(5,140,255, 0.2)",
+              // },
+              data: e.map(v=>parseFloat(v.quantity)),
+            },
+          ]
+        };
+        this.$refs.chart2.setData(option1)
+      })
+    },
+  },
 }
 </script>
 <style scoped lang="less">
 .bg {
-  background-image: url("~@/assets/board/cs3/bg.png");
+  background-image: url("~@/assets/board/cs3/bg.jpg");
   background-size: 100% 100%;
   background-repeat: no-repeat;
   position: absolute;
@@ -110,23 +350,122 @@ export default {
   transform: translateY(-50%);
 }
 
+.title1 {
+  position: absolute;
+  font-size: 1.2vw;
+  color: #fff;
+  letter-spacing: 2px;
+  transform: translateY(-50%);
+}
+
+.title2 {
+  position: absolute;
+  font-size: 0.7vw;
+  color: #fff;
+  letter-spacing: 2px;
+  transform: translateY(-50%);
+}
+
+.title3 {
+  position: absolute;
+  font-size: 1.2vw;
+  color: #0394fc;
+  letter-spacing: 2px;
+  transform: translate(-50%, -50%);
+}
+
+.unit1 {
+  position: absolute;
+  font-size: 0.8vw;
+  color: #eee;
+  letter-spacing: 2px;
+  transform: translateY(-50%);
+}
+
+.unit2 {
+  position: absolute;
+  font-size: 0.8vw;
+  color: #eee;
+  letter-spacing: 2px;
+  transform: translateY(-50%);
+}
+
+.num1 {
+  position: absolute;
+  font-size: 1.3vw;
+  color: #4ab4fd;
+  letter-spacing: 2px;
+  transform: translate(-50%, -50%);
+}
+
+.num2 {
+  position: absolute;
+  font-size: 1.3vw;
+  color: #4ab4fd;
+  letter-spacing: 2px;
+  transform: translate(-50%, -50%);
+}
+
+.num3 {
+  position: absolute;
+  font-size: 2vw;
+  color: #fff;
+  letter-spacing: 2px;
+  transform: translate(-50%, -50%);
+}
+
+.modelTitle {
+  position: absolute;
+  font-size: 1vw;
+  color: #fff;
+  letter-spacing: 2px;
+  transform: translateY(-50%);
+}
+
 .scrollTable {
-  color: rgb(185, 186, 192);
   margin: auto 0px;
   padding: 4px 0;
   white-space: nowrap;
-  overflow: hidden;
+  //overflow: hidden;
   text-overflow: ellipsis;
   text-align: center;
   display: inline-block;
-  width: 25%;
+  width: 20%;
 }
 
 .table1 {
   position: absolute;
-  top: 10%;
+  top: 18.5%;
-  left: 10%;
+  left: 3.2%;
-  width: 20%;
+  width: 25.4%;
-  height: 40%;
+  height: 78%;
+}
+
+.chart1 {
+  position: absolute;
+  width: 27.4%;
+  height: 41.7%;
+  top: 18%;
+  left: 70.4%;
+
+}
+
+.chart2 {
+  position: absolute;
+  width: 37.4%;
+  height: 28.5%;
+  top: 67.6%;
+  left: 31.3%;
+
+}
+
+.case-item {
+  border: 2px solid #0c61ad;
+  border-radius: 2px;
+  margin: 8px 0 0 0;
+  color: #0c61ad;
+  font-size: 0.9vw;
+  line-height: 1.5vw;
+  background-color: #134781;
 }
 </style>