Merge remote-tracking branch 'new_hw/yangwl'

src/api/board/cs2.js

@@ -5,7 +5,10 @@ export function getHourProductionList(query) {
   return request({
     url: '/mes/reportWork/getHourProductionList',
     method: 'get',
-    params: query
+    params: query,
+    header:{
+      PoolName:'ds_999'
+    }
   });
 }
 
@@ -14,6 +17,9 @@ export function getAgvData(query) {
   return request({
     url: 'http://192.168.202.25:9001/api/scada/agvdata',
     method: 'get',
-    params: query
+    params: query,
+    header:{
+      PoolName:'ds_999'
+    }
   });
 }

src/api/board/cs3.js

@@ -0,0 +1,79 @@
+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,
+    header:{
+      PoolName:'ds_999'
+    }
+  });
+}
+
+export function EnergyExpend(query) {
+  return request({
+    url: '/mes/h5/EnergyExpend',
+    method: 'get',
+    params: query,
+    header:{
+      PoolName:'ds_1000'
+    }
+  });
+}
+
+export function agvdata(query) {
+  return request({
+    url: 'http://192.168.202.25:9001/api/scada/agvdata',
+    method: 'get',
+    params: query,
+    header:{
+      PoolName:'ds_999'
+    }
+  });
+}
+
+export function PlanAchievementRate(query) {
+  return request({
+    url: '/mes/reportWork/PlanAchievementRate',
+    method: 'get',
+    params: query,
+    header:{
+      PoolName:'ds_999'
+    }
+  });
+}
+
+export function getHfChartDatas(query) {
+  return request({
+    url: '/quality/qcProCheck/getHfChartDatas',
+    method: 'get',
+    params: query,
+    header:{
+      PoolName:'ds_999'
+    }
+  });
+}
+
+export function getHourProductionLists(query) {
+  return request({
+    url: '/mes/reportWork/getHourProductionLists',
+    method: 'get',
+    params: query,
+    header:{
+      PoolName:'ds_999'
+    }
+  });
+}

src/components/Charts/Chart.vue

@@ -0,0 +1,35 @@
+<template>
+  <div />
+</template>
+
+<script>
+import * as echarts from 'echarts';
+
+export default {
+  expose: ['setData'],
+  data() {
+    return {
+      chart: null,
+    }
+  },
+  mounted() {
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    setData(option) {
+      this.initChart(option)
+    },
+    initChart(option) {
+      this.chart = echarts.init(this.$el, 'macarons')
+
+      this.chart.setOption(option)
+    }
+  }
+}
+</script>

src/router/index.js

