优化

MrShi

2026-01-13 3a154bdb0a5aaa2c0ac3eac95a6ba747068bd454

 admin/src/views/business/deviceDuanluqi.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,211 @@
<template>
    <TableLayout :permissions="['business:device:query']">
        <!-- æœç´¢è¡¨å• -->
        <el-form ref="searchForm"  slot="search-form" :model="searchForm" label-width="100px" inline>
            <el-form-item title="名称" prop="name">
                <el-input v-model="searchForm.name" placeholder="请输入名称" @keypress.enter.native="search"></el-input>
            </el-form-item>
            <el-form-item title="标识符" prop="no">
                <el-input v-model="searchForm.no" placeholder="请输入设备标识符" @keypress.enter.native="search"></el-input>
            </el-form-item>
            <el-form-item title="设备号" prop="doorNo">
                <el-input v-model="searchForm.doorNo" placeholder="请输入设备号" @keypress.enter.native="search"></el-input>
            </el-form-item>
            <section>
                <el-button type="primary" @click="search">搜索</el-button>
                <el-button @click="reset">重置</el-button>
            </section>
        </el-form>
        <!-- è¡¨æ ¼å’Œåˆ†é¡µ -->
        <template v-slot:table-wrap>
          <ul class="toolbar" v-permissions="['business:device:create', 'business:device:delete']">
            <li><el-button type="primary" @click="$refs.operaDeviceWindow.open('新建断路器')" icon="el-icon-plus" v-permissions="['business:device:create']">新建</el-button></li>
            <li><el-button @click="deleteByIdInBatch" icon="el-icon-delete" v-permissions="['business:device:delete']">删除</el-button></li>
          </ul>
            <el-table
                :height="tableHeightNew"
                v-loading="isWorking.search"
                :data="tableData.list"
                stripe
            >
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column prop="name" label="名称" fixed min-width="150" align="center"></el-table-column>
              <el-table-column prop="no" label="设备标识符" min-width="100" align="center" ></el-table-column>
              <el-table-column prop="doorNo" label="设备号"  min-width="120" align="center" show-overflow-tooltip></el-table-column>
              <el-table-column prop="channelNo" label="开关序号" align="center" min-width="100"></el-table-column>
              <el-table-column prop="manufature" label="厂商" align="center" min-width="100" show-overflow-tooltip></el-table-column>
              <el-table-column prop="regionPathName" align="center"  min-width="100" label="所在位置"></el-table-column>
              <el-table-column prop="ip" label="IP"  min-width="150" align="center" show-overflow-tooltip ></el-table-column>
              <el-table-column prop="port" label="端口" align="center"  ></el-table-column>
              <el-table-column prop="isUsed" label="是否使用">
                <template slot-scope="{row}">
                  <el-switch @change="changeUsed($event, row)" v-model="row.isUsed" active-color="#13ce66"
                             inactive-color="#ff4949" :active-value="0" :inactive-value="1">
                  </el-switch>
                </template>
              </el-table-column>
              <el-table-column prop="editDate" label="最近更新时间" align="center" min-width="150"></el-table-column>
              <el-table-column prop="channelParam" label="控制开关参数" align="center" min-width="100">
                <el-table-column prop="channelInfo" label="控制开关序号" align="center" min-width="100"></el-table-column>
                <el-table-column prop="level" label="空闲时间(秒)" align="center" min-width="100"></el-table-column>
                <el-table-column label="空闲电流阈值" align="center" min-width="120">
                  <template slot-scope="{row}">
                    <span >{{ row.doorNameObj.max || '-'}}A</span>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column prop="doorNameObj" label="MQTT配置参数" align="center">
                <el-table-column prop="doorNameObj.mqttIp" label="IP" min-width="120" align="center"></el-table-column>
                <el-table-column prop="doorNameObj.mqttPort" label="端口" min-width="80" align="center"></el-table-column>
                <el-table-column prop="doorNameObj.mqttUsername" label="账号" align="center"></el-table-column>
                <el-table-column prop="doorNameObj.mqttPassword" label="密码" align="center">
                  <template slot-scope="{row}">
                    <span :class=" 'blue'">{{row.showPwd?row.doorNameObj.mqttPassword:'******'}}</span>
                    <el-button  style="margin-left: 10px" v-if="row.doorNameObj.mqttPassword!=null"
                                @click.native.p.prevent="showPassward(row)" type="text">
                      <i class="el-icon-view" :class="row.showPwd?'red':'blue'" :title="row.showPwd?'隐藏':'显示'"></i>
                    </el-button>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column
                  label="操作"
                  align="center"
                  min-width="280"
                  fixed="right"
              >
                  <template slot-scope="{row}">
                    <el-button type="text" @click="$refs.operaDeviceWindow.open('编辑断路器', row)" icon="el-icon-edit" v-permissions="['business:device:update']">编辑</el-button>
                    <el-button type="text" @click="$refs.operaDeviceDataWindow.open('查看断路器数据', row)" icon="el-icon-view" v-permissions="['business:device:update']">数据</el-button>
                    <el-button type="text" @click="send(row,1)" icon="el-icon-circle-check"  v-permissions="['business:device:update']">开闸</el-button>
                    <el-button type="text" class="red" @click="send(row,0)" icon="el-icon-circle-close"  v-permissions="['business:device:update']">关闸</el-button>
                    <el-button type="text" class="red" @click="deleteById(row)" icon="el-icon-delete" v-permissions="['business:device:delete']">删除</el-button>
                  </template>
                </el-table-column>
            </el-table>
            <pagination
                @size-change="handleSizeChange"
                @current-change="handlePageChange"
                :pagination="tableData.pagination"
            >
            </pagination>
        </template>
      <el-dialog
          :visible.sync="visibleSend"
          style="z-index: 100000"
          append-to-body
          width="50%"
          height="50%"
          :title="'控制开关-【'+ form.name+'】'"
      >
        <el-form :model="form" ref="form"  :rules="rules">
          <el-form-item label="执行操作："  >
            <b class="green" v-if="form.status ===1">开闸</b>
            <b class="red" v-else>关闸</b>
          </el-form-item>
          <el-form-item label="开关序号" prop="channelNo">
            <el-input v-model="form.channelNo" type="text" placeholder="请输入开关序号 ï¼Œå¤šä¸ªç”¨è‹±æ–‡é€—号隔开，如 1,2,3" v-trim/>
          </el-form-item>
          <p class="tip-warn" style="width: 100%;"><i class="el-icon-warning"></i>设备原始开关序号信息：{{form.channelNo1}}，控制多个开关，请用英文逗号隔开，如 1,2;</p>
        </el-form>
        <template  v-slot:footer  >
          <el-button @click="sendAction()" type="primary" v-if="form.status === 1" :loading="isWorkSending">确认开闸</el-button>
          <el-button @click="sendAction()" type="danger" v-if="form.status !== 1" :loading="isWorkSending">确认关闸</el-button>
          <el-button @click="sendClose()">返回</el-button>
        </template>
      </el-dialog>
        <!-- æ–°å»º/修改 -->
    <OperaDeviceDuanluqiWindow ref="operaDeviceWindow" @success="handlePageChange"/>
    <OperaDeviceDataListWindow ref="operaDeviceDataWindow" @success="handlePageChange"/>
    </TableLayout>
