优化

package.json

@@ -11,10 +11,12 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "add": "^2.0.6",
     "axios": "^0.18.0",
     "babel-plugin-component": "^1.1.1",
     "babel-polyfill": "^6.26.0",
     "babel-preset-es2015": "^6.24.1",
+    "default-passive-events": "^2.0.0",
     "echarts": "^5.1.1",
     "element-ui": "^2.15.14",
     "stylus": "^0.54.5",
@@ -23,7 +25,8 @@
     "vue-particles": "^1.0.9",
     "vue-router": "^3.0.1",
     "vue-seamless-scroll": "^1.1.16",
-    "vuex": "^3.0.1"
+    "vuex": "^3.0.1",
+    "yarn": "^1.22.21"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",

src/config/mork2.js

@@ -172,8 +172,14 @@ export const homepageDataLeft = () => {
         // 计划生产
         'plan': 0.0
       },
+      todayTotalPlan: '80',
+      materialCountSize: '2',
+      sortCompleted: '11',
+      sortCompletedQty: '900',
+      sortMaterialCountSize: '1',
+      fulfillmentRate: '25'
       // 信息
-      'message': '今日共需生产<span>8400</span>块，物料种类2种，已完成包装11托，共900块，1个物料，完成率25%。'
+      // 'message': '今日共需生产<span>8400</span>块，物料种类2种，已完成包装11托，共900块，1个物料，完成率25%。'
     },
     // 历史分析 固定7个元素
     'history': [
@@ -220,49 +226,49 @@ export const homepageDataLeft = () => {
     'inventory': [
       {
         // 物料编码
-        'materialCode': 'GBMCZ3027L323217GM003ZX22-30',
+        'materialCode': 'GBMCZ3027L323217GM003ZX22-31',
         'materialName': '物料一',
         // 数量
         'qty': 1
       },
       {
         // 物料编码
-        'materialCode': 'GBMCZ3027L323217GM003ZX22-30',
+        'materialCode': 'GBMCZ3027L323217GM003ZX22-32',
         'materialName': '物料二',
         // 数量
         'qty': 2
       },
       {
         // 物料编码
-        'materialCode': 'GBMCZ3027L323217GM003ZX22-30',
+        'materialCode': 'GBMCZ3027L323217GM003ZX22-3',
         'materialName': '物料三',
         // 数量
         'qty': 3
       },
       {
         // 物料编码
-        'materialCode': 'GBMCZ3027L323217GM003ZX22-30',
+        'materialCode': 'GBMCZ3027L323217GM003ZX22-4',
         'materialName': '物料四',
         // 数量
         'qty': 4
       },
       {
         // 物料编码
-        'materialCode': 'GBMCZ3027L323217GM003ZX22-30',
+        'materialCode': 'GBMCZ3027L323217GM003ZX22-5',
         'materialName': '物料五',
         // 数量
         'qty': 5
       },
       {
         // 物料编码
-        'materialCode': 'GBMCZ3027L323217GM003ZX22-30',
+        'materialCode': 'GBMCZ3027L323217GM003ZX22-6',
         'materialName': '物料6',
         // 数量
         'qty': 6
       },
       {
         // 物料编码
-        'materialCode': 'GBMCZ3027L323217GM003ZX22-30',
+        'materialCode': 'GBMCZ3027L323217GM003ZX22-7',
         'materialName': '物料7',
         // 数量
         'qty': 7

src/main.js

@@ -6,12 +6,15 @@ import store from './vuex/store'
 import './style/reset.css'
 import './style/layout.styl'
 import * as echarts from 'echarts'
+import 'default-passive-events'
 import VueParticles from 'vue-particles'
 import scroll from 'vue-seamless-scroll'
+import {Message} from 'element-ui'
 
 Vue.prototype.$echarts = echarts
 Vue.use(VueParticles)
 Vue.use(scroll)
+Vue.prototype.$message = Message
 Vue.config.productionTip = false
 /* eslint-disable no-new */
 new Vue({

src/pages/Setup.vue

@@ -81,7 +81,10 @@ export default {
     },
     _config () {
       if (this.setTime > 10800) {
-        this.toast('刷新时间设置过长')
+        this.$message({
+          message: '刷新时间设置过长',
+          type: 'warning'
+        })
         return
       }
       let obj = {

src/pages/modules/home/left/left.vue

@@ -42,7 +42,7 @@
                   </div>
                 </div>
                 <div class="module_three_wraper">
-                  <div class="module_three_text" v-html="messageString"></div>
+                  <div class="module_three_text">今日共需生产<span>{{todayTotalPlan}}</span>块，物料种类<span>{{ materialCountSize }}</span>种，已完成包装<span>{{ sortCompleted }}</span>托，共<span>{{ sortCompletedQty }}</span>块，<span>{{ sortMaterialCountSize }}</span>个物料，完成率<span>{{fulfillmentRate}}%</span>。</div>
                 </div>
             </div>
         </div>
@@ -73,13 +73,13 @@
                 <div class="title_wraper">
                     <p>库存量监控</p>
                 </div>
-                <div class="content_wraper relative">
+                <div class="content_wraper content_wraper_1">
                   <div class="pie_wraper_2">
                     <div class="echart_wraper">
                       <div id="new_home_echart_4" style="width: 100%; height: 100%;"></div>
                     </div>
                   </div>
-                  <div class="pie_legend">
+                  <!-- <div class="pie_legend">
                     <div class="pie_legend_item" v-for="(e, i) in inventory" :key="i" :class="'pie_legend_item_bg_' + (i + 1)">
                       <p class="pie_legend_txt_1">{{ e.materialCode }}</p>
                       <div class="pie_legend_txt_wraper">
@@ -87,7 +87,7 @@
                         <p class="pie_legend_txt_3">{{ e.rate }}</p>
                       </div>
                     </div>
-                  </div>
+                  </div> -->
                 </div>
             </div>
             <div class="l_item_wraper">
@@ -105,8 +105,8 @@
 </template>
 
 <script>
-import { homepageDataLeft } from '@js/mork2.js'
+// import { homepageDataLeft } from '@js/mork2.js'
-// import { homepageDataLeft } from '@js/getData2.js'
+import { homepageDataLeft } from '@js/getData2.js'
 import symbol1 from '@img/symbol_1.png'
 import symbol2 from '@img/symbol_2.png'
 import symbol3 from '@img/symbol_3.png'
@@ -121,7 +121,12 @@ export default {
       todayPressProduction: {}, // 今日生产成型
       todaySortProduction: {}, // 今日生产包装
       orderFulfillmentRate: {}, // 订单完成
-      message: '',
+      todayTotalPlan: '',
+      materialCountSize: '',
+      sortCompleted: '',
+      sortCompletedQty: '',
+      sortMaterialCountSize: '',
+      fulfillmentRate: '',
       todayMix: [], // 当日混料
       todaySort: [], // 当日成品
       inventory: [], // 库存量监控
@@ -132,12 +137,6 @@ export default {
       chart5Timer: null
     }
   },
-  computed: {
-    messageString () {
-      const t = this.message
-      return t
-    }
-  },
   created () {
     this._homepageDataLeft()
     this.refresh()
@@ -164,7 +163,12 @@ export default {
       this.todayMixProduction = res.todayProduction.todayMixProduction
       this.todayPressProduction = res.todayProduction.todayPressProduction
       this.todaySortProduction = res.todayProduction.todaySortProduction
-      this.message = res.todayProduction.message
+      this.todayTotalPlan = res.todayProduction.todayTotalPlan
+      this.materialCountSize = res.todayProduction.materialCountSize
+      this.sortCompleted = res.todayProduction.sortCompleted
+      this.sortCompletedQty = res.todayProduction.sortCompletedQty
+      this.sortMaterialCountSize = res.todayProduction.sortMaterialCountSize
+      this.fulfillmentRate = res.todayProduction.fulfillmentRate
       this.orderFulfillmentRate = Number(res.todayProduction.orderFulfillmentRate.real) / Number(res.todayProduction.orderFulfillmentRate.plan) * 100
       this.orderFulfillmentRate = this.orderFulfillmentRate.toFixed(0)
       this.todayMix = [...res.todayMix]
@@ -255,8 +259,7 @@ export default {
         }, {
           type: 'pie',
           radius: ['99%', '100%'],
-          hoverAnimation: false,
+          clockwise: false,
-          clockWise: false,
           itemStyle: {
             color: '#45B1F1'
           },
@@ -267,8 +270,7 @@ export default {
         }, {
           type: 'pie',
           radius: ['75%', '76%'],
-          hoverAnimation: false,
+          clockwise: false,
-          clockWise: false,
           itemStyle: {
             color: '#45B1F1'
           },
@@ -635,22 +637,18 @@ export default {
       })
     },
     setEchart4 () {
-      this.inventory.map((el, i) => {
+      let colors = ['#1980EA', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252', '#6d5edd', '#bf41bb']
-        el.value = el.qty
+      let seriesData = []
-        el.name = el.materialName
+      let seriesName = []
-        // if (i === 1) {
+      this.inventory.map((e, i) => {
-        //   el.selected = true
+        seriesData.push({name: e.materialCode, value: e.qty})
-        // }
+        seriesName.push({name: e.materialCode})
       })
       let total = this.inventory.reduce((a, b) => {
         return a + Number(b.value)
       }, 0)
-      let seriesData = []
-      this.inventory.forEach(r => {
-        seriesData.push(r)
-      })
       let option = {
-        color: ['#1980EA', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252', '#6d5edd', '#bf41bb'],
+        color: colors,
         grid: {
           top: 0,
           left: 0,
@@ -659,31 +657,95 @@ export default {
           containLabel: true
         },
         title: {
-          text: `{a|总数}\n{b|${total}}`,
+          x: '23.5%',
-          x: 'center',
           y: '39%',
+          width: '200',
+          height: '70',
+          text: '总数',
+          subtext: total,
+          textAlign: 'center',
           textStyle: {
-            rich: {
+            fontSize: 16,
-              a: {
+            lineHeight: 20,
-                fontSize: 16,
+            color: '#A8C3E6',
-                lineHeight: 20,
+            fontFamily: 'SourceHanSansCN-Regular'
-                color: '#A8C3E6',
+          },
-                fontFamily: 'SourceHanSansCN-Regular'
+          subtextStyle: {
-              },
+            fontSize: 30,
-              b: {
+            lineHeight: 36,
-                fontSize: 30,
+            color: '#DBE7F6',
-                lineHeight: 36,
+            fontFamily: 'YouSheBiaoTiHei'
-                color: '#DBE7F6',
+          }
-                fontFamily: 'YouSheBiaoTiHei'
+        },
+        legend: {
+          show: true,
+          type: 'scroll',
+          orient: 'vertical',
+          right: 10,
+          top: 0,
+          itemGap: 18,
+          icon: 'rect',
+          itemWidth: 8,
+          itemHeight: 8,
+          data: seriesName,
+          formatter: (name) => {
+            let total = 0
+            let target
+            for (let i = 0; i < seriesData.length; i++) {
+              total += seriesData[i].value
+              if (seriesData[i].name === name) {
+                target = seriesData[i].value
               }
             }
-          }
+            var arr = [
+              '{name|' + name + '}\n',
+              '{value|' + target + '}',
+              '{rate|' + ((target / total) * 100).toFixed(2) + '%}'
+            ]
+            return arr.join('  ')
+          },
+          textStyle: {
+            rich: {
+              name: {
+                fontSize: 12,
+                lineHeight: 20,
+                padding: [20, 0, 0, 0],
+                fontFamily: 'SourceHanSansCN-Regular',
+                wordWrap: 'break-word',
+                color: '#9BB9DD',
+                align: 'left'
+              },
+              value: {
+                fontSize: 20,
+                lineHeight: 20,
+                padding: [10, 0, 0, 0],
+                color: '#DFECFB',
+                fontFamily: 'YouSheBiaoTiHei',
+                align: 'left'
+              },
+              rate: {
+                align: 'right',
+                fontSize: 16,
+                lineHeight: 20,
+                padding: [10, 0, 0, 0],
+                fontFamily: 'SourceHanSansCN-Regular',
+                color: '#9BB9DD'
+              }
+            }
+          },
+          pageTextStyle: {
+            fontSize: 12,
+            color: 'RGBA(86, 114, 157, 0.9)'
+          },
+          // pageButtonPosition: 'start',
+          pageButtonItemGap: 0,
+          pageIconSize: 0
         },
         series: [{
           name: '库存量监控',
           type: 'pie',
-          radius: ['50%', '57%'],
+          radius: ['61%', '69%'],
-          center: ['50%', '50%'],
+          center: ['24.5%', '49%'],
           labelLine: {
             show: false
           },
@@ -710,10 +772,15 @@ export default {
           bu = 0
         }
         echart.dispatchAction({
-          type: 'select', // 默认显示江苏的提示框
+          type: 'select',
-          seriesIndex: 0, // 这行不能省
+          seriesIndex: 0,
           dataIndex: bu
         })
+        echart.dispatchAction({
+          type: 'legendScroll',
+          seriesIndex: 0,
+          scrollDataIndex: bu
+        })
         bu++
       }, 2000)
       window.addEventListener('resize', () => {
@@ -991,6 +1058,8 @@ export default {
     .content_wraper
       padding 20px
       background center / 100% url('../../../../images/bg-m_2.png') no-repeat
+    .content_wraper_1
+      padding 23px 0 6px 0
 .module_one_wraper
     _wh(233px, 100%)
     padding 5px 9px 31px 9px
@@ -1005,7 +1074,7 @@ export default {
 .module_three_wraper
     _wh(186px, 214px)
     margin-right 15px
-    padding 27px 23px
+    padding 27px 17px 27px 23px
     background center / 100% url('../../../../images/message-bg.png') no-repeat
 .echart_wraper
     _wh(100%, 100%)
@@ -1017,11 +1086,8 @@ export default {
     padding 28px 27px 27px 28px
     background center / 100% auto url('../../../../images/pie-bg_1.png') no-repeat
 .pie_wraper_2
-    position absolute
+    _wh(100%, 100%)
-    top 17px
+    background left center / 222px 222px url('../../../../images/pie-bg_2.png') no-repeat
-    left 0
-    _wh(222px, 222px)
-    background center / 100% auto url('../../../../images/pie-bg_2.png') no-repeat
 .pie_legend
   _wh(calc(100% - 195px), 100%)
   margin-left 195px

src/pages/modules/home/right/left.vue

@@ -43,8 +43,8 @@
 </template>
 
 <script>
-import { homepageEquipment } from '@js/mork2.js'
+// import { homepageEquipment } from '@js/mork2.js'
-// import { homepageEquipment } from '@js/getData2.js'
+import { homepageEquipment } from '@js/getData2.js'
 export default {
   data () {
     return {

src/pages/modules/home/right/right.vue

@@ -99,8 +99,8 @@
 </template>
 
 <script>
-import { homepageDataRight } from '@js/mork2.js'
+// import { homepageDataRight } from '@js/mork2.js'
-// import { homepageDataRight } from '@js/getData2.js'
+import { homepageDataRight } from '@js/getData2.js'
 import bg1 from '@img/bg1.png'
 import bg2 from '@img/bg2.png'
 import bg3 from '@img/bg3.png'
@@ -333,18 +333,15 @@ export default {
       })
     },
     setEchart2 () {
-      let arr = this.stateStatistics.fourState
+      let colors = ['#1980EA', '#67D470', '#B4C9EF', '#EF5252', '#BCBF5C', '#6d5edd', '#bf41bb']
-      arr.map((el, i) => {
+      let seriesData = this.stateStatistics.fourState
+      seriesData.map((el, i) => {
         el.value = el.status
         el.name = el.stateName
       })
       let total = this.stateStatistics.count
-      let seriesData = []
-      arr.forEach(r => {
-        seriesData.push(r)
-      })
       let option = {
-        color: ['#1980EA', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252', '#6d5edd', '#bf41bb'],
+        color: colors,
         grid: {
           top: 0,
           left: 0,
@@ -374,9 +371,9 @@ export default {
           }
         },
         series: [{
-          name: '库存量监控',
+          name: '设备运行统计',
           type: 'pie',
-          radius: ['50%', '57%'],
+          radius: ['61%', '69%'],
           center: ['50%', '50%'],
           labelLine: {
             show: false
@@ -744,39 +741,37 @@ export default {
           },
           barWidth: 3,
           itemStyle: {
-            normal: {
+            color: (params) => {
-              color: (params) => {
+              let num = colorArray.length
-                let num = colorArray.length
+              return {
-                return {
+                type: 'linear',
-                  type: 'linear',
+                colorStops: [
-                  colorStops: [
+                  {
-                    {
+                    offset: 0,
-                      offset: 0,
+                    color: colorArray[params.dataIndex % num].bottom
-                      color: colorArray[params.dataIndex % num].bottom
+                  },
-                    },
+                  {
-                    {
+                    offset: 1,
-                      offset: 1,
+                    color: colorArray[params.dataIndex % num].top
-                      color: colorArray[params.dataIndex % num].top
+                  },
-                    },
+                  {
-                    {
+                    offset: 0,
-                      offset: 0,
+                    color: colorArray[params.dataIndex % num].bottom
-                      color: colorArray[params.dataIndex % num].bottom
+                  },
-                    },
+                  {
-                    {
+                    offset: 1,
-                      offset: 1,
+                    color: colorArray[params.dataIndex % num].top
-                      color: colorArray[params.dataIndex % num].top
+                  },
-                    },
+                  {
-                    {
+                    offset: 0,
-                      offset: 0,
+                    color: colorArray[params.dataIndex % num].bottom
-                      color: colorArray[params.dataIndex % num].bottom
+                  },
-                    },
+                  {
-                    {
+                    offset: 1,
-                      offset: 1,
+                    color: colorArray[params.dataIndex % num].top
-                      color: colorArray[params.dataIndex % num].top
+                  }
-                    }
+                ]
-                  ]
+                // globalCoord: false
-                  // globalCoord: false
-                }
               }
             }
           },
@@ -960,9 +955,9 @@ export default {
 .pie_legend_item_bg_3
   background top left / 18px auto url('../../../../images/fk_3.png') no-repeat
 .pie_legend_item_bg_4
-  background top left / 18px auto url('../../../../images/fk_4.png') no-repeat
-.pie_legend_item_bg_5
   background top left / 18px auto url('../../../../images/fk_5.png') no-repeat
+.pie_legend_item_bg_5
+  background top left / 18px auto url('../../../../images/fk_4.png') no-repeat
 .pie_legend_item_bg_6
   background top left / 18px auto url('../../../../images/fk_6.png') no-repeat
 .pie_legend_item_bg_7

src/style/reset.css

@@ -72,7 +72,7 @@ html, body {
      width: 100%;
      height: 100%;
      width: 1920px;
-     width: 3840px;
+     /* width: 3840px; */
      height: 1080px;
 }
  

yarn.lock

@@ -169,6 +169,11 @@ acorn@^5.0.0, acorn@^5.3.0, acorn@^5.5.0:
   resolved "http://registry.npm.taobao.org/acorn/download/acorn-5.7.3.tgz#67aa231bf8812974b85235a96771eb6bd07ea279"
   integrity sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==
 
+add@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/add/-/add-2.0.6.tgz#248f0a9f6e5a528ef2295dbeec30532130ae2235"
+  integrity sha512-j5QzrmsokwWWp6kUcJQySpbG+xfOBqqKnup3OIk1pz+kB/80SLorZ9V8zHFLO92Lcd+hbvq8bT+zOGoPkmBV0Q==
+
 ajv-keywords@^2.1.0:
   version "2.1.1"
   resolved "http://registry.npm.taobao.org/ajv-keywords/download/ajv-keywords-2.1.1.tgz#617997fc5f60576894c435f940d819e135b80762"
@@ -2173,6 +2178,11 @@ deepmerge@^1.2.0:
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-1.5.2.tgz#10499d868844cdad4fee0842df8c7f6f0c95a753"
   integrity sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==
 
+default-passive-events@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/default-passive-events/-/default-passive-events-2.0.0.tgz#79b1aa67becbaab38b718469b5480fef92eda649"
+  integrity sha512-eMtt76GpDVngZQ3ocgvRcNCklUMwID1PaNbCNxfpDXuiOXttSh0HzBbda1HU9SIUsDc02vb7g9+3I5tlqe/qMQ==
+
 define-properties@^1.1.2:
   version "1.1.3"
   resolved "http://registry.npm.taobao.org/define-properties/download/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
@@ -7485,6 +7495,11 @@ yargs@~3.10.0:
     decamelize "^1.0.0"
     window-size "0.1.0"
 
+yarn@^1.22.21:
+  version "1.22.21"
+  resolved "https://registry.yarnpkg.com/yarn/-/yarn-1.22.21.tgz#1959a18351b811cdeedbd484a8f86c3cc3bbaf72"
+  integrity sha512-ynXaJsADJ9JiZ84zU25XkPGOvVMmZ5b7tmTSpKURYwgELdjucAOydqIOrOfTxVYcNXe91xvLZwcRh68SR3liCg==
+
 zrender@5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/zrender/-/zrender-5.1.0.tgz#b6a84c3aa7ccc6642ee0519901ca4c0835c4d85e"