Kaynağa Gözat

修改总览中断数图标错位

LXXXY 5 yıl önce
ebeveyn
işleme
fba8aa99dc
1 değiştirilmiş dosya ile 172 ekleme ve 179 silme
  1. 172 179
      src/components/point/report/tabFunNumOverview.vue

+ 172 - 179
src/components/point/report/tabFunNumOverview.vue

@@ -1,87 +1,80 @@
 <template>
-    <div id="tabFunNumOverview">
-        <!-- 查询 新增 -->
-        <div class="query-area">
-            <el-input :placeholder="`请输入表号功能号`" v-model="tabFunNum" @keyup.enter.native="getOverViewList()" style="width:240px;">
-                <i slot="suffix" class="el-input__icon el-icon-search" @click="getOverViewList()"></i>
-            </el-input>
+  <div id="tabFunNumOverview">
+    <!-- 查询 新增 -->
+    <div class="query-area">
+      <el-input :placeholder="`请输入表号功能号`" v-model="tabFunNum" @keyup.enter.native="getOverViewList()" style="width:240px;">
+        <i slot="suffix" class="el-input__icon el-icon-search" @click="getOverViewList()"></i>
+      </el-input>
 
-            <el-button type="primary" size="mini" @click="handleDrawer({},3)" style="float: right;">新增自定义</el-button>
-        </div>
-        <!-- 数据表格 -->
-        <div class="table-area">
-            <el-table :data="tableData" style="width: 100%" height="calc(100% - 40px)" v-loading="loading" :header-cell-style="headerStyle">
-                <el-table-column prop='MeterFunc' label='表号-功能号' show-overflow-tooltip min-width="100">
-                    <template slot-scope="scope">
-                        <el-tooltip v-if="scope.row.DataQuality!=0" content="已断数,请检查" placement="bottom" effect="light">
-                            <i  class="el-icon-warning-outline" style="float:left;margin: 0 5px;color: red;"></i>
-                        </el-tooltip>
-                        <span>{{ scope.row.MeterFunc }}</span>
-                    </template>
-                    
-                </el-table-column>
-                <el-table-column prop='Data.Data' label='对应值(单位)' show-overflow-tooltip min-width="90">
-                    <template slot-scope="scope">
-                        <span>{{ scope.row.Data.Data }}</span>
-                        <i @click="handleDrawer(scope.row, 0)" class="el-icon-s-data"></i>
-                    </template>
-                </el-table-column>
-                <el-table-column prop='Data.Time' label='获取时间' show-overflow-tooltip min-width="130">
-                    <template slot-scope="scope">
-                        <span>{{ scope.row.Data.Time }}</span>
-                        <i class="el-icon-refresh" @click="refreshThisRow(scope.row)"></i>
-                    </template>
-                </el-table-column>
-                <el-table-column prop='RelatedPoint' label='涉及子系统点位(数据来源)' show-overflow-tooltip min-width="150">
-                    <template slot-scope="scope">
-                        <span>{{ scope.row.RelatedPoint }}</span>
-                        <i @click="handleDrawer(scope.row, 1)" class="el-icon-coin"></i>
-                    </template>
-                </el-table-column>
-                <el-table-column prop='RelatedInstance' label='涉及的对象实例(应用到)' show-overflow-tooltip min-width="150">
-                    <template slot-scope="scope">
-                        <span>{{ scope.row.RelatedInstance }}</span>
-                        <i @click="handleDrawer(scope.row, 2)" class="el-icon-coin"></i>
-                    </template>
-                </el-table-column>
-            </el-table>
-            <!-- 分页 -->
-            <el-pagination
-                @size-change="handleSizeChange"
-                @current-change="handleCurrentChange"
-                :current-page="currentPage"
-                :page-sizes="pageSizes"
-                :page-size="pageSize"
-                layout="total, sizes, prev, pager, next, jumper"
-                :total="allTableData.length" style="float:right;margin-right: 15px;">
-            </el-pagination>
-        </div>
-        <!-- 对话框和抽屉统一放在drawers中 -->
-        <!-- 对话框 -->
-        <el-dialog :title="'< ' + drawers[0].objId + ' > 的历史数据'" :visible.sync="drawers[0].drawer">
-            <historyChart :tabFunNum='drawers[0].objId'></historyChart>
-        </el-dialog>
-        <!-- 抽屉 -->
-        <el-drawer :title="'< ' + drawers[1].objId + ' > 的子系统点位'" :visible.sync="drawers[1].drawer" :direction="drawers[1].direction" size="50%">
-            <dataSource :tabFunNum='drawers[1].objId'></dataSource>
-        </el-drawer>
-        <el-drawer :title="'< ' + drawers[2].objId + ' > 的对象实例'" :visible.sync="drawers[2].drawer" :direction="drawers[2].direction" size="50%">
-            <objectInstance :tabFunNum='drawers[2].objId' :reValue='drawers[2].value'></objectInstance>
-        </el-drawer>
-        <el-dialog title="新增表号功能号" :visible.sync="drawers[3].drawer">
-            <addTabFunNum @closeDrawer="closeDrawer()"></addTabFunNum>
-        </el-dialog>
-        
-        <!-- <el-drawer title="新增表号功能号" :visible.sync="drawers[3].drawer" :direction="drawers[3].direction" size="50%">
+      <el-button type="primary" size="mini" @click="handleDrawer({},3)" style="float: right;">新增自定义</el-button>
+    </div>
+    <!-- 数据表格 -->
+    <div class="table-area">
+      <el-table :data="tableData" style="width: 100%" height="calc(100% - 40px)" v-loading="loading" :header-cell-style="headerStyle">
+        <el-table-column prop='' label='' show-overflow-tooltip width="30">
+          <template slot-scope="scope">
+            <el-tooltip v-if="scope.row.DataQuality!=0" content="已断数,请检查" placement="bottom" effect="light">
+              <i class="el-icon-warning-outline" style="float:left;margin: 0 5px;color: red;"></i>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+        <el-table-column prop='MeterFunc' label='表号-功能号' show-overflow-tooltip min-width="100"></el-table-column>
+        <el-table-column prop='Data.Data' label='对应值(单位)' show-overflow-tooltip min-width="90">
+          <template slot-scope="scope">
+            <span>{{ scope.row.Data.Data }}</span>
+            <i @click="handleDrawer(scope.row, 0)" class="el-icon-s-data"></i>
+          </template>
+        </el-table-column>
+        <el-table-column prop='Data.Time' label='获取时间' show-overflow-tooltip min-width="130">
+          <template slot-scope="scope">
+            <span>{{ scope.row.Data.Time }}</span>
+            <i class="el-icon-refresh" @click="refreshThisRow(scope.row)"></i>
+          </template>
+        </el-table-column>
+        <el-table-column prop='RelatedPoint' label='涉及子系统点位(数据来源)' show-overflow-tooltip min-width="150">
+          <template slot-scope="scope">
+            <span>{{ scope.row.RelatedPoint }}</span>
+            <i @click="handleDrawer(scope.row, 1)" class="el-icon-coin"></i>
+          </template>
+        </el-table-column>
+        <el-table-column prop='RelatedInstance' label='涉及的对象实例(应用到)' show-overflow-tooltip min-width="150">
+          <template slot-scope="scope">
+            <span>{{ scope.row.RelatedInstance }}</span>
+            <i @click="handleDrawer(scope.row, 2)" class="el-icon-coin"></i>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 分页 -->
+      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizes"
+        :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="allTableData.length" style="float:right;margin-right: 15px;">
+      </el-pagination>
+    </div>
+    <!-- 对话框和抽屉统一放在drawers中 -->
+    <!-- 对话框 -->
+    <el-dialog :title="'< ' + drawers[0].objId + ' > 的历史数据'" :visible.sync="drawers[0].drawer">
+      <historyChart :tabFunNum='drawers[0].objId'></historyChart>
+    </el-dialog>
+    <!-- 抽屉 -->
+    <el-drawer :title="'< ' + drawers[1].objId + ' > 的子系统点位'" :visible.sync="drawers[1].drawer" :direction="drawers[1].direction" size="50%">
+      <dataSource :tabFunNum='drawers[1].objId'></dataSource>
+    </el-drawer>
+    <el-drawer :title="'< ' + drawers[2].objId + ' > 的对象实例'" :visible.sync="drawers[2].drawer" :direction="drawers[2].direction" size="50%">
+      <objectInstance :tabFunNum='drawers[2].objId' :reValue='drawers[2].value'></objectInstance>
+    </el-drawer>
+    <el-dialog title="新增表号功能号" :visible.sync="drawers[3].drawer">
+      <addTabFunNum @closeDrawer="closeDrawer()"></addTabFunNum>
+    </el-dialog>
+
+    <!-- <el-drawer title="新增表号功能号" :visible.sync="drawers[3].drawer" :direction="drawers[3].direction" size="50%">
             <addTabFunNum @closeDrawer="closeDrawer()"></addTabFunNum>
         </el-drawer> -->
