read_opc/chuanyi_client/src/views/group_item/index.vue

<template>
  <div class="cqcy-content" v-if="chooseGroupId">
    <div style="margin-bottom: 10px;">
      <span style="color: #474646; font-size: 14px;">数据组：</span>
      <el-select v-model="chooseGroupId" disabled size="mini">
        <el-option v-for="dict in groupDataList" :key="dict.id" :label="dict.groupName" :value="dict.id"></el-option>
      </el-select>
      <span style="margin-left: 20px; color: #474646; font-size: 14px;">数据项名称：</span>
      <el-input placeholder="请输入数据项名称" size="mini" style="width: 200px;" @input="itemChangeEvent" v-model="filterItemText"
        prefix-icon="el-icon-search">
      </el-input>
      <el-checkbox v-model="groupRunStatus" size="mini" style="margin-left: 20px;" @change="groupRunCheckboxEvent"
        title="固定每5秒刷新一次数据">实时数据</el-checkbox>
      <el-button type="danger" v-show="!groupRunStatus" icon="el-icon-delete" size="mini" @click="multipleDelItemEvent"
        style="float: right;">批量删除</el-button>
      <el-button type="primary" v-show="!groupRunStatus" icon="el-icon-s-tools" size="mini"
        @click="multipleModelItemEvent" style="float: right; margin-right: 15px;">批量设置表达式</el-button>
      <el-button type="primary" v-show="!groupRunStatus" icon="el-icon-plus" size="mini" @click="addGroupItemEvent"
        style="float: right; margin-right: 5px;">添加数据项</el-button>
    </div>
    <u-table class="cy-group-items" row-key="label" use-virtual :height="uTableHeight" :data="itemDataList"
      @selection-change="selectionLineChangeHandle" @sort-change="sortChange" :big-data-checkbox="true"
      showBodyOverflow="title" showHeaderOverflow="title" border>
      <u-table-column type="selection" width="55" align="center" />
      <u-table-column type="index" label="序号" width="60" fixed align="center" />
      <u-table-column label="数据项名称" prop="itemName" sortable="custom" align="center" />
      <template v-if="groupRunStatus">
        <u-table-column prop="dataType" sortable="custom" label="数据项类型" align="center" width="120">
        </u-table-column>
        <u-table-column prop="operationRule" sortable="custom" label="表达式" align="center" width="150">
          <template slot-scope="scope">
            {{ scope.row.operationRule ? scope.row.operationRule : '默认值' }}
          </template>
        </u-table-column>
        <u-table-column prop="quality" sortable="custom" label="质量" align="center" width="60">
        </u-table-column>
        <u-table-column prop="dataOrgValue" sortable="custom" label="原始数据值" align="center" width="120">
          <template slot-scope="scope">
            {{ (scope.row.dataOrgValue != null
              && scope.row.dataOrgValue != 'undefined'
              && scope.row.dataOrgValue != 'null') ? scope.row.dataOrgValue : '' }}
          </template>
        </u-table-column>
        <u-table-column prop="dataValue" sortable="custom" label="计算值" align="center" width="100">
          <template slot-scope="scope">
            {{ (scope.row.dataValue != null
              && scope.row.dataValue != 'undefined'
              && scope.row.dataValue != 'null') ? scope.row.dataValue : '' }}
          </template>
        </u-table-column>
        <u-table-column prop="dataSourceName" sortable="custom" label="数据源名称" align="center" width="180">
        </u-table-column>
        <u-table-column prop="createTime" sortable label="取值时间" align="center" width="180">
        </u-table-column>
      </template>
      <template v-else>
        <u-table-column prop="describe" sortable="custom" label="别名" align="center" width="150">
          <template slot-scope="scope" v-if="scope.row.describe">
            <!--          <el-tag type="primary" disable-transitions>{{ scope.row.describe }}</el-tag>-->
            <span>{{ scope.row.describe }}</span>
          </template>
        </u-table-column>
        <u-table-column prop="dataSourceName" sortable="custom" label="数据源名称" align="center" width="180">
        </u-table-column>
        <u-table-column prop="operationRule" sortable="custom" label="表达式" align="center" width="200">
          <template slot-scope="scope">
            {{ scope.row.operationRule ? scope.row.operationRule : '默认值' }}
          </template>
        </u-table-column>
        <u-table-column label="操作" align="center" width="180">
          <template slot-scope="scope">
            <el-button type="text" size="small" icon="el-icon-edit" @click="handleClickByEdit(scope.row)">编辑</el-button>
            <el-button type="text" size="small" icon="el-icon-delete" style="color: red;"
              @click="handleClickByDel(scope.row)">删除</el-button>
          </template>
        </u-table-column>
      </template>
    </u-table>

    <!-- 修改数据项基础信息 -->
    <el-dialog title="修改数据项" width="600px" top="10vh" center v-dialog-drag v-if="dialogItemVisible"
      :before-close="dialogClose" :visible.sync="dialogItemVisible" :close-on-click-modal="false" :append-to-body="true">
      <el-form ref="itemForm" :model="itemForm" label-width="150px">
        <el-form-item label="ID" prop="id" style="display: none;">
          <el-input v-model='itemForm.id' type="text" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="数据模型：" prop="dataModelId">
          <el-select v-model="itemForm.dataModelId" filterable clearable placeholder="请选择表达式" style="width: 100%;">
            <el-option v-for="(item, index) in this.dataModelList" :key="index" :label="item.title" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据项描述信息：" prop="describe">
          <el-input v-model.trim='itemForm.describe' type="text" auto-complete="off" show-word-limit maxlength="20"
            placeholder="请输入描述信息"></el-input>
        </el-form-item>
        <!--        <el-divider content-position="left" class="cy-divider">事件报表配置（以下任意一项配置为空都将会无效）</el-divider>-->
        <!--        <el-form-item label="事件驱动产生条件：" prop="eventMode">-->
        <!--          <el-radio-group v-model="itemForm.eventMode">-->
        <!--            <el-radio label="0">大于</el-radio>-->
        <!--            <el-radio label="1">小于</el-radio>-->
        <!--            <el-radio label="2">布尔类型</el-radio>-->
        <!--          </el-radio-group>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="阈值：" prop="eventValue">-->
        <!--          <el-input v-model="itemForm.eventValue" placeholder="请输入阈值" maxlength="8">-->
        <!--          </el-input>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="事件驱动报表：" prop="tableReportId">-->
        <!--          <el-select v-model="itemForm.tableReportId" filterable clearable-->
        <!--                     placeholder="请选择事件驱动报表" style="width: 100%;">-->
        <!--            <el-option-->
        <!--                v-for="(item, index) in this.eventReportList"-->
        <!--                :key="index"-->
        <!--                :label="item.reportTableName"-->
        <!--                :value="item.id">-->
        <!--            </el-option>-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->
      </el-form>
      <span slot='footer'>
        <el-button type="primary" @click="editConfirmEvent" style="margin-top: 20px;">确定</el-button>
        <el-button @click="dialogClose" style="margin-top: 20px;">取消</el-button>
      </span>
    </el-dialog>

    <el-dialog title="选择表达式" width="500px" top="10vh" center v-dialog-drag v-if="dialogDataModelVisible"
      :before-close="dialogDataModelClose" :visible.sync="dialogDataModelVisible" :close-on-click-modal="false"
      :append-to-body="true">
      <el-select v-model="chooseDataModel" filterable clearable placeholder="请选择表达式" style="width: 100%;">
        <el-option v-for="(item, index) in this.dataModelList" :key="index" :label="item.title" :value="item.id">
        </el-option>
      </el-select>
      <div style="width: 100%; text-align: center; margin-top: 20px;">
        <el-button type="primary" @click="saveDataModelEvent">确定</el-button>
        <el-button @click="dialogDataModelClose">取消</el-button>
      </div>
    </el-dialog>

    <!-- 选择数据项 -->
    <data-source-item ref="dataSourceItem" @update-message="updateDataItemEmit"
      :chooseGroup="chooseGroup"></data-source-item>

  </div>
