资源发包分析

src/components/tabs/index.scss

@@ -3,14 +3,15 @@
   height: 43px;
   line-height: 43px;
   text-align: center;
-  background: url('./normal.png');
+  background: url('./未选.png');
   background-size: 100% 100%;
+  margin-right: 10px;
 }
 
 .active {
   width: 111px;
   height: 43px;
   text-align: center;
-  background: url('./actice.png') !important;
+  background: url('./高亮.png') !important;
   background-size: 100% 100% !important;
 }

src/router/index.js

@@ -6,13 +6,19 @@ const routes = [
   {
     path: '/',
     name: 'root',
-    redirect: '/capital'
+    redirect: '/resources'
   },
-  // 首页
+  // 资金
   {
     path: '/capital',
     name: 'capital',
     component: () => import('@/views/capital/index.vue')
+  },
+  // 资源
+  {
+    path: '/resources',
+    name: 'resources',
+    component: () => import('@/views/resources/index.vue')
   }
 ];
 

src/views/capital/index.html

@@ -1,6 +1,6 @@
 <div class="page">
   <div class="map" id="map"></div>
-  <Header>
+  <Header title="资金一张图">
     <div slot="left">
       <Tabs @change="tabChange" :data="tabData"></Tabs>
     </div>

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

@@ -0,0 +1,62 @@
+export default [
+  [
+    {
+      show: false
+    },
+    {
+      show: true,
+      name: '经营收入',
+      value: '716'
+    },
+    {
+      show: true,
+      name: '投资收益',
+      value: '716'
+    },
+    {
+      show: true,
+      name: '补助收入',
+      value: '716'
+    },
+    {
+      show: true,
+      name: '其他收入',
+      value: '716'
+    },
+    {
+      show: false
+    }
+  ],
+  [
+    {
+      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/resources/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/resources/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/resources/comps/buttom/1/index.scss

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

src/views/resources/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/resources/comps/buttom/2/index.html

@@ -0,0 +1,4 @@
+
+<Pannel title="xx预警清单" height="305" width="960">
+  <ScrollTable :headers="headers" :data="data" details></ScrollTable>
+</Pannel>

src/views/resources/comps/buttom/2/index.js

@@ -0,0 +1,25 @@
+import Pannel from '@/components/pannel/index.vue';
+import ScrollTable from '@/components/scroll-table/index.vue';
+export default {
+  components: {
+    ScrollTable,
+    Pannel
+  },
+  data () {
+    return {
+      headers: ['摘要', '日期', '借方金额', '贷方金额'],
+      data: [
+        ['摘要内容摘要内容摘要内容摘要内容摘要内容摘', '2025-12', '234', '3434']
+      ]
+    };
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+    tabChange () {
+
+    }
+  }
+};

src/views/resources/comps/buttom/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/resources/comps/buttom/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/resources/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/resources/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/resources/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/resources/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/resources/comps/left/bottom/2/index.html

@@ -0,0 +1,11 @@
+
+<Pannel title="资金往来不规范预警分析" height="305">
+  <div class="full">
+    <div class="top">
+      <PannelTabs @change="tabChange" :data="pannelTabsData"></PannelTabs>
+    </div>
+    <div class="buttom">
+      <BarSign id="bar3"></BarSign>
+    </div>
+  </div>
+</Pannel>

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

@@ -0,0 +1,33 @@
+import Pannel from '@/components/pannel/index.vue';
+import BarSign from '@/components/charts/bar-sign/index.vue';
+import PannelTabs from '@/components/pannel-tabs/index.vue';
+export default {
+  components: {
+    BarSign,
+    PannelTabs,
+    Pannel
+  },
+  data () {
+    return {
+      pannelTabsData: [
+        {
+          id: '1',
+          name: '支出'
+        },
+        {
+          id: '2',
+          name: '收入'
+        }
+      ]
+    };
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+    tabChange () {
+
+    }
+  }
+};

src/views/resources/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/resources/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/resources/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/resources/comps/left/middle/1/index.js

@@ -0,0 +1,39 @@
+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: '建设用地'
+        },
+        {
+          id: '3',
+          name: '未利用地'
+        }
+      ],
+      tabIndex: '1'
+    };
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+    tabChange (info) {
+      this.tabIndex = info.id
+    }
+  }
+};

src/views/resources/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/resources/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/resources/comps/left/middle/2/index.html

@@ -0,0 +1,11 @@
+
+<Pannel title="资金往来敏感词预警分析" height="305">
+  <div class="full">
+    <div class="top">
+      <PannelTabs @change="tabChange" :data="pannelTabsData"></PannelTabs>
+    </div>
+    <div class="buttom">
+      <Bar id="bar2" :color="['rgba(134, 91, 252, 1)', 'rgba(49, 129, 246, 1)']"></Bar>
+    </div>
+  </div>
+</Pannel>

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

