优化

2024-01-05 16:07:27 +08:00
parent 9ce42195cc
commit fed1db7abe
9 changed files with 204 additions and 113 deletions
--- a/package.json
+++ b/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",
--- a/src/config/mork2.js
+++ b/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
--- a/src/main.js
+++ b/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({
--- a/src/pages/Setup.vue
+++ b/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 = {
--- a/src/pages/modules/home/left/left.vue
+++ b/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/getData2.js'
+// import { homepageDataLeft } from '@js/mork2.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) => {
-        el.value = el.qty
-        el.name = el.materialName
-        // if (i === 1) {
-        //   el.selected = true
-        // }
+      let colors = ['#1980EA', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252', '#6d5edd', '#bf41bb']
+      let seriesData = []
+      let seriesName = []
+      this.inventory.map((e, i) => {
+        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: 'center',
+          x: '23.5%',
          y: '39%',
+          width: '200',
+          height: '70',
+          text: '总数',
+          subtext: total,
+          textAlign: 'center',
          textStyle: {
-            rich: {
-              a: {
-                fontSize: 16,
-                lineHeight: 20,
-                color: '#A8C3E6',
-                fontFamily: 'SourceHanSansCN-Regular'
-              },
-              b: {
-                fontSize: 30,
-                lineHeight: 36,
-                color: '#DBE7F6',
-                fontFamily: 'YouSheBiaoTiHei'
+            fontSize: 16,
+            lineHeight: 20,
+            color: '#A8C3E6',
+            fontFamily: 'SourceHanSansCN-Regular'
+          },
+          subtextStyle: {
+            fontSize: 30,
+            lineHeight: 36,
+            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%'],
-          center: ['50%', '50%'],
+          radius: ['61%', '69%'],
+          center: ['24.5%', '49%'],
          labelLine: {
            show: false
          },
@@ -710,10 +772,15 @@ export default {
          bu = 0
        }
        echart.dispatchAction({
-          type: 'select', // 默认显示江苏的提示框
-          seriesIndex: 0, // 这行不能省
+          type: 'select',
+          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
-    top 17px
-    left 0
-    _wh(222px, 222px)
-    background center / 100% auto url('../../../../images/pie-bg_2.png') no-repeat
+    _wh(100%, 100%)
+    background left center / 222px 222px url('../../../../images/pie-bg_2.png') no-repeat
 .pie_legend
  _wh(calc(100% - 195px), 100%)
  margin-left 195px
--- a/src/pages/modules/home/right/left.vue
+++ b/src/pages/modules/home/right/left.vue
@@ -43,8 +43,8 @@
 </template>

 <script>
-import { homepageEquipment } from '@js/mork2.js'
-// import { homepageEquipment } from '@js/getData2.js'
+// import { homepageEquipment } from '@js/mork2.js'
+import { homepageEquipment } from '@js/getData2.js'
 export default {
  data () {
    return {
--- a/src/pages/modules/home/right/right.vue
+++ b/src/pages/modules/home/right/right.vue
@@ -99,8 +99,8 @@
 </template>

 <script>
-import { homepageDataRight } from '@js/mork2.js'
-// import { homepageDataRight } from '@js/getData2.js'
+// import { homepageDataRight } from '@js/mork2.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
-      arr.map((el, i) => {
+      let colors = ['#1980EA', '#67D470', '#B4C9EF', '#EF5252', '#BCBF5C', '#6d5edd', '#bf41bb']
+      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) => {
-                let num = colorArray.length
-                return {
-                  type: 'linear',
-                  colorStops: [
-                    {
-                      offset: 0,
-                      color: colorArray[params.dataIndex % num].bottom
-                    },
-                    {
-                      offset: 1,
-                      color: colorArray[params.dataIndex % num].top
-                    },
-                    {
-                      offset: 0,
-                      color: colorArray[params.dataIndex % num].bottom
-                    },
-                    {
-                      offset: 1,
-                      color: colorArray[params.dataIndex % num].top
-                    },
-                    {
-                      offset: 0,
-                      color: colorArray[params.dataIndex % num].bottom
-                    },
-                    {
-                      offset: 1,
-                      color: colorArray[params.dataIndex % num].top
-                    }
-                  ]
-                  // globalCoord: false
-                }
+            color: (params) => {
+              let num = colorArray.length
+              return {
+                type: 'linear',
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: colorArray[params.dataIndex % num].bottom
+                  },
+                  {
+                    offset: 1,
+                    color: colorArray[params.dataIndex % num].top
+                  },
+                  {
+                    offset: 0,
+                    color: colorArray[params.dataIndex % num].bottom
+                  },
+                  {
+                    offset: 1,
+                    color: colorArray[params.dataIndex % num].top
+                  },
+                  {
+                    offset: 0,
+                    color: colorArray[params.dataIndex % num].bottom
+                  },
+                  {
+                    offset: 1,
+                    color: colorArray[params.dataIndex % num].top
+                  }
+                ]
+                // 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
--- a/src/style/reset.css
+++ b/src/style/reset.css
@@ -72,7 +72,7 @@ html, body {
     width: 100%;
     height: 100%;
     width: 1920px;
-     width: 3840px;
+     /* width: 3840px; */
     height: 1080px;
 }
 
--- a/yarn.lock
+++ b/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"