admin-fiveFollowing/src/views/siteManage/variableList/index.vue

<template>
  <div class="siteManage-main variableList">
    <!-- 筛选start -->
    <div class="filter-container mb-20">
      <div class="left">
        <div>
          <a class="" style="margin-right: 30px">
            【{{ labelCom }}】 站点的所有变量
          </a>
          <el-button icon="el-icon-plus" type="success" @click="addItem()">
            新增
          </el-button>
          <el-button icon="el-icon-refresh" type="primary">
            同步配置到采集器
          </el-button>
        </div>

        <div style="margin-top: 15px">
          <el-button @click="Select(1)" :type="select == 1 ? 'primary' : ''">
            模拟量
          </el-button>
          <el-button @click="Select(2)" :type="select == 2 ? 'primary' : ''">
            状态量
          </el-button>
          <el-button @click="Select(3)" :type="select == 3 ? 'primary' : ''">
            参数量
          </el-button>
          <el-input
            placeholder="搜索变量名称"
            style="width: 200px; margin-left: 20px"
            v-model="variableName"
          ></el-input>
          <el-button
            type="primary"
            icon="el-icon-search"
            class="search-button"
            @click="query()"
          >
            搜索
          </el-button>
        </div>
        <!-- <el-radio-group v-model="tabPosition" style="margin-top: 20px">
          <el-radio-button label="one">模拟量</el-radio-button>
          <el-radio-button label="two">状态量</el-radio-button>
          <el-radio-button label="three">参数量</el-radio-button>
        </el-radio-group> -->
      </div>

      <div class="right">
        <el-upload
          class="upload-demo"
          :action="fileUrl + 'deviceAnalogVariableList/variableListImport'"
          :on-progress="handleProgress"
          :on-success="handleUpAvatar"
          multiple
          :limit="1"
          :headers="{
            accessToken: [accessToken],
          }"
          :file-list="fileList"
          style="margin-right: 10px; display: inline-block"
        >
          <el-button size="small" type="primary">导入</el-button>
        </el-upload>

        <el-button type="primary" @click="DataReportExport()">导出</el-button>
      </div>
    </div>
    <!-- 筛选end -->

    <!-- 表格start -->
    <el-table
      :data="tableData"
      border
      stripe
      :header-cell-style="headClass"
      :default-sort="{ prop: 'date', order: 'descending' }"
    >
      <el-table-column
        type="index"
        label="序号"
        width="80px"
        sortable
      ></el-table-column>
      <el-table-column
        prop="variableName"
        label="变量名"
        width="150px"
        sortable
      ></el-table-column>
      <el-table-column
        prop="variableCoding"
        label="变量编号"
        width="150px"
        sortable
      ></el-table-column>
      <el-table-column
        prop="monitorDeviceName"
        label="监控设备"
        width="150px"
      ></el-table-column>
      <el-table-column
        prop="deviceName"
        label="通信设备"
        width=""
      ></el-table-column>
      <el-table-column
        prop="dataAddress"
        label="数据地址"
        width=""
      ></el-table-column>
      <el-table-column
        prop="dataType"
        label="数据类型"
        width=""
      ></el-table-column>
      <el-table-column
        prop="coefficient"
        label="系数"
        width=""
      ></el-table-column>
      <el-table-column
        prop="saveCycle"
        label="存盘周期"
        width=""
      ></el-table-column>
      <el-table-column fixed="right" label="操作" width="180">
        <template #default="scope">
          <el-button
            type="text"
            size="small"
            @click.prevent="editRow(scope.row)"
          >
            修改
          </el-button>
          <el-popconfirm
            confirm-button-text="是"
            cancel-button-text="否"
            icon="el-icon-info"
            icon-color="red"
            title="确定删除?"
            @confirm="handleDelete(scope.row)"
            @cancel="cancelEvent"
          >
            <template #reference>
              <el-button type="text" size="small" class="delete-text">
                删除
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格end -->

    <!-- 分页start -->
    <div class="paginationBlock">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[15, 20, 25, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <!-- 分页end -->

    <!--弹框组件开始-----------------------start-->
    <dialog-component
      :dialogTitle="dialogTitle"
      :itemInfo="tableItem"
      @closeDialog="closeDialog"
      :flag="showDialog"
      :siteId="siteId"
    ></dialog-component>
    <!--弹框组件开始-----------------------end-->
  </div>
</template>

<script>
import { useStore } from 'vuex'
import DialogComponent from './dialogComponent'
import * as api from '@/api/siteManage/variableList'
import { defineComponent, onMounted, reactive, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'

export default defineComponent({
  name: 'VariableList',
  props: {
    siteId: Number,
    labelCom: String,
    activeName: String,
  },

  components: { DialogComponent },

  setup(props) {
    const store = useStore()
    store
    const tableItem = reactive([])
    const tableData = ref()
    const currentPage = ref(1)
    const pageSize = ref(15)
    const total = ref(0)
    const select = ref(1)
    // const siteId = ref(1)
    const variableName = ref('')
    const showDialog = ref(false)
    const dialogTitle = ref('')

    const fileUrl = ref(window.PLATFROM_CONFIG.baseUrl)
    const fileList = ref([])
    const accessToken = ref(store.state.user.accessToken)

    const handleProgress = (file, fileList) => {
      file
      if (
        !(
          fileList.raw.type ===
            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
          fileList.raw.type === 'application/vnd.ms-excel'
        )
      ) {
        ElMessage({
          message: '上传文件只能是 xls 和 xlsx 格式!',
          type: 'error',
        })
        return false
      } else {
        return true
      }
    }

    const handleUpAvatar = (res, file) => {
      console.log(res, file)
      fileList.value = []
      ElMessage.success({
        message: '导入成功',
        type: 'success',
      })
      query()
    }

    //是否删除  ---- 否
    const cancelEvent = () => {
      console.log('cancel!')
    }
    //查询变量列表
    function query() {
      api
        .variableList({
          size: pageSize.value,
          current: currentPage.value,
          dataArea: select.value,
          siteId: props.siteId,
          variableName: variableName.value,
        })
        .then((requset) => {
          if (requset.status === 'SUCCESS') {
            tableData.value = requset.data.records
            total.value = requset.data.total
          } else {
            ElMessage.error(requset.msg)
          }
        })
    }

    const Select = (value) => {
      select.value = value
      query()
    }

    //监听变化
    watch(
      () => props.siteId,
      () => {
        if (props.activeName == 'third') {
          query()
        }
      }
    )
    watch(
      () => props.activeName,
      (newVal) => {
        if (newVal == 'third') {
          query()
        }
      }
    )
    onMounted(() => {})

    const handleSizeChange = (val) => {
      console.log(`每页 ${val} 条`)
    }
    const handleCurrentChange = (val) => {
      console.log(`当前页: ${val}`)
    }

    // input输入框无法输入解决
    const change = () => {
      this.$forceUpdate()
    }

    // 表头样式设置
    const goVariableList = () => {
      // 跳转至订单列表页面传参
      this.$router.push({
        path: '../siteManage/variableList/index.vue',
      })
      // this.$router.push({ name:'variableList'})
    }
    const headClass = () => {
      return 'background:#FAFAFA;'
    }

    // 添加操作
    const addItem = () => {
      tableItem.value = {
        monitoringEquipment: '',
        communicationEquipment: '',
        // dataArea:'1'
      }
      dialogTitle.value = '新增'
      showDialog.value = true
    }
    // 编辑操作
    const editRow = (row) => {
      // tableItem.value = {
      //   dataArea: row.dataArea.toString(),
      //   monitoringEquipment: row.monitoringEquipment,
      //   communicationEquipment: row.communicationEquipment,

      // }

      tableItem.value = row
      tableItem.value.dataArea = row.dataArea.toString()
      tableItem.value.monitoringEquipment = row.monitoringEquipment
      tableItem.value.communicationEquipment = row.communicationEquipment
      dialogTitle.value = '编辑'
      showDialog.value = true
    }

    // 关闭操作
    const closeDialog = () => {
      showDialog.value = false
      query()
    }

    //删除操作
    const handleDelete = (row) => {
      api.variableListDel({ id: row.id }).then((requset) => {
        if (requset.status === 'SUCCESS') {
          ElMessage.success({
            message: '删除成功',
            type: 'success',
          })
          query()
        } else {
          ElMessage.error(requset.msg)
        }
      })
    }
    // 获取数据
    const getVariableListone = () => {
      console.log('hzy')
    }

    //导出
    const DataReportExport = () => {
      api
        .variableListExport({
          dataArea: select.value,
          siteId: props.siteId,
          variableName: variableName.value,
        })
        .then((requset) => {
          if (requset.status === 'SUCCESS') {
            window.location.href = window.PLATFROM_CONFIG.fileUrl + requset.data
            ElMessage.success({
              message: '导出成功',
              type: 'success',
            })
          } else {
            ElMessage.error(requset.msg)
          }
        })
    }

    return {
      cancelEvent,
      handleSizeChange,
      handleCurrentChange,
      change,
      goVariableList,
      headClass,
      addItem,
      editRow,
      closeDialog,
      handleDelete,
      getVariableListone,
      query,
      Select,

      DataReportExport, //导出

      select,
      showDialog,
      dialogTitle,
      total,
      pageSize,
      currentPage,
      tableData,
      input: '请输入状态',
      variableName,
      tableItem,

      fileList,
      fileUrl,
      accessToken,
      handleProgress,
      handleUpAvatar,
    }
  },
})
</script>

<style lang="scss" scoped>
</style>