Merge branch 'master' of http://39.105.126.192:3000/DR3_web/iot-front-ui.git

src/api/dashboard.js

@@ -0,0 +1,15 @@
+import Request from "@/utils/request";
+// 获取人员核心指标
+const getPersonCoreData = (startDate, endDate) => {
+    return Request.post('/personnel/getPersonnelInfoCount', {
+        startDate: startDate,
+        endDate: endDate
+    })
+}
+// 获取人员统计信息
+const getPersonEnterSummary = (startDate, endDate) => {
+    return Request.post('/personnel/getPersonnelInfoList', {
+        startDate: startDate,
+        endDate: endDate
+    })
+}

src/components/common/card.vue

@@ -1,7 +1,10 @@
 <template>
-  <div>
+  <div class="ioc-card">
     <div class="card_title">
-      {{ title }}
+      <slot name="title">{{ title }}</slot>
+      <span style="float: right">
+        <slot name="title-extra"></slot>
+      </span>
     </div>
     <slot></slot>
   </div>
@@ -19,13 +22,15 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.card_title {
-  padding-left: 10px;
-  height: 20px;
-  line-height: 20px;
-  margin: 10px 0px;
-  font-size: 16px;
-  font-weight: bold;
-  border-left: 8px solid #98d4f3;
+.ioc-card {
+  .card_title {
+    padding: 10px 0px 10px 15px;
+    //height: 20px;
+    //line-height: 20px;
+    font-size: 16px;
+    font-weight: bold;
+    //border-left: 8px solid #98d4f3;
+  }
 }
+
 </style>

src/components/dashboard/Dashboard.vue

@@ -1,31 +1,67 @@
 <template>
-  <div class="iot-dashboard">
-    <div class="iot-usually-function">
-      <IotFunction :title="'智慧办公'" :desc="'iot work'" ></IotFunction>
-    </div>
-    <DataSituation :title="'停车态势'"
-                   :percent="0.7"
-                   :total-num="1000"
-                   :total-title="'总车位'"
-                   :unit="'个'"
-                   :used-num="300"
-                   :used-title="'已使用'"
-    ></DataSituation>
+  <div class="ioc-dashboard">
+    <a-row>
+      <a-col :span="18">
+        <!--常用功能-->
+        <div class="dashboard-popFunc">
+          <IocCard title="常用功能">
+            <template #title-extra>
+              <a-button type="link" style="color: #C6C8CC;font-size: 12px">
+                功能管理
+                <a-icon type="right"></a-icon>
+              </a-button>
+            </template>
+            <a-row>
+              <a-col v-for="(item, index) in commonMenu" :span="6" :key="index">
+                <IocFunction :title="'智慧餐厅'" :icon="require('@/assets/images/function/iocRestaurant.png')"></IocFunction>
+              </a-col>
+            </a-row>
+          </IocCard>
+        </div>
+      </a-col>
+      <a-col :span="6">
+        <div class="dashboard-msg">
+          <DashboardMessageCard  ></DashboardMessageCard>
+        </div>
+      </a-col>
+    </a-row>
+    <a-row>
+      <a-col :span="18">
+        <div class="dashboard-summary">
+          <DashboardPortrait ></DashboardPortrait>
+        </div>
+      </a-col>
+      <a-col :span="6">
+        <div class="dashboard-more">
+          <DashboardMore></DashboardMore>
+        </div>
+      </a-col>
+    </a-row>
   </div>
 </template>
 
 <script>
-import IotFunction from "@/components/dashboard/Function.vue";
-import DataSituation from "@/components/dashboard/DataSituation.vue";
+import IocCard from "@/components/common/card.vue";
+import IocFunction from "@/components/dashboard/Function.vue";
+import DataSituation from "@/components/dashboard/more/space/DataSituation.vue";
+import DashboardMessageCard from "@/components/dashboard/DashboardMessageCard.vue";
+import DashboardPortrait from "@/components/dashboard/dashboardPortrait.vue";
+import DashboardMore from "@/components/dashboard/more/dashboardMore.vue";
+
+
 export default {
   data() {
     return {
-
+      commonMenu: [{},{},{},{},{},{},{},{}]
     }
   },
   components: {
-    IotFunction,
-    DataSituation
+    IocCard,
+    IocFunction,
+    DataSituation,
+    DashboardMessageCard,
+    DashboardPortrait,
+    DashboardMore,
   },
   created() {
   },
@@ -36,5 +72,31 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.ioc-dashboard {
+  width: 100%;
+  height: 100%;
+  padding: 0 15px 15px;
+  background-color: #f0f2f5;
+  overflow-y: auto;
+  .dashboard-popFunc {
+    margin-right: 15px;
+    margin-top: 12px;
+    height: 220px;
+    background-color: white;
+  }
+  .dashboard-msg {
+    height: 220px;
+    background-color: white;
+  }
+  .dashboard-summary {
+    background-color: white;
+    margin-right: 15px;
+    margin-top: 12px;
+    height: 765px;
+  }
+  .dashboard-more {
+    height: 765px;
 
+  }
+}
 </style>

src/components/dashboard/DashboardMessageCard.vue

@@ -0,0 +1,81 @@
+<script>
+import DashboardMsgList from "@/components/dashboard/message/dashboardMsgList.vue";
+export default {
+  data() {
+    return {
+      msgList: [
+        {
+          isRead: true,
+          type: 1,
+          msg: '1903照明设备损坏'
+        },{
+          isRead: true,
+          type: 2,
+          msg: '1903照明设备损坏1903照明设备损坏1903照明设备损坏1903照明设备损坏1903照明设备损坏1903照明设备损坏'
+        },{
+          isRead: false,
+          type: 3,
+          msg: '1903照明设备损坏'
+        },{
+          isRead: true,
+          msg: '1903照明设备损坏'
+        }
+      ]
+    }
+  },
+  components: {
+    DashboardMsgList
+  },
+  mounted() {
+  },
+  methods: {
+    callback(key) {
+    },
+  }
+}
+</script>
+
+<template>
+  <div class="ioc-dashboard-msg">
+    <a-tabs default-active-key="1" @change="callback">
+      <a-tab-pane key="1" tab="全部消息">
+        <DashboardMsgList :data="msgList"></DashboardMsgList>
+      </a-tab-pane>
+      <a-tab-pane key="2" tab="待阅" force-render>
+        <DashboardMsgList></DashboardMsgList>
+      </a-tab-pane>
+      <a-tab-pane key="3" tab="已阅">
+        <DashboardMsgList></DashboardMsgList>
+      </a-tab-pane>
+    </a-tabs>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.ioc-dashboard-msg {
+  padding-left: 5%;
+  margin-top: 12px;
+  width: 100%;
+  height: 100px;
+
+}
+</style>
+
+<style lang="less">
+.ioc-dashboard-msg {
+  .ant-tabs-ink-bar {
+    visibility: hidden;
+  }
+  .ant-tabs-nav {
+    color: #B3B3B3;
+    margin-right: 5px !important;
+  }
+  .ant-tabs-nav .ant-tabs-tab {
+    margin: 0;
+  }
+  .ant-tabs-nav .ant-tabs-tab-active {
+    color: #333333;
+  }
+}
+</style>
+

src/components/dashboard/Function.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="function-btn" :style="functionBtnStyle">
+    <div class="function-icon">
+      <a-avatar class="function-avatar" shape="square" size="large" :src="icon"></a-avatar>
+    </div>
     <div class="function-title">{{ title }}</div>
-    <div class="function-desc">{{ desc }}</div>
     <div class="function-btn-remove" v-if="type===-1">
       减
     </div>
@@ -24,13 +26,9 @@ export default {
   props: {
     type: Number,
     title: String,
-    desc: String,
-    bg: String,
+    icon: String,
   },
   mounted() {
-    if (this.bg) {
-      this.functionBtnStyle.backgroundImage = "url(" + this.bg + ")"
-    }
 
   },
 }
@@ -38,29 +36,30 @@ export default {
 
 <style lang="less" scoped>
 .function-btn {
-  width: 190px;
-  padding-left: 10px;
-  margin: 20px 30px;
-  height: 75px;
-  border: 1px solid #cacaca;
+  width: 95%;
+  height: 70px;
+  margin: 1% 2%;
   border-radius: 8px;
   line-height: 30px;
-  background-size: auto 90px;
-  background-repeat: no-repeat;
-  background-position-y: 20px;
-  background-position-x: 133px;
   position: relative;
+  cursor: pointer;
+  .function-icon {
+    margin-left: 10%;
+    margin-top: 10px;
+    display: inline-block;
+    .function-avatar {
+      width: 50px;
+      height: 50px;
+    }
+  }
   .function-title {
-    margin-top: 12px;
+    display: inline-block;
+    margin-top: 20px;
+    margin-left: 5%;
     font-size: 16px;
     line-height: 24px;
     letter-spacing: 1px;
   }
-  .function-desc {
-    margin-top: 1px;
-    color: #9a9a9a;
-    font-size: 12px;
-  }
   .function-btn-remove {
     position: absolute;
     top: -15px;
@@ -72,4 +71,7 @@ export default {
     right: -10px;
   }
 }
+.function-btn:hover {
+  background-color: #F2F9FF;
+}
 </style>

src/components/dashboard/dashboardPortrait.vue

@@ -0,0 +1,124 @@
+<script>
+import Card from "@/components/common/card.vue";
+import PersonPortrait from "@/components/dashboard/portrait/personPortrait.vue";
+import RestaurantPortrait from "@/components/dashboard/portrait/restaurantPortrait.vue";
+import SupermarketPortrait from "@/components/dashboard/portrait/supermarketPortrait.vue";
+import ElectricityPortrait from "@/components/dashboard/portrait/electricityPortrait.vue";
+import WaterPortrait from "@/components/dashboard/portrait/waterPortrait.vue";
+import HotPortrait from "@/components/dashboard/portrait/hotPortrait.vue";
+import ColdPortrait from "@/components/dashboard/portrait/coldPortrait.vue";
+import MoneyPortrait from "@/components/dashboard/portrait/moneyPortrait.vue";
+
+export default {
+  data() {
+    return {
+      chartHeight: 490,
+      currCheck: 'person',
+      tagCheck: {
+        person: true,
+        restaurant: false,
+        supermarket: false,
+        electricity: false,
+        water: false,
+        hot: false,
+        cold: false,
+        money: false,
+      }
+    }
+  },
+  components: {
+    Card,
+    PersonPortrait,
+    RestaurantPortrait,
+    SupermarketPortrait,
+    ElectricityPortrait,
+    WaterPortrait,
+    HotPortrait,
+    ColdPortrait,
+    MoneyPortrait,
+  },
+  methods: {
+    handleTagSelect(item) {
+      for (const key in this.tagCheck) {
+        this.tagCheck[key] = false;
+      }
+      this.currCheck = item;
+      this.tagCheck[item] = true;
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="dashboardPortrait">
+    <Card title="统计画像">
+      <div style="width: 97%;margin: 0 auto">
+        <a-divider style="margin: 10px 0;padding: 0;"></a-divider>
+      </div>
+      <div class="dashboardPortrait-select">
+        <a-checkable-tag v-model="tagCheck.person" color="white" class="dashboardPortrait-select-tag" @change="handleTagSelect('person')">
+          <span class="dashboardPortrait-select-text">人员</span>
+        </a-checkable-tag>
+        <a-checkable-tag v-model="tagCheck.restaurant" color="white" class="dashboardPortrait-select-tag" @change="handleTagSelect('restaurant')">
+          <span class="dashboardPortrait-select-text">餐厅</span>
+        </a-checkable-tag>
+        <a-checkable-tag v-model="tagCheck.supermarket" color="white" class="dashboardPortrait-select-tag" @change="handleTagSelect('supermarket')">
+          <span class="dashboardPortrait-select-text">商超</span>
+        </a-checkable-tag>
+        <a-checkable-tag v-model="tagCheck.electricity" color="white" class="dashboardPortrait-select-tag" @change="handleTagSelect('electricity')">
+          <span class="dashboardPortrait-select-text">用电</span>
+        </a-checkable-tag>
+        <a-checkable-tag v-model="tagCheck.water" color="white" class="dashboardPortrait-select-tag" @change="handleTagSelect('water')">
+          <span class="dashboardPortrait-select-text">用水</span>
+        </a-checkable-tag>
+        <a-checkable-tag v-model="tagCheck.hot" color="white" class="dashboardPortrait-select-tag" @change="handleTagSelect('hot')">
+          <span class="dashboardPortrait-select-text">用热</span>
+        </a-checkable-tag>
+        <a-checkable-tag v-model="tagCheck.cold" color="white" class="dashboardPortrait-select-tag" @change="handleTagSelect('cold')">
+          <span class="dashboardPortrait-select-text">用冷</span>
+        </a-checkable-tag>
+        <a-checkable-tag v-model="tagCheck.money" color="white" class="dashboardPortrait-select-tag" @change="handleTagSelect('money')">
+          <span class="dashboardPortrait-select-text">资产</span>
+        </a-checkable-tag>
+      </div>
+      <div class="dashboardPortrait-body">
+        <PersonPortrait :chartHeight="chartHeight" v-if="currCheck==='person'"></PersonPortrait>
+        <RestaurantPortrait :chartHeight="chartHeight" v-if="currCheck==='restaurant'"></RestaurantPortrait>
+        <SupermarketPortrait :chartHeight="chartHeight" v-if="currCheck==='supermarket'"></SupermarketPortrait>
+        <ElectricityPortrait :chartHeight="chartHeight" v-if="currCheck==='electricity'"></ElectricityPortrait>
+        <WaterPortrait :chartHeight="chartHeight" v-if="currCheck==='water'"></WaterPortrait>
+        <HotPortrait :chartHeight="chartHeight" v-if="currCheck==='hot'"></HotPortrait>
+        <ColdPortrait :chartHeight="chartHeight" v-if="currCheck==='cold'"></ColdPortrait>
+        <MoneyPortrait :chartHeight="chartHeight" v-if="currCheck==='money'"></MoneyPortrait>
+      </div>
+    </Card>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.dashboardPortrait {
+  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/data/restaurant.js

@@ -0,0 +1,3 @@
+const supermarketTrendData = [
+
+]

src/components/dashboard/message/dashboardMsgList.vue

@@ -0,0 +1,68 @@
+<script>
+export default {
+  data() {
+    return {
+      contentWidth: '70%'
+    }
+  },
+  props: {
+    data: Array
+  },
+  mounted() {
+    let width = this.$refs.dashboardMsgList.$el.clientWidth
+    this.contentWidth = (width-100)+'px'
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<template>
+  <a-list class="dashboardMsgList" item-layout="horizontal" :data-source="data" :split="false" ref="dashboardMsgList">
+    <a-list-item slot="renderItem" slot-scope="item, index">
+      <div class="msg-read">
+        <span v-if="item.isRead">【已阅】</span>
+        <span v-else>【待阅】</span>
+      </div>
+      <div class="msg-type">
+        <span v-if="item.type==1" style="color: #5495F1">①</span>
+        <span v-else-if="item.type==2" style="color: #3BC5B0">②</span>
+        <span v-else-if="item.type==3" style="color: #F1934E">③</span>
+      </div>
+      <div class="msg-content" :style="{width: contentWidth}">
+        <span class="msg-content-span" :style="{width: contentWidth}">{{item.msg}}</span>
+      </div>
+    </a-list-item>
+  </a-list>
+</template>
+
+<style lang="less" scoped>
+.dashboardMsgList {
+  .ant-list-item {
+    padding: 0 !important;
+    line-height: 30px;
+    justify-content: left;
+  }
+  .msg-read {
+    display: inline-block;
+    width: 60px;
+    flex-direction: row;
+  }
+  .msg-type {
+    display: inline-block;
+    width: 20px;
+    flex-direction: row;
+    text-align: left;
+  }
+  .msg-content {
+    .msg-content-span {
+      vertical-align: top;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      display: inline-block;
+    }
+  }
+}
+</style>

src/components/dashboard/more/carbonOverviewChart.vue

@@ -0,0 +1,109 @@
+<script>
+import Card from "@/components/common/card.vue";
+export default {
+  data() {
+    return {
+      height: 180
+    }
+  },
+  components: {
+    Card
+  },
+  mounted() {
+    this.$nextTick(()=>{
+      this.init()
+    })
+  },
+  methods: {
+    init() {
+      let chart = this.$echarts.init(this.$refs.myChart);
+      let options = {
+        color: ['#6DA6F5','#A29DF8'],
+        legend: {
+          data: [
+            '碳配额',
+            '已消耗',
+          ]
+        },
+        grid: {
+          left: '2%', //默认10%
+          right: '2%', //默认10%
+          bottom: '0%', //默认60
+          top: '15%',
+          containLabel: true
+          //grid区域是否包含坐标轴的刻度标签
+        },
+        xAxis: {
+          type: 'category',
+          data: ['上分', '广分', '郑分', '规划', '总部']
+        },
+        yAxis: [
+          {
+            type: 'value',
+            nameTextStyle: {
+              padding: [10, 0, 10, -20]
+            },
+          },
+        ],
+        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',
+            stack: 'A',
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            }
+          },
+          {
+            name: '已消耗',
+            data: [120, 300, 240, 250, 50],
+            type: 'bar',
+            stack: 'A',
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            }
+          },
+        ]
+      };
+      chart.setOption(options);
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="dMore-carbonOverview">
+    <Card title="碳配额">
+      <div style="padding: 0 15px">
+        <div class="myChart" ref="myChart" :style="{height: height+'px'}">
+
+        </div>
+      </div>
+    </Card>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.dMore-carbonOverview {
+
+}
+</style>

src/components/dashboard/more/dashboardMore.vue

@@ -0,0 +1,74 @@
+<script>
+import Card from "@/components/common/card.vue";
+import FloorOverview from "@/components/dashboard/more/floorOverview.vue";
+import SpaceOverview from "@/components/dashboard/more/spaceOverview.vue";
+import CarbonOverviewChart from "@/components/dashboard/more/carbonOverviewChart.vue";
+import PvPowerChart from "@/components/dashboard/more/pvPowerChart.vue";
+export default {
+  data() {
+    return {
+      showPv: false,
+    }
+  },
+  components: {
+    Card,
+    FloorOverview,
+    SpaceOverview,
+    CarbonOverviewChart,
+    PvPowerChart,
+  },
+  mounted() {
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<template>
+  <div class="dashboard-more">
+    <!--楼层概览-->
+    <div class="dashboard-floorOverflow">
+      <FloorOverview :show-pv.sync="showPv" ></FloorOverview>
+      <div style="width: 90%;margin: 0 auto;">
+        <a-divider style="margin: 10px 0 0;padding: 0;"></a-divider>
+      </div>
+    </div>
+    <!--空间概览-->
+    <div class="dashboard-spaceOverflow" v-if="!showPv">
+      <SpaceOverview></SpaceOverview>
+      <div style="width: 90%;margin: 0 auto;">
+        <a-divider style="margin: 10px 0 0;padding: 0;"></a-divider>
+      </div>
+    </div>
+    <!--碳配额概览-->
+    <div class="dashboard-carbonOverflow" v-if="!showPv">
+      <CarbonOverviewChart></CarbonOverviewChart>
+    </div>
+    <!--光伏发电概览-->
+    <div class="dashboard-lightOverflow" v-if="showPv">
+      <PvPowerChart></PvPowerChart>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.dashboard-more {
+  background-color: white;
+  margin-top: 12px;
+  height: 740px;
+  //padding: 0 8px;
+  .dashboard-floorOverflow {
+    width: 100%;
+    height: auto;
+  }
+  .dashboard-spaceOverflow {
+    width: 100%;
+    height: auto;
+  }
+  .dashboard-carbonOverflow {
+    width: 100%;
+    height: auto;
+  }
+}
+</style>

src/components/dashboard/more/floorOverview.vue

@@ -0,0 +1,86 @@
+<script>
+import Card from "@/components/common/card.vue";
+export default {
+  data() {
+    return {
+
+    }
+  },
+  emits: ['update:showPv'],
+  setup(props, context) {
+    const methods = {
+      toggleShow() {
+        const val = !props.showPv
+        context.emit('update:showPv', val)
+      },
+    }
+    return methods
+  },
+  props: {
+    showPv: Boolean,
+    change: Function
+  },
+  components: {
+    Card
+  }
+}
+</script>
+
+<template>
+  <div class="dMore-floorOverview">
+    <Card >
+      <template #title>
+        <span>楼宇概览</span>
+      </template>
+      <template #title-extra>
+        <a-button type="link" style="color: #C6C8CC;font-size: 12px;height: 20px;" @click="toggleShow">
+          <span style="line-height: 20px">切换</span>
+          <a-icon type="right"></a-icon>
+        </a-button>
+      </template>
+      <a-row>
+        <a-col :span="12">
+          <a-statistic class="overflowItem" title="建筑面积 (m²)" :value="112893" />
+        </a-col>
+        <a-col :span="12">
+          <a-statistic class="overflowItem" title="建筑层数" :value="112893" />
+        </a-col>
+      </a-row>
+
+      <a-row>
+        <a-col :span="12">
+          <a-statistic class="overflowItem" title="已使用年限" :value="112893" />
+        </a-col>
+        <a-col :span="12">
+          <a-statistic class="overflowItem" title="建筑年限" :value="112893" />
+        </a-col>
+      </a-row>
+
+    </Card>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.dMore-floorOverview {
+  .overflowItem {
+    display: inline-block;
+    width: 70%;
+    padding: 2% 0;
+    text-align: center;
+    margin-left: 20%;
+  }
+}
+</style>
+
+<style lang="less">
+.dashboard-more {
+  .ioc-card {
+    margin-top: 0;
+    padding: 0;
+  }
+  .card_title {
+    margin-top: 0;
+    padding: 0;
+  }
+}
+</style>

src/components/dashboard/more/pv/pvPowerProfitChart.vue

@@ -0,0 +1,58 @@
+<script>
+export default {
+  data() {
+    return {}
+  },
+  props: {
+    height: Number,
+  },
+  mounted() {
+    this.$nextTick(()=>{
+      this.initChart()
+    })
+  },
+  methods: {
+    initChart() {
+      let chart = this.$echarts.init(this.$refs.myChart)
+      let option = {
+        color: ['#80D4FF', '#FFDF80'],
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          bottom: '8%',
+          left: 'center',
+          icon: 'circle'
+        },
+        series: [
+          {
+            name: '金额',
+            type: 'pie',
+            center: ['50%','40%'],
+            data: [
+              { value: 1048, name: '补贴金额' },
+              { value: 735, name: '节约金额' },
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      };
+      chart.setOption(option)
+    }
+  }
+}
+</script>
+
+<template>
+  <div style="width: 100%" :style="{height: height+'px'}" ref="myChart"></div>
+</template>
+
+<style lang="less" scoped>
+
+</style>

src/components/dashboard/more/pv/pvPowerSummaryChart.vue

@@ -0,0 +1,111 @@
+<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: '20%', //默认60
+          top: '20%',
+          containLabel: true
+          //grid区域是否包含坐标轴的刻度标签
+        },
+        xAxis: {
+          data: ['0:00-4:00', '4:00-8:00', '8:00-12:00', '12:00-16:00', '16:00-20:00', '20:00-24:00']
+        },
+        yAxis: [
+          {
+            name: '电量(kWh)',
+            type: 'value',
+            nameTextStyle: {
+              padding: [10, 0, 10, 0]
+            },
+          },
+        ],
+        dataZoom: [
+          {
+            start: 0,
+            end: 100,
+            height: 12,
+          }
+        ],
+        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: [169, 165, 229, 152, 158, 172],
+            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,
+            },
+            itemStyle: {
+              color: '#62CC97'
+            },
+            emphasis: {
+              scale:1.5
+            }
+          },
+        ]
+      };
+      //Object.assign(defaultOption, this.option)
+      chart.setOption(defaultOption)
+    }
+  }
+}
+</script>
+
+<template>
+  <div style="width: 90%;margin: 0 auto" :style="{height: height+'px'}" ref="myChart"></div>
+</template>
+
+<style lang="less" scoped>
+
+</style>

src/components/dashboard/more/pvPowerChart.vue

@@ -0,0 +1,34 @@
+<script>
+import Card from "@/components/common/card.vue";
+import PvPowerSummaryChart from "@/components/dashboard/more/pv/pvPowerSummaryChart.vue";
+import PvPowerProfitChart from "@/components/dashboard/more/pv/pvPowerProfitChart.vue";
+
+export default {
+  data() {
+    return {}
+  },
+  components: {
+    Card,
+    PvPowerSummaryChart,
+    PvPowerProfitChart,
+  }
+}
+</script>
+
+<template>
+  <div class="dashboard-pvPower">
+    <Card title="光伏发电量">
+      <PvPowerSummaryChart :height="230"></PvPowerSummaryChart>
+    </Card>
+
+    <Card title="光伏盈利">
+      <div style="width: 90%;margin: 0 auto;padding: 15px">
+        <PvPowerProfitChart :height="230"></PvPowerProfitChart>
+      </div>
+    </Card>
+  </div>
+</template>
+
+<style lang="less" scoped>
+
+</style>

src/components/dashboard/DataSituation.vue → src/components/dashboard/more/space/DataSituation.vue

@@ -1,19 +1,17 @@
 <template>
   <div class="dataSituation">
     <div class="dataSituation-title">{{ title }}</div>
-    <div class="dataSituation-canvas-border">
-      <div class="dataSituation-canvas-circle"></div>
-      <div ref="dataSituation-canvas" style="width: 100px;height:100px;margin: 0 auto"></div>
+    <div class="dataSituation-canvas-border" :style="{height: circleHeight+'px'}">
+      <div class="dataSituation-canvas-circle" :style="{height: circleBgHeight+'px',backgroundImage:'url('+circleBg+')'}"></div>
+      <div ref="dataSituation-canvas" class="dataSituation-canvas" :style="{height: canvasHeight+'px'}"></div>
     </div>
     <div class="dataSituation-detail-label">{{ totalTitle }}</div>
     <div class="dataSituation-detail">
       <div class="dataSituation-detail-num">{{ totalNum }}</div>
-      <div class="dataSituation-detail-unit">{{ unit }}</div>
     </div>
     <div class="dataSituation-detail-label">{{ usedTitle }}</div>
     <div class="dataSituation-detail">
       <div class="dataSituation-detail-num">{{ usedNum }}</div>
-      <div class="dataSituation-detail-unit">{{ unit }}</div>
     </div>
   </div>
 </template>
@@ -21,12 +19,38 @@
 <script>
 import 'echarts-liquidfill'
 
+import yellowCircle from '@/assets/images/dashboard/circleWorkBg.png'
+import blueCircle from '@/assets/images/dashboard/circleMeetingBg.png'
+import greenCircle from '@/assets/images/dashboard/circleParkingBg.png'
+
 export default {
   data() {
     return {
+      circleBg: blueCircle,
+      circleHeight: 90,
+      circleBgHeight: 0,
+      canvasHeight: 0,
+      colors: {
+        blue: {
+          value: '#00AAFF',
+          circle: blueCircle,
+        },
+        green: {
+          value: '#3CC7B2',
+          circle: greenCircle,
+        },
+        yellow: {
+          value: '#F6A870',
+          circle: yellowCircle,
+        },
+      }
     }
   },
   props: {
+    color: {
+      type: String,
+      default: 'blue'
+    },
     title: {
       type: String,
       default: '态势'
@@ -35,10 +59,6 @@ export default {
       type: Number,
       default: 0
     },
-    unit: {
-      type: String,
-      default: '个'
-    },
     totalTitle: {
       type: String,
       default: '总数量'
@@ -66,30 +86,40 @@ export default {
   created() {
   },
   mounted() {
-    this.initChart(this.percent)
+    let width = document.getElementsByClassName("dataSituation-canvas-border")[0].clientWidth;
+    this.circleHeight = Number(width);
+    this.circleBgHeight = width*0.82
+    this.canvasHeight = width*0.75
+    this.$forceUpdate()
+    this.$nextTick(()=>{
+      this.circleBg = this.colors[this.color].circle
+      this.initChart(this.percent)
+    })
+
   },
   methods: {
     initChart(num) {
       let echarts = this.$echarts.init(this.$refs['dataSituation-canvas'])
-      let primaryColor = '#4c82ff';
+      let primaryColor = this.colors[this.color].value;
       let option = {
         series: [{
           type: 'liquidFill',
           data: [num],
           color: [primaryColor],
-          radius: '95%',
+          radius: '80%',
           animationDuration: 800,
           animationDurationUpdate: 500,
-          waveLength: '70%',
+          amplitude: '5%',
+          waveLength: '50%',
           label: {
             show: true,
             color: primaryColor,
             insideColor: 'white',
-            fontSize: 24,
+            fontSize: 14,
             fontWeight: 'normal',
             align: 'center',
             baseline: 'middle',
-            position: ['50%', '65%']
+            position: ['50%', '55%']
           },
           itemStyle: {
             opacity: 1,
@@ -101,14 +131,7 @@ export default {
             }
           },
           outline: {
-            show: true,
-            borderDistance: 12,
-            itemStyle: {
-              color: 'white',
-              borderColor: 'white',
-              borderWidth: 0,
-              shadowBlur: 0,
-            }
+            show: false,
           }
         }],
       };
@@ -122,48 +145,55 @@ export default {
 .dataSituation {
   display: inline-block;
   margin: 5px 10px;
-  width: 150px;
+  width: 100%;
+  padding: 0 2%;
+  //min-width: 70px;
   height: auto;
-  border: 1px solid #f2f7ff;
+  min-height: 120px;
+  background-color: #f7fcff;
+  border: 1px solid #f8ffff;
   .dataSituation-title {
-    font-weight: bold;
-    font-size: 22px;
+    line-height: 36px;
+    font-size: 14px;
     text-align: center;
+    color: #B2B2B2;
   }
   .dataSituation-canvas-border {
-    width: 120px;
-    height: 120px;
-    margin: 12px auto;
+    width: 85%;
+    margin: 5% auto;
     position: relative;
+    .dataSituation-canvas {
+      width: 75%;
+      margin: 0 auto;
+      position: absolute;
+      top: 4%;
+      left: 12%;
+    }
     .dataSituation-canvas-circle {
-      width: 110px;
-      height: 110px;
-      padding: 5px;
+      width: 82%;
+      margin: 0 auto;
+      //padding: 5px;
       border-radius: 50%;
-      background: conic-gradient(#c4d5ff,@primary-color, #7ba3ff, #7ba3ff, #7ba3ff, #98b7ff, #d4e1ff, #e2ebff, #e2ebff, white, white, white, white, white);
+      background-size: 100% 100%;
       animation: roate 3s infinite linear;
     }
-    #canvas {
-      position: absolute;
-      top: 5px;
-      left: 5px;
-    }
 
   }
   .dataSituation-detail-label {
-    margin-left: 15px;
+    text-align: center;
     font-weight: bold;
-    font-size: 14px;
+    font-size: 12px;
+    color: #B2B2B2;
   }
   .dataSituation-detail {
     margin: 5px 15px;
-    padding: 3px 5px;
-    background-color: #f2f7ff;
+    padding: 0px 2px;
+    text-align: center;
+    background-color: transparent;
     .dataSituation-detail-num {
       display: inline-block;
-      color: @primary-color;
       font-weight: bolder;
-      font-size: 14px;
+      font-size: 16px;
     }
     .dataSituation-detail-unit {
       display: inline-block;

src/components/dashboard/more/spaceOverview.vue

@@ -0,0 +1,65 @@
+<script>
+import Card from "@/components/common/card.vue";
+import DataSituation from "@/components/dashboard/more/space/DataSituation.vue";
+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,
+      }
+    }
+  },
+  components: {
+    Card,
+    DataSituation,
+  },
+  mounted() {
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<template>
+  <div class="dMore-spaceOverview">
+    <Card title="空间概览">
+      <a-row :gutter="10" style="padding: 0 5%">
+        <a-col :span="8">
+          <DataSituation :percent="meeting.percent" :total-num="meeting.total" :used-num="meeting.used"
+                         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"
+                         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"
+                         title="工位态势" color="yellow" total-title="总工位(个)" used-title="已使用工位">
+          </DataSituation>
+        </a-col>
+      </a-row>
+
+    </Card>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.dMore-spaceOverview {
+  padding-right: 15px
+}
+</style>

src/components/dashboard/portrait/cold/coldTrendChart.vue

@@ -0,0 +1,130 @@
+<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: [
+          {
+            start: 0,
+            end: 100,
+            height: 16,
+          }
+        ],
+        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: [35, 71, 51, 32, 28, 66, 42, 42, 87, 34, 88, 45],
+            type: 'line',
+            stack: 'a',
+            yAxisIndex:0,
+            smooth: true,
+            lineStyle: {
+              color: "#62CC97",
+              width: 1,
+            },
+            itemStyle: {
+              color: '#62CC97'
+            },
+            emphasis: {
+              scale:1.5
+            }
+          },
+          {
+            name: '温度',
+            data: [23, 23, 17, 19, 20, 24, 23, 22, 22, 18, 25, 16],
+            type: 'line',
+            stack: 'b',
+            smooth: true,
+            yAxisIndex:1,
+            lineStyle: {
+              color: "#FDB456",
+              width: 1,
+            },
+            itemStyle: {
+              color: '#FDB456'
+            },
+            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/dashboard/portrait/coldPortrait.vue

@@ -0,0 +1,71 @@
+<script>
+import CoreData from "@/components/common/coreData.vue";
+import ColdTrendChart from "@/components/dashboard/portrait/cold/coldTrendChart.vue";
+export default {
+  data() {
+    return {
+      coreData: [
+        {
+          type: 0,
+          title: '月总用冷量(kWh)',
+          num: 2000,
+          historyDesc: '同比',
+          historyNum: '0.4'
+        },
+        {
+          type: 0,
+          title: '今日用冷趋势',
+          num: 1800,
+          historyDesc: '同比',
+          historyNum: '0.4'
+        },
+        {
+          type: 0,
+          title: '能效比',
+          num: 30,
+          unit: '%',
+          historyDesc: '同比',
+          historyNum: '0.4'
+        },
+        {
+          type: 0,
+          title: '人均用冷量(kWh)',
+          num: 30,
+          historyDesc: '同比',
+          historyNum: '0.4'
+        },
+        {
+          type: 1,
+          isHighLight: false,
+          title: '值得关注',
+          content: ''
+        },
+      ]
+    }
+  },
+  props: {
+    chartHeight: Number
+  },
+  components: {
+    CoreData,
+    ColdTrendChart,
+  }
+}
+</script>
+
+<template>
+  <div class="supermarketPortrait">
+    <div class="portrait-coreData">
+      <CoreData :data-list="coreData"></CoreData>
+    </div>
+    <div style="padding: 15px">
+      <ColdTrendChart :height="chartHeight"></ColdTrendChart>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.supermarketPortrait {
+
+}
+</style>

src/components/dashboard/portrait/electricity/electricityDistributionChart.vue

@@ -0,0 +1,60 @@
+<script>
+export default {
+  data() {
+    return {}
+  },
+  props: {
+    height: Number,
+  },
+  mounted() {
+    this.$nextTick(()=>{
+      this.initChart()
+    })
+  },
+  methods: {
+    initChart() {
+      let chart = this.$echarts.init(this.$refs.myChart)
+      let option = {
+        color: ['#80D4FF', '#A6A6FF', '#FFB580', '#FFDF80', '#79F2E8'],
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          bottom: 'bottom',
+          icon: 'circle'
+        },
+        series: [
+          {
+            name: '用电量',
+            type: 'pie',
+            radius: '50%',
+            data: [
+              { value: 1048, name: '公共用电' },
+              { value: 735, name: '动力用电' },
+              { value: 580, name: '照明用电' },
+              { value: 484, name: '信息机房用电' },
+              { value: 300, name: '其他用电' }
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      };
+      chart.setOption(option)
+    }
+  }
+}
+</script>
+
+<template>
+  <div style="width: 100%" :style="{height: height+'px'}" ref="myChart"></div>
+</template>
+
+<style lang="less" scoped>
+
+</style>

src/components/dashboard/portrait/electricity/electricityUseChart.vue

@@ -0,0 +1,112 @@
+<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, -12]
+            },
+          },
+        ],
+        dataZoom: [
+          {
+            start: 0,
+            end: 100,
+            height: 16,
+          }
+        ],
+        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: [132, 107, 121, 152, 110, 192, 110, 167, 160, 141, 113, 137],
+            type: 'line',
+            stack: 'x',
+            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,
+            },
+            itemStyle: {
+              color: '#62CC97'
+            },
+            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/dashboard/portrait/electricityPortrait.vue

@@ -0,0 +1,80 @@
+<script>
+import CoreData from "@/components/common/coreData.vue";
+import ElectricityUseChart from "@/components/dashboard/portrait/electricity/electricityUseChart.vue";
+import ElectricityDistributionChart from "@/components/dashboard/portrait/electricity/electricityDistributionChart.vue";
+export default {
+  data() {
+    return {
+      coreData: [
+        {
+          type: 0,
+          title: '月总用电量(kWh)',
+          num: 2000,
+          historyDesc: '同比',
+          historyNum: 0.4
+        },
+        {
+          type: 0,
+          title: '今日用电量(kWh)',
+          num: 1800,
+          historyDesc: '同比',
+          historyNum: 0.4
+        },
+        {
+          type: 0,
+          title: '今日用电趋势',
+          num: 30,
+          unit: '%',
+          historyDesc: '同比',
+          historyNum: 0.4
+        },
+        {
+          type: 0,
+          title: '人均用电成本(元/天)',
+          num: 30,
+          historyDesc: '同比',
+          historyNum: -0.4
+        },
+        {
+          type: 1,
+          isHighLight: false,
+          title: '值得关注',
+          content: ''
+        },
+      ]
+    }
+  },
+  props: {
+    chartHeight: Number
+  },
+  components: {
+    CoreData,
+    ElectricityUseChart,
+    ElectricityDistributionChart,
+  }
+}
+</script>
+
+<template>
+  <div class="supermarketPortrait">
+    <div class="portrait-coreData">
+      <CoreData :data-list="coreData"></CoreData>
+    </div>
+    <div style="padding: 15px">
+      <a-row>
+        <a-col :span="16">
+          <ElectricityUseChart :height="chartHeight"></ElectricityUseChart>
+        </a-col>
+        <a-col :span="8">
+          <ElectricityDistributionChart :height="chartHeight"></ElectricityDistributionChart>
+        </a-col>
+      </a-row>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.supermarketPortrait {
+
+}
+</style>

src/components/dashboard/portrait/hot/hotTrendChart.vue

@@ -0,0 +1,130 @@
+<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: [
+          {
+            start: 0,
+            end: 100,
+            height: 16,
+          }
+        ],
+        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,
+            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,
+            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/dashboard/portrait/hotPortrait.vue

@@ -0,0 +1,71 @@
+<script>
+import CoreData from "@/components/common/coreData.vue";
+import HotTrendChart from "@/components/dashboard/portrait/hot/hotTrendChart.vue";
+export default {
+  data() {
+    return {
+      coreData: [
+        {
+          type: 0,
+          title: '月总用热量(kWh)',
+          num: 2000,
+          historyDesc: '同比',
+          historyNum: '0.4'
+        },
+        {
+          type: 0,
+          title: '今日用热趋势',
+          num: 1800,
+          historyDesc: '同比',
+          historyNum: '0.4'
+        },
+        {
+          type: 0,
+          title: '人均用热成本(kWh)',
+          num: 30,
+          unit: '%',
+          historyDesc: '同比',
+          historyNum: '0.4'
+        },
+        {
+          type: 0,
+          title: '人均用热量(kWh/天)',
+          num: 30,
+          historyDesc: '同比',
+          historyNum: '0.4'
+        },
+        {
+          type: 1,
+          isHighLight: false,
+          title: '值得关注',
+          content: ''
+        },
+      ]
+    }
+  },
+  props: {
+    chartHeight: Number
+  },
+  components: {
+    CoreData,
+    HotTrendChart,
+  }
+}
+</script>
+
+<template>
+  <div class="supermarketPortrait">
+    <div class="portrait-coreData">
+      <CoreData :data-list="coreData"></CoreData>
+    </div>
+    <div style="padding: 15px">
+      <HotTrendChart :height="chartHeight"></HotTrendChart>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.supermarketPortrait {
+
+}
+</style>

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

@@ -0,0 +1,134 @@
+<template>
+  <div class="myChart" ref="myChart" :style="{height: height+'px'}">
+
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+    }
+  },
+  props: {
+    height: Number
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      let chart = this.$echarts.init(this.$refs.myChart);
+      let options = {
+        color: ['#80D4FF','#A6A6FF','#79F2E8','#FFDF80','#FF7C1F'],
+        legend: {
+          data: [
+            '投资1',
+            '投资2',
+            '投资3',
+            '投资4',
+            '投资回报率',
+          ]
+        },
+        grid: {
+          left: '2%', //默认10%
+          right: '2%', //默认10%
+          bottom: '0%', //默认60
+          top: '15%',
+          containLabel: true
+          //grid区域是否包含坐标轴的刻度标签
+        },
+        xAxis: {
+          type: 'category',
+          data: ['1季度', '2季度', '3季度', '4季度']
+        },
+        yAxis: [
+          {
+            name: '额度(万元)',
+            type: 'value',
+            max: 1200,
+            nameTextStyle: {
+              padding: [10, 0, 10, -20]
+            },
+          },
+          {
+            type: 'value',
+            name: '回报率(%)',
+            min:0,
+            max:100,
+            nameTextStyle: {
+              padding: [10, 20, 10, 0]
+            },
+          },
+        ],
+        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: '投资1',
+            data: [380, 280, 350, 200],
+            type: 'bar',
+            stack: 'A',
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            }
+          },
+          {
+            name: '投资2',
+            data: [80, 60, 70, 50],
+            type: 'bar',
+            stack: 'A',
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            }
+          },
+          {
+            name: '投资3',
+            data: [130, 150, 110, 140],
+            type: 'bar',
+            stack: 'A',
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            }
+          },
+          {
+            name: '投资4',
+            data: [75, 66, 99, 85],
+            type: 'bar',
+            stack: 'A',
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            }
+          },
+          {
+            name: '投资回报率',
+            data: [45, 55, 62, 69],
+            yAxisIndex:1,
+            type: 'line',
+          }
+        ]
+      };
+      chart.setOption(options);
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+</style>

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

@@ -0,0 +1,101 @@
+<template>
+  <div class="myChart" ref="myChart" :style="{height: height+'px'}"></div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+    }
+  },
+  props: {
+    height: Number
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      let chart = this.$echarts.init(this.$refs.myChart);
+      let options = {
+        color: ['#80B2FF','#FFDF80'],
+        legend: {
+          data: [
+            '已使用时间',
+            '标准年限',
+          ]
+        },
+        grid: {
+          left: '2%', //默认10%
+          right: '2%', //默认10%
+          bottom: '0%', //默认60
+          top: '15%',
+          containLabel: true
+          //grid区域是否包含坐标轴的刻度标签
+        },
+        xAxis: {
+          type: 'category',
+          data: ['资产1', '资产2', '资产3', '资产4', '资产5', '资产6']
+        },
+        yAxis: [
+          {
+            name: '已使用时间',
+            type: 'value',
+            nameTextStyle: {
+              padding: [10, 0, 10, 15]
+            },
+          },
+          {
+            type: 'value',
+            name: '标准年限',
+            min:0,
+            max:100,
+            nameTextStyle: {
+              padding: [10, 20, 10, 0]
+            },
+          },
+        ],
+        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: [20, 25, 33, 45, 70, 75],
+            type: 'bar',
+            stack: 'A',
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            }
+          },
+          {
+            name: '标准年限',
+            data: [2, 3, 6, 7, 8, 9],
+            yAxisIndex:1,
+            type: 'line',
+          }
+        ]
+      };
+      chart.setOption(options);
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+</style>

