From ccb7f0596067e46a688b20e91412be516652daee Mon Sep 17 00:00:00 2001
From: xy <271556543@qq.com>
Date: Wed, 12 Jun 2024 16:40:51 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=9F=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/statics/index.js                   |  17 ++
 src/main.js                                |   5 +-
 src/views/dashboard/components/drawer.vue  |  10 +-
 src/views/dashboard/index.vue              |   8 +-
 src/views/dataShow/map1.vue                |  40 +++-
 src/views/dataShow/map2.vue                |  25 ++-
 src/views/statics/assets.vue               |  48 +++++
 src/views/statics/component/lineChart1.vue | 215 +++++++++++++++++++++
 src/views/statics/component/pieChart.vue   | 132 +++++++++++++
 9 files changed, 481 insertions(+), 19 deletions(-)
 create mode 100644 src/api/statics/index.js
 create mode 100644 src/views/statics/assets.vue
 create mode 100644 src/views/statics/component/lineChart1.vue
 create mode 100644 src/views/statics/component/pieChart.vue

diff --git a/src/api/statics/index.js b/src/api/statics/index.js
new file mode 100644
index 0000000..a85cab9
--- /dev/null
+++ b/src/api/statics/index.js
@@ -0,0 +1,17 @@
+import request from '@/utils/request'
+
+export function pieChart(params) {
+  return request({
+    method: "get",
+    url: "/api/admin/other/area-dengjimianji",
+    params
+  })
+}
+
+export function lineChart(params) {
+  return request({
+    method: "get",
+    url: "/api/admin/other/dengjimianji",
+    params
+  })
+}
diff --git a/src/main.js b/src/main.js
index 11a417e..87464d7 100644
--- a/src/main.js
+++ b/src/main.js
@@ -123,5 +123,8 @@ new Vue({
   el: '#app',
   router,
   store,
-  render: h => h(App)
+  render: h => h(App),
+  beforeCreate() {
+    Vue.prototype.$bus = this
+  }
 })
diff --git a/src/views/dashboard/components/drawer.vue b/src/views/dashboard/components/drawer.vue
index c2ed342..80c12f2 100644
--- a/src/views/dashboard/components/drawer.vue
+++ b/src/views/dashboard/components/drawer.vue
@@ -57,10 +57,12 @@ export default {
         yingshouzujin: "应收租金"
       },
       t4: {
-        zichanmingcheng: "资产名称",
-        zichanleixing: "资产类型",
-        jianchajilu: "检查记录",
-        riqi: "日期"
+        jihuamingcheng: "计划名称",
+        jihuajieshushijian: "计划结束日期",
+        jihuakaishishijian: "计划开始日期",
+        niandu: "年度",
+        yuedu: "月度",
+        jihuaneirong: "计划内容",
       }
     }
   },
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 10a46a7..df22814 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -91,8 +91,8 @@
 
             <div class="list">
               <div class="list-item" v-for="item in assetSafetyPlan" @click="$refs['drawer'].setType(4),$refs['drawer'].setRow(item),$refs['drawer'].show()">
-                <span>{{ item.zichanmingcheng }}</span>
-                <span>{{ $moment(new Date(item.riqi)).format('YYYY-MM-DD') }}</span>
+                <span>{{ item.jihuamingcheng }}</span>
+                <span>{{ $moment(new Date(item.jihuakaishishijian)).format('YYYY-MM-DD') }}</span>
               </div>
 
               <Page class="list-page" :page-size="systemSelect.page_size" :total="systemTotal" size="small" />