@@ -0,0 +1,33 @@
+import Pannel from '@/components/pannel/index.vue';
+import Bar from '@/components/charts/bar/index.vue';
+import PannelTabs from '@/components/pannel-tabs/index.vue';
+export default {
+  components: {
+    PannelTabs,
+    Bar,
+    Pannel
+  },
+  data () {
+    return {
+      pannelTabsData: [
+        {
+          id: '1',
+          name: '支出'
+        },
+        {
+          id: '2',
+          name: '收入'
+        }
+      ]
+    };
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+    tabChange () {
+
+    }
+  }
+};

src/views/resources/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/resources/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/resources/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/resources/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/resources/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/resources/comps/left/top/1/index.scss

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

src/views/resources/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/resources/comps/left/top/2/index.html

@@ -0,0 +1,4 @@
+
+<Pannel title="资金支出大额预警分析" height="305">
+  <Bar></Bar>
+</Pannel>

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

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

src/views/resources/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/resources/comps/right/bottom/1/index.html

@@ -0,0 +1,3 @@
+<Pannel title="资金支出排名" height="340">
+  <ScrollTable></ScrollTable>
+</Pannel>

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

@@ -0,0 +1,19 @@
+import Pannel from '@/components/pannel/index.vue';
+import ScrollTable from '@/components/scroll-table/index.vue';
+
+export default {
+  components: {
+    ScrollTable,
+    Pannel
+  },
+  data () {
+    return {
+    };
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+  }
+};

src/views/resources/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/resources/comps/right/bottom/2/index.html

@@ -0,0 +1,11 @@
+
+<Pannel title="资金往来不规范预警排名" height="305">
+  <div class="full">
+    <div class="top">
+      <PannelTabs :data="pannelTabsData" @change="tabChange"></PannelTabs>
+    </div>
+    <div class="buttom">
+      <ScrollTable :headers="headers" :bodyHeight="160"></ScrollTable>
+    </div>
+  </div>
+</Pannel>

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

@@ -0,0 +1,35 @@
+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 {
+      pannelTabsData: [
+        {
+          id: '1',
+          name: '支出'
+        },
+        {
+          id: '2',
+          name: '收入'
+        }
+      ],
+      tabIndex: '1',
+      headers: ['部门名称', '支出金额', '排名']
+    };
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+    tabChange (info) {
+      this.tabIndex = info.id
+    }
+  }
+};

src/views/resources/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/resources/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/resources/comps/right/middle/1/index.html

@@ -0,0 +1,3 @@
+<Pannel title="资金收入排名" height="340">
+  <ScrollTable></ScrollTable>
+</Pannel>

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

@@ -0,0 +1,19 @@
+import Pannel from '@/components/pannel/index.vue';
+import ScrollTable from '@/components/scroll-table/index.vue';
+
+export default {
+  components: {
+    ScrollTable,
+    Pannel
+  },
+  data () {
+    return {
+    };
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+  }
+};

src/views/resources/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/resources/comps/right/middle/2/index.html

@@ -0,0 +1,11 @@
+
+<Pannel title="资金往来敏感词预警排名" height="305">
+  <div class="full">
+    <div class="top">
+      <PannelTabs :data="pannelTabsData" @change="tabChange"></PannelTabs>
+    </div>
+    <div class="buttom">
+      <ScrollTable :headers="headers" :bodyHeight="160"></ScrollTable>
+    </div>
+  </div>
+</Pannel>

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

@@ -0,0 +1,35 @@
+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 {
+      pannelTabsData: [
+        {
+          id: '1',
+          name: '支出'
+        },
+        {
+          id: '2',
+          name: '收入'
+        }
+      ],
+      tabIndex: '1',
+      headers: ['部门名称', '支出金额', '排名']
+    };
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+    tabChange (info) {
+      this.tabIndex = info.id
+    }
+  }
+};

src/views/resources/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/resources/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/resources/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/resources/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/resources/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/resources/comps/right/top/1/index.scss

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

src/views/resources/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>

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

@@ -0,0 +1,4 @@
+
+<Pannel title="资金支出大额预警排名" height="305">
+  <ScrollTable :headers="headers"></ScrollTable>
+</Pannel>

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

@@ -0,0 +1,19 @@
+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/resources/comps/right/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/resources/data.js

