large_screen/src/common/dataDetail/dataDetail_chart.vue

<template>
  <div>
    <div style="margin-top:8px">
      <span style="font-size: 10px;">搜索：</span>
    <el-select style="width: 200px" v-model="currentSubEquipnameId" placeholder="请选择" v-loading="optionLoading"
               @change="selectCurrentpoint()">
      <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
      </el-option>
    </el-select>
    </div>
      <template>

        <el-table :data="tableData" style="width: 100%" @header-click="mpQuality"  v-loading="dataListLoading" >
          <el-table-column prop="rowKey" label="日期" width="200">
            <template slot-scope="scope">
              {{tableData[scope.$index].rowKey}}
            </template>
          </el-table-column>
          <el-table-column prop="properties" :label="item.name" align="center"
                           v-for="(item, index) in tableHeader" :key="item.mpId">

            <el-table-column label="是否存在问题" width="80">
              <template slot-scope="scope">
                <div :style="tableData[scope.$index].Isproblem[index]=='是'?'color:#FF0000;':'color:#000000;'">
                  {{tableData[scope.$index].Isproblem[index]}}

                </div>

                <!-- {{tableData[scope.$index].properties[index].isProblem}} -->
              </template>
            </el-table-column>
            <el-table-column label="治理前" width="80">
              <template slot-scope="scope">
                {{tableData[scope.$index].before[index]}}
                <!-- {{tableData[scope.$index].properties[index].before}} -->
              </template>
            </el-table-column>
            <el-table-column label="治理后" width="80">
              <template slot-scope="scope">
                {{tableData[scope.$index].after[index]}}
                <!-- {{tableData[scope.$index].properties[index].after}} -->
              </template>
            </el-table-column>

          </el-table-column>




          <!-- <el-table-column prop="classify" label="所属分类" header-align="center" align="center" width="120">
                      </el-table-column> -->
          <!-- <el-table-column label="测点值" header-align="center" align="center" width="120">
                          <template slot-scope="scope">
                              <el-button type="text" size="small" @click="pointnum(scope.row)">...</el-button>
                          </template>
                      </el-table-column> -->
          <el-table-column label="更多" header-align="center" align="center" width="120">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="more(scope.row)">...</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>

      <!-- 分页区域 -->
      <el-pagination background @current-change="currentChange" @size-change="sizeChange" :current-page="page"
                     :page-size="size" layout="sizes, prev, pager, next, jumper, ->, total, slot" :total="total">
      </el-pagination>
    <detailDia v-if="detailVisible" ref="detailDialog"></detailDia>
  </div>

</template>