-    </div>
+  </div>
 </template>
 
 <script>
 import { mapGetters, mapActions } from 'vuex'
 import {
-    getTabFunNumOverview
+  getTabFunNumOverview
 } from '@/api/point/request'
 
 import historyChart from './historyChart'
@@ -90,123 +83,123 @@ import objectInstance from './objectInstance'
 import addTabFunNum from './addTabFunNum'
 
 export default {
-    data() {
-        return {
-            //表格头样式
-            headerStyle: {
-                backgroundColor: '#e1e4e5',
-                color: '#2b2b2b',
-                lineHeight: '30px'
-            },
-            allTableData: [],//所有表格数据
-            pageSizes:[10,20,50,100],
-            pageSize:10,
-            currentPage:1,
-            loading: false,//加载
-            tabFunNum: null,//表号功能号
-            //抽屉
-            drawers: [
-                {drawer: false, direction: 'rtl', objId:''},
-                {drawer: false, direction: 'rtl', objId:''},
-                {drawer: false, direction: 'rtl', objId:'',value: ''},
-                {drawer: false, direction: 'rtl', objId:''}
-            ]
-            
-        }
+  data() {
+    return {
+      //表格头样式
+      headerStyle: {
+        backgroundColor: '#e1e4e5',
+        color: '#2b2b2b',
+        lineHeight: '30px'
+      },
+      allTableData: [],//所有表格数据
+      pageSizes: [10, 20, 50, 100],
+      pageSize: 10,
+      currentPage: 1,
+      loading: false,//加载
+      tabFunNum: null,//表号功能号
+      //抽屉
+      drawers: [
+        { drawer: false, direction: 'rtl', objId: '' },
+        { drawer: false, direction: 'rtl', objId: '' },
+        { drawer: false, direction: 'rtl', objId: '', value: '' },
+        { drawer: false, direction: 'rtl', objId: '' }
+      ]
+
+    }
+  },
+  methods: {
+    //抽屉处理
+    handleDrawer(row, index) {
+      if (index != 3)
+        this.drawers[index].objId = row.MeterFunc;
+      if (index == 2)
+        this.drawers[index].value = row.Data.Data;
+      this.drawers[index].drawer = true;
     },
-    methods:{
-        //抽屉处理
-        handleDrawer(row, index){
-            if(index != 3)
-                this.drawers[index].objId = row.MeterFunc;
-            if(index == 2)
-                this.drawers[index].value = row.Data.Data;
-            this.drawers[index].drawer = true;
-        },
-        //获取统计数据
-        getOverViewList(){
-            this.loading = true;
-            getTabFunNumOverview({MeterFunc:this.tabFunNum}, res => {
-                if(res.Result && res.Result == "success"){
-                    this.allTableData = res.Content;
-                    this.loading = false;
-                }
-            });        
-        },
-        //刷新当前行数据
-        refreshThisRow(row){
-            let index = this.tableData.indexOf(row);
-            let pa = {
-                MeterFunc: row.MeterFunc
-            }
-            getTabFunNumOverview(pa, res => {
-                //this.tableData[index] = [];
-                this.tableData[index].Data.Data = res.Content[0].Data.Data;
-                this.tableData[index].Data.Time = res.Content[0].Data.Time;
-                this.tableData[index].DataQuality = res.Content[0].DataQuality;
-                this.tableData[index].RelatedInstance = res.Content[0].RelatedInstance;
-                this.tableData[index].RelatedPoint = res.Content[0].RelatedPoint;
-            });
-        },
-        //分页更换size
-        handleSizeChange(val){
-            this.pageSize = val;
-        },
-        //分页更换页
-        handleCurrentChange(val){
-            this.currentPage = val;
-        },
-        //子组件关闭抽屉
-        closeDrawer(){
-            this.drawers[3].drawer = false;
-        },
-        init() {
-            this.getOverViewList();
+    //获取统计数据
+    getOverViewList() {
+      this.loading = true;
+      getTabFunNumOverview({ MeterFunc: this.tabFunNum }, res => {
+        if (res.Result && res.Result == "success") {
+          this.allTableData = res.Content;
+          this.loading = false;
         }
+      });
     },
-    mounted() {
-        this.init();
+    //刷新当前行数据
+    refreshThisRow(row) {
+      let index = this.tableData.indexOf(row);
+      let pa = {
+        MeterFunc: row.MeterFunc
+      }
+      getTabFunNumOverview(pa, res => {
+        //this.tableData[index] = [];
+        this.tableData[index].Data.Data = res.Content[0].Data.Data;
+        this.tableData[index].Data.Time = res.Content[0].Data.Time;
+        this.tableData[index].DataQuality = res.Content[0].DataQuality;
+        this.tableData[index].RelatedInstance = res.Content[0].RelatedInstance;
+        this.tableData[index].RelatedPoint = res.Content[0].RelatedPoint;
+      });
     },
-    computed: {
-        ...mapGetters('layout', ['projectId', 'userId']),
-        //根绝分页,获取要展示的tableData
-        tableData: function() {
-            return this.allTableData.slice(
-            (this.currentPage - 1) * this.pageSize,
-            (this.currentPage * this.pageSize < this.allTableData.length)? this.currentPage * this.pageSize : this.allTableData.length );
-        
-        }
+    //分页更换size
+    handleSizeChange(val) {
+      this.pageSize = val;
+    },
+    //分页更换页
+    handleCurrentChange(val) {
+      this.currentPage = val;
     },
-    components: {
-        historyChart,
-        dataSource,
-        objectInstance,
-        addTabFunNum
+    //子组件关闭抽屉
+    closeDrawer() {
+      this.drawers[3].drawer = false;
+    },
+    init() {
+      this.getOverViewList();
+    }
+  },
+  mounted() {
+    this.init();
+  },
+  computed: {
+    ...mapGetters('layout', ['projectId', 'userId']),
+    //根绝分页,获取要展示的tableData
+    tableData: function () {
+      return this.allTableData.slice(
+        (this.currentPage - 1) * this.pageSize,
+        (this.currentPage * this.pageSize < this.allTableData.length) ? this.currentPage * this.pageSize : this.allTableData.length);
+
     }
+  },
+  components: {
+    historyChart,
+    dataSource,
+    objectInstance,
+    addTabFunNum
+  }
 }
 </script>
 
 <style lang="less" scoped>
-#tabFunNumOverview{
-    border-top:5px solid #eee;
-    height:calc(100% - 5px);
-    width:100%;
-    overflow:hidden;
+#tabFunNumOverview {
+  border-top: 5px solid #eee;
+  height: calc(100% - 5px);
+  width: 100%;
+  overflow: hidden;
 }
-.query-area{
-    margin:4px 8px;
+.query-area {
+  margin: 4px 8px;
 }
-.table-area{
-    height:calc(100% - 40px);
+.table-area {
+  height: calc(100% - 40px);
 }
-.table-area i{
-    text-align:right;
-    font-size:16px;
-    cursor: pointer;
-    float:right;
-    line-height:22.4px;
+.table-area i {
+  text-align: right;
+  font-size: 16px;
+  cursor: pointer;
+  float: right;
+  line-height: 22.4px;
 }
-/deep/ .el-drawer__body{
-    height:90%;
+/deep/ .el-drawer__body {
+  height: 90%;
 }
 </style>