资产管理，空间管理部分

src/components/business/analysis/analysis.vue

@@ -0,0 +1,566 @@
+<template>
+    <div>
+      <div class="border-shadow">
+        <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="'文印管理'">
+              <div
+                class="myChart"
+                ref="myChart1"
+                :style="{ height: '515px' }"
+              ></div>
+            </card>
+          </div>
+        </a-col>
+        <a-col :span="6">
+          <div class="right border-shadow">
+            <card :title="'成本趋势'">
+              <div class="cben">
+                <div class="total">成本趋势： <span>增速10%</span></div>
+                <div
+                  class="myChart"
+                  ref="myChart2"
+                  :style="{ height: '484px' }"
+                ></div>
+              </div>
+            </card>
+          </div>
+        </a-col>
+      </a-row>
+    </div>
+  </template>
+    <script>
+  import query from "@/components/common/query.vue";
+  import card from "@/components/common/card.vue";
+  export default {
+    components: {
+      query,
+      card,
+    },
+    data() {
+      const listData = [];
+      for (let i = 0; i < 100; i++) {
+        listData.push({
+          index: i + 1,
+          name: "物理饭",
+          department: "技术开发部门",
+          time: "2023.02.03 00:00:00",
+        });
+      }
+      return {
+        options: [
+          {
+            value: 1,
+            name: "中讯1",
+          },
+          {
+            value: 2,
+            name: "中讯2",
+          },
+        ],
+        floors: [
+          {
+            value: 7,
+            name: "7层",
+          },
+          {
+            value: 8,
+            name: "8层",
+          },
+        ],
+        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 },
+        ],
+        listData: listData,
+        coreData: [
+          {
+            title: "车辆平均成本",
+            num: "100",
+            unit: "元",
+            historyDesc: "同比",
+            historyNum: 0.4,
+          },
+          {
+            title: "车辆平均出车次数",
+            num: "80",
+            unit: "",
+            historyDesc: "同比",
+            historyNum: 0.4,
+          },
+          {
+            title: "车辆平均碳排放",
+            num: "80",
+            unit: "tco2e",
+            historyDesc: "同比",
+            historyNum: 0.4,
+          },
+          {
+            title: "平均出车时长",
+            num: 80,
+            unit: "小时",
+            historyDesc: "同比",
+            historyNum: 0.4,
+          },
+          {
+            type: 1,
+            isHighLight: false,
+            title: "值得关注",
+            content: "增加20个公车数量",
+          },
+        ],
+      };
+    },
+    mounted() {
+      this.setEchart1();
+      this.setEchart2();
+    },
+    methods: {
+      handleChange(value) {
+        console.log(`selected ${value}`);
+      },
+      getTimeRange() {
+        this.$refs.timeRange.getTimeRange(); // 获取时间段
+      },
+  
+      setEchart1() {
+        let chart = this.$echarts.init(this.$refs.myChart1);
+        let options = {
+          tooltip: {
+            trigger: "axis",
+            // axisPointer: {
+            //    type: "shadow",
+            // },
+          },
+          legend: {
+            top: "5%",
+            textStyle: {
+              color: "#000", // 文字的颜色。
+              fontSize: 18,
+            },
+          },
+          grid: {
+            left: "1%",
+            right: "5%",
+            top: "15%",
+            bottom: "5%",
+            containLabel: true,
+            backgroundColor: "transparent",
+          },
+          yAxis: [
+            {
+              xtype: "value",
+              name: "出车次数",
+              nameTextStyle: {
+                fontSize: 20,
+                color: "#000",
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  color: "#1ebfda",
+                  type: "dashed",
+                },
+              },
+              axisTick: {
+                show: false,
+              },
+              axisLabel: {
+                color: "#000",
+                fontSize: 18,
+              },
+            },
+            {
+              type: "value",
+              position: "right",
+              name: "出车时长（h）",
+              min: 0,
+              max: 2000,
+              nameTextStyle: {
+                fontSize: 20,
+                color: "#000",
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  color: "#1ebfda",
+                  type: "dashed",
+                },
+              },
+              axisTick: {
+                show: false,
+              },
+              axisLabel: {
+                color: "#000",
+                fontSize: 18,
+              },
+            },
+          ],
+          xAxis: {
+            type: "category",
+            data: [
+              "00:00",
+              "01:00",
+              "02:00",
+              "03:00",
+              "04:00",
+              "05:00",
+              "06:00",
+              "07:00",
+              "08:00",
+              "09:00",
+              "10:00",
+              "11:00",
+              "12:00",
+              "13:00",
+              "14:00",
+              "15:00",
+              "16:00",
+              "17:00",
+              "18:00",
+              "19:00",
+              "20:00",
+              "21:00",
+              "22:00",
+              "23:00",
+            ],
+            axisLine: {
+              show: true,
+              textStyle: {
+                color: "#1ebfda",
+              },
+              lineStyle: {
+                color: "#1ebfda", //刻度线的颜色
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              color: "#000",
+              fontSize: 18,
+            },
+          },
+          series: [
+            {
+              name: "平均出车时长",
+              type: "bar",
+              barWidth: 20,
+              barGap: "40%",
+              data: [
+                430, 300, 320, 480, 410, 520, 570, 610, 610, 440, 630, 630, 300,
+                320, 480, 410, 610, 440, 630, 320, 480, 440, 630, 200,
+              ],
+              itemStyle: {
+                barBorderRadius: [4, 24, 0, 0],
+              },
+              color: "#5087ec",
+            },
+            {
+              name: "出车次数",
+              type: "bar",
+              barWidth: 20,
+              barGap: "40%",
+              data: [
+                810, 580, 700, 860, 810, 1010, 1080, 1100, 1220, 1220, 1000, 1300,
+                1080, 1300, 810, 580, 700, 860, 810, 1010, 1080, 1000, 1300, 1080,
+              ],
+              itemStyle: {
+                barBorderRadius: [4, 24, 0, 0],
+              },
+              color: "#68bbc4",
+            },
+          ],
+        };
+        chart.setOption(options);
+      },
+      setEchart2() {
+        let chart = this.$echarts.init(this.$refs.myChart2);
+        let color = ["#2eb4ff", "#9b9aea", "#f4e23e"];
+        let echartData = [
+          {
+            name: "1月",
+            value1: 1366,
+            value2: 0,
+            value3: 0,
+          },
+          {
+            name: "2月",
+            value1: 3694,
+            value2: 0,
+            value3: 0,
+          },
+          {
+            name: "3月",
+            value1: 19727,
+            value2: 1000,
+            value3: 0,
+          },
+          {
+            name: "4月",
+            value1: 17046,
+            value2: 1000,
+            value3: 500,
+          },
+          {
+            name: "5月",
+            value1: 14780,
+            value2: 13396,
+            value3: 6365,
+          },
+          {
+            name: "6月",
+            value1: 19359,
+            value2: 13220,
+            value3: 5940,
+          },
+          {
+            name: "7月",
+            value1: 14229,
+            value2: 10836,
+            value3: 8234,
+          },
+          {
+            name: "8月",
+            value1: 13176,
+            value2: 12478,
+            value3: 10755,
+          },
+          {
+            name: "9月",
+            value1: 16515,
+            value2: 12911,
+            value3: 10806,
+          },
+          {
+            name: "10月",
+            value1: 13658,
+            value2: 9479,
+            value3: 8613,
+          },
+          {
+            name: "11月",
+            value1: 16364,
+            value2: 10839,
+            value3: 8826,
+          },
+          {
+            name: "12月",
+            value1: 19973,
+            value2: 10016,
+            value3: 9291,
+          },
+        ];
+  
+        let legendItem = ["成本"];
+  
+        let xAxisData = echartData.map((v) => v.name);
+        //  ["1", "2", "3", "4", "5", "6", "7", "8"]
+        let yAxisData1 = echartData.map((v) => v.value1);
+        // [100, 138, 350, 173, 180, 150, 180, 230]
+        const hexToRgba = (hex, opacity) => {
+          let rgbaColor = "";
+          let reg = /^#[\da-f]{6}$/i;
+          if (reg.test(hex)) {
+            rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
+              "0x" + hex.slice(3, 5)
+            )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
+          }
+          return rgbaColor;
+        };
+  
+        let options = {
+          // backgroundColor: bgColor,
+          color: color,
+          legend: {
+            center: true,
+            top: 10,
+            data: legendItem,
+            textStyle: {
+              color: "#000000",
+            },
+          },
+          // calculable: true,
+          tooltip: {
+            trigger: "axis",
+            formatter: function (params) {
+              let html = "";
+              params.forEach((v) => {
+                console.log(v);
+                html += `<div style="color: #666;font-size: 14px;line-height: 24px">
+                  <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#ffffff;"></span>
+                  ${v.seriesName}.${v.name}
+                  <span style="color:${
+                    color[v.componentIndex]
+                  };font-weight:700;font-size: 18px">${v.value}</span>
+                  人`;
+              });
+  
+              return html;
+            },
+            extraCssText:
+              "background: #ffffff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;",
+            // axisPointer: {
+            //     type: 'shadow',
+            //     shadowStyle: {
+            //         // color: '#ffffff',
+            //         shadowColor: 'rgba(225,225,225,1)',
+            //         shadowBlur: 5
+            //     }
+            // }
+          },
+          grid: {
+            left: "1%",
+            right: "5%",
+            top: "15%",
+            bottom: "5%",
+            containLabel: true,
+          },
+          dataZoom: [
+            // x轴进度条，x轴超过15条数据就会展示出来
+            {
+              type: "slider",
+              show: xAxisData.length > 5,
+              start: 0,
+              end: xAxisData.length > 5 ? 30 : 100, // 控制初始化时展示的百分比数量
+              height: 15,
+              left: "5%",
+              right: "5%",
+              bottom: "2%",
+              moveHandleSize: 0, //去掉进度条顶部的横向拉动进度条
+            },
+          ],
+          xAxis: [
+            {
+              type: "category",
+              axisTick: {
+                show: false,
+              },
+              axisLine: {
+                show: false,
+                lineStyle: {
+                  type: "solid",
+                  color: "#0000004d",
+                },
+              },
+              axisLabel: {
+                inside: false,
+                textStyle: {
+                  color: "#000000", // x轴颜色
+                  fontWeight: "normal",
+                  fontSize: "14",
+                  lineHeight: 22,
+                },
+              },
+  
+              data: xAxisData,
+            },
+          ],
+          yAxis: [
+            {
+              type: "value",
+              name: "",
+              axisLabel: {
+                textStyle: {
+                  color: "#000000",
+                },
+              },
+              nameTextStyle: {
+                color: "#000000",
+                fontSize: 12,
+                lineHeight: 40,
+                padding: [0, 0, 0, -20],
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  type: "solid",
+                  color: "#0000004d",
+                },
+              },
+              axisLine: {
+                show: false,
+                lineStyle: {
+                  type: "solid",
+                  color: "#000000",
+                },
+              },
+              axisTick: {
+                show: false,
+              },
+            },
+          ],
+          series: [
+            {
+              name: legendItem[0],
+              type: "line",
+              smooth: false, //是否平滑
+              // showSymbol: false,/
+              symbolSize: 8,
+              zlevel: 3,
+              lineStyle: {
+                normal: {
+                  color: color[0],
+                  shadowBlur: 3,
+                  shadowColor: hexToRgba(color[0], 0.5),
+                  shadowOffsetY: 0,
+                },
+              },
+              areaStyle: {
+                normal: {
+                  color: new this.$echarts.graphic.LinearGradient(
+                    0,
+                    0,
+                    0,
+                    1,
+                    [
+                      {
+                        offset: 0,
+                        color: hexToRgba(color[0], 0.3),
+                      },
+                      {
+                        offset: 1,
+                        color: hexToRgba(color[0], 0.1),
+                      },
+                    ],
+                    false
+                  ),
+                  shadowColor: hexToRgba(color[0], 0.1),
+                  shadowBlur: 10,
+                },
+              },
+              data: yAxisData1,
+            },
+          ],
+        };
+        chart.setOption(options);
+      },
+    },
+  };
+  </script>
+      
+    
+    <style lang="less" scoped>
+  .left {
+    padding-right: 15px;
+    margin-right: 5px;
+  }
+  .right {
+    padding-left: 15px;
+    margin-left: 5px;
+  }
+  .cben {
+    font-weight: bold;
+    span {
+      font-size: 20px;
+    }
+  }
+  </style>

