瀏覽代碼

系统集成样式修改bug

haojianlong 5 年之前
父節點
當前提交
63c5577435
共有 2 個文件被更改,包括 144 次插入88 次删除
  1. 119 88
      src/components/point/report/integrateStatistics.vue
  2. 25 0
      src/framework/style/layout.scss

+ 119 - 88
src/components/point/report/integrateStatistics.vue

@@ -9,7 +9,7 @@
     <!-- 图形图 -->
     <div class="statistics-chart" style="border-top:5px solid #eee;min-height: calc(65% - 3px);">
       <div class="chart-title">共包含原始点位:{{ originalPoint }} 个</div>
-      <div style="padding:15px 10%;line-height:2;">
+      <div style="padding:15px 20px;line-height:2;">
         1点位对多表号功能号:{{ pointData.oneToM.toString() }}
         <br />
         多点位对1表号功能号:{{ pointData.mToOne.toString() }}
@@ -18,7 +18,32 @@
           style="margin:-25px 0 0 50px;background:rgb(121, 187, 255);color:rgb(225, 228, 229);border:none;"></el-button>
       </div>
       <hr style="width:90%;margin-top: 1px;" />
-      <div ref="barchart" class="chart" id="barchart" :style="{height:barChartData.length * 120 + 'px'}"></div>
+      <div ref="barchart" class="" id="barchart" :style="{height:barChartData.length * 120 + 'px'}">
+        <el-row class="barchart-title">
+          <el-col :span="12">
+            <span style="background:#79bbff;"></span>已接入点位 {{pointInSum}}
+          </el-col>
+          <el-col :span="12">
+            <span style="background:#e1e4e5;"></span>未接入点位 {{pointOutSum}}
+          </el-col>
+        </el-row>
+        <div>
+          <div class="source" v-for="t in barChartData" :key="t.Id">
+            <el-row class="source-name">
+              <div :title='t.Name'>{{t.Name}}</div>
+              <div>{{t.Notrelatedall+t.Relatedall}}个原始点位</div>
+            </el-row>
+            <el-row class="source-chart already-in">
+              <el-col :style="{width:(t.widthin>1?t.widthin:1)+'%'}"></el-col>
+              <el-col>{{t.Relatedall}}</el-col>
+            </el-row>
+            <el-row class="source-chart not-in">
+              <el-col :style="{width:(t.widthout>1?t.widthout:1)+'%'}"></el-col>
+              <el-col>{{t.Notrelatedall}}</el-col>
+            </el-row>
+          </div>
+        </div>
+      </div>
     </div>
     <!-- 点位/表号功能号对应总览 -->
     <pointTabOverview ref="overviewDialog"></pointTabOverview>
