接口对接

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

@@ -45,7 +45,9 @@ export default {
     };
   },
   mounted () {
-    this.initChart();
+    setTimeout(()=>{
+      this.initChart();
+    },2000)
   },
   computed: {
   },
@@ -66,10 +68,14 @@ export default {
     chartSetOption () {
       let xAxisData = [];
       let data = [];
+      let max = [];
       this.data.forEach(item => {
         xAxisData.push(item.name)
         data.push(item.value)
       });
+      data.forEach(item => {
+        max.push(Math.max(...data))
+      });
       const CubeLeft = echarts.graphic.extendShape({
         shape: {
           x: 0,
@@ -129,12 +135,8 @@ export default {
       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 MAX = max;
+      const VALUE = data;
       const option = {
         // backgroundColor: "#010d3a",
         title: {
@@ -170,15 +172,7 @@ export default {
           },
           type: "category",
           gridIndex: 0,
-          data: [
-            "A镇",
-            "A镇",
-            "A镇",
-            "A镇",
-            "A镇",
-            "A镇",
-            "A镇"
-          ],
+          data: xAxisData,
           axisTick: {
             alignWithLabel: true,
           },

src/components/charts/bar/index.js

@@ -46,7 +46,7 @@ export default {
   mounted () {
     setTimeout(()=>{
       this.initChart();
-    },1000)
+    },2000)
   },
   computed: {
   },

src/components/charts/pie/index.js

@@ -14,6 +14,10 @@ export default {
       type: String,
       default: "总债务"
     },
+    showTit: {
+      type: Boolean,
+      default: true
+    },
     data: {
       type: Array,
       default: function () {
@@ -48,7 +52,9 @@ export default {
     };
   },
   mounted () {
-    this.initChart();
+    setTimeout(()=>{
+      this.initChart();
+    },2000)
   },
   computed: {
   },
@@ -71,6 +77,8 @@ export default {
       var echartData = [
         ...this.data
       ];
+      var that = this;
+      console.log(echartData)
       var rich = {
         yellow: {
           color: "rgba(185, 211, 235, 1)",
@@ -102,9 +110,13 @@ export default {
         },
       };
       const option = {
+        tooltip: {
+          trigger: "item"
+        },
         title: [
           {
             text: this.title,
+            show: this.showTit,
             left: "center",
             top: "40%",
             padding: [0, 0],
@@ -116,6 +128,7 @@ export default {
           },
           {
             text: this.titleNum,
+            show: this.showTit,
             left: "center",
             top: "50%",
             padding: [0, 0],
@@ -132,7 +145,7 @@ export default {
             type: "pie",
             radius: ["48%", "70%"],
 
-            color: ["rgba(15, 252, 252, 1)", "rgba(134, 91, 252, 1)", "rgba(49, 129, 246, 1)", "rgba(29, 197, 104, 1)"],
+            color: ["rgba(15, 252, 252, 1)", "rgba(134, 91, 252, 1)", "rgba(49, 129, 246, 1)", "rgba(29, 197, 104, 1)","#ffc72b"],
             label: {
               normal: {
                 formatter: function (params, ticket, callback) {
@@ -143,12 +156,9 @@ export default {
                   });
                   percent = ((params.value / total) * 100).toFixed(1);
                   return (
-                    "{white|" +
-                    percent + "%" +
-                    "}\n{blue|" +
-                    params.name +
-                    "}\n{hr|}\n{yellow|" +
-                    params.value + params.data.unit + '}'
+                    "{white|" + percent + "%" + "}\n" +
+                    "{blue|" + params.name + "}\n" +
+                    (that.showTit ? "{hr|}\n{yellow|" + params.value + params.data.unit + '}':'')
                   );
                 },
                 rich: rich,

src/components/pannelNew/index.html

@@ -1,7 +1,7 @@
 <div class="pannel" :style="style" :class="[bkClass]">
   <div class="header_box">
 
-    <div class="header row align_item_center">
+    <div class="header row">
       <div v-if="title" class="title_bk">
 <!--        <i class="icon"></i>-->
         <p>{{title}}</p>

src/components/pannelNew/index.scss

@@ -33,8 +33,9 @@
       margin-top: 2px;
       height: 45px;
       background: #01142c url("header_bg.png") no-repeat -8px center;
-      background-size: 102% auto;
+      background-size: auto auto;
       justify-content: space-between;
+      align-items: baseline;
 
       .title_bk {
         // font-style: italic;

src/views/nav/data.js

@@ -18,7 +18,7 @@ export default [
     ],
     [
       {
-        icon: require('./2.png'),
+        icon: require('./4.png'),
         path: '/sanqing',
         name: '三清五治一张图'
       }

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

@@ -49,16 +49,4 @@
             </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

@@ -5,9 +5,9 @@ export default {
   },
   props: {
     data: {
-      type: Array,
+      type: Object,
       default: function () {
-        return []
+        return {}
       }
     }
   },

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

@@ -1,7 +1,11 @@
 .buttom2 {
-  width: 960px;
+  width: 220px;
   display: flex;
   justify-content: space-between;
+  position: absolute;
+  top: 100px;
+  left: 460px;
+  z-index: 2;
   .flex_main{
     background: url("bg.png") no-repeat 10px center;
     background-size: calc(100% - 10px) 100%;

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

@@ -0,0 +1,13 @@
+<div class="buttom2">
+    <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/2/index.js

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

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

@@ -0,0 +1,93 @@
+.buttom2 {
+  width: 220px;
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  top: 100px;
+  right: 460px;
+  z-index: 2;
+  .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/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/sanqing/comps/left/bottom/1/index.html

@@ -1,9 +1,10 @@
-<Pannel title="资金支出分析" height="340" flexIble>
+<Pannel title="农户资产类型分析" height="340" flexIble>
   <div class="full">
     <div class="buttom">
       <Pie
         :title="'总资产'"
-        :titleNum="'167万元'"
+        :titleNum="countNum + '万元'"
+        :showTit="false"
         :data="data"
       ></Pie>
     </div>

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

@@ -12,18 +12,21 @@ export default {
       default: function () {
         return []
       }
+    },
+    countNum: {
+      type: Number,
+      default: 0
     }
   },
   data () {
     return {
-      pannelTabData: [],
       tabIndex: '1'
     };
   },
   created () {
   },
   mounted () {
-
+    console.log(this.countNum)
   },
   methods: {
     tabChange (info) {

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

@@ -1,4 +1,4 @@
-<Pannel title="农业设施设备" height="300">
+<Pannel title="农业设施设备类型分析" height="300" flexIble>
   <div class="full">
     <div class="buttom">
       <Bar id="bar3"

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

@@ -1,4 +1,4 @@
-<Pannel title="集体资源资产" height="300">
+<Pannel title="集体资源资产类型分析" height="300" flexIble>
   <div class="full">
     <div class="buttom">
       <Bar

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

@@ -1,4 +1,4 @@
-<Pannel title="农户资产分布" height="300">
+<Pannel title="农户资产分布" height="300" flexIble>
   <div class="full">
     <div class="buttom">
       <Bar id="bar6"

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

@@ -1,4 +1,4 @@
-<Pannel title="农业设施设备分布" height="300">
+<Pannel title="农业设施设备分布" height="300" flexIble>
   <div class="full">
     <div class="buttom">
       <Bar id="bar5"

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

@@ -1,4 +1,4 @@
-<Pannel title="集体资源资产分布" height="300">
+<Pannel title="集体资源资产分布" height="300" flexIble>
   <div class="full">
     <div class="buttom">
       <Bar id="bar4"

src/views/sanqing/data.js

@@ -7,6 +7,7 @@ export const comps = {
       name: 'Left21',
       data: []
     },{
+      countNum: 0,
       name: 'Left31',
       data: []
     }],
@@ -23,6 +24,9 @@ export const comps = {
     buttom: [{
       name: 'Bottom1',
       data: {}
+    },{
+      name: 'Bottom2',
+      data: {}
     }]
   }
 }

src/views/sanqing/index.html

@@ -3,14 +3,15 @@
   <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>
+    <component :is="item.name" v-for="(item, index) in currentComp.left" :key="index" :data="item.data" :countNum="item.name == 'Left31'?item.countNum:0"></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">
+  <div class="row">
     <component :is="item.name" v-for="(item, index) in currentComp.buttom" :key="index" :data="item.data"></component>
   </div>
+  <Popover v-if="false"></Popover>
   <Left></Left>
   <Right></Right>
   <Footer></Footer>

src/views/sanqing/index.js

@@ -11,6 +11,9 @@ 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 Bottom2 from './comps/buttom/2/index.vue';
+
+import Popover from './popover/index.vue';
 import MainGis from './main-gis/index.vue';
 
 import { comps } from './data.js'
@@ -32,6 +35,8 @@ export default {
     Right11,
     Right21,
     Right31,
+    Popover,
+    Bottom2,
     Bottom1
   },
   data () {
@@ -47,55 +52,66 @@ export default {
     }
   },
   created () {
+    this.currentComp.right[0].data = [];
+    this.currentComp.right[1].data = [];
+    this.currentComp.right[2].data = [];
+
+    this.currentComp.left[0].data = [];
+    this.currentComp.left[1].data = [];
+    this.currentComp.left[2].data = [];
     getInfo().then(res => {
       getStatistic({ deptId: res.user.deptId }).then((response) => {
         response.data.jtzyzcDeptList.map(rr => {
-          this.currentComp.left[0].data.push({
+          this.currentComp.right[0].data.push({
             name: rr.deptName,
             value: rr.ydmj
           })
         })
         response.data.nysssbDeptList.map(rr => {
-          this.currentComp.left[1].data.push({
+          this.currentComp.right[1].data.push({
             name: rr.deptName,
             value: rr.ydmj
           })
         })
         response.data.nhzcDeptList.map(rr => {
-          this.currentComp.left[2].data.push({
+          this.currentComp.right[2].data.push({
             name: rr.deptName,
             value: rr.ydmj
           })
         })
 
         response.data.jtzyzcTypeList.map(rr => {
-          this.currentComp.right[0].data.push({
+          this.currentComp.left[0].data.push({
             name: rr.threeDetailType,
             value: rr.ydmj
           })
         })
         response.data.nysssbTypeList.map(rr => {
-          this.currentComp.right[1].data.push({
+          this.currentComp.left[1].data.push({
             name: rr.threeDetailType,
             value: rr.ydmj
           })
         })
         response.data.nhzcTypeList.map(rr => {
-          this.currentComp.right[2].data.push({
+          this.currentComp.left[2].data.push({
             name: rr.threeDetailType,
-            value: rr.ydmj
+            value: rr.ydmj,
+            unit: '万元'
           })
+          this.currentComp.left[2].countNum += rr.ydmj;
         })
 
         this.currentComp.buttom[0].data = {
           jtzyzc: response.data.jtzyzc,//集体资源资产
           nysssb: response.data.nysssb,//农业设施设备
           nhzc: response.data.nhzc,
+        }
+
+        this.currentComp.buttom[1].data = {
           xy23: response.data.xy23,
           xy24: response.data.xy24
         }
 
-
         console.log(this.currentComp)
         this.allData = response.data;
       });

src/views/sanqing/index.scss

@@ -8,4 +8,5 @@
 .buttom_side {
   top: 100px;
   bottom: auto;
+  left: 685px;
 }

src/views/sanqing/main-gis/index.scss

@@ -48,20 +48,20 @@
 
 //选择地址
 .select_address {
-  height: 30px;
   width: 300px;
   position: absolute;
-  left: 480px;
-  top: 112px;
+  left: 30px;
+  top: 40px;
   z-index: 302;
 
+  box-shadow: inset 0 0 10px 2px rgba(27, 123, 204, 0.8); /* 添加内发光效果 */
+
   // <div class="dot left"></div>
   //     <div class="dot right"></div>
   ::v-deep {
     .el-input--suffix {
       // background: url('../../../../assets/images/dataScreen/bigDataMonitoring2/stockCooperative/addText_bg.png') center center no-repeat !important;
       background-size: 100% 100% !important;
-      height: 35px;
       width: 280px;
 
       .el-input__inner {
@@ -71,7 +71,6 @@
         font-size: 1.66vh;
         text-align: center;
         padding: 0;
-        padding-top: .9vh;
       }
 
       .el-input__icon {
@@ -241,4 +240,4 @@
       }
     }
   }
-}
+}

src/views/sanqing/popover/index.html

@@ -0,0 +1,79 @@
+<div class="popover_main">
+  <h1><i></i>B镇详情<span>×</span></h1>
+  <div>
+    <p>资产编码</p>
+    <p>11111111</p>
+    <p>资产名称</p>
+    <p>11111111</p>
+  </div>
+  <div>
+    <p>三清类型</p>
+    <p>11111111</p>
+    <p>资产类型</p>
+    <p>11111111</p>
+  </div>
+  <div>
+    <p>用地面积</p>
+    <p>11111111</p>
+    <p>建筑面积(㎡)</p>
+    <p>11111111</p>
+  </div>
+  <div>
+    <p>所在组</p>
+    <p>11111111</p>
+    <p>权属性质</p>
+    <p>11111111</p>
+  </div>
+  <div>
+    <p>权属是否存在争议</p>
+    <p>11111111</p>
+    <p>权属主体</p>
+    <p>11111111</p>
+  </div>
+  <div>
+    <p>是否委托代管</p>
+    <p>11111111</p>
+    <p>联系电话</p>
+    <p>11111111</p>
+  </div>
+  <div>
+    <p>23年盘活方式</p>
+    <p>11111111</p>
+    <p>23年效益(万元)</p>
+    <p>11111111</p>
+  </div>
+  <div>
+    <p>24年盘活方式</p>
+    <p>11111111</p>
+    <p>24年效益(万元)</p>
+    <p>11111111</p>
+  </div>
+  <div>
+    <p>盘活情况</p>
+    <p>11111111</p>
+    <p>资产闲置原因</p>
+    <p>11111111</p>
+  </div>
+  <div>
+    <p>是否能正常使用</p>
+    <p>11111111</p>
+    <p>完善后使用</p>
+    <p>11111111</p>
+  </div>
+  <div>
+    <p>不能使用</p>
+    <p>11111111</p>
+    <p>盘活措施</p>
+    <p>11111111</p>
+  </div>
+  <div>
+    <p>盘活时限</p>
+    <p>11111111</p>
+    <p>资产统计年度</p>
+    <p>11111111</p>
+  </div>
+  <div>
+    <p>备注</p>
+    <p>11111111</p>
+  </div>
+</div>

src/views/sanqing/popover/index.js

@@ -0,0 +1,21 @@
+export default {
+  props: {
+    data: {
+      type: Array,
+      default: function () {
+        return []
+      }
+    }
+  },
+  data () {
+    return {
+
+    };
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+  }
+};

src/views/sanqing/popover/index.scss

@@ -0,0 +1,45 @@
+.popover_main{
+  width: 800px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50% , -50%);
+  background-color: rgba(11,36,79,.9);
+  z-index: 99;
+  padding-bottom: 25px;
+  border: 1px solid #0b61b7;
+  h1{
+    background: url("./tit_bg.png") no-repeat center;
+    background-size: 100% 100%;
+    padding: 10px 25px 10px 10px;
+    display: flex;
+    align-items: center;
+    font-size: 18px;
+    font-weight: initial;
+    i{
+      display: block;
+      width: 25px;
+      height: 25px;
+      background: url("./icon.png") no-repeat center;
+      background-size: 200% 200%;
+    }
+    span{
+      margin-left: auto;
+      font-size: 24px;
+    }
+  }
+  div{
+    display: flex;
+    justify-content: space-between;
+    p{
+      width: 25%;
+      padding: 10px 25px;
+      &:nth-child(odd){
+        color: #80aacf;
+      };
+      &:nth-child(even){
+        color: #01d5f8;
+      }
+    }
+  }
+}

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

vue.config.js

@@ -21,7 +21,7 @@ module.exports = {
           // target: `http://192.168.0.105:8090`, // 公网测试环境
           changeOrigin: true,
           onProxyReq: function (proxyReq, req) {
-            //console.log(
+            console.log(
               '[HPM] Origin changed from ' +
               req.headers.host +
               ' ~> ' +
@@ -34,7 +34,7 @@ module.exports = {
           logLevel: 'debug',
           changeOrigin: true,
           onProxyReq: function (proxyReq, req) {
-            //console.log(
+            console.log(
               '[HPM] Origin changed from ' +
               req.headers.host +
               ' ~> ' +