adm-front/src/components/point/report/tabControlTest.vue

<template>
  <div id="controlTest">
    <div class="query-area" style="padding:10px;" v-if="isShowSelect">
      <el-select v-model="originName" placeholder="请选择数据源" clearable @change="changeHandleSelect">
        <el-option
          v-for="(item,index) in selectAggregate.originList"
          :key="index"
          :label="item"
          :value="item">
        </el-option>
      </el-select>
      <el-select v-model="statusName" placeholder="请选择读写" clearable @change="changeHandleSelect">
        <el-option
          v-for="(item,index) in statusList"
          :key="index"
          :label="item"
          :value="index">
        </el-option>
      </el-select>
      <el-input
        placeholder="输入整合ID或点位描述"
        style="width: 220px"
        v-model.trim="describe"
        clearable
        @change="handleDescribe"
      >
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
      <span style="float: right">
    <el-popover
      placement="bottom"
      style="padding: 0 20px 10px 20px;right: 10px"
      width="200"
      v-model="visible">
      <div>输入控制指令</div>
  <el-input type="textarea" :rows="2" v-model="instructions"/>
  <div style="text-align: right; margin-top: 10px">
    <el-button size="mini" type="text" @click="visible = false">取消</el-button>
    <el-button type="primary" size="mini" @click="implement">确定</el-button>
  </div>
  <el-button slot="reference">执行</el-button>
    </el-popover>
        <i class="el-icon-download" style="cursor: pointer" @click="downloads" title="下载"/>
      </span>
    </div>
    <div v-else class="query-area">
      <el-button style="margin: 10px" @click="back">返回</el-button>
    </div>
    <!-- 数据表格 -->
    <div class="table-area">
      <el-table
        :data="tableDate"
        style="width: 100%"
        height="calc(100% - 32px)"
        v-loading="loading"
        :header-cell-style="headerStyle"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" v-if="isShowSelect"/>
        <el-table-column label="序号" type="index" align='center' width="55">
          <template slot-scope="scope">
            {{ scope.$index + (currentPage - 1) * pageSize + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop='DatasourceName' label='数据源名称' show-overflow-tooltip align='center'/>
        <el-table-column prop='ReadWrite' label='读写' show-overflow-tooltip align='center'/>
        <el-table-column prop='Meterfunc' label='整合ID' show-overflow-tooltip align='center'/>
        <el-table-column prop='Description' label='点位描述' show-overflow-tooltip align='center'/>
        <el-table-column prop='Status' label='状态' show-overflow-tooltip align='center'>
          <template slot-scope="scope">
            <span v-if="scope.row.Status== 0">进行中</span>
            <span v-if="scope.row.Status== 1">成功</span>
            <span v-if="scope.row.Status== 2">失败</span>
          </template>
        </el-table-column>
        <el-table-column prop='Data' label='反馈值' show-overflow-tooltip align='center'/>
      </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="total"
        style="float:right;margin-top:10px;padding:2px 5px;">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {pointTest, settingValue} from '@/api/scan/request'
import axios from "axios";
import {mapGetters} from 'vuex'

export default {
  name: "tabControlTest",
  props: ['selectAggregate'],
  data() {
    return {
      isShowSelect: true,
      describe: '',
      pageSizes: [10, 20, 50, 100],
      pageSize: 50,
      currentPage: 1,
      total: 0,
      tableDate: [],
      visible: false,
      //表格头样式
      headerStyle: {
        backgroundColor: '#e1e4e5',
        color: '#2b2b2b',
        lineHeight: '30px'
      },
      instructions: '',
      originName: "",
      statusName: '',//读写
      statusList: ['读', '写', '读写'],  // 0：读 1：写 2：读写
      loading: false,//加载
    }
  },
  created() {
    this.getSettingValue()
  },
  computed: {
    ...mapGetters('layout', ['projectId'])
  },
  methods: {
    //返回
    back() {
      this.isShowSelect = true
      this.getSettingValue()
    },
    //搜索
    handleDescribe() {
      if (this.describe) {
        let Filters = `Description='${this.describe}' or Meterfunc='${this.describe}';`
        this.getSettingValue(Filters)
      } else {
        this.getSettingValue()
      }

    },
    //执行
    implement() {
      this.visible = false
      if (this.multipleSelection) {
        let list = this.multipleSelection
        list.forEach(i => i.Data = this.instructions)
        this.getPointTest(list)
      } else {
        return false
      }
      this.instructions = ''
    },
    //当前设定值
    getSettingValue(val) {
      let _this = this
      _this.loading = true;
      let param = {
        PageNumber: this.currentPage,
        PageSize: this.pageSize
      }, Filters = ''
      if (_this.originName) {
        Filters += `DatasourceName='${_this.originName}';`
      }
      if (_this.statusName) {
        Filters += `ReadWrite='${_this.statusName}';`
      }
      if (val) {
        Filters += val
      }
      let index = Filters.lastIndexOf(';')
      Filters = Filters.substring(0, index)
      param.Filters = Filters !== '' ? Filters : undefined
      settingValue(param, res => {
        this.tableDate = res.Content
        _this.total = res.Total
        _this.loading = false;
      })
    },

    //点位测试
    getPointTest(list) {
      // pointTest(list, res => {
      //   this.tableDate = res.Content
      //
      // })
      pointTest(list).then(res => {
        if (res.data.Result === "failure") {
          this.$message.error('执行失败')
          this.getSettingValue()
        } else {
          this.isShowSelect = false
          this.tableDate = res.data.Content
        }
      });
    },
    changeHandleSelect() {
      this.currentPage = 1
      this.getSettingValue()
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //分页更换size
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.getSettingValue()
    },
    //分页更换页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getSettingValue()
    },
    //点击下载
    downloads() {
      let param = {
        method: 'post',
        url: `/pointconfig/datasource/pointset-present-download`,
        responseType: 'blob',
        headers: {
          //头信息中的 ProjectId 改为 projectId    nh-2021.11.25
          projectId: this.projectId
        },
        data: {},
      }

      axios(param).then(function (res) {
        var blob = new Blob([res.data], {
          type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
        });
        var fileName = res.headers['content-disposition'];
        if (fileName)
          fileName = fileName.substring(fileName.indexOf('=') + 1);
        if ('download' in document.createElement('a')) { // 非IE下载
          const elink = document.createElement('a')
          elink.download = fileName
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob)
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href) // 释放URL 对象
          document.body.removeChild(elink)
        } else { // IE10+下载
          navigator.msSaveBlob(blob, fileName)
        }
      }).catch(function (err) {
      })
    },
  }
}
</script>

<style lang="less" scoped>
#controlTest {
  border-top: 5px solid #eee;
  height: calc(100% - 5px);
  width: 100%;
  overflow: hidden;
}

.table-area {
  height: calc(100% - 72px);
  padding: 0px 10px 10px 10px;
}

.table-area i {
  text-align: right;
  font-size: 12px;
  cursor: pointer;
  float: right;
}

.dialog-btn {
  display: none;
  height: 29px;
}

/deep/ .el-drawer__body {
  height: 90%;
  overflow-y: auto;
}

/deep/ .el-table__body-wrapper tr:hover {
  .dialog-btn {
    display: inline;
  }
}

/deep/ .el-dialog__body {
  padding-bottom: 20px;
}

/deep/ .el-drawer__header > :first-child:focus {
  outline: none;
}
</style>