Forráskód Böngészése

1.单点登录图标添加; 2 折线图宽度调整

Bella 2 éve
szülő
commit
2b8177cfc6

BIN
src/assets/images/functionColor/单点登录.png


+ 2 - 2
src/components/business/space/charts/spaceCostChart.vue

@@ -12,8 +12,8 @@ export default {
           ]
         },
         grid: {
-          left: '0%', //默认10%
-          right: '1%', //默认10%
+          left: '8%', //默认10%
+          right: '10%', //默认10%
           bottom: '10%', //默认60
           top: '15%',
           containLabel: true

+ 6 - 1
src/components/dashboard/commonFuncManage/function.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="function-btn" :style="functionBtnStyle">
     <div class="function-icon">
-      <a-avatar class="function-avatar" shape="square" size="large" :src="requireImg('functionColor/'+item.icon)"></a-avatar>
+      <a-avatar v-if="item.icon==='单点登录.png'" class="function-avatar-small" shape="square" size="small" :src="requireImg('functionColor/'+item.icon)"></a-avatar>
+      <a-avatar v-else class="function-avatar" shape="square" size="large" :src="requireImg('functionColor/'+item.icon)"></a-avatar>
     </div>
     <div class="function-title">{{ item.name }}</div>
     <div class="function-btn-opr" v-if="type==-1" @click="minusFunction(item)">
@@ -67,6 +68,10 @@ export default {
       width: 50px;
       height: 50px;
     }
+    .function-avatar-small{
+      width: 30px;
+      height: 30px;
+    }
   }
   .function-title {
     width: 55%;

+ 75 - 33
src/components/dashboard/portrait/electricity/electricityDistributionChart.vue

@@ -5,66 +5,108 @@ export default {
   data() {
     return {
       option: {
-        color: ['#3AA7E6', '#9790F8', '#4ACFB8', '#F4955F', '#F8797E'],
+        color: ["#3AA7E6", "#9790F8", "#4ACFB8", "#F4955F", "#F8797E"],
         tooltip: {
-          trigger: 'item'
+          trigger: "item",
+        },
+        grid: {
+          top: "-30%",
+          bottom: "50%",
+        },
+        title: {
+          text: "用电分布",
+          top: "7%",
+          left: "5%",
+          textStyle: {
+            color: "#B2B2B2",
+            align: "center",
+            lineHeight: 20,
+            fontWeight: "normal",
+          },
         },
         legend: {
-          bottom: '5%',
-          left: '10%',
-          right: '10%',
-          icon: 'circle'
+          bottom: "5%",
+          left: "10%",
+          right: "10%",
+          icon: "circle",
         },
         series: [
           {
-            name: '用电量',
-            type: 'pie',
-            radius: '50%',
-            data: [
-            ],
+            name: "用电量",
+            type: "pie",
+            radius: ["30%", "50%"],
+            data: [],
+            label: {
+              normal: {
+                show: true,
+                position: "outside",
+                align: "left",
+                /* padding: [-5, -40, 30, -10],  */
+                /* padding: [-50, -55, 0, -10],  */
+                padding: [0, -65],
+                formatter: "{b}\n\n{c}", //模板变量有 {a}、{b}、{c}、{d},分别表示系列名,数据名,数据值,百分比。{d}数据会根据value值计算百分比
+                textStyle: {
+                  align: "left",
+                  baseline: "middle",
+                  fontFamily: "PingFang SC",
+                  fontSize: 14,
+                  // color: "#FFF",
+                },
+              },
+            },
             emphasis: {
               itemStyle: {
                 shadowBlur: 10,
                 shadowOffsetX: 0,
-                shadowColor: 'rgba(0, 0, 0, 0.5)'
-              }
-            }
-          }
-        ]
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+            labelLine: {
+              show: true,
+              length: 20,
+              length2: 60,
+            },
+          },
+        ],
       },
-    }
+    };
   },
   props: {
     height: Number,
-    queryData: Object
+    queryData: Object,
   },
   mounted() {
-    this.$nextTick(()=>{
-      this.initChart()
-    })
+    this.$nextTick(() => {
+      this.initChart();
+    });
   },
   methods: {
     initChart() {
-      let chart = this.$echarts.init(this.$refs.myChart)
+      let chart = this.$echarts.init(this.$refs.myChart);
       this.chart = chart;
       this.$util.chartsResize(this.chart);
       chart.setOption(this.option);
       this.getData();
     },
     getData() {
-      return apiDashboard.getElectricityCircleInfoList(this.queryData).then(res=>{
-        this.option.series[0].data = res;
-        this.chart.setOption(this.option)
-      })
-    }
-  }
-}
+      return apiDashboard
+        .getElectricityCircleInfoList(this.queryData)
+        .then((res) => {
+          console.log(res, "获取的用电量数据");
+          this.option.series[0].data = res;
+          this.chart.setOption(this.option);
+        });
+    },
+  },
+};
 </script>
 
 <template>