src/components/business/asset/asset.vue

@@ -0,0 +1,590 @@
+<template>
+  <div>
+    <div class="border-shadow">
+      <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>
+</template>
+    <script>
+import query from "@/components/common/query.vue";
+import card from "@/components/common/card.vue";
+
+export default {
+  components: {
+    query,
+    card,
+  },
+  data() {
+    const listData = [];
+    for (let i = 0; i < 100; i++) {
+      listData.push({
+        index: i + 1,
+        name: "物理饭",
+        department: "技术开发部门",
+        time: "2023.02.03 00:00:00",
+      });
+    }
+    return {
+      options: [
+        {
+          value: 1,
+          name: "中讯1",
+        },
+        {
+          value: 2,
+          name: "中讯2",
+        },
+      ],
+      floors: [
+        {
+          value: 7,
+          name: "7层",
+        },
+        {
+          value: 8,
+          name: "8层",
+        },
+      ],
+      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 },
+      ],
+      listData: listData,
+      coreData: [
+        {
+          title: "资产总额",
+          num: "1.3",
+          unit: "亿元",
+          historyDesc: "同比",
+          historyNum: 0.4,
+        },
+        {
+          title: "资产总数",
+          num: "5000",
+          unit: "项",
+          historyDesc: "同比",
+          historyNum: 0.4,
+        },
+        {
+          title: "资产占比最高",
+          num: "项目一",
+          unit: "",
+          historyDesc: "占比",
+          historyNum: 60,
+        },
+        {
+          title: "重点投资领域",
+          num: "工业互联网",
+          unit: "",
+          historyDesc: "投资总额占比",
+          historyNum: 60,
+        },
+        {
+          type: 1,
+          isHighLight: false,
+          title: "值得关注",
+          content: "13笔记本即将到报废年限",
+        },
+      ],
+    };
+  },
+  mounted() {
+    let that = this;
+    setTimeout(() => {
+      that.setEchart1();
+      // this.setEchart2();
+      that.setEchart3();
+      that.setEchart4();
+    }, 100);
+  },
+  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);
+    },
+    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: "其他部门" },
+      ];
+      let options = {
+        tooltip: {
+          trigger: "item",
+        },
+        legend: {
+          orient: "horizontal",
+          bottom: "0%",
+          left: "center",
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            radius: "65%",
+            data: data,
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+          },
+        ],
+      };
+      chart.setOption(options);
+    },
+  },
+};
+</script>
+      
+    
+    <style lang="less" scoped>
+.left {
+  padding-right: 15px;
+  margin-right: 5px;
+}
+.right {
+  padding-left: 15px;
+  margin-left: 5px;
+}
+.cben {
+  font-weight: bold;
+  span {
+    font-size: 20px;
+  }
+}
+</style>

