From 63ecb9f8a2fbe4b8f749570198225c11f1132e83 Mon Sep 17 00:00:00 2001
From: xy <271556543@qq.com>
Date: Fri, 7 Jun 2024 17:31:33 +0800
Subject: [PATCH] 1

---
 src/views/statics/component/barChart.vue  | 151 +++++++++++++++++
 src/views/statics/component/lineChart.vue | 197 ++++++++++++++++++++++
 src/views/statics/lease.vue               |  11 +-
 src/views/statics/safetyYear.vue          |  18 +-
 4 files changed, 368 insertions(+), 9 deletions(-)
 create mode 100644 src/views/statics/component/barChart.vue
 create mode 100644 src/views/statics/component/lineChart.vue

diff --git a/src/views/statics/component/barChart.vue b/src/views/statics/component/barChart.vue
new file mode 100644
index 0000000..384eb1c
--- /dev/null
+++ b/src/views/statics/component/barChart.vue
@@ -0,0 +1,151 @@
+<template>
+  <el-card>
+    <div :id="id" :class="className" :style="{height:height,width:width}" />
+  </el-card>
+</template>
+
+<script>
+import { index } from "@/api/system/baseForm";
+import * as echarts from 'echarts'
+import resize from '@/components/Charts/mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    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: [],
+      landMap: new Map()
+    }
+  },
+  mounted() {
+    this.initChart()
+    this.getData()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    async getData () {
+      const res = await index({
+        table_name: "asset_safety_inspections",
+        page: 1,
+        page_size: 999,
+        sort_name: "land_id"
+      })
+      console.log(res)
+      this.data = { };
+      res.data.forEach(item => {
+        if (item.land_id) {
+          if (this.data.hasOwnProperty(item.land_id)) {
+            this.data[item.land_id] += 1;
+          } else {
+            this.data[item.land_id] = 1;
+            this.landMap.set(item.land_id, item.land_id_lands_id_relation)
+          }
+        }
+      })
+      this.setOption();
+    },
+
+    initChart() {
+      this.chart = echarts.init(document.getElementById(this.id))
+
+    },
+    setOption () {
+
+      // prettier-ignore
+      let dataAxis = Object.keys(this.data).map(i => this.landMap.get(Number(i))?.name);
+      let data = Object.values(this.data);
+      let yMax = 500;
+      let dataShadow = [];
+      for (let i = 0; i < data.length; i++) {
+        dataShadow.push(yMax);
+      }
+      this.chart.setOption({
+        title: {
+          text: '安全巡检',
+        },
+        xAxis: {
+          data: dataAxis,
+          axisLabel: {
+            inside: true,
+            color: '#fff'
+          },
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          },
+          z: 10
+        },
+        yAxis: {
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            color: '#999'
+          }
+        },
+        dataZoom: [
+          {
+            type: 'inside'
+          }
+        ],
+        series: [
+          {
+            type: 'bar',
+            showBackground: true,
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#83bff6' },
+                { offset: 0.5, color: '#188df0' },
+                { offset: 1, color: '#188df0' }
+              ])
+            },
+            emphasis: {
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#2378f7' },
+                  { offset: 0.7, color: '#2378f7' },
+                  { offset: 1, color: '#83bff6' }
+                ])
+              }
+            },
+            data: data
+          }
+        ]
+      })
+    }
+  },
+  watch: {
+
+  }
+}
+</script>
diff --git a/src/views/statics/component/lineChart.vue b/src/views/statics/component/lineChart.vue
new file mode 100644
index 0000000..8f830a7
--- /dev/null
+++ b/src/views/statics/component/lineChart.vue
@@ -0,0 +1,197 @@
+<template>
+  <el-card>
+    <div :id="id" :class="className" :style="{height:height,width:width}" />
+  </el-card>
+</template>
+
+<script>
+import { index } from "@/api/system/baseForm";
+import * as echarts from 'echarts'
+import resize from '@/components/Charts/mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    niandu: [String, Number,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.initChart()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    async getData () {
+      const res = await index({
+        table_name: "asset_safety_plans",
+        page: 1,
+        page_size: 999,
+        filter: [
+          {
+            key: "niandu",
+            op: "eq",
+            value: this.$moment(this.niandu).year()
+          }
+        ]
+      })
+      console.log(res)
+      this.data = res.data;
+      this.setOption();
+    },
+
+    initChart() {
+      this.chart = echarts.init(document.getElementById(this.id))
+
+    },
+    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 },(_,index) => `${index+1}月`)
+        }],
+        yAxis: [{
+          type: 'value',
+          name: '(%)',
+          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: Array.from({ length: 12 },(_,index) => {
+            return this.data.reduce((pre,cur) => {
+              return (this.$moment(cur.yuedu).month() == (index+1)) ? ++pre : pre;
+            },0)
+          })
+        }]
+      })
+    }
+  },
+  watch: {
+    niandu: {
+      handler: function (val) {
+        this.getData()
+      },
+      immediate: true
+    }
+  }
+}
+</script>
diff --git a/src/views/statics/lease.vue b/src/views/statics/lease.vue
index d06404c..51ca32a 100644
--- a/src/views/statics/lease.vue
+++ b/src/views/statics/lease.vue
@@ -176,20 +176,23 @@ export default {
         {
           prop: "rate",
           label: "出租率",
+          width: 220,
           customFn: row => {
             function getRate(a,b) {
               if (!parseFloat(a) || !parseFloat(b)) {
-                return "0.00%"
+                return 0.00
               }
-              return ((parseFloat(a) / parseFloat(b)) * 100).toFixed(2) + "%"
+              return ((parseFloat(a) / parseFloat(b)) * 100)
             }
             if (row.land_id) {
               return (
-                <span>{ getRate(row.zulinmianji, row.land_id_lands_id_relation?.shijimianji) }</span>
+                <el-progress percentage={getRate(row.zulinmianji, row.land_id_lands_id_relation?.shijimianji)}></el-progress>
+                // <span>{ getRate(row.zulinmianji, row.land_id_lands_id_relation?.shijimianji) }</span>
               )
             } else {
               return (
-                <span>{ getRate(row.zulingmianji, row.house_id_houses_id_relation?.shijimianji) }</span>
+                <el-progress percentage={getRate(row.zulinmianji, row.house_id_houses_id_relation?.shijimianji)}></el-progress>
+              // <span>{ getRate(row.zulinmianji, row.house_id_houses_id_relation?.shijimianji) }</span>
               )
             }
           }
diff --git a/src/views/statics/safetyYear.vue b/src/views/statics/safetyYear.vue
index d6387a2..eb14b45 100644
--- a/src/views/statics/safetyYear.vue
+++ b/src/views/statics/safetyYear.vue
@@ -9,24 +9,32 @@
           style="margin-bottom: 10px; border: 0px; margin-top: 15px"
         >
           <div slot="content"></div>
-          <slot></slot>
+          <slot>
+            <DatePicker v-model="niandu" type="year" formatter="yyyy"></DatePicker>
+          </slot>
 
         </LxHeader>
       </div>
     </div>
-    <LineMarker width="100%" height="500px"></LineMarker>
+    <line-chart :niandu="niandu" width="100%" height="300px"></line-chart>
+    <bar-chart id="chart1" width="100%" height="300px" style="margin-top: 10px;"></bar-chart>
   </div>
 </template>
 
 <script>
 import LxHeader from '@/components/LxHeader';
-import LineMarker from '@/components/Charts/LineMarker.vue'
+import lineChart from './component/lineChart.vue';
+import barChart from './component/barChart.vue';
 export default {
   components: {
-    LxHeader,LineMarker
+    LxHeader,
+    lineChart,
+    barChart
   },
   data() {
-    return {}
+    return {
+      niandu: new Date()
+    }
   },
   methods: {},
   computed: {}