@@ -43,8 +68,6 @@ export default {
     return {
       //环形图
       loopChart: null,
-      //条形图
-      barChart: null,
       //环形图数据
       loopChartData: [],
       //条形图数据
@@ -57,7 +80,9 @@ export default {
         disConn: 0//可能断数数量
       },
       //原始点数量
-      originalPoint: null
+      originalPoint: null,
+      pointInSum: 0, //左侧柱形图已接入
+      pointOutSum: 0, //左侧柱形图未接入
     };
   },
   methods: {
@@ -132,8 +157,8 @@ export default {
               avoidLabelOverlap: false,
               legendHoverLink: false,
               selectedOffset: 0,
-              label:{
-                  color:'rgb(121, 187, 255)',
+              label: {
+                color: 'rgb(121, 187, 255)',
               },
               emphasis: {
                 itemStyle: {
@@ -168,7 +193,22 @@ export default {
 
       //获取条形图数据
       getIntegrateStatisticsToBar({}, res => {
-        this.barChartData = res.Content;
+        let max = 1;
+        res.Content.forEach(t => {
+          this.pointInSum += t.Relatedall;
+          this.pointOutSum += t.Notrelatedall;
+          if (t.Relatedall > max) {
+            max = t.Relatedall
+          }
+          if (t.Notrelatedall > max) {
+            max = t.Notrelatedall
+          }
+        })
+        this.barChartData = res.Content.map(t => {
+          t.widthin = ((t.Relatedall / max) * 0.8).toFixed(2) * 100
+          t.widthout = ((t.Notrelatedall / max) * 0.8).toFixed(2) * 100
+          return t;
+        });
         this.originalPoint = (() => {
           let sum = 0;
           this.barChartData.map(item => {
@@ -176,71 +216,6 @@ export default {
           });
           return sum;
         })();
-
-        //条形图参数
-        let barOption = {
-          tooltip: {
-            trigger: "axis",
-            axisPointer: {
-              // 坐标轴指示器,坐标轴触发有效
-              type: "shadow" // 默认为直线,可选为:'line' | 'shadow'
-            }
-          },
-          color: ['rgb(121, 187, 255)', 'rgb(225, 228, 229)'],
-          legend: {
-            data: ["已接入", "未接入"]
-          },
-          grid: {
-            left: "3%",
-            right: "4%",
-            bottom: "3%",
-            containLabel: true
-          },
-          xAxis: [
-            {
-              type: "value",
-              position: "top"
-            }
-          ],
-          yAxis: [
-            {
-              type: "category",
-              axisTick: { show: false },
-              data: this.barChartData.map(item => item.Name)
-            }
-          ],
-          series: [
-            {
-              name: "已接入",
-              type: "bar",
-              label: {
-                normal: {
-                  show: true,
-                  position: "inside"
-                }
-              },
-              data: this.barChartData.map(item => item.Relatedall)
-            },
-            {
-              name: "未接入",
-              type: "bar",
-              stack: "总量",
-              label: {
-                normal: {
-                  show: true
-                }
-              },
-              data: this.barChartData.map(item => item.Notrelatedall)
-            }
-          ]
-        };
-
-        /* 条形图高度随数量变化,延时初始化 */
-        let that = this;
-        setTimeout(() => {
-          that.barChart = echarts.init(document.getElementById("barchart"));
-          that.barChart.setOption(barOption);
-        }, 100);
       });
     },
     //点位/表号
@@ -258,8 +233,6 @@ export default {
     window.onresize = () => {
       if (that.loopChart != null)
         that.loopChart.resize();
-      if (that.barChart != null)
-        that.barChart.resize();
     };
   },
   components: {
@@ -271,18 +244,76 @@ export default {
 <style lang="less" scoped>
 #integrateStatistics {
   border-top: 5px solid #eee;
-}
-.statistics-chart {
-  min-height: calc(35% - 3px);
-}
-.chart-title {
-  padding: 5px 5%;
-  font-size: 16px;
-  font-weight: 500;
-}
-.chart {
-  min-height: 200px;
-  height: auto;
-  width: 100%;
+  .statistics-chart {
+    min-height: calc(35% - 3px);
+    .chart-title {
+      padding: 5px 20px;
+      font-size: 16px;
+      font-weight: 500;
+    }
+  }
+  .chart {
+    min-height: 200px;
+    height: auto;
+    width: 100%;
+  }
+  #barchart {
+    font-size: 12px;
+    .barchart-title {
+      margin: 15px 0;
+      .el-col {
+        padding-left: 20px;
+        span {
+          display: inline-block;
+          width: 14px;
+          height: 14px;
+          margin: 0 10px -2px 0;
+        }
+      }
+    }
+    .source {
+      margin-bottom: 15px;
+      .source-name {
+        margin-bottom: 15px;
+        div {
+          float: left;
+          box-sizing: border-box;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          &:nth-child(1) {
+            width: 65%;
+            padding-left: 20px;
+          }
+          &:nth-child(2) {
+            width: 35%;
+            text-align: right;
+            padding-right: 20px;
+          }
+        }
+      }
+      .source-chart {
+        box-sizing: border-box;
+        padding: 0 20px;
+        .el-col {
+          height: 30px;
+          &:nth-child(2) {
+            padding-left: 10px;
+            width: 20%;
+          }
+        }
+        &.already-in {
+          .el-col:nth-child(1) {
+            background: #79bbff;
+          }
+        }
+        &.not-in {
+          .el-col:nth-child(1) {
+            background: #e1e4e5;
+          }
+        }
+      }
+    }
+  }
 }
 </style>

+ 25 - 0
src/framework/style/layout.scss

@@ -17,7 +17,32 @@ body {
     width: 100%;
     height: 100%;
 }
+/*---滚动条默认显示样式--*/
+::-webkit-scrollbar-thumb{
+    height:50px;
+    outline-offset:-2px;
+    outline:2px solid #dddee0;
+    border: 2px solid #dddee0;
+    background-color: #dddee0;
+    border-radius: 4px;
+}
+
+/*---鼠标点击滚动条显示样式--*/
+::-webkit-scrollbar-thumb:hover{
+    height:50px;
+}
+
 
+/*---滚动条大小--*/
+::-webkit-scrollbar{
+    width:8px;
+    height:8px;
+}
+
+/*---滚动框背景样式--*/
+::-webkit-scrollbar-track-piece{
+    
+}
 #page-main {
     width: 100%;
     height: 100%;