Home Explore Help
Register Sign In
caianni
/
zncx-ui
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

1

userName 1 week ago
parent
3b08ad4127
commit
fca2e7657c
13 changed files with 923 additions and 340 deletions
Split View Show Diff Stats
  1. 3 3
      public/index.html
  2. 34 0
      public/static/echarts.min.js
  3. 11 1
      src/api/index.js
  4. 2 2
      src/components/colorfulArea/index.vue
  5. 13 5
      src/router/index.js
  6. 24 0
      src/utils/timeFormate.js
  7. 49 40
      src/views/DailyOutput.vue
  8. 528 0
      src/views/DailyPerOutput.vue
  9. 18 18
      src/views/Home.vue
  10. 40 100
      src/views/MonthTotal.vue
  11. 154 150
      src/views/PassRate.vue
  12. 45 19
      src/views/Product.vue
  13. 2 2
      src/views/WeekQty.vue

+ 3 - 3
public/index.html
View File 

@@ -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>

File diff suppressed because it is too large
+ 34 - 0
public/static/echarts.min.js


+ 11 - 1
src/api/index.js
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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: {
 
     /** 获取列表数据 */

Some files were not shown because too many files changed in this diff