债务预警

src/components/block-icon/index.html

@@ -0,0 +1,11 @@
+<div class="block">
+  <img :src="data.icon" class="icon">
+  <div class="right col">
+    <p class="value">
+      <span>{{data.value}}</span>
+      <span class="unit">{{data.unit}}</span>
+
+    </p>
+    <p class="name">{{data.name}}</p>
+  </div>
+</div>

src/components/block-icon/index.js

@@ -0,0 +1,25 @@
+
+export default {
+  props: {
+    data: {
+      type: Object,
+      default: function () {
+        return {
+          name: '标题',
+          value: '值',
+          unit: '单位',
+          icon: require('./icon.png')
+        }
+      }
+    },
+
+  },
+  data () {
+    return {
+    };
+  },
+  created () {
+  },
+  methods: {
+  }
+};

src/components/block-icon/index.scss

@@ -0,0 +1,38 @@
+.block {
+  display: block;
+  width: 100% !important;
+  height: 76.3px !important;
+  align-items: center;
+  display: flex;
+  background: rgba(107, 129, 165, 0.31);
+  border-radius: 4px;
+  padding: 20px;
+
+  .icon {
+    width: 48px;
+    height: 48px;
+  }
+
+  .right {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    margin-left: 10px;
+
+    .value {
+      font-weight: bold;
+      font-size: 24px;
+      color: #FFFFFF;
+      text-shadow: 0px 3px 2px #05357D;
+
+      .unit {
+        font-size: 14px;
+      }
+    }
+
+    .name {
+      color: rgba(185, 211, 235, 1);
+      font-size: 12px;
+    }
+  }
+}

src/components/block-icon/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/components/charts/bar-special/index.html

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

src/components/charts/bar-special/index.js

@@ -0,0 +1,177 @@
+import * as echarts from 'echarts';
+import elementResizeDetectorMaker from 'element-resize-detector';
+export default {
+  props: {
+    id: {
+      type: String,
+      default: 'BAR332233'
+    },
+    data: {
+      type: Array,
+      default: function () {
+        return [
+          {
+            name: '资不抵债',
+            value: 2
+          },
+          {
+            name: '高债务率',
+            value: 2
+          },
+          {
+            name: '中债务率',
+            value: 2
+          },
+          {
+            name: '低债务率',
+            value: 2
+          }
+        ];
+      }
+    },
+    title: {
+      type: String,
+      default: '溢价率'
+    },
+    color: {
+      type: [Array],
+      default: function () {
+        return ['#3181F6', '#0FFCFC']
+      }
+    }
+  },
+  data () {
+    return {
+      chart: null
+    };
+  },
+  mounted () {
+    this.initChart();
+  },
+  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 () {
+      const xAxis = [];
+      this.data.forEach(item => {
+        xAxis.push(item.name)
+      });
+      const option = {
+        title: "",
+        grid: {
+          top: 40,
+          left: "7%",
+          right: "7%",
+          bottom: 10,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "none",
+          }
+        },
+        xAxis: [
+          {
+            type: "category",
+            show: true,
+            data: xAxis,
+            axisLabel: {
+              fontSize: 12,
+              color: 'rgba(166, 200, 221, 1)'
+            }
+          }
+        ],
+        yAxis: [
+          {
+            name: '单位：个数',
+            nameTextStyle: {
+              fontSize: 12,
+              color: 'rgba(166, 200, 221, 1)',
+              padding: [0, 0, 0, -12]
+            },
+            splitNumber: 2,
+            type: 'value',
+            splitLine: {
+              lineStyle: {
+                color: 'rgba(65,97,128,0.15)'
+              }
+            },
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              fontSize: 12,
+              color: 'rgba(166, 200, 221, 1)'
+            }
+          }
+        ],
+        color: ["#e54035"],
+        series: [
+          {
+            name: "",
+            type: "pictorialBar",
+            xAxisIndex: 0,
+            barMaxWidth: 70,
+            symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
+            label: {
+              show: true,
+              fontSize: 18,
+              position: "top",
+              color: "#fff"
+            },
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  const { dataIndex } = params
+                  let colorList = [
+                    ['rgba(252, 91, 110, 1)', 'rgba(252, 91, 110, 0.8)', 'rgba(252, 91, 110, 0)'],
+                    ['rgba(252, 133, 91, 1)', 'rgba(252, 133, 91, 0.8)', 'rgba(252, 133, 91, 0)'],
+                    ['rgba(252, 231, 91, 1)', 'rgba(252, 231, 91, 0.8)', 'rgba(252, 231, 91, 0)'],
+                    ['rgba(91, 252, 114, 1)', 'rgba(91, 252, 114, 0.8)', 'rgba(91, 252, 114, 0)']
+                  ];
+
+                  return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                    {
+                      offset: 1,
+                      color: colorList[dataIndex][0],
+                    },
+                    {
+                      offset: 0.5,
+                      color: colorList[dataIndex][1],
+                    },
+                    {
+                      offset: 0,
+                      color: colorList[dataIndex][2],
+                    },
+                  ])
+                },
+              },
+              emphasis: {
+                opacity: 1,
+              },
+            },
+            data: this.data,
+          },
+        ],
+      };;
+      this.chart.setOption(option);
+      this.initResizeCallBack();
+
+    }
+  }
+};