src/components/dashboard/portrait/moneyPortrait.vue

@@ -0,0 +1,87 @@
+<script>
+import CoreData from "@/components/common/coreData.vue";
+import InvestDistributeChart from "@/components/dashboard/portrait/money/investDistributeChart.vue";
+import InvestYearChart from "@/components/dashboard/portrait/money/investYearChart.vue";
+export default {
+  data() {
+    return {
+      coreData: [
+        {
+          type: 0,
+          title: '年度投资总额(万元)',
+          num: 2000,
+          historyDesc: '同比',
+          historyNum: '0.4'
+        },
+        {
+          type: 0,
+          title: '资产总额(万元)',
+          num: 1800,
+          historyDesc: '同比',
+          historyNum: '0.4'
+        },
+        {
+          type: 0,
+          title: '人均资产总额(万元)',
+          num: 30,
+          historyDesc: '同比',
+          historyNum: '0.4'
+        },
+        {
+          type: 0,
+          title: '资产平均使用年限(年)',
+          num: 30,
+          historyDesc: '同比',
+          historyNum: '0.4'
+        },
+        {
+          type: 1,
+          isHighLight: false,
+          title: '值得关注',
+          content: ''
+        },
+      ]
+    }
+  },
+  props: {
+    chartHeight: Number
+  },
+  components: {
+    CoreData,
+    InvestDistributeChart,
+    InvestYearChart,
+  }
+}
+</script>
+
+<template>
+  <div class="supermarketPortrait">
+    <div class="portrait-coreData">
+      <CoreData :data-list="coreData"></CoreData>
+    </div>
+    <div style="padding: 15px">
+      <a-row>
+        <a-col :span="12">
+          <div class="supermarketPortrait-title">投资分布</div>
+          <InvestDistributeChart :height="chartHeight-50"></InvestDistributeChart>
+        </a-col>
+        <a-col :span="12">
+          <div class="supermarketPortrait-title">资产年限</div>
+          <InvestYearChart :height="chartHeight-50"></InvestYearChart>
+        </a-col>
+      </a-row>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.supermarketPortrait {
+  .supermarketPortrait-title {
+    line-height: 30px;
+    font-size: 14px;
+    color: #B2B2B2;
+    margin-left: 15px;
+    margin-bottom: 6px;
+  }
+}
+</style>

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

