首页完成

src/components/value/index.html

@@ -0,0 +1,6 @@
+<div class="block_value">
+  <div class="value_pos">
+    <div class="value nowrap‌">{{data.value}}</div>
+    <div class="name nowrap‌">{{data.name}}</div>
+  </div>
+</div>

src/components/value/index.js

@@ -0,0 +1,14 @@
+
+export default {
+  props: {
+    data: {
+      type: Object,
+      default: function () {
+        return {
+          name: '经营收入',
+          value: '716'
+        }
+      }
+    },
+  }
+};

src/components/value/index.scss

@@ -0,0 +1,37 @@
+.block_value {
+  background: url('./bk.png');
+  background-size: 100% 100%;
+  width: 130px;
+  height: 130px;
+  position: relative;
+
+  .value_pos {
+    position: absolute;
+    left: 50%;
+    top: 0;
+    transform: translateX(-50%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .value {
+      font-family: Arial;
+      font-weight: bold;
+      font-size: 24px;
+      color: #FFFFFF;
+      line-height: 30px;
+      text-shadow: 0px 3px 2px #05357D;
+    }
+
+    .name {
+      font-weight: 500;
+      font-size: 14px;
+      color: #B9D3EB;
+      text-shadow: 0px 3px 3px rgba(30, 63, 112, 0.6);
+      background: linear-gradient(180deg, #FEFFFF 17.4072265625%, #e0e9f9 99.6337890625%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  }
+
+}

src/components/value/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/style/_base.scss

@@ -94,6 +94,11 @@ body {
   border: 1px solid red;
 }
 
+.nowrap‌ {
+  white-space: nowrap;
+}
+
+
 .screen {
   width: 1920px;
   height: 1080px;

src/utils/auth.js

@@ -2,7 +2,7 @@ const TokenKey = 'Admin-Token';
 
 // 获取token
 export function getToken () {
-  return 'eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImM0MDZkM2Q0LTM5N2UtNGRjMi1hMDIyLTEzY2UwZGZkMDA3OCJ9.X2CyaATOQ8S811oh5uMWpD5WHeJ3Meya5E7TRoEmOukzoZy-U5AwmzRn7UJs_OY8IU3a-DGFZNZc---Vh336UQ'; // 将token保存在本地
+  return 'eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjFiMTk0ZmM0LWQxNWYtNGE2MC04OTg5LTRlZjZjY2JmZWI0MSJ9.Aie43ajYI4yvpSXAzv2Dk90liTuxg5u1ainKL_GNVptFPoYVtWBnDz0PC4pz6IIXspP5y08V1FCP2j2m48Mwhw'; // 将token保存在本地
 }
 // 保存token
 export function setToken (token) {

src/views/capital/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/capital/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/capital/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/capital/comps/buttom/1/index.scss

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

src/views/capital/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/capital/data.js

@@ -11,6 +11,7 @@ export const comps = {
       'Right31',
     ],
     'buttom': [
+      'Bottom1'
     ]
   },
   '2': {

src/views/capital/index.js

@@ -15,6 +15,7 @@ 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";
@@ -44,7 +45,8 @@ export default {
     Right12,
     Right22,
     Right32,
-    Bottom2
+    Bottom2,
+    Bottom1
   },
   data () {
     return {
@@ -137,10 +139,53 @@ export default {
       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 = [];
@@ -161,6 +206,10 @@ export default {
     addTownBorder (deptIds) {
       gis.addImageLayer(this.mapGeoServerUrl, this.townBorderLayerName, deptIds)
     },
+    // 添加村边界
+    addVillageBorder (deptIds) {
+      gis.addImageLayer(this.mapGeoServerUrl, this.villageBorderLayerName, deptIds)
+    },
     // 获取geoserver的地址
     getGeoServerUrl () {
       // 获取geoserver的地址