update

src/utils/request.js

@@ -7,7 +7,7 @@ import { getToken } from '@/utils/auth'
 const service = axios.create({
     baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
     // withCredentials: true, // send cookies when cross-domain requests
-    timeout: 5000 // request timeout
+    timeout: 50000 // request timeout
 })
 
 // request interceptor

src/views/assetsManager/profit/index.vue

@@ -178,7 +178,7 @@
             </el-pagination>
           </div>
           <div v-if="!isList" style="margin-top: 30px; width: 70%;">
-            <div id="leaseChart" ref="leaseChart" :style="{width: '100%', height: '400px'}"></div>
+            <div id="leaseChart" ref="leaseChart" style="width: 800px; height: 400px;"></div>
           </div>
           <div style="margin: 30px 0 0 60px; width: 30%;">
             <div style="color: #A4A4A4;">
@@ -265,7 +265,7 @@
             </el-pagination>
           </div>
           <div v-if="!isList" style="margin-top: 30px; width: 70%;">
-            <div id="leaseChart" ref="leaseChart" :style="{width: '100%', height: '400px'}"></div>
+            <div id="ompChart" ref="ompChart" :style="{width: '100%', height: '400px'}"></div>
           </div>
           <div style="margin: 30px 0 0 60px; width: 30%;">
             <div style="margin-top: 30px; color: #A4A4A4;">
@@ -332,7 +332,7 @@
             </el-pagination>
           </div>
           <div v-if="!isList" style="margin-top: 30px; width: 70%;">
-            <div id="leaseChart" ref="leaseChart" :style="{width: '100%', height: '400px'}"></div>
+            <div id="pcChart" ref="pcChart" :style="{width: '100%', height: '400px'}"></div>
           </div>
           <div style="margin: 30px 0 0 60px; width: 30%;">
             <div style="margin-top: 30px; color: #A4A4A4;">
@@ -391,7 +391,7 @@
             </el-pagination>
           </div>
           <div v-if="!isList" style="margin-top: 30px; width: 70%;">
-            <div id="leaseChart" ref="leaseChart" :style="{width: '100%', height: '400px'}"></div>
+            <div id="yxChart" ref="yxChart" :style="{width: '100%', height: '400px'}"></div>
           </div>
           <div style="margin: 30px 0 0 60px; width: 30%;">
             <div style="margin-top: 30px; color: #A4A4A4;">
@@ -450,7 +450,7 @@
             </el-pagination>
           </div>
           <div v-if="!isList" style="margin-top: 30px; width: 70%;">
-            <div id="leaseChart" ref="leaseChart" :style="{width: '100%', height: '400px'}"></div>
+            <div id="opChart" ref="opChart" :style="{width: '100%', height: '400px'}"></div>
           </div>
           <div style="margin: 30px 0 0 60px; width: 30%;">
             <div style="color: #A4A4A4;">
@@ -541,7 +541,7 @@
             </el-pagination>
           </div>
           <div v-if="!isList" style="margin-top: 30px; width: 70%;">
-            <div id="leaseChart" ref="leaseChart" :style="{width: '100%', height: '400px'}"></div>
+            <div id="jrChart" ref="jrChart" :style="{width: '100%', height: '400px'}"></div>
           </div>
           <div style="margin: 30px 0 0 60px; width: 30%;">
             <div style="margin-top: 30px; color: #A4A4A4;">
@@ -556,7 +556,7 @@
               <div style="font-size: 14px; color: #1C1C1C; width: 120px;">剩余付金融成本：</div>
               <div style="width: 50%;text-align: right; font-size: 14px; color: #A4A4A4;">{{indexData.fiResidueCost || 0}}</div>
             </div>
-            <div style="margin-top: 40px; color: #fff; background: #58ACFA; width: 80px; height: 50px; line-height: 50px;text-align: center; border-radius: 6px;"  @click="clickHandle">{{isList?'图形展示':'列表展示'}}</div>
+            <!-- <div style="margin-top: 40px; color: #fff; background: #58ACFA; width: 80px; height: 50px; line-height: 50px;text-align: center; border-radius: 6px;"  @click="clickHandle">{{isList?'图形展示':'列表展示'}}</div> -->
           </div>
         </div>
       </el-tab-pane>
@@ -604,7 +604,7 @@
             </el-pagination>
           </div>
           <div v-if="!isList" style="margin-top: 30px; width: 70%;">
-            <div id="leaseChart" ref="leaseChart" :style="{width: '100%', height: '400px'}"></div>
+            <div id="czChart" ref="czChart" :style="{width: '100%', height: '400px'}"></div>
           </div>
           <div style="margin: 30px 0 0 60px; width: 30%;">
             <div style="margin-top: 30px; color: #A4A4A4;">
@@ -615,7 +615,7 @@
               <div style="font-size: 14px; color: #1C1C1C; width: 100px;">处置金收益：</div>
               <div style="width: 50%;text-align: right; font-size: 14px; color: #A4A4A4;">{{indexData.handleProfit || 0}}</div>
             </div>
-            <div style="margin-top: 40px; color: #fff; background: #58ACFA; width: 80px; height: 50px; line-height: 50px;text-align: center; border-radius: 6px;"  @click="clickHandle">{{isList?'图形展示':'列表展示'}}</div>
+            <!-- <div style="margin-top: 40px; color: #fff; background: #58ACFA; width: 80px; height: 50px; line-height: 50px;text-align: center; border-radius: 6px;"  @click="clickHandle">{{isList?'图形展示':'列表展示'}}</div> -->
           </div>
         </div>
       </el-tab-pane>
