Browse Source

1:环形图数字变大 2:1对多多对一信息位置变更,表格按钮改成hover显示

LXXXY 5 years ago
parent
commit
fe7dc1c15f

+ 28 - 18
src/components/point/report/integrateStatistics.vue

@@ -2,24 +2,23 @@
   <div id="integrateStatistics">
     <!-- 环形表 -->
     <div class="statistics-chart">
-      <div class="chart-title">表号功能号总数量:{{ pointData.tabFuncNumSum }}</div>
+      <div class="chart-title">表号功能号总数量:{{ pointData.tabFuncNumSum }} <span style="float:right">目前可能断数的数量:{{ pointData.disConn }}</span></div>
       <hr style="width:90%" />
       <div ref="loopchart" class="chart" id="loopchart"></div>
-      <div class="chart-title" style="padding-left:10%;">目前可能断数的数量:{{ pointData.disConn }}</div>
-      <hr style="width:80%" />
+    </div>
+    <!-- 图形图 -->
+    <div class="statistics-chart" style="border-top:5px solid #eee;min-height: calc(65% - 3px);">
+      <div class="chart-title">共包含原始点位:{{ originalPoint }} 个</div>
+      <hr style="width:90%" />
       <div style="padding:15px 10%;line-height:2;">
         1点位对多表号功能号:{{ pointData.oneToM }}
         <br />
-        多点对1表号功能号:{{ pointData.mToOne }}
+        多点对1表号功能号:{{ pointData.mToOne }}
         <!-- 查看表号功能号一对多多对一总览 -->
         <el-button @click="showOverview" type="info" icon="el-icon-arrow-right" circle
           style="margin:-25px 0 0 50px;background:rgb(121, 187, 255);color:rgb(225, 228, 229);border:none;"></el-button>
       </div>
-    </div>
-    <!-- 图形图 -->
-    <div class="statistics-chart" style="border-top:5px solid #eee;">
-      <div class="chart-title">共包含原始点位:{{ originalPoint }} 个</div>
-      <hr style="width:90%" />
+      <hr style="width:90%;margin-top: 1px;" />
       <div ref="barchart" class="chart" id="barchart" :style="{height:barChartData.length * 120 + 'px'}"></div>
     </div>
     <!-- 点位/表号共更好对应总览 -->
@@ -88,12 +87,6 @@ export default {
             formatter: "{a} <br/>{b}: {c} ({d}%)"
           },
           color: ['rgb(121, 187, 255)', 'rgb(225, 228, 229)'],
-          legend: {
-            orient: "vertical",
-            x: "5%",
-            y: "top",
-            data: that.loopChartData.map(item => item.name)
-          },
           graphic: {
             elements: [
               {
@@ -106,10 +99,27 @@ export default {
                     that.loopChartData.map(item => {
                       s += item["value"];
                     });
-                    return s + "\n总数";
+                    return s;
+                  })(),
+                  textAlign: "center",
+                  fontSize: 32,
+                  fontWeight: 300
+                }
+              },
+              {
+                type: "text",
+                left: "center",
+                top: "center",
+                style: {
+                  text: (() => {
+                    let s = 0;
+                    that.loopChartData.map(item => {
+                      s += item["value"];
+                    });
+                    return "\n\n\n总数";
                   })(),
                   textAlign: "center",
-                  fontSize: 20,
+                  fontSize: 16,
                   fontWeight: 300
                 }
               }