-  <div style="width: 100%" :style="{height: height+'px'}" ref="myChart"></div>
+  <div
+    style="width: 100%"
+    :style="{ height: height + 'px' }"
+    ref="myChart"
+  ></div>
 </template>
 
-<style lang="less" scoped>
-
-</style>
+<style lang="less" scoped></style>

+ 2 - 2
src/components/dashboard/portrait/person/personTrendChart.vue

@@ -20,8 +20,8 @@ export default {
           ]
         },
         grid: {
-          left: '0%', //默认10%
-          right: '1%', //默认10%
+          left: '2%', //默认10%
+          right: '3.5%', //默认10%
           bottom: '15%', //默认60
           top: '15%',
           containLabel: true

+ 55 - 32
src/components/dashboard/portrait/water/waterDistributionChart.vue

@@ -5,65 +5,88 @@ export default {
   data() {
     return {
       option: {
-        color: ['#3AA7E6', '#F4955F'],
+        color: ["#3AA7E6", "#F4955F"],
         tooltip: {
-          trigger: 'item'
+          trigger: "item",
         },
         legend: {
-          bottom: '8%',
-          icon: 'circle'
+          bottom: "8%",
+          icon: "circle",
         },
         series: [
           {
-            name: '用水量',
-            type: 'pie',
-            radius: '50%',
-            data: [
-
-            ],
+            name: "用水量",
+            type: "pie",
+            radius: ["30%", "50%"],
+            label: {
+              normal: {
+                show: true,
+                position: "outside",
+                align: "left",
+                /* padding: [-5, -40, 30, -10],  */
+                /* padding: [-50, -55, 0, -10],  */
+                padding: [0, -65],
+                formatter: "{b}\n\n{c}", //模板变量有 {a}、{b}、{c}、{d},分别表示系列名,数据名,数据值,百分比。{d}数据会根据value值计算百分比
+                textStyle: {
+                  align: "left",
+                  baseline: "middle",
+                  fontFamily: "PingFang SC",
+                  fontSize: 14,
+                  // color: "#FFF",
+                },
+              },
+            },
+            data: [],
             emphasis: {
               itemStyle: {
                 shadowBlur: 10,
                 shadowOffsetX: 0,
-                shadowColor: 'rgba(0, 0, 0, 0.5)'
-              }
-            }
-          }
-        ]
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+            labelLine: {
+              show: true,
+              length: 20,
+              length2: 60,
+            },
+          },
+        ],
       },
-    }
+    };
   },
   props: {
     height: Number,
-    queryData: Object
+    queryData: Object,
   },
   mounted() {
-    this.$nextTick(()=>{
-      this.initChart()
-    })
+    this.$nextTick(() => {
+      this.initChart();
+    });
   },
   methods: {
     initChart() {
-      let chart = this.$echarts.init(this.$refs.myChart)
+      let chart = this.$echarts.init(this.$refs.myChart);
       this.chart = chart;
       this.$util.chartsResize(this.chart);
-      chart.setOption(this.option)
-      this.getData()
+      chart.setOption(this.option);
+      this.getData();
     },
     getData() {
-      return apiDashboard.getWaterCircleInfoList(this.queryData).then(res=>{
+      return apiDashboard.getWaterCircleInfoList(this.queryData).then((res) => {
         this.option.series[0].data = res;
         this.chart.setOption(this.option);
-      })
-    }
-  }
-}
+      });
+    },
+  },
+};
 </script>
 
 <template>
-  <div style="width: 100%" :style="{height: height+'px'}" ref="myChart"></div>
+  <div
+    style="width: 100%"
+    :style="{ height: height + 'px' }"
+    ref="myChart"
+  ></div>
 </template>
 