src/components/business/business.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="iot-work">
+    <ContainerAside></ContainerAside>
+    <div class="pageContainer-body">
+      <Breadcrumb></Breadcrumb>
+
+      <div class="pageContainer-content">
+        <router-view />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineAsyncComponent } from "vue";
+
+export default {
+  data() {
+    return {
+    };
+  },
+  components: {
+    ContainerAside: defineAsyncComponent(() =>
+      import("@/components/home/ContainerAside.vue")
+    ),
+    Breadcrumb: defineAsyncComponent(() =>
+      import("@/components/breadcrumb/iotBreadcrumb.vue")
+    ),
+  },
+  watch: {
+  },
+  mounted() {
+
+  },
+  methods: {
+
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.iot-work {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/components/business/space/space.vue

@@ -0,0 +1,1104 @@
+<template>
+  <div>
+    <div class="border-shadow">
+      <a-form layout="inline">
+        <a-form-item label="单位名称：" class="formItem">
+          <a-select :default-value="0" style="width: 240px">
+            <a-select-option :value="0"> 全部 </a-select-option>
+            <a-select-option :value="1"> 中迅 </a-select-option>
+            <a-select-option :value="2"> 电信规划院 </a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item label="能源类型：" class="formItem">
+          <a-select
+            :default-value="0"
+            v-model="classificationIndex"
+            @change="changeEnergyType"
+            style="width: 240px"
+          >
+            <a-select-option
+              :value="index"
+              v-for="(str, index) in energy"
+              :key="index"
+            >
+              {{ str }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item label="时间范围：" class="formItem">
+          <timeRange ref="timeRange"></timeRange>
+        </a-form-item>
+        <a-form-item class="formItem">
+          <a-button type="primary" @click="reset">重置</a-button>
+          <a-button type="primary" @click="search">查询</a-button>
+        </a-form-item>
+      </a-form>
+      <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="'能源趋势'">
+            <div
+              class="myChart"
+              ref="myChart1"
+              :style="{ height: '515px' }"
+            ></div>
+          </card>
+        </div>
+      </a-col>
+      <a-col :span="6">
+        <div class="right border-shadow">
+          <card :title="classificationIndex == 0 ? '能源分析' : '能源分布'">
+            <div v-if="classificationIndex == 0">
+              <div></div>
+              <div
+                class="myChart"
+                ref="myChart2"
+                :style="{ height: '515px' }"
+              ></div>
+            </div>
+            <div v-if="classificationIndex == 1"></div>
+            <div v-if="classificationIndex == 2"></div>
+            <div v-if="classificationIndex == 3"></div>
+            <div v-if="classificationIndex == 4"></div>
+            <div v-if="classificationIndex == 5"></div>
+          </card>
+        </div>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+    <script>
+import query from "@/components/common/query.vue";
+import card from "@/components/common/card.vue";
+export default {
+  components: {
+    query,
+    card,
+  },
+  data() {
+    return {
+      energy: ["全部", "用电", "用水", "用热", "用冷", "发电"],
+      classificationIndex: 0,
+      classificationData: {
+        total: {
+          coreData: [
+            {
+              title: "总用量",
+              num: "98",
+              unit: "kWh",
+              historyDesc: "同比",
+              historyNum: 0.4,
+            },
+            {
+              title: "总用量",
+              num: "50",
+              unit: "m<sup>3</sup>",
+              historyDesc: "同比",
+              historyNum: 0.4,
+            },
+            {
+              title: "总能耗成本",
+              num: "100",
+              unit: "元",
+              historyDesc: "同比",
+              historyNum: 0.4,
+            },
+            {
+              title: "人均能耗成本",
+              num: 1000,
+              unit: "元/人",
+              historyDesc: "同比",
+              historyNum: 0.4,
+            },
+            {
+              type: 1,
+              isHighLight: false,
+              title: "值得关注",
+              content: "人均成本过高，请购买智能源服务",
+            },
+          ],
+        },
+        use_electric: {
+          coreData: [
+            {
+              title: "车辆平均成本",
+              num: "100",
+              unit: "元",
+              historyDesc: "同比",
+              historyNum: 0.4,
+            },
+            {
+              title: "车辆平均出车次数",
+              num: "80",
+              unit: "",
+              historyDesc: "同比",
+              historyNum: 0.4,
+            },
+            {
+              title: "车辆平均碳排放",
+              num: "80",
+              unit: "tco2e",
+              historyDesc: "同比",
+              historyNum: 0.4,
+            },
+            {
+              title: "平均出车时长",
+              num: 80,
+              unit: "小时",
+              historyDesc: "同比",
+              historyNum: 0.4,
+            },
+            {
+              type: 1,
+              isHighLight: false,
+              title: "值得关注",
+              content: "增加20个公车数量",
+            },
+          ],
+        },
+        water: {
+          coreData: [
+            {
+              title: "车辆平均成本",
+              num: "100",
+              unit: "元",
+              historyDesc: "同比",
+              historyNum: 0.4,
+            },
+            {
+              title: "车辆平均出车次数",
+              num: "80",
+              unit: "",
+              historyDesc: "同比",
+              historyNum: 0.4,
+            },
+            {
+              title: "车辆平均碳排放",
+              num: "80",
+              unit: "tco2e",
+              historyDesc: "同比",
+              historyNum: 0.4,
+            },
+            {
+              title: "平均出车时长",
+              num: 80,
+              unit: "小时",
+              historyDesc: "同比",
+              historyNum: 0.4,
+            },
+            {
+              type: 1,
+              isHighLight: false,
+              title: "值得关注",
+              content: "增加20个公车数量",
+            },
+          ],
+        },
+        hot: {
+          coreData: [
+            {
+              title: "车辆平均成本",
+              num: "100",
+              unit: "元",
+              historyDesc: "同比",
+              historyNum: 0.4,
+            },
+            {
+              title: "车辆平均出车次数",
+              num: "80",
+              unit: "",
+              historyDesc: "同比",
+              historyNum: 0.4,
+            },
+            {
+              title: "车辆平均碳排放",
+              num: "80",
+              unit: "tco2e",
+              historyDesc: "同比",
+              historyNum: 0.4,
+            },
+            {
+              title: "平均出车时长",
+              num: 80,
+              unit: "小时",
+              historyDesc: "同比",
+              historyNum: 0.4,
+            },
+            {
+              type: 1,
+              isHighLight: false,
+              title: "值得关注",
+              content: "增加20个公车数量",
+            },
+          ],
+        },
+        cold: {
+          coreData: [
+            {
+              title: "车辆平均成本",
+              num: "100",
+              unit: "元",
+              historyDesc: "同比",
+              historyNum: 0.4,
+            },
+            {
+              title: "车辆平均出车次数",
+              num: "80",
+              unit: "",
+              historyDesc: "同比",
+              historyNum: 0.4,
+            },
+            {
+              title: "车辆平均碳排放",
+              num: "80",
+              unit: "tco2e",
+              historyDesc: "同比",
+              historyNum: 0.4,
+            },
+            {
+              title: "平均出车时长",
+              num: 80,
+              unit: "小时",
+              historyDesc: "同比",
+              historyNum: 0.4,
+            },
+            {
+              type: 1,
+              isHighLight: false,
+              title: "值得关注",
+              content: "增加20个公车数量",
+            },
+          ],
+        },
+        create_electric: {
+          coreData: [
+            {
+              title: "车辆平均成本",
+              num: "100",
+              unit: "元",
+              historyDesc: "同比",
+              historyNum: 0.4,
+            },
+            {
+              title: "车辆平均出车次数",
+              num: "80",
+              unit: "",
+              historyDesc: "同比",
+              historyNum: 0.4,
+            },
+            {
+              title: "车辆平均碳排放",
+              num: "80",
+              unit: "tco2e",
+              historyDesc: "同比",
+              historyNum: 0.4,
+            },
+            {
+              title: "平均出车时长",
+              num: 80,
+              unit: "小时",
+              historyDesc: "同比",
+              historyNum: 0.4,
+            },
+            {
+              type: 1,
+              isHighLight: false,
+              title: "值得关注",
+              content: "增加20个公车数量",
+            },
+          ],
+        },
+      },
+      coreData: [],
+    };
+  },
+  mounted() {
+    let that = this;
+    setTimeout(() => {
+      this.search();
+    }, 100);
+  },
+  methods: {
+    changeEnergyType(value) {
+      // this.classificationIndex = value;
+      // console.log(this.classificationIndex)
+      // console.log(value)
+    },
+    changeCoreData() {
+      this.coreData = JSON.parse(
+        JSON.stringify(
+          this.classificationData[
+            Object.getOwnPropertyNames(this.classificationData)[
+              this.classificationIndex
+            ]
+          ].coreData
+        )
+      );
+    },
+    reset() {
+      this.classificationIndex = 0;
+    },
+    search() {
+      this.changeCoreData();
+      switch (this.classificationIndex) {
+        case 0:
+          this.totalSetEchart1();
+          break;
+        case 1:
+          break;
+        case 2:
+          break;
+        case 3:
+          break;
+        case 4:
+          break;
+        case 5:
+          break;
+
+        default:
+          break;
+      }
+    },
+
+    totalSetEchart1() {
+      let that = this;
+      let chart = this.$echarts.init(this.$refs.myChart1);
+
+      let xLabel = [
+        "1月",
+        "2月",
+        "3月",
+        "4月",
+        "5月",
+        "6月",
+        "7月",
+        "8月",
+        "9月",
+        "10月",
+        "11月",
+        "12月",
+      ];
+
+      let yData = [
+        {
+          name: "用电",
+          color: "#5087ec",
+          startColor: "rgba(80,135,236,.6)",
+          endColor: "rgba(80,135,236,.6)",
+          data: [
+            "110",
+            "130",
+            "150",
+            "170",
+            "150",
+            "130",
+            "110",
+            "130",
+            "150",
+            "170",
+            "150",
+            "130",
+          ],
+        },
+        {
+          name: "用水",
+          color: "#68bbc4",
+          startColor: "rgba(104,187,196,.6)",
+          endColor: "rgba(104,187,196,.6)",
+          data: [
+            "210",
+            "230",
+            "250",
+            "270",
+            "250",
+            "230",
+            "210",
+            "230",
+            "250",
+            "270",
+            "250",
+            "230",
+          ],
+        },
+        {
+          name: "用热",
+          color: "#60b565",
+          startColor: "rgba(96,181,101,.6)",
+          endColor: "rgba(96,181,101,.6)",
+          data: [
+            "310",
+            "330",
+            "350",
+            "370",
+            "350",
+            "330",
+            "310",
+            "330",
+            "350",
+            "370",
+            "350",
+            "330",
+          ],
+        },
+        {
+          name: "用冷",
+          color: "#f2bd42",
+          startColor: "rgba(242,189,66,.6)",
+          endColor: "rgba(242,189,66,.6)",
+          data: [
+            "410",
+            "430",
+            "450",
+            "470",
+            "450",
+            "430",
+            "410",
+            "430",
+            "450",
+            "470",
+            "450",
+            "430",
+          ],
+        },
+        {
+          name: "光伏",
+          color: "#ee752f",
+          startColor: "rgba(238,117,47,.6)",
+          endColor: "rgba(238,117,47,.6)",
+          data: [
+            "510",
+            "530",
+            "550",
+            "570",
+            "550",
+            "530",
+            "510",
+            "530",
+            "550",
+            "570",
+            "550",
+            "530",
+          ],
+        },
+      ];
+      let ySeries = yData.map(function (item) {
+        return {
+          name: item.name,
+          type: "line",
+          stack: "Total",
+          // symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
+          showAllSymbol: true,
+          symbolSize: 8,
+          smooth: true,
+          lineStyle: {
+            normal: {
+              width: 2,
+              color: item.color, // 线条颜色
+            },
+          },
+          itemStyle: {
+            color: item.color,
+          },
+          areaStyle: {
+            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
+              ),
+            },
+          },
+          data: item.data,
+        };
+      });
+
+      let options = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            lineStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "rgba(126,199,255,0)", // 0% 处的颜色
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(126,199,255,1)", // 100% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(126,199,255,0)", // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+            },
+          },
+        },
+        legend: {
+          align: "left",
+          top: "5%",
+          textStyle: {
+            color: "#000000",
+            fontSize: 16,
+          },
+        },
+        grid: {
+          top: "20%",
+          left: "5%",
+          right: "5%",
+          bottom: "15%",
+          // containLabel: true
+        },
+        dataZoom: [
+          // x轴进度条，x轴超过15条数据就会展示出来
+          {
+            type: "slider",
+            show: xLabel.length >= 6,
+            start: 0,
+            end: xLabel.length >= 6 ? 50 : 100, // 控制初始化时展示的百分比数量
+            height: 20,
+            left: "5%",
+            right: "5%",
+            bottom: "2%",
+            moveHandleSize: 0, //去掉进度条顶部的横向拉动进度条
+          },
+        ],
+        xAxis: [
+          {
+            type: "category",
+            // boundaryGap: false,
+            axisLine: {
+              //坐标轴轴线相关设置。数学上的x轴
+              show: true,
+              lineStyle: {
+                color: "#6e7079",
+              },
+            },
+            axisLabel: {
+              //坐标轴刻度标签的相关设置
+              textStyle: {
+                color: "#000000",
+                padding: 8,
+                fontSize: 14,
+              },
+              formatter: function (data) {
+                return data;
+              },
+            },
+            splitLine: {
+              show: false,
+              lineStyle: {
+                color: "#233653",
+              },
+            },
+            axisTick: {
+              show: true,
+              inside: true,
+            },
+            data: xLabel,
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：kWh",
+            min: 0,
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: "#e8e8e8",
+              },
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: "#233653",
+              },
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: "#000000",
+                padding: 8,
+              },
+              formatter: function (value) {
+                if (value === 0) {
+                  return value;
+                }
+                return value;
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: ySeries,
+      };
+      chart.setOption(options);
+    },
+
+    getTimeRange() {
+      this.$refs.timeRange.getTimeRange(); // 获取时间段
+    },
+
+    // setEchart1() {
+    //   let chart = this.$echarts.init(this.$refs.myChart1);
+    //   let options = {
+    //     tooltip: {
+    //       trigger: "axis",
+    //       // axisPointer: {
+    //       //    type: "shadow",
+    //       // },
+    //     },
+    //     legend: {
+    //       top: "5%",
+    //       textStyle: {
+    //         color: "#000", // 文字的颜色。
+    //         fontSize: 18,
+    //       },
+    //     },
+    //     grid: {
+    //       left: "1%",
+    //       right: "5%",
+    //       top: "15%",
+    //       bottom: "5%",
+    //       containLabel: true,
+    //       backgroundColor: "transparent",
+    //     },
+    //     yAxis: [
+    //       {
+    //         xtype: "value",
+    //         name: "出车次数",
+    //         nameTextStyle: {
+    //           fontSize: 20,
+    //           color: "#000",
+    //         },
+    //         splitLine: {
+    //           show: true,
+    //           lineStyle: {
+    //             color: "#1ebfda",
+    //             type: "dashed",
+    //           },
+    //         },
+    //         axisTick: {
+    //           show: false,
+    //         },
+    //         axisLabel: {
+    //           color: "#000",
+    //           fontSize: 18,
+    //         },
+    //       },
+    //       {
+    //         type: "value",
+    //         position: "right",
+    //         name: "出车时长（h）",
+    //         min: 0,
+    //         max: 2000,
+    //         nameTextStyle: {
+    //           fontSize: 20,
+    //           color: "#000",
+    //         },
+    //         splitLine: {
+    //           show: true,
+    //           lineStyle: {
+    //             color: "#1ebfda",
+    //             type: "dashed",
+    //           },
+    //         },
+    //         axisTick: {
+    //           show: false,
+    //         },
+    //         axisLabel: {
+    //           color: "#000",
+    //           fontSize: 18,
+    //         },
+    //       },
+    //     ],
+    //     xAxis: {
+    //       type: "category",
+    //       data: [
+    //         "00:00",
+    //         "01:00",
+    //         "02:00",
+    //         "03:00",
+    //         "04:00",
+    //         "05:00",
+    //         "06:00",
+    //         "07:00",
+    //         "08:00",
+    //         "09:00",
+    //         "10:00",
+    //         "11:00",
+    //         "12:00",
+    //         "13:00",
+    //         "14:00",
+    //         "15:00",
+    //         "16:00",
+    //         "17:00",
+    //         "18:00",
+    //         "19:00",
+    //         "20:00",
+    //         "21:00",
+    //         "22:00",
+    //         "23:00",
+    //       ],
+    //       axisLine: {
+    //         show: true,
+    //         textStyle: {
+    //           color: "#1ebfda",
+    //         },
+    //         lineStyle: {
+    //           color: "#1ebfda", //刻度线的颜色
+    //         },
+    //       },
+    //       axisTick: {
+    //         show: false,
+    //       },
+    //       axisLabel: {
+    //         color: "#000",
+    //         fontSize: 18,
+    //       },
+    //     },
+    //     series: [
+    //       {
+    //         name: "平均出车时长",
+    //         type: "bar",
+    //         barWidth: 20,
+    //         barGap: "40%",
+    //         data: [
+    //           430, 300, 320, 480, 410, 520, 570, 610, 610, 440, 630, 630, 300,
+    //           320, 480, 410, 610, 440, 630, 320, 480, 440, 630, 200,
+    //         ],
+    //         itemStyle: {
+    //           barBorderRadius: [4, 24, 0, 0],
+    //         },
+    //         color: "#5087ec",
+    //       },
+    //       {
+    //         name: "出车次数",
+    //         type: "bar",
+    //         barWidth: 20,
+    //         barGap: "40%",
+    //         data: [
+    //           810, 580, 700, 860, 810, 1010, 1080, 1100, 1220, 1220, 1000, 1300,
+    //           1080, 1300, 810, 580, 700, 860, 810, 1010, 1080, 1000, 1300, 1080,
+    //         ],
+    //         itemStyle: {
+    //           barBorderRadius: [4, 24, 0, 0],
+    //         },
+    //         color: "#68bbc4",
+    //       },
+    //     ],
+    //   };
+    //   chart.setOption(options);
+    // },
+    // setEchart2() {
+    //   let chart = this.$echarts.init(this.$refs.myChart2);
+    //   let color = ["#2eb4ff", "#9b9aea", "#f4e23e"];
+    //   let echartData = [
+    //     {
+    //       name: "1月",
+    //       value1: 1366,
+    //       value2: 0,
+    //       value3: 0,
+    //     },
+    //     {
+    //       name: "2月",
+    //       value1: 3694,
+    //       value2: 0,
+    //       value3: 0,
+    //     },
+    //     {
+    //       name: "3月",
+    //       value1: 19727,
+    //       value2: 1000,
+    //       value3: 0,
+    //     },
+    //     {
+    //       name: "4月",
+    //       value1: 17046,
+    //       value2: 1000,
+    //       value3: 500,
+    //     },
+    //     {
+    //       name: "5月",
+    //       value1: 14780,
+    //       value2: 13396,
+    //       value3: 6365,
+    //     },
+    //     {
+    //       name: "6月",
+    //       value1: 19359,
+    //       value2: 13220,
+    //       value3: 5940,
+    //     },
+    //     {
+    //       name: "7月",
+    //       value1: 14229,
+    //       value2: 10836,
+    //       value3: 8234,
+    //     },
+    //     {
+    //       name: "8月",
+    //       value1: 13176,
+    //       value2: 12478,
+    //       value3: 10755,
+    //     },
+    //     {
+    //       name: "9月",
+    //       value1: 16515,
+    //       value2: 12911,
+    //       value3: 10806,
+    //     },
+    //     {
+    //       name: "10月",
+    //       value1: 13658,
+    //       value2: 9479,
+    //       value3: 8613,
+    //     },
+    //     {
+    //       name: "11月",
+    //       value1: 16364,
+    //       value2: 10839,
+    //       value3: 8826,
+    //     },
+    //     {
+    //       name: "12月",
+    //       value1: 19973,
+    //       value2: 10016,
+    //       value3: 9291,
+    //     },
+    //   ];
+
+    //   let legendItem = ["成本"];
+
+    //   let xAxisData = echartData.map((v) => v.name);
+    //   //  ["1", "2", "3", "4", "5", "6", "7", "8"]
+    //   let yAxisData1 = echartData.map((v) => v.value1);
+    //   // [100, 138, 350, 173, 180, 150, 180, 230]
+    //   const hexToRgba = (hex, opacity) => {
+    //     let rgbaColor = "";
+    //     let reg = /^#[\da-f]{6}$/i;
+    //     if (reg.test(hex)) {
+    //       rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
+    //         "0x" + hex.slice(3, 5)
+    //       )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
+    //     }
+    //     return rgbaColor;
+    //   };
+
+    //   let options = {
+    //     // backgroundColor: bgColor,
+    //     color: color,
+    //     legend: {
+    //       center: true,
+    //       top: 10,
+    //       data: legendItem,
+    //       textStyle: {
+    //         color: "#000000",
+    //       },
+    //     },
+    //     // calculable: true,
+    //     tooltip: {
+    //       trigger: "axis",
+    //       formatter: function (params) {
+    //         let html = "";
+    //         params.forEach((v) => {
+    //           console.log(v);
+    //           html += `<div style="color: #666;font-size: 14px;line-height: 24px">
+    //               <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#ffffff;"></span>
+    //               ${v.seriesName}.${v.name}
+    //               <span style="color:${
+    //                 color[v.componentIndex]
+    //               };font-weight:700;font-size: 18px">${v.value}</span>
+    //               人`;
+    //         });
+
+    //         return html;
+    //       },
+    //       extraCssText:
+    //         "background: #ffffff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;",
+    //       // axisPointer: {
+    //       //     type: 'shadow',
+    //       //     shadowStyle: {
+    //       //         // color: '#ffffff',
+    //       //         shadowColor: 'rgba(225,225,225,1)',
+    //       //         shadowBlur: 5
+    //       //     }
+    //       // }
+    //     },
+    //     grid: {
+    //       left: "1%",
+    //       right: "5%",
+    //       top: "15%",
+    //       bottom: "5%",
+    //       containLabel: true,
+    //     },
+    //     dataZoom: [
+    //       // x轴进度条，x轴超过15条数据就会展示出来
+    //       {
+    //         type: "slider",
+    //         show: xAxisData.length > 5,
+    //         start: 0,
+    //         end: xAxisData.length > 5 ? 30 : 100, // 控制初始化时展示的百分比数量
+    //         height: 15,
+    //         left: "5%",
+    //         right: "5%",
+    //         bottom: "2%",
+    //         moveHandleSize: 0, //去掉进度条顶部的横向拉动进度条
+    //       },
+    //     ],
+    //     xAxis: [
+    //       {
+    //         type: "category",
+    //         axisTick: {
+    //           show: false,
+    //         },
+    //         axisLine: {
+    //           show: false,
+    //           lineStyle: {
+    //             type: "solid",
+    //             color: "#0000004d",
+    //           },
+    //         },
+    //         axisLabel: {
+    //           inside: false,
+    //           textStyle: {
+    //             color: "#000000", // x轴颜色
+    //             fontWeight: "normal",
+    //             fontSize: "14",
+    //             lineHeight: 22,
+    //           },
+    //         },
+
+    //         data: xAxisData,
+    //       },
+    //     ],
+    //     yAxis: [
+    //       {
+    //         type: "value",
+    //         name: "",
+    //         axisLabel: {
+    //           textStyle: {
+    //             color: "#000000",
+    //           },
+    //         },
+    //         nameTextStyle: {
+    //           color: "#000000",
+    //           fontSize: 12,
+    //           lineHeight: 40,
+    //           padding: [0, 0, 0, -20],
+    //         },
+    //         splitLine: {
+    //           show: true,
+    //           lineStyle: {
+    //             type: "solid",
+    //             color: "#0000004d",
+    //           },
+    //         },
+    //         axisLine: {
+    //           show: false,
+    //           lineStyle: {
+    //             type: "solid",
+    //             color: "#000000",
+    //           },
+    //         },
+    //         axisTick: {
+    //           show: false,
+    //         },
+    //       },
+    //     ],
+    //     series: [
+    //       {
+    //         name: legendItem[0],
+    //         type: "line",
+    //         smooth: false, //是否平滑
+    //         // showSymbol: false,/
+    //         symbolSize: 8,
+    //         zlevel: 3,
+    //         lineStyle: {
+    //           normal: {
+    //             color: color[0],
+    //             shadowBlur: 3,
+    //             shadowColor: hexToRgba(color[0], 0.5),
+    //             shadowOffsetY: 0,
+    //           },
+    //         },
+    //         areaStyle: {
+    //           normal: {
+    //             color: new this.$echarts.graphic.LinearGradient(
+    //               0,
+    //               0,
+    //               0,
+    //               1,
+    //               [
+    //                 {
+    //                   offset: 0,
+    //                   color: hexToRgba(color[0], 0.3),
+    //                 },
+    //                 {
+    //                   offset: 1,
+    //                   color: hexToRgba(color[0], 0.1),
+    //                 },
+    //               ],
+    //               false
+    //             ),
+    //             shadowColor: hexToRgba(color[0], 0.1),
+    //             shadowBlur: 10,
+    //           },
+    //         },
+    //         data: yAxisData1,
+    //       },
+    //     ],
+    //   };
+    //   chart.setOption(options);
+    // },
+  },
+};
+</script>
+      
+    
+    <style lang="less" scoped>
+.left {
+  padding-right: 15px;
+  margin-right: 5px;
+}
+.right {
+  padding-left: 15px;
+  margin-left: 5px;
+}
+.cben {
+  font-weight: bold;
+  span {
+    font-size: 20px;
+  }
+}
+.formItem {
+  margin: 0px 15px;
+}
+</style>

