错误提示语

src/components/charts/lines/index.html

@@ -0,0 +1 @@
+<div :id="id" class="chart"></div>

src/components/charts/lines/index.js

@@ -0,0 +1,195 @@
+import * as echarts from 'echarts';
+import elementResizeDetectorMaker from 'element-resize-detector';
+export default {
+  props: {
+    id: {
+      type: String,
+      default: 'lines'
+    },
+    data: {
+      type: Array,
+      default: function () {
+        return [
+          {
+            name: '1月',
+            value: '10'
+          },
+          {
+            name: '2月',
+            value: '19'
+          }
+        ];
+      }
+    },
+    color: {
+      type: Array,
+      default: function () {
+        return ['rgba(134, 91, 252, 1)', 'rgba(26, 106, 226, 0.5)', 'rgba(26, 106, 226, 0)']
+      }
+    },
+    areaStyle: {
+      type: Array,
+      default: function () {
+        return ['rgba(134, 91, 252, 1)', 'rgba(26, 106, 226, 0.5)', 'rgba(26, 106, 226, 0)']
+      }
+    }
+  },
+  data () {
+    return {
+      chart: null
+    };
+  },
+  mounted () {
+    this.initChart();
+  },
+  computed: {
+  },
+  methods: {
+    // 设置监听器 页面尺寸变化重新绘制图表
+    initResizeCallBack () {
+      const erd = elementResizeDetectorMaker();
+      erd.listenTo(document.getElementById(this.id), () => {
+        this.$nextTick(() => {
+          this.chart.resize();
+        });
+      });
+    },
+    initChart () {
+      this.chart = echarts.init(document.getElementById(this.id));
+      this.chartSetOption();
+    },
+    chartSetOption () {
+
+      let xAxisData = [];
+      let data = [];
+      this.data.forEach(item => {
+        xAxisData.push(item.name)
+        data.push(item.value)
+      });
+      const option = {
+        grid: {
+          left: "5%",
+          right: "10%",
+          top: "15%",
+          bottom: "10%",
+          containLabel: true,
+        },
+        tooltip: {
+          show: true,
+          trigger: "item",
+        },
+        legend: {
+          show: false
+        },
+        color: {
+          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+            {
+              offset: 1,
+              color: this.color[0],
+            },
+            {
+              offset: 0.5,
+              color: this.color[1],
+            },
+            {
+              offset: 0,
+              color: this.color[2],
+            },
+          ]),
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            axisLabel: {
+              color: 'rgba(185, 211, 235, 1)',
+            },
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              show: false
+            },
+            data: xAxisData
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位：万元",
+            nameTextStyle: {
+              color: 'rgba(185, 211, 235, 1)'
+            },
+            axisLabel: {
+              formatter: "{value}",
+              textStyle: {
+                color: "rgba(185, 211, 235, 1)",
+              },
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#27b4c2",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: "#11366e",
+              },
+            },
+          }
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            smooth: true,
+            symbolSize: 12,
+            itemStyle: {
+              normal: {
+                color: this.color[0],
+                lineStyle: {
+                  color: this.color[0],
+                  width: 1,
+                },
+                areaStyle: {
+                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                    {
+                      offset: 1,
+                      color: this.areaStyle[0],
+                    },
+                    {
+                      offset: 0.5,
+                      color: this.areaStyle[1],
+                    },
+                    {
+                      offset: 0,
+                      color: this.areaStyle[2],
+                    },
+                  ]),
+                },
+              },
+            },
+            markPoint: {
+              itemStyle: {
+                normal: {
+                  color: "red",
+                },
+              },
+            },
+            data: data
+          }
+        ],
+      };;
+      this.chart.setOption(option);
+      this.initResizeCallBack();
+
+    }
+  }
+};

src/components/charts/lines/index.scss

@@ -0,0 +1,6 @@
+.chart {
+  overflow: visible;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+}

src/components/charts/lines/index.vue

@@ -0,0 +1,3 @@
+<template src='./index.html'/>
+<script lang='js' src='./index.js'></script>
+<style lang='scss' src='./index.scss' scoped></style>

src/utils/request.js

