接口对接

src/api/common/uploadAttachment.js

@@ -51,7 +51,7 @@ export const extUploader = function () {
 
   // 内部方式上传
   this._Upload_inner = (url, data) => {
-    console.log('使用内部上传: ' + process.env.VUE_APP_BASE_API + url);
+    //console.log('使用内部上传: ' + process.env.VUE_APP_BASE_API + url);
     return request({
       url: url,
       method: 'post',
@@ -66,7 +66,7 @@ export const extUploader = function () {
       data.append('token', this._token);
     else
       data.token = this._token;
-    console.log('使用外部上传: ' + this._remoteHost + url);
+    //console.log('使用外部上传: ' + this._remoteHost + url);
     return request({
       url: url,
       method: 'post',
@@ -86,13 +86,13 @@ export const extUploader = function () {
         this._token = resp.data;
         this._remoteHost = resp.fileServerAddress;
         this._usingExternal = true;
-        console.log('使用外部上传: ' + this._remoteHost);
+        //console.log('使用外部上传: ' + this._remoteHost);
       }
       else {
         this._token = null;
         this._remoteHost = null;
         this._usingExternal = false;
-        console.log('使用内部上传');
+        //console.log('使用内部上传');
       }
       this._supportExternal = true;
     }).catch(() => {
@@ -100,7 +100,7 @@ export const extUploader = function () {
       this._remoteHost = null;
       this._usingExternal = false;
       this._supportExternal = false;
-      console.log('未配置文件外部服务, 将使用内部上传');
+      //console.log('未配置文件外部服务, 将使用内部上传');
     });
   };
 
@@ -151,7 +151,7 @@ export const extUploader = function () {
       throw '请先调用Init进行初始化';
     if (this._UsingExternal()) {
       return this._Upload_external(extUrl, data).catch(() => {
-        console.log('外部上传失败! 尝试转为内部上传');
+        //console.log('外部上传失败! 尝试转为内部上传');
         this.ForceDisableExternal();
         return this._Upload_inner(innerUrl, data);
       });

src/api/index.js

@@ -1 +1,9 @@
 import request from '@/utils/request';
+
+export function getStatistic (query) {
+    return request({
+        url: '/api/asset/three/statistic',
+        method: 'get',
+        params: query
+    })
+}

src/api/login.js

@@ -37,4 +37,4 @@ export function logout () {
     url: '/api/logout',
     method: 'post'
   })
-}
+}

src/components/charts/bar-dimensional/index.html

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

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

@@ -0,0 +1,378 @@
+import * as echarts from 'echarts';
+import elementResizeDetectorMaker from 'element-resize-detector';
+import fa from "element-ui/src/locale/lang/fa";
+export default {
+  props: {
+    id: {
+      type: String,
+      default: 'bar'
+    },
+    data: {
+      type: Array,
+      default: function () {
+        return [
+          {
+            name: '1月',
+            value: '10'
+          },
+          {
+            name: '2月',
+            value: '19'
+          }
+        ];
+      }
+    },
+    unit: {
+      type: String,
+      default: '单位：万元'
+    },
+    color: {
+      type: Array,
+      default: function () {
+        return ['rgba(15, 252, 252, 1)', 'rgba(53, 197, 124, 1)']
+      }
+    },
+    barBorderRadius: {
+      type: Array,
+      default: function () {
+        return [0, 0, 0, 0]
+      }
+    }
+  },
+  data () {
+    return {
+      chart: null
+    };
+  },
+  mounted () {
+    this.initChart();
+  },
+  computed: {
+  },
+  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 () {
+      let xAxisData = [];
+      let data = [];
+      this.data.forEach(item => {
+        xAxisData.push(item.name)
+        data.push(item.value)
+      });
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - 9, shape.y - 9];
+          const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 9];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+              .moveTo(c0[0], c0[1])
+              .lineTo(c1[0], c1[1])
+              .lineTo(c2[0], c2[1])
+              .lineTo(c3[0], c3[1])
+              .closePath();
+        },
+      });
+      const CubeRight = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9];
+          const c4 = [shape.x + 18, shape.y - 9];
+          ctx
+              .moveTo(c1[0], c1[1])
+              .lineTo(c2[0], c2[1])
+              .lineTo(c3[0], c3[1])
+              .lineTo(c4[0], c4[1])
+              .closePath();
+        },
+      });
+      const CubeTop = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + 18, shape.y - 9];
+          const c3 = [shape.x + 9, shape.y - 18];
+          const c4 = [shape.x - 9, shape.y - 9];
+          ctx
+              .moveTo(c1[0], c1[1])
+              .lineTo(c2[0], c2[1])
+              .lineTo(c3[0], c3[1])
+              .lineTo(c4[0], c4[1])
+              .closePath();
+        },
+      });
+      echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      echarts.graphic.registerShape("CubeRight", CubeRight);
+      echarts.graphic.registerShape("CubeTop", CubeTop);
+      const MAX = [
+        500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500,
+      ];
+      const VALUE = [
+        201, 123, 379, 234, 165, 123, 379, 234, 165, 379, 234, 165,
+      ];
+      const option = {
+        // backgroundColor: "#010d3a",
+        title: {
+          text: "",
+          top: 32,
+          left: 18,
+          textStyle: {
+            color: "#00F6FF",
+            fontSize: 24,
+          },
+        },
+        grid: {
+          left: "0%",
+          right: "0%",
+          bottom: "5%",
+          top: "15%",
+          containLabel: true,
+          z: 22,
+        },
+        xAxis: {
+          splitArea: {
+            show: false,
+            areaStyle: {
+              color: ['RGBA(13, 31, 64, 1)']
+            }
+          },
+          splitLine: {
+            show: false,
+            lineStyle: {
+              color: ['rgba(18, 40, 83, 1)'],
+              width: 100
+            }
+          },
+          type: "category",
+          gridIndex: 0,
+          data: [
+            "A镇",
+            "A镇",
+            "A镇",
+            "A镇",
+            "A镇",
+            "A镇",
+            "A镇"
+          ],
+          axisTick: {
+            alignWithLabel: true,
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#0c3b71",
+            },
+          },
+          axisLabel: {
+            show: true,
+            color: 'rgba(185, 211, 235, 1)'
+          }
+        },
+        yAxis: {
+          name: this.unit,
+          type: "value",
+          nameTextStyle: {
+            color: 'rgba(185, 211, 235, 1)'
+          },
+          axisLabel: {
+            formatter: "{value}",
+            textStyle: {
+              color: "rgba(185, 211, 235, 1)",
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#27b4c2",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#11366e",
+            },
+          },
+        },
+        series: [
+          {
+            type: "custom",
+            renderItem: function (params, api) {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: "rgba(7,29,97,.6)",
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: "rgba(10,35,108,.7)",
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: "rgba(11,42,106,.8)",
+                    },
+                  },
+                ],
+              };
+            },
+            data: MAX,
+          },
+          {
+            type: "custom",
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#10fafa",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0a97a1",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0a97a2",
+                        },
+                        {
+                          offset: 1,
+                          color: "#10fafa",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#10fcfc",
+                        },
+                        {
+                          offset: 1,
+                          color: "#10fcfc",
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: VALUE,
+          },
+          {
+            type: "bar",
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            itemStyle: {
+              color: "transparent",
+            },
+            data: MAX,
+          },
+        ],
+      };
+
+      this.chart.setOption(option);
+      this.initResizeCallBack();
+
+    }
+  }
+};

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