src/components/charts/bar-special/index.scss

@@ -0,0 +1,4 @@
+.chart {
+  width: 100%;
+  height: 100%;
+}

src/components/charts/bar-special/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/views/property/comps/left/bottom/4/index.js

@@ -7,9 +7,9 @@ export default {
   },
   data () {
     return {
-      headers: ['资源名称', '类别', '面积（亩）', '部门'],
+      headers: ['组织名称', '负债总额', '资产总额', '负债率'],
       data: [
-        ['资源名称', '类别', '面积（亩）', '部门']
+        ['组织名称', '负债总额（万元）', '资产总额（万元）', '负债率']
       ]
     };
   }

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

@@ -1,3 +1,4 @@
 
 <Pannel title="负债分布" height="305">
+  <BarSpecial id="other"></BarSpecial>
 </Pannel>

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

@@ -1,10 +1,18 @@
 import Pannel from '@/components/pannel/index.vue';
+import BarSpecial from '@/components/charts/bar-special/index.vue';
 export default {
   components: {
+    BarSpecial,
     Pannel
   },
   data () {
     return {
     };
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
   }
 };

src/views/property/comps/left/top/4/data.js

@@ -0,0 +1,40 @@
+export default {
+  'topData': [
+    [
+      {
+        value: '29',
+        unit: '个',
+        name: '资不抵债',
+        text: '资产负债率＞100%',
+        color: 'rgba(252, 91, 110, 1)',
+        icon: require('./组 4669@2x.png')
+      },
+      {
+        value: '29',
+        unit: '个',
+        name: '高负债率',
+        text: '60%＜资产负债率≤100%',
+        color: 'rgba(252, 133, 91, 1)',
+        icon: require('./组 4669@2x(1).png')
+      }
+    ],
+    [
+      {
+        value: '29',
+        unit: '个',
+        name: '中负债率',
+        color: 'rgba(252, 231, 91, 1)',
+        text: '40%≤资产负债率≤60%',
+        icon: require('./组 4669@2x(2).png')
+      },
+      {
+        value: '29',
+        unit: '个',
+        name: '低负债率',
+        color: 'rgba(91, 252, 114, 1)',
+        text: '资产负债率＜40%',
+        icon: require('./组 4669@2x(3).png')
+      }
+    ]
+  ]
+}

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

@@ -1,3 +1,26 @@
 
 <Pannel title="负债概况" height="305">
+  <div class="full">
+    <div class="top">
+      <table>
+        <tr v-for="line in data.topData">
+          <td v-for="item in line">
+            <BlockIcon :data="item"></BlockIcon>
+          </td>
+        </tr>
+      </table>
+    </div>
+    <div class="buttom">
+      <table>
+        <tr v-for="line in data.topData">
+          <td v-for="item in line">
+            <div class="block_item">
+              <div class="icon" :style="[{backgroundColor: item.color}]"></div>
+              <p class="label">{{item.text}}</p>
+            </div>
+          </td>
+        </tr>
+      </table>
+    </div>
+  </div>
 </Pannel>

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

@@ -1,10 +1,14 @@
 import Pannel from '@/components/pannel/index.vue';
+import BlockIcon from '@/components/block-icon/index.vue';
+import data from './data.js';
 export default {
   components: {
+    BlockIcon,
     Pannel
   },
   data () {
     return {
+      data
     };
   }
 };

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