@@ -264,7 +274,7 @@ export default {
   border-top: 5px solid #eee;
 }
 .statistics-chart {
-  min-height: calc(50% - 3px);
+  min-height: calc(35% - 3px);
 }
 .chart-title {
   padding: 5px 5%;

+ 23 - 16
src/components/point/report/tabFunNumOverview.vue

@@ -11,43 +11,41 @@
     </div>
     <!-- 数据表格 -->
     <div class="table-area">
-      <el-table :data="tableData" style="width: 100%" height="calc(100% - 32px)" v-loading="loading" :header-cell-style="headerStyle">
-        <el-table-column prop='' label='' show-overflow-tooltip width="30" header-align='center'>
+      <el-table :data="tableData" style="width: 100%" height="calc(100% - 32px)" v-loading="loading" :header-cell-style="headerStyle" >
+        <el-table-column prop='' label='' show-overflow-tooltip width="35" header-align='center'>
           <template slot-scope="scope">
             <el-tooltip v-if="scope.row.DataQuality!=0" content="已断数,请检查" effect="dark" placement="top">
-              <i class="el-icon-warning-outline" style="float:left;margin: 0 5px;color: red;"></i>
+              <i class="el-icon-warning-outline" style="float:left;margin: 0 5px;color: red;font-size:18px;"></i>
             </el-tooltip>
           </template>
         </el-table-column>
         <el-table-column prop='MeterFunc' label='表号-功能号' show-overflow-tooltip min-width="100" header-align='center'></el-table-column>
-        <el-table-column prop='Data.Data' label='对应值(单位)' show-overflow-tooltip min-width="90" header-align='center'>
+        <el-table-column prop='Data.Data' label='查看分精度' show-overflow-tooltip min-width="90" header-align='center' align='center'>
           <template slot-scope="scope">
-            <span style="line-height:29px;">{{ scope.row.Data? scope.row.Data.Data : '' }}</span>
-            <el-button style="padding:7px 15px;float:right;" @click="handleDrawer(scope.row, 0)"><i class="el-icon-s-data"></i></el-button>
+            <el-button style="padding:7px 15px;" @click="handleDrawer(scope.row, 0)"><i class="el-icon-s-data" style="font-size:15px;"></i></el-button>
           </template>
         </el-table-column>
-        <el-table-column prop='Data.Time' label='获取时间' show-overflow-tooltip min-width="130" header-align='center'>
+        <el-table-column prop='Data.Time' label='对应值 - 获取时间' show-overflow-tooltip min-width="230" header-align='center'>
           <template slot-scope="scope">
+            <span style="line-height:29px;">{{ scope.row.Data? scope.row.Data.Data : '' }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
             <span style="line-height:29px;">{{ scope.row.Data? scope.row.Data.Time: '' }}</span>
-            <el-button style="padding:7px 15px;float:right;" @click="refreshThisRow(scope.row)"><i class="el-icon-refresh"></i></el-button>
+            <el-button class="dialog-btn" style="float:right;" @click="refreshThisRow(scope.row)"><i class="el-icon-refresh"></i></el-button>
           </template>
         </el-table-column>
         <el-table-column prop='RelatedPoint' label='涉及子系统点位(数据来源)' show-overflow-tooltip min-width="150" align='center'>
           <template slot-scope="scope">
             <span style="display:inline-block;width:16px;line-height:29px;">{{ scope.row.RelatedPoint }}</span>
-            <p style="width:55.33px;display:inline-block;">
-              <el-button v-if="scope.row.RelatedPoint" style="padding:7px 15px;margin-left:10px;" @click="handleDrawer(scope.row, 1)"><i
-                  class="el-icon-coin"></i></el-button>
-            </p>
+            <span style="width:55.33px;display:inline-block;padding-left:10px;">
+              <el-button class="dialog-btn" v-if="scope.row.RelatedPoint" @click="handleDrawer(scope.row, 1)"><i class="el-icon-coin"></i></el-button>
+            </span>
           </template>
         </el-table-column>
         <el-table-column prop='RelatedInstance' label='涉及的对象实例(应用到)' show-overflow-tooltip min-width="150" align='center'>
           <template slot-scope="scope">
             <span style="display:inline-block;width:16px;line-height:29px;">{{ scope.row.RelatedInstance }}</span>
-            <p style="width:55.33px;display:inline-block;">
-              <el-button v-if="scope.row.RelatedInstance" style="padding:7px 15px;margin-left:10px;" @click="handleDrawer(scope.row, 2)"><i
-                  class="el-icon-coin"></i></el-button>
-            </p>
+            <span style="width:55.33px;display:inline-block;padding-left:10px;">
+              <el-button class="dialog-btn" v-if="scope.row.RelatedInstance" @click="handleDrawer(scope.row, 2)"><i class="el-icon-coin"></i></el-button>
+            </span>
           </template>
         </el-table-column>
       </el-table>
@@ -208,9 +206,18 @@ export default {
   cursor: pointer;
   float: right;
 }
+.dialog-btn{
+  display:none;
+  height:29px;
+}
 /deep/ .el-drawer__body {
   height: 90%;
 }
+/deep/ .el-table__body-wrapper tr:hover{
+  .dialog-btn{
+    display:inline;
+  }
+}
 /deep/ .el-dialog__body {
   padding-bottom:20px;
 }