首页调整

src/views/index.vue

@@ -13,13 +13,13 @@
           <p>出库</p>
         </div>
       </li>
-      <li>
+      <li @click="jump('/basicdata/corps')">
         <div>
           <i class="el-icon-s-custom" style="font-size: 50px;text-align: center"></i>
           <p>新增用户</p>
         </div>
       </li>
-      <li>
+      <li @click="jump('/basicdata/goods')">
         <div>
           <i class="el-icon-s-cooperation" style="font-size: 50px;text-align: center"></i>
           <p>新增商品</p>
@@ -66,7 +66,9 @@
       <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%;">
+        <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>
@@ -74,15 +76,24 @@
       </div>
     </div>
     <div style="width: 100%;margin-bottom: 50px">
-      <el-table :data="tableData" :header-cell-style="{borderBottom:'1px dashed #dfe6ec'}" :cell-style="cellStyle" style="width: 65%;float: left;">
+      <el-table :data="tableData" :header-cell-style="{borderBottom:'1px dashed #dfe6ec'}" :cell-style="cellStyle"
+                style="width: 65%;float: left;"
+      >
         <el-table-column prop="name" label="待办事宜" width="360">
         </el-table-column>
         <el-table-column prop="date" label="时间" width="300"></el-table-column>
         <el-table-column prop="address" label="操作"></el-table-column>
       </el-table>
-      <el-table :data="tableData" :header-cell-style="{borderBottom:'1px dashed #dfe6ec'}" :cell-style="cellStyle" style="width: 30%;float: left;margin-left: 20px;margin-right: 20px;">
-        <el-table-column prop="name" label="消息中心" width="220"/>
-        <el-table-column prop="address" label="操作"/>
+      <el-table :data="tableDataTwo" :header-cell-style="{borderBottom:'1px dashed #dfe6ec'}" :cell-style="cellStyle"
+                style="width: 30%;float: left;margin-left: 20px;margin-right: 20px;"
+      >
+        <el-table-column prop="noticeTitle" :show-overflow-tooltip="true" label="消息中心" width="260"/>
+        <el-table-column prop="address" label="操作">
+          <span @click="bug()" style="cursor:pointer">查看详情</span>
+          <template slot-scope="scope">
+            <span @click="bug(scope.row.noticeContent)" style="cursor:pointer">查看详情</span>
+          </template>
+        </el-table-column>
       </el-table>
     </div>
     <div style="width: 100%;float: left;margin-top:20px;">
@@ -91,18 +102,33 @@
         <div id="box_ss" style="width:100%;height:350px;"></div>
       </div>
     </div>