@@ -0,0 +1,41 @@
+.full {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .top {
+    flex: 4;
+  }
+
+  .buttom {
+    flex: 1;
+  }
+
+  table {
+    width: 100%;
+    border-spacing: 10px;
+
+    tr {
+      td {
+        width: 50%;
+      }
+    }
+  }
+}
+
+.block_item {
+  display: flex;
+  align-items: center;
+
+  .icon {
+    width: 10px !important;
+    height: 10px !important;
+  }
+
+  .label {
+    margin-left: 4px;
+    color: rgba(185, 211, 235, 1);
+    font-size: 12px;
+  }
+}

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

@@ -7,8 +7,10 @@ export default {
   },
   data () {
     return {
-      headers: ['合同编码', '合同名称', '合同截止日期', '部门'],
-      data: [['合同编码', '合同名称', '合同截止日期', '部门']]
+      headers: ['组织名称', '负债总额', '资产总额', '负债率'],
+      data: [
+        ['组织名称', '负债总额', '资产总额', '负债率']
+      ]
     };
   },
   created () {

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

@@ -1,3 +1,4 @@
 
 <Pannel title="债务分布" height="305">
+  <BarSpecial></BarSpecial>
 </Pannel>

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

@@ -1,6 +1,8 @@
 import Pannel from '@/components/pannel/index.vue';
+import BarSpecial from '@/components/charts/bar-special/index.vue';
 export default {
   components: {
+    BarSpecial,
     Pannel
   },
   data () {

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

@@ -0,0 +1,40 @@
+export default {
+  'topData': [
+    [
+      {
+        value: '29',
+        unit: '个',
+        name: '资不抵债',
+        text: '资产负债率＞100%',
+        color: 'rgba(252, 91, 110, 1)',
+        icon: require('./组 4669@2x.png')
+      },
+      {
+        value: '29',
+        unit: '个',
+        name: '高负债率',
+        text: '60%＜资产负债率≤100%',
+        color: 'rgba(252, 133, 91, 1)',
+        icon: require('./组 4669@2x(1).png')
+      }
+    ],
+    [
+      {
+        value: '29',
+        unit: '个',
+        name: '中负债率',
+        color: 'rgba(252, 231, 91, 1)',
+        text: '40%≤资产负债率≤60%',
+        icon: require('./组 4669@2x(2).png')
+      },
+      {
+        value: '29',
+        unit: '个',
+        name: '低负债率',
+        color: 'rgba(91, 252, 114, 1)',
+        text: '资产负债率＜40%',
+        icon: require('./组 4669@2x(3).png')
+      }
+    ]
+  ]
+}

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

@@ -1,3 +1,26 @@
 
 <Pannel title="债务概况" height="305">
+  <div class="full">
+    <div class="top">
+      <table>
+        <tr v-for="line in data.topData">
+          <td v-for="item in line">
+            <BlockIcon :data="item"></BlockIcon>
+          </td>
+        </tr>
+      </table>
+    </div>
+    <div class="buttom">
+      <table>
+        <tr v-for="line in data.topData">
+          <td v-for="item in line">
+            <div class="block_item">
+              <div class="icon" :style="[{backgroundColor: item.color}]"></div>
+              <p class="label">{{item.text}}</p>
+            </div>
+          </td>
+        </tr>
+      </table>
+    </div>
+  </div>
 </Pannel>

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

@@ -1,16 +1,14 @@
 import Pannel from '@/components/pannel/index.vue';
+import BlockIcon from '@/components/block-icon/index.vue';
+import data from './data.js';
 export default {
   components: {
+    BlockIcon,
     Pannel
   },
   data () {
     return {
+      data
     };
-  },
-  created () {
-  },
-  mounted () {
-  },
-  methods: {
   }
 };

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

@@ -0,0 +1,41 @@
+.full {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .top {
+    flex: 4;
+  }
+
+  .buttom {
+    flex: 1;
+  }
+
+  table {
+    width: 100%;
+    border-spacing: 10px;
+
+    tr {
+      td {
+        width: 50%;
+      }
+    }
+  }
+}
+
+.block_item {
+  display: flex;
+  align-items: center;
+
+  .icon {
+    width: 10px !important;
+    height: 10px !important;
+  }
+
+  .label {
+    margin-left: 4px;
+    color: rgba(185, 211, 235, 1);
+    font-size: 12px;
+  }
+}