@@ -0,0 +1,157 @@
+<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: '人数(人)',
+            type: 'value',
+            nameTextStyle: {
+              padding: [10, 0, 10, -12]
+            },
+          },
+        ],
+        dataZoom: [
+          {
+            start: 0,
+            end: 100,
+            height: 16,
+          }
+        ],
+        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,
+            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,
+            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
+            },
+          },
+          {
+            name: '访客人员',
+            data: [40, 15, 59, 18, 33, 31, 31, 26, 34, 26, 28, 40],
+            type: 'line',
+            stack: 'x',
+            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,
+            },
+            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/dashboard/portrait/personPortrait.vue

@@ -0,0 +1,74 @@
+<script>
+import CoreData from "@/components/common/coreData.vue";
+import PersonTrendChart from "@/components/dashboard/portrait/person/personTrendChart.vue";
+export default {
+  data() {
+    return {
+      coreData: [
+        {
+          type: 0,
+          title: '月总用水量(m³)',
+          num: 2000,
+          historyDesc: '同比',
+          historyNum: '0.4'
+        },
+        {
+          type: 0,
+          title: '今日用水总量(m³)',
+          num: 200,
+          historyDesc: '同比',
+          historyNum: '0.4'
+        },
+        {
+          type: 0,
+          title: '今日用水趋势',
+          num: 30,
+          unit: '%',
+          historyDesc: '同比',
+          historyNum: '0.4'
+        },
+        {
+          type: 0,
+          title: '人均用水量(m³)',
+          num: 80,
+          historyDesc: '环比',
+          historyNum: '0.4'
+        },
+        {
+          type: 1,
+          isHighLight: false,
+          title: '值得关注',
+          content: ''
+        },
+      ]
+    }
+  },
+  props: {
+    chartHeight: Number
+  },
+  components: {
+    CoreData,
+    PersonTrendChart,
+  }
+}
+</script>
+
+<template>
+  <div class="personPortrait">
+    <div class="portrait-coreData">
+      <CoreData :data-list="coreData"></CoreData>
+    </div>
+    <div style="padding: 0 15px 15px;">
+      <PersonTrendChart :height="chartHeight"></PersonTrendChart>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.personPortrait {
+  width: 100%;
+  .portrait-coreData {
+    margin-bottom: 15px;
+  }
+}
+</style>

