scdky_bianyuanjiance2.0_ui/src/views/device/tables/Sample_master104.vue

<!-- 采样表格
返回数据示例
{
  "id": "24577",
  "name": "A相电压",
  "offset": 0,
  "value": null,
  "occur": null,
  "iec104": 24577,
  "modbus": 40001,
  "range": "HOLDING_REGISTER"
},
无法分页 采样表格无法分页，数据在内存中
微信聊天记录 边缘代理2开发沟通 - 2023-06-27 采样表格无法分页，数据在内存中
-->
<template>
  <div class="table-container" style="padding-top:20px;float: left;width: 100%;">
    <!-- 采样模块 -->
    <div class="device-values">
      <!-- 采样 -->
      <div class="title-container">
        <div class="title-main">采样值</div>
        <div class="title-right">
          <div class="check-resaults">
            <el-button
              icon="el-icon-refresh-left"
              class="light-button"
              size="mini"
              @click="refreshManual(true)"
            >刷新</el-button>
          </div>
          <div class="check-resaults">
            <!-- 导入即是上传文件 -->
            <el-upload
              ref="upload"
              :action="importCsvActionStr"
              :show-file-list="false"
              :auto-upload="false"
              accept=".csv"
              :on-change="submitUpload"
            >
              <el-button
                class="light-button"
                icon="el-icon-upload2"
                size="mini"
              >导入</el-button>
            </el-upload>
          </div>
          <div class="check-resaults">
            <el-button
              class="light-button"
              icon="el-icon-download"
              size="mini"
              @click="getPlanExport"
            >导出</el-button>
          </div>
          <div class="check-resaults">
            <el-button
              icon="el-icon-plus"
              type="primary"
              size="mini"
              :disabled="componentParames.isDisable"
              @click="editRow()"
            >添加</el-button>
          </div>
          <div class="check-resaults" style="margin-left: 20px;">
            <el-button
              icon="el-icon-postcard"
              :type="cardModelTag"
              size="mini"
              @click="swicthCardModel(true)"
            >卡片</el-button>
          </div>
          <div class="check-resaults">
            <el-button
              icon="el-icon-s-grid"
              size="mini"
              :type="tableModelTag"
              @click="swicthCardModel(false)"
            >列表</el-button>
          </div>
        </div>
      </div>
      <!-- 查询栏 -->
      <div class="table-container" height="auto" style="float: left;width: 100%;margin-bottom: 1rem;">
        <span class="title">测点类型：</span>
        <el-select v-model="querydata.pointtype" multiple size="mini" clearable placeholder="请选择">
          <el-option
            v-for="item in pointTypeList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <span class="title" style="margin-left: 2rem;">测点：</span>
        <el-input
          v-model="querydata.point"
          class=""
          clearable
          placeholder="请输入测点号或名称"
          type="text"
          style="width:180px;margin-right: 2rem;"
        />
        <el-button
          icon="el-icon-s-grid"
          size="mini"
          type="primary"
          @click="query(false)"
        >查询</el-button>
      </div>
      <!-- 采样卡片 -->
      <div v-if="showCard == true" class="table-container" height="auto" style="float: left;width: 100%;">
        <div v-for="(item, index) in carddata" :key="index">
          <div style="float: left;width: 100%;font-weight: bold;">{{ index }}</div>
          <div style="float: left;width: 100%;">
            <div v-for="(c, index2) in item" v-show="c.isshow" :key="index2" :class="c.range=='COIL_STATUS' || c.range=='HOLDING_REGISTER' ? 'card card_opt':'card'">
              <div class="card-title">{{ c.occur || '-' }}<span v-if="c.range=='COIL_STATUS' || c.range=='HOLDING_REGISTER'" class="card_opt_btn" @click="commandOpt(c)">操作</span></div>
              <div style="position: relative;">
                <template v-if="c.range=='COIL_STATUS' || c.range=='HOLDING_REGISTER'">
                  <span class="card-label" style="margin-top: 5%;" :title="`类型：${c.rangeName} 点号：${c.offset}`"><li>{{ c.name }}</li></span>
                  <div class="card-label-linkline" />
                  <span v-if="c.relationTag == null" class="card-label" style="margin-top: 20%;color: #999;"><li>未关联点号</li></span>
                  <span v-else class="card-label" style="margin-top: 20%;" :title="`关联点号：${c.relationTag}`"><li>{{ c.relationTag }}</li></span>
                </template>
                <template v-else>
                  <span class="card-label" :title="`类型：${c.rangeName} 点号：${c.offset}`">{{ c.name }}</span>
                </template>
                <span v-if="c.range=='COIL_STATUS' || c.range=='INPUT_STATUS'" :class="`value_${c.value}`">{{ c.value }}</span>
                <span v-else class="value_nubmer">{{ c.value }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 采样表格 -->
      <div v-if="showCard == false" class="table-container" style="float: left;width: 100%;">
        <el-table :key="tableIsUpdate" v-loading="vLoading" :data="tableData.filter((r) => r.isshow)" stripe max-height="300">
          <el-table-column prop="iec104" label="104点号" width="100px" />
          <el-table-column prop="name" label="测点名称" />
          <el-table-column prop="groupingName" label="设备分组" />
          <el-table-column prop="rangeName" label="点号类型" width="175px">
            <template slot-scope="scope">
              <span class="range">{{ scope.row.rangeName }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="offset" label="点号" width="100px" />
          <el-table-column prop="value" label="值" width="100px" />
          <el-table-column prop="occur" label="时间" width="175px" />
          <el-table-column fixed="right" label="操作" width="250px">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.range=='COIL_STATUS'"
                class="table-act"
                type="text"
                icon="el-icon-setting"
                size="small"
                @click="commandOpt(scope.row)"
              >遥控操作</el-button>
              <el-button
                v-if="scope.row.range=='HOLDING_REGISTER'"
                class="table-act"
                type="text"
                icon="el-icon-setting"
                size="small"
                @click="commandOpt(scope.row)"
              >遥调操作</el-button>
              <el-button
                class="table-act"
                type="text"
                icon="el-icon-edit"
                size="small"
                @click="editRow(scope.$index)"
              >编辑</el-button>
              <el-button
                class="table-act"
                type="text"
                icon="el-icon-delete"
                size="small"
                @click="delRow(scope.$index)"
              >删除</el-button>
              <el-button
                class="table-act"
                type="text"
                icon="el-icon-data-line"
                size="small"
                @click="sampleEchart(scope.row)"
              >曲线</el-button>
            </template>
          </el-table-column>
          <!-- 隐藏 列 这里不用显示，但是在编辑的时候需要获取此数据 -->
          <el-table-column
            v-if="false"
            prop="deviceCheckId"
            label="序号"
          />
          <!-- 隐藏 列 -->
        </el-table>
      </div>
      <!-- 采样分页
      <div class="page-bar">
        <pagination
          background
          layout="pager"
          :limit="tablePrames.pageLimit"
          :total="tablePrames.paginationTotalElements"
          :current-page.sync="tablePrames.paginationNumber"
          @pagination="getTableData"
        />
      </div>
      -->
    </div>
    <!-- 添加/编辑 采样 model -->
    <ModelFormSample_master104
      v-if="showModelForm"
      :model-parames="{
        'curPlanId':componentParames.curPlanId,
        'productId':componentParames.productId,
        'deviceName':componentParames.deviceName,
        'curSuiteId':componentParames.curSuiteId,
        'modelFormData':modelFormData
      }"
      :sample-data="tableData"
      @toggleModel="closeModel"
    />
    <!-- 遥控遥调操作 model -->
    <ModelFormCommandOpt104
      v-if="showCommandOpt104ModelForm"
      :model-parames="{
        'curPlanId':componentParames.curPlanId,
        'productId':componentParames.productId,
        'deviceName':componentParames.deviceName,
        'curSuiteId':componentParames.curSuiteId,
        'modelFormData':commandOpt104FormData
      }"
      @toggleModel="closeModel"
    />
    <!-- #TODO: 以后做成公用 dialog ，不再使用 toggleModel 关闭 dialog -->
    <el-dialog
      :visible="showEchart"
      :before-close="closeSampleEchart"
      :title="curPointName"
    >
      <!-- 采样 曲线  model -->
      <ModelSampleEchart
        v-if="showEchart"
        :model-parames="{
          'curPlanId':componentParames.curPlanId,
          'curPointId':curPointId,
          'curPointName':curPointName
        }"
      />
    </el-dialog>
  </div>
