新增终端状态管理

src/api/device-boot/line.ts

@@ -0,0 +1,27 @@
+import request from '@/utils/request'
+
+import { DEVICE_BOOT } from '@/utils/constantRequest'
+
+const MAPPING_PATH = DEVICE_BOOT + '/line'
+
+
+/**
+ * 查询终端详细信息
+ */
+export const getDeviceDetailData = (id: string) => {
+    return request({
+        url: MAPPING_PATH + '/getDeviceDetailData?id=' + id,
+        method: 'POST'
+    })
+}
+
+
+/**
+ * 查询监测点详细信息
+ */
+export const getLineDetailData = (id: string) => {
+    return request({
+        url: MAPPING_PATH + '/getLineDetailData?id=' + id,
+        method: 'POST'
+    })
+}

src/utils/constantRequest.ts

@@ -8,4 +8,7 @@ export const PROCESS_BOOT = '/process-boot'
 export const BPM_BOOT = '/bpm-boot'
 
 //冀北技术监督
-export const SUPERVISION_BOOT = '/supervision-boot'
+export const SUPERVISION_BOOT = '/supervision-boot'
+
+//终端模块
+export const DEVICE_BOOT = '/device-boot'

src/views/pqs/supervise/retire/detail.vue

@@ -1,37 +1,42 @@
 <template>
-    <!--工作流view的路径：/pqs/supervise/retire/detail-->
-    <div class='default-main'>
-        <!--        <h1>详细信息回显</h1>-->
-        <el-descriptions :column='2' border>
-            <el-descriptions-item label='供电公司'>
-                {{ detailData.gdName }}
-            </el-descriptions-item>
-            <el-descriptions-item label='变电站'>
-                {{ detailData.subName }}
-            </el-descriptions-item>
-            <template v-if='detailData.deviceType == 1'>
-                <el-descriptions-item label='设备名称'>
-                    {{ detailData.deviceName }}
-                </el-descriptions-item>
-            </template>
-            <template v-else>
-                <el-descriptions-item label='母线'>
-                    {{ detailData.volName }}
-                </el-descriptions-item>
-                <el-descriptions-item label='监测点'>
-                    {{ detailData.deviceName }}
-                </el-descriptions-item>
-            </template>
-            <el-descriptions-item label='运行状态'>
-                <el-tag :type='getDeviceStatusType(detailData.deviceStatus)'>
-                    {{ getDeviceStatus(detailData.deviceStatus) }}
-                </el-tag>
-            </el-descriptions-item>
-            <el-descriptions-item label='退役原因'>
-                {{ detailData.propertyNo }}
-            </el-descriptions-item>
-        </el-descriptions>
-    </div>
+  <!--工作流view的路径：/pqs/supervise/retire/detail-->
+  <div class='default-main'>
+    <!--        <h1>详细信息回显</h1>-->
+    <el-descriptions :column='2' border>
+      <el-descriptions-item label='供电公司'>
+        {{ detailData.gdName }}
+      </el-descriptions-item>
+      <el-descriptions-item label='变电站'>
+        {{ detailData.subName }}
+      </el-descriptions-item>
+      <template v-if='detailData.deviceType == 1'>
+        <el-descriptions-item label='设备名称' :span='2'>
+          {{ detailData.deviceName }}
+        </el-descriptions-item>
+      </template>
+      <template v-else>
+        <el-descriptions-item label='母线'>
+          {{ detailData.volName }}
+        </el-descriptions-item>
+        <el-descriptions-item label='监测点'>
+          {{ detailData.deviceName }}
+        </el-descriptions-item>
+      </template>
+      <el-descriptions-item label='当前状态'>
+        <el-tag :type='getDeviceStatusType(detailData.deviceStatus)'>
+          {{ getDeviceStatus(detailData.deviceStatus) }}
+        </el-tag>
+      </el-descriptions-item>
+      <el-descriptions-item label='变更状态' >
+        <el-tag :type='getDeviceStatusType(detailData.devStatus)'>
+          {{ getDeviceStatus(detailData.devStatus) }}
+        </el-tag>
+      </el-descriptions-item>
+      <el-descriptions-item :span='2' label='变更原因'>
+        {{ detailData.propertyNo }}
+      </el-descriptions-item>
+    </el-descriptions>
+  </div>
 </template>
 <script setup lang='ts'>
 import { onMounted, ref } from 'vue'
@@ -43,66 +48,65 @@ defineOptions({ name: 'QuitRunningDeviceDetail' })
 const { query } = useRoute() // 查询参数
 
 const props = defineProps({
-    id: propTypes.string.def(undefined)
+  id: propTypes.string.def(undefined)
 })
 const detailLoading = ref(false) // 表单的加载中
 const detailData = ref({}) // 详情数据
 const queryId = query.id// 从 URL 传递过来的 id 编号
 const getDeviceStatus = (status: number) => {
-    if (status === 0) {
-        return '运行'
-    }
-    if (status === 1) {
-        return '检修'
-    }
-    if (status === 2) {
-        return '停运'
-    }
-    if (status === 3) {
-        return '调试'
-    }
-    if (status === 4) {
-        return '退运'
-    }
+  if (status === 0) {
     return '运行'
+  }
+  if (status === 1) {
+    return '检修'
+  }
+  if (status === 2) {
+    return '停运'
+  }
+  if (status === 3) {
+    return '调试'
+  }
+  if (status === 4) {
+    return '退运'
+  }
+  return '运行'
 }
 
 const getDeviceStatusType = (status: number) => {
-    if (status === 0) {
-        return 'success'
-    }
-    if (status === 1) {
-        return 'warning'
-    }
-    if (status === 2) {
-        return 'danger'
-    }
-    if (status === 3) {
-        return 'warning'
-    }
-    if (status === 4) {
-        return 'info'
-    }
+  if (status === 0) {
     return 'success'
+  }
+  if (status === 1) {
+    return 'warning'
+  }
+  if (status === 2) {
+    return 'danger'
+  }
+  if (status === 3) {
+    return 'warning'
+  }
+  if (status === 4) {
+    return 'info'
+  }
+  return 'success'
 }
 
 /** 获得数据 */
 const getInfo = async () => {
-    detailLoading.value = true
-    try {
-
-        await getRunningDeviceById(props.id || queryId).then(res => {
-            detailData.value = res.data
-        })
-    } finally {
-        detailLoading.value = false
-    }
+  detailLoading.value = true
+  try {
+    await getRunningDeviceById(props.id || queryId).then(res => {
+      detailData.value = res.data
+    })
+  } finally {
+    detailLoading.value = false
+  }
 }
 defineExpose({ open: getInfo }) // 提供 open 方法，用于打开弹窗
 
 /** 初始化 **/
 onMounted(() => {
-    getInfo()
+  getInfo()
 })
 
 </script>

