调整智慧办公ui

src/components/common/card.vue

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

src/components/common/coreData.vue

@@ -24,8 +24,8 @@ export default {
     resize() {
       this.$nextTick(()=>{
         let width = document.getElementsByClassName("coreData")[0].clientWidth;
-        let space = 22/width * 100;
-        this.itemWidth = Math.floor(100/this.dataList.length - space) + "%";
+        let space = 20/width * 100;
+        this.itemWidth = (100/this.dataList.length - space - 0.01) + "%";
       })
     },
   },

src/components/dashboard/iocDashboard.vue

@@ -3,7 +3,7 @@
     <a-row :gutter="[12,12]">
       <a-col :span="18">
         <!--常用功能-->
-        <div class="dashboard-popFunc">
+        <div class="dashboard-popFunc card-style">
           <IocCard title="常用功能">
             <template #title-extra>
               <a-button type="link" style="color: #C6C8CC;font-size: 12px" @click="openFuncManage">
@@ -16,24 +16,23 @@
                 <div @click="toRoute(item.router)">
                   <IocFunction :item="item" ></IocFunction>
                 </div>
-
               </a-col>
             </a-row>
           </IocCard>
         </div>
       </a-col>
       <a-col :span="6">
-        <div class="dashboard-msg">
+        <div class="dashboard-msg card-style">
           <DashboardMessageCard  ></DashboardMessageCard>
         </div>
       </a-col>
       <a-col :span="18">
-        <div class="dashboard-summary">
+        <div class="dashboard-summary card-style">
           <DashboardPortrait ></DashboardPortrait>
         </div>
       </a-col>
       <a-col :span="6">
-        <div class="dashboard-more">
+        <div class="dashboard-more card-style">
           <DashboardMore></DashboardMore>
         </div>
       </a-col>