</template>

<script>
import {
  httpGet,
  delRecord,
  download
} from '@/api/common-action'
import { dictOptions } from '@/api/dict'
// 显示采样曲线
import ModelSampleEchart from '../components/ModelSampleEchart'
// 添加/编辑 采样
import ModelFormSample_master104 from '../components/ModelFormSample_master104'
import ModelFormCommandOpt104 from '../components/ModelFormCommandOpt104'
// 导入总线
import { EventBus } from '@/main.js'
export default {
  name: 'Sample',
  components: {
    // Pagination,
    ModelSampleEchart,
    ModelFormSample_master104,
    ModelFormCommandOpt104
  },
  props: {
    componentParames: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      vLoading: true,
      showCard: true, // 卡片显示模式。false时为表格显示模式
      cardModelTag: 'primary',
      tableModelTag: 'default',
      carddata: [],
      tableData: [],
      pointTypeList: [], // 测点类型列表
      querydata: {
        pointtype: [],
        point: ''
      },
      commandOpt104FormData: {},
      // 采样
      tablePrames: {
        pageLimit: 5,
        paginationNumber: 1,
        paginationTotalElements: 1
      },
      showCommandOpt104ModelForm: false,
      // 是否显示 添加/编辑 采样
      showModelForm: false,
      // 是否显示曲线
      showEchart: false,
      // 当前采样id
      curPointId: '0',
      // 当前采样名称
      curPointName: '0',
      // 导入csv 请求参数
      importCsvActionStr: '#',
      // 表格是否更新标示,用于解决表格内数据变化了不会刷新的问题
      tableIsUpdate: '0'
    }
  },
  // watch: {
  //   componentParames: {
  //     handler() {
  //       // 监听传入的值 是否有变化 ，如有 刷新表格数据
  //       // console.log('刷新表格数据 componentParames')
  //       // this.refreshTableData()
  //     }
  //   }
  // },
  created() {
    // const envUrl = process.env.VUE_APP_BASE_API
    // 网页加载完成后执行
    // 接口 导入测点 /test/plan/:plan/points.csv
    this.importCsvActionStr = `/test/plan/${this.componentParames.curPlanId}/points.csv`
    // console.log('this.importCsvActionStr=', this.importCsvActionStr)
  },
  mounted() {
    EventBus.$off('refreshManualSample')
    // 在bus上挂载刷新事件
    EventBus.$on('refreshManualSample', this.refreshManual)
    this.$nextTick(() => {
      // 网页加载完成后执行
      this.initFunctions()
    })
  },
  methods: {
    swicthCardModel(flag) {
      this.showCard = flag
      if (flag) {
        this.cardModelTag = 'primary'
        this.tableModelTag = 'default'
      } else {
        this.cardModelTag = 'default'
        this.tableModelTag = 'primary'
      }
    },
    //
    async initFunctions() {
      const res = await dictOptions('131')
      this.pointTypeList = res
      // 所有需要加载时初始化的函数都放这里
      // 获取用例列表数据 ，不传分页信息，即采集默认分页获取第一页数据
      this.getTableData()
    },
    // 导出
    async getPlanExport() {
      // 接口 导出测点 /test/plan/:plan/points.csv

      download(`/test/plan/${this.componentParames.curPlanId}/points.csv`).then(res => {
        const link = document.createElement('a')
        const blob = new Blob([res], {
          type: 'application/vnd.ms-excel;charset=utf-8'
        })
        link.style.display = 'none'
        link.href = URL.createObjectURL(blob)
        link.setAttribute('download', `导出采样数据-${this.componentParames.curPlanId}.csv`)
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      })
    },
    query() {
      // 采样值查询
      console.log(this.querydata)
      for (const item in this.carddata) {
        this.carddata[item].forEach(element => {
          if (this.querydata.point === '' && this.querydata.pointtype.length === 0) {
            element.isshow = true
          } else {
            let isshowflag = false
            if (this.querydata.pointtype !== '' && this.querydata.pointtype.indexOf(element.range) > -1) {
              isshowflag = true
            }
            if (this.querydata.point !== '' && (element.name.toLocaleUpperCase().indexOf(this.querydata.point.toLocaleUpperCase()) > -1) || (element.offset + '') === this.querydata.point) {
              isshowflag = isshowflag || true
            }
            element.isshow = isshowflag
          }
        })
      }
      this.$forceUpdate()
    },
    commandOpt(row) {
      // 遥控、遥调操作
      if (row == null) return
      this.commandOpt104FormData = row
      this.showCommandOpt104ModelForm = true
    },
    // 格式化bool值
    formatBool(val) {
      const rs = val.not.toString()
      return rs
    },
    // 格式化 测试状态
    formatState() {
      return '未获取'
    },

    // 获取采样表格数据
    getTableData(pageObj) {
      this.vLoading = true
      pageObj = pageObj || {
        page: 0,
        limit: this.tablePrames.pageLimit
      }
      // 获取表格数据-测点列表
      // 接口 采样数据查询 /test/execute/:runner/values
      // :runner 例:3200000208
      httpGet(`/test/execute/${this.componentParames.curPlanId}/values?page=${pageObj.page}&size=${pageObj.limit}`).then((response) => {
        this.vLoading = false
        delete response.code
        this.tableData = response
        const groupingNamelist = {}
        for (let index = 0; index < response.length; index++) {
          const element = response[index]
          element['isshow'] = true // 默认为都显示。可通过查询条件更改其值
          if (element.groupingName == null || element.groupingName === '') element.groupingName = '未分组'
          if (groupingNamelist[element.groupingName]) {
            groupingNamelist[element.groupingName].push(element)
          } else {
            groupingNamelist[element.groupingName] = [element]
          }
        }
        this.carddata = groupingNamelist
        this.tablePrames.paginationTotalElements = response.totalElements * 1
        // this.requestData.deviceProtocolOptions = response
        // 刷新一次状态
        this.refreshManual(false)
      })
    },
    // 编辑
    editRow(index) {
      // console.log('this.tableData[index]=', this.tableData[index].id)
      // 如果是添加，则index为空，modelFormData也为空
      this.modelFormData = this.tableData[index]
      this.showModelForm = true
    },
    // 删除
    delRow(index) {
      this.$confirm(
        '此操作将永久删除该记录, 是否继续?',
        `删除`,
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          // console.log('delRow index=', index)
          // 接口 删除测点 /product/model/:product/:tag
          // :product 1100000645
          // :tag 6386 tag id 为采样列表序号id

          const delUrl = `/product/model/${this.componentParames.productId}/${this.tableData[index].id}`
          // console.log('delRow delUrl=', delUrl)
          delRecord(delUrl).then(() => {
            this.$message({
              message: '删除成功',
              type: 'success',
              offset: window.screen.height / 3
            })
            // 后端成功执行后，前端再删除选中行
            this.tableData.splice(index, 1)
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
            offset: window.screen.height / 3
          })
        })
    },
    // 采样值数据获取
    // 手动刷新时，通过models接口获取实时数据信息
    // isHand: 是否手动刷新。false表示自动触发 true表示界面刷新按钮操作
    refreshManual(isHand) {
      // 默认接口 采样数据（高频刷新） /test/execute/:runner/models
      var getUrl = `/test/execute/${this.componentParames.curPlanId}/models`
      httpGet(getUrl).then(res => {
        if (this.tableData.length > 0) {
          res.forEach(ritem => {
            this.tableData.forEach(item => {
              if (item.id === ritem.id) {
                item.value = ritem.value
                item.occur = ritem.occur
                // 解决tableData无法刷新的问题
                this.tableIsUpdate = 'sample-' + new Date().getTime()
              }
            })
            for (const item in this.carddata) {
              let hasitem = false
              for (let i = 0; i < this.carddata[item].length; i++) {
                const element = this.carddata[item][i]
                if (element.id === ritem.id) {
                  this.carddata[item][i].value = ritem.value
                  this.carddata[item][i].occur = ritem.occur
                  hasitem = true
                  break
                }
              }
              if (hasitem) {
                break
              }
            }
          })
          this.$forceUpdate()
        }
        if (isHand != null && isHand) {
          this.$message({
            message: '采样值刷新成功',
            type: 'success',
            duration: 500,
            offset: window.screen.height / 3
          })
        }
        // console.log('this.tableData', this.tableData)
      })
    },
    // 导入
    submitUpload() {
      // 上传文件
      this.$refs.upload.submit()
      // 上传之后刷新页面查看上传结果
      this.getTableData()
    },
    // 关闭 model
    closeModel(modelName, modelShow) {
      // console.log('closeModel modelName=', modelName)
      // console.log('closeModel modelShow=', modelShow)
      switch (modelName) {
        // case 'ModelAddStep':
        //   this.deviceDetail.showModelAddStep = modelShow
        //   break
        case 'ModelFormSample':
          this.showModelForm = modelShow
          // 操作过用例模态框 刷新一次表格数据
          this.getTableData()
          break
        case 'ModelSampleEchart':
          this.showEchart = modelShow
          break
        case 'ModelFormCommandOpt104':
          this.showCommandOpt104ModelForm = false
          break
        default:
          console.log('未获取到 modelName')
          break
      }
    },
    // 曲线
    sampleEchart(row) {
      // 接口 /test/execute/:runner/point/:point/chart?period=pt4h
      // :runner 示例 3200000235
      // :point 示例 24755

      // const getUrl = `/test/execute/${this.componentParames.curPlanId}/point/0/chart?period=pt4h`
      // httpGet(getUrl).then(res => {
      //   // const sampleEchartData = {
      //   //   xAxis: res.xAxis[0],
      //   //   yAxis: res.yAxis[0],
      //   //   series: res.series[0]
      //   // }
      //   // const sampleEchartData = {
      //   //   xAxis: { type: 'category', min: '2023-06-14 06:52:46', max: '2023-06-14 10:52:46' },
      //   //   yAxis: res.yAxis[0],
      //   //   series: { data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line' }
      //   // }
      //   const sampleEchartData = res

      //   const chart = this.$refs.chart
      //   const myChart = echarts.init(chart)
      //   myChart.setOption(sampleEchartData)
      //   // window.addEventListener('resize', function() {
      //   //   myChart.resize()
      //   // })
      //   // this.$on('hook:destroyed', () => {
      //   //   window.removeEventListener('resize', function() {
      //   //     myChart.resize()
      //   //   })
      //   // })
      //   console.log('sampleEchart 数据获取成功 res=', res)
      //   console.log('sampleEchart 数据获取成功 sampleEchartData=', sampleEchartData)
      // })
      // console.log('sampleEchart started 展示方式待定', row.id)
      this.curPointId = row.id
      this.curPointName = row.name
      this.showEchart = true
    },
    // 关闭Echart弹窗
    closeSampleEchart() {
      this.showEchart = false
    }
  }
}
</script>
<style lang="scss" scoped>
.card{
  float: left;
  width: 13rem;
  height: 7rem;
  border-radius: 5px;
  border: 1px solid #ccc;
  margin: 1rem;
  font-size: 0.8rem;
}
.card_opt{
  background-color: #ededed;
}
.card_opt_btn{
  float: right;
  cursor: pointer;
}
.card-title{
  border-bottom: 1px dotted #ccc;
  padding: 0.8rem 0.5rem;
}
.card-label{
    margin-top: 11.5%;
    top: 0;
    left: 0;
    width: 65%;
    font-size: 0.8rem;
    padding-left: 10.5%;
    position: absolute;
}
.card-label>li{
  white-space: nowrap;
  list-style-position:inside;
  // text-overflow: ellipsis;
  // overflow: hidden;
}
.card-label-linkline{
    margin-left: 1.45rem;
    height: 31px;
    width: 1px;
    left: 0;
    margin-top: 20px;
    top: 0;
    position: absolute;
    background: #a97272;
    z-index: 1;
}
.value_0{
    right:0;
    top: 0;
    width: 20%;
    margin: 10px;
    text-align: center;
    border-radius: 2rem;
    border: 1px solid #fff;
    padding: 6px 0;
    background: rgb(224, 156, 156);
    color: #fff;
    font-size: 1.5rem;
    position: absolute;
}
.value_1{
  right:0;
    top: 0;
    width: 20%;
    margin: 10px;
    text-align: center;
    border-radius: 2rem;
    border: 1px solid #fff;
    padding: 6px 0;
    background: red;
    color: #fff;
    font-size: 1.5rem;
    position: absolute;
}
.value_nubmer{
  right:0;
    top: 0;
    width: 35%;
    margin: 10px;
    text-align: right;
    padding: 13px 0;
    font-size: 1.2rem;
    position: absolute;
}
.title-container {
  display: flex;
  justify-content: space-between;
  padding: 20px 0;
  .title-right {
    display: flex;
    align-items: center;
    .check-resaults {
      padding-right: 16px;
      .success {
        color: #00706b;
      }
      .faild {
        color: #f00;
        padding-right: 6px;
      }
      span {
        font-weight: bold;
      }
    }
  }
}
.title-main {
  color: #111;
  font-weight: bold;
}
// 用例表格样式
.table-container {
  // padding: 20px 0;
  .el-table {
    font-size: 12px;
  }
  .range {
    white-space: nowrap;
  }
}
// 底部按钮
.bottom-button {
  display: flex;
  justify-content: center;
  padding-bottom: 20px;
  .cancel-plan {
    padding-right: 20px;
  }
}
// 按钮公用样式
.dark-button {
  background-color: #00706B;
  border: 1px #00706B solid;
  color: #fff;
}
.light-button {
  color: #00706B;
  border: 1px #00706B solid;
}
</style>