@@ -33,6 +33,7 @@ export const constantRoutes = [
   {path: '/cs', component: () => import('@/views/cs/index.vue')},
   {path: '/cs2', component: () => import('@/views/cs/index2.vue')},
   {path: '/cs3', component: () => import('@/views/cs/index3.vue')},
+  {path: '/cs3_1', component: () => import('@/views/cs/index3_1.vue')},
   {
     path: '/redirect',
     component: Layout,

src/utils/request.js

@@ -24,8 +24,8 @@ const service = axios.create({
 // request拦截器
 service.interceptors.request.use(config => {
   if(localStorage.getItem('USER_POOL_NAME_CURRENT')){
-		config.headers['poolName'] = localStorage.getItem('USER_POOL_NAME_CURRENT');
-    console.log(localStorage.getItem('USER_POOL_NAME_CURRENT'))
+		config.headers['poolName'] = config.header?.PoolName || localStorage.getItem('USER_POOL_NAME_CURRENT');
+    console.log(config.headers['poolName'])
 	}
   // 是否需要设置 token
   const isToken = (config.headers || {}).isToken === false

src/views/cs/index2.vue

@@ -7,7 +7,8 @@
       <div class="subTitle" style="left: 48.9%;">烘房区</div>
       <div class="subTitle" style="left: 70.8%;">收坯区</div>
       <div class="floorNum floorNum1">1F</div>
-      <div class="floorNum floorNum2" @click="$router.push('/cs')">2F</div>
+      <!--      <div class="floorNum floorNum2" @click="$router.push('/cs')">2F</div>-->
+      <div class="floorNum floorNum2">2F</div>
       <div class="floorNum floorNum3">3F</div>
       <div class="floorNum floorNum4">4F</div>
       <div class="floorNum floorNum5">5F</div>
@@ -84,7 +85,10 @@
         <div class="infoModel" :style="`display:${loopIndex === k?'inline-block':''}`">
           <div class="title">{{ i.equName }}</div>
           <div class="equipmentOutput"><span style="color: #fff9">设备产量:</span> {{ i.quantity }}</div>
-          <div class="equipmentInfo"><span style="color: #fff9">设备状态:</span> {{ parseFloat(i.quantity) > 0 ? '运行' : '停机' }}</div>
+          <div class="equipmentInfo"><span style="color: #fff9">设备状态:</span> {{
+              parseFloat(i.quantity) > 0 ? '运行' : '停机'
+            }}
+          </div>
         </div>
       </div>
 
@@ -94,14 +98,17 @@
              :style="`display:${loopIndex === 18+k?'inline-block':''}`">
           <div class="title">{{ i.equName }}</div>
           <div class="equipmentOutput"><span style="color: #fff9">设备产量:</span> {{ i.quantity }}</div>
-          <div class="equipmentInfo"><span style="color: #fff9">设备状态:</span> {{ parseFloat(i.quantity) > 0 ? '运行' : '停机' }}
+          <div class="equipmentInfo"><span style="color: #fff9">设备状态:</span> {{
+              parseFloat(i.quantity) > 0 ? '运行' : '停机'
+            }}
           </div>
         </div>
       </div>
-      <div :class="((equipmentData||[])[k]||{}).quantity>0 ? 'ring':'ring1'" :style="`top:${i.top}%;left:${i.left}%`" v-for="(i,k) in ringLocation"></div>
+      <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>
@@ -110,6 +117,7 @@
 
 import * as TWEEN from '@tweenjs/tween.js'
 import {getAgvData, getHourProductionList} from "../../api/board/cs2";
+import {parseTime} from "../../utils/openPlatform";
 
 export default {
   data() {
@@ -278,30 +286,29 @@ export default {
       equipmentData: [],
       agvData: [],
       siteData: {
-        x: 121000,
-        y: 82000
+        x: 120565,
+        y: 71313
       }
     }
   },
   methods: {
     getLocation(x, y) {
-      let a = (66 + (90 - 66) * y) * x
-      let b = 12 * y
-      let xLocation = 16 - b + a
-      let yLocation = 22 + (84 - 22) * y
+      let a = (70 + (91 - 70) * y) * x
+      let b = 10.5 * y
+      let xLocation = 14.5 - b + a
+      let yLocation = 29 + (85 - 29) * y
       return ` left: ${xLocation}%;top: ${yLocation}%;`
     },
     getAgvLocation() {
       let agvArr = []
       getAgvData().then(e => {
-        console.log(Math.max(...e.Data.map(v => v.X)), Math.max(...e.Data.map(v => v.Y)))
         e.Data.forEach(v => {
           agvArr.push({
             id: v.AgvId,
-            x: (v.X - 126000) / this.siteData.x,
-            y: (72000 - (v.Y - 116000)) / this.siteData.y,
+            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
           })
@@ -315,24 +322,25 @@ export default {
           if (this.agvData.filter(r => r.id === v.AgvId).length >= 1) {
             let f1 = new TWEEN.Tween(this.agvData.find(r => r.id === v.AgvId)).to({
               rotate: v.Angle,
-            }, 100).start().onComplete(()=>{
+            }, 100).start().onComplete(() => {
               f1 = null
             })
             let f2 = new TWEEN.Tween(this.agvData.find(r => r.id === v.AgvId)).to({
-              x: (v.X - 126000) / this.siteData.x,
-              y: (72000 - (v.Y - 116000)) / this.siteData.y,
-              show: v.X < 245000 && v.X > 126000 && v.Y < 187000 && v.Y > 116000
+              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,
+              IsLoad: v.IsLoad,
               // show: true
-            }, time - 100).start().onComplete(()=>{
+            }, time - 100).start().onComplete(() => {
               f2 = null
             })
           } else {
             this.agvData.push({
               id: v.AgvId,
-              x: (v.X - 126000) / this.siteData.x,
-              y: (72000 - (v.Y - 116000)) / this.siteData.y,
+              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
             })
@@ -341,7 +349,29 @@ export default {
       })
     },
     getData() {
-      getHourProductionList().then(e => {
+
+      let time = parseTime(new Date(), '{h}-{i}').split('-')
+      let i = parseFloat(time[0]) || 0
+      let s = parseFloat(time [1]) || 0
+      let createTimeStart = `${parseTime(new Date(), '{y}-{m}-{d}')} 07:30:00`
+      let createTimeEnd = `${parseTime(new Date(), '{y}-{m}-{d}')} 19:30:00`
+      if (parseFloat(`${i}.${s}`) > 7.3 && parseFloat(`${i}.${s}`) < 19.3) {
+        createTimeStart = `${parseTime(new Date(), '{y}-{m}-{d}')} 07:30:00`
+        createTimeEnd = `${parseTime(new Date(), '{y}-{m}-{d}')} 19:30:00`
+      } else if (parseFloat(`${i}.${s}`) < 7.3) {
+        createTimeStart = `${parseTime(new Date(), '{y}-{m}-')}${parseFloat(parseTime(new Date(), '${d}')) - 1} 19:30:00`
+        createTimeEnd = `${parseTime(new Date(), '{y}-{m}-{d}')} 07:30:00`
+      } else if (parseFloat(`${i}.${s}`) > 19.3) {
+        createTimeStart = `${parseTime(new Date(), '{y}-{m}-{d}')} 19:30:00`
+        createTimeEnd = `${parseTime(new Date(), '{y}-{m}-')}${parseFloat(parseTime(new Date(), '${d}')) + 1} 07:30:00`
+      } else {
+        createTimeStart = `${parseTime(new Date(), '{y}-{m}-{d}')} 07:30:00`
+        createTimeEnd = `${parseTime(new Date(), '{y}-{m}-{d}')} 19:30:00`
+      }
+      getHourProductionList({
+        productDateStart: createTimeStart,
+        productDateEnd: createTimeEnd
+      }).then(e => {
         let hfArr = []
         let equipmentArr = []
         for (let i = 0; i < 18; i++) {
@@ -360,6 +390,7 @@ export default {
     this.getAgvLocation()
     let time = 2 * 1000
     setInterval(() => {
+      this.getData()
       this.updateAGVLocation(time)
     }, time)
 

src/views/cs/index3.vue

@@ -1,30 +1,503 @@
 <template>
-  <div class="body">
-    <iframe :src="iframeSrc" style="width: 100%;height: 100%"></iframe>
+  <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.map(e=>parseFloat(e.quantity)||0).reduce((a,b)=>a+b,0) }}</div>
+    <div class="num1" style="top:31.5%;left:57.7%">{{ HData.map(e=>parseFloat(e.quantity)||0).reduce((a,b)=>a+b,0) }}</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.sumChe }}</div>
+    <div class="num2" style="top: 88.6%;left: 90.7%;color:#48b5fd">{{ proData.totalRecordCount }}</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: #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"
+        style="height: 94%;overflow: hidden;margin-top: 1%"
+      >
+        <div
+          v-for="(item, index) in table1Data"
+          :key="index"
+          class="case-item"
+
+        >
+          <div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
+            <div
+              class="scrollTable" style="color:#49b2fc">
+              {{ item.equipment_code }}
+            </div>
+            <div
+              class="scrollTable" style="color:#49b2fc">
+              {{ item.temperature }}℃
+            </div>
+            <div
+              class="scrollTable" style="color:#49b2fc">
+              {{ item.humidity }}
+            </div>
+            <div
+              class="scrollTable" style="color:#49b2fc">
+              {{ item.Intheoven }}
+            </div>
+            <div
+              class="scrollTable" style="color:#49b2fc">
+              {{  (parseFloat(item.expend/item.yield)||0).toFixed(2) }}KWh
+            </div>
+          </div>
+        </div>
+      </vue-seamless-scroll>
+    </div>
+    <Chart ref="chart1" class="chart1"></Chart>
+    <Chart ref="chart2" class="chart2"></Chart>
   </div>
 </template>
 <script>
 
-import * as TWEEN from '@tweenjs/tween.js'
-import {getAgvData, getHourProductionList} from "../../api/board/cs2";
+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";
+import {parseTime} from "../../utils/openPlatform";
 
 export default {
+  components: {
+    Chart,
+    vueSeamlessScroll,
+  },
   data() {
     return {
-      iframeSrc:'http://192.168.202.20:8100/#/de-link/gXZdFzxH'
+      chart1TableOption: {
+        step: 0.5, // 数值越大速度滚动越快
+        limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 0,
+      },
+      table1Data: [],
+      CData: [],
+      HData: [],
+      expend: 0,
+      agvData: [],
+      proData: {},
+      percent: ''
     }
   },
-  methods: {},
-  mounted() {}
+  mounted() {
+    this.getData()
+    setInterval(() => {
+      this.getData()
+    }, 5 * 1000)
+  },
+  methods: {
+    getData() {
+      dryRoomDataCarousel().then(e => {
+        this.table1Data = e.data.dryingroomList || []
+      })
+      EnergyExpend().then(e => {
+        this.expend = e.map(v => v.expend).reduce((a, b) => a + b, 0).toFixed(2)
+      })
+      agvdata().then(e => {
+        console.log(e)
+        this.agvData = e.Data.filter(v=>v.State===2)
+      })
+      PlanAchievementRate().then(e => {
+        this.proData = e.data
+        this.percent = e.msg
+      })
+      let time = parseTime(new Date(), '{h}-{i}').split('-')
+      let i = parseFloat(time[0]) || 0
+      let s = parseFloat(time [1]) || 0
+      let createTimeStart = `${parseTime(new Date(), '{y}-{m}-{d}')} 07:30:00`
+      let createTimeEnd = `${parseTime(new Date(), '{y}-{m}-{d}')} 19:30:00`
+      if (parseFloat(`${i}.${s}`) > 7.3 && parseFloat(`${i}.${s}`) < 19.3) {
+        createTimeStart = `${parseTime(new Date(), '{y}-{m}-{d}')} 07:30:00`
+        createTimeEnd = `${parseTime(new Date(), '{y}-{m}-{d}')} 19:30:00`
+      } else if (parseFloat(`${i}.${s}`) < 7.3) {
+        createTimeStart = `${parseTime(new Date(), '{y}-{m}-')}${parseFloat(parseTime(new Date(), '${d}')) - 1} 19:30:00`
+        createTimeEnd = `${parseTime(new Date(), '{y}-{m}-{d}')} 07:30:00`
+      } else if (parseFloat(`${i}.${s}`) > 19.3) {
+        createTimeStart = `${parseTime(new Date(), '{y}-{m}-{d}')} 19:30:00`
+        createTimeEnd = `${parseTime(new Date(), '{y}-{m}-')}${parseFloat(parseTime(new Date(), '${d}')) + 1} 07:30:00`
+      } else {
+        createTimeStart = `${parseTime(new Date(), '{y}-{m}-{d}')} 07:30:00`
+        createTimeEnd = `${parseTime(new Date(), '{y}-{m}-{d}')} 19:30:00`
+      }
+
+      getHourProductionList({
+        productDateStart: createTimeStart,
+        productDateEnd: createTimeEnd
+      }).then(e => {
+        this.CData = e.filter(v => v.equName.includes('成型机'))
+        this.HData = e.filter(v => v.equName.includes('烘房'))
+      })
+
+      getHfChartDatas({
+        createTimeStart: createTimeStart,
+        createTimeEnd: createTimeEnd,
+        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 => {
+        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: [
+            {
+              label: {
+                show: true,
+                position: 'top',
+                formatter: "{c}",
+                color: "#fff"
+              },
+              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">
-.body{
+.bg {
+  background-image: url("~@/assets/board/cs3/bg.jpg");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  overflow: hidden;
+}
+
+.title {
+  position: absolute;
+  top: 3%;
+  left: 0;
+  width: 100%;
+  text-align: center;
+  font-size: 2vw;
+  color: #fff;
+  letter-spacing: 2px;
+  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 {
+  margin: auto 0px;
+  padding: 4px 0;
+  white-space: nowrap;
+  //overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: center;
+  display: inline-block;
+  width: 20%;
+}
+
+.table1 {
+  position: absolute;
+  top: 18.5%;
+  left: 3.2%;
+  width: 25.4%;
+  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>

src/views/cs/index3_1.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="body">
+    <iframe :src="iframeSrc" style="width: 100%;height: 100%"></iframe>
+  </div>
+</template>
+<script>
+
+import * as TWEEN from '@tweenjs/tween.js'
+import {getAgvData, getHourProductionList} from "../../api/board/cs2";
+
+export default {
+  data() {
+    return {
+      iframeSrc:'http://192.168.202.20:8100/#/de-link/gXZdFzxH'
+    }
+  },
+  methods: {},
+  mounted() {}
+}
+</script>
+<style scoped lang="less">
+.body{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+</style>