+    <el-dialog
+      title="消息提示"
+      :visible.sync="dialogVisible"
+      width="80%"
+      :before-close="handleClose"
+    >
+      <span v-html="text" class="text" style="max-width: 100%;height: auto;"></span>
+      <span slot="footer" class="dialog-footer">
+    <el-button @click="dialogVisible = false">取 消</el-button>
+    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+  </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { listCorps , information, warehouse} from "../../src/api/index";
+import { listCorps, information, warehouse } from '../../src/api/index'
+
 export default {
-  name: "index",
+  name: 'index',
   data() {
     return {
       // 版本号
-      version: "3.2.1",
-      select:'',
+      version: '3.2.1',
+      select: '',
+      text: '',
+      dialogVisible: false,
       tableData: [{
         date: '2020-11-20 12:00',
         name: '某客户账单审核',
@@ -116,35 +142,48 @@ export default {
         name: '仓储费审核结算审核',
         address: '查看详情'
       }],
-      chart:[],
-      warehouse:[],
-      master:[],
-      commodity:[],
-      commoditytwo:[],
-      name:[]
-    };
+      chart: [],
+      warehouse: [],
+      master: [],
+      commodity: [],
+      commoditytwo: [],
+      name: [],
+      tableDataTwo: []
+    }
   },
   mounted() {
-    this.drawLine_ss()
+
   },
-  created(){
-    this.getList();
-    this.warehouses();
+  created() {
+    this.getList()
+    this.warehouses()
     this.firstinventory()
   },
   methods: {
-    firstinventory(){
-      information(0).then(response =>{
+    bug(res) {
+      this.dialogVisible = true
+      this.text = res
+    },
+    handleClose(done) {
+      this.$confirm('确认关闭？')
+        .then(_ => {
+          done()
+        })
+        .catch(_ => {
+        })
+    },
+    firstinventory() {
+      information(0).then(response => {
         console.log(response)
         this.chart = response.data
-        for (let index of this.chart.corpsListWhouse){
+        for (let index of this.chart.corpsListWhouse) {
           this.master.push({
-            name:index.fName,
-            value:index.fGrossweightD
+            name: index.fName,
+            value: index.fGrossweightD
           })
           this.name.push(index.fName)
         }
-        for (let index of this.chart.goodslistWhouse){
+        for (let index of this.chart.goodslistWhouse) {
           this.commodity.push(index.fName)
           this.commoditytwo.push(index.fGrossweightD)
         }
@@ -154,26 +193,25 @@ export default {
         this.drawLine_ss()
       })
     },
-    query(){
+    query() {
       this.master = []
       this.commodity = []
       this.commoditytwo = []
       this.name = []
-      console.log(this.select)
-      if (this.select === ''){
+      if (this.select === '') {
         return this.select
-      }else {
-        information(this.select).then(response =>{
+      } else {
+        information(this.select).then(response => {
           console.log(response)
           this.chart = response.data
-          for (let index of this.chart.corpsListWhouse){
+          for (let index of this.chart.corpsListWhouse) {
             this.master.push({
-              name:index.fName,
-              value:index.fGrossweightD
+              name: index.fName,
+              value: index.fGrossweightD
             })
             this.name.push(index.fName)
           }
-          for (let index of this.chart.goodslistWhouse){
+          for (let index of this.chart.goodslistWhouse) {
             this.commodity.push(index.fName)
             this.commoditytwo.push(index.fGrossweightD)
           }
@@ -183,34 +221,34 @@ export default {
         })
       }
     },
-    jump(res){
+    jump(res) {
       this.$router.push({ path: res })
     },
     //设置单元格边框
-    cellStyle({row, column, rowIndex, columnIndex}) {
+    cellStyle({ row, column, rowIndex, columnIndex }) {
       return 'border-bottom: 1px dashed rgb(223, 230, 236)'
     },
     //查询消息中心
     getList() {
-      this.loading = true;
+      this.loading = true
       listCorps(this.queryParams).then(response => {
-        console.log(response.rows);
-      });
+        this.tableDataTwo = response.rows
+      })
     },
     //查询仓库
-    warehouses(){
-      warehouse().then(response =>{
+    warehouses() {
+      warehouse().then(response => {
         this.warehouse = []
-        for (let index of response.rows){
+        for (let index of response.rows) {
           this.warehouse.push({
-            fName:index.fName,
-            fWarehouseid:index.fWarehouseid
+            fName: index.fName,
+            fWarehouseid: index.fWarehouseid
           })
         }
       })
     },
     goTarget(href) {
-      window.open(href, "_blank");
+      window.open(href, '_blank')
     },
     //仓库图表
     drawLine() {
@@ -220,7 +258,7 @@ export default {
       myChart.setOption({
         title: {
           text: this.chart.whouseList[0].fName + '统计',
-          subtext: '虚构数据',
+          subtext: '实时数据',
           left: 'center'
         },
         tooltip: {
@@ -235,7 +273,7 @@ export default {
         series: [
           {
             type: 'pie',
-            name: '虚构数据',
+            name: '实时数据',
             radius: '65%',
             center: ['50%', '50%'],
             selectedMode: 'single',
@@ -306,8 +344,8 @@ export default {
                   }
                 }
               },
-              {value: this.chart.whouseList[0].fGrossweightD, name: '占用库容'},
-              {value: this.chart.whouseList[0].fTotalgross - this.chart.whouseList[0].fGrossweightD, name: '空闲库容'},
+              { value: this.chart.whouseList[0].fGrossweightD, name: '占用库容' },
+              { value: parseFloat(this.chart.whouseList[0].fTotalgross - this.chart.whouseList[0].fGrossweightD).toFixed(1), name: '空闲库容' }
             ],
             emphasis: {
               itemStyle: {
@@ -318,7 +356,7 @@ export default {
             }
           }
         ]
-      });
+      })
     },
     drawLinetwo() {
       // 基于准备好的dom，初始化echarts实例，所以只能在mounted中调用
@@ -327,7 +365,7 @@ export default {
       myChart.setOption({
         title: {
           text: this.chart.whouseList[0].fName + '货权人统计',
-          subtext: '虚构数据',
+          subtext: '实时数据',
           left: 'center'
         },
         tooltip: {
@@ -360,10 +398,10 @@ export default {
               show: false
             },
             data:
-              this.master
+            this.master
           }
         ]
-      });
+      })
     },
     drawLine_ss() {
       // 基于准备好的dom，初始化echarts实例，所以只能在mounted中调用
@@ -371,8 +409,8 @@ export default {
       // 绘制图表
       myChart.setOption({
         title: {
-          text: '本仓库商品统计',
-          subtext: '虚构数据',
+          text:this.chart.whouseList[0].fName + '商品统计',
+          subtext: '实时数据',
           left: 'center'
         },
         color: ['#3398DB'],
@@ -410,20 +448,21 @@ export default {
             data: this.commoditytwo
           }
         ]
-      });
+      })
     }
-  },
-};
+  }
+}
 </script>
 
 <style scoped lang="scss">
-.block{
+.block {
   width: 70%;
   float: left;
   display: flex;
   flex-wrap: wrap;
   height: 350px;
-  li{
+
+  li {
     width: 18%;
     height: 150px;
     background-color: #1c84c6;
@@ -431,14 +470,17 @@ export default {
     text-align: center;
     color: #FFFFFF;
     border-radius: 10px;
-    div{
+    cursor:pointer;
+    div {
       margin-top: 40px;
-      p{
+
+      p {
         font-size: 20px;
       }
     }
   }
 }
+
 .home {
   blockquote {
     padding: 10px 20px;
@@ -503,4 +545,9 @@ export default {
   }
 }
 </style>
-
+<style>
+.text img {
+  max-width: 100%;
+  height: auto;
+}
+</style>