userName 1 hafta önce
ebeveyn
işleme
fca2e7657c

+ 3 - 3
public/index.html

@@ -9,9 +9,9 @@
   </head>
   <body>
     <script src="//cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
-    <script src="//cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
-    <script src="//cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
-    <script src="//cdn.jsdelivr.net/npm/echarts-liquidfill@3.1.0/dist/echarts-liquidfill.min.js"></script>
+    <script src="../static/echarts.min.js"></script>
+    <!-- <script src="//cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script> -->
+    <!-- <script src="//cdn.jsdelivr.net/npm/echarts-liquidfill@3.1.0/dist/echarts-liquidfill.min.js"></script> -->
     <script src="//cdn.staticfile.org/axios/0.19.0/axios.min.js"></script>
     <noscript>
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>

Dosya farkı çok büyük olduğundan ihmal edildi
+ 34 - 0
public/static/echarts.min.js


+ 11 - 1
src/api/index.js

@@ -36,6 +36,15 @@ export function getWeekQty(query) {
   })
 }
 
+// 获取人均产出
+export function getWorkerQty(query) {
+  return request({
+    url: '/open/mes/line/worker_qty',
+    method: 'get',
+    params: query
+  })
+}
+
 // 查询
 export function query(query) {
   return request({
@@ -70,4 +79,5 @@ export function update(query) {
     method: 'put',
     data: query
   })
-}
+}
+

+ 2 - 2
src/components/colorfulArea/index.vue

