资产分析

src/components/charts/line/index.js

@@ -20,6 +20,18 @@ export default {
           }
         ];
       }
+    },
+    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 () {
@@ -47,6 +59,7 @@ export default {
       this.chartSetOption();
     },
     chartSetOption () {
+
       let xAxisData = [];
       let data = [];
       this.data.forEach(item => {
@@ -72,15 +85,15 @@ export default {
           color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
             {
               offset: 1,
-              color: "rgba(134, 91, 252, 1)",
+              color: this.color[0],
             },
             {
               offset: 0.5,
-              color: "rgba(26, 106, 226, 0.5)",
+              color: this.color[1],
             },
             {
               offset: 0,
-              color: "rgba(26, 106, 226, 0)",
+              color: this.color[2],
             },
           ]),
         },
@@ -134,32 +147,30 @@ export default {
         ],
         series: [
           {
-
             name: "",
             type: "line",
             smooth: true,
-            // symbol: "circle",
             symbolSize: 12,
             itemStyle: {
               normal: {
-                color: "#0092f6",
+                color: this.color[0],
                 lineStyle: {
-                  color: "#0092f6",
+                  color: this.color[0],
                   width: 1,
                 },
                 areaStyle: {
                   color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                     {
                       offset: 1,
-                      color: "rgba(134, 91, 252, 1)",
+                      color: this.areaStyle[0],
                     },
                     {
                       offset: 0.5,
-                      color: "rgba(26, 106, 226, 0.5)",
+                      color: this.areaStyle[1],
                     },
                     {
                       offset: 0,
-                      color: "rgba(26, 106, 226, 0)",
+                      color: this.areaStyle[2],
                     },
                   ]),
                 },

src/views/property/comps/buttom/1/data.js

@@ -2,33 +2,40 @@ export default [
   [
     {
       show: true,
-      name: '农用地（亩）',
+      name: '长期投资（万）',
       value: '716'
     },
     {
       show: true,
-      name: '建设用地（亩）',
-      value: '716'
+      name: '短期投资（万）',
+      value: '103'
     },
     {
       show: true,
-      name: '未利用地（亩）',
+      name: '应收款（万）',
       value: '716'
+    }
+  ],
+  [
+    {
+      show: true,
+      name: '库存物资（万）',
+      value: '301'
     },
     {
       show: true,
-      name: '农用地（宗）',
-      value: '716'
+      name: '生物资产（万）',
+      value: '103'
     },
     {
       show: true,
-      name: '建设用地（宗）',
+      name: '固定资产（万）',
       value: '716'
     },
     {
       show: true,
-      name: '未利用地（宗）',
-      value: '103'
+      name: '无形资产（万）',
+      value: '716'
     }
   ]
 ]

src/views/property/comps/buttom/1/index.html

@@ -1,9 +1,8 @@
 <div class="buttom2">
-  <table> 
-    <tr v-for="line in data">
-      <td v-for="item in line">
-        <BlockValue v-if="item.show" :data="item"></BlockValue>
-      </td>
-    </tr>
-  </table>
+  <div class="line">
+    <BlockValue v-for="item in data[0]" :data="item" class="item"></BlockValue>
+  </div>
+  <div class="line">
+    <BlockValue v-for="item in data[1]" :data="item" class="item"></BlockValue>
+  </div>
 </div>

src/views/property/comps/buttom/1/index.scss

@@ -1,16 +1,13 @@
 .buttom2 {
-  width: 960px;
+  width: 860px;
 
-  table {
+  .line {
     width: 100%;
+    display: flex;
+    justify-content: center;
 
-    tr {
-      width: 100%;
-
-      td {
-
-        width: 16.6%;
-      }
+    .item {
+      margin: 0px 20px;
     }
   }
 }

src/views/property/comps/left/bottom/2/index.html

@@ -1,4 +1,4 @@
 
 <Pannel title="债务趋势分析" height="305">
-  <ScrollTable :headers="headers" :data="data"></ScrollTable>
+  <Lines :color="['rgba(15, 252, 252, 1)', 'rgba(15, 252, 252, 1)', 'rgba(15, 252, 252, 1)']" :areaStyle="['rgba(15, 252, 252, 1)', 'rgba(15, 252, 252, 0.2)', 'rgba(15, 252, 252, 0)']"></Lines>
 </Pannel>

src/views/property/comps/left/bottom/2/index.js

@@ -1,16 +1,12 @@
 import Pannel from '@/components/pannel/index.vue';
-import ScrollTable from '@/components/scroll-table/index.vue';
+import Lines from '@/components/charts/line/index.vue';
 export default {
   components: {
-    ScrollTable,
+    Lines,
     Pannel
   },
   data () {
     return {
-      headers: ['资源名称', '类别', '面积（亩）', '部门'],
-      data: [
-        ['资源名称', '类别', '面积（亩）', '部门']
-      ]
     };
   }
 };

src/views/property/comps/right/bottom/2/index.html

@@ -1,4 +1,4 @@
 
-<Pannel title="合同长期未执行预警" height="305">
+<Pannel title="债务超标分析" height="305">
   <ScrollTable :headers="headers" :data="data"></ScrollTable>
 </Pannel>

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

@@ -7,8 +7,8 @@ export default {
   },
   data () {
     return {
-      headers: ['合同编码', '合同名称', '合同截止日期', '部门'],
-      data: [['合同编码', '合同名称', '合同截止日期', '部门']]
+      headers: ['经济组织名称', '债务金额', '债务率'],
+      data: [['经济组织名称', '债务金额', '21%']]
     };
   },
   created () {

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

@@ -27,5 +27,8 @@ export default {
   mounted () {
   },
   methods: {
+    tabChange () {
+
+    }
   }
 };

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

@@ -1,4 +1,12 @@
 
-<Pannel title="合同到期预警" height="305">
-  <ScrollTable :headers="headers" :data="data"></ScrollTable>
+<Pannel title="债务变化排名" height="305">
+
+  <div class="full">
+    <div class="top">
+      <PannelTabs @change="tabChange" :data="pannelData"></PannelTabs>
+    </div>
+    <div class="buttom">
+      <ScrollTable :headers="headers" :data="data" :bodyHeight="160"></ScrollTable>
+    </div>
+  </div>
 </Pannel>

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

@@ -1,14 +1,26 @@
 import Pannel from '@/components/pannel/index.vue';
 import ScrollTable from '@/components/scroll-table/index.vue';
+import PannelTabs from '@/components/pannel-tabs/index.vue';
 export default {
   components: {
+    PannelTabs,
     ScrollTable,
     Pannel
   },
   data () {
     return {
-      headers: ['合同编码', '合同名称', '合同截止日期', '部门'],
-      data: [['合同编码', '合同名称', '合同截止日期', '部门']]
+      pannelData: [
+        {
+          id: '1',
+          name: '减少'
+        },
+        {
+          id: '2',
+          name: '增加'
+        },
+      ],
+      headers: ['部门名称', '债务金额', '排名'],
+      data: [['部门名称', '债务金额', '1']]
     };
   },
   created () {
@@ -16,5 +28,8 @@ export default {
   mounted () {
   },
   methods: {
+    tabChange () {
+
+    }
   }
 };

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

@@ -1,4 +1,4 @@
 
-<Pannel title="合同结款到期预警" height="305">
+<Pannel title="债务金额排名" height="305">
   <ScrollTable :headers="headers" :data="data"></ScrollTable>
 </Pannel>

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

@@ -7,8 +7,8 @@ export default {
   },
   data () {
     return {
-      headers: ['合同编码', '合同名称', '预结款日期', '结款金额', '部门'],
-      data: [['合同编码', '合同名称', '预结款日期', '结款金额', '部门']]
+      headers: ['部门名称', '债务金额', '排名'],
+      data: [['部门名称', '债务金额', '1']]
     };
   },
   created () {