生活调整ui

src/components/breadcrumb/iotBreadcrumb.vue

@@ -1,10 +1,12 @@
 <template>
-  <div class="home-breadcrumb border-shadow">
-    <a-breadcrumb>
-      <a-breadcrumb-item @click="toHome">首页</a-breadcrumb-item>
-      <a-breadcrumb-item v-for="item in levelList" :key="item.name">{{
-        item.meta.breadcrumb
-      }}</a-breadcrumb-item>
+  <div class="home-breadcrumb">
+    <a-breadcrumb :separator="' 丨 '" style="cursor: default;">
+      <a-breadcrumb-item >
+        <span @click="toHome" style="cursor:pointer;">首页</span>
+      </a-breadcrumb-item>
+      <a-breadcrumb-item v-for="item in levelList" :key="item.name">
+        <span >{{ item.meta.breadcrumb }}</span>
+      </a-breadcrumb-item>
     </a-breadcrumb>
     <br />
   </div>
@@ -34,7 +36,7 @@ export default {
       }
     },
     toHome() {
-      this.$router.push("home");
+      this.$router.push({name: "dashboard"});
     },
     handleLink(item) {
       let path = item;
@@ -48,5 +50,10 @@ export default {
 .home-breadcrumb {
   height: 40px; 
   margin: 10px 10px;
+  border-radius: 4px;
+  background-color: #ffffff;
+  padding-top: 10px;
+  padding-left: 30px;
+  font-size: 14px;
 }
 </style>

src/components/common/card.vue

@@ -6,7 +6,7 @@
         <slot name="title-extra"></slot>
       </span>
     </div>
-    <slot></slot>
+    <slot v-if="show"></slot>
   </div>
 </template>
 
@@ -16,14 +16,22 @@ export default {
     title: String,
   },
   data() {
-    return {};
+    return {
+      show: false,
+    };
   },
+  mounted() {
+    this.$nextTick(()=>{
+      this.show = true;
+    })
+  }
 };
 </script>
 
 <style lang="less" scoped>
 .ioc-card {
-  border-radius: 20px;
+  border-radius: 4px;
+  background-color: #ffffff;
   .card_title {
     padding: 10px 0px 10px 15px;
     font-size: 16px;

src/components/common/query.vue

@@ -1,25 +1,27 @@
 <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 label="时间范围：" class="formItem">
-      <timeRange ref="timeRange"></timeRange>
-    </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>
+  <div class="ioc-query-form">
+    <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 label="时间范围：" class="formItem">
+        <timeRange ref="timeRange"></timeRange>
+      </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>
+  </div>
 </template>
 
 <script>

src/components/dashboard/commonFuncManage/functionManage.vue

@@ -163,7 +163,7 @@ export default {
   </a-modal>
 </template>
 
-<style lang="less">
+<style lang="less" scoped>
 .dashboard-funcManage {
   .footer-btn {
     width: 80px;

src/components/dashboard/iocDashboard.vue

@@ -100,10 +100,12 @@ export default {
   .dashboard-summary {
     background-color: white;
     height: 765px;
+    overflow-y: hidden;
   }
   .dashboard-more {
     background-color: white;
     height: 765px;
+    overflow-y: hidden;
 
   }
 }

src/components/dashboard/more/carbonOverviewChart.vue

@@ -10,9 +10,7 @@ export default {
     Card
   },
   mounted() {
-    this.$nextTick(()=>{
-      this.init()
-    })
+    this.init()
   },
   methods: {
     init() {
@@ -91,19 +89,8 @@ export default {
 </script>
 
 <template>
-  <div class="dMore-carbonOverview">
-    <Card title="碳配额">
-      <div style="padding: 0 15px">
-        <div class="myChart" ref="myChart" :style="{height: height+'px'}">
+  <div class="myChart" ref="myChart" :style="{height: height+'px'}">
 
-        </div>
-      </div>
-    </Card>
   </div>
-</template>
-
-<style lang="less" scoped>
-.dMore-carbonOverview {
 
-}
-</style>
+</template>

src/components/dashboard/more/dashboardMore.vue

@@ -137,7 +137,14 @@ export default {
     </div>
     <!--碳配额概览-->
     <div class="dashboard-carbonOverflow" v-if="moduleConfig.carbon.visible">
-      <CarbonOverviewChart></CarbonOverviewChart>
+      <div class="dMore-carbonOverview">
+        <Card title="碳配额">
+          <div style="padding: 0 15px">
+            <CarbonOverviewChart></CarbonOverviewChart>
+          </div>
+        </Card>
+      </div>
+
     </div>
     <!--光伏发电概览-->
     <div class="dashboard-lightOverflow" v-if="moduleConfig.pv.visible">

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

@@ -46,9 +46,15 @@ export default {
         ],
         dataZoom: [
           {
+            type: 'slider',
             start: 0,
             end: 100,
             height: 12,
+          },
+          {
+            type: 'inside',
+            start: 0,
+            end: 100,
           }
         ],
         tooltip: {

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

@@ -52,9 +52,15 @@ export default {
         ],
         dataZoom: [
           {
+            type: 'slider',
+            start: 0,
+            end: 100,
+            height: 12,
+          },
+          {
+            type: 'inside',
             start: 0,
             end: 100,
-            height: 16,
           }
         ],
         tooltip: {

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

@@ -20,7 +20,9 @@ export default {
           trigger: 'item'
         },
         legend: {
-          bottom: 'bottom',
+          bottom: '5%',
+          left: '10%',
+          right: '10%',
           icon: 'circle'
         },
         series: [

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

@@ -44,9 +44,15 @@ export default {
         ],
         dataZoom: [
           {
+            type: 'slider',
+            start: 0,
+            end: 100,
+            height: 12,
+          },
+          {
+            type: 'inside',
             start: 0,
             end: 100,
-            height: 16,
           }
         ],
         tooltip: {

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

@@ -52,9 +52,15 @@ export default {
         ],
         dataZoom: [
           {
+            type: 'slider',
+            start: 0,
+            end: 100,
+            height: 12,
+          },
+          {
+            type: 'inside',
             start: 0,
             end: 100,
-            height: 16,
           }
         ],
         tooltip: {

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

@@ -49,9 +49,15 @@ export default {
         ],
         dataZoom: [
           {
+            type: 'slider',
+            start: 0,
+            end: 100,
+            height: 12,
+          },
+          {
+            type: 'inside',
             start: 0,
             end: 100,
-            height: 16,
           }
         ],
         tooltip: {

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

@@ -79,9 +79,15 @@ export default {
         ],
         dataZoom: [
           {
+            type: 'slider',
+            start: 0,
+            end: 100,
+            height: 12,
+          },
+          {
+            type: 'inside',
             start: 0,
             end: 100,
-            height: 16,
           }
         ],
         tooltip: {

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

@@ -79,9 +79,15 @@ export default {
         ],
         dataZoom: [
           {
+            type: 'slider',
+            start: 0,
+            end: 100,
+            height: 12,
+          },
+          {
+            type: 'inside',
             start: 0,
             end: 100,
-            height: 16,
           }
         ],
         tooltip: {

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

@@ -20,7 +20,7 @@ export default {
           trigger: 'item'
         },
         legend: {
-          bottom: 'bottom',
+          bottom: '8%',
           icon: 'circle'
         },
         series: [

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

@@ -44,9 +44,15 @@ export default {
         ],
         dataZoom: [
           {
+            type: 'slider',
+            start: 0,
+            end: 100,
+            height: 12,
+          },
+          {
+            type: 'inside',
             start: 0,
             end: 100,
-            height: 16,
           }
         ],
         tooltip: {

src/components/life/healthyHome/components/lifeHealthyHomeChart.vue

@@ -22,8 +22,8 @@ export default {
       let options = {
         legend: {
           data: [
-            '健康人数',
-            '患病人数',
+            '进舱人数',
+            '体检人数',
           ]
         },
         grid: {
@@ -71,19 +71,27 @@ export default {
         },
         series: [
           {
-            name: '健康人数',
+            name: '进舱人数',
             data: [233, 209, 296, 148, 233, 395, 329],
             type: 'bar',
+            barWidth: '15%',
             backgroundStyle: {
               color: 'rgba(180, 180, 180, 0.2)'
+            },
+            itemStyle: {
+              color: '#6FA8FE'
             }
           },
           {
-            name: '患病人数',
-            data: [31, 36, 18, 21, 73, 12, 59],
+            name: '体检人数',
+            data: [131, 136, 118, 121, 173, 188, 159],
             type: 'bar',
+            barWidth: '15%',
             backgroundStyle: {
               color: 'rgba(180, 180, 180, 0.2)'
+            },
+            itemStyle: {
+              color: '#FFDF80'
             }
           },
         ]

src/components/life/healthyHome/components/lifeHealthyHomeMonitor.vue

@@ -1,25 +1,31 @@
 <template>
-  <div class="iot-healthy-home-monitor-item" :style="{backgroundColor: bgColor}">
-    <div class="iot-healthy-home-monitor-title">{{ title }}</div>
-    <div class="iot-healthy-home-monitor-value">{{ value }}</div>
-    <div class="iot-healthy-home-monitor-position">{{ position }}</div>
+  <div class="iot-healthy-home-monitor-item" >
+    <div class="iot-healthy-home-monitor-item-icon">
+      <img :src="requireImg(icon)" width="50%"  />
+    </div>
+    <div class="iot-healthy-home-monitor-item-content">
+      <div class="iot-healthy-home-monitor-value">{{ value }}</div>
+      <div class="iot-healthy-home-monitor-title">{{ title }}</div>
+    </div>
   </div>
 </template>
 
 <script>
+import {requireImg} from "@/utils/requireImg";
+
 export default {
   data() {
     return {}
   },
   props: {
+    icon: String,
     title: String,
     value: String,
-    position: String,
-    bgColor: String,
   },
   mounted() {
   },
   methods: {
+    requireImg
   }
 }
 </script>
@@ -27,28 +33,35 @@ export default {
 <style lang="less" scoped>
 .iot-healthy-home-monitor-item {
   display: inline-block;
-  width: 30%;
+  width: 100%;
   height: 110px;
-  margin: 12px 10%;
-  .iot-healthy-home-monitor-title {
-    width: 100%;
-    text-align: center;
-    margin-top: 10%;
-    font-size: 20px;
-    color: white;
-    font-weight: bold;
-  }
-  .iot-healthy-home-monitor-value {
-    width: 100%;
-    text-align: center;
-    font-weight: bolder;
-    font-size: 22px;
+  background-color: #f7fbff;
+  .iot-healthy-home-monitor-item-icon {
+    display: inline-block;
+    vertical-align: top;
+    width: 45%;
+    height: 100%;
+    > img {
+      margin-left: 35%;
+      margin-top: 45%;
+    }
   }
-  .iot-healthy-home-monitor-position {
-    width: 100%;
-    text-align: center;
-    font-size: 15px;
-    color: gray;
+  .iot-healthy-home-monitor-item-content {
+    display: inline-block;
+    vertical-align: top;
+    width: 55%;
+    height: 100%;
+    .iot-healthy-home-monitor-value {
+      font-size: 22px;
+      margin-top: 20%;
+      text-align: center;
+    }
+    .iot-healthy-home-monitor-title {
+      font-size: 16px;
+      color: #B2B2B2;
+      text-align: center;
+      margin-top: 12%;
+    }
   }
 }
 </style>

src/components/life/healthyHome/lifeHealthyHome.vue

@@ -34,13 +34,14 @@ export default {
           type: 1,
           isHighLight: false,
           title: '最多患病问题',
-          content: ''
+          content: '高血压'
         },
         {
           type: 1,
           isHighLight: false,
           title: '值得关注',
-          content: ''
+          showStar: true,
+          content: '员工腰椎问题持续 上升'
         },
       ]
     }
@@ -64,23 +65,23 @@ export default {
 
 <template>
   <div class="lifeHealthyHome">
-    <a-row>
-      <a-col>
-        <div class="lifeHealthyHome-query">
-          <Query></Query>
-        </div>
-      </a-col>
-    </a-row>
-    <a-row>
-      <a-col>
-        <div class="lifeHealthyHome-core">
-          <Card title="核心指标">
-            <CoreData :data-list="coreData"></CoreData>
-          </Card>
-        </div>
-      </a-col>
-    </a-row>
-    <a-row :gutter="16">
+   <div class="page-query-core">
+     <a-row>
+       <a-col>
+         <div class="lifeHealthyHome-query">
+           <Query></Query>
+         </div>
+       </a-col>
+       <a-col>
+         <div class="lifeHealthyHome-core">
+           <Card title="核心指标">
+             <CoreData :data-list="coreData"></CoreData>
+           </Card>
+         </div>
+       </a-col>
+     </a-row>
+   </div>
+    <a-row >
       <a-col :span="18">
         <div class="lifeHealthyHome-left">
           <div class="lifeHealthyHome-detail">
@@ -94,12 +95,36 @@ export default {
         <div class="lifeHealthyHome-right">
           <div class="lifeHealthyHome-top">
             <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>
+              <a-row :gutter="[12,18]" style="padding: 12px 6%">
+                <a-col style="color: #B3B3B3">
+                  <div style="width: 50%;display: inline-block;text-align: center">
+                    <span style="background-color: #73e6ac;display: inline-block;width: 14px;height: 14px;"></span>
+                    <span style="display: inline-block;vertical-align: text-bottom;margin-left: 12px">室内</span>
+                  </div>
+                  <div style="width: 50%;display: inline-block;text-align: center">
+                    <span style="background-color: #80d4ff;display: inline-block;width: 14px;height: 14px"></span>
+                    <span style="display: inline-block;vertical-align: text-bottom;margin-left: 12px">室外</span>
+                  </div>
+                </a-col>
+                <a-col :span="12">
+                  <LifeHealthyHomeMonitor title="PM2.5" :value="'75'" icon="life/pm_green.png"></LifeHealthyHomeMonitor>
+                </a-col>
+                <a-col :span="12">
+                  <LifeHealthyHomeMonitor title="PM2.5" :value="'75'" icon="life/pm_blue.png"></LifeHealthyHomeMonitor>
+                </a-col>
+                <a-col :span="12">
+                  <LifeHealthyHomeMonitor title="湿 度" :value="'75'" icon="life/humidity_green.png"></LifeHealthyHomeMonitor>
+                </a-col>
+                <a-col :span="12">
+                  <LifeHealthyHomeMonitor title="湿 度" :value="'75'" icon="life/humidity_blue.png"></LifeHealthyHomeMonitor>
+                </a-col>
+                <a-col :span="12">
+                  <LifeHealthyHomeMonitor title="温 度" :value="'75'" icon="life/temperature_green.png"></LifeHealthyHomeMonitor>
+                </a-col>
+                <a-col :span="12">
+                  <LifeHealthyHomeMonitor title="温 度" :value="'75'" icon="life/temperature_blue.png"></LifeHealthyHomeMonitor>
+                </a-col>
+              </a-row>
             </Card>
           </div>
         </div>
@@ -119,23 +144,23 @@ export default {
   vertical-align: top;
   .lifeHealthyHome-query {
     width: 100%;
-    height: 60px;
-    margin-bottom: 8px;
   }
   .lifeHealthyHome-core {
     width: 100%;
-    margin-bottom: 8px;
   }
   .lifeHealthyHome-left {
-    margin-right: 1%;
-    > div {
-      margin-bottom: 8px;
-    }
+    margin-top: 12px;
+    margin-right: 6px;
+    height: 490px;
+    overflow: hidden;
+    background-color: #ffffff;
   }
   .lifeHealthyHome-right {
-    > div {
-      margin-bottom: 12px;
-    }
+    margin-top: 12px;
+    margin-left: 6px;
+    height: 490px;
+    overflow: hidden;
+    background-color: #ffffff;
   }
 }
 </style>

src/components/life/life.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="iot-life">
-    <!--<ContainerAside></ContainerAside>-->
+    <ContainerAside></ContainerAside>
     <div class="pageContainer-body">
       <Breadcrumb></Breadcrumb>
         <div class="pageContainer-content" >

src/components/life/parking/components/lifeParkConsumeChart.vue

@@ -21,26 +21,21 @@ export default {
     init() {
       let chart = this.$echarts.init(this.$refs.myChart);
       let option = {
+        color: ['#6FA8FE','#FFDF80','#FFB680','#62CC97','#66F2FF'],
         tooltip: {
           trigger: 'item'
         },
         legend: {
-          orient: '',
-          bottom: 'bottom',
-        },
-        grid: {
-          left: '0%', //默认10%
-          right: '0%', //默认10%
-          bottom: '0%', //默认60
-          top: '15%',
-          containLabel: true
-          //grid区域是否包含坐标轴的刻度标签
+          bottom: '15%',
+          left: 'center',
+          icon: 'circle'
         },
         series: [
           {
             name: '占用车位情况',
             type: 'pie',
-            radius: ['20%', '60%'],
+            radius: ['40%', '60%'],
+            center: ['50%','40%'],
             data: [
               { value: 850, name: '北京规划院' },
               { value: 735, name: '中迅院' },

src/components/life/parking/components/lifeParkTrendChart.vue

@@ -28,9 +28,9 @@ export default {
           ]
         },
         grid: {
-          left: '0%', //默认10%
-          right: '0%', //默认10%
-          bottom: '0%', //默认60
+          left: '2%', //默认10%
+          right: '2%', //默认10%
+          bottom: '14%', //默认60
           top: '15%',
           containLabel: true
           //grid区域是否包含坐标轴的刻度标签
@@ -38,7 +38,15 @@ export default {
         xAxis: {
           data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
         },
-        yAxis: {},
+        yAxis: [
+          {
+            name: '车辆',
+            type: 'value',
+            nameTextStyle: {
+              padding: [10, 0, 10, -35]
+            },
+          }
+        ],
         tooltip: {
           trigger: 'axis',
           axisPointer: {
@@ -57,6 +65,19 @@ export default {
           },
           backgroundColor: 'rgba(0,0,0,0.8)',
         },
+        dataZoom: [
+          {
+            type: 'slider',
+            start: 0,
+            end: 100,
+            height: 12,
+          },
+          {
+            type: 'inside',
+            start: 0,
+            end: 100,
+          }
+        ],
         series: [
           {
             name: '进入车辆数',
@@ -64,11 +85,26 @@ export default {
             type: 'line',
             stack: 'x',
             smooth: true,
+            showSymbol:false,
             areaStyle: {
-              opacity: 0.5,
-              color: '#5087ec',
-
-            }
+              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
+            },
           },
           {
             name: '离开车辆数',
@@ -76,10 +112,26 @@ export default {
             type: 'line',
             stack: 'x',
             smooth: true,
+            showSymbol:false,
             areaStyle: {
-              opacity: 0.5,
-              color: '#68bbc4',
-            }
+              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: '#FFD7AC' // 0% 处的颜色
+              }, {
+                offset: 0.8,
+                color: '#ffffff' // 100% 处的颜色
+              }], false),
+            },
+            itemStyle: {
+              color: '#FDB456'
+            },
+            lineStyle: {
+              color: "#FDB456",
+              width: 1,
+            },
+            emphasis: {
+              scale:1.5
+            },
           }
         ]
       };

src/components/life/parking/components/lifeParkUnNormalChart.vue

@@ -21,26 +21,21 @@ export default {
     init() {
       let chart = this.$echarts.init(this.$refs.myChart);
       let option = {
+        color: ['#6FA8FE','#FFDF80','#FFB680','#62CC97','#66F2FF'],
         tooltip: {
           trigger: 'item'
         },
         legend: {
-          orient: '',
-          bottom: 'bottom',
-        },
-        grid: {
-          left: '0%', //默认10%
-          right: '0%', //默认10%
-          bottom: '0%', //默认60
-          top: '15%',
-          containLabel: true
-          //grid区域是否包含坐标轴的刻度标签
+          bottom: '15%',
+          left: 'center',
+          icon: 'circle'
         },
         series: [
           {
             name: '违停情况',
             type: 'pie',
-            radius: '50%',
+            radius: ['40%', '60%'],
+            center: ['50%','40%'],
             data: [
               { value: 850, name: '北京规划院' },
               { value: 735, name: '中迅院' },

src/components/life/parking/lifeParking.vue

@@ -44,7 +44,8 @@ export default {
           type: 1,
           isHighLight: false,
           title: '值得关注',
-          content: 'testhnjlkjn'
+          showStar: true,
+          content: '建议增加停车位  180个'
         },
       ]
     }
@@ -71,38 +72,38 @@ export default {
 
 <template>
   <div class="lifeParking">
-    <a-row>
-      <a-col>
-        <div class="lifeParking-query">
-          <Query></Query>
-        </div>
-      </a-col>
-    </a-row>
-    <a-row>
-      <a-col>
-        <div class="lifeParking-core">
-          <Card title="核心指标">
-            <CoreData :data-list="coreData"></CoreData>
-          </Card>
-        </div>
-      </a-col>
-    </a-row>
-    <a-row :gutter="16">
+   <div class="page-query-core">
+     <a-row>
+       <a-col>
+         <div class="lifeParking-query">
+           <Query></Query>
+         </div>
+       </a-col>
+       <a-col>
+         <div class="lifeParking-core">
+           <Card title="核心指标">
+             <CoreData :data-list="coreData"></CoreData>
+           </Card>
+         </div>
+       </a-col>
+     </a-row>
+   </div>
+    <a-row >
       <a-col :span="18">
         <div class="lifeParking-left">
           <div class="lifeParking-trend">
             <Card title="车流态势">
-              <LifeParkTrendChart :height="300"></LifeParkTrendChart>
+              <LifeParkTrendChart :height="360"></LifeParkTrendChart>
             </Card>
           </div>
           <div class="lifeParking-unNormal">
             <Card title="违停情况">
-              <LifeParkUnNormalChart :height="200"></LifeParkUnNormalChart>
+              <LifeParkUnNormalChart :height="390"></LifeParkUnNormalChart>
             </Card>
           </div>
           <div class="lifeParking-consume">
             <Card title="占用车位数量">
-              <LifeParkConsumeChart :height="200"></LifeParkConsumeChart>
+              <LifeParkConsumeChart :height="390"></LifeParkConsumeChart>
             </Card>
           </div>
         </div>
@@ -132,29 +133,34 @@ export default {
 .lifeParking {
   width: 100%;
   height: auto;
+  padding-bottom: 12px;
   display: inline-block;
   vertical-align: top;
   .lifeParking-query {
     width: 100%;
-    height: 60px;
-    margin-bottom: 8px;
   }
   .lifeParking-core {
     width: 100%;
-    margin-bottom: 8px;
   }
   .lifeParking-left {
-    margin-right: 1%;
+    margin-right: 12px;
     > div {
-      margin-bottom: 8px;
+      margin-top: 12px;
+      overflow: hidden;
+    }
+    .lifeParking-trend {
+      background-color: #ffffff;
+      height: 390px;
     }
     .lifeParking-unNormal {
+      height: 390px;
       display: inline-block;
       vertical-align: top;
-      padding: 0 3px;
+      padding-right: 6px;
       width: 50%;
     }
     .lifeParking-consume {
+      height: 390px;
       display: inline-block;
       vertical-align: top;
       padding: 0 3px;
@@ -163,7 +169,15 @@ export default {
   }
   .lifeParking-right {
     > div {
-      margin-bottom: 12px;
+      background-color: #ffffff;
+      margin-top: 12px;
+      overflow: hidden;
+    }
+    .lifeParking-top {
+      height: 390px;
+    }
+    .lifeParking-detail {
+      height: 390px;
     }
   }
 }

src/components/life/restaurant/components/LifeRestPayChart.vue

@@ -19,32 +19,34 @@ export default {
     initChart() {
       let chart = this.$echarts.init(this.$refs.myChart)
       let option = {
+        color: ['#6FA8FE', '#66F2FF', '#FFB680', '#62CC97'],
         tooltip: {
           trigger: 'item'
         },
         legend: {
-          top: '5%',
-          left: 'center'
+          bottom: '8%',
+          left: 'center',
+          icon: 'circle'
         },
         series: [
           {
-            name: 'Access From',
+            name: 'jine ',
             type: 'pie',
             radius: ['40%', '70%'],
-            avoidLabelOverlap: false,
+            center: ['50%','40%'],
+            avoidLabelOverlap: true,
             label: {
-              show: false,
-              position: 'center'
+              show: true,
             },
             emphasis: {
               label: {
                 show: true,
-                fontSize: 40,
+                fontSize: '14px',
                 fontWeight: 'bold'
               }
             },
             labelLine: {
-              show: false
+              show: true
             },
             data: [
               { value: 1048, name: '人脸支付' },

src/components/life/restaurant/components/LifeRestProfitChart.vue

@@ -19,32 +19,34 @@ export default {
     initChart() {
       let chart = this.$echarts.init(this.$refs.myChart)
       let option = {
+        color: ['#80D4FF', '#A6A6FF','#FFDF80'],
         tooltip: {
           trigger: 'item'
         },
         legend: {
-          top: '5%',
-          left: 'center'
+          bottom: '8%',
+          left: 'center',
+          icon: 'circle'
         },
         series: [
           {
-            name: 'Access From',
+            name: '金额',
             type: 'pie',
             radius: ['40%', '70%'],
+            center: ['50%','40%'],
             avoidLabelOverlap: false,
             label: {
-              show: false,
-              position: 'center'
+              show: true,
             },
             emphasis: {
               label: {
                 show: true,
-                fontSize: 40,
+                fontSize: '14px',
                 fontWeight: 'bold'
               }
             },
             labelLine: {
-              show: false
+              show: true
             },
             data: [
               { value: 1048, name: '早餐' },

src/components/life/restaurant/components/lifeRestConsumeChart.vue

@@ -14,7 +14,9 @@ export default {
     height: Number
   },
   mounted() {
-    this.init()
+    this.$nextTick(()=>{
+      this.init()
+    })
   },
   methods: {
     init() {
@@ -31,9 +33,9 @@ export default {
           ]
         },
         grid: {
-          left: '0%', //默认10%
-          right: '0%', //默认10%
-          bottom: '0%', //默认60
+          left: '2%', //默认10%
+          right: '2%', //默认10%
+          bottom: '16%', //默认60
           top: '15%',
           containLabel: true
           //grid区域是否包含坐标轴的刻度标签
@@ -44,17 +46,10 @@ export default {
         },
         yAxis: [
           {
-            name: '人数',
             type: 'value',
+            name: '平均单价(元/单)',
             nameTextStyle: {
-              padding: [10, 0, 10, -20]
-            },
-          },
-          {
-            type: 'value',
-            name: '平均单价',
-            nameTextStyle: {
-              padding: [10, 20, 10, 0]
+              padding: [10, 0, 10, 20]
             },
             splitNumber: 5,
             splitLine: {
@@ -71,9 +66,29 @@ export default {
               textStyle: {
                 fontSize: 12
               },
-              formatter: '{value} 元/单'
+              //formatter: '{value} 元/单'
             }
           },
+          {
+            name: '人数(人)',
+            type: 'value',
+            nameTextStyle: {
+              padding: [10, 0, 10, 15]
+            },
+          },
+        ],
+        dataZoom: [
+          {
+            type: 'slider',
+            start: 0,
+            end: 100,
+            height: 12,
+          },
+          {
+            type: 'inside',
+            start: 0,
+            end: 100,
+          }
         ],
         tooltip: {
           trigger: 'axis',
@@ -99,8 +114,13 @@ export default {
             data: [120, 200, 150, 80, 70, 110, 130],
             type: 'bar',
             stack: 'A',
+            barWidth: '25%',
+            yAxisIndex:1,
             backgroundStyle: {
               color: 'rgba(180, 180, 180, 0.2)'
+            },
+            itemStyle: {
+              color: '#80D4FF'
             }
           },
           {
@@ -108,8 +128,12 @@ export default {
             data: [78, 154, 111, 70, 66, 88, 100],
             type: 'bar',
             stack: 'A',
+            yAxisIndex:1,
             backgroundStyle: {
               color: 'rgba(180, 180, 180, 0.2)'
+            },
+            itemStyle: {
+              color: '#A6A6FF'
             }
           },
           {
@@ -117,27 +141,37 @@ export default {
             data: [78, 154, 111, 70, 66, 88, 100],
             type: 'bar',
             stack: 'A',
+            yAxisIndex:1,
             backgroundStyle: {
               color: 'rgba(180, 180, 180, 0.2)'
+            },
+            itemStyle: {
+              color: '#FFDF80'
             }
           },
           {
             name: '早餐单价',
             data: [30, 17, 21, 32, 13, 18, 32],
-            yAxisIndex:1,
             type: 'line',
+            itemStyle: {
+              color: '#72D0FF'
+            }
           },
           {
             name: '午餐单价',
             data: [22, 34, 25, 18, 35, 47, 54],
-            yAxisIndex:1,
             type: 'line',
+            itemStyle: {
+              color: '#8080FF'
+            }
           },
           {
             name: '晚餐单价',
             data: [22, 14, 19, 32, 18, 33, 25],
-            yAxisIndex:1,
             type: 'line',
+            itemStyle: {
+              color: '#FDB456'
+            }
           }
         ]
       };

src/components/life/restaurant/components/lifeRestEatChart.vue

@@ -14,7 +14,9 @@ export default {
     height: Number
   },
   mounted() {
-    this.init()
+    this.$nextTick(()=>{
+      this.init()
+    })
   },
   methods: {
     init() {
@@ -28,9 +30,9 @@ export default {
           ]
         },
         grid: {
-          left: '0%', //默认10%
-          right: '0%', //默认10%
-          bottom: '0%', //默认60
+          left: '2%', //默认10%
+          right: '2%', //默认10%
+          bottom: '16%', //默认60
           top: '15%',
           containLabel: true
           //grid区域是否包含坐标轴的刻度标签
@@ -41,19 +43,12 @@ export default {
         },
         yAxis: [
           {
-            name: '人数',
             type: 'value',
-            nameTextStyle: {
-              padding: [10, 0, 10, -20]
-            },
-          },
-          {
-            type: 'value',
-            name: '就餐人数占比',
+            name: '就餐人数占比(%)',
             min: 0,
             max: 100,
             nameTextStyle: {
-              padding: [10, 20, 10, 0]
+              padding: [10, 0, 10, 20]
             },
             splitNumber: 5,
             splitLine: {
@@ -72,6 +67,13 @@ export default {
               }
             }
           },
+          {
+            name: '人数(人)',
+            type: 'value',
+            nameTextStyle: {
+              padding: [10, 0, 10, 15]
+            },
+          },
         ],
         tooltip: {
           trigger: 'axis',
@@ -91,14 +93,32 @@ export default {
           },
           backgroundColor: 'rgba(0,0,0,0.8)',
         },
+        dataZoom: [
+          {
+            type: 'slider',
+            start: 0,
+            end: 100,
+            height: 12,
+          },
+          {
+            type: 'inside',
+            start: 0,
+            end: 100,
+          }
+        ],
         series: [
           {
             name: '客流人数',
             data: [120, 200, 150, 80, 70, 110, 130],
             type: 'bar',
             stack: 'A',
+            yAxisIndex: 1,
+            barWidth: '25%',
             backgroundStyle: {
               color: 'rgba(180, 180, 180, 0.2)'
+            },
+            itemStyle: {
+              color: '#6FA8FE'
             }
           },
           {
@@ -106,15 +126,23 @@ export default {
             data: [78, 154, 111, 70, 66, 88, 100],
             type: 'bar',
             stack: 'A',
+            yAxisIndex: 1,
             backgroundStyle: {
               color: 'rgba(180, 180, 180, 0.2)'
+            },
+            itemStyle: {
+              color: '#62CC97'
             }
           },
           {
             name: '就餐人数占比',
             data: [50, 55, 60, 18, 35, 47, 80],
-            yAxisIndex:1,
+            yAxisIndex: 0,
             type: 'line',
+            yAxis: 0,
+            itemStyle: {
+              color: '#FFB059'
+            }
           }
         ]
       };

src/components/life/restaurant/components/lifeRestTopMenu.vue

@@ -1,10 +1,6 @@
 <template>
   <a-table
-    :rowKey="
-      (record, index) => {
-        return index;
-      }
-    "
+    :rowKey=" (record, index) => index"
     :columns="columns"
     :show-header="false"
     :data-source="tableData"

src/components/life/restaurant/lifeRestaurant.vue

@@ -44,9 +44,9 @@ export default {
         },
         {
           type: 1,
-          isHighLight: true,
           title: '值得关注',
-          content: 'testhnjlkjn'
+          showStar: true,
+          content: '员工偏爱川菜，建议增加'
         },
       ]
     }
@@ -74,43 +74,43 @@ export default {
 
 <template>
   <div class="lifeRestaurant">
+    <div class="page-query-core">
+      <a-row>
+        <a-col>
+          <div class="lifeRestaurant-query">
+            <Query></Query>
+          </div>
+        </a-col>
+        <a-col>
+          <div class="lifeRestaurant-core">
+            <Card title="核心指标">
+              <CoreData :data-list="coreData"></CoreData>
+            </Card>
+          </div>
+        </a-col>
+      </a-row>
+    </div>
     <a-row>
-      <a-col>
-        <div class="lifeRestaurant-query">
-          <Query></Query>
-        </div>
-      </a-col>
-    </a-row>
-    <a-row>
-      <a-col>
-        <div class="lifeRestaurant-core">
-          <Card title="核心指标">
-            <CoreData :data-list="coreData"></CoreData>
-          </Card>
-        </div>
-      </a-col>
-    </a-row>
-    <a-row :gutter="16">
       <a-col :span="18">
         <div class="lifeRestaurant-left">
           <div class="lifeRestaurant-eat">
             <Card title="用餐分析">
-              <LifeRestEatChart :height="300"></LifeRestEatChart>
+              <LifeRestEatChart :height="320"></LifeRestEatChart>
             </Card>
           </div>
           <div class="lifeRestaurant-consume">
             <Card title="消费分析">
-              <LifeRestConsumeChart :height="300"></LifeRestConsumeChart>
+              <LifeRestConsumeChart :height="320"></LifeRestConsumeChart>
             </Card>
           </div>
           <div class="lifeRestaurant-profit">
             <Card title="盈利分析">
-              <LifeRestProfitChart :height="200"></LifeRestProfitChart>
+              <LifeRestProfitChart :height="300"></LifeRestProfitChart>
             </Card>
           </div>
           <div class="lifeRestaurant-pay">
             <Card title="支付分析">
-              <LifeRestPayChart :height="200"></LifeRestPayChart>
+              <LifeRestPayChart :height="300"></LifeRestPayChart>
             </Card>
           </div>
         </div>
@@ -118,12 +118,12 @@ export default {
       <a-col :span="6">
         <div class="lifeRestaurant-right">
           <div class="lifeRestaurant-top">
-            <Card title="受欢迎菜品">
+            <Card title="受欢迎菜品" style="height: 350px ">
               <LifeRestTopMenu ></LifeRestTopMenu>
             </Card>
           </div>
           <div class="lifeRestaurant-cookbook">
-            <Card title="每日菜谱">
+            <Card title="每日菜谱" style="height: 700px">
               <LifeRestDailyMenu ></LifeRestDailyMenu>
             </Card>
           </div>
@@ -140,38 +140,51 @@ export default {
 .lifeRestaurant {
   width: 100%;
   height: auto;
+  padding-bottom: 15px;
   display: inline-block;
   vertical-align: top;
   .lifeRestaurant-query {
     width: 100%;
-    height: 60px;
-    margin-bottom: 8px;
   }
   .lifeRestaurant-core {
     width: 100%;
-    margin-bottom: 8px;
   }
   .lifeRestaurant-left {
-    margin-right: 1%;
+    margin-right: 12px;
     > div {
-      margin-bottom: 8px;
+      margin-top: 12px;
+    }
+    .lifeRestaurant-eat {
+      width: 100%;
+      height: 350px;
+      overflow: hidden;
+    }
+    .lifeRestaurant-consume {
+      width: 100%;
+      height: 350px;
+      overflow: hidden;
     }
     .lifeRestaurant-profit {
       display: inline-block;
       vertical-align: top;
-      padding: 0 3px;
+      padding-right: 6px;
       width: 50%;
+      height: 340px;
+      overflow: hidden;
     }
     .lifeRestaurant-pay {
       display: inline-block;
       vertical-align: top;
-      padding: 0 3px;
+      padding-left: 6px;
       width: 50%;
+      height: 340px;
+      overflow: hidden;
     }
   }
   .lifeRestaurant-right {
     > div {
-      margin-bottom: 12px;
+      margin-top: 12px;
+      overflow: hidden;
     }
   }
 }

src/components/life/supermarket/components/lifeSupermarketAnalysisChart.vue

@@ -31,8 +31,8 @@ export default {
         },
         grid: {
           left: '2%', //默认10%
-          right: '10%', //默认10%
-          bottom: '0%', //默认60
+          right: '7%', //默认10%
+          bottom: '10%', //默认60
           top: '15%',
           containLabel: true
           //grid区域是否包含坐标轴的刻度标签
@@ -54,7 +54,7 @@ export default {
             },
           },
           {
-            name: '消费总额',
+            name: '消费总额(元)',
             type: 'value',
             axisLine: {
               show: true,
@@ -66,7 +66,7 @@ export default {
           },
           {
             type: 'value',
-            name: '交易订单',
+            name: '交易订单(单)',
             axisLine: {
               show: true,
             },
@@ -111,15 +111,32 @@ export default {
           },
           backgroundColor: 'rgba(0,0,0,0.8)',
         },
+        dataZoom: [
+          {
+            type: 'slider',
+            start: 0,
+            end: 100,
+            height: 12,
+          },
+          {
+            type: 'inside',
+            start: 0,
+            end: 100,
+          }
+        ],
         series: [
           {
             name: '上午消费总额',
             data: [233, 209, 296, 148, 233, 395, 329],
             type: 'bar',
             stack: 'A',
+            barWidth: '15%',
             yAxisIndex: 1,
             backgroundStyle: {
               color: 'rgba(180, 180, 180, 0.2)'
+            },
+            itemStyle: {
+              color: '#A5A5FF'
             }
           },
           {
@@ -130,6 +147,9 @@ export default {
             yAxisIndex: 1,
             backgroundStyle: {
               color: 'rgba(180, 180, 180, 0.2)'
+            },
+            itemStyle: {
+              color: '#81D5FF'
             }
           },
           {
@@ -137,9 +157,13 @@ export default {
             data: [42, 48, 30, 35, 63, 60, 64],
             type: 'bar',
             stack: 'B',
+            barWidth: '15%',
             yAxisIndex: 2,
             backgroundStyle: {
               color: 'rgba(180, 180, 180, 0.2)'
+            },
+            itemStyle: {
+              color: '#79F1E8'
             }
           },
           {
@@ -150,6 +174,9 @@ export default {
             yAxisIndex: 2,
             backgroundStyle: {
               color: 'rgba(180, 180, 180, 0.2)'
+            },
+            itemStyle: {
+              color: '#FFDD7E'
             }
           },
           {
@@ -157,6 +184,9 @@ export default {
             data: [31, 36, 18, 21, 73, 12, 59],
             yAxisIndex:0,
             type: 'line',
+            itemStyle: {
+              color: '#FFB059'
+            }
           }
         ]
       };

src/components/life/supermarket/components/lifeSupermarketTopTable.vue

@@ -29,6 +29,16 @@ export default {
           dataIndex: "name",
           key: "name",
         },
+        {
+          title: "销量",
+          dataIndex: "num",
+          key: "num",
+        },
+        {
+          title: "单价",
+          dataIndex: "price",
+          key: "price",
+        },
       ],
       tableData: [
         {

src/components/life/supermarket/lifeSupermarket.vue

@@ -45,7 +45,8 @@ export default {
           type: 1,
           isHighLight: false,
           title: '值得关注',
-          content: ''
+          showStar: true,
+          content: '本月盈利将达 12 万元'
         },
       ]
     }
@@ -69,28 +70,28 @@ export default {
 
 <template>
   <div class="lifeSupermarket">
-    <a-row>
-      <a-col>
-        <div class="lifeSupermarket-query">
-          <Query></Query>
-        </div>
-      </a-col>
-    </a-row>
-    <a-row>
-      <a-col>
-        <div class="lifeSupermarket-core">
-          <Card title="核心指标">
-            <CoreData :data-list="coreData"></CoreData>
-          </Card>
-        </div>
-      </a-col>
-    </a-row>
-    <a-row :gutter="16">
+    <div class="page-query-core">
+      <a-row>
+        <a-col>
+          <div class="lifeSupermarket-query">
+            <Query></Query>
+          </div>
+        </a-col>
+        <a-col>
+          <div class="lifeSupermarket-core">
+            <Card title="核心指标">
+              <CoreData :data-list="coreData"></CoreData>
+            </Card>
+          </div>
+        </a-col>
+      </a-row>
+    </div>
+    <a-row >
       <a-col :span="18">
         <div class="lifeSupermarket-left">
           <div class="lifeSupermarket-detail">
             <Card title="商超分析">
-              <LifeSupermarketAnalysisChart :height="300"></LifeSupermarketAnalysisChart>
+              <LifeSupermarketAnalysisChart :height="460"></LifeSupermarketAnalysisChart>
             </Card>
           </div>
         </div>
@@ -99,7 +100,7 @@ export default {
         <div class="lifeSupermarket-right">
           <div class="lifeSupermarket-top">
             <Card title="商品排行">
-              <LifeSupermarketTopTable></LifeSupermarketTopTable>
+              <LifeSupermarketTopTable style="padding: 0 8px;"></LifeSupermarketTopTable>
             </Card>
           </div>
         </div>
@@ -117,25 +118,26 @@ export default {
   height: auto;
   display: inline-block;
   vertical-align: top;
+  padding-bottom: 12px;
   .lifeSupermarket-query {
     width: 100%;
-    height: 60px;
-    margin-bottom: 8px;
   }
   .lifeSupermarket-core {
     width: 100%;
-    margin-bottom: 8px;
   }
   .lifeSupermarket-left {
-    margin-right: 1%;
-    > div {
-      margin-bottom: 8px;
-    }
+    margin-top: 12px;
+    margin-right: 6px;
+    background-color: #ffffff;
+    height: 490px;
+    overflow: hidden;
   }
   .lifeSupermarket-right {
-    > div {
-      margin-bottom: 12px;
-    }
+    margin-top: 12px;
+    margin-left: 6px;
+    background-color: #ffffff;
+    height: 490px;
+    overflow: hidden;
   }
 }
 </style>

src/components/scene/meeting/chart/meetingNumCharts.vue

@@ -0,0 +1,79 @@
+<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'],
+        grid: {
+          left: '2%', //默认10%
+          right: '2%', //默认10%
+          bottom: '0%', //默认60
+          top: '15%',
+          containLabel: true
+          //grid区域是否包含坐标轴的刻度标签
+        },
+        xAxis: {
+          type: 'category',
+          data: ['2月1日', '2月2日', '2月3日', '2月4日', '2月5日', '2月6日', '2月7日', '2月8日', '2月9日', '2月10日', '2月11日', '2月12日', '2月13日', '2月14日', '2月15日', '2月16日', '2月17日', '2月18日', '2月19日', '2月20日', '2月21日', '2月22日', '2月23日', '2月24日', '2月25日', '2月26日', '2月27日', '2月28日']
+        },
+        yAxis: [
+          {
+            name: '次数',
+            type: 'value',
+            nameTextStyle: {
+              padding: [0, 0, 0, 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: [
+          {
+            data: [80, 128, 115, 73, 118, 128, 88, 147, 106, 123, 68, 78, 79, 135, 84, 120, 106, 98, 67, 137, 147, 64, 86, 117, 117, 122, 106, 75],
+            type: 'bar',
+            stack: 'A',
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            }
+          }
+        ]
+      };
+      chart.setOption(options);
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+</style>

src/components/scene/meeting/chart/meetingPersonCharts.vue

@@ -0,0 +1,79 @@
+<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'],
+        grid: {
+          left: '2%', //默认10%
+          right: '2%', //默认10%
+          bottom: '0%', //默认60
+          top: '15%',
+          containLabel: true
+          //grid区域是否包含坐标轴的刻度标签
+        },
+        xAxis: {
+          type: 'category',
+          data: ['2月1日', '2月2日', '2月3日', '2月4日', '2月5日', '2月6日', '2月7日', '2月8日', '2月9日', '2月10日', '2月11日', '2月12日', '2月13日', '2月14日', '2月15日', '2月16日', '2月17日', '2月18日', '2月19日', '2月20日', '2月21日', '2月22日', '2月23日', '2月24日', '2月25日', '2月26日', '2月27日', '2月28日']
+        },
+        yAxis: [
+          {
+            name: '人数',
+            type: 'value',
+            nameTextStyle: {
+              padding: [0, 0, 0, 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: [
+          {
+            data: [55, 54, 12, 25, 54, 54, 47, 52, 13, 12, 33, 25, 44, 44, 48, 10, 36, 50, 8, 40, 25, 29, 39, 44, 46, 40, 55, 44],
+            type: 'bar',
+            stack: 'A',
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            }
+          }
+        ]
+      };
+      chart.setOption(options);
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+</style>

src/components/scene/meeting/chart/meetingPersonDistributeChart.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="myChart" ref="myChart" :style="{height: height+'px'}"></div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  props: {
+    height: Number
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      let chart = this.$echarts.init(this.$refs.myChart)
+      let option = {
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          right: 'right',
+          top: '20%'
+        },
+
+        series: [
+          {
+            name: '人数分布',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            //avoidLabelOverlap: false,
+            label: {
+              show: false,
+              formatter: params => {
+                let name = params.name;
+                return name
+              },
+            },
+            emphasis: {
+              label: {
+                show: false,
+                fontSize: 40,
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: 104, name: '4人' },
+              { value: 73, name: '6人' },
+              { value: 58, name: '8人' },
+              { value: 46, name: '10人' },
+              { value: 87, name: '12人' },
+              { value: 66, name: '14人' },
+              { value: 55, name: '18人' },
+              { value: 30, name: '240分钟' },
+            ]
+          }
+        ]
+      };
+      chart.setOption(option);
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/components/scene/meeting/chart/meetingTimeCharts.vue

@@ -0,0 +1,79 @@
+<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'],
+        grid: {
+          left: '2%', //默认10%
+          right: '2%', //默认10%
+          bottom: '0%', //默认60
+          top: '15%',
+          containLabel: true
+          //grid区域是否包含坐标轴的刻度标签
+        },
+        xAxis: {
+          type: 'category',
+          data: ['2月1日', '2月2日', '2月3日', '2月4日', '2月5日', '2月6日', '2月7日', '2月8日', '2月9日', '2月10日', '2月11日', '2月12日', '2月13日', '2月14日', '2月15日', '2月16日', '2月17日', '2月18日', '2月19日', '2月20日', '2月21日', '2月22日', '2月23日', '2月24日', '2月25日', '2月26日', '2月27日', '2月28日']
+        },
+        yAxis: [
+          {
+            name: '分钟',
+            type: 'value',
+            nameTextStyle: {
+              padding: [0, 0, 0, 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: [
+          {
+            data: [32, 39, 54, 55, 101, 76, 60, 42, 36, 57, 40, 85, 119, 82, 103, 111, 90, 66, 88, 100, 30, 54, 103, 104, 104, 61, 75, 88],
+            type: 'bar',
+            stack: 'A',
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            }
+          }
+        ]
+      };
+      chart.setOption(options);
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+</style>

src/components/scene/meeting/chart/meetingTimeDistributeChart.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="myChart" ref="myChart" :style="{height: height+'px'}"></div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  props: {
+    height: Number
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      let chart = this.$echarts.init(this.$refs.myChart)
+      let option = {
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          right: 'right',
+          top: '20%'
+        },
+
+        series: [
+          {
+            name: '时长分布',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            //avoidLabelOverlap: false,
+            label: {
+              show: false,
+              formatter: params => {
+                let name = params.name;
+                return params.name
+              },
+            },
+            emphasis: {
+              label: {
+                show: false,
+                fontSize: 40,
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: 104, name: '30分钟' },
+              { value: 73, name: '60分钟' },
+              { value: 58, name: '90分钟' },
+              { value: 46, name: '120分钟' },
+              { value: 87, name: '150分钟' },
+              { value: 66, name: '180分钟' },
+              { value: 55, name: '210分钟' },
+              { value: 30, name: '240分钟' },
+            ]
+          }
+        ]
+      };
+      chart.setOption(option);
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/components/scene/meeting/config/meetingRoomConfig.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="meetingRoomConfig">
+    <a-steps :current="currStep" size="small">
+      <a-step title="基本信息" />
+      <a-step title="关联及配置" />
+      <a-step title="测试及完成" />
+    </a-steps>
+
+
+    <div class="meetingRoomConfig-baseInfo" v-if="currStep===0">
+      <a-form-model :model="basicInfo" >
+        <a-form-model-item label="场景名称">
+          <a-input v-model="basicInfo.name" type="text"  />
+        </a-form-model-item>
+        <a-form-model-item label="类别">
+          <a-select v-model="basicInfo.type" style="width: 120px;">
+            <a-select-option value="1">智慧会议室</a-select-option>
+          </a-select>
+        </a-form-model-item>
+        <a-form-model-item label="楼层">
+
+        </a-form-model-item>
+        <a-form-model-item label="房间">
+
+        </a-form-model-item>
+        <a-form-model-item label="权重">
+
+        </a-form-model-item>
+        <a-form-model-item label="规则描述">
+
+        </a-form-model-item>
+      </a-form-model>
+    </div>
+
+    <div class="meetingRoomConfig-devices" v-if="currStep===1">
+      配置设备
+    </div>
+
+    <div class="meetingRoomConfig-test" v-if="currStep===2">
+      测试
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      currStep: 0,
+      basicInfo: {},
+      deviceConfigs: [],
+
+    }
+  },
+  mounted() {
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.meetingRoomConfig {
+  .meetingRoomConfig-baseInfo {
+    //width: 90%;
+    //margin: 15px auto 0;
+  }
+}
+</style>

src/components/scene/meeting/config/meetingRoomDetails.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="meetingRoom-detail">
+    <div class="meetingRoom-detail-title">
+      {{ data.name }}
+    </div>
+
+    <div class="meetingRoom-detail-content">
+      <a-descriptions :column="2">
+        <a-descriptions-item label="预约人" >
+          张三
+        </a-descriptions-item>
+        <a-descriptions-item label="工号">
+          011111
+        </a-descriptions-item>
+        <a-descriptions-item label="公司">
+          北京电信规划设计院有限公司
+        </a-descriptions-item>
+        <a-descriptions-item label="部门">
+          创新产品研发中心
+        </a-descriptions-item>
+        <a-descriptions-item label="预约时间" >
+          2023-02-01 9:00 - 2023-02-01 10:00
+        </a-descriptions-item>
+        <a-descriptions-item label="预定时间">
+          2023-01-28 14:00:00
+        </a-descriptions-item>
+
+        <a-descriptions-item label="会议主题" :span="2">
+          产品研发会议
+        </a-descriptions-item>
+        <a-descriptions-item label="备注" :span="2">
+          产品研发会议
+        </a-descriptions-item>
+
+
+      </a-descriptions>
+    </div>
+    <div class="meetingRoom-detail-member">
+      <div>参会人信息</div>
+      <a-table
+          :rowKey=" (record, index) => index"
+          :columns="columns"
+          :data-source="tableData"
+          :pagination="false"
+      >
+      </a-table>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [],
+      columns: [
+        {
+          title: '姓名',
+          dataIndex: 'name',
+          key: 'name',
+        },{
+          title: '工号',
+          dataIndex: 'workNum',
+          key: 'workNum',
+        },{
+          title: '部门',
+          dataIndex: 'dept',
+          key: 'dept',
+        },{
+          title: '公司',
+          dataIndex: 'company',
+          key: 'company',
+        },{
+          title: '人脸信息',
+          dataIndex: 'faceStatus',
+          key: 'faceStatus',
+        }
+      ]
+    }
+  },
+  props: {
+    data: Object,
+  },
+  mounted() {
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.meetingRoom-detail {
+  width: 100%;
+  .meetingRoom-detail-title {
+    color: #296fe4;
+    font-size: 18px;
+  }
+  .meetingRoom-detail-content {
+    margin: 8px 12px;
+    padding: 12px;
+    background-color: #fafafa;
+  }
+}
+</style>

src/components/scene/meeting/config/meetingRoomItem.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="meetingRoomItem">
+    <div>
+      <div style="width: 70%;display: inline-block">
+        <div class="meetingRoomItem-title">
+          {{ obj.name }}
+          <span style="font-size: 15px">{{ '[' + obj.timeRange[0] + '-' + obj.timeRange[1] + ']' }}</span>
+        </div>
+
+        <div class="meetingRoomItem-devices">
+          <div class="meetingRoomItem-device" v-for="device in obj.devices" :key="device.id">
+
+          </div>
+        </div>
+
+      </div>
+      <div style="width: 30%;display: inline-block;vertical-align: top">
+        <div class="meetingRoomItem-state">
+          <span v-if="obj.status==1">会议中</span>
+          <span v-if="obj.status==2">闲置中</span>
+          <span v-if="obj.status==3">已预订</span>
+        </div>
+        <div class="meetingRoomItem-num">
+          {{ obj.time }}
+        </div>
+      </div>
+
+
+      <div class="meetingRoomItem-opr">
+        <a-button class="meetingRoomItem-opr-btn" @click="viewDetails">查看信息</a-button>
+        <a-button class="meetingRoomItem-opr-btn" @click="configMeeting">配置策略</a-button>
+      </div>
+
+    </div>
+
+    <a-modal v-if="detailVisible" v-model="detailVisible" title="会议室详情" :width="1000" style="height: 650px;overflow-y: auto"
+             :footer="null"
+    >
+      <MeetingRoomDetails :data="obj" />
+    </a-modal>
+
+    <a-modal v-if="configVisible" v-model="configVisible" title="配置策略" :width="1000" style="height: 650px;overflow-y: auto"
+             :footer="null"
+    >
+      <MeetingRoomConfig  />
+    </a-modal>
+
+
+  </div>
+</template>
+
+<script>
+import MeetingRoomDetails from "@/components/scene/meeting/config/meetingRoomDetails.vue";
+import MeetingRoomConfig from "@/components/scene/meeting/config/meetingRoomConfig.vue";
+
+export default {
+  data() {
+    return {
+      detailVisible: false,
+      configVisible: false,
+    }
+  },
+  components: {
+    MeetingRoomDetails,
+    MeetingRoomConfig,
+  },
+  props: {
+    obj: Object,
+  },
+  methods: {
+    viewDetails() {
+      this.detailVisible = true;
+    },
+    configMeeting() {
+      this.configVisible = true;
+    },
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.meetingRoomItem {
+  width: 100%;
+  height: 150px;
+  padding: 8px 12px 8px 0;
+  border-radius: 8px;
+  border: 1px solid #edf8fd;
+  border-left: 6px solid #006de4;
+  box-shadow: 2px 2px #edf8fd;
+
+  .meetingRoomItem-title {
+    color: #6b9bea;
+    font-size: 18px;
+    padding-left: 8px;
+  }
+
+  .meetingRoomItem-state {
+    margin-top: 8px;
+    color: #006de4;
+    width: 90%;
+    text-align: center;
+  }
+
+  .meetingRoomItem-num {
+    color: #006de4;
+    width: 90%;
+    text-align: center;
+    font-size: 70px;
+    font-family: numberMH, serif;
+  }
+
+  .meetingRoomItem-devices {
+    margin-top: 8px;
+    width: 75%;
+    padding-left: 8px;
+
+    .meetingRoomItem-device {
+      display: inline-block;
+      width: 30px;
+      height: 30px;
+      background-color: #cce2fa;
+      margin: 1px;
+    }
+  }
+
+  .meetingRoomItem-opr {
+    position: absolute;
+    bottom: 0;
+    display: block;
+    width: 100%;
+
+    .meetingRoomItem-opr-btn {
+      height: 20px;
+      width: 45%;
+      display: inline-block;
+      margin: 0;
+      padding: 0;
+    }
+  }
+}
+</style>

src/components/scene/meeting/config/meetingRooms.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="meetingRooms">
+
+    <div class="meetingRooms-query">
+      <a-form-model layout="inline" :mode="formData">
+        <a-form-model-item label="时间：">
+          <TimeRange></TimeRange>
+        </a-form-model-item>
+        <a-form-model-item label="楼层：" >
+          <a-select v-model="formData.floor" style="width: 120px;">
+            <a-select-option value="1">1F</a-select-option>
+            <a-select-option value="3">3F</a-select-option>
+            <a-select-option value="5">5F</a-select-option>
+          </a-select>
+        </a-form-model-item>
+        <a-form-model-item label="会议室状态：">
+          <a-select v-model="formData.state" style="width: 120px;">
+            <a-select-option value="1">会议中</a-select-option>
+            <a-select-option value="2">闲置中</a-select-option>
+            <a-select-option value="3">已预订</a-select-option>
+          </a-select>
+        </a-form-model-item>
+        <a-form-model-item label="会议室人数：">
+          <a-select v-model="formData.state" style="width: 120px;">
+            <a-select-option value="1">4人</a-select-option>
+            <a-select-option value="2">8人</a-select-option>
+            <a-select-option value="3">12人</a-select-option>
+          </a-select>
+        </a-form-model-item>
+        <a-form-model-item>
+          <a-button>重置</a-button>
+          <a-button type="primary">查询</a-button>
+        </a-form-model-item>
+      </a-form-model>
+    </div>
+
+    <div class="meetingRooms-content">
+      <template v-for="(floor, index) in roomData">
+        <div class="meetingRooms-floor" :key="floor.floor">
+          <div class="meetingRooms-floor-title">
+            <a-divider orientation="left" :dashed="true" >
+              {{ floor.floor }}
+            </a-divider>
+          </div>
+          <a-row :gutter="12">
+            <a-col :span="6" v-for="room in floor.rooms" :key="room.id">
+              <MeetingRoomItem :obj="room" />
+            </a-col>
+          </a-row>
+        </div>
+      </template>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import MeetingRoomItem from "@/components/scene/meeting/config/meetingRoomItem.vue";
+import TimeRange from "@/components/common/timeRange.vue";
+
+export default {
+  components: {
+    MeetingRoomItem,
+    TimeRange,
+  },
+  data() {
+    return {
+      formData: {},
+      roomData: [
+        {
+          floor: '3F',
+          rooms: [
+            {
+              id: 1,
+              name: '301会议室',
+              timeRange: ['9:00', '10:00'],
+              status: '1',
+              time: 8,
+              devices: [
+                {},{},{},{},{},{},{},{}
+              ]
+            }
+          ]
+        },
+        {
+          floor: '4F',
+          rooms: [
+            {
+              id: 1,
+              name: '401会议室',
+              timeRange: ['9:00', '10:00'],
+              status: '1',
+              time: 8,
+              devices: [
+                {},{},{},{},{},{},{},{}
+              ]
+            }
+          ]
+        }
+      ],
+    }
+  },
+  props: {
+
+  },
+  mounted() {
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.meetingRooms {
+  width: 100%;
+  height: 100%;
+  .meetingRooms-floor {
+    width: 99%;
+    height: auto;
+    margin: 8px;
+    .meetingRooms-floor-title {
+
+    }
+    .meetingRooms-floor-item {
+      width: 100%;
+      height: 150px;
+      border: 1px solid red;
+      padding: 2% 5%;
+      border-left: 2px solid red;
+    }
+  }
+}
+</style>

src/components/scene/meeting/config/meetingStrategy.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="meetingStrategy">
+    <div class="meetingStrategy-query">
+
+    </div>
+    <div class="meetingStrategy-table">
+      <a-table
+          :rowKey=" (record, index) => index"
+          :columns="columns"
+          :data-source="tableData"
+          :pagination="false"
+      >
+      </a-table>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [],
+      columns: [
+        {
+          dataIndex: 'name',
+          key: 'name',
+          title: '名称'
+        },
+        {
+          dataIndex: 'createTime',
+          key: 'createTime',
+          title: '创建时间'
+        },
+        {
+          dataIndex: 'creator',
+          key: 'creator',
+          title: '创建人'
+        },
+        {
+          dataIndex: 'enable',
+          key: 'enable',
+          title: '启用'
+        },
+        {
+          dataIndex: 'operation',
+          key: 'operation',
+          title: '操作'
+        },
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.meetingStrategy {
+
+}
+</style>

src/components/scene/meeting/sceneMeeting.vue

@@ -1,315 +1,3 @@
-<!--
-    智慧场景-智·会议-配置会议
-    @author 刘梦祥
-    @date 2023年2月22日
--->
 <template>
-  <div class="doubleCarbon-main-box flexColumn">
-    <a-spin class="spinStyle" size="large" tip="Loading..." v-show="searchLoading"></a-spin>
-    <a-tabs default-active-key="1" @change="callback">
-      <a-tab-pane key="1" tab="会议室总览">
-        <!-- 头部搜索区域 -->
-        <div class="borderColor" style="margin-bottom: 0.5rem;">
-          <div class="flex flex_between margin5rem">
-            <div class="flex">
-              <div class="mr1rem">
-                时间：
-                <a-range-picker
-                  show-time
-                  id="rangePicker"
-                  :placeholder="['开始时间', '结束时间']"
-                  @change="onChangeRangeDate"
-                  separator="至"
-                  :show-time="{
-                    hideDisabledOptions: true,
-                    defaultValue: [$moment('00:00:00', 'HH:mm:ss'), $moment('23:59:59', 'HH:mm:ss')]
-                  }"
-                  format="YYYY-MM-DD HH:mm:ss"
-                >
-                </a-range-picker>
-              </div>
-              <div class="mr1rem">
-                楼层：
-                <a-select
-                  style="width:200px;"
-                  v-model="searchParam.floor"
-                  :allowClear="selectProps.allowClear"
-                  :mode="selectProps.mode"
-                  :options="options.floor"
-                  :notFoundConent="selectProps.notFoundConent"
-                  :placeholder="selectProps.placeholder"
-                ></a-select>
-              </div>
-              <div class="mr1rem">
-                会议室状态：
-                <a-select
-                  style="width:200px;"
-                  v-model="searchParam.conferenceRoomStatus"
-                  :allowClear="selectProps.allowClear"
-                  :mode="selectProps.mode"
-                  :options="options.conferenceRoomStatus"
-                  :notFoundConent="selectProps.notFoundConent"
-                  :placeholder="selectProps.placeholder"
-                ></a-select>
-              </div>
-              <div class="mr1rem">
-                会议室人数：
-                <a-select
-                  style="width:200px;"
-                  v-model="searchParam.numberOfPeopleInConferenceRoom"
-                  :allowClear="selectProps.allowClear"
-                  :mode="selectProps.mode"
-                  :options="options.numberOfPeopleInConferenceRoom"
-                  :notFoundConent="selectProps.notFoundConent"
-                  :placeholder="selectProps.placeholder"
-                ></a-select>
-              </div>
-            </div>
-            <div>
-              <a-button class="mr1rem" @click="reset">重置</a-button>
-              <a-button type="primary" @click="search">查询</a-button>
-            </div>
-          </div>
-        </div>
-        <!-- 碳排放分析和碳配额构成 -->
-        <div class="flexColumn">
-          <div class="floorBox borderColor padding5rem">
-            <div class="floorTitle margin5rem flex_between" style="flex-wrap: nowrap;">
-              3F
-              <div class="titleLine"></div>
-            </div>
-            <div class="margin5rem chartDomBox">other</div>
-          </div>
-        </div>
-      </a-tab-pane>
-      <a-tab-pane key="2" tab="智能策略"> 智能策略 </a-tab-pane>
-    </a-tabs>
-  </div>
-</template>
-
-<script>
-import LineChart from "../../echart/LineChart.vue";
-import BarChart from "../../echart/BarChart.vue";
-import PieChart from "../../echart/PieChart.vue";
-// 模拟数据
-import AnalogData from "../AnalogData.js";
-export default {
-  components: {
-    LineChart,
-    BarChart,
-    PieChart
-  },
-  data() {
-    return {
-      // selectProps配置
-      selectProps: {
-        allowClear: true, // 支持清除
-        mode: "default", // 模式['default'|'multiple'|'tags'|'combobox']
-        notFoundConent: "Not Found", // 当下拉列表为空时显示的内容
-        placeholder: "请选择", // 选择框默认文字 string|slot
-        showArrow: true, // 是否显示下拉小箭头
-        size: "large" // 选择框大小['large'|'small']
-      },
-      // options 数据，如果设置则不需要手动构造 selectOption 节点
-      options: {
-        floor: [], // 楼层
-        conferenceRoomStatus: [], // 会议室状态
-        numberOfPeopleInConferenceRoom: [] // 会议室人数
-      },
-      // loading状态
-      searchLoading: true,
-      // 头部搜索条件中绑定值
-      monthArr: [],
-      searchParam: {
-        floor: undefined,
-        timeRange: [undefined, undefined],
-        conferenceRoomStatus: undefined,
-        numberOfPeopleInConferenceRoom: undefined
-      },
-      // 头部核心指标循环显示数据
-      coreList: [],
-      // 双碳新闻模拟数据
-      DoubleCarbonNewsInfoList: [],
-      // 双碳新闻弹窗打开状态
-      showModalStatus: false,
-      // 弹窗暂存数据对象
-      showModalInfo: {
-        title: "--",
-        content: "--",
-        author: "--",
-        pushTime: "--"
-      },
-      // chart暂存数据对象
-      chartData: []
-    };
-  },
-  created() {},
-  mounted() {
-    // 页面初始化
-    this.init();
-    // this.searchLoading = false;
-    //默认是当日24小时
-    setTimeout(() => {
-      this.defaulTimeRangeS();
-    }, 0);
-  },
-  methods: {
-    callback() {
-      // console.log("tabs切换");
-    },
-    onChangeRangeDate(date, dateStr) {
-      this.searchParam.timeRange = dateStr;
-    },
-    // 时间初始化
-    defaulTimeRangeS() {
-      this.searchParam.timeRange[0] = this.$moment().format("YYYY-MM-DD 00:00:00");
-      this.searchParam.timeRange[1] = this.$moment().format("YYYY-MM-DD 23:59:59");
-      setTimeout(() => {
-        document.getElementById("rangePicker").querySelectorAll("input")[0].value = this.searchParam.timeRange[0];
-        document.getElementById("rangePicker").querySelectorAll("input")[1].value = this.searchParam.timeRange[1];
-      }, 0);
-    },
-    // 查询事件
-    search() {
-      this.searchLoading = true;
-      console.log(
-        "查询条件：",
-        this.searchParam.floor,
-        this.searchParam.conferenceRoomStatus,
-        this.searchParam.numberOfPeopleInConferenceRoom,
-        this.searchParam.timeRange[0],
-        this.searchParam.timeRange[1]
-      );
-      setTimeout(() => {
-        this.searchLoading = false;
-      }, 1000);
-    },
-    // 重置事件
-    reset() {
-      this.searchParam = {
-        floor: undefined,
-        timeRange: [this.$moment().format("YYYY-MM-DD 00:00:00"), this.$moment().format("YYYY-MM-DD 23:59:59")],
-        conferenceRoomStatus: undefined,
-        numberOfPeopleInConferenceRoom: undefined
-      };
-      document.getElementById("rangePicker").querySelectorAll("input")[0].value = this.searchParam.timeRange[0];
-      document.getElementById("rangePicker").querySelectorAll("input")[1].value = this.searchParam.timeRange[1];
-    },
-    // 弹窗显示事件
-    showModal(item) {
-      this.showModalStatus = true;
-      this.showModalInfo = item;
-    },
-    // 弹窗隐藏事件
-    onCancel() {
-      this.showModalStatus = false;
-    },
-    init() {
-      // 初始化加载[[楼层\会议室状态\会议室人数]列表、核心指标、碳排放分析、碳配额构成、碳排放占比、双碳新闻]
-      setTimeout(() => {
-        this.options.floor = AnalogData.floor;
-        this.options.conferenceRoomStatus = AnalogData.conferenceRoomStatus;
-        this.options.numberOfPeopleInConferenceRoom = AnalogData.numberOfPeopleInConferenceRoom;
-        this.coreList = AnalogData.core_List;
-        this.chartData = AnalogData.CHART_DATA;
-        this.DoubleCarbonNewsInfoList = AnalogData.doubleCarbonNewsInfoList;
-        this.searchLoading = false;
-      }, 1000);
-    }
-  }
-};
-</script>
-
-<style lang="less" scoped>
-// 复用样式
-.flexColumn {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-}
-.flex {
-  display: flex;
-  flex-wrap: wrap;
-  align-content: center;
-  align-items: center;
-  &_center {
-    display: flex;
-    flex-wrap: wrap;
-    align-content: center;
-    align-items: center;
-    justify-content: center;
-  }
-  &_between {
-    display: flex;
-    flex-wrap: wrap;
-    align-content: center;
-    align-items: center;
-    justify-content: space-between;
-  }
-  &_around {
-    display: flex;
-    flex-wrap: wrap;
-    align-content: center;
-    align-items: center;
-    justify-content: space-around;
-  }
-}
-.floorTitle {
-  width: calc(100% - 20px);
-  font-size: 24px;
-  font-weight: bold;
-  color: @primary-color;
-  .titleLine {
-    width: calc(100% - 40px);
-    border-bottom: 1px dashed @primary-color;
-  }
-}
-.borderColor {
-  border: 1px solid #e7eaf1;
-}
-.margin5rem {
-  margin: 0.5rem;
-}
-.padding5rem {
-  padding: 0.5rem;
-}
-// 页面主题样式
-.doubleCarbon-main-box {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  & * {
-    user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-    -ms-user-select: none;
-    ::-webkit-scrollbar {
-      width: 0 !important;
-    }
-    -ms-overflow-style: none;
-    overflow: -moz-scrollbars-none;
-  }
-  & > div {
-    // padding: 5px 10px;
-    border-radius: 2px;
-    margin-bottom: 10px;
-  }
-  .spinStyle {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    background: rgba(255, 255, 255, 0.75);
-    z-index: 2;
-  }
-}
-// 头部搜索框和（重置、查询）按钮之间的间距样式
-.mr1rem {
-  margin-right: 1rem;
-}
-// loading样式
-.spin-content {
-  border: 1px solid #91d5ff;
-  background-color: #e6f7ff;
-  padding: 30px;
-}
-</style>
+  <router-view />
+</template>

src/components/scene/meeting/sceneMeetingConfig.vue

@@ -1,11 +1,57 @@
 <template>
-
+  <div class="sceneMeetingConfig">
+    <a-tabs default-active-key="1" >
+      <a-tab-pane key="1" tab="会议室总览">
+        <MeetingRooms />
+      </a-tab-pane>
+      <a-tab-pane key="2" tab="智能策略" force-render>
+        <MeetingStrategy />
+      </a-tab-pane>
+    </a-tabs>
+  </div>
 </template>
 
 <script>
-export default {}
+import MeetingRooms from "@/components/scene/meeting/config/meetingRooms.vue";
+import MeetingStrategy from "@/components/scene/meeting/config/meetingStrategy.vue";
+
+export default {
+  data() {
+    return {}
+  },
+  components: {
+    MeetingRooms,
+    MeetingStrategy,
+  },
+  mounted() {
+  },
+  methods: {
+
+  }
+}
 </script>
 
 <style lang="less" scoped>
+.sceneMeetingConfig {
+  width: 100%;
+  height: 100%;
+  padding: 12px;
+
 
+  .ant-tabs-ink-bar {
+    visibility: hidden;
+  }
+  .ant-tabs-nav {
+    color: #B3B3B3;
+    margin-right: 5px !important;
+  }
+  .ant-tabs-nav .ant-tabs-tab {
+    margin: 0;
+    padding-left: 0 !important;
+    padding-right: 20%;
+  }
+  .ant-tabs-nav .ant-tabs-tab-active {
+    color: #333333;
+  }
+}
 </style>

src/components/scene/meeting/sceneMeetingOverview.vue

@@ -1,11 +1,132 @@
 <template>
-
+  <div class="meeting-overview">
+    <div class="meeting-overview-total">
+      <Card title="会议总数">
+        <div class="meeting-overview-total-item">
+          <div class="meeting-overview-total-item-title">会议总次数</div>
+          <div class="meeting-overview-total-item-num">2361次</div>
+          <a-divider style="padding: 0;margin: 5% 0 0;" />
+          <div class="meeting-overview-total-item-avg">日均会议数</div>
+        </div>
+        <div class="meeting-overview-total-item">
+          <div class="meeting-overview-total-item-title">会议总人次</div>
+          <div class="meeting-overview-total-item-num">19742人/次</div>
+          <a-divider style="padding: 0;margin: 5% 0 0;" />
+          <div class="meeting-overview-total-item-avg">平均参会人次 7.6人/次</div>
+        </div>
+        <div class="meeting-overview-total-item">
+          <div class="meeting-overview-total-item-title">会议总时长</div>
+          <div class="meeting-overview-total-item-num">86843分钟</div>
+          <a-divider style="padding: 0;margin: 5% 0 0;" />
+          <div class="meeting-overview-total-item-avg">平均会议时间 86分钟</div>
+        </div>
+      </Card>
+    </div>
+    <div class="meeting-overview-summary">
+      <a-tabs default-active-key="1" >
+        <a-tab-pane key="1" tab="会议总次数">
+          <MeetingTimesCharts :height="300"></MeetingTimesCharts>
+        </a-tab-pane>
+        <a-tab-pane key="2" tab="会议总人次" force-render>
+          <MeetingPersonCharts :height="300"></MeetingPersonCharts>
+        </a-tab-pane>
+        <a-tab-pane key="3" tab="会议总时长">
+          <MeetingTimeCharts :height="300"></MeetingTimeCharts>
+        </a-tab-pane>
+      </a-tabs>
+    </div>
+    <div class="meeting-overview-distribute">
+      <Card title="会议数据分布">
+        <div class="meeting-overview-distribute-time">
+          <MeetingTimeDistributeChart :height="300"/>
+        </div>
+        <div class="meeting-overview-distribute-person">
+          <MeetingPersonDistributeChart :height="300" />
+        </div>
+      </Card>
+    </div>
+  </div>
 </template>
 
 <script>
-export default {}
+import Card from "@/components/common/card.vue";
+import MeetingTimesCharts from "@/components/scene/meeting/chart/meetingNumCharts.vue";
+import MeetingPersonCharts from "@/components/scene/meeting/chart/meetingPersonCharts.vue";
+import MeetingTimeCharts from "@/components/scene/meeting/chart/meetingTimeCharts.vue";
+import MeetingTimeDistributeChart from "@/components/scene/meeting/chart/meetingTimeDistributeChart.vue";
+import MeetingPersonDistributeChart from "@/components/scene/meeting/chart/meetingPersonDistributeChart.vue";
+export default {
+  data() {
+    return {}
+  },
+  components: {
+    Card,
+    MeetingTimesCharts,
+    MeetingPersonCharts,
+    MeetingTimeCharts,
+    MeetingTimeDistributeChart,
+    MeetingPersonDistributeChart,
+  },
+  mounted() {
+  },
+  methods: {
+
+  }
+}
 </script>
 
 <style lang="less" scoped>
+.meeting-overview {
+  width: 100%;
+  height: 100%;
+  padding: 12px;
+
+  .meeting-overview-total {
+    .meeting-overview-total-item {
+      display: inline-block;
+      width: 33%;
+      height: 150px;
+      background-color: #faf7f7;
+      .meeting-overview-total-item-title {
+        color: #8c8b8b;
+        margin: 5% 0 1% 5%;
+        font-size: 14px;
+      }
+      .meeting-overview-total-item-num {
+        margin: 1% 0 1% 5%;
+      }
+      .meeting-overview-total-item-avg {
+        margin: 1% 0 1% 5%;
+      }
+    }
+  }
+
+  .meeting-overview-distribute {
+    .meeting-overview-distribute-time {
+      width: 50%;
+      display: inline-block;
+    }
+    .meeting-overview-distribute-person {
+      width: 50%;
+      display: inline-block;
+    }
+  }
+
+  .ant-tabs-ink-bar {
+    visibility: hidden;
+  }
+  .ant-tabs-nav {
+    color: #B3B3B3;
+    margin-right: 5px !important;
+  }
+  .ant-tabs-nav .ant-tabs-tab {
+    margin: 0;
+    padding-left: 0 !important;
+    padding-right: 20%;
+  }
+  .ant-tabs-nav .ant-tabs-tab-active {
+    color: #333333;
+  }
 
+}
 </style>

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

@@ -32,6 +32,6 @@ export default {
 }
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 
 </style>

src/style/common.css

@@ -12,11 +12,17 @@
 .pageContainer-content {
   width: 100%;
   height: calc(100% - 60px);
-  padding: 5px 10px;
+  padding: 0px 10px 5px;
   overflow: hidden;
   overflow-y: auto;
 }
 
+.page-query-core {
+  background-color: #ffffff;
+  padding: 12px 12px 8px;
+  border-radius: 4px;
+}
+
 .ant-btn {
   margin: 0 3px !important;
 }

src/views/HomeView.vue

@@ -109,7 +109,7 @@ export default {
 
   .home-page {
     display: inline-block;
-    background: #fff;
+    background: #f0f1f2;
     margin: 0;
     transition: all 1s;
     overflow: hidden;