@@ -663,7 +663,7 @@
             </el-pagination>
           </div>
           <div v-if="!isList" style="margin-top: 30px; width: 70%;">
-            <div id="leaseChart" ref="leaseChart" :style="{width: '100%', height: '400px'}"></div>
+            <div id="otherChart" ref="otherChart" :style="{width: '100%', height: '400px'}"></div>
           </div>
           <div style="margin: 30px 0 0 60px; width: 30%;">
             <div style="margin-top: 30px; color: #A4A4A4;">
@@ -683,97 +683,62 @@
         </div>
       </el-tab-pane>
       <el-tab-pane label="总收支" name="ninth">
-        <div style="display: flex;">
-          <div style="margin-top: 10px; width: 70%;" v-if="isList">
-            <el-table
-              v-loading="loading"
-              :data="data"
-              element-loading-text="Loading"
-              :header-cell-style="{background:'rgba(242, 242, 242, 1)',borderColor:'rgba(242, 242, 242, 1);',textAlign:'center'}"
-              :cell-style="{'text-align':'center'}"
-              fit
-              highlight-current-row
-              @filter-change="filterHandle"
-            >
-              <el-table-column label="时间">
-                <template slot-scope="scope">
-                  {{ scope.row.time || '-' }}
-                </template>
-              </el-table-column>
-
-              <el-table-column label="类型" :filters="stateList" column-key="status"  >
-                <template slot-scope="scope">
-                  {{ scope.row.type || '-'}}
-                </template>
-              </el-table-column>
-
-              <el-table-column label="金额">
-                <template slot-scope="scope">
-                  {{ scope.row.amount || '-' }}
-                </template>
-              </el-table-column>
-
-              <el-table-column label="关联订单">
-                <template slot-scope="scope">
-                  {{ scope.row.order || '-' }}
-                </template>
-              </el-table-column>
-
-              <el-table-column label="说明">
-                <template slot-scope="scope">
-                  {{ scope.row.description || '-' }}
-                </template>
-              </el-table-column>
-            </el-table>
-
-            <el-pagination style="float: right; margin-top: 30px;" :current-page="listQuery.index" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.length" :total="total"
-              layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
-              @current-change="pageCurrentChangeHandle">
-            </el-pagination>
-          </div>
-          <div v-if="!isList" style="margin-top: 30px; width: 70%;">
-            <div id="leaseChart" ref="leaseChart" :style="{width: '100%', height: '400px'}"></div>
-          </div>
-          <div style="margin: 30px 0 0 60px; width: 30%;">
+        <div style="display: flex; width: 50%;">
+          <div style="margin: 30px 0 0 60px; width: 100%; ">
             <div style="color: #A4A4A4;">
-              当前信息
+              收入汇总信息
             </div>
             <div style="height: 1px;width: 80%;background: #A4A4A4;"></div>
             <div style="display: flex;margin-top: 20px;">
-              <div style="font-size: 14px; color: #1C1C1C; width: 100px;">当前租期：</div>
-              <div style="width: 50%;text-align: right; font-size: 14px; color: #A4A4A4;">{{indexData.time || '-'}}</div>
+              <div style="font-size: 14px; color: #1C1C1C; width: 100px;">净租金：</div>
+              <div style="width: 50%;text-align: right; font-size: 14px; color: #A4A4A4;">{{indexData.netRental || 0}}</div>
             </div>
             <div style="display: flex;margin-top: 20px;">
-              <div style="font-size: 14px; color: #1C1C1C; width: 100px;">当前租金：</div>
+              <div style="font-size: 14px; color: #1C1C1C; width: 100px;">押金-收：</div>
               <div style="width: 50%;text-align: right; font-size: 14px; color: #A4A4A4;">{{indexData.rental || 0}}</div>
             </div>
             <div style="display: flex;margin-top: 20px;">
-              <div style="font-size: 14px; color: #1C1C1C; width: 100px;">当前压金：</div>
+              <div style="font-size: 14px; color: #1C1C1C; width: 100px;">丢失保障金：</div>
+              <div style="width: 50%;text-align: right; font-size: 14px; color: #A4A4A4;">{{indexData.cash || 0}}</div>
+            </div>
+            <div style="display: flex;margin-top: 20px;">
+              <div style="font-size: 14px; color: #1C1C1C; width: 100px;">处置收入：</div>
               <div style="width: 50%;text-align: right; font-size: 14px; color: #A4A4A4;">{{indexData.cash || 0}}</div>
             </div>
+            
+            <!-- <div style="margin-top: 40px; color: #fff; background: #58ACFA; width: 80px; height: 50px; line-height: 50px;text-align: center; border-radius: 6px;"  @click="clickHandle">{{isList?'图形展示':'列表展示'}}</div> -->
+          </div>
+          <div style="width: 100%; ">
             <div style="margin-top: 30px; color: #A4A4A4;">
-              汇总信息
+              支出汇总信息
             </div>
             <div style="height: 1px;width: 80%;background: #A4A4A4;"></div>
             <div style="display: flex;margin-top: 20px;">