@@ -191,9 +191,9 @@ export default {
 <style lang="scss" scoped>
 .sn-container {
   left: 2%;
-  top: 100px;
+  top: 8%;
   width: 96%;
-  height: calc(100% - 120px);
+  height: 89%;
   .chartsdom {
     width: 100%;
     height: 100%;

+ 13 - 5
src/router/index.js

@@ -6,10 +6,10 @@ Vue.use(VueRouter)
 const routes = [
   {
     path: '/',
-    name: 'Product',
-    component: () => import('@/views/Product.vue'),
+    name: 'MonthTotal',
+    component: () => import('@/views/MonthTotal.vue'),
     meta: {
-      title: '智能产线可视化管理'
+      title: '本月总产量'
     }
   },
   {
@@ -29,7 +29,7 @@ const routes = [
     name: 'Product',
     component: () => import('@/views/Product.vue'),
     meta: {
-      title: '智能产线数据可视化平台'
+      title: '智能冲裁'
     }
   },
   {
@@ -37,7 +37,15 @@ const routes = [
     name: 'Daily',
     component: () => import('@/views/DailyOutput.vue'),
     meta: {
-      title: '本周总产量'
+      title: '每日产量'
+    }
+  },
+  {
+    path: '/person',
+    name: 'dailyPer',
+    component: () => import('@/views/DailyPerOutput.vue'),
+    meta: {
+      title: '本月人效'
     }
   },
   {

+ 24 - 0
src/utils/timeFormate.js

@@ -10,4 +10,28 @@ export function timeFormate(timeStamp) { //显示当前时间
     let getWeek = Math.ceil((date + 6 - week) / 7)
 
     return year + '年' + month + '月第' + getWeek + '周'
+}
+
+export function timeFormateMonth(timeStamp) { //显示当前时间
+    let newDate = new Date(timeStamp);
+    let year = newDate.getFullYear();
+    let month = newDate.getMonth() + 1 < 10 ? '0' + (newDate.getMonth() + 1) : newDate.getMonth() + 1;
+    let date = newDate.getDate();
+    let week = newDate.getDay();
+    let getWeek = Math.ceil((date + 6 - week) / 7)
+
+    return year + '年' + month + '月'
+}
+
+export function timeFormateWeek(timeStamp) {
+    let newDate = new Date(timeStamp);
+    let year = newDate.getFullYear();
+    var d1 = new Date(timeStamp);
+    var d2 = new Date(timeStamp);
+    d2.setMonth( 0 );
+    d2.setDate( 1 );
+    var rq = d1 - d2;
+    var s1 = Math.ceil(rq / ( 24 * 60 * 60 * 1000 ));
+    var s2 = Math.ceil(s1 / 7 );
+    return year + '年第' + s2 + '周'
 }

+ 49 - 40
src/views/DailyOutput.vue

@@ -9,7 +9,7 @@
       <div class="wrap" ref="editor">
         <div class="wrap-container sn-container"> 
           <div class="sn-content"> 
-            <div class="sn-title">{{ time }} <span style="color:#ff9829">成型B线</span> 每日产量</div> 
+            <div class="sn-title">{{ time }} <span style="color:#ff9829">{{ name }}</span> 每日产量</div> 
             <div class="sn-body"> 
               <div class="wrap-container"> 
               <div class="chartsdom" id="chart_ptrend"></div>
@@ -24,65 +24,65 @@
   <script>
   import { screenSize } from '@/assets/js/utils';
   import { getCountDay } from "@/api/index";
-  import { timeFormate } from "@/utils/timeFormate";
-  
+  import { timeFormateWeek } from "@/utils/timeFormate";
+
   export default {
   name: "pyramidTrend",
   data() {
     return {
+      name: '',
       option: null,
       dataMap: ['星期一','星期二','星期三','星期四','星期五','星期六','星期日'],
       data: [],
-      time: ''
+      allData: {},
+      time: '',
+      timer: null,
+      timelineData: []
+    }
+  },
+  watch: {
+    name(newVal, oldVal){
+      if (newVal && newVal !== oldVal) {
+        this.loadData(newVal);
+        this.$nextTick(() => {
+          this.getEchart();
+        })
+      }
     }
   },
-  mounted() {
-    this.getData();
+  async mounted() {
+    await this.getData();
 
     screenSize(this.$refs.editor);
 
-    this.time = timeFormate(new Date());
+    this.time = timeFormateWeek(new Date());
   },
   methods: {
     /** 获取列表数据 */
     async getData() {
-      let list = [];
       await getCountDay().then(res => {
         if (res.data) {
-          this.dataMap.forEach((item) => {
-            Object.keys(res.data).forEach((key) => {
-              if (item === key) {
-                list.push(res.data[key]['B线'])
-              }
-            })
+          Object.keys(res.data).forEach((key) => {
+            this.allData = res.data;
+            // this.timelineData.push(key)
           })
-
-          this.data = list;
+          // this.name = this.timelineData[0];
+          this.name = '智能线'
         }
       }).catch();
-
-      this.getEchart();
     },
 
-    dataFormatter(obj) {
-      let pList = ['星期一','星期二','星期三','星期四','星期五','星期六', '星期日'];
-      let temp;
-      for (let x = 0; x < 3; x++) {
-          let max = 0;
-          let sum = 0;
-          temp = obj[x];
-          for (let i = 0, l = temp.length; i < l; i++) {
-              max = Math.max(max, temp[i]);
-              sum += temp[i];
-              obj[x][i] = {
-                name: pList[i],
-                value: temp[i]
-              };
+    /** 数据加载处理 */
+    loadData(val) {
+      let list = [];
+      this.dataMap.forEach((item) => {
+        Object.keys(this.allData).forEach((key) => {
+          if (item === key) {
+            list.push(this.allData[key][val] || 0)
           }
-          obj[x + 'max'] = Math.floor(max / 100) * 100;
-          obj[x + 'sum'] = sum;
-      }
-      return obj;
+        })
+      })
+      this.data = list;
     },
     getEchart() {
       let myChart = echarts.init(document.getElementById('chart_ptrend'));
@@ -103,16 +103,16 @@
             axisType: 'category',
             autoPlay: false,
             playInterval: 60000,
-            // data: ['第一周', '第二周', '第三周', '第四周'],
+            data: this.timelineData,
             left: 80,
             right: 80,
-            bottom: 10,
+            bottom: -200,
             lineStyle: {
               show:false,
               color: '#179bf1'
             },
             label: {
-              show: true,
+              show: false,
               color: '#fff',
               fontSize: '24'
             },
@@ -225,10 +225,19 @@
       window.addEventListener('resize', () => {
         myChart.resize();
       });
+
+      // let _this = this;
+      // myChart.on('timelinechanged', function (params) {
+      //   _this.name = _this.timelineData[params.currentIndex];
+      // })
+
+      this.timer = setInterval(() => {
+          this.getData()
+      }, 1800000)
     }
   },
   beforeDestroy() {
-    
+    clearInterval(this.timer);
   }
 };
 </script>

+ 528 - 0
src/views/DailyPerOutput.vue

@@ -0,0 +1,528 @@
+<!--
+ 描述: 酷屏首页模板
+ 作者: anni
+ 日期: 2024-10-30
+-->
+
+<template>
+    <div class="home-container">
+      <div class="wrap" ref="editor">
+        <div class="wrap-container sn-container"> 
+          <div class="sn-content"> 
+            <div class="sn-title">{{ time }} <span style="color:#ff9829">{{ name }}</span> 日人均产出</div> 
+            <div class="sn-body"> 
+              <div class="wrap-container"> 
+                <div class="chartsdom" id="chart_work"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="wrap-container sn-container sn-container-bottom"> 
+          <div class="sn-content"> 
+            <div class="sn-title">{{ time }} <span style="color:#ff9829">{{ name }}</span> 每日工作人数</div> 
+            <div class="sn-body"> 
+              <div class="wrap-container"> 
+                <div class="chartsdom" id="chart_ptrend"></div>
+              </div>
+            </div>
+          </div>
+        </div>  
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  import { screenSize } from '@/assets/js/utils';
+  import { getWorkerQty } from "@/api/index";
+  import { timeFormateMonth } from "@/utils/timeFormate";
+  
+  export default {
+  name: "pyramidTrend",
+  data() {
+    return {
+      name: '',
+      option: null,
+      dataMap: [],
+      data: [],
+      time: '',
+      timelineData: [],
+      allData: {}
+    }
+  },
+  watch: {
+    name(newVal) {
+      this.loadData(newVal);
+    }
+  },
+  async mounted() {
+    await this.getData();
+
+    screenSize(this.$refs.editor);
+
+    this.time = timeFormateMonth(new Date());
+
+    this.loadData(this.name);
+  },
+  //s
+  methods: {
+    /** 获取列表数据 */
+    async getData() {
+      this.timelineData = [];
+      await getWorkerQty().then(res => {
+        if (res.data) {
+          Object.keys(res.data).forEach((key) => {
+            this.allData = res.data;
+            this.timelineData.push(key)
+          })
+          // this.name = this.timelineData[0];
+          this.name = '智能线';
+        }
+      }).catch();
+    },
+    /** 数据加载处理 */
+    loadData(val) {
+      let arr = [];
+      this.workData = [];
+      this.data = [];
+      this.dataMap = []
+      Object.keys(this.allData[val]).forEach((key) => {
+        arr.push({
+          time: key.split('-')[2],
+          num: parseInt(this.allData[val][key]['人均产出']),
+          people: this.allData[val][key]['每日工作人数']
+        });
+      })
+      arr.sort((a, b) => {
+          return a.time - b.time
+      })
+      arr.forEach((item) => {
+        this.workData.push(item.num);
+        this.data.push(item.people);
+        this.dataMap.push(item.time)
+      })
+
+      this.getWorkEchart();
+      this.getEchart();
+    },
+    getWorkEchart() {
+      let myWorkChart = echarts.init(document.getElementById('chart_work'));
+      let itemStyle = {
+        barBorderRadius: [15, 0],
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+          offset: 0,
+          color: '#7bff80'
+        },{
+          offset: 1,
+          color: '#7bff80a6'
+        }])
+      }
+
+      this.option = {
+        baseOption: {
+          timeline: {
+            axisType: 'category',
+            autoPlay: false,
+            loop: true,
+            playInterval: 60000,
+            data: this.timelineData,
+            left: 180,
+            right: 180,
+            bottom: -100,
+            lineStyle: {
+              show: true,
+              color: '#179bf1'
+            },
+            label: {
+              show: true,
+              color: '#fff',
+              fontSize: 16
+            },
+            checkpointStyle: {
+              show: true,
+              color: '#ff9232', 
+              symbolSize: 0,
+              borderColor: '#ff923282',
+              borderWidth: 5,
+            },
+            controlStyle: {
+              show: false,
+            }
+          },
+          calculable: true,
+          grid: {
+            top: '20%',
+            bottom: '10%'
+          },
+          xAxis: [{
+            type: 'category',
+            name: '日',
+            nameTextStyle: {
+                fontSize: 24
+            },
+            axisLabel: {
+              margin: 10,
+              interval: 0,
+              fontSize: 16,
+              color: '#E2E5FF'
+            },
+            data: this.dataMap,
+            splitLine: { 
+              show: false 
+            },
+            axisTick: {
+              show: true
+            }, 
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#E2E5FF',
+              }
+            },
+          }],
+          yAxis: [{
+            type: 'value',
+            name: '双',
+            nameTextStyle: {
+                fontSize: 30
+            },
+            axisLabel: {
+              margin: 20,
+              interval: 0,
+              fontSize: 24,
+              color: '#E2E5FF'
+            },
+            splitLine: {
+              show: false
+            },
+            axisTick: {
+              show: true
+            }, 
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#E2E5FF'
+              }
+            }
+          }],
+          series: [{
+            type: 'bar',
+            barWidth: 20,
+            legendHoverLink: true,
+            label: {
+              show: true,
+              position: 'top',
+              color: '#fff',
+              fontSize: 16
+            },
+          }]
+        },
+        options: [{
+          series: [{
+            data: this.workData,
+            itemStyle: itemStyle
+          }]
+        }]
+      }
+
+      // let _this = this;
+      // myWorkChart.on('timelinechanged', function (params) {
+      //   _this.name = _this.timelineData[params.currentIndex];
+      // })
+
+      myWorkChart.setOption(this.option, true);
+
+      window.addEventListener('resize', () => {
+        myWorkChart.resize();
+      });
+
+      this.timer = setInterval(() => {
+          this.getData();
+      }, 1800000)
+    },
+    getEchart() {
+      let myChart = echarts.init(document.getElementById('chart_ptrend'));
+      let itemStyle = {
+        barBorderRadius: [15, 0],
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+          offset: 0,
+          color: '#ff4343',
+          // color: '#7bff80',
+          // color: '#ff95e7'
+        },{
+          offset: 1,
+          color: '#ff7b7bad'
+          // color: '#7bff80a6',
+          // color: '#ff95e7bd'
+        }])
+      }
+
+      this.option = {
+        baseOption: {
+          timeline: {
+            axisType: 'category',
+            autoPlay: false,
+            playInterval: 60000,
+            // data: ['第一周', '第二周', '第三周', '第四周'],
+            left: 80,
+            right: 80,
+            bottom: 10,
+            lineStyle: {
+              show:false,
+              color: '#179bf1'
+            },
+            label: {
+              show: true,
+              color: '#fff',
+              fontSize: '24'
+            },
+            checkpointStyle: {
+              color: '#ff9232', 
+              symbolSize: 10,
+              borderColor: '#ff923282',
+              borderWidth: 5,
+            },
+            controlStyle: {
+              show: false,
+            }, 
+            itemStyle: {
+              borderColor: '#004b85',
+              borderWidth: 2,
+              shadowColor: 'rgba(1, 216, 225, 0.5)',
+              shadowBlur: 20
+            }
+          },
+          calculable: true,
+          grid: {
+            top: '20%',
+            bottom: '10%'
+          },
+          xAxis: [{
+            type: 'category',
+            name: '日',
+            nameTextStyle: {
+                fontSize: 24
+            },
+            axisLabel: {
+              margin: 18,
+              interval: 0,
+              fontSize: 16,
+              color: '#E2E5FF'
+            },
+            data: this.dataMap,
+            splitLine: { 
+              show: false 
+            },
+            axisTick: {
+              show: true
+            }, 
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#E2E5FF',
+              }
+            },
+          }],
+          yAxis: [{
+            type: 'value',
+            name: '人',
+            minInterval: 1,
+            nameTextStyle: {
+                fontSize: 30
+            },
+            axisLabel: {
+              margin: 20,
+              interval: 0,
+              fontSize: 24,
+              color: '#E2E5FF'
+            },
+            splitLine: {
+              show: false
+            },
+            axisTick: {
+              show: true
+            }, 
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#E2E5FF'
+              }
+            }
+          }],
+          series: [{
+            type: 'bar',
+            barWidth: 20,
+            legendHoverLink: true,
+            label: {
+              show: true,
+              position: 'top',
+              color: '#fff',
+              fontSize: 20
+            },
+          }]
+        },
+        options: [{
+          series: [{
+            data: this.data,
+            itemStyle: itemStyle
+          }]
+        }]
+      }
+
+      myChart.setOption(this.option, true);
+
+      window.addEventListener('resize', () => {
+        myChart.resize();
+      });
+    }
+  },
+  beforeDestroy() {
+    clearInterval(this.timer);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+
+.sn-container {
+  left: 3%;
+  top: 4%;
+  width: 94%;
+  height: 44%;
+  .chartsdom {
+    width: 100%;
+    height: 90%;
+    position: absolute;
+    bottom: 4%;
+  }
+
+  .sn-title {
+    position: absolute;
+    height: 50px;
+    font-size: 40px;
+    color: #7becff;
+    line-height: 50px;
+    padding: 0 0 0 30px;
+    left: 26px;
+    right: 10px;
+    top: 16px;
+  }
+}
+.sn-container-bottom {
+  left: 3%;
+  top: 52%;
+  width: 94%;
+  height: 44%;
+  .chartsdom {
+    width: 100%;
+    height: 90%;
+  }
+}
+.home-container {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  .wrap {
+    transform-origin: 0px 0px 0px;
+    background: url(../assets/img/bj.jpg) no-repeat;
+    // background: url(../assets/img/brand/bg.jpg) no-repeat;
+    background-size: contain;
+    background-position: 50% 0;
+    background-color: rgb(0, 0, 0);
+    min-width: auto;
+    width: 1920px;
+    min-height: auto;
+    height: 1080px;
+    overflow: hidden;
+    .top {
+      position: absolute;
+      left: 0; 
+      top: 0; 
+      width: 100%; 
+      height: 80px; 
+      background-color: transparent; 
+      background: url(../assets/img/top_nav.png) no-repeat; 
+      background-position: 65% 0;
+      border: none; 
+      overflow: hidden;
+
+      h1 {
+        font-size: 36px;
+        color: rgb(216, 255, 255);
+        text-align: center;
+        line-height: 70px;
+        -webkit-text-stroke: 2px #193d8f;
+      }
+    }
+
+    header {
+      position: relative;
+      height: 80px;
+      background: url(../assets/img/brand/head_bg2.png) no-repeat top center;
+      // background: url(../assets/img/top_nav.png) no-repeat top center;
+      background-size: 100% 100%;
+      h2 {
+        color: #ffffff;
+        font-size: 34px;
+        text-align: center;
+        line-height: 80px;
+        letter-spacing: 4px;
+        -webkit-text-stroke: 2px #193d8f;
+      }
+      .weather {
+        position: absolute;
+        left: 10px;
+        top: 10px;
+        font-size: 14px;
+        color: rgba(126, 240, 255, .7);
+        img {
+          width: 20px;
+        }
+        span {
+          display: inline-block;
+        }
+        .tem {
+          margin: 0 10px 0 .2rem;
+        }
+      }
+      .showTime {
+        position: absolute;
+        right: 50px;
+        top: 40px;
+        color: rgba(145, 233, 255, 0.801);
+        display: flex;
+        .time {
+          font-size: 26px;
+          margin-right: 30px;
+        }
+        .date {
+          span {
+            &:nth-child(1) {
+              font-size: 18px;
+              margin-right: 14px;
+            }
+            &:nth-child(2) {
+              font-size: 20px;
+            }
+          }
+        }
+      }
+    }
+
+    .divider {
+      position: absolute;
+      left: 50px;
+      top: 3253px;
+      width: 90%;
+      height: 50px;
+      width: 300px;
+      border: none;
+      background: transparent;
+    }
+
+  }
+}	
+  </style>
+  

+ 18 - 18
src/views/Home.vue

@@ -20,42 +20,42 @@
       </header>
       
       <!-- 每日组别产量 -->
-      <sinan />
+      <!-- <sinan /> -->
       <!-- 今日总产量 -->
-      <gauge />
+      <!-- <gauge /> -->
       <!-- 成品库存 -->
       <!-- <seamless /> -->
-      <circleRunway />
+      <!-- <circleRunway /> -->
       <!-- 合格率 -->
-      <scrollArc />
+      <!-- <scrollArc /> -->
       <!-- 本月产量 -->
-      <pyramidTrend />
+      <!-- <pyramidTrend /> -->
 
 
-      <!-- <pyramid /> -->
-      <!-- <szBar /> -->
+      <pyramid />
+      <szBar />
 
-      <!-- <ringPin />
+      <ringPin />
       <rotateColorful />
       <circleRunway />
-      <scanRadius /> -->
+      <scanRadius />
 
-      <!-- <cakeLinkage /> -->
-      <!-- <dynamicLine /> -->
+      <cakeLinkage />
+      <dynamicLine />
 
-      <!-- <staffMix />
+      <staffMix />
       <flashCloud />
       <ringPie />
-      <colorfulRadar /> -->
+      <colorfulRadar />
 
-      <!-- <dynamicList />
+      <dynamicList />
       <bar3d />
-      <colorfulArea /> -->
+      <colorfulArea />
 
-      <!-- <rainbow />
+      <rainbow />
       <gauge />
       <waterPolo />
-      <circleNesting /> -->
+      <circleNesting />
 
       <div class="divider"></div>
 
@@ -135,7 +135,7 @@ export default {
     width: 1920px;
     min-height: auto;
     height: 1080px;
-    overflow: hidden;
+    overflow: auto;
     .top {
       position: absolute;
       left: 0; 

+ 40 - 100
src/views/MonthTotal.vue

@@ -9,19 +9,17 @@
   	<div class="wrap" ref="editor">
       <div class="wrap-container sn-container"> 
           <div class="sn-content"> 
-              <div class="sn-title">{{ time }}(截止至{{ date }})<span style="color:#ff9829">成型B线 </span></div> 
+              <div class="sn-title">{{ time }}(截止至{{ date }})<span style="color:#ff9829">{{ name }} </span></div> 
               <div class="sn-body"> 
               <div class="wrap-container">
                   <div class="map">
                     <span class="text">
                       <div class="title">累计总产量</div>
-                      <!-- <div class="title">截止至{{ time }}{{ date - 1 }}日</div> -->
-                      <countTo :startVal='0' :endVal='data' :duration='5000' separator=""></countTo>
+                      <countTo :startVal='0' :endVal='data' :duration='1000' separator=""></countTo>
                     </span>
                     <div class="map1"></div>
                     <div class="map2"></div>
                     <div class="map3"></div>
-                    <!-- <div class="title" style="color:#ff8400">成型B线</div> -->
                   </div>
                 </div> 
               </div> 
@@ -47,9 +45,13 @@ export default {
   	return {
   		option: null,
       timer: null,
+      timers: null,
       data: 0,
+      allData: {},
       time: '',
-      date: ''
+      name: '',
+      date: '',
+      timelineData: []
   	}
   },
   computed: {
@@ -57,12 +59,14 @@ export default {
   },
   created() {
   },
-  mounted() {
-    this.getData();
+  async mounted() {
+    this.timeFormate(new Date());
 
-    screenSize(this.$refs.editor);
+    await this.getData();
 
-    this.timeFormate(new Date());
+    this.loadData();
+
+    screenSize(this.$refs.editor);
   },
   methods: {
     timeFormate(timeStamp) { //显示当前时间
@@ -79,105 +83,41 @@ export default {
     /** 获取列表数据 */
     async getData() {
       let list = [];
+      let index = 0;
       await getMonthTotal().then(res => {
-        if (res.data) {
+        if (res.data && res.data !== 0) {
+          // Object.keys(res.data).forEach((key) => {
+          //   this.allData = res.data;
+          //   this.timelineData.push(key);
+          // })
+          // this.name = this.timelineData[0];
+          // this.data = this.allData[this.name]
           this.data = res.data
         }
       }).catch();
 
-      this.getEchart();
-    },
-    getEchart() {
-      let myChart = echarts.init(document.getElementById('chart_gauge'));
-      this.option = {
-        tooltip: {
-          formatter: '{a} <br/>{c} {b}'
-        },
-         series: [{
-            name: '速度',
-            type: 'gauge',
-            min: 0,
-            max: 0,
-            splitNumber: 0,
-            // radius: '50%',
-            axisLine: {            // 坐标轴线
-              lineStyle: {       // 属性lineStyle控制线条样式
-                color: [[1, '#1e90ff']],
-                width: 3,
-                shadowColor: '#fff', //默认透明
-                shadowBlur: 10
-              }
-            },
-            axisLabel: {            // 坐标轴小标记
-              fontWeight: 'none',
-              color: '#fff',
-              shadowColor: '#fff', //默认透明
-              shadowBlur: 10
-            },
-            axisTick: {            // 坐标轴小标记
-                length: 0,        // 属性length控制线长
-                lineStyle: {       // 属性lineStyle控制线条样式
-                  color: 'auto',
-                  shadowColor: '#fff', //默认透明
-                  shadowBlur: 10
-                }
-            },
-            splitLine: {           // 分隔线
-              length: 25,         // 属性length控制线长
-              lineStyle: {       // 属性lineStyle(详见lineStyle)控制线条样式
-                width: 3,
-                color: '#fff',
-                shadowColor: '#fff', //默认透明
-                shadowBlur: 10
-              }
-            },
-            pointer: {           // 分隔线
-              shadowColor: '#fff', //默认透明
-              shadowBlur: 5
-            },
-            title: {
-              textStyle: {       // 其余属性默认使用全局文本样式,详见TEXTSTYLE
-                fontWeight: 'bolder',
-                fontSize: 30,
-                fontStyle: '',
-                color: '#fff',
-                shadowColor: '#ffffff50', //默认透明
-                shadowBlur: 20
-              }
-            },
-            detail: {
-              // backgroundColor: 'rgba(30,144,255,0.8)',
-              // borderWidth: 1,
-              // borderColor: '#fff',
-              // shadowColor: '#fff', //默认透明
-              // shadowBlur: 5,
-              offsetCenter: [0, '80%'],       // x, y,单位px
-              textStyle: {       // 其余属性默认使用全局文本样式,详见TEXTSTYLE
-                fontWeight: 'bolder',
-                fontSize: 80,
-                color: '#fff'
-              }
-            },
-            data: [{
-              value: this.data, 
-              name: '今日总产量'
-            }]
-        }]
-      }
+      // let _this = this;
+      // this.timer = setInterval(function() {
+      //   index++;
+      //   if (index === _this.timelineData.length) {
+      //     index = 0;
+      //   }
 
-
-      myChart.setOption(this.option, true);
-
-      window.addEventListener('resize', () => {
-        myChart.resize();
-      });
-
-      // this.timer = setInterval(() => {
-      //   this.option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
-      //   myChart.setOption(this.option, true);
-      // },2000);
+      //   _this.name = _this.timelineData[index];
+      //   _this.data = _this.allData[_this.name] 
+      // }, 60000)
+    },
+    loadData() {
+      let _this = this;
+      this.timers = setInterval(function() {
+        _this.getData();
+      }, 1800000)
     }
   },
+  beforeDestroy() {
+    clearInterval(this.timer);
+    clearInterval(this.timers);
+  }
 }
 </script>
 <style lang="scss" scoped>

+ 154 - 150
src/views/PassRate.vue

@@ -9,7 +9,7 @@
         <div class="wrap" ref="editor">
             <div class="wrap-container sn-container"> 
                 <div class="sn-content"> 
-                    <div class="sn-title">{{ time }} <span style="color:#ff9829">成型B线</span> 每日产品合格率</div> 
+                    <div class="sn-title">{{ time }} <span style="color:#ff9829">{{ name }}</span> 每日产品合格率</div> 
                     <div class="sn-body"> 
                     <div class="wrap-container"> 
                         <div class="chartsdom" id="chart_arc"></div>
@@ -25,191 +25,195 @@
 <script>
 import { screenSize } from '@/assets/js/utils';
 import { getPassRate } from "@/api/index";
-import { timeFormate } from "@/utils/timeFormate";
+import { timeFormateWeek } from "@/utils/timeFormate";
 
 export default {
 name: "scrollArc",
 data() {
     return {
+        name: '',
         option: null,
         number: 0, // 播放所在下标
         timer: null,
         xData: ['星期一','星期二','星期三','星期四','星期五','星期六','星期日'],
-        data: [],
-        time: ''
+        data: [1,1,1,1,1,1],
+        allData: [],
+        time: '',
+        timelineData: []
     }
 },
-mounted() {
-    this.getData();
+watch: {
+    name(newVal, oldVal){
+      if (newVal && newVal !== oldVal) {
+        this.loadData(newVal);
+        this.$nextTick(() => {
+          this.getEchart();
+        })
+      }
+    }
+},
+async mounted() {
+    await this.getData();
 
     screenSize(this.$refs.editor);
 
-    this.time = timeFormate(new Date());
+    this.time = timeFormateWeek(new Date());
 },
 methods: {
     /** 获取列表数据 */
     async getData() {
-      let list = [];
-      await getPassRate().then(res => {
-        if (res.data) {
-            this.xData.forEach((item) => {
+        this.timelineData = [];
+        await getPassRate().then(res => {
+            if (res.data) {
                 Object.keys(res.data).forEach((key) => {
+                    this.allData = res.data;
+                    // this.timelineData.push(key)
+                })
+                // this.name = this.timelineData[0];
+                this.name = '智能线';
+            }
+        }).catch();
+    },
+    /** 数据加载处理 */
+    loadData(val) {
+        console.log(this.allData)
+        let list = [];
+        this.xData.forEach((item) => {
+            Object.keys(this.allData).forEach((key) => {
                 if (item === key) {
-                    list.push(Number(res.data[key]['合格率']?.split('%')[0]))
+                    console.log(key)
+                    list.push(this.allData[key]['产量'] !== 0 ? Number(this.allData[key]['合格率']?.split('%')[0]) : null)
                 }
-                })
             })
+        })
 
-          this.data = list;
-          this.getEchart(res.data);
-        }
-      }).catch();
+        this.data = list;
     },
-    getEchart(arr) {
-    let myChart = echarts.init(document.getElementById('chart_arc'));
-    this.option = {
-        tooltip: {
-            trigger: 'axis',
-            showContent: false,
-            // axisPointer: {
-            //     type: 'shadow',
-            //     shadowStyle: {
-            //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-            //         offset: 1,
-            //         color: '#ffeb7b'
-            //     },{
-            //         offset: 0,
-            //         color: 'rgba(255, 255, 255, 0)'
-            //     }])
-            //     }
-            // },
-            textStyle: {
-                fontSize: 26,
-                padding: 30,
+    getEchart() {
+        let myChart = echarts.init(document.getElementById('chart_arc'));
+        this.option = {
+            // color: ['#5d83ff'],
+            timeline: {
+            axisType: 'category',
+            autoPlay: false,
+            playInterval: 60000,
+            data: this.timelineData,
+            left: 180,
+            right: 180,
+            bottom: -100,
+            lineStyle: {
+              show: true,
+              color: '#179bf1'
             },
-            formatter: function (params) {
-                return '<b style="color:#222">' + params[0].name + '</b><br>' + '合格数量:<b style="color:#1d8aff">' + arr[params[0].name]?.['合格数量'] + ' (双)</b><br>' + '不合格数量:<b style="color:red">' + arr[params[0].name]?.['不合格数量'] + ' (双)</b><br>' + params[0].seriesName + ':<b style="color:#ff8400">' + params[0].value + '%</b>';
-            }
-        },
-        // color: ['#5d83ff'],
-        color: ['#ffeb7b'],
-        grid: {
-        top: 160,
-        left: 100,
-        right: 100,
-        bottom: 40,
-        containLabel: true //轴上的数值
-        },
-        xAxis: {
-            type: 'category',
-            data: this.xData,
-            boundaryGap: true,
-            axisTick: {
-                show: false
-            }, 
-            axisLabel: {
-                margin: 40,
-                fontSize: 36,
-                formatter: '{value}'
+            label: {
+              show: true,
+              color: '#fff',
+              fontSize: 16
             },
-            axisLine: {
-                show: false,
-                lineStyle: {
-                    color: '#E2E5FF',
-                }
+            checkpointStyle: {
+              show: true,
+              color: '#ff9232', 
+              symbolSize: 0,
+              borderColor: '#ff923282',
+              borderWidth: 5,
             },
-        },
-        yAxis: {
-            type: 'value',
-            max: 100,
-            min: 60,
-            axisLabel: {
-                margin: 40,
-                fontSize: 36,
-                formatter: '{value} %'
+            controlStyle: {
+              show: false,
+            }
+          },
+            color: ['#ffeb7b'],
+            grid: {
+            top: 160,
+            left: 100,
+            right: 100,
+            bottom: 40,
+            containLabel: true //轴上的数值
             },
-            axisTick: {
-                show: true
-            }, 
-            axisLine: {
-                show: false,
-                lineStyle: {
-                    color: '#E2E5FF'
-                }
+            xAxis: {
+                type: 'category',
+                data: this.xData,
+                boundaryGap: true,
+                axisTick: {
+                    show: false
+                }, 
+                axisLabel: {
+                    margin: 40,
+                    fontSize: 36,
+                    formatter: '{value}'
+                },
+                axisLine: {
+                    show: false,
+                    lineStyle: {
+                        color: '#E2E5FF',
+                    }
+                },
             },
-        },
-        series: [{
-            name: '合格率',
-            type: 'line',
-            data: this.data,
-            symbolSize: 16,
-            lineStyle: {
-                width: 8
+            yAxis: {
+                type: 'value',
+                max: 100,
+                min: 60,
+                axisLabel: {
+                    margin: 40,
+                    fontSize: 36,
+                    formatter: '{value} %'
+                },
+                axisTick: {
+                    show: true
+                }, 
+                axisLine: {
+                    show: false,
+                    lineStyle: {
+                        color: '#E2E5FF'
+                    }
+                },
             },
-            itemStyle: {
-                normal: {
-                    label: {
-                        show: true,
-                        color: '#fff',
-                        fontSize: 30,
-                        position: 'top',
-                        formatter: function (params) {
-                            return params.value + '%'
+            series: [{
+                name: '合格率',
+                type: 'line',
+                data: this.data,
+                symbolSize: 16,
+                lineStyle: {
+                    width: 8
+                },
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            color: '#fff',
+                            fontSize: 30,
+                            position: 'top',
+                            formatter: function (params) {
+                                return params.value + '%'
+                            }
                         }
                     }
-                }
+                },
+            emphasis: {
+                itemStyle: {
+                    color: '#5d83ff',
+                    borderColor: '#fff',
+                    borderWidth: 2,
+                    opacity: 1
+                },
             },
-            // label: {
-            //     show: true,
-            //     color: '#fff',
-            //     fontSize: 30,
-            //     position: 'top',
-            //     formatter: '{ value }'
-            // },
-        emphasis: {
-            itemStyle: {
-                color: '#5d83ff',
-                borderColor: '#fff',
-                borderWidth: 2,
-                opacity: 1
-            },
-        },
-        // areaStyle: {
-        //     normal: {
-        //     label: {
-        //         color: '#fff'
-        //     },
-        //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-        //         offset: 0,
-        //         color: '#ffeb7b'
-        //     },{
-        //         offset: 1,
-        //         color: 'rgba(0, 0, 0, 0)'
-        //     }]),
-        //     }
-        // },
-        smooth: true,
-        }]
-    };
-    myChart.setOption(this.option, true);
+            smooth: true,
+            }]
+        };
+        // let _this = this;
+        // myChart.on('timelinechanged', function (params) {
+        //     _this.name = _this.timelineData[params.currentIndex];
+        // })
+
+        myChart.setOption(this.option, true);
 
-    window.addEventListener('resize', () => {
-        myChart.resize();
-    });
+        window.addEventListener('resize', () => {
+            myChart.resize();
+        });
 
-    // this.timer = setInterval(() => {
-    //     myChart.dispatchAction({
-    //     type: 'showTip',
-    //     seriesIndex: 0,
-    //     dataIndex: this.number
-    //     });
+        this.timer = setInterval(() => {
+            this.getData();
+        }, 1800000)
 
-    //     this.number++;
-        
-    //     if (this.number > this.data.length) {
-    //     this.number = 0;
-    //     }
-    // }, 2000);
     }
 },
 beforeDestroy() {

+ 45 - 19
src/views/Product.vue

@@ -7,19 +7,24 @@
 <template>
   <div class="home-container">
   	<div class="wrap" ref="editor">
-      <!-- <div class="top"></div> -->
-      <header>
-        <h2>智能产线数据可视化平台</h2>
-        <div class="showTime">
-          <span class="time">{{ nowTime }}</span>
-          <span class="date">
-            <span>{{ week }}</span>
-            <span>{{ date }}</span>
-          </span>
-        </div>
-      </header>
-      
-      <colorfulArea />
+      <div class="sn-content">
+        <!-- <div class="top"></div> -->
+        <header>
+          <div class="sn-title">{{ date }} <span style="color:#ff9829">智能冲裁</span> 工作情况</div>
+          <!-- <h2>智能产线数据可视化平台</h2> -->
+          <!-- <div class="showTime">
+            <span class="time">{{ nowTime }}</span>
+            <span class="date">
+              <span>{{ week }}</span>
+              <span>{{ date }}</span>
+            </span>
+          </div> -->
+        </header>
+        
+        
+        <colorfulArea />
+
+      </div>
 
 
       <div class="divider"></div>
@@ -67,7 +72,7 @@ export default {
       let weeks = ['日', '一', '二', '三', '四', '五', '六'];
       let getWeek = '星期' + weeks[week];
       this.week = getWeek;
-      this.date = year + '.' + month + '.' + date;
+      this.date = year + '年' + month + '月' + date + '日';
       this.nowTime = hh + ':' + mm + ':' + ss;
     },
     nowTimes() {
@@ -101,6 +106,27 @@ export default {
     min-height: auto;
     height: 1080px;
     overflow: hidden;
+
+    .sn-title {
+      position: absolute;
+      height: 50px;
+      font-size: 50px;
+      color: #7becff;
+      line-height: 50px;
+      padding: 0 0 0 30px;
+      left: 70px;
+      top: 30px;
+      &:before {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: 50%;
+        margin-top: -7px;
+        width: 40px;
+        height: 40px;
+        background: url(../assets/img/sn-title.png) no-repeat 0% 0%;
+      }
+    }
     .top {
       position: absolute;
       left: 0; 
@@ -122,10 +148,10 @@ export default {
     }
 
     header {
-      position: relative;
-      height: 80px;
-      background: url(../assets/img/brand/head_bg.png) no-repeat top center;
-      background-size: 100% 100%;
+      // position: relative;
+      // height: 80px;
+      // background: url(../assets/img/brand/head_bg.png) no-repeat top center;
+      // background-size: 100% 100%;
       h2 {
         color: #a2e5ff;
         font-size: 30px;
@@ -151,7 +177,7 @@ export default {
       }
       .showTime {
         position: absolute;
-        right: 30px;
+        right: 70px;
         top: 30px;
         color: rgba(145, 233, 255, 0.801);
         display: flex;

+ 2 - 2
src/views/WeekQty.vue

@@ -66,7 +66,7 @@
 import countTo from 'vue-count-to'
 import { getWeekQty } from "@/api/index";
 import { screenSize } from '@/assets/js/utils'
-import { timeFormate } from "@/utils/timeFormate";
+import { timeFormateWeek } from "@/utils/timeFormate";
 
 export default {
   name: 'WeekQty',
@@ -109,7 +109,7 @@ export default {
 
     screenSize(this.$refs.editor);
 
-    this.time = timeFormate(new Date());
+    this.time = timeFormateWeek(new Date());
   },
   methods: {
     /** 获取列表数据 */

Bu fark içinde çok fazla dosya değişikliği olduğu için bazı dosyalar gösterilmiyor