【染损报表】统计表 + echarts下载

package.json

@@ -10,42 +10,43 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "ant-design-vue": "^1.7.2",
-    "@jeecg/antd-online-mini": "3.1.0-beta",
     "@antv/data-set": "^0.11.4",
-    "viser-vue": "^2.4.8",
+    "@jeecg/antd-online-mini": "3.1.0-beta",
+    "@tinymce/tinymce-vue": "2.1.0",
+    "@toast-ui/editor": "^2.1.2",
+    "ant-design-vue": "^1.7.2",
     "axios": "^0.18.0",
+    "china-area-data": "^5.0.1",
+    "clipboard": "^2.0.4",
+    "codemirror": "^5.46.0",
+    "cron-parser": "^2.10.0",
     "dayjs": "^1.8.0",
+    "dom-align": "1.12.0",
+    "echarts": "^5.3.2",
     "enquire.js": "^2.1.6",
     "js-cookie": "^2.2.0",
     "lodash.get": "^4.4.2",
     "lodash.pick": "^4.4.0",
     "md5": "^2.2.1",
     "nprogress": "^0.2.0",
+    "qiankun": "^2.5.1",
+    "tinymce": "5.4.1",
+    "viser-vue": "^2.4.8",
     "vue": "^2.6.10",
+    "vue-area-linkage": "^5.1.0",
     "vue-cropper": "^0.5.4",
     "vue-i18n": "^8.7.0",
     "vue-loader": "^15.7.0",
     "vue-ls": "^3.2.0",
-    "vue-router": "^3.0.1",
-    "vuex": "^3.1.0",
-    "vue-print-nb-jeecg": "^1.0.9",
-    "clipboard": "^2.0.4",
     "vue-photo-preview": "^1.1.3",
+    "vue-print-nb-jeecg": "^1.0.9",
+    "vue-router": "^3.0.1",
     "vue-splitpane": "^1.0.4",
     "vuedraggable": "^2.20.0",
-    "codemirror": "^5.46.0",
-    "@tinymce/tinymce-vue": "2.1.0",
-    "tinymce": "5.4.1",
-    "@toast-ui/editor": "^2.1.2",
-    "vue-area-linkage": "^5.1.0",
-    "china-area-data": "^5.0.1",
-    "dom-align": "1.12.0",
-    "xe-utils": "2.4.8",
+    "vuex": "^3.1.0",
     "vxe-table": "2.9.13",
     "vxe-table-plugin-antd": "1.8.10",
-    "cron-parser": "^2.10.0",
-    "qiankun": "^2.5.1"
+    "xe-utils": "2.4.8"
   },
   "devDependencies": {
     "@babel/polyfill": "^7.2.5",
@@ -54,13 +55,13 @@
     "@vue/cli-service": "^3.3.0",
     "@vue/eslint-config-standard": "^4.0.0",
     "babel-eslint": "7.2.3",
+    "compression-webpack-plugin": "^3.1.0",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.1.0",
+    "html-webpack-plugin": "^4.2.0",
     "less": "^3.9.0",
     "less-loader": "^4.1.0",
-    "vue-template-compiler": "^2.6.10",
-    "html-webpack-plugin": "^4.2.0",
-    "compression-webpack-plugin": "^3.1.0"
+    "vue-template-compiler": "^2.6.10"
   },
   "eslintConfig": {
     "root": true,
@@ -98,7 +99,10 @@
       "vue/html-closing-bracket-newline": 0,
       "vue/no-parsing-error": 0,
       "no-tabs": 0,
-      "indent": ["off", 2],
+      "indent": [
+        "off",
+        2
+      ],
       "no-console": 0,
       "space-before-function-paren": 0
     }

src/main.js

@@ -7,8 +7,8 @@ import Storage from 'vue-ls'
 import router from './router'
 import store from './store/'
 import { VueAxios } from '@/utils/request'
-// , postFormAction, postAction
-// import { getAction } from '@/api/manage' // new
+import * as echarts from 'echarts'
+
 
 import Antd, { version } from 'ant-design-vue'
 import Viser from 'viser-vue'
@@ -54,7 +54,7 @@ require('@jeecg/antd-online-mini/dist/OnlineForm.css')
 console.log('ant-design-vue version:', version)
 Vue.prototype.rules = rules
 
-Vue.config.productionTip = false
+
 Vue.use(Storage, config.storageOptions)
 Vue.use(Antd)
 Vue.use(VueAxios, router)