@@ -0,0 +1,6 @@
+.chart {
+  overflow: visible;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+}

src/components/charts/bar-dimensional/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/index.js

@@ -30,6 +30,12 @@ export default {
       default: function () {
         return ['rgba(15, 252, 252, 1)', 'rgba(53, 197, 124, 1)']
       }
+    },
+    barBorderRadius: {
+      type: Array,
+      default: function () {
+        return [0, 0, 0, 0]
+      }
     }
   },
   data () {
@@ -38,7 +44,9 @@ export default {
     };
   },
   mounted () {
-    this.initChart();
+    setTimeout(()=>{
+      this.initChart();
+    },1000)
   },
   computed: {
   },
@@ -59,10 +67,14 @@ export default {
     chartSetOption () {
       let xAxisData = [];
       let data = [];
+      let bgData = [];
       this.data.forEach(item => {
         xAxisData.push(item.name)
         data.push(item.value)
+        bgData.push(100)
       });
+
+      //console.log(data);
       const option = {
         color: ["#3398DB"],
         tooltip: {
@@ -167,7 +179,7 @@ export default {
         ],
         series: [
           {
-            name: "合格率",
+            name: "面积",
             type: "bar",
             barWidth: 15,
             xAxisIndex: 0,
@@ -179,6 +191,7 @@ export default {
             },
             itemStyle: {
               normal: {
+                barBorderRadius: this.barBorderRadius,
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                   {
                     offset: 0,
@@ -216,11 +229,10 @@ export default {
                 style: api.style()
               };
             },
-            data: [100, 100, 100, 100, 100, 100, 100]
-          },
-
-        ],
-      };;
+            data: bgData
+          }
+        ]
+      };
       this.chart.setOption(option);
       this.initResizeCallBack();
 

src/components/charts/pie/index.js

@@ -6,6 +6,14 @@ export default {
       type: String,
       default: 'pie'
     },
+    titleNum: {
+      type: String,
+      default: "1000 万元"
+    },
+    title: {
+      type: String,
+      default: "总债务"
+    },
     data: {
       type: Array,
       default: function () {
@@ -96,7 +104,7 @@ export default {
       const option = {
         title: [
           {
-            text: "总债务",
+            text: this.title,
             left: "center",
             top: "40%",
             padding: [0, 0],
@@ -107,7 +115,7 @@ export default {
             },
           },
           {
-            text: "1000 万元",
+            text: this.titleNum,
             left: "center",
             top: "50%",
             padding: [0, 0],

src/components/footer/index.html

@@ -0,0 +1 @@
+<div class="header"></div>

src/components/footer/index.js

@@ -0,0 +1,35 @@
+
+export default {
+
+  computed: {
+  },
+  props: {
+    callBack: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: '我是标题'
+    },
+    back: {
+      type: Boolean,
+      default: false
+    },
+    backName: {
+      type: String,
+      default: '返回'
+    }
+  },
+  data () {
+    return {
+    };
+  },
+  created () {
+  },
+  methods: {
+    goback () {
+      this.$router.go(-1)
+    }
+  }
+};

src/components/footer/index.scss

@@ -0,0 +1,9 @@
+.header {
+  position: absolute;
+  bottom: 0;
+  background: url('footer_bk.png');
+  background-size: 100% 100%;
+  width: 100%;
+  height: 20px;
+  z-index: 9;
+}

src/components/footer/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/headerNew/index.html

@@ -0,0 +1,9 @@
+<div class="header">
+  <div class="left">
+    <slot name="left"></slot>
+  </div>
+  <p class="title">{{title}}</p>
+  <div class="right">
+    <div v-if="callBack" @click="goback" class="back"></div>
+  </div>
+</div>

src/components/headerNew/index.js

@@ -0,0 +1,35 @@
+
+export default {
+
+  computed: {
+  },
+  props: {
+    callBack: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: '我是标题'
+    },
+    back: {
+      type: Boolean,
+      default: false
+    },
+    backName: {
+      type: String,
+      default: '返回'
+    }
+  },
+  data () {
+    return {
+    };
+  },
+  created () {
+  },
+  methods: {
+    goback () {
+      this.$router.go(-1)
+    }
+  }
+};

src/components/headerNew/index.scss

@@ -0,0 +1,47 @@
+.header {
+  position: relative;
+  background: url('./header_bk.png');
+  background-size: 100% 100%;
+  width: 100%;
+  height: 90px;
+  z-index: 9;
+
+  .title {
+    overflow: visible;
+    padding: 0 20px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(calc(-50% + 7.5px), -50%);
+    font-size: 30px;
+    letter-spacing: 15px;
+    // font-style: italic;
+    font-weight: 600;
+    background: linear-gradient(180deg, #FFFFFF 38.330078125%, #9be6f4 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    color: transparent;
+  }
+
+  .left {
+    position: absolute;
+    left: 20px;
+    top: 20px;
+  }
+
+  .right {
+    position: absolute;
+    right: 20px;
+    bottom: 10px;
+
+    .back {
+      cursor: pointer;
+      background: url('./back.png');
+      background-size: 100% 100%;
+      width: 42px;
+      height: 42px;
+    }
+  }
+
+
+}

src/components/headerNew/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/left/index.html

@@ -0,0 +1 @@
+<div class="header"></div>

src/components/left/index.js

@@ -0,0 +1,35 @@
+
+export default {
+
+  computed: {
+  },
+  props: {
+    callBack: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: '我是标题'
+    },
+    back: {
+      type: Boolean,
+      default: false
+    },
+    backName: {
+      type: String,
+      default: '返回'
+    }
+  },
+  data () {
+    return {
+    };
+  },
+  created () {
+  },
+  methods: {
+    goback () {
+      this.$router.go(-1)
+    }
+  }
+};

src/components/left/index.scss

@@ -0,0 +1,9 @@
+.header {
+  position: absolute;
+  bottom: 0;
+  background: url('left_bk.png');
+  background-size: 100% 100%;
+  width: 20px;
+  height: 100%;
+  z-index: 9;
+}

src/components/left/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/pannelNew/index.html

@@ -0,0 +1,25 @@
+<div class="pannel" :style="style" :class="[bkClass]">
+  <div class="header_box">
+
+    <div class="header row align_item_center">
+      <div v-if="title" class="title_bk">
+<!--        <i class="icon"></i>-->
+        <p>{{title}}</p>
+      </div>
+      <div class="more">
+        <slot name="header"></slot>
+        <div v-show="flexIble" class="flexIble hover_pointer" :class="[isOpen ? 'flexIble_open' : '']" @click="open"></div>
+      </div>
+    </div>
+    <div class="light"></div>
+  </div>
+  <div class="body">
+    <div>
+      <slot></slot>
+    </div>
+    <div class="bottom_line">
+      <div class="left_sign"></div>
+      <div class="right_sign"></div>
+    </div>
+  </div>
+</div>

src/components/pannelNew/index.js

@@ -0,0 +1,54 @@
+export default {
+  props: {
+    // 定义标题
+    title: {
+      type: String,
+      default: '我是标题'
+    },
+    bkClass: {
+      type: String,
+      default: 'bk_normal'
+    },
+    /**
+     * 是否可以伸缩
+     */
+    flexIble: {
+      type: Boolean,
+      default: false
+    },
+    // 定义跳转页面url
+    uri: {
+      type: String,
+      default: ''
+    },
+    // 定义组件高度
+    height: {
+      type: String,
+      default: '300'
+    },
+    // 定义组件高度
+    width: {
+      type: String,
+      default: '430'
+    }
+  },
+  computed: {
+    style: function () {
+      return {
+        height: this.height + 'px',
+        width: this.isOpen ? 1000 + 'px' : this.width + 'px'
+      };
+    }
+  },
+  data () {
+    return {
+      // 是否展开
+      isOpen: false
+    };
+  },
+  methods: {
+    open () {
+      this.isOpen = !this.isOpen
+    }
+  }
+};

src/components/pannelNew/index.scss

@@ -0,0 +1,153 @@
+.pannel {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+
+  // 頭部區域
+  .header_box {
+    position: relative;
+    //height: 35px;
+    overflow: visible !important;
+
+    .top_line {
+      display: flex;
+      justify-content: space-between;
+      background-color: rgba(22, 60, 114, 1);
+      width: 100%;
+      height: 2px;
+
+      .left_sign {
+        height: 2px;
+        width: 13px;
+        background-color: rgba(53, 143, 255, 1);
+      }
+
+      .right_sign {
+        height: 2px;
+        width: 13px;
+        background-color: rgba(53, 143, 255, 1);
+      }
+    }
+
+    .header {
+      margin-top: 2px;
+      height: 45px;
+      background: #01142c url("header_bg.png") no-repeat -8px center;
+      background-size: 102% auto;
+      justify-content: space-between;
+
+      .title_bk {
+        // font-style: italic;
+        font-weight: 600;
+        height: 50px;
+        margin-left: 20px;
+        line-height: 38px;
+        text-align: center;
+
+        .icon {
+          display: block;
+          background: url('./icon.png');
+          background-size: 100% 100%;
+          width: 18px;
+          height: 18px;
+        }
+
+        p {
+          margin-left: 10px;
+        }
+      }
+
+      .more {
+        margin-right: 20px;
+      }
+    }
+
+    .light {
+      position: absolute;
+      bottom: -2px;
+      left: 30px;
+      background: url('./light.png');
+      background-size: 100% 100%;
+      width: 280px;
+      height: 30px;
+      animation: lightmove 4s infinite;
+    }
+  }
+
+  // 内容区域
+  .body {
+    //margin: 2px;
+    padding: 10px;
+    width: 100%;
+    position: relative;
+    flex: 1;
+    background-color: #01142c;
+    overflow: hidden;
+
+    .bottom_line {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      display: flex;
+      justify-content: space-between;
+      background-color: rgba(22, 60, 114, 1);
+      width: 100%;
+      height: 2px;
+
+      .left_sign {
+        height: 2px;
+        width: 13px;
+        background-color: rgba(53, 143, 255, 1);
+      }
+
+      .right_sign {
+        height: 2px;
+        width: 13px;
+        background-color: rgba(53, 143, 255, 1);
+      }
+    }
+
+    div {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+.flexIble {
+  z-index: 4;
+  width: 16px;
+  height: 16px;
+  background: url('./close.png');
+  background-size: 100% 100%;
+}
+
+.flexIble_open {
+  width: 16px;
+  height: 16px;
+  background: url('./open.png') !important;
+  background-size: 100% 100%;
+}
+
+@keyframes lightmove {
+
+  /* 动画关键帧 */
+  0% {
+    opacity: 1;
+    transform: translateX(0px);
+    /* 样式 */
+  }
+
+  50% {
+    opacity: 0.2;
+    transform: translateX(170px);
+  }
+
+  /* 。。。 */
+  100% {
+    opacity: 1;
+    transform: translateX(0px);
+    /* 样式 */
+  }
+}

src/components/pannelNew/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/right/index.html

@@ -0,0 +1 @@
+<div class="header"></div>

src/components/right/index.js

@@ -0,0 +1,35 @@
+
+export default {
+
+  computed: {
+  },
+  props: {
+    callBack: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: '我是标题'
+    },
+    back: {
+      type: Boolean,
+      default: false
+    },
+    backName: {
+      type: String,
+      default: '返回'
+    }
+  },
+  data () {
+    return {
+    };
+  },
+  created () {
+  },
+  methods: {
+    goback () {
+      this.$router.go(-1)
+    }
+  }
+};

src/components/right/index.scss

@@ -0,0 +1,10 @@
+.header {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  background: url('right_bk.png');
+  background-size: 100% 100%;
+  width: 20px;
+  height: 100%;
+  z-index: 9;
+}

src/components/right/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/directive/index.js

@@ -2,7 +2,7 @@
 export default {
   increase: { // 自增
     inserted: function (el) {
-      console.log('【inserted】 inserted');
+      //console.log('【inserted】 inserted');
       const endText = el.innerText;
       // const endText = el.dataset.value;
       const end = el.innerText * 1;

src/router/index.js

@@ -36,6 +36,12 @@ const routes = [
     path: '/property',
     name: 'property',
     component: () => import('@/views/property/index.vue')
+  },
+  // // 三清五治
+  {
+    path: '/sanqing',
+    name: 'sanqing',
+    component: () => import('@/views/sanqing/index.vue')
   }
 ];
 

src/store/modules/user.js

@@ -223,7 +223,7 @@ const user = {
           }
 
           getConfig().then((num) => {
-            // console.log(res)
+            // //console.log(res)
             if (num && num.code == 200) {
               let content = num.data;
               commit('SET_DEPTLEVEL', content.deptLevel)

src/style/_base.scss

@@ -124,4 +124,4 @@ body {
   background-color: rgba(6, 24, 24, 0.585);
   border-radius: 4px;
   box-shadow: 0px 0px 13px 0px #48B7FF inset;
-}
+}

src/utils/request.js

@@ -43,7 +43,7 @@ service.interceptors.request.use(config => {
   }
   return config
 }, error => {
-  //console.log(error)
+  ////console.log(error)
   Promise.reject(error)
 })
 
@@ -87,11 +87,11 @@ service.interceptors.response.use(res => {
     }
 
   } catch (e) {
-    console.log(e)
+    //console.log(e)
   }
 },
   error => {
-    //console.log('err' + error)
+    ////console.log('err' + error)
     let { message } = error;
     if (message == "Network Error") {
       message = "后端接口连接异常";

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

@@ -21,7 +21,7 @@ export default {
   },
   methods: {
     tabChange (info) {
-      console.log(info);
+      //console.log(info);
       this.tabIndex = info.id
     }
   }

src/views/login/index.js

@@ -143,7 +143,7 @@ export default {
                 }
               })
               .catch((error) => {
-                console.log(error);
+                //console.log(error);
                 const errorString = error + "";
                 this.loading = false;
                 if (errorString.indexOf("证书无效") > -1) {

src/views/nav/data.js

@@ -1,17 +1,26 @@
 export default [
-  {
-    icon: require('./1.png'),
-    path: '/capital',
-    name: '资金一张图'
-  },
-  {
-    icon: require('./3.png'),
-    path: '/property',
-    name: '资产一张图'
-  },
-  {
-    icon: require('./2.png'),
-    path: '/resources',
-    name: '资源一张图'
-  }
-]
+    [
+        {
+          icon: require('./1.png'),
+          path: '/capital',
+          name: '资金一张图'
+        },
+        {
+          icon: require('./3.png'),
+          path: '/property',
+          name: '资产一张图'
+        },
+        {
+          icon: require('./2.png'),
+          path: '/resources',
+          name: '资源一张图'
+        },
+    ],
+    [
+      {
+        icon: require('./2.png'),
+        path: '/sanqing',
+        name: '三清五治一张图'
+      }
+    ]
+]

src/views/nav/index.html

@@ -2,10 +2,17 @@
   <Header title="卧龙区集体资产监管一张图">
   </Header>
   <div class="main">
-    <div v-for="item in data"  class="item hover_pointer" @click="jump(item)">
-      <img :src="item.icon" alt="">
-      <p class="name">{{item.name}}</p>
-    </div>
+    <el-carousel trigger="click" height="580px" :autoplay="false">
+      <el-carousel-item v-for="(item,index) in data" :key="index">
+        <div class="flex_block">
+          <div class="item hover_pointer" v-for="(item2,index2) in item" :key="index2 + 'item2'" @click="jump(item2)">
+            <img :src="item2.icon" alt="">
+            <p class="name">{{item2.name}}</p>
+          </div>
+        </div>
+      </el-carousel-item>
+    </el-carousel>
+
   </div>
   <div class="left_light"></div>
   <div class="right_light"></div>

src/views/nav/index.scss

@@ -30,7 +30,13 @@
   left: 50%;
   top: 26%;
   transform: translateX(-50%);
+  width: 70%;
+}
+
+.flex_block{
   display: flex;
+  align-items: center;
+  padding: 2vh 4vh;
 }
 
 .item {
@@ -63,4 +69,8 @@
     font-size: 36px;
     margin-bottom: 50px;
   }
-}
+}
+
+::v-deep .el-carousel__arrow{
+  font-size: 32px;
+}

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

@@ -29,7 +29,7 @@ export default {
   },
   methods: {
     tabChange (info) {
-      console.log(info);
+      //console.log(info);
       this.tabIndex = info.id
     }
   }

src/views/property/main-gis/index.js

@@ -28,7 +28,7 @@ export default {
       deptLayer: "",                  // 坐标点图层
       countyBorderLayerName: "",      // 区县边界图层名称
       townBorderLayerName: "",        // 乡镇边界图层名称
-      villageBorderLayerName: "",     // 村边界图层名称
+      //villageBorderLayerName: "",     // 村边界图层名称
       groupBorderLayerName: "",       // 组边界图层名称
       LegendData: [
         {
@@ -446,7 +446,7 @@ export default {
       let features = [];
       permanentList.forEach(item => {
         if (item.theGeom != null && item.theGeom !== '') {
-          // console.log(222, useType, item);
+          // //console.log(222, useType, item);
           const { useType } = item
           let icon = iconMap[useType + '']
           let fs = gis.getFeature2(item, icon)
@@ -459,9 +459,9 @@ export default {
       gis.mapSetFit(features)
     },
     // 添加村边界
-    addVillageBorder (deptId) {
-      gis.addImageLayer(this.mapGeoServerUrl, this.villageBorderLayerName, deptId)
-    },
+    // addVillageBorder (deptId) {
+    //   gis.addImageLayer(this.mapGeoServerUrl, this.villageBorderLayerName, deptId)
+    // },
     // 获取geoserver的地址
     getGeoServerUrl () {
       // 获取geoserver的地址
@@ -669,7 +669,7 @@ export default {
     },
     // 添加乡镇边界
     addTownBorder (deptIds) {
-      console.log(this.townBorderLayerName);
+      //console.log(this.townBorderLayerName);
       gis.addImageLayer(this.mapGeoServerUrl, this.townBorderLayerName, deptIds)
     },
     // 添加村边界

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

@@ -29,7 +29,7 @@ export default {
   },
   methods: {
     tabChange (info) {
-      console.log(info);
+      //console.log(info);
       this.tabIndex = info.id
     }
   }

src/views/resources/main-gis/index.js

@@ -285,18 +285,18 @@ export default {
     addTownBorder (deptIds) {
       gis.addImageLayer(this.mapGeoServerUrl, this.townBorderLayerName, deptIds)
     },
-    // 添加村边界
-    addVillageBorder (deptIds) {
-      gis.addImageLayer(this.mapGeoServerUrl, this.villageBorderLayerName, deptIds)
-    },
-    // 获取资源列表
-    getResourceList (deptId) {
-      getResourceListByDeptId(deptId).then(response => {
-        if (response.data && response.data.length > 0) {
-          this.addResourceLayer(response.data);
-        }
-      });
-    },
+    // // 添加村边界
+    // addVillageBorder (deptIds) {
+    //   gis.addImageLayer(this.mapGeoServerUrl, this.villageBorderLayerName, deptIds)
+    // },
+    // // 获取资源列表
+    // getResourceList (deptId) {
+    //   getResourceListByDeptId(deptId).then(response => {
+    //     if (response.data && response.data.length > 0) {
+    //       this.addResourceLayer(response.data);
+    //     }
+    //   });
+    // },
     // 获取geoserver的地址
     getGeoServerUrl () {
       // 获取geoserver的地址
@@ -391,7 +391,7 @@ export default {
       // // 获取资源列表
       this.getResourceList(deptId);
       let dept2 = this.addrOptions[0];
-      console.log(this.addrOptions, 'this.addrOptions');
+      //console.log(this.addrOptions, 'this.addrOptions');
       if (dept2.deptLevel === '5') {
         // 登录身份为市级领导
         this.userRole = 'cityLeader';
@@ -543,7 +543,7 @@ export default {
     },
     // 创建矢量数据源
     addDeptLayer (nextDeptSet, locationIcon) {
-      console.log('nextDeptSet', nextDeptSet);
+      //console.log('nextDeptSet', nextDeptSet);
       let features = [];
       nextDeptSet.forEach(item => {
         let fs = gis.getFeature(item, this.yellowIcon)

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

@@ -0,0 +1,64 @@
+<div class="buttom2">
+    <div>
+        <div class="flex_main">
+            <i></i>
+            <p class="tt">集体资源资产统计</p>
+            <div class="flex_block">
+                <p>数量</p>
+                <p>{{data.jtzyzc.num}}个</p>
+            </div>
+            <div class="flex_block">
+                <p>用地面积</p>
+                <p>{{data.jtzyzc.ydmj}}亩</p>
+            </div>
+            <div class="flex_block">
+                <p>建筑面积</p>
+                <p>{{data.jtzyzc.jzmj}}㎡</p>
+            </div>
+        </div>
+        <div class="flex_main">
+            <i></i>
+            <p class="tt">农业设施设备统计</p>
+            <div class="flex_block">
+                <p>数量</p>
+                <p>{{data.nysssb.num}}个</p>
+            </div>
+            <div class="flex_block">
+                <p>用地面积</p>
+                <p>{{data.nysssb.ydmj}}亩</p>
+            </div>
+            <div class="flex_block">
+                <p>建筑面积</p>
+                <p>{{data.nysssb.jzmj}}㎡</p>
+            </div>
+        </div>
+        <div class="flex_main">
+            <i></i>
+            <p class="tt">农户资产统计</p>
+            <div class="flex_block">
+                <p>数量</p>
+                <p>{{data.nhzc.num}}个</p>
+            </div>
+            <div class="flex_block">
+                <p>用地面积</p>
+                <p>{{data.nhzc.ydmj}}亩</p>
+            </div>
+            <div class="flex_block">
+                <p>建筑面积</p>
+                <p>{{data.nhzc.jzmj}}㎡</p>
+            </div>
+        </div>
+    </div>
+
+    <div>
+        <div class="flex_main_right">
+            <p>{{data.xy23}}<span>万元</span></p>
+            <p>2023年盘活效益</p>
+        </div>
+
+        <div class="flex_main_right">
+            <p>{{data.xy24}}<span>万元</span></p>
+            <p>2024年盘活效益</p>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,24 @@
+import BlockValue from '@/components/value/index.vue';
+export default {
+  components: {
+    BlockValue
+  },
+  props: {
+    data: {
+      type: Array,
+      default: function () {
+        return []
+      }
+    }
+  },
+  data () {
+    return {
+    };
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+  }
+};

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

@@ -0,0 +1,89 @@
+.buttom2 {
+  width: 960px;
+  display: flex;
+  justify-content: space-between;
+  .flex_main{
+    background: url("bg.png") no-repeat 10px center;
+    background-size: calc(100% - 10px) 100%;
+    width: 220px;
+    height: 150px;
+    padding: 15px 15px 15px 25px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    margin-bottom: 15px;
+    position: relative;
+    .flex_block{
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      p:nth-child(1){
+        color: #e6f1ff;
+      }
+    }
+    .tt{
+      text-shadow: 2px 2px 4px #000000;
+      font-size: 18px;
+      font-weight: bold;
+    }
+    i{
+      display: block;
+      height: 100%;
+      width: 5px;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+    &:nth-child(1){
+      i{
+        background-color: #00d6f8;
+      }
+      .flex_block{
+        p:nth-child(2){
+          color: #00d6f8;
+        }
+      }
+    }
+    &:nth-child(2){
+      i{
+        background-color: #f7cc3a;
+      }
+      .flex_block{
+        p:nth-child(2){
+          color: #f7cc3a;
+        }
+      }
+    }
+    &:nth-child(3){
+      i{
+        background-color: #04e26f;
+      }
+      .flex_block{
+        p:nth-child(2){
+          color: #04e26f;
+        }
+      }
+    }
+  }
+
+  .flex_main_right{
+    background: url("bg2.png") no-repeat center;
+    background-size: 100% 100%;
+    width: 220px;
+    height: 100px;
+    margin-bottom: 15px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-evenly;
+    p:nth-child(1){
+      color: #01d5f8;
+      font-size: 26px;
+      font-weight: bold;
+      span{
+        font-size: 14px;
+      }
+    }
+  }
+
+}

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

@@ -0,0 +1,11 @@
+<Pannel title="资金支出分析" height="340" flexIble>
+  <div class="full">
+    <div class="buttom">
+      <Pie
+        :title="'总资产'"
+        :titleNum="'167万元'"
+        :data="data"
+      ></Pie>
+    </div>
+  </div>
+</Pannel>

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

@@ -0,0 +1,34 @@
+import Pannel from '@/components/pannelNew/index.vue';
+import Pie from '@/components/charts/pie/index.vue';
+
+export default {
+  components: {
+    Pie,
+    Pannel
+  },
+  props: {
+    data: {
+      type: Array,
+      default: function () {
+        return []
+      }
+    }
+  },
+  data () {
+    return {
+      pannelTabData: [],
+      tabIndex: '1'
+    };
+  },
+  created () {
+  },
+  mounted () {
+
+  },
+  methods: {
+    tabChange (info) {
+      //console.log(info);
+      this.tabIndex = info.id
+    }
+  }
+};

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

@@ -0,0 +1,12 @@
+<Pannel title="农业设施设备" height="300">
+  <div class="full">
+    <div class="buttom">
+      <Bar id="bar3"
+           :color="['#01d4f8', '#2194ff']"
+           :barBorderRadius="[15, 15, 15, 15]"
+           :data="data"
+           unit="单位：亩"
+      ></Bar>
+    </div>
+  </div>
+</Pannel>

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

@@ -0,0 +1,32 @@
+import Pannel from '@/components/pannelNew/index.vue';
+import Bar from '@/components/charts/bar/index.vue';
+
+export default {
+  components: {
+    Bar,
+    Pannel
+  },
+  props: {
+    data: {
+      type: Array,
+      default: function () {
+        return []
+      }
+    }
+  },
+  data () {
+    return {
+      nysssbDeptList:[]
+    };
+  },
+  created () {
+  },
+  mounted () {
+
+  },
+  methods: {
+    tabChange (info) {
+      this.tabIndex = info.id
+    }
+  }
+};

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

@@ -0,0 +1,12 @@
+<Pannel title="集体资源资产" height="300">
+  <div class="full">
+    <div class="buttom">
+      <Bar
+              :color="['#f7cc3a', '#f7803f']"
+              :barBorderRadius="[15, 15, 15, 15]"
+              :data="data"
+              unit="单位：亩"
+      ></Bar>
+    </div>
+  </div>
+</Pannel>

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

@@ -0,0 +1,29 @@
+import Pannel from '@/components/pannelNew/index.vue';
+import Bar from '@/components/charts/bar/index.vue';
+
+export default {
+  components: {
+    Bar,
+    Pannel
+  },
+  props: {
+    data: {
+      type: Array,
+      default: function () {
+        return []
+      }
+    }
+  },
+  data () {
+    return {
+
+    };
+  },
+  created () {
+  },
+  mounted () {
+
+  },
+  methods: {
+  }
+};

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

@@ -0,0 +1,11 @@
+<Pannel title="农户资产分布" height="300">
+  <div class="full">
+    <div class="buttom">
+      <Bar id="bar6"
+           :color="['#01d4f8', '#2194ff']"
+           :data="data"
+           unit="单位：亩"
+      ></Bar>
+    </div>
+  </div>
+</Pannel>

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

@@ -0,0 +1,60 @@
+import Pannel from '@/components/pannelNew/index.vue';
+import Bar from '@/components/charts/bar-dimensional/index.vue';
+
+export default {
+  components: {
+    Bar,
+    Pannel
+  },
+  props: {
+    data: {
+      type: Array,
+      default: function () {
+        return []
+      }
+    }
+  },
+  data () {
+    return {
+      chartData: [
+        {
+          name: 'A镇',
+          value: '100'
+        },
+        {
+          name: 'A镇',
+          value: '190'
+        },
+        {
+          name: 'A镇',
+          value: '180'
+        },
+        {
+          name: 'A镇',
+          value: '170'
+        },
+        {
+          name: 'A镇',
+          value: '160'
+        },
+        {
+          name: 'A镇',
+          value: '150'
+        },
+        {
+          name: 'A镇',
+          value: '240'
+        }
+      ]
+    };
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+    tabChange (info) {
+      this.tabIndex = info.id
+    }
+  }
+};

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

@@ -0,0 +1,11 @@
+<Pannel title="农业设施设备分布" height="300">
+  <div class="full">
+    <div class="buttom">
+      <Bar id="bar5"
+           :color="['#01d4f8', '#2194ff']"
+           :data="data"
+           unit="单位：亩"
+      ></Bar>
+    </div>
+  </div>
+</Pannel>

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

@@ -0,0 +1,60 @@
+import Pannel from '@/components/pannelNew/index.vue';
+import Bar from '@/components/charts/bar/index.vue';
+
+export default {
+  components: {
+    Bar,
+    Pannel
+  },
+  props: {
+    data: {
+      type: Array,
+      default: function () {
+        return []
+      }
+    }
+  },
+  data () {
+    return {
+      chartData: [
+        {
+          name: 'A镇',
+          value: '100'
+        },
+        {
+          name: 'A镇',
+          value: '190'
+        },
+        {
+          name: 'A镇',
+          value: '180'
+        },
+        {
+          name: 'A镇',
+          value: '170'
+        },
+        {
+          name: 'A镇',
+          value: '160'
+        },
+        {
+          name: 'A镇',
+          value: '150'
+        },
+        {
+          name: 'A镇',
+          value: '240'
+        }
+      ]
+    };
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+    tabChange (info) {
+      this.tabIndex = info.id
+    }
+  }
+};

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

@@ -0,0 +1,11 @@
+<Pannel title="集体资源资产分布" height="300">
+  <div class="full">
+    <div class="buttom">
+      <Bar id="bar4"
+            :color="['#f7cc3a', '#f7803f']"
+            :data="data"
+            unit="单位：亩"
+      ></Bar>
+    </div>
+  </div>
+</Pannel>

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

@@ -0,0 +1,57 @@
+import Pannel from '@/components/pannelNew/index.vue';
+import Bar from '@/components/charts/bar/index.vue';
+
+export default {
+  components: {
+    Bar,
+    Pannel
+  },
+  props: {
+    data: {
+      type: Array,
+      default: function () {
+        return []
+      }
+    }
+  },
+  data () {
+    return {
+      chartData: [
+        {
+          name: 'A镇',
+          value: '100'
+        },
+        {
+          name: 'A镇',
+          value: '190'
+        },
+        {
+          name: 'A镇',
+          value: '180'
+        },
+        {
+          name: 'A镇',
+          value: '170'
+        },
+        {
+          name: 'A镇',
+          value: '160'
+        },
+        {
+          name: 'A镇',
+          value: '150'
+        },
+        {
+          name: 'A镇',
+          value: '240'
+        }
+      ]
+    };
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+  }
+};

src/views/sanqing/comps/right/top/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/sanqing/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/sanqing/data.js

@@ -0,0 +1,28 @@
+export const comps = {
+  '1': {
+    left: [{
+      name: 'Left11',
+      data: []
+    },{
+      name: 'Left21',
+      data: []
+    },{
+      name: 'Left31',
+      data: []
+    }],
+    right: [{
+      name: 'Right11',
+      data: []
+    },{
+      name: 'Right21',
+      data: []
+    },{
+      name: 'Right31',
+      data: []
+    }],
+    buttom: [{
+      name: 'Bottom1',
+      data: {}
+    }]
+  }
+}

src/views/sanqing/index.html

@@ -0,0 +1,17 @@
+<div class="page">
+  <MainGis></MainGis>
+  <Header title="三清五治一张图" callBack></Header>
+  <!-- 项目初始化 -->
+  <div class="left_side col space_between zIndextop">
+    <component :is="item.name" v-for="(item, index) in currentComp.left" :key="index" :data="item.data"></component>
+  </div>
+  <div class="right_side col space_between zIndextop">
+    <component :is="item.name" v-for="(item, index) in currentComp.right" :key="index" :data="item.data"></component>
+  </div>
+  <div class="buttom_side row space_between zIndextop">
+    <component :is="item.name" v-for="(item, index) in currentComp.buttom" :key="index" :data="item.data"></component>
+  </div>
+  <Left></Left>
+  <Right></Right>
+  <Footer></Footer>
+</div>

src/views/sanqing/index.js

@@ -0,0 +1,112 @@
+import Header from '@/components/headerNew/index.vue';
+import Footer from '@/components/footer/index.vue';
+import Left from '@/components/left/index.vue';
+import Right from '@/components/right/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 Bottom1 from './comps/buttom/1/index.vue';
+import MainGis from './main-gis/index.vue';
+
+import { comps } from './data.js'
+
+import { getStatistic } from "@/api/index";
+import { getInfo } from "@/api/login";
+
+export default {
+  components: {
+    MainGis,
+    Header,
+    Footer,
+    Left,
+    Right,
+    Tabs,
+    Left11,
+    Left21,
+    Left31,
+    Right11,
+    Right21,
+    Right31,
+    Bottom1
+  },
+  data () {
+    return {
+      comps,
+      tab: '1',
+      allData: {}
+    };
+  },
+  computed: {
+    currentComp: function () {
+      return this.comps[this.tab]
+    }
+  },
+  created () {
+    getInfo().then(res => {
+      getStatistic({ deptId: res.user.deptId }).then((response) => {
+        response.data.jtzyzcDeptList.map(rr => {
+          this.currentComp.left[0].data.push({
+            name: rr.deptName,
+            value: rr.ydmj
+          })
+        })
+        response.data.nysssbDeptList.map(rr => {
+          this.currentComp.left[1].data.push({
+            name: rr.deptName,
+            value: rr.ydmj
+          })
+        })
+        response.data.nhzcDeptList.map(rr => {
+          this.currentComp.left[2].data.push({
+            name: rr.deptName,
+            value: rr.ydmj
+          })
+        })
+
+        response.data.jtzyzcTypeList.map(rr => {
+          this.currentComp.right[0].data.push({
+            name: rr.threeDetailType,
+            value: rr.ydmj
+          })
+        })
+        response.data.nysssbTypeList.map(rr => {
+          this.currentComp.right[1].data.push({
+            name: rr.threeDetailType,
+            value: rr.ydmj
+          })
+        })
+        response.data.nhzcTypeList.map(rr => {
+          this.currentComp.right[2].data.push({
+            name: rr.threeDetailType,
+            value: rr.ydmj
+          })
+        })
+
+        this.currentComp.buttom[0].data = {
+          jtzyzc: response.data.jtzyzc,//集体资源资产
+          nysssb: response.data.nysssb,//农业设施设备
+          nhzc: response.data.nhzc,
+          xy23: response.data.xy23,
+          xy24: response.data.xy24
+        }
+
+
+        console.log(this.currentComp)
+        this.allData = response.data;
+      });
+    })
+  },
+  mounted () {
+
+  },
+  methods: {
+    tabChange (info) {
+      this.tab = info.id;
+    }
+  }
+};

src/views/sanqing/index.scss

@@ -0,0 +1,11 @@
+.map {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.buttom_side {
+  top: 100px;
+  bottom: auto;
+}

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