@@ -53,8 +53,8 @@ service.interceptors.response.use(res => {
   try {
     const code = res.data.code || 200;
     // 获取错误信息
-    // const msg = errorCode[code] || res.data.msg || errorCode['default']
-    const msg = errorCode[code]
+    const msg = errorCode[code] || res.data.msg || errorCode['default']
+    // const msg = errorCode[code]
     if (code === 401) {
       MessageBox.confirm('登录状态已过期，请重新登录', '系统提示', {
         confirmButtonText: '重新登录',

src/views/property/api/index.js

@@ -327,4 +327,17 @@ export function debtCategoryAnalysis (deptId, year) {
     method: 'get',
     params: query
   })
-}
+}
+
+// 资产一张图-债务预警-右中-债务分布
+export function debtDistribution (deptId, year) {
+  let query = {
+    deptId,
+    year
+  }
+  return request({
+    url: 'api/home/xixia/assetLiabilities/zwfb',
+    method: 'get',
+    params: query
+  })
+}

src/views/property/comps/left/middle/4/index.html

@@ -1,4 +1,23 @@
 
-<Pannel title="负债分布" height="305">
-  <BarSpecial id="other"></BarSpecial>
+<Pannel title="负债分布" height="305"
+v-loading="!isLoad"
+element-loading-text="拼命加载中"
+element-loading-spinner="el-icon-loading"
+element-loading-background="rgba(0, 0, 0, 0.1)"
+>
+  <div class="full">
+    <div class="top">
+      <el-dropdown class="right" @command="handleCommand">
+        <span class="el-dropdown-link">
+          {{currentselect}}<i class="el-icon-arrow-down el-icon--right"></i>
+        </span>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item v-for="item in dropdown" :command="item.name">{{item.name}}</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
+    <div class="buttom">
+      <BarSpecial v-if="isLoad" :data="data"></BarSpecial>
+    </div>
+  </div>
 </Pannel>

src/views/property/comps/left/middle/4/index.js

@@ -1,18 +1,90 @@
 import Pannel from '@/components/pannel/index.vue';
 import BarSpecial from '@/components/charts/bar-special/index.vue';
+import { distributionOfLiabilities } from '../../../../api/index.js';
+import { mapGetters } from 'vuex';
+
 export default {
   components: {
     BarSpecial,
     Pannel
   },
+  computed: {
+    ...mapGetters(['year', 'deptId'])
+  },
+  watch: {
+    year: {
+      handler () {
+        this.getData();
+      }
+    },
+    deptId: {
+      handler () {
+        this.getData();
+      }
+    }
+  },
   data () {
     return {
+      isLoad: false,
+      currentselect: '',
+      data: [],
+      dropdown: []
     };
   },
   created () {
+    this.getSelectData()
   },
   mounted () {
   },
   methods: {
+    getSelectData () {
+      if (this.year, this.deptId) {
+        distributionOfLiabilities(this.deptId, this.year).then(res => {
+          this.dropdown = res.data.map(item => {
+            return {
+              name: item.name
+            }
+          })
+          this.currentselect = this.dropdown[0].name
+          this.getData()
+        })
+      }
+    },
+    getData () {
+      if (this.year, this.deptId) {
+        this.total = 0
+        this.isLoad = false;
+        distributionOfLiabilities(this.deptId, this.year).then(res => {
+          res.data.forEach(item => {
+            if (item.name === this.currentselect) {
+              let data = [
+                {
+                  name: '资不抵债',
+                  value: item.zbdz
+                },
+                {
+                  name: '高债务率',
+                  value: item.gfzl
+                },
+                {
+                  name: '中债务率',
+                  value: item.zfzl
+                },
+                {
+                  name: '低债务率',
+                  value: item.dfzl
+                }
+              ]
+              this.data = data
+            }
+          })
+          this.isLoad = true;
+        })
+      }
+    },
+    handleCommand (item) {
+      this.currentselect = item;
+      this.getData()
+    }
   }
 };

src/views/property/comps/left/middle/4/index.scss

@@ -8,10 +8,24 @@
     display: flex !important;
     align-items: center !important;
     justify-content: flex-end;
+
+    .right {
+      width: 80px;
+      height: 30px;
+    }
   }
 
   .buttom {
     flex: 1;
     width: 100%;
   }
+}
+
+.el-dropdown-link {
+  cursor: pointer;
+  color: #409EFF;
+}
+
+.el-icon-arrow-down {
+  font-size: 12px;
 }

src/views/property/comps/right/middle/4/index.html

@@ -1,4 +1,23 @@
 
-<Pannel title="债务分布" height="305">
-  <BarSpecial></BarSpecial>
+<Pannel title="债务分布" height="305"
+v-loading="!isLoad"
+element-loading-text="拼命加载中"
+element-loading-spinner="el-icon-loading"
+element-loading-background="rgba(0, 0, 0, 0.1)"
+>
+<div class="full">
+  <div class="top">
+    <el-dropdown class="right" @command="handleCommand">
+      <span class="el-dropdown-link">
+        {{currentselect}}<i class="el-icon-arrow-down el-icon--right"></i>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="item in dropdown" :command="item.name">{{item.name}}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+  </div>
+  <div class="buttom">
+    <BarSpecial id="2dsad" v-if="isLoad" :data="data"></BarSpecial>
+  </div>
+</div>
 </Pannel>

src/views/property/comps/right/middle/4/index.js

@@ -1,16 +1,13 @@
 import Pannel from '@/components/pannel/index.vue';
 import BarSpecial from '@/components/charts/bar-special/index.vue';
+import { debtDistribution } from '../../../../api/index.js';
 import { mapGetters } from 'vuex';
-import { distributionOfLiabilities } from '../../../../api/index.js';
+
 export default {
   components: {
     BarSpecial,
     Pannel
   },
-  data () {
-    return {
-    };
-  },
   computed: {
     ...mapGetters(['year', 'deptId'])
   },
@@ -18,24 +15,76 @@ export default {
     year: {
       handler () {
         this.getData();
-      },
-      immediate: true, // 立即执行
+      }
     },
     deptId: {
       handler () {
         this.getData();
-      },
-      immediate: true, // 立即执行
+      }
     }
   },