@@ -90,9 +89,6 @@ export default {
   padding: 12px 18px;
   background-color: #f0f2f5;
   overflow-y: auto;
-  div {
-    border-radius: 4px;
-  }
   .dashboard-popFunc {
     height: 220px;
     background-color: white;

src/components/dashboard/portrait/dashboardPortrait.vue

@@ -52,8 +52,8 @@ export default {
 <template>
   <div class="ioc-dashboard-portrait">
     <Card title="统计画像">
-      <div style="width: 97%;margin: 0 auto">
-        <a-divider style="margin: 0 0 10px;padding: 0;"></a-divider>
+      <div style="width: 97.2%;margin: 0 auto">
+        <a-divider style="margin: 5px 0 8px;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')">

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

@@ -2,18 +2,15 @@
 export default {
   data() {
     return {
-
+      show: false,
     }
   },
   props: {
     height: Number,
   },
   mounted() {
-    let app = this;
     this.$nextTick(()=>{
-      setTimeout(()=>{
-        app.initChart()
-      },50)
+      this.initChart();
     })
   },
   methods: {
@@ -29,7 +26,7 @@ export default {
         },
         grid: {
           left: '0%', //默认10%
-          right: '0%', //默认10%
+          right: '1%', //默认10%
           bottom: '15%', //默认60
           top: '15%',
           containLabel: true
@@ -153,7 +150,6 @@ export default {
           }
         ]
       };
-      //Object.assign(defaultOption, this.option)
       chart.setOption(defaultOption)
     }
   }
@@ -161,7 +157,7 @@ export default {
 </script>
 
 <template>
-  <div style="width: 100%" :style="{height: height+'px'}" ref="myChart"></div>
+  <div id="personTrendChart" style="width: 100%" :style="{height: height+'px'}" ref="myChart" ></div>
 </template>
 
 <style lang="less" scoped>

src/components/dashboard/portrait/personPortrait.vue

@@ -57,17 +57,8 @@ export default {
     <div class="portrait-coreData">
       <CoreData :data-list="coreData"></CoreData>
     </div>
-    <div style="padding: 0 15px 15px;">
+    <div style="padding: 15px;">
       <PersonTrendChart :height="chartHeight"></PersonTrendChart>
     </div>
   </div>
-</template>
-
-<style lang="less" scoped>
-.personPortrait {
-  width: 100%;
-  .portrait-coreData {
-    margin-bottom: 15px;
-  }
-}
-</style>
+</template>

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

@@ -114,7 +114,7 @@ export default {
             data: [274, 128, 213, 273, 114, 183, 245, 166, 187, 128, 137, 275],
             type: 'bar',
             yAxisIndex:0,
-            barWidth: 20,
+            barWidth: '20%',
             backgroundStyle: {
               color: 'rgb(253, 232, 229, 0.5)'
             },

src/components/life/healthyHome/lifeHealthyHome.vue

@@ -10,21 +10,19 @@ export default {
     return {
       coreData: [
         {
-          title: '累计检查人数',
+          title: '累计检查人数(人/月)',
           num: 100,
-          unit: '人',
           historyDesc: '同比',
           historyNum: 0.4
         },
         {
-          title: '健康人数',
+          title: '健康人数(人/月)',
           num: 20,
-          unit: '人',
           historyDesc: '同比',
           historyNum: 0.4
         },
         {
-          title: '亚健康人数',
+          title: '亚健康人数(人/月)',
           num: 21,
           unit: '元',
           historyDesc: '同比',

src/components/life/parking/lifeParking.vue

@@ -13,30 +13,26 @@ export default {
     return {
       coreData: [
         {
-          title: '车位数量',
+          title: '车位数量(个)',
           num: 2000,
-          unit: '个',
           historyDesc: '同比',
           historyNum: 0.4
         },
         {
-          title: '平均停车数量',
+          title: '平均停车数量(辆/天)',
           num: 180,
-          unit: '辆/天',
           historyDesc: '同比',
           historyNum: 0.4
         },
         {
-          title: '违停数量',
+          title: '违停数量(辆)',
           num: 20,
-          unit: '辆',
           historyDesc: '同比',
           historyNum: -0.4
         },
         {
-          title: '建议回收车位',
+          title: '建议回收车位(个)',
           num: 40,
-          unit: '个',
           historyDesc: '同比',
           historyNum: 0.4
         },

src/components/life/restaurant/lifeRestaurant.vue

@@ -16,29 +16,25 @@ export default {
         {
           title: '当天就餐人数预测',
           num: 400,
-          unit: '人',
           isHighLight: true,
           historyDesc: '同比',
           historyNum: 0.4
         },
         {
-          title: '累计就餐人数',
+          title: '累计就餐人数(人)',
           num: 400,
-          unit: '人',
           historyDesc: '同比',
           historyNum: 0.4
         },
         {
-          title: '消费总数',
+          title: '消费总额(万元)',
           num: 400,
-          unit: '人',
           historyDesc: '同比',
           historyNum: 0.4
         },
         {
-          title: '订单均价',
+          title: '订单均价(元)',
           num: 400,
-          unit: '人',
           historyDesc: '同比',
           historyNum: 0.4
         },

src/components/life/supermarket/lifeSupermarket.vue

@@ -11,9 +11,8 @@ export default {
       coreData: [
         {
           type: 0,
-          title: '消费总额',
+          title: '消费总额(万元)',
           num: 100,
-          unit: '万元',
           historyDesc: '同比',
           historyNum: '0.4'
         },
@@ -21,23 +20,20 @@ export default {
           type: 0,
           title: '交易单数',
           num: 2100,
-          unit: '',
           historyDesc: '同比',
           historyNum: '0.4'
         },
         {
           type: 0,
-          title: '人均消费金额',
+          title: '人均消费金额(元)',
           num: 21,
-          unit: '元',
           historyDesc: '同比',
           historyNum: '0.4'
         },
         {
           type: 0,
-          title: '平均单价',
+          title: '平均单价(元)',
           num: 1,
-          unit: '元',
           historyDesc: '环比',
           historyNum: '0.4'
         },

src/components/work/bus/component/workBusChart.vue

@@ -0,0 +1,131 @@
+<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 = {
+        legend: {
+          data: [
+            '打印纸张',
+            '墨盒消耗',
+          ]
+        },
+        grid: {
+          left: '2%', //默认10%
+          right: '3%', //默认10%
+          bottom: '13%', //默认60
+          top: '15%',
+          containLabel: true
+          //grid区域是否包含坐标轴的刻度标签
+        },
+        xAxis: {
+          type: 'category',
+          data: ['2月1日', '2月2日', '2月3日', '2月4日', '2月5日', '2月6日', '2月7日']
+        },
+        yAxis: [
+          {
+            name: '纸张数量',
+            type: 'value',
+            position: 'left',
+            axisLine: {
+              show: true,
+            },
+            nameTextStyle: {
+              padding: [10, 0, 10, 0]
+            },
+          },
+          {
+            name: '墨盒消耗',
+            type: 'value',
+            axisLine: {
+              show: true,
+            },
+            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)',
+        },
+        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',
+            barWidth: '15%',
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            },
+            itemStyle: {
+              color: '#80D4FF'
+            }
+          },
+          {
+            name: '墨盒消耗',
+            data: [131, 136, 118, 121, 173, 188, 159],
+            type: 'bar',
+            yAxisIndex: 1,
+            barWidth: '15%',
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            },
+            itemStyle: {
+              color: '#FFDF80'
+            }
+          },
+        ]
+      };
+      chart.setOption(options);
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/components/work/bus/component/workBusTrend.vue

@@ -0,0 +1,119 @@
+<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: [
+          {
+            type: 'slider',
+            start: 0,
+            end: 30,
+            height: 12,
+          },
+          {
+            type: 'inside',
+            start: 0,
+            end: 100,
+          }
+        ],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          },
+          textStyle: {
+            color: '#fff',
+            align: 'left',
+            fontSize: 14
+          },
+          axisLine: {//x坐标轴轴线
+            show: true,
+            lineStyle: {//x坐标轴轴线样式
+              color: '#000',//'#ccc' | 'rgb(128, 128, 128)' | 'rgba(128, 128, 128, 0.5)'，设置标签颜色
+            }
+          },
+          backgroundColor: 'rgba(0,0,0,0.8)',
+        },
+        series: [
+          {
+            name: '成本',
+            data: [167, 156, 176, 156, 173, 127, 101, 165, 121, 193, 172, 149],
+            type: 'line',
+            stack: 'x',
+            smooth: true,
+            showSymbol:false,
+            areaStyle: {
+              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: '#B0E5CB' // 0% 处的颜色
+              }, {
+                offset: 0.8,
+                color: '#ffffff' // 100% 处的颜色
+              }], false),
+            },
+            lineStyle: {
+              color: "#62CC97",
+              width: 1,
+            },
+            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/work/bus/workBus.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="border-shadow">
+    <div class="page-query-core">
       <query></query>
       <card :title="'核心指标'">
         <CoreData :data-list="coreData"></CoreData>
@@ -8,26 +8,17 @@
     </div>
     <a-row :style="{ marginTop: '15px' }">
       <a-col :span="18">
-        <div class="left border-shadow">
-          <card :title="'文印管理'">
-            <div
-              class="myChart"
-              ref="myChart1"
-              :style="{ height: '515px' }"
-            ></div>
+        <div class="left ">
+          <card :title="'公车管理'">
+            <WorkBusChart :height="450" />
           </card>
         </div>
       </a-col>
       <a-col :span="6">
-        <div class="right border-shadow">
+        <div class="right ">
           <card :title="'成本趋势'">
-            <div class="cben">
-              <div class="total">成本趋势： <span>增速10%</span></div>
-              <div
-                class="myChart"
-                ref="myChart2"
-                :style="{ height: '484px' }"
-              ></div>
+            <div style="padding: 0 15px">
+              <WorkBusTrend :height="450" />
             </div>
           </card>
         </div>
@@ -35,13 +26,18 @@
     </a-row>
   </div>
 </template>
-  <script>
+<script>
 import query from "@/components/common/query.vue";
 import card from "@/components/common/card.vue";
+import WorkBusChart from "@/components/work/bus/component/workBusChart.vue";
+import WorkBusTrend from "@/components/work/bus/component/workBusTrend.vue";
+
 export default {
   components: {
     query,
     card,
+    WorkBusChart,
+    WorkBusTrend,
   },
   data() {
     const listData = [];
@@ -75,36 +71,33 @@ export default {
         },
       ],
       columns: [
-        { title: "序号", dataIndex: "index", key: "1", width: 48 },
-        { title: "姓名", dataIndex: "name", key: "2", width: 60 },
-        { title: "部门", dataIndex: "department", key: "3", width: 80 },
-        { title: "最后进入时间", dataIndex: "time", key: "4", width: 90 },
+        {title: "序号", dataIndex: "index", key: "1", width: 48},
+        {title: "姓名", dataIndex: "name", key: "2", width: 60},
+        {title: "部门", dataIndex: "department", key: "3", width: 80},
+        {title: "最后进入时间", dataIndex: "time", key: "4", width: 90},
       ],
       listData: listData,
       coreData: [
         {
-          title: "车辆平均成本",
+          title: "车辆平均成本(元)",
           num: "100",
-          unit: "元",
           historyDesc: "同比",
           historyNum: 0.4,
         },
         {
           title: "车辆平均出车次数",
           num: "80",
-          unit: "",
           historyDesc: "同比",
           historyNum: 0.4,
         },
         {
-          title: "车辆平均碳排放",
+          title: "车辆平均碳排放(tco2e)",
           num: "80",
-          unit: "tco2e",
           historyDesc: "同比",
           historyNum: 0.4,
         },
         {
-          title: "平均出车时长",
+          title: "平均出车时长(小时)",
           num: 80,
           unit: "小时",
           historyDesc: "同比",
@@ -112,7 +105,7 @@ export default {
         },
         {
           type: 1,
-          isHighLight: false,
+          showStar: true,
           title: "值得关注",
           content: "增加20个公车数量",
         },
@@ -371,7 +364,7 @@ export default {
         let reg = /^#[\da-f]{6}$/i;
         if (reg.test(hex)) {
           rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
-            "0x" + hex.slice(3, 5)
+              "0x" + hex.slice(3, 5)
           )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
         }
         return rgbaColor;
@@ -400,14 +393,14 @@ export default {
                 ${v.seriesName}.${v.name}
                 <span style="color:${
                   color[v.componentIndex]
-                };font-weight:700;font-size: 18px">${v.value}</span>
+              };font-weight:700;font-size: 18px">${v.value}</span>
                 人`;
             });
 
             return html;
           },
           extraCssText:
-            "background: #ffffff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;",
+              "background: #ffffff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;",
           // axisPointer: {
           //     type: 'shadow',
           //     shadowStyle: {
@@ -517,21 +510,21 @@ export default {
             areaStyle: {
               normal: {
                 color: new this.$echarts.graphic.LinearGradient(
-                  0,
-                  0,
-                  0,
-                  1,
-                  [
-                    {
-                      offset: 0,
-                      color: hexToRgba(color[0], 0.3),
-                    },
-                    {
-                      offset: 1,
-                      color: hexToRgba(color[0], 0.1),
-                    },
-                  ],
-                  false
+                    0,
+                    0,
+                    0,
+                    1,
+                    [
+                      {
+                        offset: 0,
+                        color: hexToRgba(color[0], 0.3),
+                      },
+                      {
+                        offset: 1,
+                        color: hexToRgba(color[0], 0.1),
+                      },
+                    ],
+                    false
                 ),
                 shadowColor: hexToRgba(color[0], 0.1),
                 shadowBlur: 10,
@@ -546,21 +539,16 @@ export default {
   },
 };
 </script>
-    
-  
-  <style lang="less" scoped>
+
+
+<style lang="less" scoped>
 .left {
-  padding-right: 15px;
-  margin-right: 5px;
+  margin-right: 6px;
 }
+
 .right {
-  padding-left: 15px;
-  margin-left: 5px;
-}
-.cben {
-  font-weight: bold;
-  span {
-    font-size: 20px;
-  }
+  margin-left: 6px;
+  background-color: #ffffff;
 }
+
 </style>

src/components/work/meeting/component/workMeetingCostTrend.vue

@@ -0,0 +1,243 @@
+<template>
+  <div
+      class="myChart"
+      ref="myChart"
+      :style="{ height: height+'px' }"
+  ></div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      height: 475
+    }
+  },
+  mounted() {
+    this.$nextTick(()=>{
+      this.init()
+    })
+  },
+  methods: {
+    init() {
+      let that = this;
+      let chart = this.$echarts.init(this.$refs.myChart);
+
+      let xLabel = ["3.26", "3.27", "3.28", "3.29", "3.30", "3.31"];
+
+      let yData = [
+        {
+          name: "市场部",
+          color: "#5087ec",
+          startColor: '#B2D5FF',
+          data: ["110", "130", "150", "170", "150", "130"],
+        },
+        {
+          name: "办公室",
+          color: "#89D7B6",
+          startColor: '#C5FFE6',
+          data: ["210", "230", "250", "270", "250", "230"],
+        },
+        {
+          name: "产品中心",
+          color: "#FAC37A",
+          startColor: '#FFEACF',
+          data: ["310", "330", "350", "370", "350", "330"],
+        },
+        {
+          name: "智慧院",
+          color: "#FF6E4D",
+          startColor: '#FFB5A4',
+          data: ["410", "430", "450", "470", "450", "430"],
+        },
+        {
+          name: "业务一部",
+          color: "#4DF5FF",
+          startColor: '#B3FBFF',
+          data: ["510", "530", "550", "570", "550", "530"],
+        },
+        {
+          name: "其他部门",
+          color: "#8B4DFF",
+          startColor: '#CDB2FF',
+          data: ["610", "630", "650", "670", "650", "630"],
+        },
+      ];
+      let ySeries = yData.map(function (item) {
+        return {
+          name: item.name,
+          type: "line",
+          stack: "Total",
+          showAllSymbol: false,
+          smooth: true,
+          showSymbol:false,
+          lineStyle: {
+            normal: {
+              color: item.color, // 线条颜色
+            },
+          },
+          itemStyle: {
+            color: item.color,
+          },
+          areaStyle: {
+            normal: {
+              //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+              color: new that.$echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: item.startColor,
+                    },
+                    {
+                      offset: 0.7,
+                      color: '#ffffff',
+                    },
+                  ],
+                  false
+              ),
+            },
+          },
+          data: item.data,
+        };
+      });
+
+      let options = {
+        // backgroundColor: "#000237",
+        tooltip: {
+          trigger: "axis",
+          // backgroundColor: "transparent",
+          axisPointer: {
+            lineStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "rgba(126,199,255,0)", // 0% 处的颜色
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(126,199,255,1)", // 100% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(126,199,255,0)", // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+            },
+          },
+        },
+        legend: {
+          align: "left",
+          top: "5%",
+          //itemWidth: 30,
+          //itemHeight: 10,
+          formatter: name => {
+            return `{a|${name}} `;
+            },
+          textStyle: {
+            color: '#999999',
+            fontSize: 12,
+            align: 'left',
+            backgroundColor: "transparent",
+            rich: {
+              a: {
+                width: 30,
+              },
+            },
+          },
+
+
+        },
+        grid: {
+          top: "20%",
+          left: "17%",
+          right: "10%",
+          bottom: "10%",
+          // containLabel: true
+        },
+        xAxis: [
+          {
+            type: "category",
+            // boundaryGap: false,
+            axisLine: {
+              //坐标轴轴线相关设置。数学上的x轴
+              show: true,
+              lineStyle: {
+                color: "#6e7079",
+              },
+            },
+            axisLabel: {
+              //坐标轴刻度标签的相关设置
+              textStyle: {
+                color: "#000000",
+                padding: 8,
+                fontSize: 14,
+              },
+              formatter: function (data) {
+                return data;
+              },
+            },
+            splitLine: {
+              show: false,
+              lineStyle: {
+                color: "#233653",
+              },
+            },
+            axisTick: {
+              show: true,
+              inside: true,
+            },
+            data: xLabel,
+          },
+        ],
+        yAxis: [
+          {
+            min: 0,
+            splitLine: {
+              show: false,
+              lineStyle: {
+                color: "#e8e8e8",
+              },
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: "#233653",
+              },
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: "#000000",
+                padding: 8,
+              },
+              formatter: function (value) {
+                if (value === 0) {
+                  return value;
+                }
+                return value;
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: ySeries,
+      };
+      chart.setOption(options);
+    },
+  }
+}
+</script>

src/components/work/meeting/workMeeting.vue

@@ -1,93 +1,122 @@
 <template>
-  <div>
-    <div class="border-shadow">
+  <div class="workMeeting">
+    <div class="page-query-core">
       <query></query>
       <card :title="'核心指标'">
         <CoreData :data-list="coreData"></CoreData>
       </card>
     </div>
-    <a-row :style="{ marginTop: '15px' }">
-      <a-col :span="18">
-        <div class="left border-shadow">
-          <card :title="'会议室管理'"></card>
-          <div class="huiyi_ksh">
-            <div class="aside">
-              <a-menu
-                style="width: 100%"
-                :default-selected-keys="defaultSelectedKeys"
-                mode="inline"
-                @click="huiyiClick"
-              >
-                <!-- style="width: 100px" -->
-                <!-- :open-keys.sync="openKeys" -->
-                <a-menu-item v-for="(item, index) in tabsArr" :key="index + ''">
-                  {{ item.title }}
-                </a-menu-item>
-              </a-menu>
-            </div>
-            <div class="container">
-              <timeline
-                v-for="(item, index) in tabsItemArr"
-                :key="index"
-                v-bind="{
-                  startTime: 8,
-                  endTime: 17,
-                  huiyiInfo: item.shiyong,
-                }"
-                :style="{ height: '60px' }"
-              ></timeline>
-            </div>
+
+    <div style="margin-top: 12px">
+      <a-row>
+        <a-col :span="18">
+          <div class="workMeeting-left">
+            <card title="会议室情况">
+              <a-row>
+                <a-col :span="2">
+                  <a-menu
+                      style="width: 100%"
+                      :default-selected-keys="defaultSelectedKeys"
+                      mode="inline"
+                      @click="huiyiClick"
+                  >
+                    <!-- style="width: 100px" -->
+                    <!-- :open-keys.sync="openKeys" -->
+                    <a-menu-item v-for="(item, index) in tabsArr" :key="index + ''">
+                      {{ item.title }}
+                    </a-menu-item>
+                  </a-menu>
+                </a-col>
+                <a-col :span="22">
+                  <timeline
+                      v-for="(item, index) in tabsItemArr"
+                      :key="index"
+                      v-bind="{
+                        startTime: 8,
+                        endTime: 17,
+                        huiyiInfo: item.shiyong,
+                      }"
+                      :style="{ height: '60px' }"
+                  ></timeline>
+                </a-col>
+              </a-row>
+              <div class="workMeeting-left-detail">
+                <a-descriptions :column="2" :colon="false">
+                  <a-descriptions-item >
+                    <template #label>
+                      <span class="workMeeting-left-detail-label">会议主题:</span>
+                    </template>
+                    <div class="workMeeting-left-detail-content">智慧楼宇产品会议</div>
+                  </a-descriptions-item>
+                  <a-descriptions-item >
+                    <template #label>
+                      <span class="workMeeting-left-detail-label">会议配置:</span>
+                    </template>
+                    <div class="workMeeting-left-detail-content">智慧会议场景配置1</div>
+                  </a-descriptions-item>
+                  <a-descriptions-item >
+                    <template #label>
+                      <span class="workMeeting-left-detail-label">预约部门:</span>
+                    </template>
+                    <div class="workMeeting-left-detail-content">北京电信规划设计院-创新产品研发中心</div>
+                  </a-descriptions-item>
+                  <a-descriptions-item>
+                    <template #label>
+                      <span class="workMeeting-left-detail-label">会议成本:</span>
+                    </template>
+                    <div class="workMeeting-left-detail-content" style="background-color: #ffffff">30元/小时</div>
+                  </a-descriptions-item>
+                  <a-descriptions-item >
+                    <template #label>
+                      <span class="workMeeting-left-detail-label">参会人员:</span>
+                    </template>
+                    <div style="width: 100%;vertical-align: top">
+                      <div style="display: inline-block;vertical-align: top;margin: 1px 3px">
+                        <a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
+                        <div>张三</div>
+                      </div>
+                    </div>
+                  </a-descriptions-item>
+                  <a-descriptions-item >
+                    <template #label>
+                      <span class="workMeeting-left-detail-label">会议费用:</span>
+                    </template>
+                    <div class="workMeeting-left-detail-content" style="background-color: #ffffff">35元/小时</div>
+                  </a-descriptions-item>
+                </a-descriptions>
+              </div>
+            </card>
+
           </div>
-          <div class="huiyi_detailed">
-            <a-row>
-              <a-col :span="2" class="label"> 会议主题： </a-col>
-              <a-col :span="6">
-                <a-input></a-input>
-              </a-col>
-              <a-col :span="2" class="label"> 会议配置： </a-col>
-              <a-col :span="6">
-                <a-input></a-input>
-              </a-col>
-              <a-col :span="2" class="label"> 会议预约： </a-col>
-              <a-col :span="6">
-                <a-input></a-input>
-              </a-col>
-            </a-row>
-            <a-row>
-              <a-col :span="2" class="label"> 参会人员： </a-col>
-              <a-col :span="14"> </a-col>
-              <a-col :span="4"> 会议成本：30 元/小时 </a-col>
-              <a-col :span="4"> 会议费用：35 元/小时 </a-col>
-            </a-row>
+        </a-col>
+        <a-col :span="6">
+          <div class="workMeeting-right">
+            <card title="成本趋势">
+              <template #title-extra>
+                <div style="font-size: 18px;color: #4D4D4D;margin-top: 3px">成本集中</div>
+              </template>
+              <div class="cben">
+                <WorkMeetingCostTrend :height="475" />
+              </div>
+            </card>
           </div>
-        </div>
-      </a-col>
-      <a-col :span="6">
-        <div class="right border-shadow">
-          <card :title="'成本趋势'">
-            <div class="cben">
-              <div class="total">成本趋势： <span>成本集中</span></div>
-              <div
-                class="myChart"
-                ref="myChart2"
-                :style="{ height: '475px' }"
-              ></div>
-            </div>
-          </card>
-        </div>
-      </a-col>
-    </a-row>
+        </a-col>
+      </a-row>
+    </div>
   </div>
 </template>
 <script>
 import query from "@/components/common/query.vue";
 import card from "@/components/common/card.vue";
 import timeline from "@/components/common/timeLine.vue";
+import WorkMeetingCostTrend from "@/components/work/meeting/component/workMeetingCostTrend.vue";
+
 export default {
   components: {
     query,
     card,
     timeline,
+    WorkMeetingCostTrend,
   },
   data() {
     const listData = [];
@@ -121,44 +150,40 @@ export default {
         },
       ],
       columns: [
-        { title: "序号", dataIndex: "index", key: "1", width: 48 },
-        { title: "姓名", dataIndex: "name", key: "2", width: 60 },
-        { title: "部门", dataIndex: "department", key: "3", width: 80 },
-        { title: "最后进入时间", dataIndex: "time", key: "4", width: 90 },
+        {title: "序号", dataIndex: "index", key: "1", width: 48},
+        {title: "姓名", dataIndex: "name", key: "2", width: 60},
+        {title: "部门", dataIndex: "department", key: "3", width: 80},
+        {title: "最后进入时间", dataIndex: "time", key: "4", width: 90},
       ],
       listData: listData,
       coreData: [
         {
-          title: "会议室饱和度",
+          title: "会议室饱和度(月)",
           num: "90%",
-          unit: "/月",
           historyDesc: "同比",
           historyNum: 0.4,
         },
         {
-          title: "会议室占用率",
+          title: "会议室占用率(天)",
           num: "80%",
-          unit: "/天",
           historyDesc: "同比",
           historyNum: 0.4,
         },
         {
           title: "会议室占用率",
           num: "80%",
-          unit: "/天",
           historyDesc: "同比",
           historyNum: 0.4,
         },
         {
-          title: "人均成本（会议）",
+          title: "会议室人均成本(元/人/月)",
           num: 80,
-          unit: "元/人/月",
           historyDesc: "同比",
           historyNum: 0.4,
         },
         {
           type: 1,
-          isHighLight: false,
+          showStar: true,
           title: "值得关注",
           content: "增加会议室",
         },
@@ -502,8 +527,7 @@ export default {
     };
   },
   mounted() {
-    this.setEchart2();
-    this.changeTab(0);
+    this.changeTab(1);
   },
   methods: {
     handleChange(value) {
@@ -518,269 +542,51 @@ export default {
     changeTab(index) {
       this.tabsItemArr = this.tabsArr[index].content;
     },
-    setEchart1() {},
-    setEchart2() {
-      let that = this;
-      let chart = this.$echarts.init(this.$refs.myChart2);
-
-      let xLabel = ["3.26", "3.27", "3.28", "3.29", "3.30", "3.31"];
-
-      let yData = [
-        {
-          name: "市场部",
-          color: "#5087ec",
-          startColor: "rgba(80,135,236,.6)",
-          endColor: "rgba(80,135,236,.6)",
-          data: ["110", "130", "150", "170", "150", "130"],
-        },
-        {
-          name: "办公室",
-          color: "#68bbc4",
-          startColor: "rgba(104,187,196,.6)",
-          endColor: "rgba(104,187,196,.6)",
-          data: ["210", "230", "250", "270", "250", "230"],
-        },
-        {
-          name: "产品中心",
-          color: "#60b565",
-          startColor: "rgba(96,181,101,.6)",
-          endColor: "rgba(96,181,101,.6)",
-          data: ["310", "330", "350", "370", "350", "330"],
-        },
-        {
-          name: "智慧院",
-          color: "#f2bd42",
-          startColor: "rgba(242,189,66,.6)",
-          endColor: "rgba(242,189,66,.6)",
-          data: ["410", "430", "450", "470", "450", "430"],
-        },
-        {
-          name: "业务一部",
-          color: "#ee752f",
-          startColor: "rgba(238,117,47,.6)",
-          endColor: "rgba(238,117,47,.6)",
-          data: ["510", "530", "550", "570", "550", "530"],
-        },
-        {
-          name: "其他部门",
-          color: "#d95040",
-          startColor: "rgba(217,80,64,.6)",
-          endColor: "rgba(217,80,64,.6)",
-          data: ["610", "630", "650", "670", "650", "630"],
-        },
-      ];
-      let ySeries = yData.map(function (item) {
-        return {
-          name: item.name,
-          type: "line",
-          stack: "Total",
-          // symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
-          showAllSymbol: true,
-          symbolSize: 8,
-          smooth: true,
-          lineStyle: {
-            normal: {
-              width: 2,
-              color: item.color, // 线条颜色
-            },
-          },
-          itemStyle: {
-            color: item.color,
-          },
-          areaStyle: {
-            normal: {
-              //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
-              color: new that.$echarts.graphic.LinearGradient(
-                0,
-                0,
-                0,
-                1,
-                [
-                  {
-                    offset: 0,
-                    color: item.startColor,
-                  },
-                  {
-                    offset: 1,
-                    color: item.endColor,
-                  },
-                ],
-                false
-              ),
-            },
-          },
-          data: item.data,
-        };
-      });
-
-      let options = {
-        // backgroundColor: "#000237",
-        tooltip: {
-          trigger: "axis",
-          // backgroundColor: "transparent",
-          axisPointer: {
-            lineStyle: {
-              color: {
-                type: "linear",
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: "rgba(126,199,255,0)", // 0% 处的颜色
-                  },
-                  {
-                    offset: 0.5,
-                    color: "rgba(126,199,255,1)", // 100% 处的颜色
-                  },
-                  {
-                    offset: 1,
-                    color: "rgba(126,199,255,0)", // 100% 处的颜色
-                  },
-                ],
-                global: false, // 缺省为 false
-              },
-            },
-          },
-        },
-        legend: {
-          align: "left",
-          top: "5%",
-          textStyle: {
-            color: "#000000",
-            fontSize: 16,
-          },
-        },
-        grid: {
-          top: "20%",
-          left: "15%",
-          right: "10%",
-          bottom: "10%",
-          // containLabel: true
-        },
-        xAxis: [
-          {
-            type: "category",
-            // boundaryGap: false,
-            axisLine: {
-              //坐标轴轴线相关设置。数学上的x轴
-              show: true,
-              lineStyle: {
-                color: "#6e7079",
-              },
-            },
-            axisLabel: {
-              //坐标轴刻度标签的相关设置
-              textStyle: {
-                color: "#000000",
-                padding: 8,
-                fontSize: 14,
-              },
-              formatter: function (data) {
-                return data;
-              },
-            },
-            splitLine: {
-              show: false,
-              lineStyle: {
-                color: "#233653",
-              },
-            },
-            axisTick: {
-              show: true,
-              inside: true,
-            },
-            data: xLabel,
-          },
-        ],
-        yAxis: [
-          {
-            min: 0,
-            splitLine: {
-              show: true,
-              lineStyle: {
-                color: "#e8e8e8",
-              },
-            },
-            axisLine: {
-              show: false,
-              lineStyle: {
-                color: "#233653",
-              },
-            },
-            axisLabel: {
-              show: true,
-              textStyle: {
-                color: "#000000",
-                padding: 8,
-              },
-              formatter: function (value) {
-                if (value === 0) {
-                  return value;
-                }
-                return value;
-              },
-            },
-            axisTick: {
-              show: false,
-            },
-          },
-        ],
-        series: ySeries,
-      };
-      chart.setOption(options);
+    setEchart1() {
     },
   },
 };
 </script>
-  
-
-<style lang="less" scoped>
-.left {
-  padding-right: 15px;
-  margin-right: 5px;
-}
-.right {
-  padding-left: 15px;
-  margin-left: 5px;
-}
 
-.cben {
-  font-weight: bold;
-  span {
-    font-size: 20px;
-  }
-}
 
-.huiyi_ksh {
-  height: 300px;
-  .aside {
-    width: 100px;
-    height: 100%;
-    margin-right: 5px;
-    display: inline-block;
-    overflow: hidden;
-    overflow-y: auto;
+<style lang="less" scoped>
+.workMeeting {
+  .workMeeting-left {
+    background-color: #ffffff;
+    padding: 2px 15px;
+    border-radius: 4px;
+    margin-right: 6px;
+    .workMeeting-left-detail {
+      margin-top: 30px;
+      padding: 0 20px;
+      margin-bottom: 12px;
+      .workMeeting-left-detail-label {
+        vertical-align: top;
+        color: #B2B2B2;
+      }
+      .workMeeting-left-detail-content {
+        width: 100%;
+        font-size: 12px;
+        background-color: #f7f9fa;
+        color: #999999;
+        padding-left: 12px;
+      }
+    }
   }
-  .container {
-    width: calc(100% - 100px - 5px);
-    height: 100%;
-    display: inline-block;
+  /deep/ .ant-descriptions-item {
     vertical-align: top;
-    overflow: hidden;
-    overflow-y: auto;
   }
-}
-.huiyi_detailed {
-  height: 205px;
-  .ant-row {
-    height: 60px;
-    line-height: 60px;
-    .label {
-      text-align: right;
-    }
+  /deep/ .ant-descriptions-item-content {
+    width: 80%;
+    line-height: 24px;
+  }
+  .workMeeting-right {
+    background-color: #ffffff;
+    padding: 2px 15px;
+    border-radius: 4px;
+    margin-left: 6px;
   }
 }
+
+
 </style>

src/components/work/overview/component/workRoomDistribute.vue

@@ -32,8 +32,8 @@
               <span class="floor-area-num">{{ floor.leader }}m²</span>
             </div>
             <div class="floor-area">
-              <div class="example-circle" :style="{backgroundColor: colors.work}"></div>
-              <div class="example-desc">工作区</div>
+              <div class="example-circle" :style="{backgroundColor: colors.print}"></div>
+              <div class="example-desc">打印区</div>
               <span class="floor-area-num">{{ floor.leader }}m²</span>
             </div>
           </div>

src/components/work/overview/workOverview.vue

@@ -86,10 +86,10 @@ export default {
         },
       ],
       columns: [
-        {title: "序号", dataIndex: "index", key: "1", width: 48},
-        {title: "姓名", dataIndex: "name", key: "2", width: 60},
+        //{title: "序号", dataIndex: "index", key: "1", width: 48},
+        {title: "姓名", dataIndex: "name", key: "2", width: 70},
         {title: "部门", dataIndex: "department", key: "3", width: 80},
-        {title: "最后进入时间", dataIndex: "time", key: "4", width: 95},
+        {title: "最后进入时间", dataIndex: "time", key: "4", },
       ],
       listData: listData,
       coreData: [

src/components/work/print/component/workPrintChart.vue

@@ -0,0 +1,131 @@
+<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 = {
+        legend: {
+          data: [
+            '打印纸张',
+            '墨盒消耗',
+          ]
+        },
+        grid: {
+          left: '2%', //默认10%
+          right: '3%', //默认10%
+          bottom: '13%', //默认60
+          top: '15%',
+          containLabel: true
+          //grid区域是否包含坐标轴的刻度标签
+        },
+        xAxis: {
+          type: 'category',
+          data: ['2月1日', '2月2日', '2月3日', '2月4日', '2月5日', '2月6日', '2月7日']
+        },
+        yAxis: [
+          {
+            name: '纸张数量',
+            type: 'value',
+            position: 'left',
+            axisLine: {
+              show: true,
+            },
+            nameTextStyle: {
+              padding: [10, 0, 10, 0]
+            },
+          },
+          {
+            name: '墨盒消耗',
+            type: 'value',
+            axisLine: {
+              show: true,
+            },
+            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)',
+        },
+        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',
+            barWidth: '15%',
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            },
+            itemStyle: {
+              color: '#80D4FF'
+            }
+          },
+          {
+            name: '墨盒消耗',
+            data: [131, 136, 118, 121, 173, 188, 159],
+            type: 'bar',
+            yAxisIndex: 1,
+            barWidth: '15%',
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            },
+            itemStyle: {
+              color: '#FFDF80'
+            }
+          },
+        ]
+      };
+      chart.setOption(options);
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/components/work/print/component/workPrintTrend.vue

@@ -0,0 +1,119 @@
+<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: [
+          {
+            type: 'slider',
+            start: 0,
+            end: 30,
+            height: 12,
+          },
+          {
+            type: 'inside',
+            start: 0,
+            end: 100,
+          }
+        ],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          },
+          textStyle: {
+            color: '#fff',
+            align: 'left',
+            fontSize: 14
+          },
+          axisLine: {//x坐标轴轴线
+            show: true,
+            lineStyle: {//x坐标轴轴线样式
+              color: '#000',//'#ccc' | 'rgb(128, 128, 128)' | 'rgba(128, 128, 128, 0.5)'，设置标签颜色
+            }
+          },
+          backgroundColor: 'rgba(0,0,0,0.8)',
+        },
+        series: [
+          {
+            name: '成本',
+            data: [167, 156, 176, 156, 173, 127, 101, 165, 121, 193, 172, 149],
+            type: 'line',
+            stack: 'x',
+            smooth: true,
+            showSymbol:false,
+            areaStyle: {
+              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: '#B0E5CB' // 0% 处的颜色
+              }, {
+                offset: 0.8,
+                color: '#ffffff' // 100% 处的颜色
+              }], false),
+            },
+            lineStyle: {
+              color: "#62CC97",
+              width: 1,
+            },
+            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/work/print/workPrint.vue

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

src/data/json/menuList.json

@@ -13,25 +13,25 @@
         "name": "智慧餐厅",
         "router": "/life/restaurant",
         "icon": "",
-        "iconColor": "functionColor/life/iocRestaurant.png"
+        "iconColor": "functionColor/智慧餐厅.png"
       },
       {
         "name": "智慧停车",
         "router": "/life/parking",
         "icon": "",
-        "iconColor": "functionColor/life/iocRestaurant.png"
+        "iconColor": "functionColor/智慧停车.png"
       },
       {
         "name": "无人商超",
         "router": "/life/supermarket",
         "icon": "",
-        "iconColor": "functionColor/life/iocRestaurant.png"
+        "iconColor": "functionColor/无人商超.png"
       },
       {
         "name": "健康小屋",
         "router": "/life/healthyHome",
         "icon": "",
-        "iconColor": "functionColor/life/iocRestaurant.png"
+        "iconColor": "functionColor/健康小屋.png"
       }
     ]
   },
@@ -44,25 +44,25 @@
         "name": "楼层概览",
         "router": "/work/overview",
         "icon": "",
-        "iconColor": "functionColor/life/iocRestaurant.png"
+        "iconColor": "functionColor/楼层概览.png"
       },
       {
         "name": "会议管理",
         "router": "/work/meeting",
         "icon": "",
-        "iconColor": "functionColor/life/iocRestaurant.png"
+        "iconColor": "functionColor/会议管理.png"
       },
       {
         "name": "文印管理",
         "router": "/work/print",
         "icon": "",
-        "iconColor": "functionColor/life/iocRestaurant.png"
+        "iconColor": "functionColor/文印管理.png"
       },
       {
         "name": "公车管理",
         "router": "/work/bus",
         "icon": "",
-        "iconColor": "functionColor/life/iocRestaurant.png"
+        "iconColor": "functionColor/公车管理.png"
       }
     ]
   },
@@ -75,25 +75,25 @@
         "name": "双碳概览",
         "router": "/doubleCarbon/overview",
         "icon": "",
-        "iconColor": "functionColor/life/iocRestaurant.png"
+        "iconColor": "functionColor/数智双碳.png"
       },
       {
         "name": "车辆排放",
         "router": "/doubleCarbon/car",
         "icon": "",
-        "iconColor": "functionColor/life/iocRestaurant.png"
+        "iconColor": "functionColor/车辆排放.png"
       },
       {
         "name": "文印排放",
         "router": "/doubleCarbon/print",
         "icon": "",
-        "iconColor": "functionColor/life/iocRestaurant.png"
+        "iconColor": "functionColor/文印排放.png"
       },
       {
         "name": "光伏发电",
         "router": "/doubleCarbon/pv",
         "icon": "",
-        "iconColor": "functionColor/life/iocRestaurant.png"
+        "iconColor": "functionColor/光伏发电.png"
       }
     ]
   },
@@ -105,17 +105,20 @@
       {
         "name": "资产管理",
         "router": "/business/asset",
-        "icon": ""
+        "icon": "",
+        "iconColor": "functionColor/life/iocRestaurant.png"
       },
       {
         "name": "空间管理",
         "router": "/business/space",
-        "icon": ""
+        "icon": "",
+        "iconColor": "functionColor/空间管理.png"
       },
       {
         "name": "能源管理",
         "router": "/business/analysis",
-        "icon": ""
+        "icon": "",
+        "iconColor": "functionColor/能源管理.png"
       }
     ]
   },
@@ -127,12 +130,14 @@
       {
         "name": "安防人员",
         "router": "/security/person",
-        "icon": ""
+        "icon": "",
+        "iconColor": "functionColor/安防人员.png"
       },
       {
         "name": "安消联动",
         "router": "/security/alarm",
         "icon": "",
+        "iconColor": "functionColor/安消联动.png",
         "children": [
           {
             "name": "地图模式",
@@ -159,7 +164,8 @@
       {
         "name": "设备交互",
         "router": "/security/device",
-        "icon": ""
+        "icon": "",
+        "iconColor": "functionColor/设备交互.png"
       }
     ]
   },
@@ -172,6 +178,7 @@
         "name": "智•会议",
         "router": "/scene/meeting",
         "icon": "",
+        "iconColor": "functionColor/智会议.png",
         "children": [
           {
             "name": "配置会议",
@@ -189,6 +196,7 @@
         "name": "智•能源",
         "router": "/scene/energy",
         "icon": "",
+        "iconColor": "functionColor/智能源.png",
         "children": [
           {
             "name": "智能空调",
@@ -211,6 +219,7 @@
         "name": "智•安防",
         "router": "/scene/access",
         "icon": "",
+        "iconColor": "functionColor/智安防.png",
         "children": [
           {
             "name": "门禁管理",
@@ -240,6 +249,7 @@
         "name": "报表",
         "router": "/report/table",
         "icon": "",
+        "iconColor": "functionColor/报表.png",
         "children": [
           {
             "name": "定制化消费报表",
@@ -277,6 +287,7 @@
         "name": "报告",
         "router": "/report/data",
         "icon": "",
+        "iconColor": "functionColor/报告.png",
         "children": [
           {
             "name": "餐厅消费报告",
@@ -286,27 +297,5 @@
         ]
       }
     ]
-  },
-  {
-    "name": "权限下达",
-    "router": "/auth",
-    "icon": "function/auth.png",
-    "children": [
-      {
-        "name": "角色权限",
-        "router": "",
-        "icon": ""
-      },
-      {
-        "name": "行为权限",
-        "router": "",
-        "icon": ""
-      },
-      {
-        "name": "权限查看",
-        "router": "",
-        "icon": ""
-      }
-    ]
   }
 ]

src/router/index.js

@@ -218,7 +218,7 @@ const router = new VueRouter({
                   path: '/report/data/restaurant',
                   name: 'reportDataRestaurant',
                   meta: {breadcrumb: '餐厅消费报告'},
-                  component: () => import('@/components/report/table/reportDataRestaurant.vue')
+                  component: () => import('@/components/report/data/reportDataRestaurant.vue')
                 }
               ]
             }

src/stores/index.js

@@ -9,49 +9,49 @@ const menuStore = defineStore('ioc-menu', {
                     "name": "智慧餐厅",
                     "router": "/life/restaurant",
                     "icon": "",
-                    "iconColor": "functionColor/life/iocRestaurant.png"
+                    "iconColor": "functionColor/智慧餐厅.png"
                 },
                 {
                     "name": "智慧停车",
                     "router": "/life/parking",
                     "icon": "",
-                    "iconColor": "functionColor/life/iocRestaurant.png"
+                    "iconColor": "functionColor/智慧停车.png"
                 },
                 {
                     "name": "无人商超",
                     "router": "/life/supermarket",
                     "icon": "",
-                    "iconColor": "functionColor/life/iocRestaurant.png"
+                    "iconColor": "functionColor/无人商超.png"
                 },
                 {
                     "name": "健康小屋",
                     "router": "/life/healthyHome",
                     "icon": "",
-                    "iconColor": "functionColor/life/iocRestaurant.png"
+                    "iconColor": "functionColor/健康小屋.png"
                 },
                 {
-                    "name": "双碳概览",
-                    "router": "/doubleCarbon/overview",
+                    "name": "楼层概览",
+                    "router": "/work/overview",
                     "icon": "",
-                    "iconColor": "functionColor/life/iocRestaurant.png"
+                    "iconColor": "functionColor/楼层概览.png"
                 },
                 {
-                    "name": "车辆排放",
-                    "router": "/doubleCarbon/car",
+                    "name": "会议管理",
+                    "router": "/work/meeting",
                     "icon": "",
-                    "iconColor": "functionColor/life/iocRestaurant.png"
+                    "iconColor": "functionColor/会议管理.png"
                 },
                 {
-                    "name": "文印排放",
-                    "router": "/doubleCarbon/print",
+                    "name": "文印管理",
+                    "router": "/work/print",
                     "icon": "",
-                    "iconColor": "functionColor/life/iocRestaurant.png"
+                    "iconColor": "functionColor/文印管理.png"
                 },
                 {
-                    "name": "光伏发电",
-                    "router": "/doubleCarbon/pv",
+                    "name": "公车管理",
+                    "router": "/work/bus",
                     "icon": "",
-                    "iconColor": "functionColor/life/iocRestaurant.png"
+                    "iconColor": "functionColor/公车管理.png"
                 }
             ],
         }

src/style/common.css

@@ -27,6 +27,11 @@
   margin: 0 3px !important;
 }
 
+.card-style {
+  padding: 0 12px;
+  border-radius: 4px;
+}
+
 @font-face {
   font-family: numberMH;
   src: url(../assets/fonts/Digiface-Regular.ttf);