@@ -267,12 +267,12 @@
         systems: [],
         systemTotal: 0,
         assetSafetyPlanSelect: {
-          table_name: 'asset_safety_inspections',
+          table_name: 'asset_safety_plans',
           page: 1,
           page_size: 10,
           filter: [
             {
-              key: "riqi",
+              key: "jihuakaishishijian",
               op: "range",
               value: `${this.$moment().format("YYYY-MM-DD")},2999-01-01`
             }
diff --git a/src/views/dataShow/map1.vue b/src/views/dataShow/map1.vue
index ea55757..9df68f7 100644
--- a/src/views/dataShow/map1.vue
+++ b/src/views/dataShow/map1.vue
@@ -44,6 +44,9 @@ export default {
   computed: {
     leases () {
       return this.$store.state.bigdata.leases;
+    },
+    type () {
+      return this.$store.state.bigdata.type;
     }
   },
   methods: {
@@ -80,9 +83,6 @@ export default {
         closeWhenClickMap: true,
         offset: new AMap.Pixel(-10, -10),
       });
-      this.map.on('click',e => {
-        console.log(e)
-      })
     },
     setMapMarker() {
       this.map.remove(this.markerList);
@@ -166,11 +166,37 @@ export default {
     },
   },
   watch: {
-    leases () {
-      if (this.map) {
-        this.$nextTick(() => {
+    leases: {
+      handler: function (newVal) {
+        // if (this.map && this.type === 2) {
+        //   this.$nextTick(() => {
+        //     this.setMapMarker();
+        //     if (newVal.length > 0) {
+        //       setTimeout(() => {
+        //         let location = newVal[0].land_id_lands_id_relation ? newVal[0].land_id_lands_id_relation.zichanweizhi : newVal[0].house_id_houses_id_relation.zichanweizhi;
+        //         let lat, lng;
+        //         [lng, lat] = location.split(",");
+        //         this.map.panTo([lng, lat]);
+        //       },500)
+        //     }
+        //   })
+        // }
+      }
+    },
+    type (newVal) {
+      if (newVal === 2 && this.map) {
+        setTimeout(() => {
           this.setMapMarker();
-        })
+          if (this.leases.length > 0) {
+            setTimeout(() => {
+              let data = this.leases[0]
+              let location = data.land_id_lands_id_relation ? data.land_id_lands_id_relation.zichanweizhi : data.house_id_houses_id_relation.zichanweizhi;
+              let lat, lng;
+              [lng, lat] = location.split(",");
+              this.map.panTo([lng, lat]);
+            },500)
+          }
+        },500)
       }
     }
   },
diff --git a/src/views/dataShow/map2.vue b/src/views/dataShow/map2.vue
index 5fbc184..c4e4114 100644
--- a/src/views/dataShow/map2.vue
+++ b/src/views/dataShow/map2.vue
@@ -35,6 +35,9 @@ export default {
   computed: {
     leases () {
       return this.$store.state.bigdata.safety;
+    },
+    type () {
+      return this.$store.state.bigdata.type;
     }
   },
   methods: {
@@ -158,10 +161,26 @@ export default {
   },
   watch: {
     leases () {
-      if (this.map) {
-        this.$nextTick(() => {
+      // if (this.map) {
+      //   this.$nextTick(() => {
+      //     this.setMapMarker();
+      //   })
+      // }
+    },
+    type (newVal) {
+      if (this.map && newVal === 3) {} {
+        setTimeout(() => {
           this.setMapMarker();
-        })
+          if (this.leases.length > 0) {
+            setTimeout(() => {
+              let data = this.leases[0]
+              let location = data.land_id_lands_id_relation ? data.land_id_lands_id_relation.zichanweizhi : data.house_id_houses_id_relation.zichanweizhi;
+              let lat, lng;
+              [lng, lat] = location.split(",");
+              this.map.panTo([lng, lat]);
+            },500)
+          }
+        },500)
       }
     }
   },
diff --git a/src/views/statics/assets.vue b/src/views/statics/assets.vue
new file mode 100644
index 0000000..5dad4c2
--- /dev/null
+++ b/src/views/statics/assets.vue
@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <!-- 查询配置 -->
+    <div>
+      <div ref="lxHeader">
+        <LxHeader
+          :icon="$route.meta.icon"
+          :text="$route.meta.title"
+          style="margin-bottom: 10px; border: 0px; margin-top: 15px"
+        >
+          <div slot="content"></div>
+          <slot>
+            <DatePicker v-model="year" type="year" formatter="yyyy"></DatePicker>
+
+          </slot>
+
+        </LxHeader>
+      </div>
+    </div>
+    <lineChart1 :year="year" id="line-chart1" width="100%" height="300px"></lineChart1>
+    <pieChart :year="year" id="pie-chart" style="margin-top: 20px;" width="100%" height="300px"></pieChart>
+  </div>
+</template>
+
+<script>
+import LxHeader from '@/components/LxHeader';
+import lineChart1 from '@/views/statics/component/lineChart1.vue'
+import lineChart from '@/views/statics/component/lineChart.vue'
+import pieChart from '@/views/statics/component/pieChart.vue'
+export default {
+  components: {
+    lineChart,
+    LxHeader,
+    lineChart1,
+    pieChart
+  },
+  data() {
+    return {
+      year: new Date()
+    }
+  },
+  methods: {},
+  computed: {}
+}
+</script>
+
+<style scoped lang="scss">
+</style>
diff --git a/src/views/statics/component/lineChart1.vue b/src/views/statics/component/lineChart1.vue
new file mode 100644
index 0000000..915ab4c
--- /dev/null
+++ b/src/views/statics/component/lineChart1.vue
@@ -0,0 +1,215 @@
+<template>
+  <el-card>
+    <div :id="id" :class="className" :style="{height:height,width:width}" />
+  </el-card>
+</template>
+
+<script>
+import { lineChart } from "@/api/statics"
+import { index } from "@/api/system/baseForm";
+import * as echarts from 'echarts'
+import resize from '@/components/Charts/mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    year: Date,
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    id: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '200px'
+    },
+    height: {
+      type: String,
+      default: '200px'
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      data: [],
+    }
+  },
+  mounted() {
+    this.getData().then(_ => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    async getData () {
+      const res = await lineChart({ year: this.year.getFullYear() });
+      this.data = res;
+    },
+    initChart() {
+      this.chart = echarts.init(document.getElementById(this.id))
+      this.setOption()
+    },
+    setOption () {
+      this.chart.setOption({
+        backgroundColor: '#394056',
+        title: {
+          top: 20,
+          text: '资产入账统计',
+          textStyle: {
+            fontWeight: 'normal',
+            fontSize: 16,
+            color: '#F1F1F3'
+          },
+          left: '1%'
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            lineStyle: {
+              color: '#57617B'
+            }
+          }
+        },
+        legend: {
+          top: 20,
+          icon: 'rect',
+          itemWidth: 14,
+          itemHeight: 5,
+          itemGap: 13,
+          data: ['土地数量','房产数量'],
+          right: '4%',
+          textStyle: {
+            fontSize: 12,
+            color: '#F1F1F3'
+          }
+        },
+        grid: {
+          top: 100,
+          left: '2%',
+          right: '2%',
+          bottom: '2%',
+          containLabel: true
+        },
+        xAxis: [{
+          type: 'category',
+          boundaryGap: false,
+          axisLine: {
+            lineStyle: {
+              color: '#57617B'
+            }
+          },
+          data: Array.from({ length: 12 }, (val, idx) => `${idx + 1}月`),
+        }],
+        yAxis: [{
+          type: 'value',
+          name: 'm²',
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#57617B'
+            }
+          },
+          axisLabel: {
+            margin: 10,
+            textStyle: {
+              fontSize: 14
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: '#57617B'
+            }
+          }
+        }],
+        series: [{
+          name: '土地数量',
+          type: 'line',
+          smooth: true,
+          symbol: 'circle',
+          symbolSize: 5,
+          showSymbol: false,
+          lineStyle: {
+            normal: {
+              width: 1
+            }
+          },
+          areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: 'rgba(137, 189, 27, 0.3)'
+              }, {
+                offset: 0.8,
+                color: 'rgba(137, 189, 27, 0)'
+              }], false),
+              shadowColor: 'rgba(0, 0, 0, 0.1)',
+              shadowBlur: 10
+            }
+          },
+          itemStyle: {
+            normal: {
+              color: 'rgb(137,189,27)',
+              borderColor: 'rgba(137,189,2,0.27)',
+              borderWidth: 12
+
+            }
+          },
+          data: this.data.map(item => item.tudi)
+        },{
+          name: '房产数量',
+          type: 'line',
+          smooth: true,
+          symbol: 'circle',
+          symbolSize: 5,
+          showSymbol: false,
+          lineStyle: {
+            normal: {
+              width: 1
+            }
+          },
+          areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: 'rgba(27,189,170,0.3)'
+              }, {
+                offset: 0.8,
+                color: 'rgba(137, 189, 27, 0)'
+              }], false),
+              shadowColor: 'rgba(0, 0, 0, 0.1)',
+              shadowBlur: 10
+            }
+          },
+          itemStyle: {
+            normal: {
+              color: 'rgb(27,159,189)',
+              borderColor: 'rgba(2,189,183,0.27)',
+              borderWidth: 12
+
+            }
+          },
+          data: this.data.map(item => item.fangwu)
+        }]
+      })
+    }
+  },
+  watch: {
+    year() {
+      this.getData().then(_ => {
+        this.initChart()
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/statics/component/pieChart.vue b/src/views/statics/component/pieChart.vue
new file mode 100644
index 0000000..81a97f0
--- /dev/null
+++ b/src/views/statics/component/pieChart.vue
@@ -0,0 +1,132 @@
+<template>
+  <el-card>
+    <div :id="id" :class="className" :style="{height:height,width:width}" />
+  </el-card>
+</template>
+
+<script>
+import { pieChart } from "@/api/statics"
+import { index } from "@/api/system/baseForm";
+import * as echarts from 'echarts'
+import resize from '@/components/Charts/mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    year: Date,
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    id: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '200px'
+    },
+    height: {
+      type: String,
+      default: '200px'
+    }
+  },
+  data() {
+    return {
+      wxAreas: [
+        "宜兴市",
+        "惠山区",
+        "新吴区",
+        "梁溪区",
+        "江阴市",
+        "滨湖区",
+        "锡山区",
+      ],
+      chart: null,
+      data: { houseList:[], landList:[] },
+    }
+  },
+  mounted() {
+    this.getData().then(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    async getData () {
+      const res = await pieChart({ year: this.year.getFullYear() })
+      console.log(res)
+      this.data = res;
+    },
+    initChart() {
+      this.chart = echarts.init(document.getElementById(this.id))
+      this.setOption()
+    },
+    setOption () {
+      this.chart.setOption({
+        title: [
+          {
+            text: "房产资产",
+            left: '20%'
+          },
+          {
+            text: "土地资产",
+            left: '70%'
+          }
+        ],
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c}m² ({d}%)'
+        },
+        legend: {
+          left: 'center',
+          top: 'bottom',
+        },
+        series: [
+          {
+            name: '房产资产',
+            type: 'pie',
+            radius: ['35%', '60%'],
+            center: ['25%', '50%'],
+            itemStyle: {
+              borderRadius: 10
+            },
+            label: {
+              show: false
+            },
+            emphasis: {
+              label: {
+                show: true
+              }
+            },
+            data: this.data.houseList
+          },
+          {
+            name: '土地资产',
+            type: 'pie',
+            radius: ['35%', '60%'],
+            center: ['75%', '50%'],
+            itemStyle: {
+              borderRadius: 5
+            },
+            data: this.data.landsList
+          }
+        ]
+      })
+    }
+  },
+  watch: {
+    year () {
+      this.getData().then(() => {
+        this.initChart()
+      })
+    }
+  }
+}
+</script>