-              <div style="font-size: 14px; color: #1C1C1C; width: 100px;">租金收入：</div>
+              <div style="font-size: 14px; color: #1C1C1C; width: 100px;">运维支出：</div>
               <div style="width: 50%;text-align: right; font-size: 14px; color: #A4A4A4;">{{indexData.income || 0}}</div>
             </div>
             <div style="display: flex;margin-top: 20px;">
-              <div style="font-size: 14px; color: #1C1C1C; width: 100px;">押金收取：</div>
+              <div style="font-size: 14px; color: #1C1C1C; width: 100px;">活动支出：</div>
               <div style="width: 50%;text-align: right; font-size: 14px; color: #A4A4A4;">{{indexData.cashIn || 0}}</div>
             </div>
             <div style="display: flex;margin-top: 20px;">
-              <div style="font-size: 14px; color: #1C1C1C; width: 100px;">丢失保障金：</div>
+              <div style="font-size: 14px; color: #1C1C1C; width: 100px;">赔偿支出：</div>
               <div style="width: 50%;text-align: right; font-size: 14px; color: #A4A4A4;">{{indexData.securityCash || 0}}</div>
             </div>
             <div style="display: flex;margin-top: 20px;">
-              <div style="font-size: 14px; color: #1C1C1C; width: 100px;">净租金：</div>
+              <div style="font-size: 14px; color: #1C1C1C; width: 100px;">运营支出：</div>
+              <div style="width: 50%;text-align: right; font-size: 14px; color: #A4A4A4;">{{indexData.netRental || 0}}</div>
+            </div>
+            <div style="display: flex;margin-top: 20px;">
+              <div style="font-size: 14px; color: #1C1C1C; width: 100px;">金融支出：</div>
               <div style="width: 50%;text-align: right; font-size: 14px; color: #A4A4A4;">{{indexData.netRental || 0}}</div>
             </div>
-            <div style="margin-top: 40px; color: #fff; background: #58ACFA; width: 80px; height: 50px; line-height: 50px;text-align: center; border-radius: 6px;"  @click="clickHandle">{{isList?'图形展示':'列表展示'}}</div>
           </div>
         </div>
+        <div style="width: 30%; display: flex; margin-top: 40px;padding-left: 60px;">
+          <div style="font-size: 14px; font-weight: 600; color: #1C1C1C; width: 100px;">净收入：</div>
+          <div style="width: 50%;text-align: right; font-size: 14px; color: #A4A4A4;">{{indexData.netIncome || 0}}</div>
+        </div>
       </el-tab-pane>
       <el-tab-pane label="收益预估" name="tenth">
         <div style="display: flex;">
@@ -843,7 +808,7 @@
             </el-pagination>
           </div>
           <div v-if="!isList" style="margin-top: 30px; width: 70%;">
-            <div id="leaseChart" ref="leaseChart" :style="{width: '100%', height: '400px'}"></div>
+            <div id="ygChart" ref="ygChart" :style="{width: '100%', height: '400px'}"></div>
           </div>
           <div style="margin: 30px 0 0 60px;">
             <div style="margin-top: 40px; color: #fff; background: #58ACFA; width: 80px; height: 50px; line-height: 50px;text-align: center; border-radius: 6px;"  @click="clickHandle">{{isList?'图形展示':'列表展示'}}</div>
@@ -990,21 +955,6 @@ export default {
 
       // })
     },