src/components/common/coreData.vue

@@ -9,8 +9,22 @@ export default {
     dataList: Array,
   },
   mounted() {
-    let clientWidth = Math.floor(100/this.dataList.length)-2+'%'
-    this.itemWidth = clientWidth;
+    this.resize();
+  },
+  methods: {
+    resize() {
+      let clientWidth = Math.floor(100 / this.dataList.length) - 2 + "%";
+      this.itemWidth = clientWidth;
+    },
+  },
+  watch: {
+    dataList: {
+      handler(newVal, oldVal) {
+        this.resize();
+      },
+      deep: true,
+      immediate: true,
+    },
   },
 };
 </script>
@@ -29,7 +43,7 @@ export default {
         <div class="coreData-item-title">{{ ele.title }}</div>
         <template v-if="ele.type === 1"> </template>
         <template v-else>
-          <div class="coreData-item-num">{{ ele.num }}</div>
+          <div class="coreData-item-num" v-html="ele.num"></div>
           <div class="coreData-item-unit" v-html="ele.unit"></div>
           <div class="coreData-item-history">
             <div class="coreData-item-historyDesc">

src/components/home/HomeAside.vue

@@ -22,8 +22,8 @@ export default {
   methods: {
     suitHeight(val) {
       this.$nextTick(() => {
-        let height = document.getElementsByClassName('home')[0].clientHeight
-        this.asideStyle = { height: `${height - 60}px` }
+        // let height = document.getElementsByClassName('home')[0].clientHeight
+        this.asideStyle = { height: `100%` }
         if (val)
           this.asideStyle.width = '60px'
       })

src/components/work/meeting/workMeeting.vue

@@ -10,49 +10,55 @@
       <a-col :span="18">
         <div class="left border-shadow">
           <card :title="'会议室管理'"></card>
-          <div class="fjfbt">
-            <timeline
-              v-bind="{
-                startTime: 8,
-                endTime: 17,
-                huiyiInfo: huiyiInfo,
-              }"
-            ></timeline>
-            <timeline
-              v-bind="{
-                startTime: 8,
-                endTime: 17,
-                huiyiInfo: huiyiInfo,
-              }"
-            ></timeline>
-            <timeline
-              v-bind="{
-                startTime: 8,
-                endTime: 17,
-                huiyiInfo: huiyiInfo,
-              }"
-            ></timeline>
-            <timeline
-              v-bind="{
-                startTime: 8,
-                endTime: 17,
-                huiyiInfo: huiyiInfo,
-              }"
-            ></timeline>
-            <timeline
-              v-bind="{
-                startTime: 8,
-                endTime: 17,
-                huiyiInfo: huiyiInfo,
-              }"
-            ></timeline>
-            <timeline
-              v-bind="{
-                startTime: 8,
-                endTime: 17,
-                huiyiInfo: huiyiInfo,
-              }"
-            ></timeline>
+          <div class="huiyi_ksh">
+            <div class="aside">
+              <a-menu
+                style="width: 100%"
+                :default-selected-keys="defaultSelectedKeys"
+                mode="inline"
+                @click="huiyiClick"
+              >
+                <!-- style="width: 100px" -->
+                <!-- :open-keys.sync="openKeys" -->
+                <a-menu-item v-for="(item, index) in tabsArr" :key="index + ''">
+                  {{ item.title }}
+                </a-menu-item>
+              </a-menu>
+            </div>
+            <div class="container">
+              <timeline
+                v-for="(item, index) in tabsItemArr"
+                :key="index"
+                v-bind="{
+                  startTime: 8,
+                  endTime: 17,
+                  huiyiInfo: item.shiyong,
+                }"
+                :style="{ height: '60px' }"
+              ></timeline>
+            </div>
+          </div>
+          <div class="huiyi_detailed">
+            <a-row>
+              <a-col :span="2" class="label"> 会议主题： </a-col>
+              <a-col :span="6">
+                <a-input></a-input>
+              </a-col>
+              <a-col :span="2" class="label"> 会议配置： </a-col>
+              <a-col :span="6">
+                <a-input></a-input>
+              </a-col>
+              <a-col :span="2" class="label"> 会议预约： </a-col>
+              <a-col :span="6">
+                <a-input></a-input>
+              </a-col>
+            </a-row>
+            <a-row>
+              <a-col :span="2" class="label"> 参会人员： </a-col>
+              <a-col :span="14"> </a-col>
+              <a-col :span="4"> 会议成本：30 元/小时 </a-col>
+              <a-col :span="4"> 会议费用：35 元/小时 </a-col>
+            </a-row>
           </div>
         </div>
       </a-col>
