设备管理

src/api/base/device.js

@@ -12,21 +12,21 @@ export const queryDeviceListApi = (data) => {
 
 /** 设备类型查询 */
 export const queryDeviceTypeApi = (data) => {
-  return request.get('/base/tbDevice/getDeviceTypeList', {
+  return request.get('/base/tbProDepart/getDataList', {
     params: data
   })
 }
 
 /** 所属边带查询 */
 export const queryBdIdApi = (data) => {
-  return request.get('/base/tbDevice/getBdIdList', {
+  return request.get('/base/tbBdDeviceRecord/list', {
     params: data
   })
 }
 
 /** 预警配置查询 */
 export const queryConfigApi = (data) => {
-  return request.get('/base/tbDevice/getConfigList', {
+  return request.get('/base/tbWarnConfig/list', {
     params: data
   })
 }

src/api/base/edgeDevice.js

@@ -4,7 +4,7 @@
 import request from '@/utils/request'
 /** 边代设备列表查询 */
 export const queryEdgeDeviceListApiTwo = (data) => {
-  return request.get('/base/tbBdRecord/listTwo', {
+  return request.get('/base/tbBdDeviceRecord//getDeviceList', {
     params: data
   })
 }

src/components/TableModelTwo/index.vue

@@ -0,0 +1,539 @@
+<template>
+    <!-- 表格公共组件 -->
+    <div>
+        <!-- 表单搜索 -->
+        <el-form
+            :model="queryParams"
+            ref="queryFormRef"
+            size="small"
+            :inline="true"
+            label-width="100px"
+            v-show="showSearch"
+            :rules="formRules"
+        >
+            <el-form-item
+                v-for="(item, v) in formLabel"
+                :key="v"
+                :label="item.f_label"
+                :prop="item.f_model"
+            >
+                <el-input
+                    v-if="item.f_type === 'ipt'"
+                    v-model="queryParams[item.f_model]"
+                    :placeholder="`请输入${item.f_label}`"
+                    clearable
+                    style="width: 240px"
+                />
+                <el-select
+                    v-if="item.f_type === 'sel'"
+                    v-model="queryParams[item.f_model]"
+                    clearable
+                    filterable
+                    style="width: 240px"
+                    :placeholder="`请选择${item.f_label}`"
+                >
+                    <el-option
+                        v-for="(sel, v) in item.f_selList"
+                        :key="v"
+                        :label="sel.label"
+                        :value="sel.value"
+                    />
+                </el-select>
+                <el-cascader
+                    v-if="item.f_type === 'selCasAdd'"
+                    v-model="queryParams[item.f_model]"
+                    :options="item.f_selList"
+                    :props="item.optionProps"
+                    :show-all-levels="false"
+                    clearable
+                    @change="handleCasAdd($event, item.f_model, cascaderFunc, extraTableProp)"
+                    style="width: 240px"
+                />
+                <el-cascader
+                  v-if="item.f_type === 'selCas'"
+                  v-model="queryParams[item.f_model]"
+                  :options="item.f_selList"
+                  :props="item.optionProps"
+                  :show-all-levels="false"
+                  @change="handleCas($event, item.f_model)"
+                  style="width: 240px"
+                />
+                <el-date-picker
+                    v-if="item.f_type === 'date'"
+                    v-model="queryParams[item.f_model]"
+                    style="width: 240px"
+                    value-format="yyyy-MM-dd"
+                    type="date"
+                />
+                <el-date-picker
+                  v-if="item.f_type === 'dateRange'"
+                  v-model="queryParams[item.f_model]"
+                  style="width: 240px"
+                  type="daterange"
+                  value-format="yyyy-MM-dd"
+                  range-separator="至"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
+                />
+                <el-input-number
+                  v-if="item.f_type === 'num'"
+                  v-model="queryParams[item.f_model]"
+                  :min="0"
+                  style="width: 240px"
+                ></el-input-number>
+            </el-form-item>
+            <el-form-item v-if="showBtnCrews">
+                <el-button
+                    type="primary"
+                    icon="el-icon-search"
+                    size="mini"
+                    @click="handleQuery"
+                    v-if="showSearchBtn"
+                    >查询</el-button
+                >
+                <el-button
+                    type="success"
+                    icon="el-icon-edit"
+                    size="mini"
+                    @click="handleFill"
+                    v-if="!showSearchBtn"
+                    >填充</el-button
+                >
+                <el-button
+                    type="warning"
+                    icon="el-icon-refresh"
+                    size="mini"
+                    @click="resetQuery"
+                    >重置</el-button
+                >
+            </el-form-item>
+        </el-form>
+        <!-- 按钮集群 -->
+        <el-row class="btn-container" >
+            <div class="btn-handler">
+                <slot name="btn" :queryParams="queryParams"></slot>
+            </div>
+            <ToolbarModel
+                :showSearch.sync="showSearch"
+                :indexNumShow.sync="indexNumShow"
+                :selectionShow.sync="selectionShow"
+                :handleShow.sync="handleShow"
+                :columns="columCheckList"
+                @queryTable="getTableList"
+                v-if="showRightTools"
+            />
+        </el-row>
+        <!-- 表格 -->
+
+        <el-table
+            :data="tableList"
+            border
+            ref="tableRef"
+            select-on-indeterminate
+            style="width: 100%"
+            v-loading="loading"
+            @selection-change="handleSelectionChange">
+        >
+            <!-- <el-table-column
+                type="selection"
+                width="45"
+                align="center"
+                v-if="showSel"
+                :selectable="selectable"
+            /> -->
+            <el-table-column
+                width="55"
+                align="center"
+                label="序号"
+                type="index"
+                :index="
+                    indexContinuation(queryParams.pageNum, queryParams.pageSize)
+                "
+                v-if="showIndex"
+            />
+            <el-table-column
+                v-for="(item, v) in tableColumCheckProps"
+                :key="v"
+                :label="item.t_label"
+                :prop="item.t_props"
+                :width="item.t_width"
+                align="center"
+                show-overflow-tooltip
+            >
+                <template slot-scope="scope">
+                    <!-- 判断当前列数据是否需要使用插槽的数据 -->
+                    <template v-if="item.t_slot">
+                        <slot :data="scope.row" :name="item.t_slot"></slot>
+                    </template>
+                    <template v-else>
+                        {{ scope.row[item.t_props] || '-' }}
+                    </template>
+                </template>
+            </el-table-column>
+            <!-- <el-table-column
+                align="center"
+                label="操作"
+                v-if="handleShow && showOperation"
+                :min-width="dynamicWidth"
+            >
+                <template slot-scope="{ row }">
+                    <div class="optionDivRef">
+                        <slot :data="row" name="handle">-</slot>
+                    </div>
+                </template>
+            </el-table-column> -->
+        </el-table>
+
+        <!-- 分页 -->
+        <pagination
+            :total="total"
+            :page.sync="queryParams.pageNum"
+            :limit.sync="queryParams.pageSize"
+            @pagination="getTableList"
+        />
+    </div>
+</template>
+
+<script>
+import ToolbarModel from '../ToolbarModel'
+export default {
+    components: { ToolbarModel },
+    props: {
+        /** 表单查询条件 */
+        formLabel: {
+            type: Array,
+            default: () => [],
+        },
+        /** 列表请求接口 */
+        requestApi: {
+            type: Function,
+            default: () => function () {},
+        },
+        /** 列表配置项 */
+        columnsList: {
+            type: Array,
+            default: () => [],
+        },
+        /** 是否显示选择框 */
+        showSel: {
+            type: Boolean,
+            default: true,
+        },
+        /** 传递参数 */
+        sendParams: {
+          type: Object,
+          default: () => null
+        },
+        sendId: {
+          type: Number,
+          default: () => null
+        },
+        /** 是否显示查询按钮 */
+        showSearchBtn: {
+          type: Boolean,
+          default: true,
+        },
+        showBtnCrews: {
+          type: Boolean,
+          default: true,
+        },
+        cascaderFunc: {
+          type: Function,
+          default: () => null
+        },
+        extraTableProp: {
+          type: Object,
+          default: () => null
+        },
+        showOperation: {
+          type: Boolean,
+          default: true
+        },
+        showRightTools: {
+          type: Boolean,
+          default: true
+        },
+        selectable: {
+          type: Function,
+          default: () => {
+            return true
+          }
+        },
+        selSingle: {
+          type: Boolean,
+          default: false
+        },
+        showIndex: {
+          type: Boolean,
+          default: true
+        }
+    },
+    computed: {
+        /* 根据操作栏控制表头是否显示 */
+        tableColumCheckProps() {
+            return this.columCheckList.filter(e => {
+                return e.checked != false
+            })
+        },
+    },
+    watch: {
+        handleShow: {
+            handler(newValue) {
+                if (!newValue) {
+                    this.dynamicWidth = 0
+                }
+            },
+        },
+        columnsList: {
+            handler(nv, ov) {
+                if(nv !== ov) {
+                    this.columnsList = nv
+                    this.columCheckList = this.columnsList.map(e => {
+                      this.$set(e, 'checked', true)
+                      return e
+                    })
+                }
+            },
+            deep: true
+        }
+      /* sendParams: {
+          handler(nv, ov) {
+            console.log(nv, ov)
+            if(nv !== ov) {
+              Object.assign(this.queryParams, nv)
+              this.getTableList()
+            }
+          },
+          deep: true,
+          immediate: true
+      } */
+    },
+    data() {
+        return {
+            // 表单校验
+            formRules: {
+
+            },
+            loading: false,
+            // 列表接口查询参数
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+            },
+            // 列表数据源
+            tableList: [],
+            // 导出传递数据
+            msgList: undefined,
+            // 列表数据条数
+            total: 0,
+            // 搜索区域是否隐藏
+            showSearch: true,
+            // 是否显示复选框
+            selectionShow: true,
+            // 是否显示序号
+            indexNumShow: true,
+            // 是否显示操作列
+            handleShow: true,
+            // 列表每列 label
+            columCheckList: [],
+            // 操作列最小宽度
+            dynamicWidth: 0,
+            idCount: 1
+        }
+    },
+
+    created() {
+        this.columCheckList = this.columnsList.map(e => {
+            this.$set(e, 'checked', true)
+            return e
+        })
+        /* 生成查询参数 */
+        this.formLabel.map(e => {
+            this.$set(this.queryParams, e.f_model, '')
+            // 设置表单必填
+            if(e.f_rule) {
+              this.$set(this.formRules, e.f_rule, [
+                {
+                  required: true,
+                  message: `请填写${e.f_label}`,
+                  trigger: 'blur'
+                }
+              ])
+            }
+        })
+        if(this.sendParams !== null) {
+          Object.assign(this.queryParams, this.sendParams)
+          /* for(let key in this.sendParams) {
+            console.log(key, this.sendParams[key])
+            this.$set(this.queryParams, key, this.sendParams[key])
+          } */
+        }
+        if(this.sendId !== null) this.queryParams.id = this.sendId
+        this.getTableList()
+    },
+    updated() {
+        // 更新时重新计算操作列需要的最小宽度 确保展示无误
+        this.dynamicWidth = this.getOperatorWidth()
+    },
+    methods: {
+        /** 获取列表数据 */
+        async getTableList() {
+          if(this.queryParams.time && this.queryParams.time.length !== 0) {
+            this.queryParams.startTime = this.queryParams.time[0]
+            this.queryParams.endTime = this.queryParams.time[1]
+            delete this.queryParams.time
+          }
+          console.log(this.queryParams)
+          if(Object.keys(this.formRules).length !== 0) {
+            this.$refs.queryFormRef.validate(async valid => {
+              if (valid) {
+                this.loading = true
+                const res = await this.requestApi(this.queryParams)
+                this.loading = false
+                console.log(res, '列表数据')
+                if (res.code === 200) {
+                  if (res.data) {
+                    this.tableList = res.data.rows || res.data
+                    this.total = res.data.total || res.data.length
+                  } else {
+                    this.tableList = res.rows || res.data
+                    this.total = res.data.total || res.rows.length
+                  }
+                }
+              }
+            })
+          } else {
+            this.loading = true
+            const res = await this.requestApi(this.queryParams)
+            this.loading = false
+            console.log(res, '列表数据2')
+            if (res.code === 200) {
+              if (res.data) {
+                this.tableList = res.data.rows || res.data
+                this.total = res.data.total
+              } else {
+                this.tableList = res.rows || res.data
+                this.total = res.total
+              }
+            }
+          }
+
+        },
+        /** 查询按钮 */
+        handleQuery() {
+            this.getTableList()
+        },
+        /** 填充按钮 */
+        handleFill() {
+          /* this.tableList.forEach(obj => {
+            Object.assign(obj, this.formLabel)
+          }) */
+        },
+        /** 重置按钮 */
+        resetQuery() {
+            this.$refs.queryFormRef.resetFields()
+            this.queryParams.pageNum = 1
+            this.queryParams.pageSize = 10
+            this.getTableList()
+        },
+        /** 级联选择 */
+        handleCas(e, val) {
+          this.queryParams[val] = e[e.length - 1]
+        },
+        /** 级联选择只选最后一级 */
+        handleCasAdd(
+          e,
+          val,
+          func,
+          prop
+        ) {
+          if(e.length !== 0) {
+            this.queryParams[val] = e[e.length - 1]
+            let setObj = {}
+            // 合并
+            if(prop) {
+              Object.assign(setObj, prop)
+            }
+            // 设置id自增
+            this.$set(setObj, 'id', this.idCount)
+            this.idCount++
+            // 获取单位
+            func({
+              id: e[e.length - 1]
+            }).then(res => {
+              this.$set(setObj, 'name', res.data.parentName)
+              this.$set(setObj, 'unitName', res.data.unitName)
+              this.$set(setObj, 'typeName', res.data.name)
+            }).catch(err => {})
+            for(let key in this.queryParams) {
+              this.$set(setObj, key, this.queryParams[key])
+            }
+            this.tableList.unshift(setObj)
+            console.log(this.tableList)
+          }
+        },
+        /** 动态设置操作列的列宽 */
+        getOperatorWidth() {
+            const operatorColumn =
+                document.getElementsByClassName('optionDivRef')
+
+            // 默认宽度
+            let width = 100
+            // 内间距
+            let paddingSpacing = 0
+            // 按钮数量
+            let buttonCount = 0
+
+            if (operatorColumn.length > 0) {
+                Array.prototype.forEach.call(operatorColumn, function (item) {
+                    // 最宽的宽度
+                    width = width > item.offsetWidth ? width : item.offsetWidth
+                    const buttons = item.getElementsByClassName('el-button')
+                    buttonCount = buttons.length
+                    buttonCount =
+                        buttonCount > buttons.length
+                            ? buttonCount
+                            : buttons.length
+                })
+                return width
+            }
+        },
+
+        queryTableList(params) {
+          Object.assign(this.queryParams, params)
+          this.getTableList()
+        },
+
+        handleSelectionChange(e) {
+          console.log(e, 'e')
+          this.msgList = e
+          this.$emit('transIdList', this.msgList)
+        },
+
+    },
+}
+</script>
+
+<style scoped lang="scss">
+.btn-container {
+    margin-bottom: 6px;
+    display: flex;
+    align-items: center;
+}
+::v-deep .btn-handler {
+    flex: 1;
+
+    .el-button {
+        padding: 6px 18px;
+    }
+}
+
+::v-deep .optionDivRef {
+    white-space: nowrap;
+    display: inline-block;
+
+    .el-button {
+        padding: 6px 12px;
+    }
+}
+</style>

src/views/base/device/components/form-device.vue

@@ -1,7 +1,8 @@
 <template>
     <!-- 工程管理 新增、编辑 表单组件 -->
-    <div>
+    <div >
         <el-form
+            v-loading="open"
             label-width="100px"
             size="medium"
             ref="deviceParamsRef"
@@ -98,20 +99,26 @@ export default {
     },
     components: {  },
     created() {
-      this.getRanges()
+      
     },
-    mounted() {
+   async mounted() {
+    this.open = true
+       await this.getRanges()
+       
         console.log(this.editParams)
         if (this.editParams) {
-            Object.assign(this.deviceParams, this.editParams)
+          await  Object.assign(this.deviceParams, this.editParams)
+            console.log(this.deviceParams)
             this.subSort = 2
         } else {
             this.subSort = 1
         }
+        this.open = false
     },
     data() {
         return {
             subSort: '', // 提交类型：新增 1 / 修改 2
+            open: false,
             deviceParams: {
               // devId: undefined, // 设备id
               devType: undefined, //设备类型
@@ -120,6 +127,9 @@ export default {
               bdId: undefined, // 所属边带
               configId: undefined, //预警配置
             },
+            deviceTypeRange: [], // 设备类型下拉选
+            bdIdRange: [], // 所属边带下拉选
+            configRange: [], // 预警配置下拉选
             // 校验规则
             deviceParamsRules: {
               devType: [
@@ -166,29 +176,34 @@ export default {
         /** 获取各类下拉框 */
         async getRanges() {
           // 获取设备类型下拉选
-          let deviceTypeRes = await queryDeviceTypeApi()
+          const params = {'dictType': 'dev_type'}
+          const paramsTwo = {'isAll': 0}
+          let deviceTypeRes = await queryDeviceTypeApi(params)
           this.deviceTypeRange = deviceTypeRes.data.map(item => {
             return {
-              label: item.devName,
+              label: item.dictLabel,
-              value: item.devId
+              value: item.dictCode+''
             }
           })
+          console.log(this.deviceTypeRange)
           // 获取所属边带下拉选
           let bdIdRes = await queryBdIdApi()
           this.bdIdRange = bdIdRes.data.map(item => {
             return {
-              label: item.bdName,
+              label: item.devName,
-              value: item.bdId
+              value: item.id
             }
           })
           // 获取预警配置下拉选
-          let configRes = await queryConfigApi()
+          let configRes = await queryConfigApi(paramsTwo)
+          console.log(configRes)
           this.configRange = configRes.data.map(item => {
             return {
-              label: item.configName,
+              label: item.configName+" "+item.typeName,
-              value: item.configId,
+              value: item.id,
             }
           })
+          console.log(this.configRange)
         },
         /** 改变树结构 */
         changeTree(leaf) {

src/views/base/device/config.js

@@ -3,11 +3,11 @@ import {
   } from '@/api/base/device'
   
   export const queryDeviceTypes = () => {
-    queryDeviceTypeApi().then(res => {
+    queryDeviceTypeApi({'dictType':'dev_type'}).then(res => {
       formLabel[0].f_selList = res.data.map(item => {
         return {
-          label: item.deviceName,
+          label: item.dictLabel,
-          value: item.deviceId
+          value: item.dictCode
         }
       })
     }).catch(err => {})
@@ -17,22 +17,22 @@ export const formLabel = [
     { f_label: '设备名称', f_model: 'devName', f_type: 'ipt' },
     { f_label: '设备编码', f_model: 'devCode', f_type: 'ipt' },
     { f_label: '设备状态', f_model: 'devStatus', f_type: 'sel',f_selList: [
-        { label: '在用', value: '0' },
+        { label: '在线', value: '1' },
-        { label: '未用', value: '1' },
+        { label: '离线', value: '0' },
       ] },
 ]
 
 export const columnsList = [
-    { t_props: 'devType', t_label: '设备类型', },
+    { t_props: 'devTypeName', t_label: '设备类型', },
     { t_props: 'devCode', t_label: '设备编码' },
     { t_props: 'devName', t_label: '设备名称' },
-    { t_props: 'bdId', t_label: '所属边代设备', },
+    { t_props: 'bdName', t_label: '所属边代设备', },
-    { t_props: 'configId', t_label: '预警配置',t_slot: 'configId'  },
+    { t_props: 'configName', t_label: '预警配置',t_slot: 'configName'  },
-    { t_props: 'devStatus', t_label: '设备状态', t_slot: 'devStatus'},
+    { t_props: 'devStatusName', t_label: '设备状态', t_slot: 'devStatusName'},
 ]
 
 export const dialogConfig = {
-    outerWidth: '60%',
+    outerWidth: '40%',
     outerTitle: '',
     outerVisible: false,
 }

src/views/base/device/index.vue

@@ -42,26 +42,30 @@
 <!--      <template slot="isMatch" slot-scope="{ data }">
         {{ data.proId == null ? '不匹配' : '匹配' }}
       </template>-->
-      <template slot="configId" slot-scope="{ data }">
+      <template slot="configName" slot-scope="{ data }">
         <span
           style="color:blue;"
-        >{{ data.configId }}</span>
+        >{{ data.configName }}</span>
       </template>
-      <template slot="configId" slot-scope="{ data }">
+      <template slot="configName" slot-scope="{ data }">
         <span
           style="color:blue;"
-        >{{ data.configId }}</span>
+        >{{ data.configName }}</span>
       </template>
 
-      <template slot="devStatus" slot-scope="{ data }">
+      <template slot="devStatusName" slot-scope="{ data }">
         <span 
-          v-if="data.devStatus === '0'"
+          v-if="data.devStatusName === '在线'"
           style="color:aquamarine;"
-        >{{ '在用' }}</span>
+        >{{ data.devStatusName }}</span>
         <span
-          v-else
+          v-if="data.devStatusName === '离线'"
           style="color: darkgrey;"
-        >{{ '未用' }}</span>
+        >{{ data.devStatusName }}</span>
+        <span
+          v-if="data.devStatusName === '未知状态'"
+          style="color: bisque;"
+          >{{ data.devStatusName }}</span>
       </template>
     </TableModel>
 
@@ -78,6 +82,7 @@
         />
       </template>
     </DialogModel>
+    
   </div>
 </template>
 

src/views/base/edgeDeviceManage/config.js

@@ -1,18 +1,16 @@
 export const formLabel = [
     { f_label: '工程名称', f_model: 'proName', f_type: 'ipt' },
     { f_label: '项目部名称', f_model: 'departName', f_type: 'ipt' },
-    { f_label: '边带名称', f_model: 'edgeName', f_type: 'ipt' },
+    { f_label: '边带名称', f_model: 'devName', f_type: 'ipt' },
-    { f_label: '边带编码', f_model: 'edgeCode', f_type: 'ipt' },
+    { f_label: '边带编码', f_model: 'devCode', f_type: 'ipt' },
 ]
 
 export const columnsList = [
-    { t_props: 'proName', t_label: '工程名称', },
     { t_props: 'departName', t_label: '项目部名称' },
-    { t_props: 'proNow', t_label: '在用工程' },
+    { t_props: 'proName', t_label: '在用工程', },
-    { t_props: 'region', t_label: '所用区域', },
+    { t_props: 'areaName', t_label: '所用区域', },
-    { t_props: 'edgeName', t_label: '边带名称',  },
+    { t_props: 'devName', t_label: '边带名称',  },
-    { t_props: 'edgeCode', t_label: '边带编码', },
+    { t_props: 'devCode', t_label: '边带编码', },
-    { t_props: 'edgeIp', t_label: '边带IP', },
+    { t_props: 'devUser', t_label: '负责人', },
-    { t_props: 'head', t_label: '负责人', },
+    { t_props: 'devUserPhone', t_label: '负责人电话'},
-    { t_props: 'phone', t_label: '负责人电话', },
 ]