-    //获取列表数据
-    // getDataList() {
-    //   this.loading = true
-    //   this.data = null
-    //   getList(this.listQuery).then(res => {
-    //     if(res.code === 200) {
-    //       this.data = res.data.records || []
-    //       this.total = res.total
-    //       this.loading = false
-    //     } else {
-    //       this.loading = false
-    //       return this.$message.error(res.message)
-    //     }
-    //   })
-    // },
     //重置
     resetForm() {
       let tableOrder = 0
@@ -1068,7 +1018,7 @@ export default {
           let { orderStartTime = null, orderEndTime = null, time = null, rental = null, cash = null, income = null, cashIn = null, securityCash = null, netRental= null,
             omTotalCost = null, omPlatformCost = null, omFaultCost = null, comTotalCost = null, saleTotalCost = null, opStorageState = null, opCurrentCash = null, opTransportState = null,
             opTotalCost = null, opStorageCost = null, opTransportCost = null, opSaleCost = null, opPlatformCost = null, fiResidueCost = null, fiPaidCost = null, handleProfit = null,
-            otherTotalIncome = null, otherTotalCost = null } = res.data
+            otherTotalIncome = null, otherTotalCost = null, netIncome = null } = res.data
           this.indexData = {
             orderStartTime,
             orderEndTime,
@@ -1097,6 +1047,7 @@ export default {
             handleProfit,
             otherTotalCost,
             otherTotalIncome,
+            netIncome
           }
           this.loading = false
         } else {
@@ -1127,7 +1078,24 @@ export default {
     clickHandle() {
       this.isList = !this.isList
       if(!this.isList) {
-        this.drawLine()
+        if(this.activeName === 'first') {
+          this.drawLine()
+        }else if (this.activeName === 'second') {
+          this.drawOmpLine()
+        } else if(this.activeName === 'third') {
+          this.drawPcLine()
+        } else if(this.activeName === 'fourth') {
+          this.drawYxLine()
+        } else if(this.activeName === 'fifth') {
+          this.drawOpLine()
+        } else if(this.activeName === 'sixth') {
+        } else if(this.activeName === 'seventh') {
+        } else if(this.activeName === 'eighth') {
+          this.drawOtherLine()
+        } else if(this.activeName === 'ninth') {
+        } else if(this.activeName === 'tenth') {
+          this.drawYgLine()
+        }
       }
     },
     // 分页, 每页条数
@@ -1142,45 +1110,260 @@ export default {
       this.getDataList()
     },
     //初始化折线图
+    drawYgLine() {
+      // 基于准备好的dom，初始化echarts实例
+      this.$nextTick(() => {
+        let ygChart = echarts.init(this.$refs.ygChart)
+        let k = 0
+        let dataList = []
+        ygChart.setOption({
+          title: { text: '【收益预估】' },
+          tooltip: {   //鼠标悬浮框的提示文字
+            trigger: 'axis'
+          },
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+          },
+          dataZoom: [
+            {
+              type: 'slider',
+              start: 0,
+              end: 100
+            },
+            {
+              type: 'inside',
+              start: 0,
+              end: 100
+            }
+          ],
+          xAxis: {
+            data: []
+          },
+          yAxis: {type: 'value'},
+          series: []
+        })
+        getProfitInfoFigure({sn: this.listQuery.sn, timeStart: this.listQuery.timeStart, timeEnd: this.listQuery.timeEnd, tableOrder: this.listQuery.tableOrder}).then(res => {
+          if(res.code === 200) {
+            if(res.data.dataList.length > 0) {
+              let leng = res.data.legendList
+              res.data.dataList.forEach(element => {
+                let series = {
+                  name: leng[k],
+                  type: 'line',
+                  data: element,
+                  smooth: true,
+                }
+                dataList.push(series)
+                k++
+              });
+              console.log(dataList, 'dataList');
+              ygChart.setOption({
+                title: { 
+                  text: '【收益预估】',
+                  textStyle:{
+                    color:'#0DB9F2',        //颜色
+                    fontStyle:'normal',     //风格
+                    fontWeight:'normal',    //粗细
+                    fontFamily:'Microsoft yahei',   //字体
+                    fontSize:10,     //大小
+                    align:'center'   //水平对齐
+                  },
+                },
+                tooltip: {   //鼠标悬浮框的提示文字
+                    trigger: 'axis'
+                  },
+                legend: {
+                  data: res.data.legendList,
+                  textStyle: { //图例文字的样式
+                    color: '#000',
+                    fontSize: 10
+                  },
+                },
+                dataZoom: [
+                  {
+                    type: 'slider',
+                    start: 0,
+                    end: 100
+                  },
+                  {
+                    type: 'inside',
+                    start: 0,
+                    end: 100
+                  }
+                ],
+                xAxis: {
+                  data: res.data.timeList
+                },
+                yAxis: {},
+                
+                series: dataList
+              });
+            } else {
+              this.$nextTick(() => {
+                const dom = this.$refs.ygChart
+                dom.innerHTML= '<div id="BugAmountBar-nodata" style="text-align: center; font-size: 13px;color: #A4A4A4;line-height: 500px">暂无数据</div>'
+                dom.removeAttribute('_echarts_instance_')
+              })
+            }
+          }
+        })
+			});
+    },
+    drawOpLine() {
+      // 基于准备好的dom，初始化echarts实例
+      this.$nextTick(() => {
+        let opChart = echarts.init(this.$refs.opChart)
+        let k = 0
+        let dataList = []
+        opChart.setOption({
+          title: { text: '【运营信息】' },
+          tooltip: {   //鼠标悬浮框的提示文字
+            trigger: 'axis'
+          },
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+          },
+          dataZoom: [
+            {
+              type: 'slider',
+              start: 0,
+              end: 100
+            },
+            {
+              type: 'inside',
+              start: 0,
+              end: 100
+            }
+          ],
+          xAxis: {
+            data: []
+          },
+          yAxis: {type: 'value'},
+          series: []
+        })
+        getProfitInfoFigure({sn: this.listQuery.sn, timeStart: this.listQuery.timeStart, timeEnd: this.listQuery.timeEnd, tableOrder: this.listQuery.tableOrder}).then(res => {
+          if(res.code === 200) {
+            if(res.data.dataList.length > 0) {
+              let leng = res.data.legendList
+              res.data.dataList.forEach(element => {
+                let series = {
+                  name: leng[k],
+                  type: 'line',
+                  data: element,
+                  smooth: true,
+                }
+                dataList.push(series)
+                k++
+              });
+              console.log(dataList, 'dataList');
+              opChart.setOption({
+                title: { 
+                  text: '【运营信息】',
+                  textStyle:{
+                    color:'#0DB9F2',        //颜色
+                    fontStyle:'normal',     //风格
+                    fontWeight:'normal',    //粗细
+                    fontFamily:'Microsoft yahei',   //字体
+                    fontSize:10,     //大小
+                    align:'center'   //水平对齐
+                  },
+                },
+                tooltip: {   //鼠标悬浮框的提示文字
+                    trigger: 'axis'
+                  },
+                legend: {
+                  data: res.data.legendList,
+                  textStyle: { //图例文字的样式
+                    color: '#000',
+                    fontSize: 10
+                  },
+                },
+                dataZoom: [
+                  {
+                    type: 'slider',
+                    start: 0,
+                    end: 100
+                  },
+                  {
+                    type: 'inside',
+                    start: 0,
+                    end: 100
+                  }
+                ],
+                xAxis: {
+                  data: res.data.timeList
+                },
+                yAxis: {},
+                
+                series: dataList
+              });
+            } else {
+              this.$nextTick(() => {
+                const dom = this.$refs.opChart
+                dom.innerHTML= '<div id="BugAmountBar-nodata" style="text-align: center; font-size: 13px;color: #A4A4A4;line-height: 500px">暂无数据</div>'
+                dom.removeAttribute('_echarts_instance_')
+              })
+            }
+          }
+        })
+			});
+    },
     drawLine(){
       // 基于准备好的dom，初始化echarts实例
       this.$nextTick(() => {
         let leaseChart = echarts.init(this.$refs.leaseChart)
-        let k = 1
-        let legends = []
+        let k = 0
         let dataList = []
         leaseChart.setOption({
-        title: { text: '【租赁信息】' },
-        tooltip: {   //鼠标悬浮框的提示文字
-          trigger: 'axis'
-        },
-        grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
-          containLabel: true
-        },
-        dataZoom: [
-          {
-            type: 'slider',
-            start: 0,
-            end: 100
+          title: { text: '【租赁信息】' },
+          tooltip: {   //鼠标悬浮框的提示文字
+            trigger: 'axis'
           },
-          {
-            type: 'inside',
-            start: 0,
-            end: 100
-          }
-        ],
-        xAxis: {
-          data: []
-        },
-        yAxis: {type: 'value'},
-        series: []
-      })
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+          },
+          dataZoom: [
+            {
+              type: 'slider',
+              start: 0,
+              end: 100
+            },
+            {
+              type: 'inside',
+              start: 0,
+              end: 100
+            }
+          ],
+          xAxis: {
+            data: []
+          },
+          yAxis: {type: 'value'},
+          series: []
+        })
         getProfitInfoFigure({sn: this.listQuery.sn, timeStart: this.listQuery.timeStart, timeEnd: this.listQuery.timeEnd, tableOrder: this.listQuery.tableOrder}).then(res => {
           if(res.code === 200) {
-            if(res.data.length > 0) {
+            if(res.data.dataList.length > 0) {
+              let leng = res.data.legendList
+              res.data.dataList.forEach(element => {
+                let series = {
+                  name: leng[k],
+                  type: 'line',
+                  data: element,
+                  smooth: true,
+                }
+                dataList.push(series)
+                k++
+              });
+              console.log(dataList, 'dataList');
               leaseChart.setOption({
                 title: { 
                   text: '【租赁信息】',
@@ -1197,10 +1380,7 @@ export default {
                     trigger: 'axis'
                   },
                 legend: {
-                  data: legends,
-                  orient: 'vertical',
-                  x: 'right',
-                  y: 'bottom',
+                  data: res.data.legendList,
                   textStyle: { //图例文字的样式
                     color: '#000',
                     fontSize: 10
@@ -1219,7 +1399,7 @@ export default {
                   }
                 ],
                 xAxis: {
-                  data: res.data.voltoutlierTime
+                  data: res.data.timeList
                 },
                 yAxis: {},
                 
@@ -1235,7 +1415,413 @@ export default {
           }
         })
 			});
-    }
+    },
+    drawOmpLine() {
+      // 基于准备好的dom，初始化echarts实例
+      this.$nextTick(() => {
+        let ompChart = echarts.init(this.$refs.ompChart)
+        let k = 0
+        let dataList = []
+        ompChart.setOption({
+          title: { text: '【运维信息】' },
+          tooltip: {   //鼠标悬浮框的提示文字
+            trigger: 'axis'
+          },
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+          },
+          dataZoom: [
+            {
+              type: 'slider',
+              start: 0,
+              end: 100
+            },
+            {
+              type: 'inside',
+              start: 0,
+              end: 100
+            }
+          ],
+          xAxis: {
+            data: []
+          },
+          yAxis: {type: 'value'},
+          series: []
+        })
+        getProfitInfoFigure({sn: this.listQuery.sn, timeStart: this.listQuery.timeStart, timeEnd: this.listQuery.timeEnd, tableOrder: this.listQuery.tableOrder}).then(res => {
+          if(res.code === 200) {
+            if(res.data.dataList.length > 0) {
+              let leng = res.data.legendList
+              res.data.dataList.forEach(element => {
+                let series = {
+                  name: leng[k],
+                  type: 'line',
+                  data: element,
+                  smooth: true,
+                }
+                dataList.push(series)
+                k++
+              });
+              console.log(dataList, 'dataList');
+              ompChart.setOption({
+                title: { 
+                  text: '【运维信息】',
+                  textStyle:{
+                    color:'#0DB9F2',        //颜色
+                    fontStyle:'normal',     //风格
+                    fontWeight:'normal',    //粗细
+                    fontFamily:'Microsoft yahei',   //字体
+                    fontSize:10,     //大小
+                    align:'center'   //水平对齐
+                  },
+                },
+                tooltip: {   //鼠标悬浮框的提示文字
+                    trigger: 'axis'
+                  },
+                legend: {
+                  data: res.data.legendList,
+                  textStyle: { //图例文字的样式
+                    color: '#000',
+                    fontSize: 10
+                  },
+                },
+                dataZoom: [
+                  {
+                    type: 'slider',
+                    start: 0,
+                    end: 100
+                  },
+                  {
+                    type: 'inside',
+                    start: 0,
+                    end: 100
+                  }
+                ],
+                xAxis: {
+                  data: res.data.timeList
+                },
+                yAxis: {},
+                
+                series: dataList
+              });
+            } else {
+              this.$nextTick(() => {
+                const dom = this.$refs.ompChart
+                dom.innerHTML= '<div id="BugAmountBar-nodata" style="text-align: center; font-size: 13px;color: #A4A4A4;line-height: 500px">暂无数据</div>'
+                dom.removeAttribute('_echarts_instance_')
+              })
+            }
+          }
+        })
+			});
+    },
+    drawPcLine() {
+      // 基于准备好的dom，初始化echarts实例
+      this.$nextTick(() => {
+        let pcChart = echarts.init(this.$refs.pcChart)
+        let k = 0
+        let dataList = []
+        pcChart.setOption({
+          title: { text: '【赔偿信息】' },
+          tooltip: {   //鼠标悬浮框的提示文字
+            trigger: 'axis'
+          },
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+          },
+          dataZoom: [
+            {
+              type: 'slider',
+              start: 0,
+              end: 100
+            },
+            {
+              type: 'inside',
+              start: 0,
+              end: 100
+            }
+          ],
+          xAxis: {
+            data: []
+          },
+          yAxis: {type: 'value'},
+          series: []
+        })
+        getProfitInfoFigure({sn: this.listQuery.sn, timeStart: this.listQuery.timeStart, timeEnd: this.listQuery.timeEnd, tableOrder: this.listQuery.tableOrder}).then(res => {
+          if(res.code === 200) {
+            if(res.data.dataList.length > 0) {
+              let leng = res.data.legendList
+              res.data.dataList.forEach(element => {
+                let series = {
+                  name: leng[k],
+                  type: 'line',
+                  data: element,
+                  smooth: true,
+                }
+                dataList.push(series)
+                k++
+              });
+              console.log(dataList, 'dataList');
+              pcChart.setOption({
+                title: { 
+                  text: '【赔偿信息】',
+                  textStyle:{
+                    color:'#0DB9F2',        //颜色
+                    fontStyle:'normal',     //风格
+                    fontWeight:'normal',    //粗细
+                    fontFamily:'Microsoft yahei',   //字体
+                    fontSize:10,     //大小
+                    align:'center'   //水平对齐
+                  },
+                },
+                tooltip: {   //鼠标悬浮框的提示文字
+                    trigger: 'axis'
+                  },
+                legend: {
+                  data: res.data.legendList,
+                  textStyle: { //图例文字的样式
+                    color: '#000',
+                    fontSize: 10
+                  },
+                },
+                dataZoom: [
+                  {
+                    type: 'slider',
+                    start: 0,
+                    end: 100
+                  },
+                  {
+                    type: 'inside',
+                    start: 0,
+                    end: 100
+                  }
+                ],
+                xAxis: {
+                  data: res.data.timeList
+                },
+                yAxis: {},
+                
+                series: dataList
+              });
+            } else {
+              this.$nextTick(() => {
+                const dom = this.$refs.pcChart
+                dom.innerHTML= '<div id="BugAmountBar-nodata" style="text-align: center; font-size: 13px;color: #A4A4A4;line-height: 500px">暂无数据</div>'
+                dom.removeAttribute('_echarts_instance_')
+              })
+            }
+          }
+        })
+			});
+    },
+    drawYxLine() {
+      // 基于准备好的dom，初始化echarts实例
+      this.$nextTick(() => {
+        let yxChart = echarts.init(this.$refs.yxChart)
+        let k = 0
+        let dataList = []
+        yxChart.setOption({
+          title: { text: '【营销信息】' },
+          tooltip: {   //鼠标悬浮框的提示文字
+            trigger: 'axis'
+          },
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+          },
+          dataZoom: [
+            {
+              type: 'slider',
+              start: 0,
+              end: 100
+            },
+            {
+              type: 'inside',
+              start: 0,
+              end: 100
+            }
+          ],
+          xAxis: {
+            data: []
+          },
+          yAxis: {type: 'value'},
+          series: []
+        })
+        getProfitInfoFigure({sn: this.listQuery.sn, timeStart: this.listQuery.timeStart, timeEnd: this.listQuery.timeEnd, tableOrder: this.listQuery.tableOrder}).then(res => {
+          if(res.code === 200) {
+            if(res.data.dataList.length > 0) {
+              let leng = res.data.legendList
+              res.data.dataList.forEach(element => {
+                let series = {
+                  name: leng[k],
+                  type: 'line',
+                  data: element,
+                  smooth: true,
+                }
+                dataList.push(series)
+                k++
+              });
+              yxChart.setOption({
+                title: { 
+                  text: '【营销信息】',
+                  textStyle:{
+                    color:'#0DB9F2',        //颜色
+                    fontStyle:'normal',     //风格
+                    fontWeight:'normal',    //粗细
+                    fontFamily:'Microsoft yahei',   //字体
+                    fontSize:10,     //大小
+                    align:'center'   //水平对齐
+                  },
+                },
+                tooltip: {   //鼠标悬浮框的提示文字
+                    trigger: 'axis'
+                  },
+                legend: {
+                  data: res.data.legendList,
+                  textStyle: { //图例文字的样式
+                    color: '#000',
+                    fontSize: 10
+                  },
+                },
+                dataZoom: [
+                  {
+                    type: 'slider',
+                    start: 0,
+                    end: 100
+                  },
+                  {
+                    type: 'inside',
+                    start: 0,
+                    end: 100
+                  }
+                ],
+                xAxis: {
+                  data: res.data.timeList
+                },
+                yAxis: {},
+                
+                series: dataList
+              });
+            } else {
+              this.$nextTick(() => {
+                const dom = this.$refs.yxChart
+                dom.innerHTML= '<div id="BugAmountBar-nodata" style="text-align: center; font-size: 13px;color: #A4A4A4;line-height: 500px">暂无数据</div>'
+                dom.removeAttribute('_echarts_instance_')
+              })
+            }
+          }
+        })
+			});
+    },
+    drawOtherLine() {
+      // 基于准备好的dom，初始化echarts实例
+      this.$nextTick(() => {
+        let otherChart = echarts.init(this.$refs.otherChart)
+        let k = 0
+        let dataList = []
+        otherChart.setOption({
+          title: { text: '【其他信息】' },
+          tooltip: {   //鼠标悬浮框的提示文字
+            trigger: 'axis'
+          },
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+          },
+          dataZoom: [
+            {
+              type: 'slider',
+              start: 0,
+              end: 100
+            },
+            {
+              type: 'inside',
+              start: 0,
+              end: 100
+            }
+          ],
+          xAxis: {
+            data: []
+          },
+          yAxis: {type: 'value'},
+          series: []
+        })
+        getProfitInfoFigure({sn: this.listQuery.sn, timeStart: this.listQuery.timeStart, timeEnd: this.listQuery.timeEnd, tableOrder: this.listQuery.tableOrder}).then(res => {
+          if(res.code === 200) {
+            if(res.data.dataList.length > 0) {
+              let leng = res.data.legendList
+              res.data.dataList.forEach(element => {
+                let series = {
+                  name: leng[k],
+                  type: 'line',
+                  data: element,
+                  smooth: true,
+                }
+                dataList.push(series)
+                k++
+              });
+              otherChart.setOption({
+                title: { 
+                  text: '【其他信息】',
+                  textStyle:{
+                    color:'#0DB9F2',        //颜色
+                    fontStyle:'normal',     //风格
+                    fontWeight:'normal',    //粗细
+                    fontFamily:'Microsoft yahei',   //字体
+                    fontSize:10,     //大小
+                    align:'center'   //水平对齐
+                  },
+                },
+                tooltip: {   //鼠标悬浮框的提示文字
+                    trigger: 'axis'
+                  },
+                legend: {
+                  data: res.data.legendList,
+                  textStyle: { //图例文字的样式
+                    color: '#000',
+                    fontSize: 10
+                  },
+                },
+                dataZoom: [
+                  {
+                    type: 'slider',
+                    start: 0,
+                    end: 100
+                  },
+                  {
+                    type: 'inside',
+                    start: 0,
+                    end: 100
+                  }
+                ],
+                xAxis: {
+                  data: res.data.timeList
+                },
+                yAxis: {},
+                
+                series: dataList
+              });
+            } else {
+              this.$nextTick(() => {
+                const dom = this.$refs.otherChart
+                dom.innerHTML= '<div id="BugAmountBar-nodata" style="text-align: center; font-size: 13px;color: #A4A4A4;line-height: 500px">暂无数据</div>'
+                dom.removeAttribute('_echarts_instance_')
+              })
+            }
+          }
+        })
+			});
+    },
   }
 }
 </script>