src/views/pqs/supervise/retire/deviceQuitPopup.vue

@@ -1,169 +1,161 @@
 <template>
-    <el-dialog
-        draggable
-        class="cn-operate-dialog"
-        v-model="dialogVisible"
-        :title="title"
-        width="450px"
-    >
-        <el-scrollbar>
-            <el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
-                <!-- <el-form-item label="设备类型" prop="deviceType">
-                    <el-radio-group v-model="form.deviceType"  :disabled="title == '监测点退运'" @change="changeType">
-                        <el-radio border label="1">监测装置</el-radio>
-                        <el-radio border label="2">监测点</el-radio>
-                    </el-radio-group>
-                </el-form-item> -->
+  <el-dialog
+      draggable
+      class='cn-operate-dialog'
+      v-model='dialogVisible'
+      :title='title'
+      width='450px'
+      top='20vh'
+  >
+    <el-scrollbar>
+      <el-form :inline='false' :model='form' label-width='120px' :rules='rules' ref='formRef'>
+        <el-form-item label='终端' prop='deviceId'>
+          <el-tree-select
+              v-model='form.deviceId'
+              :data='data'
+              filterable
+              :default-expand-all='true'
+              style='width: 100%'
+              @change='changeDevStatus'
+              clearable
+          />
+        </el-form-item>
 
-                <el-form-item label="设备" prop="deviceId">
-                    <el-tree-select
-                        v-model="form.deviceId"
-                        :data="data"
-                        filterable
-                        :default-expand-all="true"
-                        style="width: 100%"
-                        clearable
-                    />
-                </el-form-item>
+        <el-form-item label='状态选择:' prop='devStatus'>
+          <el-select v-model='form.devStatus' placeholder='请选择终端状态' clearable class='select'>
+            <el-option
+                v-for='item in devStatusList'
+                :key='item.value'
+                :label='item.name'
+                :value='item.value'
+            ></el-option>
+          </el-select>
+        </el-form-item>
 
-                <el-form-item label="退役原因" prop="propertyNo">
-                    <!-- <el-input
-                        v-model='form.propertyNo'
-                        clearable
-                        placeholder='请输入退役原因'
-                    /> -->
-                    <el-input
-                        type="textarea"
-                        clearable
-                        :autosize="{ minRows: 2, maxRows: 4 }"
-                        placeholder="请输入退役原因"
-                        v-model="form.propertyNo"
-                    ></el-input>
-                </el-form-item>
-            </el-form>
-        </el-scrollbar>
+        <el-form-item label='变更原因' prop='propertyNo'>
+          <el-input
+              type='textarea'
+              clearable
+              :autosize='{ minRows: 2, maxRows: 4 }'
+              placeholder='请输入变更原因'
+              v-model='form.propertyNo'
+          ></el-input>
+        </el-form-item>
+      </el-form>
+    </el-scrollbar>
 
-        <template #footer>
-            <span class="dialog-footer">
-                <el-button @click="dialogVisible = false">取消</el-button>
-                <el-button type="primary" @click="submit">确认</el-button>
+    <template #footer>
+            <span class='dialog-footer'>
+                <el-button @click='dialogVisible = false'>取消</el-button>
+                <el-button type='primary' @click='submit'>确认</el-button>
             </span>
-        </template>
-    </el-dialog>
+    </template>
+  </el-dialog>
 </template>
-<script lang="ts" setup>
-import { ref, inject, reactive, nextTick } from 'vue'
+<script lang='ts' setup>
+import { ref, inject } from 'vue'
 import { ElMessage } from 'element-plus'
 import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
 import { getTerminalSelectTree } from '@/api/device-boot/Business'
 import { addRunningDevice, quitRunningDeviceUpdate } from '@/api/supervision-boot/device/quitRunningDev'
+import { getDeviceDetailData } from '@/api/device-boot/line'
 
+
+const devStatusList = ref([
+  { 'name': '运行', 'value': '0' },
+  { 'name': '检修', 'value': '1' },
+  { 'name': '退运', 'value': '4' }
+])
 //下拉数据源
 const sourceData = ref()
 const deviceList = ref()
-const lineList = ref()
 const data = ref()
 const title = ref('')
 const tableStore = inject('tableStore') as TableStore
 const formRef = ref()
 
 const dialogVisible = ref(false)
