数智双碳、智慧运营、智慧安防ui优化

package-lock.json

@@ -36,6 +36,7 @@
         "unplugin-icons": "^0.15.1",
         "unplugin-vue-components": "^0.22.12",
         "vite": "^3.2.5",
+        "vite-plugin-antdv-fix": "^1.0.3",
         "vite-plugin-compression": "^0.5.1",
         "vite-plugin-mock": "^2.9.6",
         "vue-template-compiler": "^2.7.14",
@@ -5969,6 +5970,12 @@
         }
       }
     },
+    "node_modules/vite-plugin-antdv-fix": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/vite-plugin-antdv-fix/-/vite-plugin-antdv-fix-1.0.3.tgz",
+      "integrity": "sha512-R82up3NRrlif606twiQZF53LkMo+AjOOuJ/S9AbW0ZXFoYNkZ440OcQUsuDXH7ljkcbEOr1ucTfd+OtzS9SyXw==",
+      "dev": true
+    },
     "node_modules/vite-plugin-compression": {
       "version": "0.5.1",
       "resolved": "https://registry.npmmirror.com/vite-plugin-compression/-/vite-plugin-compression-0.5.1.tgz",
@@ -11057,6 +11064,12 @@
         }
       }
     },
+    "vite-plugin-antdv-fix": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/vite-plugin-antdv-fix/-/vite-plugin-antdv-fix-1.0.3.tgz",
+      "integrity": "sha512-R82up3NRrlif606twiQZF53LkMo+AjOOuJ/S9AbW0ZXFoYNkZ440OcQUsuDXH7ljkcbEOr1ucTfd+OtzS9SyXw==",
+      "dev": true
+    },
     "vite-plugin-compression": {
       "version": "0.5.1",
       "resolved": "https://registry.npmmirror.com/vite-plugin-compression/-/vite-plugin-compression-0.5.1.tgz",

package.json

@@ -36,6 +36,7 @@
     "unplugin-icons": "^0.15.1",
     "unplugin-vue-components": "^0.22.12",
     "vite": "^3.2.5",
+    "vite-plugin-antdv-fix": "^1.0.3",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-mock": "^2.9.6",
     "vue-template-compiler": "^2.7.14",

src/api/dashboard.js

@@ -1,15 +1,27 @@
 import Request from "@/utils/request";
-// 获取人员核心指标
-const getPersonCoreData = (startDate, endDate) => {
-    return Request.post('/personnel/getPersonnelInfoCount', {
-        startDate: startDate,
-        endDate: endDate
+
+// 获取空间概览
+const getSpaceOverview = (datetime) => {
+    return Request.get('/dashboard/getBuildingSituation', {
+        datetime: datetime
     })
 }
+
+// 获取人员核心指标
+const getPersonCoreData = (timeRange) => {
+    return Request.get('/personnel/getPersonnelInfoCount', timeRange)
+}
 // 获取人员统计信息
 const getPersonEnterSummary = (startDate, endDate) => {
-    return Request.post('/personnel/getPersonnelInfoList', {
+    return Request.get('/personnel/getPersonnelInfoList', {
         startDate: startDate,
         endDate: endDate
     })
+}
+
+export default {
+    // 人员
+    getPersonCoreData,
+
+    getSpaceOverview,
 }

src/components/business/analysis/charts/businessEnergyChart.vue

@@ -0,0 +1,138 @@
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  props: {
+    height: Number,
+  },
+  mounted() {
+    this.$nextTick(()=>{
+      this.initChart()
+    })
+  },
+  methods: {
+    initChart() {
+      let chart = this.$echarts.init(this.$refs.myChart)
+      let defaultOption = {
+        legend: {
+          data: [
+            '用热量',
+            '温度',
+          ]
+        },
+        grid: {
+          left: '0%', //默认10%
+          right: '0%', //默认10%
+          bottom: '15%', //默认60
+          top: '15%',
+          containLabel: true
+          //grid区域是否包含坐标轴的刻度标签
+        },
+        xAxis: {
+          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+        },
+        yAxis: [
+          {
+            name: '热量(kWh)',
+            type: 'value',
+            nameTextStyle: {
+              padding: [10, 0, 10, 0]
+            },
+          },
+          {
+            name: '温度(℃)',
+            type: 'value',
+            nameTextStyle: {
+              padding: [10, 0, 10, -12]
+            },
+          },
+        ],
+        dataZoom: [
+          {
+            type: 'slider',
+            start: 0,
+            end: 100,
+            height: 12,
+          },
+          {
+            type: 'inside',
+            start: 0,
+            end: 100,
+          }
+        ],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          },
+          textStyle: {
+            color: '#fff',
+            align: 'left',
+            fontSize: 14
+          },
+          axisLine: {//x坐标轴轴线
+            show: true,
+            lineStyle: {//x坐标轴轴线样式
+              color: '#000',//'#ccc' | 'rgb(128, 128, 128)' | 'rgba(128, 128, 128, 0.5)'，设置标签颜色
+            }
+          },
+          backgroundColor: 'rgba(0,0,0,0.8)',
+        },
+        series: [
+          {
+            name: '用热量',
+            data: [38, 36, 86, 64, 87, 77, 50, 56, 51, 88, 55, 80],
+            type: 'line',
+            stack: 'a',
+            yAxisIndex:0,
+            smooth: true,
+            showSymbol:false,
+            lineStyle: {
+              color: "#62CC97",
+              width: 1,
+            },
+            itemStyle: {
+              color: '#62CC97'
+            },
+            emphasis: {
+              scale:1.5
+            }
+          },
+          {
+            name: '温度',
+            data: [31, 24, 22, 25, 24, 24, 25, 22, 21, 22, 26, 32],
+            type: 'line',
+            stack: 'b',
+            yAxisIndex:1,
+            smooth: true,
+            showSymbol:false,
+            itemStyle: {
+              color: '#FDB456'
+            },
+            lineStyle: {
+              color: "#FDB456",
+              width: 1,
+            },
+            emphasis: {
+              scale:1.5
+            },
+          },
+        ]
+      };
+      //Object.assign(defaultOption, this.option)
+      chart.setOption(defaultOption)
+    }
+  }
+}
+</script>
+
+<template>
+  <div style="width: 100%" :style="{height: height+'px'}" ref="myChart"></div>
+</template>
+
+<style lang="less" scoped>
+
+</style>

src/components/business/asset/asset.vue

@@ -1,69 +1,70 @@
 <template>
   <div>
-    <div class="border-shadow">
+    <div class="page-query-core">
       <query></query>
       <card :title="'核心指标'">
         <CoreData :data-list="coreData"></CoreData>
       </card>
     </div>
-    <a-row :style="{ marginTop: '15px' }">
-      <a-col :span="18">
-        <div class="left border-shadow">
-          <card :title="'资产分析'">
-            <a-tabs type="card" @change="tabChange">
-              <a-tab-pane key="1" tab="投资分析">
-                <div
-                  class="myChart"
-                  ref="myChart1"
-                  :style="{ height: '618px' }"
-                ></div>
-              </a-tab-pane>
-              <a-tab-pane key="2" tab="资产年限">
-                <div
-                  class="myChart"
-                  ref="myChart2"
-                  :style="{ height: '618px' }"
-                ></div>
-              </a-tab-pane>
-            </a-tabs>
-          </card>
-        </div>
-      </a-col>
-      <a-col :span="6">
-        <div class="right border-shadow">
-          <card :title="'资产占比排名'">
-            <div class="cben">
-              <div
-                class="myChart"
-                ref="myChart3"
-                :style="{ height: '300px' }"
-              ></div>
-            </div>
-          </card>
-        </div>
-        <div class="right border-shadow" :style="{ marginTop: '10px' }">
-          <card :title="'报废与维修'">
-            <div class="cben">
-              <div
-                class="myChart"
-                ref="myChart4"
-                :style="{ height: '300px' }"
-              ></div>
-            </div>
-          </card>
-        </div>
-      </a-col>
-    </a-row>
+
+
+    <div style="margin-top: 15px">
+      <a-row>
+        <a-col :span="18">
+          <div class="left">
+            <card :title="'资产分析'">
+              <div class="dashboardPortrait-select">
+                <a-checkable-tag v-model="tagCheck.invest" color="white" class="dashboardPortrait-select-tag" @change="handleTagSelect('invest')">
+                  <span class="dashboardPortrait-select-text">投资分析</span>
+                </a-checkable-tag>
+                <a-checkable-tag v-model="tagCheck.year" color="white" class="dashboardPortrait-select-tag" @change="handleTagSelect('year')">
+                  <span class="dashboardPortrait-select-text">资产年限</span>
+                </a-checkable-tag>
+              </div>
+
+              <div class="dashboardPortrait-body" style="padding-bottom: 35px">
+                <InvestDistributeChart v-if="tagCheck.invest" :height="450" />
+                <InvestYearChart v-if="tagCheck.year" :height="450" />
+              </div>
+            </card>
+          </div>
+        </a-col>
+        <a-col :span="6">
+          <div class="right">
+            <card :title="'资产占比排名'">
+              <div style="padding: 0 12px">
+                <AssetRankChart :height="250" />
+              </div>
+            </card>
+          </div>
+          <div class="right" :style="{ marginTop: '10px' }">
+            <card :title="'报废与维修'">
+              <AssetMoneyRepairChart :height="220" />
+            </card>
+          </div>
+        </a-col>
+      </a-row>
+    </div>
+
   </div>
 </template>
-    <script>
+<script>
 import query from "@/components/common/query.vue";
 import card from "@/components/common/card.vue";
 
+import InvestDistributeChart from "@/components/dashboard/portrait/money/investDistributeChart.vue";
+import InvestYearChart from "@/components/dashboard/portrait/money/investYearChart.vue";
+import AssetRankChart from "@/components/business/asset/charts/assetRankChart.vue";
+import AssetMoneyRepairChart from "@/components/business/asset/charts/assetMoneyRepairChart.vue";
+
 export default {
   components: {
     query,
     card,
+    InvestDistributeChart,
+    InvestYearChart,
+    AssetRankChart,
+    AssetMoneyRepairChart,
   },
   data() {
     const listData = [];
@@ -76,6 +77,10 @@ export default {
       });
     }
     return {
+      tagCheck: {
+        invest: false,
+        year: false,
+      },
       options: [
         {
           value: 1,
@@ -97,44 +102,40 @@ export default {
         },
       ],
       columns: [
-        { title: "序号", dataIndex: "index", key: "1", width: 48 },
-        { title: "姓名", dataIndex: "name", key: "2", width: 60 },
-        { title: "部门", dataIndex: "department", key: "3", width: 80 },
-        { title: "最后进入时间", dataIndex: "time", key: "4", width: 90 },
+        {title: "序号", dataIndex: "index", key: "1", width: 48},
+        {title: "姓名", dataIndex: "name", key: "2", width: 60},
+        {title: "部门", dataIndex: "department", key: "3", width: 80},
+        {title: "最后进入时间", dataIndex: "time", key: "4", width: 90},
       ],
       listData: listData,
       coreData: [
         {
-          title: "资产总额",
+          title: "资产总金额(亿元)",
           num: "1.3",
-          unit: "亿元",
           historyDesc: "同比",
           historyNum: 0.4,
         },
         {
-          title: "资产总数",
+          title: "资产总数(项)",
           num: "5000",
-          unit: "项",
           historyDesc: "同比",
           historyNum: 0.4,
         },
         {
           title: "资产占比最高",
           num: "项目一",
-          unit: "",
           historyDesc: "占比",
           historyNum: 60,
         },
         {
           title: "重点投资领域",
           num: "工业互联网",
-          unit: "",
           historyDesc: "投资总额占比",
           historyNum: 60,
         },
         {
           type: 1,
-          isHighLight: false,
+          showStar: true,
           title: "值得关注",
           content: "13笔记本即将到报废年限",
         },
@@ -142,403 +143,25 @@ export default {
     };
   },
   mounted() {
-    let that = this;
-    setTimeout(() => {
-      that.setEchart1();
-      // this.setEchart2();
-      that.setEchart3();
-      that.setEchart4();
-    }, 100);
+    this.$nextTick(()=>{
+      this.handleTagSelect('invest');
+    })
   },
   methods: {
-    handleChange(value) {
-      console.log(`selected ${value}`);
-    },
-    getTimeRange() {
-      this.$refs.timeRange.getTimeRange(); // 获取时间段
-    },
-
-    tabChange(index) {
-      let that = this;
-      setTimeout(() => {
-        switch (index) {
-          case "1":
-            // that.$refs.myChart1 = that.clearECharts(that.$refs.myChart1);
-            that.setEchart1();
-            break;
-          case "2":
-            // that.$refs.myChart2 = that.clearECharts(that.$refs.myChart2);
-            that.setEchart2();
-            break;
-        }
-      }, 100);
-    },
-    // clearECharts(ele) {
-    //   let parentElement = ele.parentElement;
-    //   parentElement.remove(ele);
-    //   let div = document.createElement("div");
-    //   //为div创建属性class = "test"
-    //   var divattr = document.createAttribute("class");
-    //   divattr.value = "myChart";
-    //   //把属性class = "test"添加到div
-    //   div.setAttributeNode(divattr);
-    //   parentElement.appendChild(div);
-    //   return div;
-    // },
-
-    setEchart1() {
-      let chart = this.$echarts.init(this.$refs.myChart1);
-      let options = {
-        tooltip: {
-          trigger: "axis",
-        },
-        legend: {
-          top: "5%",
-          data: ["投资1", "投资2", "投资3", "投资4", "回报率"],
-          textStyle: {
-            color: "#000000",
-          },
-        },
-        grid: {
-          top: "20%",
-          left: "0%",
-          right: "0%",
-          bottom: "0%",
-          containLabel: true,
-        },
-        xAxis: [
-          {
-            type: "category",
-            data: ["一月", "二月", "三月", "四月", "五月", "六月"],
-            axisPointer: {
-              type: "shadow",
-            },
-            axisLabel: {
-              color: "#000000",
-            },
-          },
-        ],
-        yAxis: [
-          {
-            type: "value",
-            name: "投资总额",
-            position: "right",
-            min: 0,
-            max: 1000,
-            interval: 200,
-            axisLabel: {
-              formatter: "{value}",
-              color: "#000000",
-            },
-            splitLine: {
-              show: true,
-              lineStyle: {
-                color: "#053c89",
-              },
-            },
-          },
-          {
-            type: "value",
-            name: "投资汇报率",
-            min: 0,
-            max: 100,
-            interval: 20,
-            axisLabel: {
-              formatter: "{value} %",
-              color: "#000000",
-            },
-            splitLine: {
-              show: true,
-              lineStyle: {
-                color: "#053c89",
-              },
-            },
-          },
-        ],
-        series: [
-          {
-            name: "投资1",
-            type: "bar",
-            stack: "BB",
-            barWidth: "50%",
-            itemStyle: {
-              normal: {
-                color: "#5470c6",
-              },
-            },
-            data: [100, 80, 100, 120, 200, 150],
-          },
-          {
-            name: "投资2",
-            type: "bar",
-            stack: "BB",
-            barWidth: "50%",
-            itemStyle: {
-              normal: {
-                color: "#91cc75",
-              },
-            },
-            data: [150, 280, 200, 100, 100, 120],
-          },
-          {
-            name: "投资3",
-            type: "bar",
-            stack: "BB",
-            barWidth: "50%",
-            itemStyle: {
-              normal: {
-                color: "#fac858",
-              },
-            },
-            data: [250, 180, 200, 300, 100, 200],
-          },
-          {
-            name: "投资4",
-            type: "bar",
-            stack: "BB",
-            barWidth: "50%",
-            itemStyle: {
-              normal: {
-                color: "#ee6666",
-              },
-            },
-            data: [150, 280, 200, 100, 100, 120],
-          },
-          {
-            name: "回报率",
-            type: "line",
-            yAxisIndex: 1,
-            itemStyle: {
-              color: "#73c0de", //拆线颜色
-            },
-            label: {
-              normal: {
-                show: true,
-                position: "top",
-                textStyle: {
-                  color: "#000000",
-                },
-              },
-            },
-
-            data: [20, 15, 25, 35, 25, 20],
-          },
-        ],
-      };
-      chart.setOption(options);
-    },
-    setEchart2() {
-      let chart = this.$echarts.init(this.$refs.myChart2);
-      let options = {
-        tooltip: {
-          trigger: "axis",
-        },
-        legend: {
-          top: "5%",
-          data: ["资产名称", "回报率"],
-          textStyle: {
-            color: "#000000",
-          },
-        },
-        grid: {
-          top: "20%",
-          left: "0%",
-          right: "0%",
-          bottom: "0%",
-          containLabel: true,
-        },
-        xAxis: [
-          {
-            type: "category",
-            data: ["资产1", "资产2", "资产3", "资产4", "资产5", "资产6", "资产7", "资产8", "资产9", "资产10"],
-            axisPointer: {
-              type: "shadow",
-            },
-            axisLabel: {
-              color: "#000000",
-            },
-          },
-        ],
-        yAxis: [
-          {
-            type: "value",
-            name: "平均年限",
-            min: 0,
-            max: 75,
-            interval: 5,
-            axisLabel: {
-              formatter: "{value} 年",
-              color: "#000000",
-            },
-            splitLine: {
-              show: true,
-              lineStyle: {
-                color: "#053c89",
-              },
-            },
-          },
-          {
-            type: "value",
-            name: "标准总额",
-            position: "right",
-            min: 0,
-            max: 150,
-            interval: 10,
-            axisLabel: {
-              formatter: "{value} 年",
-              color: "#000000",
-            },
-            splitLine: {
-              show: true,
-              lineStyle: {
-                color: "#053c89",
-              },
-            },
-          },
-        ],
-        series: [
-          {
-            name: "资产名称",
-            type: "bar",
-            barWidth: "50%",
-            itemStyle: {
-              normal: {
-                color: "#5470c6",
-              },
-            },
-            data: [60,66,51,67,45,60,66,51,67,45],
-          },
-          {
-            name: "回报率",
-            type: "line",
-            yAxisIndex: 1,
-            itemStyle: {
-              color: "#91cc75", //拆线颜色
-            },
-            label: {
-              normal: {
-                show: false,
-                position: "top",
-                textStyle: {
-                  color: "#000000",
-                },
-              },
-            },
-
-            data: [60,40,60,80,120,60,40,60,80,120],
-          },
-        ],
-      };
-      chart.setOption(options);
-    },
-    setEchart3() {
-      let chart = this.$echarts.init(this.$refs.myChart3);
-      let barName = ["资产1", "资产1", "资产1", "资产1", "资产1", "资产1"];
-      let barData = [60, 60, 60, 60, 60, 60];
-      let options = {
-        grid: {
-          left: "15%",
-          right: "15%",
-          bottom: "5%",
-          top: "5%",
-          containLabel: false,
-        },
-        xAxis: {
-          show: false,
-          type: "value",
-        },
-        yAxis: [
-          {
-            type: "category",
-            axisLabel: {
-              show: true,
-              textStyle: {
-                color: "#000000",
-                fontSize: 14,
-              },
-            },
-            splitLine: {
-              show: false,
-            },
-            axisTick: {
-              show: false,
-            },
-            axisLine: {
-              show: false,
-            },
-            data: barName,
-          },
-          {
-            type: "category",
-            inverse: true,
-            axisTick: "none",
-            axisLine: "none",
-            show: false,
-            axisLabel: {
-              textStyle: {
-                color: "#000000",
-                fontSize: 12,
-              },
-              formatter: function (value) {
-                return value + " %";
-              },
-            },
-            data: barData,
-          },
-        ],
-        series: [
-          {
-            name: "",
-            type: "bar",
-            barWidth: 10,
-            zlevel: 1,
-            itemStyle: {
-              normal: {
-                barBorderRadius: 10,
-                color: "#0052d9",
-              },
-            },
-            data: barData,
-          },
-          {
-            type: "bar",
-            barWidth: 10,
-            barGap: "-100%",
-            data: barData.map(function (item) {
-              return {
-                realValue: item,
-                value: 100,
-              };
-            }),
-            label: {
-              show: true,
-              position: "right",
-              distance: 50,
-              align: "right",
-              formatter: function (params) {
-                return params.data.realValue + " %";
-              },
-              color: "#000000",
-              fontSize: 15,
-            },
-            itemStyle: {
-              normal: {
-                barBorderRadius: 10,
-                color: "#e7e7e7",
-              },
-            },
-          },
-        ],
-      };
-      chart.setOption(options);
+    handleTagSelect(item) {
+      for (const key in this.tagCheck) {
+        this.tagCheck[key] = false;
+      }
+      this.currCheck = item;
+      this.tagCheck[item] = true;
     },
     setEchart4() {
       let chart = this.$echarts.init(this.$refs.myChart4);
       let data = [
-        { value: 1048, name: "部门1" },
-        { value: 735, name: "部门2" },
-        { value: 580, name: "部门3" },
-        { value: 484, name: "其他部门" },
+        {value: 1048, name: "部门1"},
+        {value: 735, name: "部门2"},
+        {value: 580, name: "部门3"},
+        {value: 484, name: "其他部门"},
       ];
       let options = {
         tooltip: {
@@ -570,21 +193,37 @@ export default {
   },
 };
 </script>
-      
-    
-    <style lang="less" scoped>
+
+
+<style lang="less" scoped>
 .left {
-  padding-right: 15px;
-  margin-right: 5px;
+  margin-right: 6px;
+  padding-bottom: 20px;
 }
 .right {
-  padding-left: 15px;
-  margin-left: 5px;
+  margin-left: 6px;
 }
-.cben {
-  font-weight: bold;
-  span {
-    font-size: 20px;
+.dashboardPortrait-select {
+  padding: 8px 15px;
+  .dashboardPortrait-select-tag {
+    border: 1px solid #F0F1F2;
+    border-radius: 12px;
+    padding: 1px 12px;
+    margin-right: 16px;
+    cursor: pointer;
+  }
+  .ant-tag-checkable-checked {
+    .dashboardPortrait-select-text {
+      color: white;
+    }
+  }
+  .dashboardPortrait-select-text {
+    color: #B3B3B3;
+  }
+  .dashboardPortrait-body {
+    padding: 8px 12px;
+    height: 500px;
+    background-color: #ffffff;
   }
 }
 </style>

src/components/business/asset/charts/assetMoneyRepairChart.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="myChart" ref="myChart" :style="{height: height+'px'}"></div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  props: {
+    height: Number
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      let chart = this.$echarts.init(this.$refs.myChart)
+      let option = {
+        color: ['#80D4FF', '#A6A6FF','#FFDF80'],
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          bottom: '8%',
+          left: 'center',
+          icon: 'circle'
+        },
+        series: [
+          {
+            name: '排放量',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            center: ['50%','40%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: true,
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: '14px',
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: true
+            },
+            data: [
+              { value: 118, name: '部门1' },
+              { value: 148, name: '部门2' },
+              { value: 125, name: '部门3' },
+              { value: 185, name: '其他部门' },
+            ]
+          }
+        ]
+      };
+      chart.setOption(option);
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/components/business/asset/charts/assetRankChart.vue

@@ -0,0 +1,186 @@
+<template>
+  <div
+      class="myChart"
+      ref="myChart"
+      :style="{ height: height+'px' }"
+  ></div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+  props: {
+    height: Number,
+  },
+  mounted() {
+    this.$nextTick(()=>{
+      this.init();
+    })
+  },
+  methods: {
+    init() {
+      let chart = this.$echarts.init(this.$refs.myChart);
+      let barName = ["资产1", "资产2", "资产3", "资产4", "资产5", "资产6"];
+      let barData = [90, 80, 70, 60, 60, 60];
+      let options = {
+        grid: {
+          left: 70,
+          right: "15%",
+          bottom: "5%",
+          top: "0%",
+          containLabel: false,
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+        },
+        yAxis: [
+          {
+            type: "category",
+            inverse: true,
+            axisLabel: {
+              color: "rgba(0, 0, 0, 0.65)",
+              align: 'left',
+              padding: [3, 0, 0, -60],
+              formatter: (value, index) => {
+                if (index == 0) {
+                  return [`{lg1|${index + 1}} ` + "{title|" + value + "} "].join("\n");
+                } else if (index == 1) {
+                  return [`{lg2|${index + 1}} ` + "{title|" + value + "} "].join("\n");
+                } else if (index == 2) {
+                  return [`{lg3|${index + 1}} ` + "{title|" + value + "} "].join("\n");
+                } else {
+                  return [`{lg|${index + 1}} ` + "{title|" + value + "} "].join("\n");
+                }
+              },
+              rich: {
+                lg1: {
+                  backgroundColor: "#5395F1",
+                  color: '#ffffff',
+                  borderRadius: 10,
+                  width: 18,
+                  height: 18,
+                  lineHeight: 18,
+                  align: "center",
+                  fontSize: 12,
+                },
+                lg2: {
+                  backgroundColor: "#3CC5B0",
+                  color: '#ffffff',
+                  borderRadius: 10,
+                  width: 18,
+                  height: 18,
+                  lineHeight: 18,
+                  align: "center",
+                  fontSize: 12,
+                },
+                lg3: {
+                  backgroundColor: "#F0944F",
+                  color: '#ffffff',
+                  borderRadius: 10,
+                  width: 18,
+                  height: 18,
+                  lineHeight: 18,
+                  align: "center",
+                  fontSize: 12,
+                },
+                lg: {
+                  backgroundColor: "#ffffff",
+                  color: '#9d9d9d',
+                  borderRadius: 10,
+                  width: 18,
+                  height: 18,
+                  lineHeight: 18,
+                  align: "center",
+                  fontSize: 12,
+                },
+                title: {
+                  color: 'rgba(0,0,0,0.65)',
+                  align: "right",
+                  padding: [0,0,0,3],
+                },
+              },
+            },
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            data: barName,
+          },
+          {
+            type: "category",
+            inverse: true,
+            axisTick: "none",
+            axisLine: "none",
+            show: false,
+            axisLabel: {
+              textStyle: {
+                color: "#000000",
+                fontSize: 12,
+              },
+              formatter: function (value) {
+                return value + " %";
+              },
+            },
+            data: barData,
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "bar",
+            barWidth: '20%',
+            zlevel: 1,
+            itemStyle: {
+              normal: {
+                //barBorderRadius: 10,
+                color: "#6FA8FE",
+              },
+            },
+            data: barData,
+          },
+          {
+            type: "bar",
+            barWidth: '20%',
+            barGap: "-100%",
+            data: barData.map(function (item) {
+              return {
+                realValue: item,
+                value: 100,
+              };
+            }),
+            label: {
+              show: true,
+              position: "right",
+              distance: 40,
+              align: "right",
+              formatter: function (params) {
+                return params.data.realValue + " %";
+              },
+              color: "#9d9d9d",
+              fontSize: 12,
+            },
+            itemStyle: {
+              normal: {
+                barBorderRadius: 10,
+                color: "#e7e7e7",
+              },
+            },
+          },
+        ],
+      };
+      chart.setOption(options);
+    },
+  }
+}
+</script>
+
+<style lang="less" scoped>
+</style>

src/components/business/space/charts/spaceCostChart.vue

@@ -0,0 +1,140 @@
+<script>
+export default {
+  data() {
+    return {
+      show: false,
+    }
+  },
+  props: {
+    height: Number,
+  },
+  mounted() {
+    this.$nextTick(()=>{
+      this.initChart();
+    })
+    let app = this;
+  },
+  methods: {
+    initChart() {
+      let chart = this.$echarts.init(this.$refs.myChart)
+      let defaultOption = {
+        legend: {
+          data: [
+            '办公室',
+            '休闲区',
+          ]
+        },
+        grid: {
+          left: '0%', //默认10%
+          right: '1%', //默认10%
+          bottom: '10%', //默认60
+          top: '15%',
+          containLabel: true
+          //grid区域是否包含坐标轴的刻度标签
+        },
+        xAxis: {
+          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+        },
+        yAxis: [
+          {
+            type: 'value',
+            nameTextStyle: {
+              padding: [10, 0, 10, -12]
+            },
+          },
+        ],
+        dataZoom: [
+          {
+            type: 'slider',
+            start: 0,
+            end: 100,
+            height: 12,
+          },
+          {
+            type: 'inside',
+            start: 0,
+            end: 100,
+          }
+        ],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          },
+          textStyle: {
+            color: '#fff',
+            align: 'left',
+            fontSize: 14
+          },
+          axisLine: {//x坐标轴轴线
+            show: true,
+            lineStyle: {//x坐标轴轴线样式
+              color: '#000',//'#ccc' | 'rgb(128, 128, 128)' | 'rgba(128, 128, 128, 0.5)'，设置标签颜色
+            }
+          },
+          backgroundColor: 'rgba(0,0,0,0.8)',
+        },
+        series: [
+          {
+            name: '办公室',
+            data: [302, 395, 227, 375, 349, 396, 304, 226, 207, 383, 287, 243],
+            type: 'line',
+            stack: 'x',
+            smooth: true,
+            showSymbol:false,
+            areaStyle: {
+              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: '#A6C9FF' // 0% 处的颜色
+              }, {
+                offset: 0.8,
+                color: '#ffffff' // 100% 处的颜色
+              }], false),
+            },
+            lineStyle: {
+              color: "#5A9BFE",
+              width: 1,
+            },
+            emphasis: {
+              scale:1.5
+            }
+          },
+          {
+            name: '休闲区',
+            data: [108, 104, 117, 152, 157, 121, 138, 146, 106, 143, 132, 177],
+            type: 'line',
+            stack: 'x',
+            smooth: true,
+            showSymbol:false,
+            areaStyle: {
+              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: '#B0E5CB' // 0% 处的颜色
+              }, {
+                offset: 0.8,
+                color: '#ffffff' // 100% 处的颜色
+              }], false),
+            },
+            lineStyle: {
+              color: "#62CC97",
+              width: 1,
+            },
+            emphasis: {
+              scale:1.5
+            },
+          }
+        ]
+      };
+      chart.setOption(defaultOption);
+    }
+  }
+}
+</script>
+
+<template>
+  <div id="personTrendChart" style="width: 100%" :style="{height: height+'px'}" ref="myChart" ></div>
+</template>
+
+<style lang="less" scoped>
+
+</style>

src/components/business/space/space.vue

@@ -1,32 +1,31 @@
 <template>
   <div>
-    <div class="border-shadow">
+    <div class="page-query-core">
       <query></query>
       <card :title="'核心指标'">
         <CoreData :data-list="coreData"></CoreData>
       </card>
     </div>
-    <a-row :style="{ marginTop: '15px' }">
+    <a-row style="margin-top: 12px">
       <a-col :span="18">
-        <div class="left border-shadow">
+        <div class="left ">
           <card :title="'空间分析'">
-            <div
-              class="myChart"
-              ref="myChart1"
-              :style="{ height: '505px' }"
-            ></div>
+            <div style="padding: 8px">
+              <img :src="requireImg('business/联通img.png')" width="100%">
+            </div>
           </card>
         </div>
       </a-col>
       <a-col :span="6">
-        <div class="right border-shadow">
+        <div class="right ">
           <card :title="'空间成本'">
-            <div class="cben">
-              <div
-                class="myChart"
-                ref="myChart2"
-                :style="{ height: '505px' }"
-              ></div>
+            <div style="height: 40px">
+              <span style="font-size: 16px; font-weight: 400; color: #B2B2B2; margin-left: 25%">人均空间成本</span>
+              <span style="padding: 0 10%;font-size: 20px;color: #4D4D4D">36</span>
+              <span style="color: #B2B2B2">元/m2/人</span>
+            </div>
+            <div style="padding: 0 15px">
+              <SpaceCostChart :height="540" />
             </div>
           </card>
         </div>
@@ -34,14 +33,17 @@
     </a-row>
   </div>
 </template>
-    <script>
+<script>
 import query from "@/components/common/query.vue";
 import card from "@/components/common/card.vue";
+import {requireImg} from "@/utils/requireImg";
+import SpaceCostChart from "@/components/business/space/charts/spaceCostChart.vue";
 
 export default {
   components: {
     query,
     card,
+    SpaceCostChart,
   },
   data() {
     const listData = [];
@@ -58,41 +60,37 @@ export default {
         {
           title: "自用工位分配率",
           num: "98%",
-          unit: "",
           historyDesc: "同比",
           historyNum: 0.4,
         },
         {
           title: "会议室使用率",
           num: "50%",
-          unit: "",
           historyDesc: "同比",
           historyNum: 0.4,
         },
         {
           title: "流动工位总数",
           num: "100",
-          unit: "",
           historyDesc: "同比",
           historyNum: 60,
         },
         {
           title: "固定工位总数",
           num: "1000",
-          unit: "",
+
           historyDesc: "同比",
           historyNum: 60,
         },
         {
-          title: "休闲/办公面积",
+          title: "休闲/办公面积(m2)",
           num: "40/1000",
-          unit: "m<sup>2</sup>",
           historyDesc: "同比",
           historyNum: 0.4,
         },
         {
           type: 1,
-          isHighLight: false,
+          showStar: true,
           title: "值得关注",
           content: "会议室使用率过低，建议出租",
         },
@@ -109,6 +107,7 @@ export default {
     }, 100);
   },
   methods: {
+    requireImg,
     handleChange(value) {
       console.log(`selected ${value}`);
     },
@@ -187,21 +186,21 @@ export default {
             normal: {
               //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
               color: new that.$echarts.graphic.LinearGradient(
-                0,
-                0,
-                0,
-                1,
-                [
-                  {
-                    offset: 0,
-                    color: item.startColor,
-                  },
-                  {
-                    offset: 1,
-                    color: item.endColor,
-                  },
-                ],
-                false
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: item.startColor,
+                    },
+                    {
+                      offset: 1,
+                      color: item.endColor,
+                    },
+                  ],
+                  false
               ),
             },
           },
@@ -331,19 +330,20 @@ export default {
   },
 };
 </script>
-      
-    
-    <style lang="less" scoped>
+
+
+<style lang="less" scoped>
 .left {
-  padding-right: 15px;
-  margin-right: 5px;
+  margin-right: 6px;
 }
+
 .right {
-  padding-left: 15px;
-  margin-left: 5px;
+  margin-left: 6px;
 }
+
 .cben {
   font-weight: bold;
+
   span {
     font-size: 20px;
   }

src/components/common/card.vue

@@ -17,13 +17,12 @@ export default {
   },
   data() {
     return {
-      show: true,
+      show: false,
     };
   },
   mounted() {
     this.$nextTick(()=>{
-      //this.show = true;
-      this.$forceUpdate()
+      this.show = true;
     })
   }
 };

src/components/common/query.vue

@@ -1,26 +1,31 @@
 <template>
   <div class="ioc-query-form">
     <a-form layout="inline" :form="formData">
-      <a-form-item label="单位名称：" class="formItem">
-        <a-select default-value="中迅" style="width: 200px">
-          <a-select-option value="中迅"> 中迅 </a-select-option>
-          <a-select-option value="电信规划院"> 电信规划院 </a-select-option>
+      <a-form-item label="单位名称：" class="formItem" v-if="visible.company">
+        <a-select default-value="0" style="width: 200px" v-model="formData.company">
+          <a-select-option value="0"> 全部 </a-select-option>
+          <a-select-option v-for="item in companyData" :key="item.value" :value="item.value"> {{ item.label }} </a-select-option>
         </a-select>
       </a-form-item>
-      <a-form-item label="部门名称：" class="formItem">
-        <a-select default-value="市场部" style="width: 200px">
-          <a-select-option value="市场部"> 市场部 </a-select-option>
-          <a-select-option value="创新产品研发中心"> 创新产品研发中心 </a-select-option>
-          <a-select-option value="全部"> 全部 </a-select-option>
+      <a-form-item label="部门名称：" class="formItem" v-if="visible.dept">
+        <a-select default-value="0" style="width: 200px" v-model="formData.dept">
+          <a-select-option value="0"> 全部 </a-select-option>
+          <a-select-option v-for="item in deptData" :key="item.value" :value="item.value"> {{ item.label }} </a-select-option>
         </a-select>
       </a-form-item>
-      <a-form-item label="时间范围：" class="formItem">
-        <timeRange ref="timeRange" style="width: 250px"></timeRange>
+      <a-form-item label="楼层：" class="formItem" v-if="visible.floor">
+        <a-select default-value="0" style="width: 200px" v-model="formData.floor">
+          <a-select-option value="0"> 全部 </a-select-option>
+          <a-select-option v-for="item in floorData" :key="item.value" :value="item.value"> {{ item.label }} </a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item label="时间范围：" class="formItem" v-if="visible.time">
+        <timeRange :time-range.sync="formData.timeRange" ref="timeRange" style="width: 250px"></timeRange>
       </a-form-item>
       <a-form-item class="formItem" style="float: right;margin-right: 3%">
         <a-space size="middle">
-          <a-button type="primary" size="small" style="width: 70px;background-color: #B3B3B3;border: none;">重置</a-button>
-          <a-button type="primary" size="small" style="width: 70px;">查询</a-button>
+          <a-button type="primary" size="small" style="width: 70px;background-color: #B3B3B3;border: none;" @click="reset">重置</a-button>
+          <a-button type="primary" size="small" style="width: 70px;" @click="search(formData)">查询</a-button>
         </a-space>
       </a-form-item>
     </a-form>
@@ -33,11 +38,95 @@ export default {
   components: {
     timeRange,
   },
+  props: {
+    queryData: Object,
+    show: Array,
+    reset: Function,
+    search: Function,
+  },
+  emits: ['update:queryData'],
+  setup(props, context) {
+    const methods = {
+      updateFormData(obj) {
+        context.emit('update:queryData', obj)
+      }
+    }
+    return methods
+  },
+  watch: {
+    formData: {
+      handler: function (val) {
+        this.updateFormData(val)
+      },
+      deep: true,
+    }
+  },
   data() {
     return {
+      visible: {
+        company: false,
+        floor: false,
+        dept: false,
+        time: false
+      },
       formData: {},
+      // 单位数据
+      companyData: [
+        {
+          label: '中讯邮电咨询设计院',
+          value: '1'
+        },
+        {
+          label: '北京电信规划院',
+          value: '2'
+        },
+        {
+          label: '上分',
+          value: '3'
+        }
+      ],
+      // 楼层数据
+      floorData: [
+        {
+          label: '1F',
+          value: '1'
+        },{
+          label: '2F',
+          value: '2'
+        },{
+          label: '3F',
+          value: '3'
+        },{
+          label: '4F',
+          value: '4'
+        },{
+          label: '5F',
+          value: '5'
+        }
+      ],
+      // 部门数据
+      deptData: [
+        {
+          label: '市场部',
+          value: '1'
+        },
+        {
+          label: '研发部',
+          value: '2'
+        }
+      ],
     };
   },
+  created() {
+    for (let i = 0; i < this.show.length; i++) {
+      this.visible[this.show[i]] = true
+    }
+  },
+  mounted() {
+    if (this.queryData) {
+      this.formData = JSON.parse(JSON.stringify(this.queryData))
+    }
+  },
 };
 </script>
 

src/components/common/timeRange.vue

@@ -1,19 +1,58 @@
 <template>
-  <a-range-picker :disabled-date="disabledDate" :disabled-time="disabledRangeTime" :format="timeFormat" />
+  <a-range-picker v-if="show" :default-value="[defaultStartTime,defaultEndTime]"
+                  :format="timeFormat"
+                  @change="change"
+  />
 </template>
 
 <script>
 export default {
+  data() {
+    return {
+      show: false,
+      defaultStartTime: null,
+      defaultEndTime: null,
+    }
+  },
   props: {
     timeFormat: {
       type: String,
       default: "YYYY/MM/DD"
+    },
+    timeRange: Object,
+  },
+  created() {
 
+  },
+  mounted() {
+    this.$nextTick(()=>{
+      if (this.timeRange) {
+        if (this.timeRange.startTime) {
+          this.defaultStartTime = this.$moment(this.timeRange.startTime, this.timeFormat)
+        }
+        if (this.timeRange.endTime) {
+          this.defaultEndTime = this.$moment(this.timeRange.endTime, this.timeFormat)
+        }
+      }
+      this.show = true
+    })
+  },
+  emits: ['update:timeRange'],
+  setup(props, context) {
+    const methods = {
+      updateTimeRange(obj) {
+        context.emit('update:timeRange', obj)
+      },
     }
+    return methods
   },
   methods: {
-    getTimeRange() {
-      console.log(1);
+    change(date, dateStr) {
+      let obj = {
+        startTime: dateStr[0],
+        endTime: dateStr[1]
+      }
+      this.updateTimeRange(obj);
     },
     range(start, end) {
       const result = [];

src/components/dashboard/more/dashboardMore.vue

@@ -1,4 +1,6 @@
 <script>
+import api from "@/api/dashboard"
+
 import Card from "@/components/common/card.vue";
 import FloorOverview from "@/components/dashboard/more/floorOverview.vue";
 import SpaceOverview from "@/components/dashboard/more/spaceOverview.vue";
@@ -48,6 +50,7 @@ export default {
   mounted() {
   },
   methods: {
+
     toggleVisible(obj) {
       if (obj.visible) {
         obj.visible = false
@@ -79,41 +82,40 @@ export default {
         </a-button>
         <template #content>
           <div>
-            <Card title="自定义模块">
-              <div class="ioc-dashboard-more-config-show" style="width: 450px">
-                <a-row :gutter="30" >
-                  <template v-for="obj in moduleConfig" >
-                    <a-col v-if="obj.visible" :key="obj.id" :span="8">
-                      <div class="ioc-dashboard-more-config-item">
-                        {{ obj.name }}
-                        <div class="module-btn-opr" @click="toggleVisible(obj)">
+            <div style="font-size: 16px;font-weight: 400;color: #333333;margin: 0px 0px 10px">自定义模块</div>
+            <div class="ioc-dashboard-more-config-show" style="width: 450px">
+              <a-row :gutter="30" >
+                <template v-for="obj in moduleConfig" >
+                  <a-col v-if="obj.visible" :key="obj.id" :span="8">
+                    <div class="ioc-dashboard-more-config-item">
+                      {{ obj.name }}
+                      <div class="module-btn-opr" @click="toggleVisible(obj)">
                           <span class="anticon" >
                             <svg width="20" height="20" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z" fill="#cd2a2a" stroke="#cd2a2a" stroke-width="4" stroke-linejoin="round"/><path d="M16 24L32 24" stroke="#FFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
                           </span>
-                        </div>
                       </div>
-                    </a-col>
-                  </template>
+                    </div>
+                  </a-col>
+                </template>
 
-                </a-row>
-              </div>
-              <div style="margin-top: 12px;padding-left: 20px;height: auto;width: 450px">
-                <a-row :gutter="30">
-                  <template v-for="obj in moduleConfig" >
-                    <a-col v-if="!obj.visible" :key="obj.id" :span="8">
-                      <div class="ioc-dashboard-more-config-item">
-                        {{ obj.name }}
-                        <div class="module-btn-opr" style="right: 14px" @click="toggleVisible(obj)">
+              </a-row>
+            </div>
+            <div style="margin-top: 12px;padding-left: 20px;height: auto;width: 450px">
+              <a-row :gutter="30">
+                <template v-for="obj in moduleConfig" >
+                  <a-col v-if="!obj.visible" :key="obj.id" :span="8">
+                    <div class="ioc-dashboard-more-config-item">
+                      {{ obj.name }}
+                      <div class="module-btn-opr" style="right: 14px" @click="toggleVisible(obj)">
                            <span class="anticon" >
                              <svg width="20" height="20" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z" fill="#2ea8e6" stroke="#2ea8e6" stroke-width="4" stroke-linejoin="round"/><path d="M24 16V32" stroke="#FFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M16 24L32 24" stroke="#FFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
                            </span>
-                        </div>
                       </div>
-                    </a-col>
-                  </template>
-                </a-row>
-              </div>
-            </Card>
+                    </div>
+                  </a-col>
+                </template>
+              </a-row>
+            </div>
           </div>
         </template>
       </a-popover>

src/components/dashboard/more/spaceOverview.vue

@@ -1,23 +1,15 @@
 <script>
 import Card from "@/components/common/card.vue";
 import DataSituation from "@/components/dashboard/more/space/DataSituation.vue";
+import api from "@/api/dashboard";
 export default {
   data() {
     return {
       meeting: {
-        percent: 0.98,
-        total: 2000,
-        used: 200,
       },
       parking: {
-        percent: 0.2,
-        total: 2000,
-        used: 200,
       },
       work: {
-        percent: 0.65,
-        total: 2000,
-        used: 200,
       }
     }
   },
@@ -26,9 +18,20 @@ export default {
     DataSituation,
   },
   mounted() {
+    this.init();
   },
   methods: {
-
+    init() {
+      this.getSpaceOverview();
+    },
+    // 获取空间概览
+    getSpaceOverview() {
+      api.getSpaceOverview(this.$util.dateUtil.getCurrDateTime()).then(res=>{
+        this.meeting = res.data[0]
+        this.parking = res.data[1]
+        this.work = res.data[2]
+      })
+    },
   }
 }
 </script>
@@ -37,17 +40,17 @@ export default {
   <Card title="空间概览">
     <a-row >
       <a-col :span="8">
-        <DataSituation :percent="meeting.percent" :total-num="meeting.total" :used-num="meeting.used"
+        <DataSituation :percent="meeting.percentage" :total-num="meeting.total" :used-num="meeting.occupancy"
                        title="会议态势" color="blue" total-title="总会议室(间)" used-title="饱和会议室">
         </DataSituation>
       </a-col>
       <a-col :span="8">
-        <DataSituation :percent="parking.percent" :total-num="parking.total" :used-num="parking.used"
+        <DataSituation :percent="parking.percentage" :total-num="parking.total" :used-num="parking.occupancy"
                        title="停车态势" color="green" total-title="总停车位(个)" used-title="已使用车位">
         </DataSituation>
       </a-col>
       <a-col :span="8">
-        <DataSituation :percent="work.percent" :total-num="work.total" :used-num="work.used"
+        <DataSituation :percent="work.percentage" :total-num="work.total" :used-num="work.occupancy"
                        title="工位态势" color="yellow" total-title="总工位(个)" used-title="已使用工位">
         </DataSituation>
       </a-col>

src/components/dashboard/portrait/dashboardPortrait.vue

@@ -99,26 +99,6 @@ export default {
 .ioc-dashboard-portrait {
   width: 100%;
   height: 100%;
-  .dashboardPortrait-select {
-    padding: 8px 15px;
-    .dashboardPortrait-select-tag {
-      border: 1px solid #F0F1F2;
-      border-radius: 12px;
-      padding: 1px 12px;
-      margin-right: 16px;
-      cursor: pointer;
-    }
-    .ant-tag-checkable-checked {
-      .dashboardPortrait-select-text {
-        color: white;
-      }
-    }
-    .dashboardPortrait-select-text {
-      color: #B3B3B3;
-    }
-  }
-  .dashboardPortrait-body {
-    padding: 8px 12px;
-  }
+
 }
 </style>

src/components/dashboard/portrait/money/investDistributeChart.vue

@@ -85,6 +85,7 @@ export default {
             data: [380, 280, 350, 200],
             type: 'bar',
             stack: 'A',
+            barWidth: '30%',
             backgroundStyle: {
               color: 'rgba(180, 180, 180, 0.2)'
             }

src/components/dashboard/portrait/money/investYearChart.vue

@@ -79,6 +79,7 @@ export default {
             data: [20, 25, 33, 45, 70, 75],
             type: 'bar',
             stack: 'A',
+            barWidth: '30%',
             backgroundStyle: {
               color: 'rgba(180, 180, 180, 0.2)'
             }

src/components/dashboard/portrait/person/personTrendChart.vue

@@ -12,6 +12,7 @@ export default {
     this.$nextTick(()=>{
       this.initChart();
     })
+    let app = this;
   },
   methods: {
     initChart() {
@@ -150,7 +151,10 @@ export default {
           }
         ]
       };
-      chart.setOption(defaultOption)
+      chart.setOption(defaultOption);
+      setTimeout(function () {
+        chart.resize();
+      }, 1000)
     }
   }
 }

src/components/dashboard/portrait/personPortrait.vue

@@ -1,4 +1,6 @@
 <script>
+import api from "@/api/dashboard";
+
 import CoreData from "@/components/common/coreData.vue";
 import PersonTrendChart from "@/components/dashboard/portrait/person/personTrendChart.vue";
 export default {
@@ -10,34 +12,34 @@ export default {
           title: '进入大楼(人)',
           num: 2000,
           historyDesc: '同比',
-          historyNum: 0.4
+          historyNum: 0
         },
         {
           type: 0,
           title: '离开大楼(人)',
           num: 200,
           historyDesc: '同比',
-          historyNum: -0.4
+          historyNum: 0
         },
         {
           type: 0,
           title: '9点前进入大楼(人)',
           num: 1800,
           historyDesc: '同比',
-          historyNum: -0.4
+          historyNum: 0
         },
         {
           type: 0,
           title: '楼内人员数量(人)',
           num: 80,
           historyDesc: '同比',
-          historyNum: -0.4
+          historyNum: 0
         },
         {
           type: 1,
           title: '值得关注',
           showStar: true,
-          content: '本周上班时间持续延后'
+          content: ''
         },
       ]
     }
@@ -48,6 +50,35 @@ export default {
   components: {
     CoreData,
     PersonTrendChart,
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      this.getCoreData();
+    },
+    getCoreData() {
+      api.getPersonCoreData(this.$util.dateUtil.getNearlyMonthRange()).then(res=>{
+        this.coreData[0].num = res.list[0].value
+        this.coreData[0].historyNum = res.list[0].compare
+
+
+        this.coreData[1].num = res.list[1].value
+        this.coreData[1].historyNum = res.list[1].compare
+
+        this.coreData[2].num = res.list[2].value
+        this.coreData[2].historyNum = res.list[2].compare
+
+        this.coreData[3].num = res.list[3].value
+        this.coreData[3].historyNum = res.list[3].compare
+
+        this.coreData[4].content = res.worthAttention
+
+        console.log(this.coreData)
+
+      })
+    }
   }
 }
 </script>

src/components/doubleCarbon/PV/charts/carbonPvEmissionChart.vue

@@ -0,0 +1,199 @@
+<script>
+export default {
+  data() {
+    return {
+      show: false,
+    }
+  },
+  props: {
+    height: Number,
+  },
+  mounted() {
+    this.$nextTick(()=>{
+      this.initChart();
+    })
+  },
+  methods: {
+    initChart() {
+      let chart = this.$echarts.init(this.$refs.myChart)
+      let defaultOption = {
+        legend: {
+          data: [
+            '中迅',
+            '北京规划院',
+            '郑分',
+            '广分',
+            '上分',
+            '成分',
+          ]
+        },
+        grid: {
+          left: '0%', //默认10%
+          right: '1%', //默认10%
+          bottom: '15%', //默认60
+          top: '15%',
+          containLabel: true
+          //grid区域是否包含坐标轴的刻度标签
+        },
+        xAxis: {
+          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+        },
+        yAxis: [
+          {
+            name: '排放量',
+            type: 'value',
+            nameTextStyle: {
+              padding: [10, 0, 10, -12]
+            },
+          },
+        ],
+        dataZoom: [
+          {
+            type: 'slider',
+            start: 0,
+            end: 100,
+            height: 12,
+          },
+          {
+            type: 'inside',
+            start: 0,
+            end: 100,
+          }
+        ],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          },
+          textStyle: {
+            color: '#fff',
+            align: 'left',
+            fontSize: 14
+          },
+          axisLine: {//x坐标轴轴线
+            show: true,
+            lineStyle: {//x坐标轴轴线样式
+              color: '#000',//'#ccc' | 'rgb(128, 128, 128)' | 'rgba(128, 128, 128, 0.5)'，设置标签颜色
+            }
+          },
+          backgroundColor: 'rgba(0,0,0,0.8)',
+        },
+        series: [
+          {
+            name: '中迅',
+            data: [199, 190, 122, 135, 124, 152, 181, 232, 249, 138, 92, 76],
+            type: 'line',
+            smooth: true,
+            showSymbol:false,
+            symbolSize: 6,
+            lineStyle: {
+              color: "#FDB65B",
+              width: 4,
+            },
+            itemStyle: {
+              color: "#FDB65B"
+            },
+            emphasis: {
+              scale:1.5
+            }
+          },
+          {
+            name: '北京规划院',
+            data: [181, 237, 168, 140, 244, 66, 175, 218, 67, 77, 74, 78],
+            type: 'line',
+            smooth: true,
+            showSymbol:false,
+            lineStyle: {
+              color: "#62CC97",
+              width: 1,
+            },
+            itemStyle: {
+              color: "#62CC97"
+            },
+            emphasis: {
+              scale:1.5
+            },
+          },
+          {
+            name: '郑分',
+            data: [160, 91, 145, 216, 103, 81, 65, 200, 249, 232, 151, 203],
+            type: 'line',
+            smooth: true,
+            showSymbol:false,
+            lineStyle: {
+              color: "#4D94FF",
+              width: 1,
+            },
+            itemStyle: {
+              color: "#4D94FF"
+            },
+            emphasis: {
+              scale:1.5
+            },
+          },
+          {
+            name: '广分',
+            data: [54, 77, 58, 58, 139, 154, 210, 151, 177, 53, 166, 131],
+            type: 'line',
+            smooth: true,
+            showSymbol:false,
+            lineStyle: {
+              color: "#4DF5FF",
+              width: 1,
+            },
+            itemStyle: {
+              color: "#4DF5FF"
+            },
+            emphasis: {
+              scale:1.5
+            },
+          },
+          {
+            name: '上分',
+            data: [118, 229, 163, 235, 51, 108, 125, 78, 122, 238, 145, 133],
+            type: 'line',
+            smooth: true,
+            showSymbol:false,
+            lineStyle: {
+              color: "#FF6E4D",
+              width: 1,
+            },
+            itemStyle: {
+              color: "#FF6E4D"
+            },
+            emphasis: {
+              scale:1.5
+            },
+          },
+          {
+            name: '成分',
+            data: [74, 239, 109, 93, 167, 104, 71, 155, 206, 176, 129, 103],
+            type: 'line',
+            smooth: true,
+            showSymbol:false,
+            lineStyle: {
+              color: "#8B4DFF",
+              width: 1,
+            },
+            itemStyle: {
+              color: "#8B4DFF"
+            },
+            emphasis: {
+              scale:1.5
+            },
+          }
+        ]
+      };
+      chart.setOption(defaultOption)
+    }
+  }
+}
+</script>
+
+<template>
+  <div id="personTrendChart" style="width: 100%" :style="{height: height+'px'}" ref="myChart" ></div>
+</template>
+
+<style lang="less" scoped>
+
+</style>

src/components/doubleCarbon/PV/charts/carbonPvQuotaChart.vue

@@ -0,0 +1,91 @@
+<script>
+import Card from "@/components/common/card.vue";
+export default {
+  data() {
+    return {}
+  },
+  props: {
+    height: Number
+  },
+  components: {
+    Card
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      let chart = this.$echarts.init(this.$refs.myChart);
+      let options = {
+        color: ['#6DA6F5','#A29DF8'],
+        legend: {
+          data: [
+            '碳配额',
+            '已消耗',
+          ]
+        },
+        grid: {
+          left: '2%', //默认10%
+          right: '8%', //默认10%
+          bottom: '2%', //默认60
+          top: '10%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value',
+          nameTextStyle: {
+            padding: [10, 0, 10, -20]
+          },
+        },
+        yAxis: {
+          type: 'category',
+          data: ['上分', '广分', '郑分', '规划院', '中迅'],
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          },
+          textStyle: {
+            color: '#fff',
+            align: 'left',
+            fontSize: 14
+          },
+          axisLine: {//x坐标轴轴线
+            show: true,
+            lineStyle: {//x坐标轴轴线样式
+              color: '#000',//'#ccc' | 'rgb(128, 128, 128)' | 'rgba(128, 128, 128, 0.5)'，设置标签颜色
+            }
+          },
+          backgroundColor: 'rgba(0,0,0,0.8)',
+        },
+        series: [
+          {
+            name: '碳配额',
+            data: [80, 280, 120, 200, 30],
+            type: 'bar',
+            barWidth: '30%',
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            }
+          },
+        ]
+      };
+      chart.setOption(options);
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="myChart" ref="myChart" :style="{height: height+'px'}">
+
+  </div>
+
+</template>

src/components/doubleCarbon/PV/doubleCarbonPv.vue

@@ -1,464 +1,127 @@
-<!--
-    光伏发电页面
-    @author 刘梦祥
-    @date 2023年2月8日
--->
-<template>
-  <div class="doubleCarbon-main-box flexColumn">
-    <a-spin class="spinStyle" size="large" tip="Loading..." v-show="searchLoading"></a-spin>
-    <!-- 头部搜索区域 -->
-    <div class="borderColor">
-      <div class="flex flex_between margin5rem">
-        <div class="flex">
-          <div class="mr1rem">
-            单位名称：
-            <a-select
-              style="width:200px;"
-              v-model="searchParam.nameOfUnit"
-              :allowClear="selectProps.allowClear"
-              :mode="selectProps.mode"
-              :options="options.nameOfUnit"
-              :notFoundConent="selectProps.notFoundConent"
-              :placeholder="selectProps.placeholder"
-            ></a-select>
-          </div>
-          <div>
-            时间范围： <a-month-picker id="startTime" format="YYYY-MM" @change="changeTimeRangeS" placeholder="开始时间" />~
-            <a-month-picker id="endTime" format="YYYY-MM" @change="changeTimeRangeE" placeholder="结束时间" />
-          </div>
-        </div>
-        <div>
-          <a-button class="mr1rem" @click="reset">重置</a-button>
-          <a-button type="primary" @click="search">查询</a-button>
-        </div>
-      </div>
-      <div class="cardTitle margin5rem">核心指标</div>
-      <div v-if="coreList.length > 0" class="flex flex_around coreListBox margin5rem">
-        <div v-for="(item, index) in coreList" :key="'coreList' + index">
-          <div class="core_title">{{ item.title }}</div>
-          <div class="core_value">
-            {{ item.value ? item.value : "--" }}<span class="core_unit">{{ item.unit ? item.unit : "" }}</span
-            ><span class="core_leavel" v-if="item.leavel" :style="{ color: $constant.COLOR_LEAVEL[item.leavel] }">!</span>
-          </div>
-          <div v-if="item.info" class="core_info">
-            <span class="core_info_title">{{ item.info.title }}</span
-            ><span class="core_info_value" :style="{ color: $constant.COLOR_LEAVEL[item.info.leavel] }"
-              >{{ item.info.value
-              }}<a-icon v-if="item.info.leavel && (item.info.leavel == 1 || item.info.leavel == 3)" :type="item.info.leavel == 3 ? 'caret-up' : 'caret-down'" /></span>
-          </div>
-        </div>
-      </div>
-      <div class="flex flex_around coreListBox margin5rem" v-if="coreList.length == 0" style="height:120px;">
-        <a-empty></a-empty>
-      </div>
-    </div>
-    <!-- 碳排放分析和碳配额构成 -->
-    <div class="flex" style="height:400px;">
-      <div class="echartBox_left borderColor">
-        <div class="cardTitle margin5rem">碳排放分析</div>
-        <div class="margin5rem chartDomBox">
-          <LineChart v-if="chartData.LineChartData" :echartData="chartData.LineChartData" />
-          <a-empty v-else></a-empty>
-        </div>
-      </div>
-      <div class="echartBox_right borderColor">
-        <div class="cardTitle margin5rem">碳配额构成</div>
-        <div class="margin5rem chartDomBox">
-          <BarChart v-if="chartData.BarChartData" :echartData="chartData.BarChartData" />
-          <a-empty v-else></a-empty>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
-import LineChart from "../../echart/LineChart.vue";
-import BarChart from "../../echart/BarChart.vue";
-import PieChart from "../../echart/PieChart.vue";
-// 模拟数据
-import  AnalogData from "../AnalogData.js"
+import Card from "@/components/common/card.vue";
+import CoreData from "@/components/common/coreData.vue";
+import Query from "@/components/common/query.vue";
+
+import CarbonPvEmissionChart from "@/components/doubleCarbon/PV/charts/carbonPvEmissionChart.vue";
+import CarbonPvQuotaChart from "@/components/doubleCarbon/PV/charts/carbonPvQuotaChart.vue";
+
 export default {
   components: {
-    LineChart,
-    BarChart,
-    PieChart
+    Card,
+    CoreData,
+    Query,
+    CarbonPvEmissionChart,
+    CarbonPvQuotaChart,
   },
   data() {
     return {
-      // selectProps配置
-      selectProps: {
-        allowClear: true, // 支持清除
-        mode: "default", // 模式['default'|'multiple'|'tags'|'combobox']
-        notFoundConent: "Not Found", // 当下拉列表为空时显示的内容
-        placeholder: "请选择", // 选择框默认文字 string|slot
-        showArrow: true, // 是否显示下拉小箭头
-        size: "large" // 选择框大小['large'|'small']
-      },
-      // 单位名称option可选值
-      options: {
-        nameOfUnit: [] // options 数据，如果设置则不需要手动构造 selectOption 节点
-      },
-      // loading状态
-      searchLoading: true,
-      // 头部搜索条件中绑定值
-      monthArr: [],
-      searchParam: {
-        nameOfUnit: undefined,
-        timeRange: [undefined, undefined]
-      },
-      // 头部核心指标循环显示数据
-      coreList: [],
-      // 双碳新闻模拟数据
-      DoubleCarbonNewsInfoList: [],
-      // 双碳新闻弹窗打开状态
-      showModalStatus: false,
-      // 弹窗暂存数据对象
-      showModalInfo: {
-        title: "--",
-        content: "--",
-        author: "--",
-        pushTime: "--"
-      },
-      // chart暂存数据对象
-      chartData: []
-    };
-  },
-  created() {},
-  mounted() {
-    // 页面初始化
-    this.init();
-    //默认是当年的1月到12月
-    this.defaulTimeRangeS();
-    this.defaulTimeRangeE();
-  },
-  methods: {
-    // 开始时间初始化
-    defaulTimeRangeS() {
-      this.searchParam.timeRange[0] = this.$moment()
-        .startOf("year")
-        .format("YYYY-MM-DD 00:00:00");
-      document.getElementById("startTime").querySelector("input").value = this.$moment()
-        .startOf("year")
-        .format("YYYY-MM");
-    },
-    // 结束时间初始化
-    defaulTimeRangeE() {
-      this.searchParam.timeRange[1] = this.$moment()
-        .endOf("year")
-        .format("YYYY-MM-DD 23:59:59");
-      document.getElementById("endTime").querySelector("input").value = this.$moment()
-        .endOf("year")
-        .format("YYYY-MM");
-    },
-    // 修改开始时间时
-    changeTimeRangeS(date, dateStr) {
-      // 修改时间前判断是否合理
-      if (this.searchParam.timeRange[1]) {
-        if (
-          this.$moment(this.$moment(dateStr, "YYYY-MM").format("YYYY-MM-DD 00:00:00")).diff(
-            this.$moment(this.searchParam.timeRange[1])
-          ) > 0
-        ) {
-          this.$message.error("开始时间不能大于结束时间！请重新选择！");
-          setTimeout(() => {
-            document.getElementById("startTime").querySelector("input").value = this.$moment()
-              .startOf("year")
-              .format("YYYY-MM");
-          }, 10);
-        }
-      }
-      if (dateStr) {
-        this.searchParam.timeRange[0] = this.$moment(dateStr, "YYYY-MM").format("YYYY-MM-DD 00:00:00");
-      } else {
-        this.searchParam.timeRange[0] = undefined;
-      }
-    },
-    // 修改结束时间时
-    changeTimeRangeE(date, dateStr) {
-      // 修改时间前判断是否合理
-      if (this.searchParam.timeRange[0]) {
-        if (
-          this.$moment(this.searchParam.timeRange[0]).diff(
-            this.$moment(
-              this.$moment(dateStr, "YYYY-MM")
-                .endOf("month")
-                .format("YYYY-MM-DD 23:59:59")
-            )
-          ) > 0
-        ) {
-          this.$message.error("结束时间不能小于开始时间！请重新选择！");
-          setTimeout(() => {
-            document.getElementById("endTime").querySelector("input").value = this.$moment()
-              .endOf("year")
-              .format("YYYY-MM");
-          }, 10);
-        }
-      }
-      if (dateStr) {
-        this.searchParam.timeRange[1] = this.$moment(dateStr, "YYYY-MM")
-          .endOf("month")
-          .format("YYYY-MM-DD 23:59:59");
-      } else {
-        this.searchParam.timeRange[1] = undefined;
-      }
-    },
-    // 查询事件
-    search() {
-      // 时间范围条件不合理判断
-      if (this.searchParam.timeRange[0] || this.searchParam.timeRange[1]) {
-        if (!this.searchParam.timeRange[0]) {
-          this.$message.info("请选择开始时间！");
-          return;
-        } else if (!this.searchParam.timeRange[1]) {
-          this.$message.info("请选择结束时间！");
-          return;
+      coreData: [
+        {
+          title: '光伏累计减排(tco2e/年内)',
+          num: 60,
+          historyDesc: '同比',
+          historyNum: 0.4
+        },
+        {
+          title: '光伏发电量(kwh/天)',
+          num: 50,
+          historyDesc: '同比',
+          historyNum: 0.4
+        },
+        {
+          title: '光伏节约金额(元/天)',
+          num: 500,
+          historyDesc: '同比',
+          historyNum: -0.4
+        },
+        {
+          title: '光伏补贴金额(元/天)',
+          num: 80,
+          historyDesc: '同比',
+          historyNum: -0.4
+        },
+        {
+          type: 1,
+          title: '值得关注',
+          showStar: true,
+          content: '建议扩大光伏 发电面积'
+        },
+      ],
+      newsData: [
+        {
+          title: 'xxxxxxxxxx',
+          tag: '双碳小知识',
+          author: '张峰',
+          time: '2022-02-02 15:00:00'
         }
-      }
-      this.searchLoading = true;
-      console.log("查询条件：", this.searchParam.nameOfUnit, this.searchParam.timeRange[0], this.searchParam.timeRange[1]);
-      setTimeout(() => {
-        this.searchLoading = false;
-      }, 1000);
-    },
-    // 重置事件
-    reset() {
-      document.getElementById("startTime").querySelector("input").value = this.$moment()
-        .startOf("year")
-        .format("YYYY-MM");
-      document.getElementById("endTime").querySelector("input").value = this.$moment()
-        .endOf("year")
-        .format("YYYY-MM");
-      this.searchParam = {
-        nameOfUnit: undefined,
-        timeRange: [
-          this.$moment()
-            .startOf("year")
-            .format("YYYY-MM-DD 00:00:00"),
-          this.$moment()
-            .endOf("year")
-            .format("YYYY-MM-DD 23:59:59")
-        ]
-      };
-    },
-    // 弹窗显示事件
-    showModal(item) {
-      this.showModalStatus = true;
-      this.showModalInfo = item;
-    },
-    // 弹窗隐藏事件
-    onCancel() {
-      this.showModalStatus = false;
-    },
-    init() {
-      // 初始化加载[单位名称列表、核心指标、碳排放分析、碳配额构成、碳排放占比、双碳新闻]
-      setTimeout(() => {
-        this.options.nameOfUnit = AnalogData.optionsNameOfUnit;
-        this.coreList = AnalogData.core_List;
-        this.chartData = AnalogData.CHART_DATA;
-        this.DoubleCarbonNewsInfoList = AnalogData.doubleCarbonNewsInfoList;
-        this.searchLoading = false;
-      }, 1000);
+      ]
     }
-  }
-};
+  },
+}
 </script>
 
+<template>
+  <div class="doubleCarbon-pv">
+
+    <div class="page-query-core">
+      <a-row>
+        <a-col>
+          <div style="width: 100%">
+            <Query></Query>
+          </div>
+        </a-col>
+        <a-col>
+          <div style="width: 100%">
+            <Card title="核心指标">
+              <CoreData :data-list="coreData"></CoreData>
+            </Card>
+          </div>
+        </a-col>
+      </a-row>
+    </div>
+
+    <div style="margin-top: 12px">
+      <a-row :gutter="[12,12]">
+        <a-col :span="18">
+          <Card title="碳排放分析">
+            <div class="doubleCarbon-pv-analyse">
+              <CarbonPvEmissionChart :height="450" />
+            </div>
+          </Card>
+        </a-col>
+        <a-col :span="6">
+          <Card title="碳配额构成">
+            <div class="doubleCarbon-pv-quota">
+              <CarbonPvQuotaChart :height="450" />
+            </div>
+          </Card>
+        </a-col>
+      </a-row>
+    </div>
+  </div>
+</template>
+
 <style lang="less" scoped>
-// 复用样式
-.flexColumn {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-}
-.flex {
-  display: flex;
-  flex-wrap: wrap;
-  align-content: center;
-  align-items: center;
-  &_center {
-    display: flex;
-    flex-wrap: wrap;
-    align-content: center;
-    align-items: center;
-    justify-content: center;
-  }
-  &_between {
-    display: flex;
-    flex-wrap: wrap;
-    align-content: center;
-    align-items: center;
-    justify-content: space-between;
-  }
-  &_around {
-    display: flex;
-    flex-wrap: wrap;
-    align-content: center;
-    align-items: center;
-    justify-content: space-around;
-  }
-}
-.borderColor {
-  border: 1px solid #e7eaf1;
-}
-.margin5rem {
-  margin: 0.5rem;
-}
-.padding5rem {
-  padding: 0.5rem;
-}
-// 页面主题样式
-.doubleCarbon-main-box {
-  position: relative;
+.doubleCarbon-pv {
   width: 100%;
-  height: 100%;
-  & * {
-    user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-    -ms-user-select: none;
-    ::-webkit-scrollbar {
-      width: 0 !important;
-    }
-    -ms-overflow-style: none;
-    overflow: -moz-scrollbars-none;
-  }
-  & > div {
-    // padding: 5px 10px;
-    border-radius: 2px;
-    margin-bottom: 10px;
-  }
-  .spinStyle {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    background: rgba(255, 255, 255, 0.75);
-    z-index: 2;
-  }
-}
-// 头部搜索框和（重置、查询）按钮之间的间距样式
-.mr1rem {
-  margin-right: 1rem;
-}
-// 每个card标题的字体样式
-.cardTitle {
-  padding-left: 5px;
-  font-size: 14px;
-  font-weight: bold;
-  border-left: 5px solid @primary-color;
-}
-// 核心指标
-.coreListBox {
-  border-radius: 0.5rem;
-  background-color: rgb(233, 246, 253);
-  & > div {
-    position: relative;
-    // border-left: 1px solid #909399;
-    padding: 10px;
-    margin: 10px;
-    cursor: pointer;
-    border-radius: 0.5rem;
-    &:hover {
-      background-color: rgb(210, 239, 255);
-    }
-    // &::before {
-    //   content: "";
-    //   position: absolute;
-    //   left: -10px;
-    //   height: calc(100% - 20px);
-    //   width: 1px;
-    //   background: #c9c9c9;
-    // }
-  }
-}
-// 核心指标中value的样式
-.core {
-  &_title {
-    font-size: 12px;
-    padding-bottom: 10px;
-  }
-  &_leavel {
-    font-size: 16px;
-    font-weight: bold;
-  }
-  &_value {
-    font-size: 16px;
-    font-weight: 500;
-    color: #000;
-  }
-  &_unit {
-    padding-left: 0.5rem;
-    font-size: 12px;
-    font-weight: bold;
-    color: #909399;
-  }
-  &_info {
-    padding-top: 10px;
-    font-size: 12px;
-    &_title {
-      color: #afafaf;
-    }
-    &_value {
-      padding-left: 0.5rem;
-      font-weight: bold;
-    }
-  }
-}
-// echartBox样式
-.echartBox {
-  &_left {
-    width: calc(100% - 300px - 10px);
-    height: 100%;
-  }
-  &_right {
-    margin-left: 10px;
-    width: 300px;
-    height: 100%;
-  }
-}
-.chartDomBox {
-  position: relative;
-  width: calc(100% - 20px);
-  height: calc(100% - 41px);
-  display: flex;
-  justify-content: center;
-}
-.DoubleCarbonNews {
-  padding: 10px 0;
-  font-weight: bold;
-  color: #000;
-  cursor: pointer;
-  border-bottom: 1px solid #c9c9c9;
-  &:hover {
-    color: @primary-color;
-  }
-  & > div {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  & > div:nth-child(1) {
-    width: 15%;
-  }
-  & > div:nth-child(2) {
-    height: 21px;
-    overflow: hidden;
-    width: calc(50% - 110px);
+  height: auto;
+  padding-bottom: 15px;
+  vertical-align: top;
+
+  .doubleCarbon-pv-analyse {
+    padding: 12px;
   }
-  & > div:nth-child(3) {
-    width: 20%;
+  .doubleCarbon-pv-quota {
+    padding: 12px;
   }
-  & > div:nth-child(4) {
-    width: 15%;
+  .doubleCarbon-pv-news {
+    padding: 0 12px;
+    height: 300px;
   }
-  & > div:nth-child(5) {
-    width: 30px;
+  .doubleCarbon-pv-percent {
+    padding: 0 12px;
+    height: 300px;
   }
 }
-// loading样式
-.spin-content {
-  border: 1px solid #91d5ff;
-  background-color: #e6f7ff;
-  padding: 30px;
-}
 </style>

src/components/doubleCarbon/car/charts/carbonCarEmissionChart.vue

@@ -0,0 +1,199 @@
+<script>
+export default {
+  data() {
+    return {
+      show: false,
+    }
+  },
+  props: {
+    height: Number,
+  },
+  mounted() {
+    this.$nextTick(()=>{
+      this.initChart();
+    })
+  },
+  methods: {
+    initChart() {
+      let chart = this.$echarts.init(this.$refs.myChart)
+      let defaultOption = {
+        legend: {
+          data: [
+            '中迅',
+            '北京规划院',
+            '郑分',
+            '广分',
+            '上分',
+            '成分',
+          ]
+        },
+        grid: {
+          left: '0%', //默认10%
+          right: '1%', //默认10%
+          bottom: '15%', //默认60
+          top: '15%',
+          containLabel: true
+          //grid区域是否包含坐标轴的刻度标签
+        },
+        xAxis: {
+          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+        },
+        yAxis: [
+          {
+            name: '排放量',
+            type: 'value',
+            nameTextStyle: {
+              padding: [10, 0, 10, -12]
+            },
+          },
+        ],
+        dataZoom: [
+          {
+            type: 'slider',
+            start: 0,
+            end: 100,
+            height: 12,
+          },
+          {
+            type: 'inside',
+            start: 0,
+            end: 100,
+          }
+        ],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          },
+          textStyle: {
+            color: '#fff',
+            align: 'left',
+            fontSize: 14
+          },
+          axisLine: {//x坐标轴轴线
+            show: true,
+            lineStyle: {//x坐标轴轴线样式
+              color: '#000',//'#ccc' | 'rgb(128, 128, 128)' | 'rgba(128, 128, 128, 0.5)'，设置标签颜色
+            }
+          },
+          backgroundColor: 'rgba(0,0,0,0.8)',
+        },
+        series: [
+          {
+            name: '中迅',
+            data: [199, 190, 122, 135, 124, 152, 181, 232, 249, 138, 92, 76],
+            type: 'line',
+            smooth: true,
+            showSymbol:false,
+            symbolSize: 6,
+            lineStyle: {
+              color: "#FDB65B",
+              width: 4,
+            },
+            itemStyle: {
+              color: "#FDB65B"
+            },
+            emphasis: {
+              scale:1.5
+            }
+          },
+          {
+            name: '北京规划院',
+            data: [181, 237, 168, 140, 244, 66, 175, 218, 67, 77, 74, 78],
+            type: 'line',
+            smooth: true,
+            showSymbol:false,
+            lineStyle: {
+              color: "#62CC97",
+              width: 1,
+            },
+            itemStyle: {
+              color: "#62CC97"
+            },
+            emphasis: {
+              scale:1.5
+            },
+          },
+          {
+            name: '郑分',
+            data: [160, 91, 145, 216, 103, 81, 65, 200, 249, 232, 151, 203],
+            type: 'line',
+            smooth: true,
+            showSymbol:false,
+            lineStyle: {
+              color: "#4D94FF",
+              width: 1,
+            },
+            itemStyle: {
+              color: "#4D94FF"
+            },
+            emphasis: {
+              scale:1.5
+            },
+          },
+          {
+            name: '广分',
+            data: [54, 77, 58, 58, 139, 154, 210, 151, 177, 53, 166, 131],
+            type: 'line',
+            smooth: true,
+            showSymbol:false,
+            lineStyle: {
+              color: "#4DF5FF",
+              width: 1,
+            },
+            itemStyle: {
+              color: "#4DF5FF"
+            },
+            emphasis: {
+              scale:1.5
+            },
+          },
+          {
+            name: '上分',
+            data: [118, 229, 163, 235, 51, 108, 125, 78, 122, 238, 145, 133],
+            type: 'line',
+            smooth: true,
+            showSymbol:false,
+            lineStyle: {
+              color: "#FF6E4D",
+              width: 1,
+            },
+            itemStyle: {
+              color: "#FF6E4D"
+            },
+            emphasis: {
+              scale:1.5
+            },
+          },
+          {
+            name: '成分',
+            data: [74, 239, 109, 93, 167, 104, 71, 155, 206, 176, 129, 103],
+            type: 'line',
+            smooth: true,
+            showSymbol:false,
+            lineStyle: {
+              color: "#8B4DFF",
+              width: 1,
+            },
+            itemStyle: {
+              color: "#8B4DFF"
+            },
+            emphasis: {
+              scale:1.5
+            },
+          }
+        ]
+      };
+      chart.setOption(defaultOption)
+    }
+  }
+}
+</script>
+
+<template>
+  <div id="personTrendChart" style="width: 100%" :style="{height: height+'px'}" ref="myChart" ></div>
+</template>
+
+<style lang="less" scoped>
+
+</style>

src/components/doubleCarbon/car/charts/carbonCarQuotaChart.vue

@@ -0,0 +1,91 @@
+<script>
+import Card from "@/components/common/card.vue";
+export default {
+  data() {
+    return {}
+  },
+  props: {
+    height: Number
+  },
+  components: {
+    Card
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      let chart = this.$echarts.init(this.$refs.myChart);
+      let options = {
+        color: ['#6DA6F5','#A29DF8'],
+        legend: {
+          data: [
+            '碳配额',
+            '已消耗',
+          ]
+        },
+        grid: {
+          left: '2%', //默认10%
+          right: '8%', //默认10%
+          bottom: '2%', //默认60
+          top: '10%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value',
+          nameTextStyle: {
+            padding: [10, 0, 10, -20]
+          },
+        },
+        yAxis: {
+          type: 'category',
+          data: ['上分', '广分', '郑分', '规划院', '中迅'],
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          },
+          textStyle: {
+            color: '#fff',
+            align: 'left',
+            fontSize: 14
+          },
+          axisLine: {//x坐标轴轴线
+            show: true,
+            lineStyle: {//x坐标轴轴线样式
+              color: '#000',//'#ccc' | 'rgb(128, 128, 128)' | 'rgba(128, 128, 128, 0.5)'，设置标签颜色
+            }
+          },
+          backgroundColor: 'rgba(0,0,0,0.8)',
+        },
+        series: [
+          {
+            name: '碳配额',
+            data: [80, 280, 120, 200, 30],
+            type: 'bar',
+            barWidth: '30%',
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            }
+          },
+        ]
+      };
+      chart.setOption(options);
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="myChart" ref="myChart" :style="{height: height+'px'}">
+
+  </div>
+
+</template>

src/components/doubleCarbon/car/doubleCarbonCar.vue

@@ -1,464 +1,127 @@
-<!--
-    车辆排放页面
-    @author 刘梦祥
-    @date 2023年2月8日
--->
-<template>
-  <div class="doubleCarbon-main-box flexColumn">
-    <a-spin class="spinStyle" size="large" tip="Loading..." v-show="searchLoading"></a-spin>
-    <!-- 头部搜索区域 -->
-    <div class="borderColor">
-      <div class="flex flex_between margin5rem">
-        <div class="flex">
-          <div class="mr1rem">
-            单位名称：
-            <a-select
-              style="width:200px;"
-              v-model="searchParam.nameOfUnit"
-              :allowClear="selectProps.allowClear"
-              :mode="selectProps.mode"
-              :options="options.nameOfUnit"
-              :notFoundConent="selectProps.notFoundConent"
-              :placeholder="selectProps.placeholder"
-            ></a-select>
-          </div>
-          <div>
-            时间范围： <a-month-picker id="startTime" format="YYYY-MM" @change="changeTimeRangeS" placeholder="开始时间" />~
-            <a-month-picker id="endTime" format="YYYY-MM" @change="changeTimeRangeE" placeholder="结束时间" />
-          </div>
-        </div>
-        <div>
-          <a-button class="mr1rem" @click="reset">重置</a-button>
-          <a-button type="primary" @click="search">查询</a-button>
-        </div>
-      </div>
-      <div class="cardTitle margin5rem">核心指标</div>
-      <div v-if="coreList.length > 0" class="flex flex_around coreListBox margin5rem">
-        <div v-for="(item, index) in coreList" :key="'coreList' + index">
-          <div class="core_title">{{ item.title }}</div>
-          <div class="core_value">
-            {{ item.value ? item.value : "--" }}<span class="core_unit">{{ item.unit ? item.unit : "" }}</span
-            ><span class="core_leavel" v-if="item.leavel" :style="{ color: $constant.COLOR_LEAVEL[item.leavel] }">!</span>
-          </div>
-          <div v-if="item.info" class="core_info">
-            <span class="core_info_title">{{ item.info.title }}</span
-            ><span class="core_info_value" :style="{ color: $constant.COLOR_LEAVEL[item.info.leavel] }"
-              >{{ item.info.value
-              }}<a-icon v-if="item.info.leavel && (item.info.leavel == 1 || item.info.leavel == 3)" :type="item.info.leavel == 3 ? 'caret-up' : 'caret-down'" /></span>
-          </div>
-        </div>
-      </div>
-      <div class="flex flex_around coreListBox margin5rem" v-if="coreList.length == 0" style="height:120px;">
-        <a-empty></a-empty>
-      </div>
-    </div>
-    <!-- 碳排放分析和碳配额构成 -->
-    <div class="flex" style="height:400px;">
-      <div class="echartBox_left borderColor">
-        <div class="cardTitle margin5rem">碳排放分析</div>
-        <div class="margin5rem chartDomBox">
-          <LineChart v-if="chartData.LineChartData" :echartData="chartData.LineChartData" />
-          <a-empty v-else></a-empty>
-        </div>
-      </div>
-      <div class="echartBox_right borderColor">
-        <div class="cardTitle margin5rem">碳配额构成</div>
-        <div class="margin5rem chartDomBox">
-          <BarChart v-if="chartData.BarChartData" :echartData="chartData.BarChartData" />
-          <a-empty v-else></a-empty>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
-import LineChart from "../../echart/LineChart.vue";
-import BarChart from "../../echart/BarChart.vue";
-import PieChart from "../../echart/PieChart.vue";
-// 模拟数据
-import  AnalogData from "../AnalogData.js"
+import Card from "@/components/common/card.vue";
+import CoreData from "@/components/common/coreData.vue";
+import Query from "@/components/common/query.vue";
+
+import CarbonCarEmissionChart from "@/components/doubleCarbon/car/charts/carbonCarEmissionChart.vue";
+import CarbonCarQuotaChart from "@/components/doubleCarbon/car/charts/carbonCarQuotaChart.vue";
+
 export default {
   components: {
-    LineChart,
-    BarChart,
-    PieChart
+    Card,
+    CoreData,
+    Query,
+    CarbonCarEmissionChart,
+    CarbonCarQuotaChart,
   },
   data() {
     return {
-      // selectProps配置
-      selectProps: {
-        allowClear: true, // 支持清除
-        mode: "default", // 模式['default'|'multiple'|'tags'|'combobox']
-        notFoundConent: "Not Found", // 当下拉列表为空时显示的内容
-        placeholder: "请选择", // 选择框默认文字 string|slot
-        showArrow: true, // 是否显示下拉小箭头
-        size: "large" // 选择框大小['large'|'small']
-      },
-      // 单位名称option可选值
-      options: {
-        nameOfUnit: [] // options 数据，如果设置则不需要手动构造 selectOption 节点
-      },
-      // loading状态
-      searchLoading: true,
-      // 头部搜索条件中绑定值
-      monthArr: [],
-      searchParam: {
-        nameOfUnit: undefined,
-        timeRange: [undefined, undefined]
-      },
-      // 头部核心指标循环显示数据
-      coreList: [],
-      // 双碳新闻模拟数据
-      DoubleCarbonNewsInfoList: [],
-      // 双碳新闻弹窗打开状态
-      showModalStatus: false,
-      // 弹窗暂存数据对象
-      showModalInfo: {
-        title: "--",
-        content: "--",
-        author: "--",
-        pushTime: "--"
-      },
-      // chart暂存数据对象
-      chartData: []
-    };
-  },
-  created() {},
-  mounted() {
-    // 页面初始化
-    this.init();
-    //默认是当年的1月到12月
-    this.defaulTimeRangeS();
-    this.defaulTimeRangeE();
-  },
-  methods: {
-    // 开始时间初始化
-    defaulTimeRangeS() {
-      this.searchParam.timeRange[0] = this.$moment()
-        .startOf("year")
-        .format("YYYY-MM-DD 00:00:00");
-      document.getElementById("startTime").querySelector("input").value = this.$moment()
-        .startOf("year")
-        .format("YYYY-MM");
-    },
-    // 结束时间初始化
-    defaulTimeRangeE() {
-      this.searchParam.timeRange[1] = this.$moment()
-        .endOf("year")
-        .format("YYYY-MM-DD 23:59:59");
-      document.getElementById("endTime").querySelector("input").value = this.$moment()
-        .endOf("year")
-        .format("YYYY-MM");
-    },
-    // 修改开始时间时
-    changeTimeRangeS(date, dateStr) {
-      // 修改时间前判断是否合理
-      if (this.searchParam.timeRange[1]) {
-        if (
-          this.$moment(this.$moment(dateStr, "YYYY-MM").format("YYYY-MM-DD 00:00:00")).diff(
-            this.$moment(this.searchParam.timeRange[1])
-          ) > 0
-        ) {
-          this.$message.error("开始时间不能大于结束时间！请重新选择！");
-          setTimeout(() => {
-            document.getElementById("startTime").querySelector("input").value = this.$moment()
-              .startOf("year")
-              .format("YYYY-MM");
-          }, 10);
-        }
-      }
-      if (dateStr) {
-        this.searchParam.timeRange[0] = this.$moment(dateStr, "YYYY-MM").format("YYYY-MM-DD 00:00:00");
-      } else {
-        this.searchParam.timeRange[0] = undefined;
-      }
-    },
-    // 修改结束时间时
-    changeTimeRangeE(date, dateStr) {
-      // 修改时间前判断是否合理
-      if (this.searchParam.timeRange[0]) {
-        if (
-          this.$moment(this.searchParam.timeRange[0]).diff(
-            this.$moment(
-              this.$moment(dateStr, "YYYY-MM")
-                .endOf("month")
-                .format("YYYY-MM-DD 23:59:59")
-            )
-          ) > 0
-        ) {
-          this.$message.error("结束时间不能小于开始时间！请重新选择！");
-          setTimeout(() => {
-            document.getElementById("endTime").querySelector("input").value = this.$moment()
-              .endOf("year")
-              .format("YYYY-MM");
-          }, 10);
-        }
-      }
-      if (dateStr) {
-        this.searchParam.timeRange[1] = this.$moment(dateStr, "YYYY-MM")
-          .endOf("month")
-          .format("YYYY-MM-DD 23:59:59");
-      } else {
-        this.searchParam.timeRange[1] = undefined;
-      }
-    },
-    // 查询事件
-    search() {
-      // 时间范围条件不合理判断
-      if (this.searchParam.timeRange[0] || this.searchParam.timeRange[1]) {
-        if (!this.searchParam.timeRange[0]) {
-          this.$message.info("请选择开始时间！");
-          return;
-        } else if (!this.searchParam.timeRange[1]) {
-          this.$message.info("请选择结束时间！");
-          return;
+      coreData: [
+        {
+          title: '车辆总里程(km/天)',
+          num: 60,
+          historyDesc: '同比',
+          historyNum: 0.4
+        },
+        {
+          title: '车辆平均里程(km/天)',
+          num: 500,
+          historyDesc: '同比',
+          historyNum: 0.4
+        },
+        {
+          title: '车辆平均行驶时长(h/天)',
+          num: 80,
+          historyDesc: '同比',
+          historyNum: -0.4
+        },
+        {
+          title: '车辆平均碳排放(kg/辆/天)',
+          num: 80,
+          historyDesc: '同比',
+          historyNum: -0.4
+        },
+        {
+          type: 1,
+          title: '值得关注',
+          showStar: true,
+          content: '减少两辆车出行一周'
+        },
+      ],
+      newsData: [
+        {
+          title: 'xxxxxxxxxx',
+          tag: '双碳小知识',
+          author: '张峰',
+          time: '2022-02-02 15:00:00'
         }
-      }
-      this.searchLoading = true;
-      console.log("查询条件：", this.searchParam.nameOfUnit, this.searchParam.timeRange[0], this.searchParam.timeRange[1]);
-      setTimeout(() => {
-        this.searchLoading = false;
-      }, 1000);
-    },
-    // 重置事件
-    reset() {
-      document.getElementById("startTime").querySelector("input").value = this.$moment()
-        .startOf("year")
-        .format("YYYY-MM");
-      document.getElementById("endTime").querySelector("input").value = this.$moment()
-        .endOf("year")
-        .format("YYYY-MM");
-      this.searchParam = {
-        nameOfUnit: undefined,
-        timeRange: [
-          this.$moment()
-            .startOf("year")
-            .format("YYYY-MM-DD 00:00:00"),
-          this.$moment()
-            .endOf("year")
-            .format("YYYY-MM-DD 23:59:59")
-        ]
-      };
-    },
-    // 弹窗显示事件
-    showModal(item) {
-      this.showModalStatus = true;
-      this.showModalInfo = item;
-    },
-    // 弹窗隐藏事件
-    onCancel() {
-      this.showModalStatus = false;
-    },
-    init() {
-      // 初始化加载[单位名称列表、核心指标、碳排放分析、碳配额构成、碳排放占比、双碳新闻]
-      setTimeout(() => {
-        this.options.nameOfUnit = AnalogData.optionsNameOfUnit;
-        this.coreList = AnalogData.core_List;
-        this.chartData = AnalogData.CHART_DATA;
-        this.DoubleCarbonNewsInfoList = AnalogData.doubleCarbonNewsInfoList;
-        this.searchLoading = false;
-      }, 1000);
+      ]
     }
-  }
-};
+  },
+}
 </script>
 
+<template>
+  <div class="doubleCarbon-car">
+
+    <div class="page-query-core">
+      <a-row>
+        <a-col>
+          <div style="width: 100%">
+            <Query></Query>
+          </div>
+        </a-col>
+        <a-col>
+          <div style="width: 100%">
+            <Card title="核心指标">
+              <CoreData :data-list="coreData"></CoreData>
+            </Card>
+          </div>
+        </a-col>
+      </a-row>
+    </div>
+
+    <div style="margin-top: 12px">
+      <a-row :gutter="[12,12]">
+        <a-col :span="18">
+          <Card title="碳排放分析">
+            <div class="doubleCarbon-car-analyse">
+              <CarbonCarEmissionChart :height="450" />
+            </div>
+          </Card>
+        </a-col>
+        <a-col :span="6">
+          <Card title="碳配额构成">
+            <div class="doubleCarbon-car-quota">
+              <CarbonCarQuotaChart :height="450" />
+            </div>
+          </Card>
+        </a-col>
+      </a-row>
+    </div>
+  </div>
+</template>
+
 <style lang="less" scoped>
-// 复用样式
-.flexColumn {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-}
-.flex {
-  display: flex;
-  flex-wrap: wrap;
-  align-content: center;
-  align-items: center;
-  &_center {
-    display: flex;
-    flex-wrap: wrap;
-    align-content: center;
-    align-items: center;
-    justify-content: center;
-  }
-  &_between {
-    display: flex;
-    flex-wrap: wrap;
-    align-content: center;
-    align-items: center;
-    justify-content: space-between;
-  }
-  &_around {
-    display: flex;
-    flex-wrap: wrap;
-    align-content: center;
-    align-items: center;
-    justify-content: space-around;
-  }
-}
-.borderColor {
-  border: 1px solid #e7eaf1;
-}
-.margin5rem {
-  margin: 0.5rem;
-}
-.padding5rem {
-  padding: 0.5rem;
-}
-// 页面主题样式
-.doubleCarbon-main-box {
-  position: relative;
+.doubleCarbon-car {
   width: 100%;
-  height: 100%;
-  & * {
-    user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-    -ms-user-select: none;
-    ::-webkit-scrollbar {
-      width: 0 !important;
-    }
-    -ms-overflow-style: none;
-    overflow: -moz-scrollbars-none;
-  }
-  & > div {
-    // padding: 5px 10px;
-    border-radius: 2px;
-    margin-bottom: 10px;
-  }
-  .spinStyle {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    background: rgba(255, 255, 255, 0.75);
-    z-index: 2;
-  }
-}
-// 头部搜索框和（重置、查询）按钮之间的间距样式
-.mr1rem {
-  margin-right: 1rem;
-}
-// 每个card标题的字体样式
-.cardTitle {
-  padding-left: 5px;
-  font-size: 14px;
-  font-weight: bold;
-  border-left: 5px solid @primary-color;
-}
-// 核心指标
-.coreListBox {
-  border-radius: 0.5rem;
-  background-color: rgb(233, 246, 253);
-  & > div {
-    position: relative;
-    // border-left: 1px solid #909399;
-    padding: 10px;
-    margin: 10px;
-    cursor: pointer;
-    border-radius: 0.5rem;
-    &:hover {
-      background-color: rgb(210, 239, 255);
-    }
-    // &::before {
-    //   content: "";
-    //   position: absolute;
-    //   left: -10px;
-    //   height: calc(100% - 20px);
-    //   width: 1px;
-    //   background: #c9c9c9;
-    // }
-  }
-}
-// 核心指标中value的样式
-.core {
-  &_title {
-    font-size: 12px;
-    padding-bottom: 10px;
-  }
-  &_leavel {
-    font-size: 16px;
-    font-weight: bold;
-  }
-  &_value {
-    font-size: 16px;
-    font-weight: 500;
-    color: #000;
-  }
-  &_unit {
-    padding-left: 0.5rem;
-    font-size: 12px;
-    font-weight: bold;
-    color: #909399;
-  }
-  &_info {
-    padding-top: 10px;
-    font-size: 12px;
-    &_title {
-      color: #afafaf;
-    }
-    &_value {
-      padding-left: 0.5rem;
-      font-weight: bold;
-    }
-  }
-}
-// echartBox样式
-.echartBox {
-  &_left {
-    width: calc(100% - 300px - 10px);
-    height: 100%;
-  }
-  &_right {
-    margin-left: 10px;
-    width: 300px;
-    height: 100%;
-  }
-}
-.chartDomBox {
-  position: relative;
-  width: calc(100% - 20px);
-  height: calc(100% - 41px);
-  display: flex;
-  justify-content: center;
-}
-.DoubleCarbonNews {
-  padding: 10px 0;
-  font-weight: bold;
-  color: #000;
-  cursor: pointer;
-  border-bottom: 1px solid #c9c9c9;
-  &:hover {
-    color: @primary-color;
-  }
-  & > div {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  & > div:nth-child(1) {
-    width: 15%;
-  }
-  & > div:nth-child(2) {
-    height: 21px;
-    overflow: hidden;
-    width: calc(50% - 110px);
+  height: auto;
+  padding-bottom: 15px;
+  vertical-align: top;
+
+  .doubleCarbon-car-analyse {
+    padding: 12px;
   }
-  & > div:nth-child(3) {
-    width: 20%;
+  .doubleCarbon-car-quota {
+    padding: 12px;
   }
-  & > div:nth-child(4) {
-    width: 15%;
+  .doubleCarbon-car-news {
+    padding: 0 12px;
+    height: 300px;
   }
-  & > div:nth-child(5) {
-    width: 30px;
+  .doubleCarbon-car-percent {
+    padding: 0 12px;
+    height: 300px;
   }
 }
-// loading样式
-.spin-content {
-  border: 1px solid #91d5ff;
-  background-color: #e6f7ff;
-  padding: 30px;
-}
 </style>

src/components/doubleCarbon/overview/charts/carbonEmissionChart.vue

@@ -0,0 +1,199 @@
+<script>
+export default {
+  data() {
+    return {
+      show: false,
+    }
+  },
+  props: {
+    height: Number,
+  },
+  mounted() {
+    this.$nextTick(()=>{
+      this.initChart();
+    })
+  },
+  methods: {
+    initChart() {
+      let chart = this.$echarts.init(this.$refs.myChart)
+      let defaultOption = {
+        legend: {
+          data: [
+            '中迅',
+            '北京规划院',
+            '郑分',
+            '广分',
+            '上分',
+            '成分',
+          ]
+        },
+        grid: {
+          left: '0%', //默认10%
+          right: '1%', //默认10%
+          bottom: '15%', //默认60
+          top: '15%',
+          containLabel: true
+          //grid区域是否包含坐标轴的刻度标签
+        },
+        xAxis: {
+          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+        },
+        yAxis: [
+          {
+            name: '排放量',
+            type: 'value',
+            nameTextStyle: {
+              padding: [10, 0, 10, -12]
+            },
+          },
+        ],
+        dataZoom: [
+          {
+            type: 'slider',
+            start: 0,
+            end: 100,
+            height: 12,
+          },
+          {
+            type: 'inside',
+            start: 0,
+            end: 100,
+          }
+        ],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          },
+          textStyle: {
+            color: '#fff',
+            align: 'left',
+            fontSize: 14
+          },
+          axisLine: {//x坐标轴轴线
+            show: true,
+            lineStyle: {//x坐标轴轴线样式
+              color: '#000',//'#ccc' | 'rgb(128, 128, 128)' | 'rgba(128, 128, 128, 0.5)'，设置标签颜色
+            }
+          },
+          backgroundColor: 'rgba(0,0,0,0.8)',
+        },
+        series: [
+          {
+            name: '中迅',
+            data: [199, 190, 122, 135, 124, 152, 181, 232, 249, 138, 92, 76],
+            type: 'line',
+            smooth: true,
+            showSymbol:false,
+            symbolSize: 6,
+            lineStyle: {
+              color: "#FDB65B",
+              width: 4,
+            },
+            itemStyle: {
+              color: "#FDB65B"
+            },
+            emphasis: {
+              scale:1.5
+            }
+          },
+          {
+            name: '北京规划院',
+            data: [181, 237, 168, 140, 244, 66, 175, 218, 67, 77, 74, 78],
+            type: 'line',
+            smooth: true,
+            showSymbol:false,
+            lineStyle: {
+              color: "#62CC97",
+              width: 1,
+            },
+            itemStyle: {
+              color: "#62CC97"
+            },
+            emphasis: {
+              scale:1.5
+            },
+          },
+          {
+            name: '郑分',
+            data: [160, 91, 145, 216, 103, 81, 65, 200, 249, 232, 151, 203],
+            type: 'line',
+            smooth: true,
+            showSymbol:false,
+            lineStyle: {
+              color: "#4D94FF",
+              width: 1,
+            },
+            itemStyle: {
+              color: "#4D94FF"
+            },
+            emphasis: {
+              scale:1.5
+            },
+          },
+          {
+            name: '广分',
+            data: [54, 77, 58, 58, 139, 154, 210, 151, 177, 53, 166, 131],
+            type: 'line',
+            smooth: true,
+            showSymbol:false,
+            lineStyle: {
+              color: "#4DF5FF",
+              width: 1,
+            },
+            itemStyle: {
+              color: "#4DF5FF"
+            },
+            emphasis: {
+              scale:1.5
+            },
+          },
+          {
+            name: '上分',
+            data: [118, 229, 163, 235, 51, 108, 125, 78, 122, 238, 145, 133],
+            type: 'line',
+            smooth: true,
+            showSymbol:false,
+            lineStyle: {
+              color: "#FF6E4D",
+              width: 1,
+            },
+            itemStyle: {
+              color: "#FF6E4D"
+            },
+            emphasis: {
+              scale:1.5
+            },
+          },
+          {
+            name: '成分',
+            data: [74, 239, 109, 93, 167, 104, 71, 155, 206, 176, 129, 103],
+            type: 'line',
+            smooth: true,
+            showSymbol:false,
+            lineStyle: {
+              color: "#8B4DFF",
+              width: 1,
+            },
+            itemStyle: {
+              color: "#8B4DFF"
+            },
+            emphasis: {
+              scale:1.5
+            },
+          }
+        ]
+      };
+      chart.setOption(defaultOption)
+    }
+  }
+}
+</script>
+
+<template>
+  <div id="personTrendChart" style="width: 100%" :style="{height: height+'px'}" ref="myChart" ></div>
+</template>
+
+<style lang="less" scoped>
+
+</style>

src/components/doubleCarbon/overview/charts/carbonOverviewPercent.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="myChart" ref="myChart" :style="{height: height+'px'}"></div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  props: {
+    height: Number
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      let chart = this.$echarts.init(this.$refs.myChart)
+      let option = {
+        color: ['#80D4FF', '#A6A6FF','#FFDF80'],
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          bottom: '8%',
+          left: 'center',
+          icon: 'circle'
+        },
+        series: [
+          {
+            name: '排放量',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            center: ['50%','40%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: true,
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: '14px',
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: true
+            },
+            data: [
+              { value: 1048, name: '汽油' },
+              { value: 735, name: '柴油' },
+              { value: 580, name: '天然气' },
+              { value: 380, name: '热力' },
+              { value: 666, name: '电力' },
+              { value: 945, name: '其他' },
+            ]
+          }
+        ]
+      };
+      chart.setOption(option);
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/components/doubleCarbon/overview/charts/carbonQuotaChart.vue

@@ -0,0 +1,91 @@
+<script>
+import Card from "@/components/common/card.vue";
+export default {
+  data() {
+    return {}
+  },
+  props: {
+    height: Number
+  },
+  components: {
+    Card
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      let chart = this.$echarts.init(this.$refs.myChart);
+      let options = {
+        color: ['#6DA6F5','#A29DF8'],
+        legend: {
+          data: [
+            '碳配额',
+            '已消耗',
+          ]
+        },
+        grid: {
+          left: '2%', //默认10%
+          right: '8%', //默认10%
+          bottom: '2%', //默认60
+          top: '10%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value',
+          nameTextStyle: {
+            padding: [10, 0, 10, -20]
+          },
+        },
+        yAxis: {
+          type: 'category',
+          data: ['上分', '广分', '郑分', '规划院', '中迅'],
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          },
+          textStyle: {
+            color: '#fff',
+            align: 'left',
+            fontSize: 14
+          },
+          axisLine: {//x坐标轴轴线
+            show: true,
+            lineStyle: {//x坐标轴轴线样式
+              color: '#000',//'#ccc' | 'rgb(128, 128, 128)' | 'rgba(128, 128, 128, 0.5)'，设置标签颜色
+            }
+          },
+          backgroundColor: 'rgba(0,0,0,0.8)',
+        },
+        series: [
+          {
+            name: '碳配额',
+            data: [80, 280, 120, 200, 30],
+            type: 'bar',
+            barWidth: '30%',
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            }
+          },
+        ]
+      };
+      chart.setOption(options);
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="myChart" ref="myChart" :style="{height: height+'px'}">
+
+  </div>
+
+</template>

src/components/doubleCarbon/overview/charts/doubleCarbonNews.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="doubleCarbonNews">
+    <a-table :rowKey=" (record, index) => index"
+        :columns="columns"
+        :show-header="false"
+        :data-source="tableData"
+        :pagination="false"
+    >
+      <a slot="name" slot-scope="text">{{ text }}</a>
+    </a-table>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      columns: [
+        {
+          dataIndex: 'tag',
+          key: 'tag'
+        },{
+          dataIndex: 'title',
+          key: 'title'
+        },{
+          dataIndex: 'author',
+          key: 'author'
+        },{
+          dataIndex: 'time',
+          key: 'time'
+        },{
+          dataIndex: 'operation',
+          key: 'operation'
+        }
+      ],
+      tableData: [],
+
+    }
+  },
+  props: {
+    data: Array
+  },
+  mounted() {
+    this.tableData = this.data
+    console.log(this.tableData)
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.doubleCarbonNews {
+  width: 100%;
+}
+</style>

src/components/doubleCarbon/overview/doubleCarbonOverview.vue

@@ -1,512 +1,154 @@
-<!--
-    双碳概览页面
-    @author 刘梦祥
-    @date 2023年2月8日
--->
-<template>
-  <div class="doubleCarbon-main-box flexColumn">
-    <a-spin class="spinStyle" size="large" tip="Loading..." v-show="searchLoading"></a-spin>
-    <!-- 头部搜索区域 -->
-    <div class="borderColor">
-      <div class="flex flex_between margin5rem">
-        <div class="flex">
-          <div class="mr1rem">
-            单位名称：
-            <a-select
-              style="width:200px;"
-              v-model="searchParam.nameOfUnit"
-              :allowClear="selectProps.allowClear"
-              :mode="selectProps.mode"
-              :options="options.nameOfUnit"
-              :notFoundConent="selectProps.notFoundConent"
-              :placeholder="selectProps.placeholder"
-            ></a-select>
-          </div>
-          <div>
-            时间范围： <a-month-picker id="startTime" format="YYYY-MM" @change="changeTimeRangeS" placeholder="开始时间" />~
-            <a-month-picker id="endTime" format="YYYY-MM" @change="changeTimeRangeE" placeholder="结束时间" />
-          </div>
-        </div>
-        <div>
-          <a-button class="mr1rem" @click="reset">重置</a-button>
-          <a-button type="primary" @click="search">查询</a-button>
-        </div>
-      </div>
-      <div class="cardTitle margin5rem">核心指标</div>
-      <div v-if="coreList.length > 0" class="flex flex_around coreListBox margin5rem">
-        <div v-for="(item, index) in coreList" :key="'coreList' + index">
-          <div class="core_title">{{ item.title }}</div>
-          <div class="core_value">
-            {{ item.value ? item.value : "--" }}<span class="core_unit">{{ item.unit ? item.unit : "" }}</span
-            ><span class="core_leavel" v-if="item.leavel" :style="{ color: $constant.COLOR_LEAVEL[item.leavel] }">!</span>
-          </div>
-          <div v-if="item.info" class="core_info">
-            <span class="core_info_title">{{ item.info.title }}</span
-            ><span class="core_info_value" :style="{ color: $constant.COLOR_LEAVEL[item.info.leavel] }"
-              >{{ item.info.value
-              }}<a-icon v-if="item.info.leavel && (item.info.leavel == 1 || item.info.leavel == 3)" :type="item.info.leavel == 3 ? 'caret-up' : 'caret-down'" /></span>
-          </div>
-        </div>
-      </div>
-      <div class="flex flex_around coreListBox margin5rem" v-if="coreList.length == 0" style="height:120px;">
-        <a-empty></a-empty>
-      </div>
-    </div>
-    <!-- 碳排放分析和碳配额构成 -->
-    <div class="flex" style="height:400px;">
-      <div class="echartBox_left borderColor">
-        <div class="cardTitle margin5rem">碳排放分析</div>
-        <div class="margin5rem chartDomBox">
-          <LineChart v-if="chartData.LineChartData" :echartData="chartData.LineChartData" />
-          <a-empty v-else></a-empty>
-        </div>
-      </div>
-      <div class="echartBox_right borderColor">
-        <div class="cardTitle margin5rem">碳配额构成</div>
-        <div class="margin5rem chartDomBox">
-          <BarChart v-if="chartData.BarChartData" :echartData="chartData.BarChartData" />
-          <a-empty v-else></a-empty>
-        </div>
-      </div>
-    </div>
-    <!-- 双碳新闻和碳排放占比 -->
-    <div class="flex" style="height:300px;">
-      <div class="echartBox_left borderColor">
-        <a-modal title="双碳新闻" :visible.sync="showModalStatus" width="60%" :footer="null" @cancel="onCancel" centered>
-          <p style="font-size: 20px;font-weight:blod;color:#000;">{{ showModalInfo.title }}</p>
-          <div style="margin-bottom:10px;border-bottom: 1px solid #CCCCCC;">{{ showModalInfo.pushTime }}</div>
-          <div
-            style="max-height: calc(100vh - 300px);overflow:auto;background: rgba(10,100,100,0.05);font-size:16px;"
-            v-if="showModalInfo.content.indexOf(`<p>`) != -1"
-            v-html="showModalInfo.content"
-          ></div>
-          <p v-else style="font-size: 16px;font-weight:400;color:#000;background: rgba(10,100,100,0.05);">
-            {{ showModalInfo.content }}
-          </p>
-          <div style="margin-top:10px;border-top: 1px solid #CCCCCC;">{{ showModalInfo.author }}</div>
-        </a-modal>
-        <div class="cardTitle margin5rem">双碳新闻</div>
-        <div class="margin5rem" v-if="DoubleCarbonNewsInfoList.length > 0" style="overflow-y:auto;height: calc(100% - 53px);">
-          <div
-            class="flex flex_between DoubleCarbonNews"
-            v-for="(item, index) in DoubleCarbonNewsInfoList"
-            :key="index"
-            @click="showModal(item)"
-          >
-            <div>{{ item.title }}</div>
-            <div v-if="item.content.indexOf(`<p>`) != -1" v-html="item.content"></div>
-            <div v-else>{{ item.content }}</div>
-            <div>{{ item.author }}</div>
-            <div>{{ item.pushTime }}</div>
-            <div>>></div>
-          </div>
-        </div>
-        <div
-          class="margin5rem flex_center"
-          v-if="DoubleCarbonNewsInfoList.length == 0"
-          style="overflow-y:auto;height: calc(100% - 53px);"
-        >
-          <a-empty></a-empty>
-        </div>
-      </div>
-      <div class="echartBox_right borderColor">
-        <div class="cardTitle margin5rem">碳排放占比</div>
-        <div class="margin5rem chartDomBox">
-          <PieChart v-if="chartData.PieChartData" :echartData="chartData.PieChartData" />
-          <a-empty v-else></a-empty>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
-import LineChart from "../../echart/LineChart.vue";
-import BarChart from "../../echart/BarChart.vue";
-import PieChart from "../../echart/PieChart.vue";
-// 模拟数据
-import  AnalogData from "../AnalogData.js"
+import Card from "@/components/common/card.vue";
+import CoreData from "@/components/common/coreData.vue";
+import Query from "@/components/common/query.vue";
+
+import CarbonEmissionCharts from "@/components/doubleCarbon/overview/charts/carbonEmissionChart.vue";
+import CarbonQuotaChart from "@/components/doubleCarbon/overview/charts/carbonQuotaChart.vue";
+import DoubleCarbonNews from "@/components/doubleCarbon/overview/charts/doubleCarbonNews.vue";
+import CarbonOverviewPercent from "@/components/doubleCarbon/overview/charts/carbonOverviewPercent.vue";
+
 export default {
   components: {
-    LineChart,
-    BarChart,
-    PieChart
+    Card,
+    CoreData,
+    Query,
+    CarbonEmissionCharts,
+    CarbonQuotaChart,
+    DoubleCarbonNews,
+    CarbonOverviewPercent,
   },
   data() {
     return {
-      // selectProps配置
-      selectProps: {
-        allowClear: true, // 支持清除
-        mode: "default", // 模式['default'|'multiple'|'tags'|'combobox']
-        notFoundConent: "Not Found", // 当下拉列表为空时显示的内容
-        placeholder: "请选择", // 选择框默认文字 string|slot
-        showArrow: true, // 是否显示下拉小箭头
-        size: "large" // 选择框大小['large'|'small']
-      },
-      // 单位名称option可选值
-      options: {
-        nameOfUnit: [] // options 数据，如果设置则不需要手动构造 selectOption 节点
-      },
-      // loading状态
-      searchLoading: true,
-      // 头部搜索条件中绑定值
-      monthArr: [],
-      searchParam: {
-        nameOfUnit: undefined,
-        timeRange: [undefined, undefined]
-      },
-      // 头部核心指标循环显示数据
-      coreList: [],
-      // 双碳新闻模拟数据
-      DoubleCarbonNewsInfoList: [],
-      // 双碳新闻弹窗打开状态
-      showModalStatus: false,
-      // 弹窗暂存数据对象
-      showModalInfo: {
-        title: "--",
-        content: "--",
-        author: "--",
-        pushTime: "--"
-      },
-      // chart暂存数据对象
-      chartData: []
-    };
-  },
-  created() {},
-  mounted() {
-    // 页面初始化
-    this.init();
-    //默认是当年的1月到12月
-    this.defaulTimeRangeS();
-    this.defaulTimeRangeE();
-  },
-  methods: {
-    // 开始时间初始化
-    defaulTimeRangeS() {
-      this.searchParam.timeRange[0] = this.$moment()
-        .startOf("year")
-        .format("YYYY-MM-DD 00:00:00");
-      document.getElementById("startTime").querySelector("input").value = this.$moment()
-        .startOf("year")
-        .format("YYYY-MM");
-    },
-    // 结束时间初始化
-    defaulTimeRangeE() {
-      this.searchParam.timeRange[1] = this.$moment()
-        .endOf("year")
-        .format("YYYY-MM-DD 23:59:59");
-      document.getElementById("endTime").querySelector("input").value = this.$moment()
-        .endOf("year")
-        .format("YYYY-MM");
-    },
-    // 修改开始时间时
-    changeTimeRangeS(date, dateStr) {
-      // 修改时间前判断是否合理
-      if (this.searchParam.timeRange[1]) {
-        if (
-          this.$moment(this.$moment(dateStr, "YYYY-MM").format("YYYY-MM-DD 00:00:00")).diff(
-            this.$moment(this.searchParam.timeRange[1])
-          ) > 0
-        ) {
-          this.$message.error("开始时间不能大于结束时间！请重新选择！");
-          setTimeout(() => {
-            document.getElementById("startTime").querySelector("input").value = this.$moment()
-              .startOf("year")
-              .format("YYYY-MM");
-          }, 10);
-        }
-      }
-      if (dateStr) {
-        this.searchParam.timeRange[0] = this.$moment(dateStr, "YYYY-MM").format("YYYY-MM-DD 00:00:00");
-      } else {
-        this.searchParam.timeRange[0] = undefined;
-      }
-    },
-    // 修改结束时间时
-    changeTimeRangeE(date, dateStr) {
-      // 修改时间前判断是否合理
-      if (this.searchParam.timeRange[0]) {
-        if (
-          this.$moment(this.searchParam.timeRange[0]).diff(
-            this.$moment(
-              this.$moment(dateStr, "YYYY-MM")
-                .endOf("month")
-                .format("YYYY-MM-DD 23:59:59")
-            )
-          ) > 0
-        ) {
-          this.$message.error("结束时间不能小于开始时间！请重新选择！");
-          setTimeout(() => {
-            document.getElementById("endTime").querySelector("input").value = this.$moment()
-              .endOf("year")
-              .format("YYYY-MM");
-          }, 10);
+      coreData: [
+        {
+          type: 1,
+          title: '碳配额存量',
+          content: "90",
+          numDesc: "%",
+        },
+        {
+          title: '碳排放总量(tco2e)',
+          num: 500,
+          historyDesc: '同比',
+          historyNum: 0.4
+        },
+        {
+          title: '单位面积碳排放(tco2e/m²)',
+          num: 80,
+          historyDesc: '同比',
+          historyNum: -0.4
+        },
+        {
+          title: '人均碳排放(tco2e/人)',
+          num: 80,
+          historyDesc: '同比',
+          historyNum: -0.4
+        },
+        {
+          title: '光伏减排(tco2e)',
+          num: 40,
+          historyDesc: '同比',
+          historyNum: -0.4
+        },
+        {
+          type: 1,
+          title: '值得关注',
+          showStar: true,
+          content: '减少两辆车出行一周'
+        },
+      ],
+      newsData: [
+        {
+          title: 'xxxxxxxxxx',
+          tag: '双碳小知识',
+          author: '张峰',
+          time: '2022-02-02 15:00:00'
         }
-      }
-      if (dateStr) {
-        this.searchParam.timeRange[1] = this.$moment(dateStr, "YYYY-MM")
-          .endOf("month")
-          .format("YYYY-MM-DD 23:59:59");
-      } else {
-        this.searchParam.timeRange[1] = undefined;
-      }
-    },
-    // 查询事件
-    search() {
-      // 时间范围条件不合理判断
-      if (this.searchParam.timeRange[0] || this.searchParam.timeRange[1]) {
-        if (!this.searchParam.timeRange[0]) {
-          this.$message.info("请选择开始时间！");
-          return;
-        } else if (!this.searchParam.timeRange[1]) {
-          this.$message.info("请选择结束时间！");
-          return;
-        }
-      }
-      this.searchLoading = true;
-      console.log("查询条件：", this.searchParam.nameOfUnit, this.searchParam.timeRange[0], this.searchParam.timeRange[1]);
-      setTimeout(() => {
-        this.searchLoading = false;
-      }, 1000);
-    },
-    // 重置事件
-    reset() {
-      document.getElementById("startTime").querySelector("input").value = this.$moment()
-        .startOf("year")
-        .format("YYYY-MM");
-      document.getElementById("endTime").querySelector("input").value = this.$moment()
-        .endOf("year")
-        .format("YYYY-MM");
-      this.searchParam = {
-        nameOfUnit: undefined,
-        timeRange: [
-          this.$moment()
-            .startOf("year")
-            .format("YYYY-MM-DD 00:00:00"),
-          this.$moment()
-            .endOf("year")
-            .format("YYYY-MM-DD 23:59:59")
-        ]
-      };
-    },
-    // 弹窗显示事件
-    showModal(item) {
-      this.showModalStatus = true;
-      this.showModalInfo = item;
-    },
-    // 弹窗隐藏事件
-    onCancel() {
-      this.showModalStatus = false;
-    },
-    init() {
-      // 初始化加载[单位名称列表、核心指标、碳排放分析、碳配额构成、碳排放占比、双碳新闻]
-      setTimeout(() => {
-        this.options.nameOfUnit = AnalogData.optionsNameOfUnit;
-        this.coreList = AnalogData.core_List;
-        this.chartData = AnalogData.CHART_DATA;
-        this.DoubleCarbonNewsInfoList = AnalogData.doubleCarbonNewsInfoList;
-        this.searchLoading = false;
-      }, 1000);
+      ]
     }
-  }
-};
+  },
+}
 </script>
 
+<template>
+  <div class="doubleCarbon-overview">
+
+    <div class="page-query-core">
+      <a-row>
+        <a-col>
+          <div style="width: 100%">
+            <Query></Query>
+          </div>
+        </a-col>
+        <a-col>
+          <div style="width: 100%">
+            <Card title="核心指标">
+              <CoreData :data-list="coreData"></CoreData>
+            </Card>
+          </div>
+        </a-col>
+      </a-row>
+    </div>
+
+    <div style="margin-top: 12px">
+      <a-row :gutter="[12,12]">
+        <a-col :span="18">
+          <Card title="碳排放分析">
+            <div class="doubleCarbon-overview-analyse">
+              <CarbonEmissionCharts :height="450" />
+            </div>
+          </Card>
+        </a-col>
+        <a-col :span="6">
+          <Card title="碳配额构成">
+            <div class="doubleCarbon-overview-quota">
+              <CarbonQuotaChart :height="450" />
+            </div>
+          </Card>
+        </a-col>
+        <a-col :span="18">
+          <Card title="双碳新闻">
+            <div style="width: 97%;margin: 0 auto">
+              <a-divider style="margin: 0;padding: 0"></a-divider>
+            </div>
+            <div class="doubleCarbon-overview-news">
+              <DoubleCarbonNews :data="newsData" />
+            </div>
+          </Card>
+        </a-col>
+        <a-col :span="6">
+          <Card title="碳排放占比">
+            <div class="doubleCarbon-overview-percent">
+              <CarbonOverviewPercent :height="300" />
+            </div>
+          </Card>
+        </a-col>
+      </a-row>
+    </div>
+  </div>
+</template>
+
 <style lang="less" scoped>
-// 复用样式
-.flexColumn {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-}
-.flex {
-  display: flex;
-  flex-wrap: wrap;
-  align-content: center;
-  align-items: center;
-  &_center {
-    display: flex;
-    flex-wrap: wrap;
-    align-content: center;
-    align-items: center;
-    justify-content: center;
-  }
-  &_between {
-    display: flex;
-    flex-wrap: wrap;
-    align-content: center;
-    align-items: center;
-    justify-content: space-between;
-  }
-  &_around {
-    display: flex;
-    flex-wrap: wrap;
-    align-content: center;
-    align-items: center;
-    justify-content: space-around;
-  }
-}
-.borderColor {
-  border: 1px solid #e7eaf1;
-}
-.margin5rem {
-  margin: 0.5rem;
-}
-.padding5rem {
-  padding: 0.5rem;
-}
-// 页面主题样式
-.doubleCarbon-main-box {
-  position: relative;
+.doubleCarbon-overview {
   width: 100%;
-  height: 100%;
-  & * {
-    user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-    -ms-user-select: none;
-    ::-webkit-scrollbar {
-      width: 0 !important;
-    }
-    -ms-overflow-style: none;
-    overflow: -moz-scrollbars-none;
-  }
-  & > div {
-    // padding: 5px 10px;
-    border-radius: 2px;
-    margin-bottom: 10px;
-  }
-  .spinStyle {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    background: rgba(255, 255, 255, 0.75);
-    z-index: 2;
-  }
-}
-// 头部搜索框和（重置、查询）按钮之间的间距样式
-.mr1rem {
-  margin-right: 1rem;
-}
-// 每个card标题的字体样式
-.cardTitle {
-  padding-left: 5px;
-  font-size: 14px;
-  font-weight: bold;
-  border-left: 5px solid @primary-color;
-}
-// 核心指标
-.coreListBox {
-  border-radius: 0.5rem;
-  background-color: rgb(233, 246, 253);
-  & > div {
-    position: relative;
-    // border-left: 1px solid #909399;
-    padding: 10px;
-    margin: 10px;
-    cursor: pointer;
-    border-radius: 0.5rem;
-    &:hover {
-      background-color: rgb(210, 239, 255);
-    }
-    // &::before {
-    //   content: "";
-    //   position: absolute;
-    //   left: -10px;
-    //   height: calc(100% - 20px);
-    //   width: 1px;
-    //   background: #c9c9c9;
-    // }
-  }
-}
-// 核心指标中value的样式
-.core {
-  &_title {
-    font-size: 12px;
-    padding-bottom: 10px;
-  }
-  &_leavel {
-    font-size: 16px;
-    font-weight: bold;
-  }
-  &_value {
-    font-size: 16px;
-    font-weight: 500;
-    color: #000;
-  }
-  &_unit {
-    padding-left: 0.5rem;
-    font-size: 12px;
-    font-weight: bold;
-    color: #909399;
-  }
-  &_info {
-    padding-top: 10px;
-    font-size: 12px;
-    &_title {
-      color: #afafaf;
-    }
-    &_value {
-      padding-left: 0.5rem;
-      font-weight: bold;
-    }
-  }
-}
-// echartBox样式
-.echartBox {
-  &_left {
-    width: calc(100% - 300px - 10px);
-    height: 100%;
-  }
-  &_right {
-    margin-left: 10px;
-    width: 300px;
-    height: 100%;
-  }
-}
-.chartDomBox {
-  position: relative;
-  width: calc(100% - 20px);
-  height: calc(100% - 41px);
-  display: flex;
-  justify-content: center;
-}
-.DoubleCarbonNews {
-  padding: 10px 0;
-  font-weight: bold;
-  color: #000;
-  cursor: pointer;
-  border-bottom: 1px solid #c9c9c9;
-  &:hover {
-    color: @primary-color;
-  }
-  & > div {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  & > div:nth-child(1) {
-    width: 15%;
-  }
-  & > div:nth-child(2) {
-    height: 21px;
-    overflow: hidden;
-    width: calc(50% - 110px);
+  height: auto;
+  padding-bottom: 15px;
+  vertical-align: top;
+
+  .doubleCarbon-overview-analyse {
+    padding: 12px;
   }
-  & > div:nth-child(3) {
-    width: 20%;
+  .doubleCarbon-overview-quota {
+    padding: 12px;
   }
-  & > div:nth-child(4) {
-    width: 15%;
+  .doubleCarbon-overview-news {
+    padding: 0 12px;
+    height: 300px;
   }
-  & > div:nth-child(5) {
-    width: 30px;
+  .doubleCarbon-overview-percent {
+    padding: 0 12px;
+    height: 300px;
   }
 }
-// loading样式
-.spin-content {
-  border: 1px solid #91d5ff;
-  background-color: #e6f7ff;
-  padding: 30px;
-}
-</style>
+</style>

src/components/doubleCarbon/print/charts/carbonPrintEmissionChart.vue

@@ -0,0 +1,199 @@
+<script>
+export default {
+  data() {
+    return {
+      show: false,
+    }
+  },
+  props: {
+    height: Number,
+  },
+  mounted() {
+    this.$nextTick(()=>{
+      this.initChart();
+    })
+  },
+  methods: {
+    initChart() {
+      let chart = this.$echarts.init(this.$refs.myChart)
+      let defaultOption = {
+        legend: {
+          data: [
+            '中迅',
+            '北京规划院',
+            '郑分',
+            '广分',
+            '上分',
+            '成分',
+          ]
+        },
+        grid: {
+          left: '0%', //默认10%
+          right: '1%', //默认10%
+          bottom: '15%', //默认60
+          top: '15%',
+          containLabel: true
+          //grid区域是否包含坐标轴的刻度标签
+        },
+        xAxis: {
+          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+        },
+        yAxis: [
+          {
+            name: '排放量',
+            type: 'value',
+            nameTextStyle: {
+              padding: [10, 0, 10, -12]
+            },
+          },
+        ],
+        dataZoom: [
+          {
+            type: 'slider',
+            start: 0,
+            end: 100,
+            height: 12,
+          },
+          {
+            type: 'inside',
+            start: 0,
+            end: 100,
+          }
+        ],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          },
+          textStyle: {
+            color: '#fff',
+            align: 'left',
+            fontSize: 14
+          },
+          axisLine: {//x坐标轴轴线
+            show: true,
+            lineStyle: {//x坐标轴轴线样式
+              color: '#000',//'#ccc' | 'rgb(128, 128, 128)' | 'rgba(128, 128, 128, 0.5)'，设置标签颜色
+            }
+          },
+          backgroundColor: 'rgba(0,0,0,0.8)',
+        },
+        series: [
+          {
+            name: '中迅',
+            data: [199, 190, 122, 135, 124, 152, 181, 232, 249, 138, 92, 76],
+            type: 'line',
+            smooth: true,
+            showSymbol:false,
+            symbolSize: 6,
+            lineStyle: {
+              color: "#FDB65B",
+              width: 4,
+            },
+            itemStyle: {
+              color: "#FDB65B"
+            },
+            emphasis: {
+              scale:1.5
+            }
+          },
+          {
+            name: '北京规划院',
+            data: [181, 237, 168, 140, 244, 66, 175, 218, 67, 77, 74, 78],
+            type: 'line',
+            smooth: true,
+            showSymbol:false,
+            lineStyle: {
+              color: "#62CC97",
+              width: 1,
+            },
+            itemStyle: {
+              color: "#62CC97"
+            },
+            emphasis: {
+              scale:1.5
+            },
+          },
+          {
+            name: '郑分',
+            data: [160, 91, 145, 216, 103, 81, 65, 200, 249, 232, 151, 203],
+            type: 'line',
+            smooth: true,
+            showSymbol:false,
+            lineStyle: {
+              color: "#4D94FF",
+              width: 1,
+            },
+            itemStyle: {
+              color: "#4D94FF"
+            },
+            emphasis: {
+              scale:1.5
+            },
+          },
+          {
+            name: '广分',
+            data: [54, 77, 58, 58, 139, 154, 210, 151, 177, 53, 166, 131],
+            type: 'line',
+            smooth: true,
+            showSymbol:false,
+            lineStyle: {
+              color: "#4DF5FF",
+              width: 1,
+            },
+            itemStyle: {
+              color: "#4DF5FF"
+            },
+            emphasis: {
+              scale:1.5
+            },
+          },
+          {
+            name: '上分',
+            data: [118, 229, 163, 235, 51, 108, 125, 78, 122, 238, 145, 133],
+            type: 'line',
+            smooth: true,
+            showSymbol:false,
+            lineStyle: {
+              color: "#FF6E4D",
+              width: 1,
+            },
+            itemStyle: {
+              color: "#FF6E4D"
+            },
+            emphasis: {
+              scale:1.5
+            },
+          },
+          {
+            name: '成分',
+            data: [74, 239, 109, 93, 167, 104, 71, 155, 206, 176, 129, 103],
+            type: 'line',
+            smooth: true,
+            showSymbol:false,
+            lineStyle: {
+              color: "#8B4DFF",
+              width: 1,
+            },
+            itemStyle: {
+              color: "#8B4DFF"
+            },
+            emphasis: {
+              scale:1.5
+            },
+          }
+        ]
+      };
+      chart.setOption(defaultOption)
+    }
+  }
+}
+</script>
+
+<template>
+  <div id="personTrendChart" style="width: 100%" :style="{height: height+'px'}" ref="myChart" ></div>
+</template>
+
+<style lang="less" scoped>
+
+</style>

src/components/doubleCarbon/print/charts/carbonPrintQuotaChart.vue

@@ -0,0 +1,91 @@
+<script>
+import Card from "@/components/common/card.vue";
+export default {
+  data() {
+    return {}
+  },
+  props: {
+    height: Number
+  },
+  components: {
+    Card
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      let chart = this.$echarts.init(this.$refs.myChart);
+      let options = {
+        color: ['#6DA6F5','#A29DF8'],
+        legend: {
+          data: [
+            '碳配额',
+            '已消耗',
+          ]
+        },
+        grid: {
+          left: '2%', //默认10%
+          right: '8%', //默认10%
+          bottom: '2%', //默认60
+          top: '10%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value',
+          nameTextStyle: {
+            padding: [10, 0, 10, -20]
+          },
+        },
+        yAxis: {
+          type: 'category',
+          data: ['上分', '广分', '郑分', '规划院', '中迅'],
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          },
+          textStyle: {
+            color: '#fff',
+            align: 'left',
+            fontSize: 14
+          },
+          axisLine: {//x坐标轴轴线
+            show: true,
+            lineStyle: {//x坐标轴轴线样式
+              color: '#000',//'#ccc' | 'rgb(128, 128, 128)' | 'rgba(128, 128, 128, 0.5)'，设置标签颜色
+            }
+          },
+          backgroundColor: 'rgba(0,0,0,0.8)',
+        },
+        series: [
+          {
+            name: '碳配额',
+            data: [80, 280, 120, 200, 30],
+            type: 'bar',
+            barWidth: '30%',
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            }
+          },
+        ]
+      };
+      chart.setOption(options);
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="myChart" ref="myChart" :style="{height: height+'px'}">
+
+  </div>
+
+</template>

src/components/doubleCarbon/print/doubleCarbonPrint.vue

@@ -1,464 +1,127 @@
-<!--
-    文印排放页面
-    @author 刘梦祥
-    @date 2023年2月8日
--->
-<template>
-  <div class="doubleCarbon-main-box flexColumn">
-    <a-spin class="spinStyle" size="large" tip="Loading..." v-show="searchLoading"></a-spin>
-    <!-- 头部搜索区域 -->
-    <div class="borderColor">
-      <div class="flex flex_between margin5rem">
-        <div class="flex">
-          <div class="mr1rem">
-            单位名称：
-            <a-select
-              style="width:200px;"
-              v-model="searchParam.nameOfUnit"
-              :allowClear="selectProps.allowClear"
-              :mode="selectProps.mode"
-              :options="options.nameOfUnit"
-              :notFoundConent="selectProps.notFoundConent"
-              :placeholder="selectProps.placeholder"
-            ></a-select>
-          </div>
-          <div>
-            时间范围： <a-month-picker id="startTime" format="YYYY-MM" @change="changeTimeRangeS" placeholder="开始时间" />~
-            <a-month-picker id="endTime" format="YYYY-MM" @change="changeTimeRangeE" placeholder="结束时间" />
-          </div>
-        </div>
-        <div>
-          <a-button class="mr1rem" @click="reset">重置</a-button>
-          <a-button type="primary" @click="search">查询</a-button>
-        </div>
-      </div>
-      <div class="cardTitle margin5rem">核心指标</div>
-      <div v-if="coreList.length > 0" class="flex flex_around coreListBox margin5rem">
-        <div v-for="(item, index) in coreList" :key="'coreList' + index">
-          <div class="core_title">{{ item.title }}</div>
-          <div class="core_value">
-            {{ item.value ? item.value : "--" }}<span class="core_unit">{{ item.unit ? item.unit : "" }}</span
-            ><span class="core_leavel" v-if="item.leavel" :style="{ color: $constant.COLOR_LEAVEL[item.leavel] }">!</span>
-          </div>
-          <div v-if="item.info" class="core_info">
-            <span class="core_info_title">{{ item.info.title }}</span
-            ><span class="core_info_value" :style="{ color: $constant.COLOR_LEAVEL[item.info.leavel] }"
-              >{{ item.info.value
-              }}<a-icon v-if="item.info.leavel && (item.info.leavel == 1 || item.info.leavel == 3)" :type="item.info.leavel == 3 ? 'caret-up' : 'caret-down'" /></span>
-          </div>
-        </div>
-      </div>
-      <div class="flex flex_around coreListBox margin5rem" v-if="coreList.length == 0" style="height:120px;">
-        <a-empty></a-empty>
-      </div>
-    </div>
-    <!-- 碳排放分析和碳配额构成 -->
-    <div class="flex" style="height:400px;">
-      <div class="echartBox_left borderColor">
-        <div class="cardTitle margin5rem">碳排放分析</div>
-        <div class="margin5rem chartDomBox">
-          <LineChart v-if="chartData.LineChartData" :echartData="chartData.LineChartData" />
-          <a-empty v-else></a-empty>
-        </div>
-      </div>
-      <div class="echartBox_right borderColor">
-        <div class="cardTitle margin5rem">碳配额构成</div>
-        <div class="margin5rem chartDomBox">
-          <BarChart v-if="chartData.BarChartData" :echartData="chartData.BarChartData" />
-          <a-empty v-else></a-empty>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
-import LineChart from "../../echart/LineChart.vue";
-import BarChart from "../../echart/BarChart.vue";
-import PieChart from "../../echart/PieChart.vue";
-// 模拟数据
-import  AnalogData from "../AnalogData.js"
+import Card from "@/components/common/card.vue";
+import CoreData from "@/components/common/coreData.vue";
+import Query from "@/components/common/query.vue";
+
+import CarbonPrintEmissionChart from "@/components/doubleCarbon/print/charts/carbonPrintEmissionChart.vue";
+import CarbonPrintQuotaChart from "@/components/doubleCarbon/print/charts/carbonPrintQuotaChart.vue";
+
 export default {
   components: {
-    LineChart,
-    BarChart,
-    PieChart
+    Card,
+    CoreData,
+    Query,
+    CarbonPrintEmissionChart,
+    CarbonPrintQuotaChart,
   },
   data() {
     return {
-      // selectProps配置
-      selectProps: {
-        allowClear: true, // 支持清除
-        mode: "default", // 模式['default'|'multiple'|'tags'|'combobox']
-        notFoundConent: "Not Found", // 当下拉列表为空时显示的内容
-        placeholder: "请选择", // 选择框默认文字 string|slot
-        showArrow: true, // 是否显示下拉小箭头
-        size: "large" // 选择框大小['large'|'small']
-      },
-      // 单位名称option可选值
-      options: {
-        nameOfUnit: [] // options 数据，如果设置则不需要手动构造 selectOption 节点
-      },
-      // loading状态
-      searchLoading: true,
-      // 头部搜索条件中绑定值
-      monthArr: [],
-      searchParam: {
-        nameOfUnit: undefined,
-        timeRange: [undefined, undefined]
-      },
-      // 头部核心指标循环显示数据
-      coreList: [],
-      // 双碳新闻模拟数据
-      DoubleCarbonNewsInfoList: [],
-      // 双碳新闻弹窗打开状态
-      showModalStatus: false,
-      // 弹窗暂存数据对象
-      showModalInfo: {
-        title: "--",
-        content: "--",
-        author: "--",
-        pushTime: "--"
-      },
-      // chart暂存数据对象
-      chartData: []
-    };
-  },
-  created() {},
-  mounted() {
-    // 页面初始化
-    this.init();
-    //默认是当年的1月到12月
-    this.defaulTimeRangeS();
-    this.defaulTimeRangeE();
-  },
-  methods: {
-    // 开始时间初始化
-    defaulTimeRangeS() {
-      this.searchParam.timeRange[0] = this.$moment()
-        .startOf("year")
-        .format("YYYY-MM-DD 00:00:00");
-      document.getElementById("startTime").querySelector("input").value = this.$moment()
-        .startOf("year")
-        .format("YYYY-MM");
-    },
-    // 结束时间初始化
-    defaulTimeRangeE() {
-      this.searchParam.timeRange[1] = this.$moment()
-        .endOf("year")
-        .format("YYYY-MM-DD 23:59:59");
-      document.getElementById("endTime").querySelector("input").value = this.$moment()
-        .endOf("year")
-        .format("YYYY-MM");
-    },
-    // 修改开始时间时
-    changeTimeRangeS(date, dateStr) {
-      // 修改时间前判断是否合理
-      if (this.searchParam.timeRange[1]) {
-        if (
-          this.$moment(this.$moment(dateStr, "YYYY-MM").format("YYYY-MM-DD 00:00:00")).diff(
-            this.$moment(this.searchParam.timeRange[1])
-          ) > 0
-        ) {
-          this.$message.error("开始时间不能大于结束时间！请重新选择！");
-          setTimeout(() => {
-            document.getElementById("startTime").querySelector("input").value = this.$moment()
-              .startOf("year")
-              .format("YYYY-MM");
-          }, 10);
-        }
-      }
-      if (dateStr) {
-        this.searchParam.timeRange[0] = this.$moment(dateStr, "YYYY-MM").format("YYYY-MM-DD 00:00:00");
-      } else {
-        this.searchParam.timeRange[0] = undefined;
-      }
-    },
-    // 修改结束时间时
-    changeTimeRangeE(date, dateStr) {
-      // 修改时间前判断是否合理
-      if (this.searchParam.timeRange[0]) {
-        if (
-          this.$moment(this.searchParam.timeRange[0]).diff(
-            this.$moment(
-              this.$moment(dateStr, "YYYY-MM")
-                .endOf("month")
-                .format("YYYY-MM-DD 23:59:59")
-            )
-          ) > 0
-        ) {
-          this.$message.error("结束时间不能小于开始时间！请重新选择！");
-          setTimeout(() => {
-            document.getElementById("endTime").querySelector("input").value = this.$moment()
-              .endOf("year")
-              .format("YYYY-MM");
-          }, 10);
-        }
-      }
-      if (dateStr) {
-        this.searchParam.timeRange[1] = this.$moment(dateStr, "YYYY-MM")
-          .endOf("month")
-          .format("YYYY-MM-DD 23:59:59");
-      } else {
-        this.searchParam.timeRange[1] = undefined;
-      }
-    },
-    // 查询事件
-    search() {
-      // 时间范围条件不合理判断
-      if (this.searchParam.timeRange[0] || this.searchParam.timeRange[1]) {
-        if (!this.searchParam.timeRange[0]) {
-          this.$message.info("请选择开始时间！");
-          return;
-        } else if (!this.searchParam.timeRange[1]) {
-          this.$message.info("请选择结束时间！");
-          return;
+      coreData: [
+        {
+          title: '文印累计排放(tco2e/)',
+          num: 60,
+          historyDesc: '同比',
+          historyNum: 0.4
+        },
+        {
+          title: '文印人均排放(tco2e/天)',
+          num: 50,
+          historyDesc: '同比',
+          historyNum: 0.4
+        },
+        {
+          title: '纸张人均消耗(张/天)',
+          num: 500,
+          historyDesc: '同比',
+          historyNum: -0.4
+        },
+        {
+          title: '墨盒人均消耗(kg/天)',
+          num: 80,
+          historyDesc: '同比',
+          historyNum: -0.4
+        },
+        {
+          type: 1,
+          title: '值得关注',
+          showStar: true,
+          content: '限制人均每天打印 100 张以内'
+        },
+      ],
+      newsData: [
+        {
+          title: 'xxxxxxxxxx',
+          tag: '双碳小知识',
+          author: '张峰',
+          time: '2022-02-02 15:00:00'
         }
-      }
-      this.searchLoading = true;
-      console.log("查询条件：", this.searchParam.nameOfUnit, this.searchParam.timeRange[0], this.searchParam.timeRange[1]);
-      setTimeout(() => {
-        this.searchLoading = false;
-      }, 1000);
-    },
-    // 重置事件
-    reset() {
-      document.getElementById("startTime").querySelector("input").value = this.$moment()
-        .startOf("year")
-        .format("YYYY-MM");
-      document.getElementById("endTime").querySelector("input").value = this.$moment()
-        .endOf("year")
-        .format("YYYY-MM");
-      this.searchParam = {
-        nameOfUnit: undefined,
-        timeRange: [
-          this.$moment()
-            .startOf("year")
-            .format("YYYY-MM-DD 00:00:00"),
-          this.$moment()
-            .endOf("year")
-            .format("YYYY-MM-DD 23:59:59")
-        ]
-      };
-    },
-    // 弹窗显示事件
-    showModal(item) {
-      this.showModalStatus = true;
-      this.showModalInfo = item;
-    },
-    // 弹窗隐藏事件
-    onCancel() {
-      this.showModalStatus = false;
-    },
-    init() {
-      // 初始化加载[单位名称列表、核心指标、碳排放分析、碳配额构成、碳排放占比、双碳新闻]
-      setTimeout(() => {
-        this.options.nameOfUnit = AnalogData.optionsNameOfUnit;
-        this.coreList = AnalogData.core_List;
-        this.chartData = AnalogData.CHART_DATA;
-        this.DoubleCarbonNewsInfoList = AnalogData.doubleCarbonNewsInfoList;
-        this.searchLoading = false;
-      }, 1000);
+      ]
     }
-  }
-};
+  },
+}
 </script>
 
+<template>
+  <div class="doubleCarbon-print">
+
+    <div class="page-query-core">
+      <a-row>
+        <a-col>
+          <div style="width: 100%">
+            <Query></Query>
+          </div>
+        </a-col>
+        <a-col>
+          <div style="width: 100%">
+            <Card title="核心指标">
+              <CoreData :data-list="coreData"></CoreData>
+            </Card>
+          </div>
+        </a-col>
+      </a-row>
+    </div>
+
+    <div style="margin-top: 12px">
+      <a-row :gutter="[12,12]">
+        <a-col :span="18">
+          <Card title="碳排放分析">
+            <div class="doubleCarbon-print-analyse">
+              <CarbonPrintEmissionChart :height="450" />
+            </div>
+          </Card>
+        </a-col>
+        <a-col :span="6">
+          <Card title="碳配额构成">
+            <div class="doubleCarbon-print-quota">
+              <CarbonPrintQuotaChart :height="450" />
+            </div>
+          </Card>
+        </a-col>
+      </a-row>
+    </div>
+  </div>
+</template>
+
 <style lang="less" scoped>
-// 复用样式
-.flexColumn {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-}
-.flex {
-  display: flex;
-  flex-wrap: wrap;
-  align-content: center;
-  align-items: center;
-  &_center {
-    display: flex;
-    flex-wrap: wrap;
-    align-content: center;
-    align-items: center;
-    justify-content: center;
-  }
-  &_between {
-    display: flex;
-    flex-wrap: wrap;
-    align-content: center;
-    align-items: center;
-    justify-content: space-between;
-  }
-  &_around {
-    display: flex;
-    flex-wrap: wrap;
-    align-content: center;
-    align-items: center;
-    justify-content: space-around;
-  }
-}
-.borderColor {
-  border: 1px solid #e7eaf1;
-}
-.margin5rem {
-  margin: 0.5rem;
-}
-.padding5rem {
-  padding: 0.5rem;
-}
-// 页面主题样式
-.doubleCarbon-main-box {
-  position: relative;
+.doubleCarbon-print {
   width: 100%;
-  height: 100%;
-  & * {
-    user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-    -ms-user-select: none;
-    ::-webkit-scrollbar {
-      width: 0 !important;
-    }
-    -ms-overflow-style: none;
-    overflow: -moz-scrollbars-none;
-  }
-  & > div {
-    // padding: 5px 10px;
-    border-radius: 2px;
-    margin-bottom: 10px;
-  }
-  .spinStyle {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    background: rgba(255, 255, 255, 0.75);
-    z-index: 2;
-  }
-}
-// 头部搜索框和（重置、查询）按钮之间的间距样式
-.mr1rem {
-  margin-right: 1rem;
-}
-// 每个card标题的字体样式
-.cardTitle {
-  padding-left: 5px;
-  font-size: 14px;
-  font-weight: bold;
-  border-left: 5px solid @primary-color;
-}
-// 核心指标
-.coreListBox {
-  border-radius: 0.5rem;
-  background-color: rgb(233, 246, 253);
-  & > div {
-    position: relative;
-    // border-left: 1px solid #909399;
-    padding: 10px;
-    margin: 10px;
-    cursor: pointer;
-    border-radius: 0.5rem;
-    &:hover {
-      background-color: rgb(210, 239, 255);
-    }
-    // &::before {
-    //   content: "";
-    //   position: absolute;
-    //   left: -10px;
-    //   height: calc(100% - 20px);
-    //   width: 1px;
-    //   background: #c9c9c9;
-    // }
-  }
-}
-// 核心指标中value的样式
-.core {
-  &_title {
-    font-size: 12px;
-    padding-bottom: 10px;
-  }
-  &_leavel {
-    font-size: 16px;
-    font-weight: bold;
-  }
-  &_value {
-    font-size: 16px;
-    font-weight: 500;
-    color: #000;
-  }
-  &_unit {
-    padding-left: 0.5rem;
-    font-size: 12px;
-    font-weight: bold;
-    color: #909399;
-  }
-  &_info {
-    padding-top: 10px;
-    font-size: 12px;
-    &_title {
-      color: #afafaf;
-    }
-    &_value {
-      padding-left: 0.5rem;
-      font-weight: bold;
-    }
-  }
-}
-// echartBox样式
-.echartBox {
-  &_left {
-    width: calc(100% - 300px - 10px);
-    height: 100%;
-  }
-  &_right {
-    margin-left: 10px;
-    width: 300px;
-    height: 100%;
-  }
-}
-.chartDomBox {
-  position: relative;
-  width: calc(100% - 20px);
-  height: calc(100% - 41px);
-  display: flex;
-  justify-content: center;
-}
-.DoubleCarbonNews {
-  padding: 10px 0;
-  font-weight: bold;
-  color: #000;
-  cursor: pointer;
-  border-bottom: 1px solid #c9c9c9;
-  &:hover {
-    color: @primary-color;
-  }
-  & > div {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  & > div:nth-child(1) {
-    width: 15%;
-  }
-  & > div:nth-child(2) {
-    height: 21px;
-    overflow: hidden;
-    width: calc(50% - 110px);
+  height: auto;
+  padding-bottom: 15px;
+  vertical-align: top;
+
+  .doubleCarbon-print-analyse {
+    padding: 12px;
   }
-  & > div:nth-child(3) {
-    width: 20%;
+  .doubleCarbon-print-quota {
+    padding: 12px;
   }
-  & > div:nth-child(4) {
-    width: 15%;
+  .doubleCarbon-print-news {
+    padding: 0 12px;
+    height: 300px;
   }
-  & > div:nth-child(5) {
-    width: 30px;
+  .doubleCarbon-print-percent {
+    padding: 0 12px;
+    height: 300px;
   }
 }
-// loading样式
-.spin-content {
-  border: 1px solid #91d5ff;
-  background-color: #e6f7ff;
-  padding: 30px;
-}
 </style>

src/components/echart/BarChart.vue

@@ -1,83 +0,0 @@
-<!--
-    柱状图组件
-    @author 刘梦祥
-    @date 2023年2月9日
--->
-<template>
-  <root-echart :option="option" class="BarChart" />
-</template>
-
-<script>
-import RootEchart from "./rootEchart.vue";
-export default {
-  name: "BarChart",
-  components: {
-    RootEchart
-  },
-  props: ["echartData"],
-  data() {
-    return {
-      option: {
-        tooltip: {
-          trigger: "axis",
-          axisPointer: {
-            type: "shadow"
-          }
-        },
-        legend: {},
-        grid: {
-          left: "3%",
-          right: "4%",
-          bottom: "3%",
-          containLabel: true
-        },
-        xAxis: {
-          type: "value"
-        },
-        yAxis: {
-          type: "category",
-          data: []
-        },
-        series: []
-      }
-    };
-  },
-  created() {},
-  methods: {},
-  watch: {
-    echartData: {
-      handler(val) {
-        let _options = Object.assign({}, this.option);
-        _options.yAxis.data = val.yAxisData;
-        _options.series = [];
-        for (let key in val.seriesData) {
-          let seriesItem = {
-            name: key,
-            type: "bar",
-            stack: "total",
-            label: {
-              show: true
-            },
-            emphasis: {
-              focus: "series"
-            },
-            data: val.seriesData[key]
-          };
-          _options.series.push(seriesItem);
-        }
-        this.option = _options;
-      },
-      immediate: true,
-      deep: true
-    }
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.BarChart {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-</style>

src/components/echart/LineChart.vue

@@ -1,105 +0,0 @@
-<!--
-    折线图组件
-    @author 刘梦祥
-    @date 2023年2月9日
--->
-<template>
-  <root-echart :option="option" class="LineChart" />
-</template>
-
-<script>
-import RootEchart from "./rootEchart.vue";
-export default {
-  name: "LineChart",
-  components: {
-    RootEchart
-  },
-  props: ["echartData"],
-  data() {
-    return {
-      option: {
-        title: {
-          show: false,
-          text: "Line"
-        },
-        tooltip: {
-          trigger: "axis"
-        },
-        legend: {
-          data: []
-        },
-        grid: {
-          left: "3%",
-          right: "4%",
-          bottom: "50px",
-          containLabel: true
-        },
-        xAxis: {
-          type: "category",
-          boundaryGap: false,
-          data: []
-        },
-        yAxis: {
-          type: "value"
-        },
-        dataZoom: [
-          {
-            type: "inside",
-            start: 0,
-            end: 20
-          },
-          {
-            start: 0,
-            end: 20
-          }
-        ],
-        series: []
-      }
-    };
-  },
-  created() {},
-  methods: {},
-  watch: {
-    echartData: {
-      handler(val) {
-        let _options = Object.assign({}, this.option);
-        _options.xAxis.data = val.xAxisData;
-        _options.legend.data = [];
-        _options.series = [];
-        let index = 0;
-        for (let key in val.seriesData) {
-          let seriesItem = {
-            name: key,
-            type: "line",
-            stack: "Total",
-            itemStyle: {
-              normal: {
-                color: key == "中讯" ? "#F56C6C" : this.$constant.ECHART_LINE_COLOR_LIST[index],
-                lineStyle: {
-                  color: key == "中讯" ? "#F56C6C" : this.$constant.ECHART_LINE_COLOR_LIST[index],
-                  width: 2
-                }
-              }
-            },
-            data: val.seriesData[key]
-          };
-          _options.legend.data.push(key);
-          _options.series.push(seriesItem);
-          index < 5 ? (key == "中讯" ? (index = index) : index++) : (index = 0);
-        }
-        this.option = _options;
-      },
-      immediate: true,
-      deep: true
-    }
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.LineChart {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-</style>

src/components/echart/PieChart.vue

@@ -1,75 +0,0 @@
-<!--
-    饼状图组件
-    @author 刘梦祥
-    @date 2023年2月9日
--->
-<template>
-  <root-echart :option="option" class="PieChart" />
-</template>
-
-<script>
-import RootEchart from "./rootEchart.vue";
-export default {
-  name: "PieChart",
-  components: {
-    RootEchart
-  },
-  props: ["echartData"],
-  data() {
-    return {
-      option: {
-        tooltip: {
-          trigger: "item"
-        },
-        legend: {
-          top: "bottom"
-        },
-        series: [
-          {
-            name: "暂无数据",
-            type: "pie",
-            radius: ["30%", "45%"],
-            center: ["50%", "40%"],
-            label: {
-              alignTo: "edge",
-              formatter: "{name|{b}}\n{value|{c}}",
-              minMargin: 5,
-              edgeDistance: 10,
-              lineHeight: 15,
-              rich: {
-                time: {
-                  fontSize: 10,
-                  color: "#999"
-                }
-              }
-            },
-            data: [{ value: 0, name: "暂无数据" }]
-          }
-        ]
-      }
-    };
-  },
-  created() {},
-  methods: {},
-  watch: {
-    echartData: {
-      handler(val) {
-        let _options = Object.assign({}, this.option);
-        _options.series[0].name = val.seriesName;
-        _options.series[0].data = val.seriesData;
-        this.option = _options;
-      },
-      immediate: true,
-      deep: true
-    }
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.PieChart {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-</style>

src/components/echart/rootEchart.vue

@@ -1,67 +0,0 @@
-<!--
-    echart组件
-    @author 刘梦祥
-    @date 2023年2月9日
--->
-<template>
-  <div name="mechart" ref="mechart" class="mechart"></div>
-</template>
-<script>
-export default {
-  props: {
-    option: Object
-  },
-  data() {
-    return {
-      myChart: ""
-    };
-  },
-  computed: {
-    watchOptionStr() {
-      let a = this.option;
-      return JSON.stringify(a);
-    }
-  },
-  watch: {
-    watchOptionStr: {
-      handler: function(val, oldVal) {
-        if (val !== oldVal && this.myChart) {
-          this.myChart.setOption(this.option, true);
-        }
-      }
-    }
-  },
-  mounted() {
-    window.addEventListener("resize", this.resizeChart);
-    this.$nextTick(() => {
-      this.initChart();
-    });
-  },
-  beforeDestroy() {
-    window.removeEventListener("resize", this.resizeChart);
-    if (this.myChart) {
-      this.myChart.dispose();
-    }
-  },
-  methods: {
-    resizeChart() {
-      if (this.myChart !== "") {
-        this.myChart.resize();
-      }
-    },
-    initChart() {
-      this.myChart = this.$echarts.init(this.$refs.mechart);
-      if (this.option) {
-        this.myChart.setOption(this.option);
-      }
-    }
-  }
-};
-</script>
-<style lang="less" scoped>
-.mechart {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-</style>

src/components/life/healthyHome/lifeHealthyHome.vue

@@ -152,6 +152,10 @@ export default {
     height: 490px;
     overflow: hidden;
     background-color: #ffffff;
+    border-radius: 4px;
+    > div {
+      border-radius: 4px;
+    }
   }
   .lifeHealthyHome-right {
     margin-top: 12px;
@@ -159,6 +163,10 @@ export default {
     height: 490px;
     overflow: hidden;
     background-color: #ffffff;
+    border-radius: 4px;
+    > div {
+      border-radius: 4px;
+    }
   }
 }
 </style>

src/components/life/parking/lifeParking.vue

@@ -142,6 +142,7 @@ export default {
     margin-right: 12px;
     > div {
       margin-top: 12px;
+      border-radius: 4px;
       overflow: hidden;
     }
     .lifeParking-trend {
@@ -167,6 +168,7 @@ export default {
     > div {
       background-color: #ffffff;
       margin-top: 12px;
+      border-radius: 4px;
       overflow: hidden;
     }
     .lifeParking-top {

src/components/life/restaurant/lifeRestaurant.vue

@@ -11,7 +11,13 @@ import LifeRestPayChart from "@/components/life/restaurant/components/LifeRestPa
 
 export default {
   data() {
+    let range = this.$util.dateUtil.getNearlyMonthRange();
     return {
+      queryData: {
+        company: '0',
+        dept: '0',
+        timeRange: range
+      },
       coreData: [
         {
           title: '当天就餐人数预测',
@@ -59,11 +65,21 @@ export default {
     LifeRestPayChart,
   },
   created() {
+    this.init();
   },
   mounted() {
+
   },
   methods: {
+    init() {
 
+    },
+    reset() {
+      console.log('reset')
+    },
+    search(data) {
+      console.log(data)
+    }
   }
 }
 </script>
@@ -74,7 +90,7 @@ export default {
       <a-row>
         <a-col>
           <div class="lifeRestaurant-query">
-            <Query></Query>
+            <Query :query-data.sync="queryData" :show="['company','dept','time']" :reset="reset" :search="search"></Query>
           </div>
         </a-col>
         <a-col>
@@ -148,6 +164,7 @@ export default {
   .lifeRestaurant-left {
     margin-right: 12px;
     > div {
+      border-radius: 4px;
       margin-top: 12px;
     }
     .lifeRestaurant-eat {

src/components/life/supermarket/lifeSupermarket.vue

@@ -124,6 +124,7 @@ export default {
   .lifeSupermarket-left {
     margin-top: 12px;
     margin-right: 6px;
+    border-radius: 4px;
     background-color: #ffffff;
     height: 490px;
     overflow: hidden;
@@ -132,8 +133,12 @@ export default {
     margin-top: 12px;
     margin-left: 6px;
     background-color: #ffffff;
+    border-radius: 4px;
     height: 490px;
     overflow: hidden;
+    > div {
+      border-radius: 4px;
+    }
   }
 }
 </style>

src/components/security/alarm/manage/securityAlarmManageCategory.vue

@@ -27,7 +27,7 @@ export default {
         grid: {
           left: '2%', //默认10%
           right: '2%', //默认10%
-          bottom: '0%', //默认60
+          bottom: '10%', //默认60
           top: '15%',
           containLabel: true
           //grid区域是否包含坐标轴的刻度标签

src/components/security/alarm/manage/securityAlarmManageDistribute.vue

@@ -20,7 +20,7 @@ export default {
           trigger: 'item'
         },
         legend: {
-          bottom: 'bottom',
+          bottom: '10%',
           icon: 'circle'
         },
         series: [
@@ -28,6 +28,7 @@ export default {
             name: '告警次数',
             type: 'pie',
             radius: '50%',
+            center: ['50%','40%'],
             data: [
               { value: 177, name: '一层' },
               { value: 150, name: 'B1停车场' },

src/components/security/alarm/manage/securityAlarmManageOnlineTrend.vue

@@ -26,7 +26,7 @@ export default {
         grid: {
           left: '0%', //默认10%
           right: '1%', //默认10%
-          bottom: '15%', //默认60
+          bottom: '18%', //默认60
           top: '15%',
           containLabel: true
           //grid区域是否包含坐标轴的刻度标签
@@ -50,9 +50,15 @@ export default {
         ],
         dataZoom: [
           {
+            type: 'slider',
+            start: 0,
+            end: 100,
+            height: 12,
+          },
+          {
+            type: 'inside',
             start: 0,
             end: 100,
-            height: 16,
           }
         ],
         tooltip: {

src/components/security/alarm/manage/securityAlarmManageTrend.vue

@@ -26,8 +26,8 @@ export default {
         },
         grid: {
           left: '0%', //默认10%
-          right: '1%', //默认10%
-          bottom: '15%', //默认60
+          right: '2%', //默认10%
+          bottom: '12%', //默认60
           top: '15%',
           containLabel: true
           //grid区域是否包含坐标轴的刻度标签
@@ -44,13 +44,6 @@ export default {
             },
           },
         ],
-        dataZoom: [
-          {
-            start: 0,
-            end: 100,
-            height: 16,
-          }
-        ],
         tooltip: {
           trigger: 'axis',
           axisPointer: {
@@ -69,21 +62,25 @@ export default {
           },
           backgroundColor: 'rgba(0,0,0,0.8)',
         },
+        dataZoom: [
+          {
+            type: 'slider',
+            start: 0,
+            end: 100,
+            height: 12,
+          },
+          {
+            type: 'inside',
+            start: 0,
+            end: 100,
+          }
+        ],
         series: [
           {
             name: '一般告警',
             data: [302, 395, 227, 375, 349, 396, 304, 226, 207, 383, 287, 243],
             type: 'line',
             smooth: true,
-            //areaStyle: {
-            //  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-            //    offset: 0,
-            //    color: '#A6C9FF' // 0% 处的颜色
-            //  }, {
-            //    offset: 0.8,
-            //    color: '#ffffff' // 100% 处的颜色
-            //  }], false),
-            //},
             lineStyle: {
               color: "#5A9BFE",
               width: 1,
@@ -97,15 +94,6 @@ export default {
             data: [108, 104, 117, 152, 157, 121, 138, 146, 106, 143, 132, 177],
             type: 'line',
             smooth: true,
-            //areaStyle: {
-            //  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-            //    offset: 0,
-            //    color: '#B0E5CB' // 0% 处的颜色
-            //  }, {
-            //    offset: 0.8,
-            //    color: '#ffffff' // 100% 处的颜色
-            //  }], false),
-            //},
             lineStyle: {
               color: "#62CC97",
               width: 1,
@@ -119,15 +107,6 @@ export default {
             data: [40, 15, 59, 18, 33, 31, 31, 26, 34, 26, 28, 40],
             type: 'line',
             smooth: true,
-            //areaStyle: {
-            //  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-            //    offset: 0,
-            //    color: '#FFD7AC' // 0% 处的颜色
-            //  }, {
-            //    offset: 0.8,
-            //    color: '#ffffff' // 100% 处的颜色
-            //  }], false),
-            //},
             lineStyle: {
               color: "#FDB456",
               width: 1,
@@ -138,7 +117,6 @@ export default {
           }
         ]
       };
-      //Object.assign(defaultOption, this.option)
       chart.setOption(defaultOption)
     }
   }

src/components/security/alarm/map/imageMap.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="imageMap" ref="imageMap">
-    <img src="https://img2.focus.cn/upload/hz/37785/b_377847386.jpg" width="100%" height="100%">
+    <img :src="requireImg(src)" width="100%" height="100%">
 
     <template v-for="(item, index) in markers">
       <IconCamera :key="index"
@@ -14,6 +14,7 @@
 
 <script>
 import IconCamera from "@/assets/svg/IconCamera.vue";
+import {requireImg} from "@/utils/requireImg";
 
 export default {
   data() {
@@ -26,10 +27,12 @@ export default {
   },
   props: {
     markers: Array,
+    src: String
   },
   mounted() {
   },
   methods: {
+    requireImg
   }
 }
 </script>

src/components/security/alarm/securityAlarmGrid.vue

@@ -1,16 +1,18 @@
 <template>
   <div class="securityAlarmGrid">
-    <Card title="宫格模式">
-      <a-row>
-        <a-col :span="4">
-          <div style="padding-left: 15px">
-            <SecurityDeviceSelect></SecurityDeviceSelect>
-          </div>
-        </a-col>
-        <a-col :span="20">
-          <div></div>
-        </a-col>
-      </a-row>
+    <Card title="宫格模式" style="height: 99%">
+      <div style="height: 100%;margin: 0 15px 15px">
+        <a-row style="height: 100%">
+          <a-col :span="4" style="height: 90%">
+            <div style="padding-left: 15px; height: 100%">
+              <SecurityDeviceSelect></SecurityDeviceSelect>
+            </div>
+          </a-col>
+          <a-col :span="20">
+            <div></div>
+          </a-col>
+        </a-row>
+      </div>
     </Card>
   </div>
 </template>
@@ -27,5 +29,8 @@ export default {
 </script>
 
 <style lang="less" scoped>
-
+.securityAlarmGrid {
+  width: 100%;
+  height: 100%;
+}
 </style>

src/components/security/alarm/securityAlarmInfo.vue

@@ -187,5 +187,10 @@ export default {
 .securityAlarmInfo {
   width: 100%;
   height: 100%;
+  padding: 15px;
+  background-color: #ffffff;
+  .securityAlarmInfo-list {
+    margin: 15px 0px;
+  }
 }
 </style>

src/components/security/alarm/securityAlarmManage.vue

@@ -3,51 +3,57 @@
     <div class="securityAlarmManage-query">
       <Query></Query>
     </div>
-    <div class="securityAlarmManage-core">
+    <div class="page-query-core">
       <Card title="核心指标">
         <CoreData :data-list="coreData"></CoreData>
       </Card>
     </div>
-    <a-row>
-      <a-col :span="14">
-        <div class="securityAlarmManage-distributeMap">
-          <Card title="告警分布">
-            <SecurityAlarmManageDistributeMap></SecurityAlarmManageDistributeMap>
-          </Card>
-        </div>
-      </a-col>
-      <a-col :span="10">
-        <div class="securityAlarmManage-trend">
-          <Card title="告警趋势">
-            <SecurityAlarmManageTrend :height="450"></SecurityAlarmManageTrend>
-          </Card>
-        </div>
-      </a-col>
-    </a-row>
 
-    <a-row>
-      <a-col :span="8">
-        <div class="securityAlarmManage-distribute">
-          <Card title="楼层告警分布">
-            <SecurityAlarmManageDistribute :height="300"></SecurityAlarmManageDistribute>
-          </Card>
-        </div>
-      </a-col>
-      <a-col :span="8">
-        <div class="securityAlarmManage-onlineTrend">
-          <Card title="设备在线趋势">
-            <SecurityAlarmManageOnlineTrend :height="300"></SecurityAlarmManageOnlineTrend>
-          </Card>
-        </div>
-      </a-col>
-      <a-col :span="8">
-        <div class="securityAlarmManage-category">
-          <Card title="告警分类">
-            <SecurityAlarmManageCategory :height="300"></SecurityAlarmManageCategory>
-          </Card>
-        </div>
-      </a-col>
-    </a-row>
+
+    <div style="margin-top: 12px">
+      <a-row :gutter="[12,12]" >
+        <a-col :span="16">
+          <div class="securityAlarmManage-distributeMap">
+            <Card title="告警分布">
+              <SecurityAlarmManageDistributeMap></SecurityAlarmManageDistributeMap>
+            </Card>
+          </div>
+        </a-col>
+        <a-col :span="8">
+          <div class="securityAlarmManage-trend">
+            <Card title="告警趋势">
+              <div style="padding: 0 15px 8px">
+                <SecurityAlarmManageTrend :height="415"></SecurityAlarmManageTrend>
+              </div>
+            </Card>
+          </div>
+        </a-col>
+        <a-col :span="8">
+          <div class="securityAlarmManage-distribute">
+            <Card title="楼层告警分布">
+              <SecurityAlarmManageDistribute :height="300"></SecurityAlarmManageDistribute>
+            </Card>
+          </div>
+        </a-col>
+        <a-col :span="8">
+          <div class="securityAlarmManage-onlineTrend">
+            <Card title="设备在线趋势">
+              <div style="padding: 0 15px">
+                <SecurityAlarmManageOnlineTrend :height="300"></SecurityAlarmManageOnlineTrend>
+              </div>
+            </Card>
+          </div>
+        </a-col>
+        <a-col :span="8">
+          <div class="securityAlarmManage-category">
+            <Card title="告警分类">
+              <SecurityAlarmManageCategory :height="300"></SecurityAlarmManageCategory>
+            </Card>
+          </div>
+        </a-col>
+      </a-row>
+    </div>
+
   </div>
 </template>
 
@@ -114,15 +120,17 @@ export default {
 
 <style lang="less" scoped>
 .securityAlarmManage {
+  padding-bottom: 20px;
   .securityAlarmManage-distributeMap {
-    width: 100%;
-    padding: 0 15px 15px;
+    height: 450px;
+    overflow: hidden;
   }
   .securityAlarmManage-trend {
-    width: 95%;
+    height: 450px;
+    overflow: hidden;
   }
   .securityAlarmManage-distribute {
-    padding-bottom: 5%;
+
   }
 }
 </style>

src/components/security/alarm/securityAlarmMap.vue

@@ -46,7 +46,7 @@
       </div>
 
       <div class="securityAlarmMap-map">
-        <ImageMap ></ImageMap>
+        <ImageMap :src="areaSrc" ></ImageMap>
       </div>
     </Card>
   </div>
@@ -61,6 +61,7 @@ export default {
   data() {
     return {
       floor: '1',
+      areaSrc: 'security/area_1F.png'
     }
   },
   components: {
@@ -77,28 +78,33 @@ export default {
 <style lang="less" scoped>
 .securityAlarmMap {
   width: 100%;
-  height: 100%;
-  padding: 0px 15px;
+  height: auto;
+  background-color: #ffffff;
+  padding: 0px 15px 15px;
 
   .securityAlarmMap-query {
-    margin-top: 8px;
+    margin-top: 12px;
+    margin-left: 15px;
   }
 
   .securityAlarmMap-alert {
-    margin-top: 15px;
+    margin-top: 12px;
+    margin-left: 15px;
     height: 60px;
   }
 
   .securityAlarmMap-info {
     width: 100%;
-    border: 1px solid #f0f2f5;
-    padding: 5px 0;
+    margin-left: 15px;
+    color: #B2B2B2;
     .securityAlarmMap-info-item {
       display: inline-block;
-      margin: 0 5%;
       font-size: 15px;
+      margin-right: 50px;
       .securityAlarmMap-info-item-num {
         font-size: 18px;
+        background-color: #f7fbff;
+        padding: 0 10px;
         font-weight: bold;
       }
     }
@@ -107,6 +113,7 @@ export default {
   .securityAlarmMap-map {
     width: 100%;
     padding: 2% 5%;
+    background-color: #ffffff;
   }
 }
 </style>

src/components/security/common/securityDeviceSelect.vue

@@ -2,7 +2,7 @@
   <div class="securityDeviceSelect" style="width: 100%;height: 100%">
     <div class="securityDeviceSelect-title">监控点位</div>
     <div>
-      <a-input-search style="margin-bottom: 8px" placeholder="Search" @change="onChange"/>
+      <a-input-search style="margin-bottom: 8px" placeholder="请输入关键字" @change="onChange"/>
       <a-tree
           :expanded-keys="expandedKeys"
           :auto-expand-parent="true"
@@ -123,11 +123,16 @@ export default {
 .securityDeviceSelect {
   width: 100%;
   height: 100%;
-  border: 1px solid #d9d9d9;
+  background-color: #fafafa;
   padding: 15px;
   border-radius: 6px;
   .securityDeviceSelect-title {
-
+    color: #666666;
+    font-size: 16px;
+    margin: 8px 0;
+  }
+  /deep/ .ant-tree-switcher-noop {
+    display: none;
   }
 }
 </style>

src/components/security/device/securityDeviceItem.vue

@@ -1,13 +1,40 @@
 <template>
   <div class="securityDeviceItem">
-    <div class="securityDeviceItem-line">设备名称：门禁设备1#</div>
-    <div class="securityDeviceItem-line">设备状态：在线</div>
-    <div class="securityDeviceItem-line">功能交互：</div>
+    <a-row>
+      <a-col>
+        <div class="securityDeviceItem-line">
+          <span class="securityDeviceItem-line-label">设备名称：</span>
+          门禁设备1#
+        </div>
+      </a-col>
+      <a-col :span="18">
+        <div class="securityDeviceItem-line">
+          <span class="securityDeviceItem-line-label">设备状态：</span>
+          在线
+        </div>
+        <div class="securityDeviceItem-line">
+          <span class="securityDeviceItem-line-label">功能交互：</span>
+        </div>
+      </a-col>
+      <a-col :span="6">
+        <div >
+          <img height="60" :src="requireImg('security/devices/device-door.png')" />
+        </div>
+      </a-col>
+
+      <a-col>
+
+      </a-col>
+    </a-row>
   </div>
 </template>
 
 <script>
-export default {}
+import {requireImg} from "@/utils/requireImg";
+
+export default {
+  methods: {requireImg}
+}
 </script>
 
 <style lang="less" scoped>
@@ -16,11 +43,13 @@ export default {}
   margin: 15px 20px;
   width: 300px;
   height: 150px;
-  border: 1px solid #eeeeee;
-  box-shadow: 5px 0px 5px 0px #4D4D4D;
+  background-color: #F7FBFF;
   .securityDeviceItem-line {
     line-height: 25px;
-    margin: 10px;
+    margin: 12px 12px 0;
+    .securityDeviceItem-line-label {
+      color: #B2B2B2;
+    }
   }
 }
 </style>

src/components/security/person/components/securityPersonDuty.vue

@@ -2,6 +2,11 @@
 export default {
   data() {
     return {
+      tagCheck: {
+        front: false,
+        security: false,
+      },
+      currCheck: '',
       frontPeople: [
         {
           id: 1,
@@ -74,6 +79,7 @@ export default {
   },
   components: {},
   mounted() {
+    this.handleTagSelect('front')
   },
   methods: {
     callback(val) {
@@ -81,6 +87,13 @@ export default {
     },
     onSearch() {
 
+    },
+    handleTagSelect(item) {
+      for (const key in this.tagCheck) {
+        this.tagCheck[key] = false;
+      }
+      this.currCheck = item;
+      this.tagCheck[item] = true;
     },
     openMore() {
       this.$router.push({path: '/security/person/more'})
@@ -91,18 +104,46 @@ export default {
 
 <template>
   <div class="security-person-duty">
-    <a-tabs default-active-key="1" @change="callback">
-      <a-tab-pane key="1" tab="前台人员" force-render>
+    <div style="width: 97%;margin: 0 auto">
+      <a-divider style="margin: 0 0 6px;padding: 0"/>
+    </div>
+    <div class="dashboardPortrait-select">
+      <a-checkable-tag v-model="tagCheck.front" color="white" class="dashboardPortrait-select-tag"
+                       @change="handleTagSelect('front')">
+        <span class="dashboardPortrait-select-text">前台人员</span>
+      </a-checkable-tag>
+      <a-checkable-tag v-model="tagCheck.security" color="white" class="dashboardPortrait-select-tag"
+                       @change="handleTagSelect('security')">
+        <span class="dashboardPortrait-select-text">安防人员</span>
+      </a-checkable-tag>
+      <div style="float: right;margin-right: 12px">
+        <a-input-search placeholder="姓名" style="width: 140px" @search="onSearch"/>
+      </div>
+    </div>
+    <div class="dashboardPortrait-body">
+      <div v-if="currCheck==='front'">
         <div class="security-person-duty-content">
           <div class="security-person-duty-item" v-for="p in frontPeople" :key="p.id">
             <div class="security-person-duty-item-img">
-              <img width="90%" height="90%" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"  />
+              <img width="90%" height="90%" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/>
             </div>
             <div class="security-person-duty-item-desc">
-              <div class="security-person-duty-item-desc-text">姓名：{{ p.name }}</div>
-              <div class="security-person-duty-item-desc-text">工号：{{ p.workNum }}</div>
-              <div class="security-person-duty-item-desc-text">联系电话：{{ p.telNum }}</div>
-              <div class="security-person-duty-item-desc-text">工作区域：{{ p.workArea }}</div>
+              <div class="security-person-duty-item-desc-text">
+                <span class="security-person-duty-item-desc-label">姓名</span>：
+                {{ p.name }}
+              </div>
+              <div class="security-person-duty-item-desc-text">
+                <span class="security-person-duty-item-desc-label">工号</span>：
+                {{ p.workNum }}
+              </div>
+              <div class="security-person-duty-item-desc-text">
+                <span class="security-person-duty-item-desc-label">联系电话</span>：
+                {{ p.telNum }}
+              </div>
+              <div class="security-person-duty-item-desc-text">
+                <span class="security-person-duty-item-desc-label">工作区域</span>：
+                {{ p.workArea }}
+              </div>
             </div>
           </div>
 
@@ -110,24 +151,39 @@ export default {
             <a-button type="primary" size="small" style="float: right;right: 15px" @click="openMore">更多</a-button>
           </div>
         </div>
-      </a-tab-pane>
-      <a-tab-pane key="2" tab="安保人员" force-render>
-        <div class="security-person-duty-item" v-for="p in frontPeople" :key="p.id">
-          <div class="security-person-duty-item-img">
-            <img width="90%" height="90%" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"  />
+      </div>
+      <div v-if="currCheck==='security'">
+        <div class="security-person-duty-content">
+          <div class="security-person-duty-item" v-for="p in frontPeople" :key="p.id">
+            <div class="security-person-duty-item-img">
+              <img width="90%" height="90%" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/>
+            </div>
+            <div class="security-person-duty-item-desc">
+              <div class="security-person-duty-item-desc-text">
+                <span class="security-person-duty-item-desc-label">姓名</span>：
+                {{ p.name }}
+              </div>
+              <div class="security-person-duty-item-desc-text">
+                <span class="security-person-duty-item-desc-label">工号</span>：
+                {{ p.workNum }}
+              </div>
+              <div class="security-person-duty-item-desc-text">
+                <span class="security-person-duty-item-desc-label">联系电话</span>：
+                {{ p.telNum }}
+              </div>
+              <div class="security-person-duty-item-desc-text">
+                <span class="security-person-duty-item-desc-label">工作区域</span>：
+                {{ p.workArea }}
+              </div>
+            </div>
           </div>
-          <div class="security-person-duty-item-desc">
-            <div class="security-person-duty-item-desc-text">姓名：{{ p.name }}</div>
-            <div class="security-person-duty-item-desc-text">工号：{{ p.workNum }}</div>
-            <div class="security-person-duty-item-desc-text">联系电话：{{ p.telNum }}</div>
-            <div class="security-person-duty-item-desc-text">工作区域：{{ p.workArea }}</div>
+
+          <div style="position: absolute;bottom: 0;background-color: white;height: 30px;width: 100%">
+            <a-button type="primary" size="small" style="float: right;right: 15px" @click="openMore">更多</a-button>
           </div>
         </div>
-      </a-tab-pane>
-      <template #tabBarExtraContent>
-        <a-input-search placeholder="姓名" style="width: 140px" @search="onSearch" />
-      </template>
-    </a-tabs>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -138,29 +194,31 @@ export default {
 <style lang="less">
 .security-person-duty {
   padding: 0 15px;
+
   .security-person-duty-content {
-    border: 1px solid #e2e2e2;
     padding-top: 8px;
-    height: 600px;
+    height: 635px;
     padding-bottom: 35px;
     overflow-y: auto;
   }
+
   .security-person-duty-item {
-    width: 90%;
+    width: 99%;
     height: 160px;
-    border: 1px solid #e2e2e2;
+    background-color: #f7fbff;
     padding-top: 2%;
     padding-left: 5%;
-    margin: 0 auto 8px;
+    margin: 0 auto 12px;
     border-radius: 12px;
-
   }
+
   .security-person-duty-item-img {
     display: inline-block;
     vertical-align: top;
     width: 40%;
     height: 150px;
   }
+
   .security-person-duty-item-desc {
     display: inline-block;
     vertical-align: top;
@@ -168,15 +226,18 @@ export default {
     height: 150px;
     padding-left: 5%;
     padding-top: 2%;
-    font-weight: bold;
+
     .security-person-duty-item-desc-text {
       line-height: 30px;
     }
+    .security-person-duty-item-desc-label {
+      display: inline-block;
+      width: 60px;
+      text-align-last: justify;
+    }
   }
 
 
-
-
   .ant-tabs-ink-bar {
     visibility: hidden;
   }

src/components/security/person/components/securityPersonExistChart.vue

@@ -23,8 +23,8 @@ export default {
           ]
         },
         grid: {
-          left: '0%', //默认10%
-          right: '1%', //默认10%
+          left: '2%', //默认10%
+          right: '2%', //默认10%
           bottom: '20%', //默认60
           top: '15%',
           containLabel: true
@@ -46,7 +46,7 @@ export default {
           {
             start: 0,
             end: 100,
-            height: 16,
+            height: 12,
           }
         ],
         tooltip: {
@@ -75,12 +75,22 @@ export default {
             stack: 'a',
             yAxisIndex:0,
             smooth: true,
+            showSymbol:false,
             lineStyle: {
-              color: "#62CC97",
+              color: "#FF7C1F",
               width: 1,
             },
             itemStyle: {
-              color: '#62CC97'
+              color: '#FF7C1F'
+            },
+            areaStyle: {
+              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: '#FFD7AC' // 0% 处的颜色
+              }, {
+                offset: 1,
+                color: '#ffffff' // 100% 处的颜色
+              }], false),
             },
             emphasis: {
               scale:1.5

src/components/security/person/components/securityPersonGuestChart.vue

@@ -29,9 +29,9 @@ export default {
           ]
         },
         grid: {
-          left: '0%', //默认10%
-          right: '0%', //默认10%
-          bottom: '0%', //默认60
+          left: '2%', //默认10%
+          right: '2%', //默认10%
+          bottom: '15%', //默认60
           top: '15%',
           containLabel: true
           //grid区域是否包含坐标轴的刻度标签
@@ -71,21 +71,36 @@ export default {
           },
           backgroundColor: 'rgba(0,0,0,0.8)',
         },
+        dataZoom: [
+          {
+            start: 0,
+            end: 100,
+            height: 12,
+          }
+        ],
         series: [
           {
             name: '自由人员',
             data: [233, 209, 296, 148, 233, 395, 329],
             type: 'bar',
+            barWidth: '20%',
             backgroundStyle: {
               color: 'rgba(180, 180, 180, 0.2)'
+            },
+            itemStyle: {
+              color: '#80D4FF'
             }
           },
           {
             name: '其他人员',
             data: [31, 36, 18, 21, 73, 12, 59],
             type: 'bar',
+            barWidth: '20%',
             backgroundStyle: {
               color: 'rgba(180, 180, 180, 0.2)'
+            },
+            itemStyle: {
+              color: '#A6A6FF'
             }
           },
         ]

src/components/security/person/securityPerson.vue

@@ -64,14 +64,14 @@ export default {
 <template>
   <div class="iot-security-person" >
     <div v-show="$route.matched.length<=3">
-      <a-row>
+      <a-row :gutter="[12,12]">
         <a-col>
-          <Card title="核心指标">
-            <CoreData :data-list="coreData"></CoreData>
-          </Card>
+          <div class="page-query-core">
+            <Card title="人流信息">
+              <CoreData :data-list="coreData"></CoreData>
+            </Card>
+          </div>
         </a-col>
-      </a-row>
-      <a-row >
         <a-col :span="8">
           <Card title="今日值班情况">
             <SecurityPersonDuty></SecurityPersonDuty>
@@ -80,12 +80,16 @@ export default {
         <a-col :span="16">
           <div class="iot-security-person-exist">
             <Card title="保有量">
-              <SecurityPersonExistChart v-if="chartShow" :height="300"></SecurityPersonExistChart>
+              <div style="padding: 0 15px">
+                <SecurityPersonExistChart v-if="chartShow" :height="300"></SecurityPersonExistChart>
+              </div>
             </Card>
           </div>
           <div class="iot-security-person-traffic">
             <Card title="大楼客流量">
-              <SecurityPersonGuestChart v-if="chartShow" :height="300"></SecurityPersonGuestChart>
+              <div style="padding: 0 15px">
+                <SecurityPersonGuestChart v-if="chartShow" :height="350"></SecurityPersonGuestChart>
+              </div>
             </Card>
           </div>
         </a-col>
@@ -99,15 +103,13 @@ export default {
 <style lang="less" scoped>
 .iot-security-person {
   width: 100%;
+  padding-bottom: 15px;
   .iot-security-person-exist {
     width: 100%;
-    padding: 0 2%;
-    margin-right: 15px;
   }
   .iot-security-person-traffic {
     width: 100%;
-    padding: 0 2%;
-    margin-right: 15px;
+    background-color: #ffffff;
   }
 }
 </style>

src/data/json/menuList.json

@@ -115,7 +115,7 @@
         "iconColor": "functionColor/空间管理.png"
       },
       {
-        "name": "能源管理",
+        "name": "运营分析",
         "router": "/business/analysis",
         "icon": "",
         "iconColor": "functionColor/能源管理.png"

src/style/common.css

@@ -87,4 +87,5 @@
 .fade-transform-leave-to {
   opacity: 0;
   transform: translateX(30px);
-}
+}
+

src/style/common.less

@@ -1,2 +1,24 @@
 @import 'ant-design-vue/dist/antd.less';
 @import "@/style/custom.less";
+
+.dashboardPortrait-select {
+  padding: 8px 15px;
+  .dashboardPortrait-select-tag {
+    border: 1px solid #F0F1F2;
+    border-radius: 12px;
+    padding: 1px 12px;
+    margin-right: 16px;
+    cursor: pointer;
+  }
+  .ant-tag-checkable-checked {
+    .dashboardPortrait-select-text {
+      color: white;
+    }
+  }
+  .dashboardPortrait-select-text {
+    color: #B3B3B3;
+  }
+}
+.dashboardPortrait-body {
+  padding: 8px 12px;
+}

src/utils/dateUtil.js

@@ -0,0 +1,23 @@
+import moment from "@/utils/moment_set";
+const dateFormat = 'YYYY/MM/DD'
+const dateTimeFormat = 'YYYY/MM/DD HH:mm:ss'
+
+// 获取近30天日期范围
+const getNearlyMonthRange = () => {
+    let startDate = moment().subtract(30, 'days').format(dateFormat);
+    let endDate = moment().format(dateFormat);
+    return {
+        startTime: startDate,
+        endTime: endDate
+    };
+}
+
+// 获取当前日期时间
+const getCurrDateTime = () => {
+    return moment().format(dateTimeFormat);
+}
+
+export default {
+    getNearlyMonthRange,
+    getCurrDateTime,
+}

src/utils/index.js

@@ -1,5 +1,23 @@
 import { requireImg } from '@/utils/requireImg'
+import dateUtil from "@/utils/dateUtil";
 
+// 顺序执行多个异步方法
+const syncPromise = () => {
+  let promiseArr = []
+  for(let i=0; i<arguments.length; i++){
+    promiseArr.push(arguments[i])
+  }
+  let resArr = [];
+  promiseArr.reduce((prev, cur)=>{
+    return prev.then(() => {
+      return cur().then(res => {
+        resArr.push(res)
+      })
+    })
+  }, Promise.resolve())
+  return resArr;
+}
 export default {
   requireImg,
+  dateUtil,
 }

src/utils/request.js

@@ -4,7 +4,7 @@ import { message } from 'ant-design-vue'
 
 // 创建 axios 实例
 const service = axios.create({
-  baseURL: '/',
+  baseURL: '/ioc-api',
   timeout: 60 * 1000, // 请求超时时间,
   withCredentials: true, // 携带 cookie
 })
@@ -57,7 +57,9 @@ function req(method, url, params) {
 
       },
     }).then((response) => {
-      resolve(response.data)
+      if (response.data.code == 200) {
+        resolve(response.data.data)
+      }
     }).catch((err) => {
       message.error(err.message)
       reject(err)
@@ -75,7 +77,9 @@ function formReq(method, url, params) {
         'Content-Type': 'application/x-www-form-urlencoded',
       },
     }).then((response) => {
-      resolve(response.data)
+      if (response.data.code == 200) {
+        resolve(response.data.data)
+      }
     }).catch((err) => {
       message.error(err.message)
       reject(err)

src/views/HomeView.vue

@@ -29,7 +29,7 @@
         <!-- 内容 -->
         <a-layout-content class="home-page">
           <Transition name="fade-transform" mode="out-in">
-            <router-view :key="$route.matched[1].name" />
+            <router-view :key="$route.matched[1].name?$route.matched[1].name:-1" />
           </transition>
         </a-layout-content>
       </a-layout>
@@ -77,6 +77,11 @@ export default {
     },
     judgeHideAside() {
       let name = this.$route.name
+      if (!name) {
+        this.asideWidth = 160;
+        this.collapsedWidth = 60;
+        return;
+      }
       if (['dashboard','notice'].indexOf(name)>-1) {
         this.asideWidth = 0;
         this.collapsedWidth=0;

vite.config.js

@@ -13,6 +13,7 @@ import { FileSystemIconLoader } from 'unplugin-icons/loaders'
 import { ElementUiResolver } from "unplugin-vue-components/resolvers";
 import viteCompression from 'vite-plugin-compression'
 import visualizer from 'rollup-plugin-visualizer'
+import antdvFix from 'vite-plugin-antdv-fix';
 
 export default defineConfig(({ command }) => {
   return {
@@ -97,6 +98,7 @@ export default defineConfig(({ command }) => {
         gzipSize: true,
         brotliSize: true,
       }),
+      antdvFix(),
       // viteMockServe({
       //   mockPath: 'mock',
       //   localEnabled: command === 'serve',
@@ -108,7 +110,13 @@ export default defineConfig(({ command }) => {
     server: {
       host: "0.0.0.0",
       port: 8081,
-      proxy: {},
+      proxy: {
+        "/ioc-api": {
+          target: "http://192.168.3.20:10099",
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/ioc-api/, ""),
+        },
+      },
       open: false,
     },
   }