src/components/dashboard/portrait/restaurant/restaurantTrendChart.vue

@@ -0,0 +1,160 @@
+<script>
+export default {
+  data() {
+    return {
+      xData: [],
+      xBgColor: [],
+      moneyData: [],
+      orderData: [],
+    }
+  },
+  props: {
+    height: Number,
+    data: Array,
+  },
+  mounted() {
+    this.$nextTick(()=>{
+      this.initData()
+      this.initChart()
+    })
+  },
+  methods: {
+    initData() {
+      if (!this.data) {
+        return;
+      }
+      for (let i = 0; i < this.data.length; i++) {
+        let obj = this.data[i];
+        this.xData.push(obj.label);
+        this.moneyData.push(obj.money);
+        this.orderData.push(obj.order);
+        if (obj.money>=200) {
+          this.xBgColor.push('rgb(253, 232, 229, 0.5)')
+        } else {
+          this.xBgColor.push('transparent')
+        }
+      }
+    },
+    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月'],
+          splitArea: {
+            show: true,
+            areaStyle: {
+              color: ['white']
+            }
+          }
+        },
+        yAxis: [
+          {
+            name: '金额(元)',
+            type: 'value',
+            nameTextStyle: {
+              padding: [10, 0, 10, -12]
+            },
+          },
+          {
+            name: '订单(单)',
+            type: 'value',
+            nameTextStyle: {
+              padding: [10, 20, 10, 0]
+            },
+          },
+        ],
+        dataZoom: [
+          {
+            start: 0,
+            end: 100,
+            height: 16,
+          }
+        ],
+        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: [274, 128, 213, 273, 114, 183, 245, 166, 187, 128, 137, 275],
+            type: 'bar',
+            yAxisIndex:0,
+            barWidth: 20,
+            backgroundStyle: {
+              color: 'rgb(253, 232, 229, 0.5)'
+            },
+            itemStyle: {
+              color: '#80b2ff'
+            }
+          },
+          {
+            name: '餐厅消费订单',
+            data: [98, 71, 77, 57, 61, 75, 88, 87, 61, 54, 83, 91],
+            type: 'line',
+            itemStyle: {
+              color: '#62CC97',
+            },
+            yAxisIndex:1,
+            smooth: true,
+            areaStyle: {
+              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: '#B0E5CB' // 0% 处的颜色
+              },{
+                offset: 0.8,
+                color: 'rgb(255,255,255,0.1)'
+              }], false),
+            },
+            lineStyle: {
+              color: "#62CC97",
+              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/dashboard/portrait/restaurantPortrait.vue

@@ -0,0 +1,69 @@
+<script>
+import CoreData from "@/components/common/coreData.vue";
+import RestaurantTrendChart from "@/components/dashboard/portrait/restaurant/restaurantTrendChart.vue";
+export default {
+  data() {
+    return {
+      coreData: [
+        {
+          type: 0,
+          title: '餐厅消费金额(元)',
+          num: 2000,
+          historyDesc: '同比',
+          historyNum: '0.4'
+        },
+        {
+          type: 0,
+          title: '餐厅消费订单(单)',
+          num: 1800,
+          historyDesc: '同比',
+          historyNum: '0.4'
+        },
+        {
+          type: 0,
+          title: '餐厅平均单价(元/单)',
+          num: 30,
+          unit: '%',
+          historyDesc: '同比',
+          historyNum: '0.4'
+        },
+        {
+          type: 1,
+          title: '第三方结算方式 费用(元)',
+          content: ''
+        },
+        {
+          type: 1,
+          isHighLight: false,
+          title: '值得关注',
+          content: ''
+        },
+      ]
+    }
+  },
+  props: {
+    chartHeight: Number
+  },
+  components: {
+    CoreData,
+    RestaurantTrendChart,
+  }
+}
+</script>
+
+<template>
+  <div class="restaurantPortrait">
+    <div class="portrait-coreData">
+      <CoreData :data-list="coreData"></CoreData>
+    </div>
+    <div style="padding: 15px">
+      <RestaurantTrendChart :height="chartHeight"></RestaurantTrendChart>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.restaurantPortrait {
+
+}
+</style>

src/components/dashboard/portrait/supermarket/supermarketTrendChart.vue

@@ -0,0 +1,160 @@
+<script>
+export default {
+  data() {
+    return {
+      xData: [],
+      xBgColor: [],
+      moneyData: [],
+      orderData: [],
+    }
+  },
+  props: {
+    height: Number,
+    data: Array,
+  },
+  mounted() {
+    this.$nextTick(()=>{
+      this.initData()
+      this.initChart()
+    })
+  },
+  methods: {
+    initData() {
+      if (!this.data) {
+        return;
+      }
+      for (let i = 0; i < this.data.length; i++) {
+        let obj = this.data[i];
+        this.xData.push(obj.label);
+        this.moneyData.push(obj.money);
+        this.orderData.push(obj.order);
+        if (obj.money>=200) {
+          this.xBgColor.push('rgb(253, 232, 229, 0.5)')
+        } else {
+          this.xBgColor.push('transparent')
+        }
+      }
+    },
+    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月'],
+          splitArea: {
+            show: true,
+            areaStyle: {
+              color: ['white']
+            }
+          }
+        },
+        yAxis: [
+          {
+            name: '金额(元)',
+            type: 'value',
+            nameTextStyle: {
+              padding: [10, 0, 10, -12]
+            },
+          },
+          {
+            name: '订单(单)',
+            type: 'value',
+            nameTextStyle: {
+              padding: [10, 20, 10, 0]
+            },
+          },
+        ],
+        dataZoom: [
+          {
+            start: 0,
+            end: 100,
+            height: 16,
+          }
+        ],
+        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: [274, 128, 213, 273, 114, 183, 245, 166, 187, 128, 137, 275],
+            type: 'bar',
+            yAxisIndex:0,
+            barWidth: 20,
+            backgroundStyle: {
+              color: 'rgb(253, 232, 229, 0.5)'
+            },
+            itemStyle: {
+              color: '#80b2ff'
+            }
+          },
+          {
+            name: '商超消费订单',
+            data: [98, 71, 77, 57, 61, 75, 88, 87, 61, 54, 83, 91],
+            type: 'line',
+            itemStyle: {
+              color: '#62CC97',
+            },
+            yAxisIndex:1,
+            smooth: true,
+            areaStyle: {
+              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: '#B0E5CB' // 0% 处的颜色
+              },{
+                offset: 0.8,
+                color: 'rgb(255,255,255,0.1)'
+              }], false),
+            },
+            lineStyle: {
+              color: "#62CC97",
+              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/dashboard/portrait/supermarketPortrait.vue

@@ -0,0 +1,69 @@
+<script>
+import CoreData from "@/components/common/coreData.vue";
+import SupermarketTrendChart from "@/components/dashboard/portrait/supermarket/supermarketTrendChart.vue"
+export default {
+  data() {
+    return {
+      coreData: [
+        {
+          type: 0,
+          title: '商超消费金额(元)',
+          num: 2000,
+          historyDesc: '同比',
+          historyNum: '0.4'
+        },
+        {
+          type: 0,
+          title: '商超消费订单(单)',
+          num: 1800,
+          historyDesc: '同比',
+          historyNum: '0.4'
+        },
+        {
+          type: 0,
+          title: '商超平均单价(元/单)',
+          num: 30,
+          unit: '%',
+          historyDesc: '同比',
+          historyNum: '0.4'
+        },
+        {
+          type: 1,
+          title: '第三方结算方式 费用(元)',
+          content: ''
+        },
+        {
+          type: 1,
+          isHighLight: false,
+          title: '值得关注',
+          content: ''
+        },
+      ]
+    }
+  },
+  props: {
+    chartHeight: Number
+  },
+  components: {
+    CoreData,
+    SupermarketTrendChart
+  }
+}
+</script>
+
+<template>
+  <div class="supermarketPortrait">
+    <div class="portrait-coreData">
+      <CoreData :data-list="coreData"></CoreData>
+    </div>
+    <div style="padding: 15px">
+      <SupermarketTrendChart :height="chartHeight"></SupermarketTrendChart>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.supermarketPortrait {
+
+}
+</style>

src/components/dashboard/portrait/water/waterDistributionChart.vue

@@ -0,0 +1,57 @@
+<script>
+export default {
+  data() {
+    return {}
+  },
+  props: {
+    height: Number,
+  },
+  mounted() {
+    this.$nextTick(()=>{
+      this.initChart()
+    })
+  },
+  methods: {
+    initChart() {
+      let chart = this.$echarts.init(this.$refs.myChart)
+      let option = {
+        color: ['#80D4FF', '#FFDF80'],
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          bottom: 'bottom',
+          icon: 'circle'
+        },
+        series: [
+          {
+            name: '用水量',
+            type: 'pie',
+            radius: '50%',
+            data: [
+              { value: 53, name: '自来水' },
+              { value: 235, name: '中水' },
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      };
+      chart.setOption(option)
+    }
+  }
+}
+</script>
+
+<template>
+  <div style="width: 100%" :style="{height: height+'px'}" ref="myChart"></div>
+</template>
+
+<style lang="less" scoped>
+
+</style>

src/components/dashboard/portrait/water/waterUseChart.vue

@@ -0,0 +1,112 @@
+<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: 'm³',
+            type: 'value',
+            nameTextStyle: {
+              padding: [10, 0, 10, -12]
+            },
+          },
+        ],
+        dataZoom: [
+          {
+            start: 0,
+            end: 100,
+            height: 16,
+          }
+        ],
+        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: [167, 156, 176, 156, 173, 127, 101, 165, 121, 193, 172, 149],
+            type: 'line',
+            stack: 'x',
+            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,
+            },
+            itemStyle: {
+              color: '#62CC97'
+            },
+            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/dashboard/portrait/waterPortrait.vue