<script>
import { pinyin } from 'pinyin-pro';
//   import {
//         getFullChars
//     } from '@/utils/convertToPinyin'
import detailDia from "./detailDia";
export default {

  name:"dataDetail_chart",
  data() {
    return {
      page:1,  //当前第几页
      size:10, //当前每页页数
      total:50, //全部数据量
      visible: false,
      // 当前下拉选框对应的hbase表名
      hbasetablename:'',
      // pointnumVisible:false,
      value: '',
      currentEquipId:0,
      options: [{
        id: 1,
        name: '皮带张力'
      }, {
        id: 2,
        name: '1#滚筒'
      }, {
        id: 3,
        name: '2#滚筒'
      }],

      tableData:[

      ],

      tableHeader: [],

      databaseType: '',
      database: [{
        value: '选项1',
        label: 'hbase'
      }, {
        value: '选项2',
        label: 'influxdb'
      }, {
        value: '选项3',
        label: 'mysql'
      }],

      currentPage1: 1,
      currentPage2: 2,
      currentPage3: 3,
      currentPage4: 4,
      detailVisible: false,
      moreVisible: false,
      currentSubEquipnameId:'',
      subEuipname:'',
      currentEquipname:'',

      dataListLoading: true,
      optionLoading: true,

      timer: null
    }
  },
  components:{
    detailDia
  },

  methods: {
    // 点击表头查看测点信息
    mpQuality(column,event){
      if(column.level == 1 && column.property == "properties"){
        var columnData = this.tableHeader.filter(item=>{
          return item.name == column.label;
        })

      }
      // console.log(columnData);
      this.detailVisible = true;
      this.$nextTick(() => {
        this.$refs.detailDialog.init(columnData);
      });

    },

    confirmEnding(str, target) {
      var start = str.length-target.length;
      var arr = str.substr(start,target.length);
      if(arr == target){
        return true;
      }
      return false;
    },
    getMore(row){
      // console.log(row);

    },
    // 改变当前子设备选项
    selectCurrentpoint(){
      if (this.timer !== null) {
        clearInterval(this.timer)
        this.timer = null
      }
      this.tableData = []
      this.tableHeader = []
      for (let i in this.options) {
        if (this.options[i].id == this.currentSubEquipnameId){
          this.subEuipname = this.options[i].name;
          this.hbasetablename = this.options[i].hbasetablename;
          //              console.log('this.hbasetablename');
          // console.log(this.options[0]);
          break;
        }
      }
      this.initData();
    },
    currentChange(currentPage){
      this.page=currentPage;
      this.initData();
    },
    sizeChange(currentSize) {
      this.size = currentSize;
      this.initData();
    },
    watch(id) {
      this.detailVisible = true;
      this.$nextTick(() => {
        this.$refs.detailDialog.init(id);
      });
    },
    more(id) {
      this.moreVisible = true;
      this.$nextTick(() => {
        this.$refs.moreDialog.init(id);
      });
    },
    // pointnum(row) {
    //     this.pointnumVisible = true;
    //     this.$nextTick(() => {
    //         this.$refs.pointnumDialog.init(row);
    //     });
    // },

    // 根据传来的设备currentEquipId找到对应的子设备选项
    getSubEquipOption(){
      this.getRequest('/subEquipmentManage/getSubEquipmentInfoByEquipmentId/?equipmentId=' + this.currentEquipId).then(resp=>{
        if (resp.data){
          this.options = resp.data.data;
          this.currentSubEquipname = this.options[0].name; //将当前子系统与id设置为下拉框第一个
          this.currentSubEquipnameId = this.options[0].id;
          this.subEuipname = this.options[0].name;
          this.hbasetablename = this.options[0].hbasetablename;
          this.optionLoading = false;
          // console.log(this.hbasetablename);
          this.initData()
        }
      });
    },
    // 根据子设备id拿到对应的测点，并展示在table中
    initData() {
      // this.dataListLoading = true

      // this.currentSubEquipnameId = parseInt(this.currentSubEquipnameId);
      this.getRequest('/dataQualityMeasurePoint/getMeasurePointBySubEquipmentId/?subEquipmentId=' + this.currentSubEquipnameId + '&page=' + this.page + '&size=' + this.size).then(resp => {
        // this.getRequest('/dataList/getMeasurepointInfoBySubEuipId/?SubEuipId=' + this.currentSubEquipnameId + '&page=' + this.page + '&size=' + this.size).then(resp=>{
        if (resp) {

          this.tableHeader = resp.data.data;
          this.dataListLoading = false;
          // console.log('this.tableHeader');
          // console.log(this.tableHeader);
          this.total = resp.data.total;
        }
      });
      
      this.startGetData()
    },
    getHbaseData() {
      this.getRequest('/hbase/getMpInfoByHbaseTablename/?hbasetablename='+ this.hbasetablename).then(resp=>{
        //    console.log("----------");
        //    console.log(this.hbasetablename);
        // this.getRequest('/dataList/getMeasurepointInfoBySubEuipId/?SubEuipId=' + this.currentSubEquipnameId + '&page=' + this.page + '&size=' + this.size).then(resp.data=>{
        if (resp.data){
         
          var arr = [];
          for(let i in resp.data){
            var o = {
              before: new Array(this.tableHeader.length).fill(""),
              after: new Array(this.tableHeader.length).fill(""),
              Isproblem:new Array(this.tableHeader.length).fill(""),
            };

            o["rowKey"] = resp.data[i].date;


            var pronumn = Object.keys(resp.data[0]).length;
            // for(var j = 0;j<pronumn/2;j++){
            for(var j = 0;j<this.tableHeader.length;j++){
              for (var key in resp.data[i]){

                if(this.confirmEnding(key,"before") && (key.indexOf(pinyin(this.tableHeader[j].name, { toneType: 'none' }).replace(/\s*/g, '')) == 0) ){

                  // o.before.push(resp.data[i].properties[key]);
                  // j是索引，1是个数
                  o.before.splice(j,1,eval("resp.data[i]."+key));

                }
                if(this.confirmEnding(key,"after") &&  (key.indexOf(pinyin(this.tableHeader[j].name, { toneType: 'none' }).replace(/\s*/g, '')) == 0) ){
                  o.after.splice(j,1,eval("resp.data[i]."+key));
                  // o.after.push(resp.data[i].properties[key]);
                }
              }
            }
             for (var k = 0; k < this.tableHeader.length; k++) {
              if(o.before[k] !== "" ){
                o.Isproblem.splice(k,1,o.before[k] == o.after[k] ? "否" : "是")
              }
            }
            arr.push(o);

          }
          // console.log(arr);
          this.tableData=arr;
        }
        // console.log('this.tableData');
        // console.log(this.tableData);
      });
    },
    startGetData() {
      this.timer =  setInterval(()=> {

        this.getHbaseData()

      }, 2000)
    },

  },
  mounted(){
    this.currentEquipId = this.$route.query.equipmentId
    // this.currentEquipId = window.sessionStorage.getItem("dataList_currentEquipId");
    // 获取子设备选项
    this.getSubEquipOption();
    // this.currentSubEquipname = this.options[0].name; //将当前子系统与id设置为下拉框第一个
    // this.currentSubEquipnameId = this.options[0].id;



    // this.initData()
  },

  beforeDestroy() {
    clearInterval(this.timer)
    this.timer = null
    console.log("chart kill")
  },



}
</script>

<style scoped>

</style>>