-<style lang="less" scoped>
-
-</style>
+<style lang="less" scoped></style>

+ 1 - 1
src/components/life/healthyHome/components/lifeHealthyHomeChart.vue

@@ -20,7 +20,7 @@ export default {
         },
         grid: {
           left: '2%', //默认10%
-          right: '3%', //默认10%
+          right: '4%', //默认10%
           bottom: '13%', //默认60
           top: '15%',
           containLabel: true

+ 1 - 1
src/components/life/parking/components/lifeParkTrendChart.vue

@@ -19,7 +19,7 @@ export default {
         },
         grid: {
           left: '2%', //默认10%
-          right: '2%', //默认10%
+          right: '4%', //默认10%
           bottom: '14%', //默认60
           top: '15%',
           containLabel: true

+ 2 - 2
src/components/work/bus/component/workBusTrend.vue

@@ -11,8 +11,8 @@ export default {
           ]
         },
         grid: {
-          left: '0%', //默认10%
-          right: '0%', //默认10%
+          left: '6%', //默认10%
+          right: '10%', //默认10%
           bottom: '15%', //默认60
           top: '15%',
           containLabel: true

+ 52 - 52
src/components/work/meeting/component/workMeetingCostTrend.vue

@@ -1,9 +1,5 @@
 <template>
-  <div
-      class="myChart"
-      ref="myChart"
-      :style="{ height: height+'px' }"
-  ></div>
+  <div class="myChart" ref="myChart" :style="{ height: height + 'px' }"></div>
 </template>
 
 <script>
@@ -12,7 +8,7 @@ import apiWorkMeeting from "@/api/work/apiWorkMeeting";
 export default {
   props: {
     height: Number,
-    queryData: Object
+    queryData: Object,
   },
   data() {
     let that = this;
@@ -20,37 +16,37 @@ export default {
       {
         name: "市场部",
         color: "#5087ec",
-        startColor: '#B2D5FF',
+        startColor: "#B2D5FF",
         data: [],
       },
       {
         name: "办公室",
         color: "#89D7B6",
-        startColor: '#C5FFE6',
+        startColor: "#C5FFE6",
         data: [],
       },
       {
         name: "产品中心",
         color: "#FAC37A",
-        startColor: '#FFEACF',
+        startColor: "#FFEACF",
         data: [],
       },
       {
         name: "智慧院",
         color: "#FF6E4D",
-        startColor: '#FFB5A4',
+        startColor: "#FFB5A4",
         data: [],
       },
       {
         name: "业务一部",
         color: "#4DF5FF",
-        startColor: '#B3FBFF',
+        startColor: "#B3FBFF",
         data: [],
       },
       {
         name: "其他部门",
         color: "#8B4DFF",
-        startColor: '#CDB2FF',
+        startColor: "#CDB2FF",
         data: [],
       },
     ];
@@ -61,7 +57,7 @@ export default {
         stack: "Total",
         showAllSymbol: false,
         smooth: true,
-        showSymbol:false,
+        showSymbol: false,
         lineStyle: {
           normal: {
             color: item.color, // 线条颜色
@@ -74,21 +70,21 @@ export default {
           normal: {
             //线性渐变,前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’,则该四个值是绝对像素位置。
             color: new that.$echarts.graphic.LinearGradient(
-                0,
-                0,
-                0,
-                1,
-                [
-                  {
-                    offset: 0,
-                    color: item.startColor,
-                  },
-                  {
-                    offset: 0.7,
-                    color: '#ffffff',
-                  },
-                ],
-                false
+              0,
+              0,
+              0,
+              1,
+              [
+                {
+                  offset: 0,
+                  color: item.startColor,
+                },
+                {
+                  offset: 0.7,
+                  color: "#ffffff",
+                },
+              ],
+              false
             ),
           },
         },
@@ -96,7 +92,6 @@ export default {
       };
     });
     return {
-      height: 450,
       option: {
         // backgroundColor: "#000237",
         dataZoom: this.$constant.ECHARTS_DATAZOOM,
@@ -135,13 +130,13 @@ export default {
           top: "5%",
           //itemWidth: 30,
           //itemHeight: 10,
-          formatter: name => {
+          formatter: (name) => {
             return `{a|${name}} `;
           },
           textStyle: {
-            color: '#999999',
+            color: "#999999",
             fontSize: 12,
-            align: 'left',
+            align: "left",
             backgroundColor: "transparent",
             rich: {
               a: {
@@ -149,13 +144,11 @@ export default {
               },
             },
           },
-
-
         },
         grid: {
           top: "20%",
-          left: "15%",
-          right: "5%",
+          left: "16%",
+          right: "9%",
           bottom: "18%",
           // containLabel: true
         },
@@ -227,28 +220,35 @@ export default {
         ],
         series: ySeries,
       },
-    }
+    };
   },
   mounted() {
-    this.$nextTick(()=>{
-      this.init()
-    })
+    this.$nextTick(() => {
+      this.init();
+    });
   },
   methods: {
     init() {
-      let chart = this.$echarts.init(this.$refs.myChart)
+      let chart = this.$echarts.init(this.$refs.myChart);
       this.chart = chart;
       this.$util.chartsResize(this.chart);
-      chart.setOption(this.option)
-      this.getData()
+      chart.setOption(this.option);
+      this.getData();
     },
     getData() {
-      return apiWorkMeeting.getMeetingCostTrend(this.queryData).then(res=>{
-        let data = this.$util.dataUtil.covertDataToEcharts(res, ['shichang','bangong','chanpin','zhihui','yewu','qita'])
-        console.log(data)
-        this.$util.dataUtil.refreshEchartsData(this.chart, this.option, data)
-      })
-    }
-  }
-}
-</script>
+      return apiWorkMeeting.getMeetingCostTrend(this.queryData).then((res) => {
+        let data = this.$util.dataUtil.covertDataToEcharts(res, [
+          "shichang",
+          "bangong",
+          "chanpin",
+          "zhihui",
+          "yewu",
+          "qita",
+        ]);
+        console.log(data);
+        this.$util.dataUtil.refreshEchartsData(this.chart, this.option, data);
+      });
+    },
+  },
+};
+</script>

+ 2 - 2
src/components/work/print/component/workPrintTrend.vue

@@ -11,8 +11,8 @@ export default {
           ]
         },
         grid: {
-          left: '0%', //默认10%
-          right: '0%', //默认10%
+          left: '6%', //默认10%
+          right: '10%', //默认10%
           bottom: '15%', //默认60
           top: '15%',
           containLabel: true

+ 13 - 13
src/data/json/ssoList.json

@@ -1,79 +1,79 @@
 [
   {
     "name": "能源系统",
-    "icon": "",
+    "icon": "单点登录.png",
     "url": "",
     "isSso": true
   },
   {
     "name": "文印管理系统",
-    "icon": "",
+    "icon": "单点登录.png",
     "url": "",
     "isSso": true
   },
   {
     "name": "资产管理系统",
-    "icon": "",
+    "icon": "单点登录.png",
     "url": "",
     "isSso": true
   },
   {
     "name": "空间管理系统",
-    "icon": "",
+    "icon": "单点登录.png",
     "url": "",
     "isSso": true
   },
   {
     "name": "视频云平台",
-    "icon": "",
+    "icon": "单点登录.png",
     "url": "",
     "isSso": true
   },
   {
     "name": "停车管理系统",
-    "icon": "",
+    "icon": "单点登录.png",
     "url": "",
     "isSso": true
   },
   {
     "name": "会议系统",
-    "icon": "",
+    "icon": "单点登录.png",
     "url": "",
     "isSso": true
   },
   {
     "name": "门禁口出入系统",
-    "icon": "",
+    "icon": "单点登录.png",
     "url": "",
     "isSso": true
   },
   {
     "name": "餐厅系统",
-    "icon": "",
+    "icon": "单点登录.png",
     "url": "",
     "isSso": true
   },
   {
     "name": "碳数据管理平台",
-    "icon": "",
+    "icon": "单点登录.png",
     "url": "",
     "isSso": true
   },
   {
     "name": "智慧健康系统",
-    "icon": "",
+    "icon": "单点登录.png",
     "url": "",
     "isSso": true
   },
   {
     "name": "车辆管理系统",
-    "icon": "",
+    "icon": "单点登录.png",
     "url": "",
     "isSso": true
   },
   {
     "name": "无人商超系统",
-    "icon": "",
+    "icon": "单点登录.png",
     "url": "",
     "isSso": true
   }