@@ -0,0 +1,80 @@
+<script>
+import CoreData from "@/components/common/coreData.vue";
+import WaterUseChart from "@/components/dashboard/portrait/water/waterUseChart.vue";
+import WaterDistributionChart from "@/components/dashboard/portrait/water/waterDistributionChart.vue";
+export default {
+  data() {
+    return {
+      coreData: [
+        {
+          type: 0,
+          title: '月总用水量(m³)',
+          num: 2000,
+          historyDesc: '同比',
+          historyNum: '0.4'
+        },
+        {
+          type: 0,
+          title: '今日用水总量(m³)',
+          num: 1800,
+          historyDesc: '同比',
+          historyNum: '0.4'
+        },
+        {
+          type: 0,
+          title: '今日用水趋势',
+          num: 30,
+          unit: '%',
+          historyDesc: '同比',
+          historyNum: '0.4'
+        },
+        {
+          type: 0,
+          title: '人均用水量(m³)',
+          num: 30,
+          historyDesc: '同比',
+          historyNum: '0.4'
+        },
+        {
+          type: 1,
+          isHighLight: false,
+          title: '值得关注',
+          content: ''
+        },
+      ]
+    }
+  },
+  props: {
+    chartHeight: Number
+  },
+  components: {
+    CoreData,
+    WaterUseChart,
+    WaterDistributionChart,
+  }
+}
+</script>
+
+<template>
+  <div class="supermarketPortrait">
+    <div class="portrait-coreData">
+      <CoreData :data-list="coreData"></CoreData>
+    </div>
+    <div style="padding: 15px">
+      <a-row>
+        <a-col :span="16">
+          <WaterUseChart :height="chartHeight"></WaterUseChart>
+        </a-col>
+        <a-col :span="8">
+          <WaterDistributionChart :height="chartHeight"></WaterDistributionChart>
+        </a-col>
+      </a-row>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.supermarketPortrait {
+
+}
+</style>