@@ -0,0 +1,32 @@
+export const comps = {
+  '1': {
+    'left': [
+      'Left11',
+      'Left21',
+      'Left31',
+    ],
+    'right': [
+      'Right11',
+      'Right21',
+      'Right31',
+    ],
+    'buttom': [
+      'Bottom1'
+    ]
+  },
+  '2': {
+    'left': [
+      'Left12',
+      'Left22',
+      'Left32'
+    ],
+    'right': [
+      'Right12',
+      'Right22',
+      'Right32'
+    ],
+    'buttom': [
+      'Bottom2'
+    ]
+  }
+}

src/views/resources/index.html

@@ -0,0 +1,18 @@
+<div class="page">
+  <div class="map" id="map"></div>
+  <Header title="资源一张图">
+    <div slot="left">
+      <Tabs @change="tabChange" :data="tabData"></Tabs>
+    </div>
+  </Header>
+  <!-- 项目初始化 -->
+  <div class="left_side col space_between">
+    <component :is="item" v-for="(item, index) in currentComp.left" :key="index"></component>
+  </div>
+  <div class="right_side col space_between">
+    <component :is="item" v-for="(item, index) in currentComp.right" :key="index"></component>
+  </div>
+  <div class="buttom_side row space_between">
+    <component :is="item" v-for="(item, index) in currentComp.buttom" :key="index"></component>
+  </div>
+</div>

src/views/resources/index.js