+
 // 注意不要和表单ref的命名冲突
 const form = ref({
-    id: '',
-    deviceId: '',
-    deviceType: '1',
-    propertyNo: ''
+  id: '',
+  deviceId: '',
+  deviceType: '1',
+  devOriginalStatus: '0',
+  devStatus: '0',
+  propertyNo: ''
 })
 
 //form表单校验规则
 const rules = {
-    deviceId: [{ required: true, message: '设备不能为空', trigger: 'change' }],
-    deviceType: [{ required: true, message: '设备类型不能为空', trigger: 'change' }],
-    propertyNo: [{ required: true, message: '请输入退役原因', trigger: 'blur' }]
+  deviceId: [{ required: true, message: '终端不能为空', trigger: 'change' }],
+  devStatus: [{ required: true, message: '状态不能为空', trigger: 'change' }],
+  propertyNo: [{ required: true, message: '请输入退役原因', trigger: 'blur' }]
 }
 const resetForm = () => {
-    if (formRef.value) {
-        formRef.value.resetFields()
-    }
+  if (formRef.value) {
+    formRef.value.resetFields()
+  }
 }
 
 const open = async (text: string, tempData?: any) => {
-    title.value = text
-    if (tempData) {
-        if (tempData.deviceType == 1) {
-            //先加载装置数据并赋值
-            //终端
-            await getTerminalSelectTree(4).then(res => {
-                deviceList.value = res.data
-            })
-            //监测点
-            getTerminalSelectTree(6).then(res => {
-                lineList.value = res.data
-            })
-            sourceData.value = deviceList.value
-            data.value = deviceList.value
-        } else {
-            //先加载监测点数据并赋值
-            //终端
-            getTerminalSelectTree(4).then(res => {
-                deviceList.value = res.data
-            })
-            //监测点
-            await getTerminalSelectTree(6).then(res => {
-                lineList.value = res.data
-            })
-            sourceData.value = lineList.value
-            data.value = lineList.value
-        }
-        // 表单赋值
-        for (let key in form.value) {
-            form.value[key] = tempData[key]
-        }
-        form.value.deviceType = form.value.deviceType + ''
-    } else {
-        //终端
-        await getTerminalSelectTree(4).then(res => {
-            deviceList.value = res.data
-        })
-        //监测点
-        await getTerminalSelectTree(6).then(res => {
-            lineList.value = res.data
-        })
-        sourceData.value = deviceList.value
-        data.value = deviceList.value
-        resetForm()
-        // 在此处恢复默认表单
-        for (let key in form.value) {
-            form.value[key] = ''
-        }
-        form.value.deviceType = '1'
+  title.value = text
+  //终端
+  await getTerminalSelectTree(4).then(res => {
+    deviceList.value = res.data
+  })
+  sourceData.value = deviceList.value
+  data.value = deviceList.value
+  if (tempData) {
+    // 表单赋值
+    for (let key in form.value) {
+      form.value[key] = tempData[key]
     }
-    form.value.deviceType = text == '监测点退运' ? '2' : '1'
-    changeType(form.value.deviceType)
-    dialogVisible.value = true
+    form.value.deviceType = form.value.deviceType + ''
+  } else {
+    resetForm()
+    // 在此处恢复默认表单
+    for (let key in form.value) {
+      form.value[key] = ''
+    }
+    form.value.deviceType = '1'
+  }
+  form.value.deviceType = '1'
+  form.value.devStatus = '0'
+  changeType(form.value.deviceType)
+  dialogVisible.value = true
 }
 
 /**
  * 提交用户表单数据
  */
 const submit = () => {
-    formRef.value.validate(async (valid: any) => {
-        if (valid) {
-            if (form.value.id) {
-                await quitRunningDeviceUpdate(form.value)
-                ElMessage.success('重新发起成功')
-                tableStore.index()
-                dialogVisible.value = false
-            } else {
-                await addRunningDevice(form.value)
-                //查询进线数据，避免一直处于loading状态
-                ElMessage.success('申请成功')
-                tableStore.index()
-                dialogVisible.value = false
-            }
+  formRef.value.validate(async (valid: any) => {
+    if (valid) {
+      if (form.value.devOriginalStatus == form.value.devStatus) {
+        if (form.value.devOriginalStatus == '0') {
+          ElMessage.warning('终端当前状态就是运行，无需变更!')
+        } else if (form.value.devOriginalStatus == '1') {
+          ElMessage.warning('终端当前状态就是检修，无需变更!')
+        } else {
+          ElMessage.warning('终端当前状态就是退运，无需变更!')
         }
-    })
+      } else {
+        if (form.value.id) {
+          await quitRunningDeviceUpdate(form.value)
+          ElMessage.success('重新发起成功')
+          tableStore.index()
+          dialogVisible.value = false
+        } else {
+          await addRunningDevice(form.value)
+          //查询进线数据，避免一直处于loading状态
+          ElMessage.success('申请成功')
+          tableStore.index()
+          dialogVisible.value = false
+        }
+      }
+    }
+  })
 }
 
 /**
@@ -171,13 +163,16 @@ const submit = () => {
  */
 
 const changeType = (event: any) => {
-    if (event == 1) {
-        sourceData.value = deviceList.value
-    } else {
-        sourceData.value = lineList.value
-    }
-    form.value.deviceId = ''
-    data.value = sourceData.value
+  sourceData.value = deviceList.value
+  form.value.deviceId = ''
+  data.value = sourceData.value
+}
+
+const changeDevStatus = async (event: any) => {
+  await getDeviceDetailData(event).then(res => {
+    //给当前设备赋值初始运行状态
+    form.value.devOriginalStatus = res.data.runFlag
+  })
 }
 
 defineExpose({ open })
@@ -185,10 +180,10 @@ defineExpose({ open })
 
 <style scoped>
 .el-upload-list__item {
-    transition: none !important;
+  transition: none !important;
 }
 
 .el-select {
-    min-width: 180px;
+  min-width: 180px;
 }
 </style>

src/views/pqs/supervise/retire/index.vue

@@ -1,38 +1,39 @@
 <template>
-    <div class="default-main">
-        <el-tabs v-model="activeName" type="border-card">
-            <el-tab-pane label="终端状态管理" name="0">
-                <terminal v-if="activeName == '0'" />
-            </el-tab-pane>
-            <el-tab-pane label="监测点退运" name="1">
-                <monitor v-if="activeName == '1'" />
-            </el-tab-pane>
-        </el-tabs>
-    </div>
+  <div class='default-main'>
+    <el-tabs v-model='activeName' type='border-card'>
+      <el-tab-pane label='终端状态管理' name='0'>
+        <terminal v-if="activeName == '0'" />
+      </el-tab-pane>
+      <el-tab-pane label='监测点退运' name='1'>
+        <monitor v-if="activeName == '1'" />
+      </el-tab-pane>
+    </el-tabs>
+  </div>
 </template>
 
-<script setup lang="ts">
-import { onMounted, reactive, ref, provide } from 'vue'
+<script setup lang='ts'>
+import { ref } from 'vue'
 import { mainHeight } from '@/utils/layout'
 import terminal from './terminal.vue'
 import monitor from './monitor.vue'
 
 defineOptions({
-    name: 'supervision/retire'
+  name: 'supervision/retire'
 })
-const activeName = ref('1')
+const activeName = ref('0')
 
 
 const layout = mainHeight(63) as any
 </script>
 
-<style lang="scss" scoped>
+<style lang='scss' scoped>
 .bars_w {
-    width: 100%;
-    height: 500px;
+  width: 100%;
+  height: 500px;
 }
+
 :deep(.el-tabs__content) {
-    height: v-bind('layout.height');
-    overflow-y: auto;
+  height: v-bind('layout.height');
+  overflow-y: auto;
 }
 </style>

src/views/pqs/supervise/retire/monitor.vue

@@ -1,219 +1,189 @@
 <!--待办事项列表-->
 <template>
-    <div>
-        <TableHeader date-picker>
-            <template v-slot:select>
-                <!--        <el-form-item label='任务名称'>-->
-                <!--          <el-input-->
-                <!--              v-model='tableStore.table.params.searchValue'-->
-                <!--              clearable-->
-                <!--              placeholder='请输入任务名称'-->
-                <!--          />-->
-                <!--        </el-form-item>-->
-            </template>
-            <template #operation>
-                <el-button icon="el-icon-Plus" type="primary" @click="add">新增</el-button>
-            </template>
-        </TableHeader>
-        <!--表格-->
-        <Table ref="tableRef"></Table>
-        <!--弹框-->
-        <device-quit-popup ref="deviceQuitPopup" />
-    </div>
+  <div class='default-main'>
+    <TableHeader date-picker>
+      <template v-slot:select>
+      </template>
+      <template #operation>
+        <el-button icon='el-icon-Plus' type='primary' @click='add'>新增</el-button>
+      </template>
+    </TableHeader>
+    <!--表格-->
+    <Table ref='tableRef'></Table>
+    <!--弹框-->
+    <monitor-quit-popup ref='deviceQuitPopup' />
+  </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang='ts'>
 import TableStore from '@/utils/tableStore'
 import Table from '@/components/table/index.vue'
 import TableHeader from '@/components/table/header/index.vue'
-import { onMounted, provide, ref, watch } from 'vue'
+import { onMounted, provide, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import DeviceQuitPopup from '@/views/pqs/supervise/retire/deviceQuitPopup.vue'
+import MonitorQuitPopup from '@/views/pqs/supervise/retire/monitorQuitPopup.vue'
 import { ElMessage } from 'element-plus'
 import { ElMessageBox } from 'element-plus/es'
 import { cancelQuitRunningDevice } from '@/api/supervision-boot/device/quitRunningDev'
 
 defineOptions({
-    name: 'supervision/retire'
+  name: 'supervision/retire'
 })
-const { push, options, currentRoute } = useRouter()
+const { push } = useRouter()
 const deviceQuitPopup = ref()
-const flag = ref(false)
 
 const tableStore = new TableStore({
-    url: '/supervision-boot/quitRunningDevice/list',
-    method: 'POST',
-    publicHeight: 65,
-    column: [
-        { title: '序号', type: 'seq', width: 80 },
-        {
-            title: '设备类型',
-            field: 'deviceType',
-            minWidth: 130,
-            render: 'tag',
-            custom: {
-                1: 'primary',
-                2: 'primary'
-            },
-            replaceValue: {
-                1: '装置',
-                2: '监测点'
-            }
-        },
-        { title: '供电公司', field: 'gdName', minWidth: 130 },
-        { title: '变电站', field: 'subName', minWidth: 130 },
-        { title: '设备名称', field: 'deviceName', minWidth: 130 },
-        { title: '退役原因', field: 'propertyNo', minWidth: 130 },
-        {
-            title: '设备状态',
-            field: 'deviceStatus',
-            minWidth: 130,
-            render: 'tag',
-            custom: {
-                0: 'success',
-                1: 'warning',
-                2: 'danger',
-                3: 'warning',
-                4: 'info'
-            },
-            replaceValue: {
-                0: '运行',
-                1: '检修',
-                2: '停运',
-                3: '调试',
-                4: '退运'
-            }
-        },
-        {
-            field: 'status',
-            title: '审核状态',
-            minWidth: 100,
-            render: 'tag',
-            custom: {
-                1: 'primary',
-                2: 'success',
-                3: 'danger',
-                4: 'warning'
-            },
-            replaceValue: {
-                1: '审批中',
-                2: '审批通过',
-                3: '审批不通过',
-                4: '已取消'
-            }
-        },
-        { field: 'createTime', title: '开始时间', minWidth: 170 },
+  url: '/supervision-boot/quitRunningDevice/list',
+  method: 'POST',
+  column: [
+    {
+      field: 'index',
+      title: '序号',
+      width: '60',
+      formatter: (row: any) => {
+        return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
+      }
+    },
+    { title: '供电公司', field: 'gdName', minWidth: 130 },
+    { title: '变电站', field: 'subName', minWidth: 160 },
+    { title: '监测点', field: 'deviceName', minWidth: 200 },
+    { title: '退运原因', field: 'propertyNo', minWidth: 160 },
+    {
+      title: '当前状态', field: 'devOriginalStatus', minWidth: 130,
+      render: 'tag',
+      custom: {
+        0: 'success',
+        1: 'warning',
+        2: 'danger',
+        3: 'warning',
+        4: 'info'
+      },
+      replaceValue: {
+        0: '运行',
+        1: '检修',
+        2: '停运',
+        3: '调试',
+        4: '退运'
+      }
+    },
+    {
+      field: 'status', title: '审核状态', minWidth: 100,
+      render: 'tag',
+      custom: {
+        1: 'primary',
+        2: 'success',
+        3: 'danger',
+        4: 'warning'
+      },
+      replaceValue: {
+        1: '审批中',
+        2: '审批通过',
+        3: '审批不通过',
+        4: '已取消'
+      }
+    },
+    { field: 'createTime', title: '开始时间', minWidth: 170 },
 
+    {
+      title: '操作',
+      align: 'center',
+      minWidth: '150',
+      fixed: 'right',
+      render: 'buttons',
+      buttons: [
         {
-            title: '操作',
-            align: 'center',
-            minWidth: '150',
-            fixed: 'right',
-            render: 'buttons',
-            buttons: [
-                {
-                    name: 'productSetting',
-                    title: '流程详情',
-                    type: 'primary',
-                    icon: 'el-icon-EditPen',
-                    render: 'basicButton',
-                    click: row => {
-                        flag.value = true
-                        handleAudit(row.processInstanceId, row.historyInstanceId)
-                    }
-                },
-                {
-                    name: 'edit',
-                    title: '重新发起',
-                    type: 'warning',
-                    icon: 'el-icon-Open',
-                    render: 'basicButton',
-                    disabled: row => {
-                        return row.status !== 3
-                    },
-                    click: row => {
-                        deviceQuitPopup.value.open('重新发起退运', row)
-                    }
-                },
-                {
-                    name: 'cancel',
-                    title: '取消',
-                    type: 'danger',
-                    icon: 'el-icon-Open',
-                    render: 'basicButton',
-                    disabled: row => {
-                        return row.status == 3 || row.status == 2 || row.status == 4
-                    },
-                    click: row => {
-                        cancelLeave(row)
-                    }
-                }
-            ]
-        }
-    ],
-    beforeSearchFun: () => {
-        for (let key in tableStore.table.params) {
-            if (tableStore.table.params[key] === '') {
-                delete tableStore.table.params[key]
-            }
+          name: 'productSetting',
+          title: '流程详情',
+          type: 'primary',
+          icon: 'el-icon-EditPen',
+          render: 'basicButton',
+          click: row => {
+            handleAudit(row.processInstanceId, row.historyInstanceId)
+          }
+        },
+        {
+          name: 'edit',
+          title: '重新发起',
+          type: 'warning',
+          icon: 'el-icon-Open',
+          render: 'basicButton',
+          disabled: row => {
+            return row.status !== 3
+          },
+          click: row => {
+            deviceQuitPopup.value.open('重新发起退运', row)
+          }
+        },
+        {
+          name: 'cancel',
+          title: '取消',
+          type: 'danger',
+          icon: 'el-icon-Open',
+          render: 'basicButton',
+          disabled: row => {
+            return row.status == 3 || row.status == 2 || row.status == 4
+          },
+          click: row => {
+            cancelLeave(row)
+          }
         }
+      ]
     }
+  ],
+  beforeSearchFun: () => {
+    for (let key in tableStore.table.params) {
+      if (tableStore.table.params[key] === '') {
+        delete tableStore.table.params[key]
+      }
+
+    }
+    tableStore.table.params.deviceType = 2
+  }
 })
 
 onMounted(() => {
-    // 加载数据
-    tableStore.index()
+  // 加载数据
+  tableStore.index()
 })
 tableStore.table.params.searchValue = ''
 provide('tableStore', tableStore)
 
 //新增退运设备信息
 const add = () => {
-    deviceQuitPopup.value.open('监测点退运')
+  deviceQuitPopup.value.open('监测点退运')
 }
 
 /** 流程实例详情 */
 const handleAudit = (instanceId: string, historyInstanceId: string) => {
-    push({
-        name: 'BpmProcessInstanceDetail',
-        state: {
-            id: instanceId,
-            historyInstanceId
-        }
-    })
+  push({
+    name: 'BpmProcessInstanceDetail',
+    state: {
+      id: instanceId,
+      historyInstanceId
+    }
+  })
 }
 
 /**取消流程操作*/
 const cancelLeave = async (row: any) => {
-    // 二次确认
-    const { value } = await ElMessageBox.prompt('请输入取消原因', '取消流程', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空，且非空格
-        inputErrorMessage: '取消原因不能为空'
-    })
-    // 发起取消
-    let data = {
-        id: row.id,
-        processInstanceId: row.processInstanceId,
-        reason: value
-    }
-    await cancelQuitRunningDevice(data)
-    ElMessage.success('取消成功')
-    // 加载数据
-    tableStore.index()
+  // 二次确认
+  const { value } = await ElMessageBox.prompt('请输入取消原因', '取消流程', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空，且非空格
+    inputErrorMessage: '取消原因不能为空'
+  })
+  // 发起取消
+  let data = {
+    id: row.id,
+    processInstanceId: row.processInstanceId,
+    reason: value
+  }
+  await cancelQuitRunningDevice(data)
+  ElMessage.success('取消成功')
+  // 加载数据
+  tableStore.index()
 }
 
-watch(
-    () => currentRoute.value.path,
-    () => {
-        if (flag.value && options.history.state.forward?.split('/')[1] == 'bpm') {
-            tableStore.index()
-            flag.value = false
-        }
-    },
-    {
-        deep: true
-    }
-)
+
 </script>

src/views/pqs/supervise/retire/monitorQuitPopup.vue

@@ -0,0 +1,189 @@
+<template>
+  <el-dialog
+      draggable
+      class='cn-operate-dialog'
+      v-model='dialogVisible'
+      :title='title'
+      width='450px'
+      top='20vh'
+  >
+    <el-scrollbar>
+      <el-form :inline='false' :model='form' label-width='120px' :rules='rules' ref='formRef'>
+        <!-- <el-form-item label="设备类型" prop="deviceType">
+            <el-radio-group v-model="form.deviceType"  :disabled="title == '监测点退运'" @change="changeType">
+                <el-radio border label="1">监测装置</el-radio>
+                <el-radio border label="2">监测点</el-radio>
+            </el-radio-group>
+        </el-form-item> -->
+
+        <el-form-item label='监测点' prop='deviceId'>
+          <el-tree-select
+              v-model='form.deviceId'
+              :data='data'
+              filterable
+              :default-expand-all='true'
+              style='width: 100%'
+              @change='changeDevStatus'
+              clearable
+          />
+        </el-form-item>
+
+        <el-form-item label='退运原因' prop='propertyNo'>
+          <!-- <el-input
+              v-model='form.propertyNo'
+              clearable
+              placeholder='请输入退役原因'
+          /> -->
+          <el-input
+              type='textarea'
+              clearable
+              :autosize='{ minRows: 2, maxRows: 4 }'
+              placeholder='请输入退运原因'
+              v-model='form.propertyNo'
+          ></el-input>
+        </el-form-item>
+      </el-form>
+    </el-scrollbar>
+
+    <template #footer>
+            <span class='dialog-footer'>
+                <el-button @click='dialogVisible = false'>取消</el-button>
+                <el-button type='primary' @click='submit'>确认</el-button>
+            </span>
+    </template>
+  </el-dialog>
+</template>
+<script lang='ts' setup>
+import { ref, inject } from 'vue'
+import { ElMessage } from 'element-plus'
+import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
+import { getTerminalSelectTree } from '@/api/device-boot/Business'
+import { addRunningDevice, quitRunningDeviceUpdate } from '@/api/supervision-boot/device/quitRunningDev'
+import { getLineDetailData } from '@/api/device-boot/line'
+
+//下拉数据源
+const sourceData = ref()
+const lineList = ref()
+const data = ref()
+const title = ref('')
+const tableStore = inject('tableStore') as TableStore
+const formRef = ref()
+
+const dialogVisible = ref(false)
+// 注意不要和表单ref的命名冲突
+const form = ref({
+  id: '',
+  deviceId: '',
+  deviceType: '2',
+  devOriginalStatus: '0',
+  propertyNo: ''
+})
+
+//form表单校验规则
+const rules = {
+  deviceId: [{ required: true, message: '设备不能为空', trigger: 'change' }],
+  propertyNo: [{ required: true, message: '请输入退役原因', trigger: 'blur' }]
+}
+const resetForm = () => {
+  if (formRef.value) {
+    formRef.value.resetFields()
+  }
+}
+
+const open = async (text: string, tempData?: any) => {
+  title.value = text
+  //监测点
+  await getTerminalSelectTree(6).then(res => {
+    lineList.value = res.data
+  })
+  sourceData.value = lineList.value
+  data.value = lineList.value
+  if (tempData) {
+    // 表单赋值
+    for (let key in form.value) {
+      form.value[key] = tempData[key]
+    }
+    form.value.deviceType = form.value.deviceType + ''
+  } else {
+    resetForm()
+    // 在此处恢复默认表单
+    for (let key in form.value) {
+      form.value[key] = ''
+    }
+    form.value.deviceType = '1'
+  }
+  form.value.deviceType = '2'
+  changeType(form.value.deviceType)
+  dialogVisible.value = true
+}
+
+/**
+ * 提交用户表单数据
+ */
+const submit = () => {
+  formRef.value.validate(async (valid: any) => {
+    if (valid) {
+      if (form.value.devOriginalStatus == '4') {
+        ElMessage.warning('终端当前状态就是退运，无需变更!')
+      } else {
+        if (form.value.id) {
+          await quitRunningDeviceUpdate(form.value)
+          ElMessage.success('重新发起成功')
+          tableStore.index()
+          dialogVisible.value = false
+        } else {
+          await addRunningDevice(form.value)
+          //查询进线数据，避免一直处于loading状态
+          ElMessage.success('申请成功')
+          tableStore.index()
+          dialogVisible.value = false
+        }
+      }
+    }
+  })
+}
+
+/**
+ * 设备类型切换
+ */
+
+const changeType = (event: any) => {
+  sourceData.value = lineList.value
+  form.value.deviceId = ''
+  data.value = sourceData.value
+}
+const changeDevStatus = async (event: any) => {
+  await getLineDetailData(event).then(res => {
+    //给当前设备赋值初始运行状态
+    switch (res.data.runFlag) {
+      case '投运':
+        form.value.devOriginalStatus = '0'
+        break
+      case '检修':
+        form.value.devOriginalStatus = '1'
+        break
+      case '停运':
+        form.value.devOriginalStatus = '2'
+        break
+      case '调试':
+        form.value.devOriginalStatus = '3'
+        break
+      default:
+        form.value.devOriginalStatus = '4'
+        break
+    }
+  })
+}
+
+defineExpose({ open })
+</script>
+
+<style scoped>
+.el-upload-list__item {
+  transition: none !important;
+}
+
+.el-select {
+  min-width: 180px;
+}
+</style>

src/views/pqs/supervise/retire/terminal.vue

@@ -1,32 +1,33 @@
 <!--待办事项列表-->
 <template>
-    <div>
-        <TableHeader date-picker>
-            <template v-slot:select>
-                <!--        <el-form-item label='任务名称'>-->
-                <!--          <el-input-->
-                <!--              v-model='tableStore.table.params.searchValue'-->
-                <!--              clearable-->
-                <!--              placeholder='请输入任务名称'-->
-                <!--          />-->
-                <!--        </el-form-item>-->
-            </template>
-            <template #operation>
-                <el-button icon="el-icon-Plus" type="primary" @click="add">新增</el-button>
-            </template>
-        </TableHeader>
-        <!--表格-->
-        <Table ref="tableRef"></Table>
-        <!--弹框-->
-        <device-quit-popup ref="deviceQuitPopup" />
-    </div>
+  <div class='default-main'>
+    <TableHeader date-picker>
+      <template v-slot:select>
+        <!--        <el-form-item label='任务名称'>-->
+        <!--          <el-input-->
+        <!--              v-model='tableStore.table.params.searchValue'-->
+        <!--              clearable-->
+        <!--              placeholder='请输入任务名称'-->
+        <!--          />-->
+        <!--        </el-form-item>-->
+      </template>
+      <template #operation>
+        <el-button icon='el-icon-Plus' type='primary' @click='add'>新增</el-button>
+      </template>
+    </TableHeader>
+    <!--表格-->
+    <Table ref='tableRef'></Table>
+    <!--弹框-->
+    <device-quit-popup ref='deviceQuitPopup' />
+
+  </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang='ts'>
 import TableStore from '@/utils/tableStore'
 import Table from '@/components/table/index.vue'
 import TableHeader from '@/components/table/header/index.vue'
-import { onMounted, provide, ref, watch } from 'vue'
+import { onMounted, provide, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import DeviceQuitPopup from '@/views/pqs/supervise/retire/deviceQuitPopup.vue'
 import { ElMessage } from 'element-plus'
@@ -34,185 +35,180 @@ import { ElMessageBox } from 'element-plus/es'
 import { cancelQuitRunningDevice } from '@/api/supervision-boot/device/quitRunningDev'
 
 defineOptions({
-    name: 'supervision/retire'
+  name: 'supervision/retire'
 })
-const { push, options, currentRoute } = useRouter()
+const { push } = useRouter()
 const deviceQuitPopup = ref()
-const flag = ref(false)
-const tableStore = new TableStore({
-    url: '/supervision-boot/quitRunningDevice/list',
-    method: 'POST',
-    publicHeight: 65,
-    column: [
-        { title: '序号', type: 'seq', width: 80 },
-        {
-            title: '设备类型',
-            field: 'deviceType',
-            minWidth: 130,
-            render: 'tag',
-            custom: {
-                1: 'primary',
-                2: 'primary'
-            },
-            replaceValue: {
-                1: '装置',
-                2: '监测点'
-            }
-        },
-        { title: '供电公司', field: 'gdName', minWidth: 130 },
-        { title: '变电站', field: 'subName', minWidth: 130 },
-        { title: '设备名称', field: 'deviceName', minWidth: 130 },
-        { title: '退役原因', field: 'propertyNo', minWidth: 130 },
-        {
-            title: '设备状态',
-            field: 'deviceStatus',
-            minWidth: 130,
-            render: 'tag',
-            custom: {
-                0: 'success',
-                1: 'warning',
-                2: 'danger',
-                3: 'warning',
-                4: 'info'
-            },
-            replaceValue: {
-                0: '运行',
-                1: '检修',
-                2: '停运',
-                3: '调试',
-                4: '退运'
-            }
-        },
-        {
-            field: 'status',
-            title: '审核状态',
-            minWidth: 100,
-            render: 'tag',
-            custom: {
-                1: 'primary',
-                2: 'success',
-                3: 'danger',
-                4: 'warning'
-            },
-            replaceValue: {
-                1: '审批中',
-                2: '审批通过',
-                3: '审批不通过',
-                4: '已取消'
-            }
-        },
-        { field: 'createTime', title: '开始时间', minWidth: 170 },
 
+const tableStore = new TableStore({
+  url: '/supervision-boot/quitRunningDevice/list',
+  method: 'POST',
+  column: [
+    {
+      field: 'index',
+      title: '序号',
+      width: '60',
+      formatter: (row: any) => {
+        return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
+      }
+    },
+    { title: '供电公司', field: 'gdName', minWidth: 130 },
+    { title: '变电站', field: 'subName', minWidth: 160 },
+    { title: '终端名称', field: 'deviceName', minWidth: 130 },
+    { title: '变更原因', field: 'propertyNo', minWidth: 160 },
+    {
+      title: '当前状态', field: 'devOriginalStatus', minWidth: 130,
+      render: 'tag',
+      custom: {
+        0: 'success',
+        1: 'warning',
+        2: 'danger',
+        3: 'warning',
+        4: 'info'
+      },
+      replaceValue: {
+        0: '运行',
+        1: '检修',
+        2: '停运',
+        3: '调试',
+        4: '退运'
+      }
+    },
+    {
+      title: '变更状态', field: 'devStatus', minWidth: 130,
+      render: 'tag',
+      custom: {
+        0: 'success',
+        1: 'warning',
+        2: 'danger',
+        3: 'warning',
+        4: 'info'
+      },
+      replaceValue: {
+        0: '运行',
+        1: '检修',
+        2: '停运',
+        3: '调试',
+        4: '退运'
+      }
+    },
+    {
+      field: 'status', title: '审核状态', minWidth: 100,
+      render: 'tag',
+      custom: {
+        1: 'primary',
+        2: 'success',
+        3: 'danger',
+        4: 'warning'
+      },
+      replaceValue: {
+        1: '审批中',
+        2: '审批通过',
+        3: '审批不通过',
+        4: '已取消'
+      }
+    },
+    { field: 'createTime', title: '开始时间', minWidth: 170 },
+
+    {
+      title: '操作',
+      align: 'center',
+      minWidth: '150',
+      fixed: 'right',
+      render: 'buttons',
+      buttons: [
         {
-            title: '操作',
-            align: 'center',
-            minWidth: '150',
-            fixed: 'right',
-            render: 'buttons',
-            buttons: [
-                {
-                    name: 'productSetting',
-                    title: '流程详情',
-                    type: 'primary',
-                    icon: 'el-icon-EditPen',
-                    render: 'basicButton',
-                    click: row => {
-                        flag.value = true
-                        handleAudit(row.processInstanceId, row.historyInstanceId)
-                    }
-                },
-                {
-                    name: 'edit',
-                    title: '重新发起',
-                    type: 'warning',
-                    icon: 'el-icon-Open',
-                    render: 'basicButton',
-                    disabled: row => {
-                        return row.status !== 3
-                    },
-                    click: row => {
-                        deviceQuitPopup.value.open('重新发起退运', row)
-                    }
-                },
-                {
-                    name: 'cancel',
-                    title: '取消',
-                    type: 'danger',
-                    icon: 'el-icon-Open',
-                    render: 'basicButton',
-                    disabled: row => {
-                        return row.status == 3 || row.status == 2 || row.status == 4
-                    },
-                    click: row => {
-                        cancelLeave(row)
-                    }
-                }
-            ]
-        }
-    ],
-    beforeSearchFun: () => {
-        for (let key in tableStore.table.params) {
-            if (tableStore.table.params[key] === '') {
-                delete tableStore.table.params[key]
-            }
+          name: 'productSetting',
+          title: '流程详情',
+          type: 'primary',
+          icon: 'el-icon-EditPen',
+          render: 'basicButton',
+          click: row => {
+            handleAudit(row.processInstanceId, row.historyInstanceId)
+          }
+        },
+        {
+          name: 'edit',
+          title: '重新发起',
+          type: 'warning',
+          icon: 'el-icon-Open',
+          render: 'basicButton',
+          disabled: row => {
+            return row.status !== 3
+          },
+          click: row => {
+            deviceQuitPopup.value.open('重新发起终端状态变更', row)
+          }
+        },
+        {
+          name: 'cancel',
+          title: '取消',
+          type: 'danger',
+          icon: 'el-icon-Open',
+          render: 'basicButton',
+          disabled: row => {
+            return row.status == 3 || row.status == 2 || row.status == 4
+          },
+          click: row => {
+            cancelLeave(row)
+          }
         }
+      ]
     }
+  ],
+  beforeSearchFun: () => {
+    for (let key in tableStore.table.params) {
+      if (tableStore.table.params[key] === '') {
+        delete tableStore.table.params[key]
+      }
+    }
+    tableStore.table.params.deviceType = 1
+  }
 })
 
 onMounted(() => {
-    // 加载数据
-    tableStore.index()
+  // 加载数据
+  tableStore.index()
 })
 tableStore.table.params.searchValue = ''
 provide('tableStore', tableStore)
 
 //新增退运设备信息
 const add = () => {
-    deviceQuitPopup.value.open('新增退运')
+  deviceQuitPopup.value.open('新增终端状态变更')
 }
 
 /** 流程实例详情 */
 const handleAudit = (instanceId: string, historyInstanceId: string) => {
-    push({
-        name: 'BpmProcessInstanceDetail',
-        state: {
-            id: instanceId,
-            historyInstanceId
-        }
-    })
+  push({
+    name: 'BpmProcessInstanceDetail',
+    state: {
+      id: instanceId,
+      historyInstanceId
+    }
+  })
 }
 
 /**取消流程操作*/
 const cancelLeave = async (row: any) => {
-    // 二次确认
-    const { value } = await ElMessageBox.prompt('请输入取消原因', '取消流程', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空，且非空格
-        inputErrorMessage: '取消原因不能为空'
-    })
-    // 发起取消
-    let data = {
-        id: row.id,
-        processInstanceId: row.processInstanceId,
-        reason: value
-    }
-    await cancelQuitRunningDevice(data)
-    ElMessage.success('取消成功')
-    // 加载数据
-    tableStore.index()
+  // 二次确认
+  const { value } = await ElMessageBox.prompt('请输入取消原因', '取消流程', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空，且非空格
+    inputErrorMessage: '取消原因不能为空'
+  })
+  // 发起取消
+  let data = {
+    id: row.id,
+    processInstanceId: row.processInstanceId,
+    reason: value
+  }
+  await cancelQuitRunningDevice(data)
+  ElMessage.success('取消成功')
+  // 加载数据
+  tableStore.index()
 }
 
-watch(
-    () => currentRoute.value.path,
-    () => {
-        if (flag.value && options.history.state.forward?.split('/')[1] == 'bpm') {
-            tableStore.index()
-            flag.value = false
-        }
-    },
-    {
-        deep: true
-    }
-)
+
 </script>