@@ -66,9 +66,9 @@ Vue.use(preview)
 Vue.use(vueBus)
 Vue.use(JeecgComponents)
 Vue.use(VueAreaLinkage)
+Vue.prototype.$echarts = echarts // 全局echarts
+Vue.config.productionTip = false
 
-// 挂载全局使用的方法
-// Vue.prototype.getAction = getAction
 
 SSO.init(() => {
   main()

src/views/reportForms/dye-loss-table.vue

@@ -84,16 +84,13 @@
     <!-- 引入分析图 组件 -->
     <a-card :bordered="false">
       <div class="chart">
-        <a-row type="flex" justify="space-between">
-          <!-- <a-col :md="12" :sm="12" class="someoneLossChart"> -->
-          <a-col :span="11" class="someoneLossChart">
-            <someoneLossChart />
-          </a-col>
-          <!-- <a-col :md="12" :sm="12" class="allLossChart"> -->
-          <a-col :span="11" class="allLossChart">
-            <allLossChart />
-          </a-col>
-        </a-row>
+        <div class="someoneLossChart" v-if="queryParam.supplier">
+          <someoneLossChart />
+        </div>
+
+        <div v-else class="allLossChart">
+          <allLossChart />
+        </div>
       </div>
     </a-card>
   </div>
@@ -164,7 +161,8 @@ export default {
           orderQuantity: '10',
           purchaseInQuantity: '10',
           materialsOutQuantity: '10',
-          verificationNum: '10'
+          verificationNum: '10',
+          dyeLoss: '3.66%'
         },
         {
           materialNum: '3801000890',
@@ -172,7 +170,8 @@ export default {
           orderQuantity: '20',
           purchaseInQuantity: '20',
           materialsOutQuantity: '20',
-          verificationNum: '20'
+          verificationNum: '20',
+          dyeLoss: '4.32%'
         },
         {
           materialNum: '1901034590',
@@ -180,7 +179,8 @@ export default {
           orderQuantity: '30',
           purchaseInQuantity: '30',
           materialsOutQuantity: '30',
-          verificationNum: '30'
+          verificationNum: '30',
+          dyeLoss: '31.34%'
         },
         {
           materialNum: '4901000890',
@@ -188,7 +188,8 @@ export default {
           orderQuantity: '40',
           purchaseInQuantity: '40',
           materialsOutQuantity: '40',
-          verificationNum: '40'
+          verificationNum: '40',
+          dyeLoss: '5.6%'
         }
       ],
       loading: false, // 表格加载
@@ -218,7 +219,7 @@ export default {
     }
   },
   methods: {
-    // 合计行
+    // 合计行 TODO: 怎么合计数值 及 table 单元格合并
     totalFooterShow(data) {
       // 后端传递的合计的数据
       console.log('染损报表----合计行')
@@ -277,12 +278,6 @@ export default {
 .someoneLossChart {
   height: 600px;
   text-align: center;
-  border: 1px solid #e8e8e8;
   padding-top: 10px;
-  font-size: 18px;
-}
-
-.someoneLossChart {
-  border: 1px solid #e8e8e8;
 }
 </style>

src/views/reportForms/dye-loss-table/allLossChart.vue

@@ -1,13 +1,55 @@
 <template>
-  <!-- 染损报表 中的 分析图 -->
-  <div id="allLossChart">
-    <p>未指定供应商物料染损分析图</p>
-  </div>
+  <!-- 染损报表 未筛选供应商 -->
+  <div id="allLossChart" :style="{ width: '100%', height: '600px' }"></div>
 </template>
 
 <script>
+import * as echarts from 'echarts' //必须有
 export default {
-  name: 'AllLossChart' // 未筛选供应商，展示所有供应商染损分析图
+  name: 'AllLossChart', // 未筛选供应商，所有供应商染损分析图
+  data() {
+    return {}
+  },
+  mounted() {
+    this.initEcharts()
+  },
+  methods: {
+    initEcharts() {
+      const option = {
+        title: {
+          text: '所有供应商物料染损统计图'
+        },
+        tooltip: {},
+        legend: {
+          data: ['损耗']
+        },
+        xAxis: {
+          type: 'category',
+          data: ['FASHIONTEX', 'HARMONY', 'MAO XING YUAN', 'RongSen', 'SLJ', 'TIMBERMET', '国运森']
+        },
+        yAxis: {
+          type: 'value',
+          name:'(%)'
+        },
+        series: [
+          {
+            name: '损耗',
+            type: 'line', //类型为柱状图
+            smooth: true,
+            data: [5, 20, 36, 10, 10, 20]
+          }
+        ]
+      }
+      //深色 ,'dark'
+      const myChart = echarts.init(document.getElementById('allLossChart')) // 图标初始化
+      myChart.setOption(option) // 渲染页面
+
+      //随着屏幕大小调节图表
+      window.addEventListener('resize', () => {
+        myChart.resize()
+      })
+    }
+  }
 }
 </script>
 
@@ -34,4 +76,10 @@ export default {
   border: none;
   padding: 0;
 }
+#myChart {
+  h6 {
+    font-size: 16px;
+    font-weight: 700;
+  }
+}
 </style>

src/views/reportForms/dye-loss-table/someoneLossChart.vue

@@ -1,13 +1,55 @@
 <template>
-  <!-- 染损报表 中的 分析图 -->
-  <div id="someoneLossChart">
-    <p>指定供应商物料染损分析图</p>
-  </div>
+  <!-- 染损报表 中的 指定供应商 -->
+  <div id="someoneLossChart" :style="{ width: '100%', height: '600px' }"></div>
 </template>
 
 <script>
+import * as echarts from 'echarts' //必须有
 export default {
+  name: 'someoneLossChart', // 未筛选供应商，所有供应商染损分析图
+  data() {
+    return {}
+  },
+  mounted() {
+    this.initEcharts()
+  },
+  methods: {
+    initEcharts() {
+      const option = {
+        title: {
+          type: 'category',
+          text: '物料染损分析图(指定供应商)'
+        },
+        tooltip: {},
+        legend: {
+          data: ['损耗']
+        },
+        xAxis: {
+          data: ['物料**', '物料**', '物料**', '物料**', '物料**', '物料**', '物料**']
+        },
+        yAxis: {
+          type: 'value',
+          name: '(%)'
+        },
+        series: [
+          {
+            name: '损耗',
+            type: 'line', //类型为柱状图
+            smooth: true,
+            data: [5, 20, 36, 10, 10, 20]
+          }
+        ]
+      }
+      //深色 ,'dark'
+      const myChart = echarts.init(document.getElementById('someoneLossChart')) // 图标初始化
+      myChart.setOption(option) // 渲染页面
 
+      //随着屏幕大小调节图表
+      window.addEventListener('resize', () => {
+        myChart.resize()
+      })
+    }
+  }
 }
 </script>
 
@@ -34,5 +76,10 @@ export default {
   border: none;
   padding: 0;
 }
-
+#myChart {
+  h6 {
+    font-size: 16px;
+    font-weight: 700;
+  }
+}
 </style>

yarn.lock

@@ -4568,6 +4568,14 @@ ecc-jsbn@~0.1.1:
     jsbn "~0.1.0"
     safer-buffer "^2.1.0"
 
+echarts@^5.3.2:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/echarts/-/echarts-5.3.2.tgz#0a7b3be8c48a48b2e7cb1b82121df0c208d42d2c"
+  integrity sha512-LWCt7ohOKdJqyiBJ0OGBmE9szLdfA9sGcsMEi+GGoc6+Xo75C+BkcT/6NNGRHAWtnQl2fNow05AQjznpap28TQ==
+  dependencies:
+    tslib "2.3.0"
+    zrender "5.3.1"
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -11009,6 +11017,11 @@ tsconfig-paths@^3.9.0:
     minimist "^1.2.0"
     strip-bom "^3.0.0"
 
+tslib@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
+  integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
+
 tslib@^1.10.0, tslib@^1.9.0:
   version "1.13.0"
   resolved "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043"
@@ -12063,3 +12076,10 @@ yorkie@^2.0.0:
     is-ci "^1.0.10"
     normalize-path "^1.0.0"
     strip-indent "^2.0.0"
+
+zrender@5.3.1:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/zrender/-/zrender-5.3.1.tgz#fa8e63ac7e719cfd563831fe8c42a9756c5af384"
+  integrity sha512-7olqIjy0gWfznKr6vgfnGBk7y4UtdMvdwFmK92vVQsQeDPyzkHW1OlrLEKg6GHz1W5ePf0FeN1q2vkl/HFqhXw==
+  dependencies:
+    tslib "2.3.0"