@@ -0,0 +1,237 @@
+import Header from '@/components/header/index.vue';
+import Tabs from '@/components/tabs/index.vue';
+
+import Left11 from './comps/left/top/1/index.vue';
+import Left21 from './comps/left/middle/1/index.vue';
+import Left31 from './comps/left/bottom/1/index.vue';
+import Right11 from './comps/right/top/1/index.vue';
+import Right21 from './comps/right/middle/1/index.vue';
+import Right31 from './comps/right/bottom/1/index.vue';
+
+import Left12 from './comps/left/top/2/index.vue';
+import Left22 from './comps/left/middle/2/index.vue';
+import Left32 from './comps/left/bottom/2/index.vue';
+import Right12 from './comps/right/top/2/index.vue';
+import Right22 from './comps/right/middle/2/index.vue';
+import Right32 from './comps/right/bottom/2/index.vue';
+import Bottom2 from './comps/buttom/2/index.vue';
+import Bottom1 from './comps/buttom/1/index.vue';
+
+import { getConfigKey } from "@/api/system/config";
+import { getInfo } from "@/api/login";
+import { treeselect, treeselectByDeptId } from "@/api/system/dept";
+
+import GisUtils from '@/utils/gis.js';
+
+import { comps } from './data.js'
+import {
+  fromLonLat
+} from 'ol/proj'
+
+let gis = null;
+export default {
+  components: {
+    Header,
+    Tabs,
+    Left11,
+    Left21,
+    Left31,
+    Right11,
+    Right21,
+    Right31,
+    Left12,
+    Left22,
+    Left32,
+    Right12,
+    Right22,
+    Right32,
+    Bottom2,
+    Bottom1
+  },
+  data () {
+    return {
+      tabData: [
+        {
+          id: '1',
+          name: '统计分析'
+        },
+        {
+          id: '2',
+          name: '预警分析'
+        }
+      ],
+      yellowIcon: require('./icon/yellow.png'),
+      tab: '1',
+      comps,
+      map: "",                        // 地图
+      mapGeoServerUrl: "",            // geoserver地址
+      mapBorder: "",                  // 地图边界
+      deptLayer: "",                  // 坐标点图层
+      countyBorderLayerName: "",      // 区县边界图层名称
+      townBorderLayerName: "",        // 乡镇边界图层名称
+      villageBorderLayerName: "",     // 村边界图层名称
+      groupBorderLayerName: "",       // 组边界图层名称
+      addrOptions: [],
+    };
+  },
+  computed: {
+    currentComp: function () {
+      return this.comps[this.tab]
+    }
+  },
+  created () {
+  },
+  mounted () {
+    // 获取geoserver的地址
+    this.getGeoServerUrl();
+    getInfo().then(res => {
+      // this.getData();
+      treeselectByDeptId({ deptId: res.user.deptId }).then((resp) => {
+        this.addrOptions = resp.data;
+        // 初始化地图
+        this.initMap();
+      });
+    });
+  },
+  methods: {
+    tabChange (info) {
+      this.tab = info.id;
+    },
+    // 初始化地图
+    initMap () {
+      let dept = this.addrOptions[0];
+      let mapCenterLocation;
+      if (dept.lng && dept.lat) {
+        mapCenterLocation = [dept.lng, dept.lat];
+      } else {
+        mapCenterLocation = [116.391461, 39.902359];
+      }
+      gis = new GisUtils('map')
+      gis.addTianDiTuLayer()
+      gis.addAnnotationLayer()
+      if (dept.deptLevel === '5') {
+        // 登录身份为市级领导
+        this.userRole = 'cityLeader';
+        this.cityId = dept.id;
+        this.currentDeptLevel = '5';
+        // 添加区县边界
+        this.addCountyBorder(dept.children.map(item => item.id));
+      } else if (dept.deptLevel === '4') {
+        // 登录身份为县级领导
+        this.userRole = 'countyLeader';
+        this.countyId = dept.id;
+        this.currentDeptLevel = '4';
+        // 添加乡镇边界
+        this.addTownBorder(dept.children.map(item => item.id));
+        gis.getView().setZoom(11);
+        // this.villageIds = this.findLeafNodeIds(dept);
+      } else if (dept.deptLevel === '3') {
+        // 登录身份为镇级领导
+        this.userRole = 'townLeader';
+        this.townId = dept.id;
+        this.currentDeptLevel = '3';
+        // 添加村边界
+        this.addVillageBorder(dept.children.map(item => item.id));
+        this.map.getView().setZoom(13);
+        // this.villageIds = this.findLeafNodeIds(dept);
+      }
+      // 添加坐标点图层
+      if (dept.children) {
+        this.addDeptLayer(dept.children, 'yellow.png');
+      }
+      gis.getView().setCenter(fromLonLat(mapCenterLocation))
+
+      // 地图点击事件
+      gis.getMapContainer().on("click", (evt) => {
+        let feature = this.map.forEachFeatureAtPixel(
+          evt.pixel,
+          (feature) => feature
+        );
+        if (feature) {
+          // 镇级：加载村级坐标点
+          if (feature.get('level') === 'deptPoint') {
+            let parentIds = [];
+            this.findParentNodeIds(this.addrOptions, feature.get('deptId'), parentIds);
+            this.addrText = parentIds;
+            this.selectAddress(parentIds);
+          }
+        }
+      });
+    },
+
+    selectAddress (value, isLocated = true) {  // isLocated 控制地图是否跳转
+      this.queryParams.deptId = value[value.length - 1];
+      this.getData(DEPT_CHANGED);
+      let node = this.$refs["cascader"].panel.getNodeByValue(value);
+      this.drawMap(node, isLocated);
+    },
+
+    // 查找指定deptId的所有父节点id
+    findParentNodeIds (tree, deptId, result) {
+      for (let node of tree) {
+        if (node.id === deptId) {
+          result.unshift(node.id);
+          return true;
+        }
+        if (node.children && node.children.length > 0) {
+          let isFind = this.findParentNodeIds(node.children, deptId, result);
+          if (isFind) {
+            result.unshift(node.id);
+            return true;
+          }
+        }
+      }
+      return false;
+    },
+
+
+
+    // 添加坐标点图层
+    addDeptLayer (nextDeptSet) {
+      let features = [];
+      nextDeptSet.forEach(item => {
+        let fs = gis.getFeature(item, this.yellowIcon)
+        features.push(fs);
+      });
+      console.log(features, 88);
+      gis.getVectorLayerByFs(features)
+      gis.mapSetFit(features)
+
+    },
+    // 添加区县边界
+    addCountyBorder (deptIds) {
+      gis.addImageLayer(this.mapGeoServerUrl, this.countyBorderLayerName, deptIds)
+    },
+    // 添加乡镇边界
+    addTownBorder (deptIds) {
+      gis.addImageLayer(this.mapGeoServerUrl, this.townBorderLayerName, deptIds)
+    },
+    // 添加村边界
+    addVillageBorder (deptIds) {
+      gis.addImageLayer(this.mapGeoServerUrl, this.villageBorderLayerName, deptIds)
+    },
+    // 获取geoserver的地址
+    getGeoServerUrl () {
+      // 获取geoserver的地址
+      getConfigKey("system.geoServer.url").then(response => {
+        this.mapGeoServerUrl = response.msg;
+      });
+      // 获取区县边界图层名称
+      getConfigKey("geoserver.layer.countyBorder").then(response => {
+        this.countyBorderLayerName = response.msg;
+      });
+      // 获取乡镇边界的图层名称
+      getConfigKey("geoserver.layer.townBorder").then(response => {
+        this.townBorderLayerName = response.msg;
+      });
+      // 获取村边界的图层名称
+      getConfigKey("geoserver.layer.villageBorder").then(response => {
+        this.villageBorderLayerName = response.msg;
+      });
+      // 获取组边界的图层名称
+      getConfigKey("geoserver.layer.groupBorder").then(response => {
+        this.groupBorderLayerName = response.msg;
+      });
+    }
+  }
+};

src/views/resources/index.scss

@@ -0,0 +1,8 @@
+.map {
+  border: 1px solid red;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}

src/views/resources/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>