+  data () {
+    return {
+      isLoad: false,
+      currentselect: '',
+      data: [],
+      dropdown: []
+    };
+  },
+  created () {
+    this.getSelectData()
+  },
+  mounted () {
+  },
   methods: {
+    getSelectData () {
+      if (this.year, this.deptId) {
+        debtDistribution(this.deptId, this.year).then(res => {
+          this.dropdown = res.data.map(item => {
+            return {
+              name: item.name
+            }
+          })
+          this.currentselect = this.dropdown[0].name
+          this.getData()
+        })
+      }
+    },
     getData () {
       if (this.year, this.deptId) {
+        this.total = 0
         this.isLoad = false;
-        distributionOfLiabilities(this.deptId, this.year).then(res => {
+        debtDistribution(this.deptId, this.year).then(res => {
+          res.data.forEach(item => {
+            if (item.name === this.currentselect) {
+              let data = [
+                {
+                  name: '资不抵债',
+                  value: item.zbdzw
+                },
+                {
+                  name: '高债务率',
+                  value: item.gzwl
+                },
+                {
+                  name: '中债务率',
+                  value: item.zzwl
+                },
+                {
+                  name: '低债务率',
+                  value: item.dzwl
+                }
+              ]
+              this.data = data
+            }
+          })
           this.isLoad = true;
         })
       }
     },
+    handleCommand (item) {
+      this.currentselect = item;
+      this.getData()
+    }
   }
 };

src/views/property/comps/right/middle/4/index.scss

@@ -8,10 +8,24 @@
     display: flex !important;
     align-items: center !important;
     justify-content: flex-end;
+
+    .right {
+      width: 80px;
+      height: 30px;
+    }
   }
 
   .buttom {
     flex: 1;
     width: 100%;
   }
+}
+
+.el-dropdown-link {
+  cursor: pointer;
+  color: #409EFF;
+}
+
+.el-icon-arrow-down {
+  font-size: 12px;
 }

src/views/property/comps/right/top/4/index.js

@@ -35,7 +35,6 @@ export default {
       this.isLoad = false // 是否加载完成
       if (this.year, this.deptId) {
         debtOverview2(this.deptId, this.year).then(res => {
-          console.log(222, res);
           this.data.topData[0][0].value = res.data.zbdzw
           this.data.topData[0][1].value = res.data.gzwl
           this.data.topData[1][0].value = res.data.zzwl