src/components/life/common/IotCard.vue

@@ -1,31 +0,0 @@
-<template>
-  <a-card >
-    <template #title>
-      <span>{{ title }}</span>
-    </template>
-    <slot></slot>
-  </a-card>
-</template>
-
-<script>
-
-export default {
-  data() {
-    return {
-
-    }
-  },
-  props: {
-    title: String
-  }
-}
-</script>
-
-<style lang="less" scoped>
-/deep/ .ant-card-body {
-  display: inline-block;
-  width: 100% !important;
-  height: auto !important;
-  padding: 8px !important;
-}
-</style>

src/components/life/common/lifeQuery.vue

@@ -1,44 +0,0 @@
-<template>
-  <a-form layout="inline" :form="formData" >
-    <a-form-item label="单位名称：" class="formItem">
-      <a-select style="width: 240px;" >
-        <a-select-option value="中迅">
-          中迅
-        </a-select-option>
-        <a-select-option value="电信规划院">
-          电信规划院
-        </a-select-option>
-      </a-select>
-    </a-form-item>
-    <a-form-item label="部门名称：" class="formItem">
-      <a-select style="width: 240px" >
-        <a-select-option value="中迅">
-          中迅
-        </a-select-option>
-        <a-select-option value="电信规划院">
-          电信规划院
-        </a-select-option>
-      </a-select>
-    </a-form-item>
-    <a-form-item class="formItem">
-      <a-button type="primary" >重置</a-button>
-      <a-button type="primary" >查询</a-button>
-    </a-form-item>
-  </a-form>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      formData: {}
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.formItem {
-  margin: 5px 15px;
-}
-</style>

