资产一张图

src/components/block/index.scss

@@ -6,8 +6,9 @@
   display: flex;
 
   .icon {
+    // border: 1px solid red;
     width: 80px;
-    height: 100px;
+    height: 90px;
   }
 
   .right {

src/router/index.js

@@ -6,7 +6,7 @@ const routes = [
   {
     path: '/',
     name: 'root',
-    redirect: '/resources'
+    redirect: '/property'
   },
   // 资金
   {
@@ -19,6 +19,12 @@ const routes = [
     path: '/resources',
     name: 'resources',
     component: () => import('@/views/resources/index.vue')
+  },
+  // 资产
+  {
+    path: '/property',
+    name: 'property',
+    component: () => import('@/views/property/index.vue')
   }
 ];
 

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

@@ -0,0 +1,34 @@
+export default [
+  [
+    {
+      show: true,
+      name: '农用地（亩）',
+      value: '716'
+    },
+    {
+      show: true,
+      name: '建设用地（亩）',
+      value: '716'
+    },
+    {
+      show: true,
+      name: '未利用地（亩）',
+      value: '716'
+    },
+    {
+      show: true,
+      name: '农用地（宗）',
+      value: '716'
+    },
+    {
+      show: true,
+      name: '建设用地（宗）',
+      value: '716'
+    },
+    {
+      show: true,
+      name: '未利用地（宗）',
+      value: '103'
+    }
+  ]
+]

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

@@ -0,0 +1,9 @@
+<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>

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

@@ -0,0 +1,18 @@
+import BlockValue from '@/components/value/index.vue';
+import data from './data.js';
+export default {
+  components: {
+    BlockValue
+  },
+  data () {
+    return {
+      data
+    };
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+  }
+};

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

@@ -0,0 +1,16 @@
+.buttom2 {
+  width: 960px;
+
+  table {
+    width: 100%;
+
+    tr {
+      width: 100%;
+
+      td {
+
+        width: 16.6%;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,4 @@
+<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/1/index.html

@@ -0,0 +1,10 @@
+<Pannel title="经营性资产分析" height="340">
+  <div class="full">
+    <div class="top">
+      <PannelTabs @change="tabChange" :data="pannelTabData"></PannelTabs>
+    </div>
+    <div class="buttom">
+      <Bar id="bar2"></Bar>
+    </div>
+  </div>
+</Pannel>

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

@@ -0,0 +1,36 @@
+import Pannel from '@/components/pannel/index.vue';
+import PannelTabs from '@/components/pannel-tabs/index.vue';
+import Bar from '@/components/charts/bar/index.vue';
+
+export default {
+  components: {
+    Bar,
+    PannelTabs,
+    Pannel
+  },
+  data () {
+    return {
+      pannelTabData: [
+        {
+          id: '1',
+          name: '闲置'
+        },
+        {
+          id: '2',
+          name: '出租'
+        }
+      ],
+      tabIndex: '1'
+    };
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+    tabChange (info) {
+      console.log(info);
+      this.tabIndex = info.id
+    }
+  }
+};

src/views/property/comps/left/bottom/1/index.scss

@@ -0,0 +1,17 @@
+.full {
+  display: flex;
+  flex-direction: column;
+
+  .top {
+    height: 50px !important;
+    width: 100%;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: flex-end;
+  }
+
+  .buttom {
+    flex: 1;
+    width: 100%;
+  }
+}

src/views/property/comps/left/bottom/1/index.vue

@@ -0,0 +1,4 @@
+<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/2/index.html

@@ -0,0 +1,4 @@
+
+<Pannel title="资金往来不规范预警分析" height="305">
+  <ScrollTable :headers="headers" :data="data"></ScrollTable>
+</Pannel>

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

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

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

@@ -0,0 +1,17 @@
+.full {
+  display: flex;
+  flex-direction: column;
+
+  .top {
+    height: 50px !important;
+    width: 100%;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: flex-end;
+  }
+
+  .buttom {
+    flex: 1;
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,4 @@
+<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/3/index.html

@@ -0,0 +1,4 @@
+
+<Pannel title="资金往来不规范预警分析" height="305">
+  <ScrollTable :headers="headers" :data="data"></ScrollTable>
+</Pannel>

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

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

src/views/property/comps/left/bottom/3/index.scss

@@ -0,0 +1,17 @@
+.full {
+  display: flex;
+  flex-direction: column;
+
+  .top {
+    height: 50px !important;
+    width: 100%;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: flex-end;
+  }
+
+  .buttom {
+    flex: 1;
+    width: 100%;
+  }
+}

src/views/property/comps/left/bottom/3/index.vue

@@ -0,0 +1,4 @@
+<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.html

@@ -0,0 +1,4 @@
+
+<Pannel title="资金往来不规范预警分析" height="305">
+  <ScrollTable :headers="headers" :data="data"></ScrollTable>
+</Pannel>

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

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

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

@@ -0,0 +1,17 @@
+.full {
+  display: flex;
+  flex-direction: column;
+
+  .top {
+    height: 50px !important;
+    width: 100%;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: flex-end;
+  }
+
+  .buttom {
+    flex: 1;
+    width: 100%;
+  }
+}

src/views/property/comps/left/bottom/4/index.vue

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

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

@@ -0,0 +1,10 @@
+<Pannel title="固定资产类型分析" height="340">
+  <div class="full">
+    <div class="top">
+      <PannelTabs @change="tabChange" :data="pannelTabData"></PannelTabs>
+    </div>
+    <div class="buttom">
+      <Bar :color="['rgba(134, 91, 252, 1)', 'rgba(49, 129, 246, 1)']"></Bar>
+    </div>
+  </div>
+</Pannel>

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

@@ -0,0 +1,35 @@
+import Pannel from '@/components/pannel/index.vue';
+import PannelTabs from '@/components/pannel-tabs/index.vue';
+import Bar from '@/components/charts/bar/index.vue';
+
+export default {
+  components: {
+    Bar,
+    PannelTabs,
+    Pannel
+  },
+  data () {
+    return {
+      pannelTabData: [
+        {
+          id: '1',
+          name: '经营性'
+        },
+        {
+          id: '2',
+          name: '非经营性'
+        }
+      ],
+      tabIndex: '1'
+    };
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+    tabChange (info) {
+      this.tabIndex = info.id
+    }
+  }
+};

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

@@ -0,0 +1,17 @@
+.full {
+  display: flex;
+  flex-direction: column;
+
+  .top {
+    height: 50px !important;
+    width: 100%;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: flex-end;
+  }
+
+  .buttom {
+    flex: 1;
+    width: 100%;
+  }
+}

src/views/property/comps/left/middle/1/index.vue

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

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

@@ -0,0 +1,4 @@
+
+<Pannel title="资源不规范出租预警" height="305">
+  <ScrollTable :headers="headers" :data="data"></ScrollTable>
+</Pannel>

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

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

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

@@ -0,0 +1,17 @@
+.full {
+  display: flex;
+  flex-direction: column;
+
+  .top {
+    height: 50px !important;
+    width: 100%;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: flex-end;
+  }
+
+  .buttom {
+    flex: 1;
+    width: 100%;
+  }
+}

src/views/property/comps/left/middle/2/index.vue

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

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

@@ -0,0 +1,4 @@
+
+<Pannel title="资源不规范出租预警" height="305">
+  <ScrollTable :headers="headers" :data="data"></ScrollTable>
+</Pannel>

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

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

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

@@ -0,0 +1,17 @@
+.full {
+  display: flex;
+  flex-direction: column;
+
+  .top {
+    height: 50px !important;
+    width: 100%;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: flex-end;
+  }
+
+  .buttom {
+    flex: 1;
+    width: 100%;
+  }
+}

src/views/property/comps/left/middle/3/index.vue

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

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

@@ -0,0 +1,4 @@
+
+<Pannel title="资源不规范出租预警" height="305">
+  <ScrollTable :headers="headers" :data="data"></ScrollTable>
+</Pannel>

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

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

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

@@ -0,0 +1,17 @@
+.full {
+  display: flex;
+  flex-direction: column;
+
+  .top {
+    height: 50px !important;
+    width: 100%;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: flex-end;
+  }
+
+  .buttom {
+    flex: 1;
+    width: 100%;
+  }
+}

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

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

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

@@ -0,0 +1,26 @@
+export default [
+  [
+    {
+      name: '固定资产(个)',
+      icon: require('./1.png'),
+      value: '3420'
+    },
+    {
+      name: '总原值(万元)',
+      icon: require('./2.png'),
+      value: '257'
+    }
+  ],
+  [
+    {
+      name: '经营性固定资产（个）',
+      icon: require('./3.png'),
+      value: '160'
+    },
+    {
+      name: '总原值（万元）',
+      icon: require('./2.png'),
+      value: '101'
+    }
+  ]
+]

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

@@ -0,0 +1,9 @@
+<Pannel title="固定资产概况分析" height="232">
+  <table>
+    <tr v-for="line in data">
+      <td v-for="item in line">
+        <Block :data="item"></Block>
+      </td>
+    </tr>
+  </table>
+</Pannel>

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

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

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

@@ -0,0 +1,12 @@
+table {
+  width: 100%;
+  height: 100%;
+
+  tr {
+    width: 100%;
+
+    td {
+      width: 50%;
+    }
+  }
+}

src/views/property/comps/left/top/1/index.vue

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

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

@@ -0,0 +1,4 @@
+
+<Pannel title="资源处置预警" height="305">
+  <ScrollTable :headers="headers" :data="data"></ScrollTable>
+</Pannel>

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

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

src/views/property/comps/left/top/2/index.vue

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

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

@@ -0,0 +1,4 @@
+
+<Pannel title="资源处置预警" height="305">
+  <ScrollTable :headers="headers" :data="data"></ScrollTable>
+</Pannel>

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

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

src/views/property/comps/left/top/3/index.vue

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

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

@@ -0,0 +1,4 @@
+
+<Pannel title="资源处置预警" height="305">
+  <ScrollTable :headers="headers" :data="data"></ScrollTable>
+</Pannel>

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

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

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

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

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

@@ -0,0 +1,3 @@
+<Pannel title="合同不规范管理排名分析" height="340">
+  <ScrollTable :headers="headers"></ScrollTable>
+</Pannel>

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

@@ -0,0 +1,20 @@
+import Pannel from '@/components/pannel/index.vue';
+import ScrollTable from '@/components/scroll-table/index.vue';
+
+export default {
+  components: {
+    ScrollTable,
+    Pannel
+  },
+  data () {
+    return {
+      headers: ['部门名称', '合同数量', '排名']
+    };
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+  }
+};

src/views/property/comps/right/bottom/1/index.vue

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

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

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

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

@@ -0,0 +1,20 @@
+import Pannel from '@/components/pannel/index.vue';
+import ScrollTable from '@/components/scroll-table/index.vue';
+export default {
+  components: {
+    ScrollTable,
+    Pannel
+  },
+  data () {
+    return {
+      headers: ['合同编码', '合同名称', '合同截止日期', '部门'],
+      data: [['合同编码', '合同名称', '合同截止日期', '部门']]
+    };
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+  }
+};

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

@@ -0,0 +1,17 @@
+.full {
+  display: flex;
+  flex-direction: column;
+
+  .top {
+    height: 50px !important;
+    width: 100%;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: flex-end;
+  }
+
+  .buttom {
+    flex: 1;
+    width: 100%;
+  }
+}

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

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

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

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

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

@@ -0,0 +1,20 @@
+import Pannel from '@/components/pannel/index.vue';
+import ScrollTable from '@/components/scroll-table/index.vue';
+export default {
+  components: {
+    ScrollTable,
+    Pannel
+  },
+  data () {
+    return {
+      headers: ['合同编码', '合同名称', '合同截止日期', '部门'],
+      data: [['合同编码', '合同名称', '合同截止日期', '部门']]
+    };
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+  }
+};

src/views/property/comps/right/bottom/3/index.scss

@@ -0,0 +1,17 @@
+.full {
+  display: flex;
+  flex-direction: column;
+
+  .top {
+    height: 50px !important;
+    width: 100%;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: flex-end;
+  }
+
+  .buttom {
+    flex: 1;
+    width: 100%;
+  }
+}

src/views/property/comps/right/bottom/3/index.vue

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

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

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

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

@@ -0,0 +1,20 @@
+import Pannel from '@/components/pannel/index.vue';
+import ScrollTable from '@/components/scroll-table/index.vue';
+export default {
+  components: {
+    ScrollTable,
+    Pannel
+  },
+  data () {
+    return {
+      headers: ['合同编码', '合同名称', '合同截止日期', '部门'],
+      data: [['合同编码', '合同名称', '合同截止日期', '部门']]
+    };
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+  }
+};

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

@@ -0,0 +1,17 @@
+.full {
+  display: flex;
+  flex-direction: column;
+
+  .top {
+    height: 50px !important;
+    width: 100%;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: flex-end;
+  }
+
+  .buttom {
+    flex: 1;
+    width: 100%;
+  }
+}

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

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

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

@@ -0,0 +1,10 @@
+<Pannel title="合同数量/金额排名分析" height="340">
+  <div class="full">
+    <div class="top">
+      <PannelTabs @change="tabChange" :data="pannelTabData"></PannelTabs>
+    </div>
+    <div class="buttom">
+      <ScrollTable :headers="headers"></ScrollTable>
+    </div>
+  </div>
+</Pannel>

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

@@ -0,0 +1,31 @@
+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: ['部门名称', '数量', '排名'],
+      pannelTabData: [
+        {
+          id: '1',
+          name: '数量'
+        },
+        {
+          id: '2',
+          name: '金额'
+        }
+      ],
+    };
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+  }
+};

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

@@ -0,0 +1,17 @@
+.full {
+  display: flex;
+  flex-direction: column;
+
+  .top {
+    height: 50px !important;
+    width: 100%;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: flex-end;
+  }
+
+  .buttom {
+    flex: 1;
+    width: 100%;
+  }
+}

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

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

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

@@ -0,0 +1,4 @@
+
+<Pannel title="合同到期预警" height="305">
+  <ScrollTable :headers="headers" :data="data"></ScrollTable>
+</Pannel>

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

@@ -0,0 +1,20 @@
+import Pannel from '@/components/pannel/index.vue';
+import ScrollTable from '@/components/scroll-table/index.vue';
+export default {
+  components: {
+    ScrollTable,
+    Pannel
+  },
+  data () {
+    return {
+      headers: ['合同编码', '合同名称', '合同截止日期', '部门'],
+      data: [['合同编码', '合同名称', '合同截止日期', '部门']]
+    };
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+  }
+};

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

@@ -0,0 +1,17 @@
+.full {
+  display: flex;
+  flex-direction: column;
+
+  .top {
+    height: 50px !important;
+    width: 100%;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: flex-end;
+  }
+
+  .buttom {
+    flex: 1;
+    width: 100%;
+  }
+}

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

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

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

@@ -0,0 +1,4 @@
+
+<Pannel title="合同到期预警" height="305">
+  <ScrollTable :headers="headers" :data="data"></ScrollTable>
+</Pannel>

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

@@ -0,0 +1,20 @@
+import Pannel from '@/components/pannel/index.vue';
+import ScrollTable from '@/components/scroll-table/index.vue';
+export default {
+  components: {
+    ScrollTable,
+    Pannel
+  },
+  data () {
+    return {
+      headers: ['合同编码', '合同名称', '合同截止日期', '部门'],
+      data: [['合同编码', '合同名称', '合同截止日期', '部门']]
+    };
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+  }
+};

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

@@ -0,0 +1,17 @@
+.full {
+  display: flex;
+  flex-direction: column;
+
+  .top {
+    height: 50px !important;
+    width: 100%;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: flex-end;
+  }
+
+  .buttom {
+    flex: 1;
+    width: 100%;
+  }
+}

src/views/property/comps/right/middle/3/index.vue

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

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

@@ -0,0 +1,4 @@
+
+<Pannel title="合同到期预警" height="305">
+  <ScrollTable :headers="headers" :data="data"></ScrollTable>
+</Pannel>

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

@@ -0,0 +1,20 @@
+import Pannel from '@/components/pannel/index.vue';
+import ScrollTable from '@/components/scroll-table/index.vue';
+export default {
+  components: {
+    ScrollTable,
+    Pannel
+  },
+  data () {
+    return {
+      headers: ['合同编码', '合同名称', '合同截止日期', '部门'],
+      data: [['合同编码', '合同名称', '合同截止日期', '部门']]
+    };
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+  }
+};

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

@@ -0,0 +1,17 @@
+.full {
+  display: flex;
+  flex-direction: column;
+
+  .top {
+    height: 50px !important;
+    width: 100%;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: flex-end;
+  }
+
+  .buttom {
+    flex: 1;
+    width: 100%;
+  }
+}

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

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

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

@@ -0,0 +1,26 @@
+export default [
+  [
+    {
+      name: '总资产（万元）',
+      icon: require('./1.png'),
+      value: '8000'
+    },
+    {
+      name: '总负债（万元）',
+      icon: require('./2.png'),
+      value: '257'
+    }
+  ],
+  [
+    {
+      name: '总收入（万元）',
+      icon: require('./3.png'),
+      value: '1460'
+    },
+    {
+      name: '总支出（万元）',
+      icon: require('./2.png'),
+      value: '1011'
+    }
+  ]
+]

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

@@ -0,0 +1,9 @@
+<Pannel title="合同概况分析" height="232">
+  <table>
+    <tr v-for="line in data">
+      <td v-for="item in line">
+        <Block :data="item"></Block>
+      </td>
+    </tr>
+  </table>
+</Pannel>

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

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

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

@@ -0,0 +1,12 @@
+table {
+  width: 100%;
+  height: 100%;
+
+  tr {
+    width: 100%;
+
+    td {
+      width: 50%;
+    }
+  }
+}

src/views/property/comps/right/top/1/index.vue

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