src/views/login/index.vue

@@ -110,7 +110,6 @@ export default {
           this.loading = true
           this.$store.dispatch('user/login', this.loginForm).then(() => {
             localStorage.setItem('userName', this.loginForm.username)
-            debugger
             this.$router.push({ path: this.redirect || '/' })
             this.loading = false
           }).catch(() => {

vue.config.js

@@ -3,7 +3,7 @@ const path = require('path')
 const defaultSettings = require('./src/settings.js')
 
 function resolve(dir) {
-  return path.join(__dirname, dir)
+    return path.join(__dirname, dir)
 }
 
 const name = defaultSettings.title || 'vue Admin Template' // page title
@@ -17,117 +17,116 @@ const port = process.env.port || process.env.npm_config_port || 9528 // dev port
 
 // All configuration item explanations can be find in https://cli.vuejs.org/config/
 module.exports = {
-  /**
-   * You will need to set publicPath if you plan to deploy your site under a sub path,
-   * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
-   * then publicPath should be set to "/bar/".
-   * In most cases please use '/' !!!
-   * Detail: https://cli.vuejs.org/config/#publicpath
-   */
-  publicPath: '/',
-  outputDir: 'dist',
-  assetsDir: 'static',
-  lintOnSave: false,
-  productionSourceMap: false,
-  devServer: {
-    port: port,
-    open: true,
-    overlay: {
-      warnings: false,
-      errors: true
+    /**
+     * You will need to set publicPath if you plan to deploy your site under a sub path,
+     * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
+     * then publicPath should be set to "/bar/".
+     * In most cases please use '/' !!!
+     * Detail: https://cli.vuejs.org/config/#publicpath
+     */
+    publicPath: '/',
+    outputDir: 'dist',
+    assetsDir: 'static',
+    lintOnSave: false,
+    productionSourceMap: false,
+    devServer: {
+        port: port,
+        open: true,
+        overlay: {
+            warnings: false,
+            errors: true
+        },
+        proxy: {
+            // change xxx-api/login => mock/login
+            // detail: https://cli.vuejs.org/config/#devserver-proxy
+            [process.env.VUE_APP_BASE_API]: {
+                // target: `http://47.111.243.220:8182`,
+                target: `http://192.168.0.113:8082`,
+                changeOrigin: true,
+                pathRewrite: {
+                    ['^' + process.env.VUE_APP_BASE_API]: ''
+                }
+            }
+        }
     },
-    proxy: {
-      // change xxx-api/login => mock/login
-      // detail: https://cli.vuejs.org/config/#devserver-proxy
-      [process.env.VUE_APP_BASE_API]: {
-        target: `http://47.111.243.220:8182`,
-        changeOrigin: true,
-        pathRewrite: {
-          ['^' + process.env.VUE_APP_BASE_API]: ''
+    configureWebpack: {
+        // provide the app's title in webpack's name field, so that
+        // it can be accessed in index.html to inject the correct title.
+        name: name,
+        resolve: {
+            alias: {
+                '@': resolve('src')
+            }
         }
-      }
-    }
-  },
-  configureWebpack: {
-    // provide the app's title in webpack's name field, so that
-    // it can be accessed in index.html to inject the correct title.
-    name: name,
-    resolve: {
-      alias: {
-        '@': resolve('src')
-      }
-    }
-  },
-  chainWebpack(config) {
-    // it can improve the speed of the first screen, it is recommended to turn on preload
-    config.plugin('preload').tap(() => [
-      {
-        rel: 'preload',
-        // to ignore runtime.js
-        // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
-        fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
-        include: 'initial'
-      }
-    ])
-
-    // when there are many pages, it will cause too many meaningless requests
-    config.plugins.delete('prefetch')
+    },
+    chainWebpack(config) {
+        // it can improve the speed of the first screen, it is recommended to turn on preload
+        config.plugin('preload').tap(() => [{
+            rel: 'preload',
+            // to ignore runtime.js
+            // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
+            fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
+            include: 'initial'
+        }])
 
-    // set svg-sprite-loader
-    config.module
-      .rule('svg')
-      .exclude.add(resolve('src/icons'))
-      .end()
-    config.module
-      .rule('icons')
-      .test(/\.svg$/)
-      .include.add(resolve('src/icons'))
-      .end()
-      .use('svg-sprite-loader')
-      .loader('svg-sprite-loader')
-      .options({
-        symbolId: 'icon-[name]'
-      })
-      .end()
+        // when there are many pages, it will cause too many meaningless requests
+        config.plugins.delete('prefetch')
 
-    config
-      .when(process.env.NODE_ENV !== 'development',
-        config => {
-          config
-            .plugin('ScriptExtHtmlWebpackPlugin')
-            .after('html')
-            .use('script-ext-html-webpack-plugin', [{
-            // `runtime` must same as runtimeChunk name. default is `runtime`
-              inline: /runtime\..*\.js$/
-            }])
+        // set svg-sprite-loader
+        config.module
+            .rule('svg')
+            .exclude.add(resolve('src/icons'))
             .end()
-          config
-            .optimization.splitChunks({
-              chunks: 'all',
-              cacheGroups: {
-                libs: {
-                  name: 'chunk-libs',
-                  test: /[\\/]node_modules[\\/]/,
-                  priority: 10,
-                  chunks: 'initial' // only package third parties that are initially dependent
-                },
-                elementUI: {
-                  name: 'chunk-elementUI', // split elementUI into a single package
-                  priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
-                  test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
-                },
-                commons: {
-                  name: 'chunk-commons',
-                  test: resolve('src/components'), // can customize your rules
-                  minChunks: 3, //  minimum common number
-                  priority: 5,
-                  reuseExistingChunk: true
-                }
-              }
+        config.module
+            .rule('icons')
+            .test(/\.svg$/)
+            .include.add(resolve('src/icons'))
+            .end()
+            .use('svg-sprite-loader')
+            .loader('svg-sprite-loader')
+            .options({
+                symbolId: 'icon-[name]'
             })
-          // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
-          config.optimization.runtimeChunk('single')
-        }
-      )
-  }
-}
+            .end()
+
+        config
+            .when(process.env.NODE_ENV !== 'development',
+                config => {
+                    config
+                        .plugin('ScriptExtHtmlWebpackPlugin')
+                        .after('html')
+                        .use('script-ext-html-webpack-plugin', [{
+                            // `runtime` must same as runtimeChunk name. default is `runtime`
+                            inline: /runtime\..*\.js$/
+                        }])
+                        .end()
+                    config
+                        .optimization.splitChunks({
+                            chunks: 'all',
+                            cacheGroups: {
+                                libs: {
+                                    name: 'chunk-libs',
+                                    test: /[\\/]node_modules[\\/]/,
+                                    priority: 10,
+                                    chunks: 'initial' // only package third parties that are initially dependent
+                                },
+                                elementUI: {
+                                    name: 'chunk-elementUI', // split elementUI into a single package
+                                    priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
+                                    test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
+                                },
+                                commons: {
+                                    name: 'chunk-commons',
+                                    test: resolve('src/components'), // can customize your rules
+                                    minChunks: 3, //  minimum common number
+                                    priority: 5,
+                                    reuseExistingChunk: true
+                                }
+                            }
+                        })
+                        // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
+                    config.optimization.runtimeChunk('single')
+                }
+            )
+    }
+}