</template>
<script>
import BaseTable from '@/components/base/BaseTable'
import TableLayout from '@/layouts/TableLayout'
import Pagination from '@/components/common/Pagination'
import OperaDeviceDataListWindow from '@/components/business/OperaDeviceDataListWindow'
import OperaDeviceDuanluqiWindow from '@/components/business/OperaDeviceDuanluqiWindow'
export default {
  name: 'DeviceDuanluqi',
  extends: BaseTable,
  components: { TableLayout, Pagination, OperaDeviceDuanluqiWindow ,OperaDeviceDataListWindow},
  data () {
    return {
      // æœç´¢
      searchForm: {
        doorNo: '',
        no: '',
        name: '',
        type: 5
      },
      isWorkSending: false,
      form: {
        id: '',
        name: '',
        channelNo: '',
        channelNo1: '',
        status: null
      },
      visibleSend: false,
      options: [],
      rules: {
        channelNo: [{ required: true, message: '请输入需要操作的开关序号', trigger: 'blur' }],
      }
    }
  },
  created () {
    this.config({
      module: '设备信息表',
      api: '/business/device',
      'field.id': 'id',
      'field.main': 'id'
    })
    this.search()
  },
  methods: {
    changeUsed (e, row) {
      this.api.updateUsedById({
        id: row.id,
        isUsed: e
      })
    },
    showPassward (row) {
      if (!row.showPwd) {
        this.$set(row, 'showPwd', true)
      } else {
        this.$set(row, 'showPwd', false)
      }
    },
    sendAction () {
      if (!this.form.channelNo) {
        return
      }
      this.$dialog.actionConfirm('确认进行断路器【' + (this.form.status === 1 ? '开闸' : '关闸') + '】操作吗？', '操作确认提醒')
        .then(() => {
          this.isWorkSending = true
          this.api.duanluqiCmd(this.form)
            .then(res => {
              this.$tip.apiSuccess(res || '请求成功')
              this.sendClose()
            })
            .catch(e => {
            })
            .finally(() => {
              this.isWorkSending = false
            })
        })
        .catch(() => {})
    },
    send (row, type) {
      this.visibleSend = true
      this.form = { id: row.id, name: row.name, channelNo: row.channelNo, status: type ,channelNo1:row.channelNo}
    },
    sendClose () {
      this.visibleSend = false
      this.isWorkSending = false
      this.form = { id: '', name: '', channelNo: '', status: '',channelNo1:'' }
    }

  }
}
</script>