src/components/life/healthyHome/lifeHealthyHome.vue

@@ -1,6 +1,6 @@
 <script>
-import LifeQuery from "@/components/life/common/lifeQuery.vue";
-import IotCard from "@/components/life/common/IotCard.vue";
+import Query from "@/components/common/query.vue";
+import Card from "@/components/common/card.vue";
 import CoreData from "@/components/common/coreData.vue";
 import LifeHealthyHomeChart from "@/components/life/healthyHome/components/lifeHealthyHomeChart.vue";
 import LifeHealthyHomeMonitor from "@/components/life/healthyHome/components/lifeHealthyHomeMonitor.vue";
@@ -46,8 +46,8 @@ export default {
     }
   },
   components: {
-    LifeQuery,
-    IotCard,
+    Query,
+    Card,
     CoreData,
     LifeHealthyHomeChart,
     LifeHealthyHomeMonitor,
@@ -67,16 +67,16 @@ export default {
     <a-row>
       <a-col>
         <div class="lifeHealthyHome-query">
-          <LifeQuery></LifeQuery>
+          <Query></Query>
         </div>
       </a-col>
     </a-row>
     <a-row>
       <a-col>
         <div class="lifeHealthyHome-core">
-          <IotCard title="核心指标">
+          <Card title="核心指标">
             <CoreData :data-list="coreData"></CoreData>
-          </IotCard>
+          </Card>
         </div>
       </a-col>
     </a-row>
@@ -84,23 +84,23 @@ export default {
       <a-col :span="18">
         <div class="lifeHealthyHome-left">
           <div class="lifeHealthyHome-detail">
-            <IotCard title="小屋分析">
+            <Card title="小屋分析">
               <LifeHealthyHomeChart :height="390"></LifeHealthyHomeChart>
-            </IotCard>
+            </Card>
           </div>
         </div>
       </a-col>
       <a-col :span="6">
         <div class="lifeHealthyHome-right">
           <div class="lifeHealthyHome-top">
-            <IotCard title="环境监测">
+            <Card title="环境监测">
               <LifeHealthyHomeMonitor :title="'PM2.5'" :value="'75'" :position="'室内'" :bg-color="'lightBlue'"></LifeHealthyHomeMonitor>
               <LifeHealthyHomeMonitor :title="'PM2.5'" :value="'75'" :position="'室外'" :bg-color="'lightBlue'"></LifeHealthyHomeMonitor>
               <LifeHealthyHomeMonitor :title="'PM2.5'" :value="'75'" :position="'室外'" :bg-color="'lightBlue'"></LifeHealthyHomeMonitor>
               <LifeHealthyHomeMonitor :title="'PM2.5'" :value="'75'" :position="'室外'" :bg-color="'lightBlue'"></LifeHealthyHomeMonitor>
               <LifeHealthyHomeMonitor :title="'PM2.5'" :value="'75'" :position="'室外'" :bg-color="'lightBlue'"></LifeHealthyHomeMonitor>
               <LifeHealthyHomeMonitor :title="'PM2.5'" :value="'75'" :position="'室外'" :bg-color="'lightBlue'"></LifeHealthyHomeMonitor>
-            </IotCard>
+            </Card>
           </div>
         </div>
       </a-col>

src/components/life/parking/lifeParking.vue

@@ -1,6 +1,6 @@
 <script>
-import LifeQuery from "@/components/life/common/lifeQuery.vue";
-import IotCard from "@/components/life/common/IotCard.vue";
+import Query from "@/components/common/query.vue";
+import Card from "@/components/common/card.vue";
 import CoreData from "@/components/common/coreData.vue";
 import LifeParkTrendChart from "@/components/life/parking/components/lifeParkTrendChart.vue";
 import lifeParkUnNormalChart from "@/components/life/parking/components/lifeParkUnNormalChart.vue";
@@ -50,8 +50,8 @@ export default {
     }
   },
   components: {
-    LifeQuery,
-    IotCard,
+    Query,
+    Card,
     CoreData,
     LifeParkTrendChart,
     lifeParkUnNormalChart,
@@ -74,16 +74,16 @@ export default {
     <a-row>
       <a-col>
         <div class="lifeParking-query">
-          <LifeQuery></LifeQuery>
+          <Query></Query>
         </div>
       </a-col>
     </a-row>
     <a-row>
       <a-col>
         <div class="lifeParking-core">
-          <IotCard title="核心指标">
+          <Card title="核心指标">
             <CoreData :data-list="coreData"></CoreData>
-          </IotCard>
+          </Card>
         </div>
       </a-col>
     </a-row>
@@ -91,33 +91,33 @@ export default {
       <a-col :span="18">
         <div class="lifeParking-left">
           <div class="lifeParking-trend">
-            <IotCard title="车流态势">
+            <Card title="车流态势">
               <LifeParkTrendChart :height="300"></LifeParkTrendChart>
-            </IotCard>
+            </Card>
           </div>
           <div class="lifeParking-unNormal">
-            <IotCard title="违停情况">
+            <Card title="违停情况">
               <LifeParkUnNormalChart :height="200"></LifeParkUnNormalChart>
-            </IotCard>
+            </Card>
           </div>
           <div class="lifeParking-consume">
-            <IotCard title="占用车位数量">
+            <Card title="占用车位数量">
               <LifeParkConsumeChart :height="200"></LifeParkConsumeChart>
-            </IotCard>
+            </Card>
           </div>
         </div>
       </a-col>
       <a-col :span="6">
         <div class="lifeParking-right">
           <div class="lifeParking-top">
-            <IotCard title="空置车位">
+            <Card title="空置车位">
               <LifeParkingTopChart></LifeParkingTopChart>
-            </IotCard>
+            </Card>
           </div>
           <div class="lifeParking-detail">
-            <IotCard title="车位详情">
+            <Card title="车位详情">
               <LifeParkDetailTable></LifeParkDetailTable>
-            </IotCard>
+            </Card>
           </div>
         </div>
       </a-col>

src/components/life/restaurant/lifeRestaurant.vue

@@ -1,6 +1,6 @@
 <script>
-import LifeQuery from "@/components/life/common/lifeQuery.vue";
-import IotCard from "@/components/life/common/IotCard.vue";
+import Query from "@/components/common/query.vue";
+import Card from "@/components/common/card.vue";
 import CoreData from "@/components/common/coreData.vue";
 import LifeRestEatChart from "@/components/life/restaurant/components/lifeRestEatChart.vue";
 import LifeRestConsumeChart from "@/components/life/restaurant/components/lifeRestConsumeChart.vue";
@@ -52,8 +52,8 @@ export default {
     }
   },
   components: {
-    LifeQuery,
-    IotCard,
+    Query,
+    Card,
     CoreData,
     LifeRestEatChart,
     LifeRestConsumeChart,
@@ -77,16 +77,16 @@ export default {
     <a-row>
       <a-col>
         <div class="lifeRestaurant-query">
-          <LifeQuery></LifeQuery>
+          <Query></Query>
         </div>
       </a-col>
     </a-row>
     <a-row>
       <a-col>
         <div class="lifeRestaurant-core">
-          <IotCard title="核心指标">
+          <Card title="核心指标">
             <CoreData :data-list="coreData"></CoreData>
-          </IotCard>
+          </Card>
         </div>
       </a-col>
     </a-row>
@@ -94,38 +94,38 @@ export default {
       <a-col :span="18">
         <div class="lifeRestaurant-left">
           <div class="lifeRestaurant-eat">
-            <IotCard title="用餐分析">
+            <Card title="用餐分析">
               <LifeRestEatChart :height="300"></LifeRestEatChart>
-            </IotCard>
+            </Card>
           </div>
           <div class="lifeRestaurant-consume">
-            <IotCard title="消费分析">
+            <Card title="消费分析">
               <LifeRestConsumeChart :height="300"></LifeRestConsumeChart>
-            </IotCard>
+            </Card>
           </div>
           <div class="lifeRestaurant-profit">
-            <IotCard title="盈利分析">
+            <Card title="盈利分析">
               <LifeRestProfitChart :height="200"></LifeRestProfitChart>
-            </IotCard>
+            </Card>
           </div>
           <div class="lifeRestaurant-pay">
-            <IotCard title="支付分析">
+            <Card title="支付分析">
               <LifeRestPayChart :height="200"></LifeRestPayChart>
-            </IotCard>
+            </Card>
           </div>
         </div>
       </a-col>
       <a-col :span="6">
         <div class="lifeRestaurant-right">
           <div class="lifeRestaurant-top">
-            <IotCard title="受欢迎菜品">
+            <Card title="受欢迎菜品">
               <LifeRestTopMenu ></LifeRestTopMenu>
-            </IotCard>
+            </Card>
           </div>
           <div class="lifeRestaurant-cookbook">
-            <IotCard title="每日菜谱">
+            <Card title="每日菜谱">
               <LifeRestDailyMenu ></LifeRestDailyMenu>
-            </IotCard>
+            </Card>
           </div>
         </div>
       </a-col>

src/components/life/supermarket/lifeSupermarket.vue

@@ -1,6 +1,6 @@
 <script>
-import LifeQuery from "@/components/life/common/lifeQuery.vue";
-import IotCard from "@/components/life/common/IotCard.vue";
+import Query from "@/components/common/query.vue";
+import Card from "@/components/common/card.vue";
 import CoreData from "@/components/common/coreData.vue";
 import LifeSupermarketAnalysisChart from "@/components/life/supermarket/components/lifeSupermarketAnalysisChart.vue";
 import LifeSupermarketTopTable from "@/components/life/supermarket/components/lifeSupermarketTopTable.vue";
@@ -51,8 +51,8 @@ export default {
     }
   },
   components: {
-    LifeQuery,
-    IotCard,
+    Query,
+    Card,
     CoreData,
     LifeSupermarketAnalysisChart,
     LifeSupermarketTopTable,
@@ -72,16 +72,16 @@ export default {
     <a-row>
       <a-col>
         <div class="lifeSupermarket-query">
-          <LifeQuery></LifeQuery>
+          <Query></Query>
         </div>
       </a-col>
     </a-row>
     <a-row>
       <a-col>
         <div class="lifeSupermarket-core">
-          <IotCard title="核心指标">
+          <Card title="核心指标">
             <CoreData :data-list="coreData"></CoreData>
-          </IotCard>
+          </Card>
         </div>
       </a-col>
     </a-row>
@@ -89,18 +89,18 @@ export default {
       <a-col :span="18">
         <div class="lifeSupermarket-left">
           <div class="lifeSupermarket-detail">
-            <IotCard title="商超分析">
+            <Card title="商超分析">
               <LifeSupermarketAnalysisChart :height="300"></LifeSupermarketAnalysisChart>
-            </IotCard>
+            </Card>
           </div>
         </div>
       </a-col>
       <a-col :span="6">
         <div class="lifeSupermarket-right">
           <div class="lifeSupermarket-top">
-            <IotCard title="商品排行">
+            <Card title="商品排行">
               <LifeSupermarketTopTable></LifeSupermarketTopTable>
-            </IotCard>
+            </Card>
           </div>
         </div>
       </a-col>

vite.config.js

@@ -29,6 +29,9 @@ export default defineConfig(({ command }) => {
     build: {
       outDir: 'dist',
       sourcemap: false,
+      commonjsOptions: {
+        transformMixedEsModules: true
+      },
       chunkSizeWarningLimit: 1000,
       rollupOptions: {
         output: {