首页图表完成

src/api/index.js

@@ -7,18 +7,18 @@ export function listCorps(query) {
     method: 'get'
   })
 }
-// 查询客户详情列表
-export function listCorps_s(query) {
+
+// 条件查询仓库详情图表
+export function information(fId) {
   return request({
-    url: '/warehouseBusiness/whgenleg/wareHouseList',
+    url: '/warehouseBusiness/whgenleg/goodsList/' + fId,
     method: 'get'
   })
 }
-
-// 查询客户详情列表
-export function listCorps_ss(fId) {
+//查询仓库所有
+export function warehouse(){
   return request({
-    url: '/warehouseBusiness/whgenleg/goodsList/' + fId,
-    method: 'get'
+    url:'/warehouseBusiness/whgenleg/wareHouseList',
+    method:'get'
   })
 }

src/views/agreement/agreementTask/index.vue

@@ -29,25 +29,25 @@
           ></el-option>
         </el-select>
       </el-form-item>
-      <el-form-item label="货物品名" prop="fGoodsid">
-        <el-select
-          v-model="queryParams.fGoodsid"
-          filterable
-          remote
-          clearable
-          style="width: 200px"
-          :remote-method="goodsRemoteMethod"
-          @keyup.enter.native="handleQuery"
-          placeholder="请输入货物品名"
-        >
-          <el-option
-            v-for="(dict, index) in goodsOptions"
-            :key="index.fId"
-            :label="dict.fName"
-            :value="dict.fId"
-          ></el-option>
-        </el-select>
-      </el-form-item>
+<!--      <el-form-item label="货物品名" prop="fGoodsid">-->
+<!--        <el-select-->
+<!--          v-model="queryParams.fGoodsid"-->
+<!--          filterable-->
+<!--          remote-->
+<!--          clearable-->
+<!--          style="width: 200px"-->
+<!--          :remote-method="goodsRemoteMethod"-->
+<!--          @keyup.enter.native="handleQuery"-->
+<!--          placeholder="请输入货物品名"-->
+<!--        >-->
+<!--          <el-option-->
+<!--            v-for="(dict, index) in goodsOptions"-->
+<!--            :key="index.fId"-->
+<!--            :label="dict.fName"-->
+<!--            :value="dict.fId"-->
+<!--          ></el-option>-->
+<!--        </el-select>-->
+<!--      </el-form-item>-->
       <el-form-item label="制单部门" prop="fDeptid">
         <el-input
           v-model="queryParams.fDeptid"
@@ -191,7 +191,7 @@
       @pagination="getList"
     />
 
-    <!-- 添加或修改仓储费对话框 -->
+    <!-- 添加或修改作业费对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="85%" append-to-body :before-close="handleClose" :close-on-click-modal="false">
       <el-form ref="form" :model="form" :rules="rules" label-width="80px"
                style="display: flex;flex-wrap: wrap;justify-content: flex-start;"
@@ -644,7 +644,7 @@ export default {
     handleAdd() {
       this.reset()
       this.open = true
-      this.title = '添加仓储费'
+      this.title = '添加作业费'
       queryUserVal().then((response) => {
         // this.$set("deptName", response.dept.deptName);
         this.deptName = response.dept.deptName
@@ -675,7 +675,7 @@ export default {
         console.log(JSON.stringify(this.agreementitemsList))
 
         this.open = true
-        this.title = '修改仓储费'
+        this.title = '修改作业费'
       })
     },
     /** 远程模糊查询用户 */
@@ -725,7 +725,7 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const fIds = row.fId || this.ids;
-      this.$confirm('是否确认删除仓储费编号为"' + fIds + '"的数据项?', "警告", {
+      this.$confirm('是否确认删除作业费编号为"' + fIds + '"的数据项?', "警告", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning"
@@ -739,7 +739,7 @@ export default {
     /** 导出按钮操作 */
     handleExport() {
       const queryParams = this.queryParams
-      this.$confirm('是否确认导出所有仓储费数据项?', '警告', {
+      this.$confirm('是否确认导出所有作业费数据项?', '警告', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'

src/views/index.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="app-container home">
     <ul class="block">
-      <li>
+      <li @click="jump('/business/inStock')">
         <div>
           <i class="el-icon-download" style="font-size: 50px;text-align: center"></i>
           <p>入库</p>
         </div>
       </li>
-      <li>
+      <li @click="jump('/business/outStock')">
         <div>
           <i class="el-icon-upload2" style="font-size: 50px;text-align: center"></i>
           <p>出库</p>
@@ -25,7 +25,7 @@
           <p>新增商品</p>
         </div>
       </li>
-      <li>
+      <li @click="jump('/business/transfer')">
         <div>
           <i class="el-icon-connection" style="font-size: 50px;text-align: center"></i>
           <p>调拨</p>
@@ -49,13 +49,13 @@
           <p>对账</p>
         </div>
       </li>
-      <li>
+      <li @click="jump('/business/goodsTransfer')">
         <div>
           <i class="el-icon-takeaway-box" style="font-size: 50px;text-align: center"></i>
           <p>货转</p>
         </div>
       </li>
-      <li>
+      <li @click="jump('/agreement/agreementStorage')">
         <div>
           <i class="el-icon-s-order" style="font-size: 50px;text-align: center"></i>
           <p>协议</p>
@@ -65,6 +65,12 @@
     <div style="width: 30%;float: right">
       <div style="display: flex;">
         <div id="box" style="width:100%;height:350px;"></div>
+
+        <el-select v-model="select" slot="prepend" size="mini" :select="query()" placeholder="点击切换仓库" style="position:absolute; width: 8%;right: 1%;">
+          <div v-for="(item, index) in warehouse" :key="index">
+            <el-option :label="item.fName" :value="item.fWarehouseid"></el-option>
+          </div>
+        </el-select>
       </div>
     </div>
     <div style="width: 100%;margin-bottom: 50px">
@@ -89,13 +95,14 @@
 </template>
 
 <script>
-import { listCorps , listCorps_s,listCorps_ss} from "../../src/api/index";
+import { listCorps , information, warehouse} from "../../src/api/index";
 export default {
   name: "index",
   data() {
     return {
       // 版本号
       version: "3.2.1",
+      select:'',
       tableData: [{
         date: '2020-11-20 12:00',
         name: '某客户账单审核',
@@ -108,20 +115,77 @@ export default {
         date: '2020-11-20 12:00',
         name: '仓储费审核结算审核',
         address: '查看详情'
-      }]
+      }],
+      chart:[],
+      warehouse:[],
+      master:[],
+      commodity:[],
+      commoditytwo:[],
+      name:[]
     };
   },
   mounted() {
-    this.drawLine();
-    this.drawLine_s();
-    this.drawLine_ss();
+    this.drawLine_ss()
   },
   created(){
     this.getList();
-    this.getLabel_s();
-    this.getLabel_ss();
+    this.warehouses();
+    this.firstinventory()
   },
   methods: {
+    firstinventory(){
+      information(0).then(response =>{
+        console.log(response)
+        this.chart = response.data
+        for (let index of this.chart.corpsListWhouse){
+          this.master.push({
+            name:index.fName,
+            value:index.fGrossweightD
+          })
+          this.name.push(index.fName)
+        }
+        for (let index of this.chart.goodslistWhouse){
+          this.commodity.push(index.fName)
+          this.commoditytwo.push(index.fGrossweightD)
+        }
+
+        this.drawLine()
+        this.drawLinetwo()
+        this.drawLine_ss()
+      })
+    },
+    query(){
+      this.master = []
+      this.commodity = []
+      this.commoditytwo = []
+      this.name = []
+      console.log(this.select)
+      if (this.select === ''){
+        return this.select
+      }else {
+        information(this.select).then(response =>{
+          console.log(response)
+          this.chart = response.data
+          for (let index of this.chart.corpsListWhouse){
+            this.master.push({
+              name:index.fName,
+              value:index.fGrossweightD
+            })
+            this.name.push(index.fName)
+          }
+          for (let index of this.chart.goodslistWhouse){
+            this.commodity.push(index.fName)
+            this.commoditytwo.push(index.fGrossweightD)
+          }
+          this.drawLine()
+          this.drawLinetwo()
+          this.drawLine_ss()
+        })
+      }
+    },
+    jump(res){
+      this.$router.push({ path: res })
+    },
     //设置单元格边框
     cellStyle({row, column, rowIndex, columnIndex}) {
       return 'border-bottom: 1px dashed rgb(223, 230, 236)'
@@ -133,16 +197,16 @@ export default {
         console.log(response.rows);
       });
     },
-    // 仓库图表
-    getLabel_s(){
-      listCorps_s(this.queryParse).then(response =>{
-        console.log(response.rows);
-      })
-    },
-    // 商品图表
-    getLabel_ss(){
-      listCorps_ss(0).then(response =>{
-        console.log(response);
+    //查询仓库
+    warehouses(){
+      warehouse().then(response =>{
+        this.warehouse = []
+        for (let index of response.rows){
+          this.warehouse.push({
+            fName:index.fName,
+            fWarehouseid:index.fWarehouseid
+          })
+        }
       })
     },
     goTarget(href) {
@@ -155,7 +219,7 @@ export default {
       // 绘制图表
       myChart.setOption({
         title: {
-          text: '仓库库容统计',
+          text: this.chart.whouseList[0].fName + '统计',
           subtext: '虚构数据',
           left: 'center'
         },
@@ -164,15 +228,14 @@ export default {
           formatter: '{a} <br/>{b} : {c} ({d}%)'
         },
         legend: {
-          // orient: 'vertical',
-          // top: 'middle',
           bottom: 10,
           left: 'center',
-          data: ['西凉', '益州', '兖州', '荆州']
+          data: ['空闲库容', '占用库容']
         },
         series: [
           {
             type: 'pie',
+            name: '虚构数据',
             radius: '65%',
             center: ['50%', '50%'],
             selectedMode: 'single',
@@ -243,8 +306,8 @@ export default {
                   }
                 }
               },
-              {value: 200, name: '占用库容'},
-              {value: 500, name: '空闲库容'},
+              {value: this.chart.whouseList[0].fGrossweightD, name: '占用库容'},
+              {value: this.chart.whouseList[0].fTotalgross - this.chart.whouseList[0].fGrossweightD, name: '空闲库容'},
             ],
             emphasis: {
               itemStyle: {
@@ -257,71 +320,47 @@ export default {
         ]
       });
     },
-    drawLine_s() {
+    drawLinetwo() {
       // 基于准备好的dom，初始化echarts实例，所以只能在mounted中调用
       let myChart = this.$echarts.init(document.getElementById('box_s'))
       // 绘制图表
       myChart.setOption({
-        backgroundColor: '#fff',
-
         title: {
-          text: '货主库存占比统计',
-          left: 'center',
-          top: 20,
-          textStyle: {
-            color: '#333333'
-          }
+          text: this.chart.whouseList[0].fName + '货权人统计',
+          subtext: '虚构数据',
+          left: 'center'
         },
-
         tooltip: {
           trigger: 'item',
-          formatter: '{a} <br/>{b} : {c} ({d}%)'
+          formatter: '{a} <br/>{b}: {c} ({d}%)'
         },
-
-        visualMap: {
-          show: false,
-          min: 80,
-          max: 600,
-          inRange: {
-            colorLightness: [0, 1]
-          }
+        legend: {
+          bottom: 10,
+          left: 'center',
+          data: this.name
         },
         series: [
           {
-            name: '虚构数据',
+            name: '访问来源',
             type: 'pie',
-            radius: '80%',
-            center: ['50%', '60%'],
-            data: [
-              {value: 335, name: '货主1'},
-              {value: 310, name: '货主2'},
-              {value: 274, name: '货主3'},
-              {value: 235, name: '货主4'},
-              {value: 400, name: '货主5'}
-            ].sort(function (a, b) { return a.value - b.value; }),
-            roseType: 'radius',
+            radius: ['40%', '60%'],
+            avoidLabelOverlap: false,
             label: {
-              // color: 'rgba(0, 0, 0, 1)'
+              show: false,
+              position: 'center'
             },
-            labelLine: {
-              lineStyle: {
-                // color: 'rgba(51, 51, 51, 1)'
-              },
-              smooth: 0.2,
-              length: 10,
-              length2: 20
+            emphasis: {
+              label: {
+                // show: true,
+                fontSize: '30',
+                fontWeight: 'bold'
+              }
             },
-            itemStyle: {
-              // color: '#000',
-              // shadowBlur: 200,
-              shadowColor: 'rgba(0, 0, 0, 0.5)'
+            labelLine: {
+              show: false
             },
-
-            animationType: 'scale',
-            animationEasing: 'elasticOut',
-            animationDelay: function (idx) {
-              return Math.random() * 200;
-            }
+            data:
+              this.master
           }
         ]
       });
@@ -352,7 +391,7 @@ export default {
         xAxis: [
           {
             type: 'category',
-            data: ['棉花', '淀粉', '木薯', '冰糖', '麻花', '海盐', '胡椒粉'],
+            data: this.commodity,
             axisTick: {
               alignWithLabel: true
             }
@@ -368,7 +407,7 @@ export default {
             name: '实时状态',
             type: 'bar',
             barWidth: '60%',
-            data: [10, 52, 200, 334, 390, 330, 220]
+            data: this.commoditytwo
           }
         ]
       });

src/views/login.vue

@@ -48,7 +48,7 @@
     </el-form>
     <!--  底部  -->
     <div class="el-login-footer">
-      <span>Copyright © 2020-2020 大木仓储管理系统</span>
+      <span>Copyright © 2020-2022 大木仓储管理系统</span>
     </div>
   </div>
 </template>

src/views/warehouseBusiness/agreement/index.vue

@@ -342,7 +342,7 @@
           header-align="center"
           align="center"
           width="180px"
-          label="费用名称1"
+          label="费用名称"
         >
           <template slot-scope="scope">
             <el-select
@@ -571,7 +571,6 @@ export default {
       let queryParams = { pageNum: 1, pageSize: 10, fName: name };
       listFees(queryParams).then((response) => {
         // this.fWbuOptions = response.rows;
-        // console.log(response)
         let fWbuOptions = this.fWbuOptions.concat(response.rows)
         this.fWbuOptions = Array.from(new Set(fWbuOptions))
         console.log(this.fWbuOptions)