</template>

<script>
import {
  addItemList,
  batchSetExpresses,
  deleteItemByIdList,
  getAllDataModel,
  getItemById,
  getItemGroupById,
  getItemValueById,
  updateItem
} from "@/api/datasource";
import { customCompare, showAlertMsgWin, showAlertWin, showConfirmWin, showLoading } from "@/utils/cqcy";
import cqcyCode from "@/utils/cqcyCode";
import DataSourceItem from "@/components/CustomDialog/DataSourceItem.vue";

export default {
  name: "index",
  components: {
    DataSourceItem
  },
  data() {
    return {
      dialogItemVisible: false,
      dialogDataModelVisible: false,
      itemDataList: [],
      itemDataListF: [],
      groupDataList: [],
      dataModelList: [],
      chooseDataModel: null,
      selectionItems: [],
      eventReportList: [],
      chooseGroup: null,
      chooseGroupId: null,
      groupRunStatus: false,
      timeInterval: null,
      filterItemText: '',
      uTableHeight: 500,
      itemForm: {
        id: null,
        dataModelId: null,
        // eventMode: null,
        // eventValue: null,
        // tableReportId: null,
        describe: ''
      }
    }
  },
  watch: {
    '$route'(to, from) {
      this.readParams()
    },
    '$route.query.t': {
      handler(o, n) {
      }
    },
    deep: true
  },
  created() {
    this.readParams()
  },
  beforeDestroy() {
    if (this.timeInterval) {
      clearInterval(this.timeInterval)
      this.timeInterval = null
    }
    // sessionStorage.removeItem('GROUP_ID')
  },
  methods: {
    sortChange({ prop, order }) {
      this.itemDataList.sort(customCompare(prop, order))
    },
    itemChangeEvent(value) {
      let arr = JSON.parse(JSON.stringify(this.itemDataListF))
      if (!value || !value.trim()) {
        this.itemDataList = arr
        return
      }
      let filterList = arr.filter(v => {
        return v.itemName.indexOf(value) !== -1
      })
      this.itemDataList = filterList
    },
    /** 读取参数 */
    readParams() {
      this.filterItemText = ''
      // let groupListStorage = sessionStorage.getItem('GROUP_LIST') ? sessionStorage.getItem('GROUP_LIST') : '[]'
      // this.groupDataList = JSON.parse(groupListStorage)
      let groupId = sessionStorage.getItem('GROUP_ID') ? sessionStorage.getItem('GROUP_ID') : '-1'
      this.chooseGroupId = parseInt(groupId)
      this.groupRunStatus = false
      this.getGroupById(this.chooseGroupId)
      // this.getItemValueById()
    },
    /** 运行状态值 */
    groupRunCheckboxEvent(val) {
      this.groupRunStatus = val
      this.getItemValueById()
    },
    /** 获取数据项值信息 */
    getItemValueById() {
      if (!this.groupRunStatus || !this.chooseGroup) {
        this.filterItemText = ''
        if (this.timeInterval) {
          clearInterval(this.timeInterval)
          this.timeInterval = null
        }
        this.getGroupById(this.chooseGroupId)
        return
      }
      getItemValueById(this.chooseGroup.id).then(res => {
        // this.filterItemText = ''
        let list = res.data
        if (!list) return
        // 避免布尔类型时页面无法显示数据
        for (let i = 0; i < list.length; i++) {
          list[i].dataValue += ''
          list[i].quality += ''
        }
        if (this.filterItemText) {
          let filterList = list.filter(v => {
            return v.itemName.indexOf(this.filterItemText) !== -1
          })
          this.itemDataList = filterList
        } else {
          this.itemDataList = list
        }
        this.itemDataListF = JSON.parse(JSON.stringify(list))
      }).catch((e) => {
        showAlertWin(this, null, e)
      })
      let temp = setInterval(() => {
        getItemValueById(this.chooseGroup.id).then(res => {
          // this.filterItemText = ''
          let list = res.data
          // 避免布尔类型时页面无法显示数据
          for (let i = 0; i < list.length; i++) {
            list[i].dataValue += ''
            list[i].quality += ''
          }
          if (this.filterItemText) {
            let filterList = list.filter(v => {
              return v.itemName.indexOf(this.filterItemText) !== -1
            })
            this.itemDataList = filterList
          } else {
            this.itemDataList = list
          }
          this.itemDataListF = JSON.parse(JSON.stringify(list))
        }).catch((e) => {
          // showAlertWin(this, e)
        })
      }, 5 * 1000)
      this.timeInterval = temp
    },
    setRowHeight() {
      if ($('.cqcy-content') && $('.cqcy-content')[0]) {
        this.uTableHeight = $('.cqcy-content')[0].offsetHeight - 100
      }
    },
    /** 获取组详细信息 */
    getGroupById(id) {
      this.setRowHeight()
      if (this.timeInterval) {
        clearInterval(this.timeInterval)
        this.timeInterval = null
      }
      if (!id || id <= 0) {
        this.chooseGroupId = null
        return
      }
      this.filterItemText = ''
      const loading = showLoading(this, '加载中，请稍候···')
      getItemGroupById(id).then(res => {
        loading.close()
        this.chooseGroup = res.data
        this.groupDataList = [{
          'id': this.chooseGroup.id,
          'groupName': this.chooseGroup.groupName
        }]
        this.setRowHeight()
        this.itemDataList = this.chooseGroup.itemList
        this.itemDataListF = JSON.parse(JSON.stringify(this.itemDataList))
      }).catch((e) => {
        loading.close()
        showAlertWin(this, null, e)
      })
    },
    /** 查询所有数据模型 */
    getAllDataModel(callback) {
      let loading = showLoading(this, '数据加载中，请稍候···')
      let params = {
        'page': 1,
        'limit': 1000
      }
      getAllDataModel(params).then(res => {
        loading.close()
        this.dataModelList = res.data.dataModelList
        for (let i = 0; i < this.dataModelList.length; i++) {
          this.dataModelList[i].title = this.dataModelList[i].remark
            ? ('【' + this.dataModelList[i].remark + '】' + this.dataModelList[i].operationRule)
            : this.dataModelList[i].operationRule
        }
        if (callback) callback(true)
      }).catch((e) => {
        loading.close()
        if (callback) callback(false)
        showAlertWin(this, null, e)
      })
    },
    /** 编辑 */
    handleClickByEdit(row) {
      let _this = this
      if (!row || !row.id) {
        showAlertMsgWin(_this, null, cqcyCode[201])
        return
      }
      _this.getAllDataModel(status => {
        if (!status) return
        const loading = showLoading(_this, '加载中，请稍候···')
        getItemById(row.id).then(res => {
          loading.close()
          if (res.data.runState == 1) {
            showAlertMsgWin(this, null, '该数据组正在运行中，禁止修改！')
            return
          }
          _this.$nextTick(() => {
            _this.itemForm.id = row.id
            _this.itemForm.dataModelId = res.data.dataModelId
            _this.itemForm.describe = res.data.describe
            // _this.itemForm.tableReportId = res.data.tableReportId
            // _this.itemForm.eventMode = res.data.eventMode + ''
            // _this.itemForm.eventValue = res.data.eventValue
            _this.dialogItemVisible = true
          })
        }).catch((e) => {
          loading.close()
          showAlertWin(_this, null, e)
        })
        // let params = {
        //   'page': 1,
        //   'limit': 1000,
        //   'isAutoReport': 3
        // }
        // getAllReportTable(params).then(res => {
        //   let eventReportList = res.data.reportTableList
        //   this.eventReportList = eventReportList
        //   getItemById(row.id).then(res => {
        //     loading.close()
        //     _this.$nextTick(() => {
        //       _this.itemForm.id = row.id
        //       _this.itemForm.dataModelId = res.data.dataModelId
        //       _this.itemForm.describe = res.data.describe
        //       _this.itemForm.tableReportId = res.data.tableReportId
        //       _this.itemForm.eventMode = res.data.eventMode + ''
        //       _this.itemForm.eventValue = res.data.eventValue
        //       _this.dialogItemVisible = true
        //     })
        //   }).catch((e) => {
        //     loading.close()
        //     showAlertWin(_this, e)
        //   })
        // }).catch((e) => {
        //   loading.close()
        //   showAlertWin(this, e)
        // })
      })
    },
    /** 编辑确认事件 */
    editConfirmEvent() {
      // if (this.itemForm.eventValue) {
      //   let reg = /^(\-)?\d+(\.\d{1,2})?$/
      //   if (!reg.test(this.itemForm.eventValue)) {
      //     this.$message({
      //       message: '阈值不合法',
      //       type: 'warning'
      //     })
      //     return
      //   }
      //   if (this.itemForm.eventMode == '2' && this.itemForm.eventValue != 0 && this.itemForm.eventValue != 1) {
      //     this.$message({
      //       message: '布尔类型时阈值只能为0或者1',
      //       type: 'warning'
      //     })
      //     return
      //   }
      // }
      const loading = showLoading(this, '加载中，请稍候···')
      // 若驱动报表事件任意一项为空，则清空报表事项
      // if ((!this.itemForm.eventMode || this.itemForm.eventMode == 'null')
      //     || (this.itemForm.eventValue == null || this.itemForm.eventValue == '')
      //     || !this.itemForm.tableReportId) {
      //   this.itemForm.eventMode = null
      //   this.itemForm.eventValue = null
      //   this.itemForm.tableReportId = null
      // }
      let params = JSON.parse(JSON.stringify(this.itemForm))
      updateItem(params).then(res => {
        loading.close()
        let msg = res.data ? '编辑成功！' : '编辑失败！'
        showAlertMsgWin(this, null, msg)
        this.dialogItemVisible = false
        this.getGroupById(this.chooseGroupId)
      }).catch((e) => {
        loading.close()
        showAlertWin(this, null, e)
      })
    },
    /** 删除数据项 */
    delItems(ids) {
      if (ids.length === this.itemDataListF.length) {
        showAlertMsgWin(this, null, '至少保留一项数据项信息！')
        return
      }
      const loading = showLoading(this, '删除中，请稍候···')
      deleteItemByIdList(ids).then(res => {
        loading.close()
        let msg = res.data ? '删除成功！' : '删除失败！'
        showAlertMsgWin(this, null, msg)
        this.getGroupById(this.chooseGroupId)
      }).catch((e) => {
        loading.close()
        showAlertWin(this, null, e)
      })
    },
    /** 删除 */
    handleClickByDel(row) {
      if (!row || !row.id) {
        showAlertMsgWin(this, null, cqcyCode[201])
        return
      }
      if (this.chooseGroup && this.chooseGroup.runState == 1) {
        showAlertMsgWin(this, null, '该数据组正在运行中，禁止删除！')
        return
      }
      showConfirmWin(this, null, '您确定要删除该数据项吗？', () => {
        this.delItems([row.id])
      })
    },
    /** 多选事件 */
    selectionLineChangeHandle(val) {
      this.selectionItems = val
    },
    /** 批量设置组数据中数据项表达式 */
    multipleModelItemEvent() {
      if (!this.selectionItems || this.selectionItems.length == 0) {
        showAlertMsgWin(this, null, '请至少选择一项数据！')
        return
      }
      if (this.chooseGroup && this.chooseGroup.runState == 1) {
        showAlertMsgWin(this, null, '该数据组正在运行中，禁止修改！')
        return
      }
      this.getAllDataModel(status => {
        this.dialogDataModelVisible = true
      })
    },
    /** 添加数据项 */
    addGroupItemEvent() {
      const loading = showLoading(this, '加载中，请稍候···')
      getItemGroupById(this.chooseGroupId).then(res => {
        loading.close()
        if (res.data.runState == 1) {
          showAlertMsgWin(this, null, '该数据组正在运行中，禁止添加数据项！')
        } else {
          this.$refs.dataSourceItem.groupBasicForm.itemList = res.data.itemList
          this.$refs.dataSourceItem.show()
        }
      }).catch((e) => {
        loading.close()
        showAlertWin(this, null, e)
      })
    },
    /** 批量设置组数据中数据项表达式 */
    saveDataModelEvent() {
      // let ids = Array.from(this.selectionItems, ({ id }) => id)
      let itemList = []
      this.selectionItems.forEach((item) => {
        itemList.push({
          'id': item.id,
          'itemGroupId': item.itemGroupId,
          'dataModelId': this.chooseDataModel
        })
      })
      let params = {
        'itemList': itemList
      }
      const loading = showLoading(this, '设置中，请稍候···')
      batchSetExpresses(params).then(res => {
        loading.close()
        let msg = res.data ? '设置成功！' : '设置失败！'
        showAlertMsgWin(this, null, msg)
        this.dialogDataModelVisible = false
        this.selectionItems = []
        this.chooseDataModel = null
        this.getGroupById(this.chooseGroupId)
      }).catch((e) => {
        loading.close()
        showAlertWin(this, null, e)
      })
    },
    /** 批量删除组数据中数据项 */
    multipleDelItemEvent() {
      if (!this.selectionItems || this.selectionItems.length == 0) {
        showAlertMsgWin(this, null, '请至少选择一项数据！')
        return
      }
      if (this.chooseGroup && this.chooseGroup.runState == 1) {
        showAlertMsgWin(this, null, '该数据组正在运行中，禁止删除！')
        return
      }
      showConfirmWin(this, null, '您确定要删除已选择数据项吗？', () => {
        let ids = Array.from(this.selectionItems, ({ id }) => id)
        this.delItems(ids)
      })
    },
    /** 更新已选择数据项 */
    updateDataItemEmit(items) {
      let params = {
        'id': this.chooseGroup.id,
        'itemList': items
      }
      const loading = showLoading(this, '添加中，请稍候···')
      addItemList(params).then(res => {
        loading.close()
        let msg = res.data ? '设置成功！' : '设置失败！'
        showAlertMsgWin(this, null, msg)
        this.dialogDataModelVisible = false
        this.selectionItems = []
        this.chooseDataModel = null
        this.getGroupById(this.chooseGroupId)
      }).catch((e) => {
        loading.close()
        showAlertWin(this, null, e)
      })
    },
    /** 弹出层关闭事件 */
    dialogClose(done) {
      if (this.$refs['itemForm']) {
        this.$refs['itemForm'].resetFields()
      }
      if (typeof (done) === 'function') {
        done()
      } else {
        this.dialogItemVisible = false
      }
    },
    /** 数据模型弹出层关闭事件 */
    dialogDataModelClose(done) {
      if (typeof (done) === 'function') {
        done()
      } else {
        this.dialogDataModelVisible = false
      }
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.el-table--enable-row-hover .el-table__body tr:hover>td {
  background-color: transparent !important;
}

.cy-divider {
  margin-top: 50px;

  .el-divider__text {
    font-size: 12px;
    color: #5e5e5e;
  }
}

.cy-group-items {
  margin-top: 10px;
  height: calc(100% - 100px);
}
</style>