@@ -64,7 +70,7 @@
               <div
                 class="myChart"
                 ref="myChart2"
-                :style="{ height: '484px' }"
+                :style="{ height: '475px' }"
               ></div>
             </div>
           </card>
@@ -157,27 +163,347 @@ export default {
           content: "增加会议室",
         },
       ],
-      huiyiInfo: [
+      defaultSelectedKeys: ["0"],
+      tabsItemArr: [],
+      tabsArr: [
         {
-          name: "1",
-          startTime: "2023.08.01 08:40:00",
-          endTime: "2023.08.01 10:40:00",
+          title: "701",
+          focus: true,
+          content: [
+            {
+              date: "2023.08.01",
+              week: "周一",
+              shiyong: [
+                {
+                  name: "1",
+                  startTime: "2023.08.01 08:40:00",
+                  endTime: "2023.08.01 10:40:00",
+                },
+                {
+                  name: "2",
+                  startTime: "2023.08.01 12:25:00",
+                  endTime: "2023.08.01 13:42:00",
+                },
+                {
+                  name: "3",
+                  startTime: "2023.08.01 15:21:00",
+                  endTime: "2023.08.01 16:22:00",
+                },
+              ],
+            },
+            {
+              date: "2023.08.02",
+              week: "周二",
+              shiyong: [
+                {
+                  name: "1",
+                  startTime: "2023.08.01 08:40:00",
+                  endTime: "2023.08.01 10:40:00",
+                },
+                {
+                  name: "2",
+                  startTime: "2023.08.01 12:25:00",
+                  endTime: "2023.08.01 13:42:00",
+                },
+                {
+                  name: "3",
+                  startTime: "2023.08.01 15:21:00",
+                  endTime: "2023.08.01 16:22:00",
+                },
+              ],
+            },
+            {
+              date: "2023.08.03",
+              week: "周三",
+              shiyong: [
+                {
+                  name: "1",
+                  startTime: "2023.08.01 08:40:00",
+                  endTime: "2023.08.01 10:40:00",
+                },
+                {
+                  name: "2",
+                  startTime: "2023.08.01 12:25:00",
+                  endTime: "2023.08.01 13:42:00",
+                },
+                {
+                  name: "3",
+                  startTime: "2023.08.01 15:21:00",
+                  endTime: "2023.08.01 16:22:00",
+                },
+              ],
+            },
+            {
+              date: "2023.08.04",
+              week: "周四",
+              shiyong: [
+                {
+                  name: "1",
+                  startTime: "2023.08.01 08:40:00",
+                  endTime: "2023.08.01 10:40:00",
+                },
+                {
+                  name: "2",
+                  startTime: "2023.08.01 12:25:00",
+                  endTime: "2023.08.01 13:42:00",
+                },
+                {
+                  name: "3",
+                  startTime: "2023.08.01 15:21:00",
+                  endTime: "2023.08.01 16:22:00",
+                },
+              ],
+            },
+            {
+              date: "2023.08.05",
+              week: "周五",
+              shiyong: [
+                {
+                  name: "1",
+                  startTime: "2023.08.01 08:40:00",
+                  endTime: "2023.08.01 10:40:00",
+                },
+                {
+                  name: "2",
+                  startTime: "2023.08.01 12:25:00",
+                  endTime: "2023.08.01 13:42:00",
+                },
+                {
+                  name: "3",
+                  startTime: "2023.08.01 15:21:00",
+                  endTime: "2023.08.01 16:22:00",
+                },
+              ],
+            },
+          ],
         },
         {
-          name: "2",
-          startTime: "2023.08.01 12:25:00",
-          endTime: "2023.08.01 13:42:00",
+          title: "702",
+          focus: false,
+          content: [
+            {
+              date: "2023.08.01",
+              week: "周一",
+              shiyong: [
+                {
+                  name: "1",
+                  startTime: "2023.08.01 08:40:00",
+                  endTime: "2023.08.01 10:40:00",
+                },
+                {
+                  name: "2",
+                  startTime: "2023.08.01 12:25:00",
+                  endTime: "2023.08.01 13:42:00",
+                },
+                {
+                  name: "3",
+                  startTime: "2023.08.01 15:21:00",
+                  endTime: "2023.08.01 16:22:00",
+                },
+              ],
+            },
+            {
+              date: "2023.08.02",
+              week: "周二",
+              shiyong: [
+                {
+                  name: "1",
+                  startTime: "2023.08.01 08:40:00",
+                  endTime: "2023.08.01 10:40:00",
+                },
+                {
+                  name: "2",
+                  startTime: "2023.08.01 12:25:00",
+                  endTime: "2023.08.01 13:42:00",
+                },
+                {
+                  name: "3",
+                  startTime: "2023.08.01 15:21:00",
+                  endTime: "2023.08.01 16:22:00",
+                },
+              ],
+            },
+            {
+              date: "2023.08.03",
+              week: "周三",
+              shiyong: [
+                {
+                  name: "1",
+                  startTime: "2023.08.01 08:40:00",
+                  endTime: "2023.08.01 10:40:00",
+                },
+                {
+                  name: "2",
+                  startTime: "2023.08.01 12:25:00",
+                  endTime: "2023.08.01 13:42:00",
+                },
+                {
+                  name: "3",
+                  startTime: "2023.08.01 15:21:00",
+                  endTime: "2023.08.01 16:22:00",
+                },
+              ],
+            },
+            {
+              date: "2023.08.04",
+              week: "周四",
+              shiyong: [
+                {
+                  name: "1",
+                  startTime: "2023.08.01 08:40:00",
+                  endTime: "2023.08.01 10:40:00",
+                },
+                {
+                  name: "2",
+                  startTime: "2023.08.01 12:25:00",
+                  endTime: "2023.08.01 13:42:00",
+                },
+                {
+                  name: "3",
+                  startTime: "2023.08.01 15:21:00",
+                  endTime: "2023.08.01 16:22:00",
+                },
+              ],
+            },
+            {
+              date: "2023.08.05",
+              week: "周五",
+              shiyong: [
+                {
+                  name: "1",
+                  startTime: "2023.08.01 08:40:00",
+                  endTime: "2023.08.01 10:40:00",
+                },
+                {
+                  name: "2",
+                  startTime: "2023.08.01 12:25:00",
+                  endTime: "2023.08.01 13:42:00",
+                },
+                {
+                  name: "3",
+                  startTime: "2023.08.01 15:21:00",
+                  endTime: "2023.08.01 16:22:00",
+                },
+              ],
+            },
+          ],
         },
         {
-          name: "3",
-          startTime: "2023.08.01 15:21:00",
-          endTime: "2023.08.01 16:22:00",
+          title: "703",
+          content: [
+            {
+              date: "2023.08.01",
+              week: "周一",
+              shiyong: [
+                {
+                  name: "1",
+                  startTime: "2023.08.01 08:40:00",
+                  endTime: "2023.08.01 10:40:00",
+                },
+                {
+                  name: "2",
+                  startTime: "2023.08.01 12:25:00",
+                  endTime: "2023.08.01 13:42:00",
+                },
+                {
+                  name: "3",
+                  startTime: "2023.08.01 15:21:00",
+                  endTime: "2023.08.01 16:22:00",
+                },
+              ],
+            },
+            {
+              date: "2023.08.02",
+              week: "周二",
+              shiyong: [
+                {
+                  name: "1",
+                  startTime: "2023.08.01 08:40:00",
+                  endTime: "2023.08.01 10:40:00",
+                },
+                {
+                  name: "2",
+                  startTime: "2023.08.01 12:25:00",
+                  endTime: "2023.08.01 13:42:00",
+                },
+                {
+                  name: "3",
+                  startTime: "2023.08.01 15:21:00",
+                  endTime: "2023.08.01 16:22:00",
+                },
+              ],
+            },
+            {
+              date: "2023.08.03",
+              week: "周三",
+              shiyong: [
+                {
+                  name: "1",
+                  startTime: "2023.08.01 08:40:00",
+                  endTime: "2023.08.01 10:40:00",
+                },
+                {
+                  name: "2",
+                  startTime: "2023.08.01 12:25:00",
+                  endTime: "2023.08.01 13:42:00",
+                },
+                {
+                  name: "3",
+                  startTime: "2023.08.01 15:21:00",
+                  endTime: "2023.08.01 16:22:00",
+                },
+              ],
+            },
+            {
+              date: "2023.08.04",
+              week: "周四",
+              shiyong: [
+                {
+                  name: "1",
+                  startTime: "2023.08.01 08:40:00",
+                  endTime: "2023.08.01 10:40:00",
+                },
+                {
+                  name: "2",
+                  startTime: "2023.08.01 12:25:00",
+                  endTime: "2023.08.01 13:42:00",
+                },
+                {
+                  name: "3",
+                  startTime: "2023.08.01 15:21:00",
+                  endTime: "2023.08.01 16:22:00",
+                },
+              ],
+            },
+            {
+              date: "2023.08.05",
+              week: "周五",
+              shiyong: [
+                {
+                  name: "1",
+                  startTime: "2023.08.01 08:40:00",
+                  endTime: "2023.08.01 10:40:00",
+                },
+                {
+                  name: "2",
+                  startTime: "2023.08.01 12:25:00",
+                  endTime: "2023.08.01 13:42:00",
+                },
+                {
+                  name: "3",
+                  startTime: "2023.08.01 15:21:00",
+                  endTime: "2023.08.01 16:22:00",
+                },
+              ],
+            },
+          ],
         },
       ],
     };
   },
   mounted() {
     this.setEchart2();
+    this.changeTab(0);
   },
   methods: {
     handleChange(value) {
@@ -186,6 +512,12 @@ export default {
     getTimeRange() {
       this.$refs.timeRange.getTimeRange(); // 获取时间段
     },
+    huiyiClick(e) {
+      this.changeTab(e.key);
+    },
+    changeTab(index) {
+      this.tabsItemArr = this.tabsArr[index].content;
+    },
     setEchart1() {},
     setEchart2() {
       let that = this;
@@ -422,8 +754,33 @@ export default {
   }
 }
 
-.fjfbt {
-  width: 100%;
-  height: 60px;
+.huiyi_ksh {
+  height: 300px;
+  .aside {
+    width: 100px;
+    height: 100%;
+    margin-right: 5px;
+    display: inline-block;
+    overflow: hidden;
+    overflow-y: auto;
+  }
+  .container {
+    width: calc(100% - 100px - 5px);
+    height: 100%;
+    display: inline-block;
+    vertical-align: top;
+    overflow: hidden;
+    overflow-y: auto;
+  }
+}
+.huiyi_detailed {
+  height: 205px;
+  .ant-row {
+    height: 60px;
+    line-height: 60px;
+    .label {
+      text-align: right;
+    }
+  }
 }
 </style>

src/data/json/menuList.json

@@ -104,17 +104,22 @@
   },
   {
     "name": "智慧运营",
-    "router": "",
+    "router": "/business",
     "icon": "",
     "children": [
+      {
+        "name": "资产管理",
+        "router": "/business/asset",
+        "icon": ""
+      },
       {
         "name": "空间管理",
-        "router": "",
+        "router": "/business/space",
         "icon": ""
       },
       {
         "name": "能源管理",
-        "router": "",
+        "router": "/business/analysis",
         "icon": ""
       }
     ]

src/router/index.js

@@ -132,7 +132,32 @@ const router = new VueRouter({
             },
           ]
         },
-
+        {
+          path: '/business',
+          name: 'business',
+          meta: {breadcrumb: '智慧运营'},
+          component: () => import('@/components/business/business.vue'),
+          children: [
+            {
+              path: '/business/asset',
+              name: 'businessAsset',
+              meta: {breadcrumb: '资产管理'},
+              component: () => import('@/components/business/asset/asset.vue'),
+            },
+            {
+              path: '/business/space',
+              name: 'businessSpace',
+              meta: {breadcrumb: '空间管理'},
+              component: () => import('@/components/business/space/space.vue'),
+            },
+            {
+              path: '/business/analysis',
+              name: 'businessAnalysis',
+              meta: {breadcrumb: '运营分析'},
+              component: () => import('@/components/business/analysis/analysis.vue'),
+            }
+          ]
+        },
       ],
     },
     {