init

src/views/EquipmentManager/Analysis/EditForm.vue

@@ -0,0 +1,114 @@
+<!--
+ * @Date: 2021-01-11 09:24:41
+ * @LastEditors: guo
+ * @LastEditTime: 2021-02-25 16:04:49
+ * @FilePath: \basic-admin\src\views\EquipmentManager\StatusSetting\EditForm.vue
+ * @Description: 子页面
+-->
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" title="修改设备状态" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="120px">
+        <el-form-item label="设备状态" prop="status">
+          <el-select v-model="formData.status" placeholder="请选择下拉选择设备状态" clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in statusOptions"
+              :key="index"
+              :label="item.label"
+              :value="item.value"
+              :disabled="item.disabled"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { editStatusSetting } from '@/api/equipment/index'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: {
+    targetInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      formData: {
+        status: undefined,
+        oldStatus: null,
+        id: null
+      },
+      rules: {
+        status: [{
+          required: true,
+          message: '请选择下拉选择设备状态',
+          trigger: 'change'
+        }]
+      },
+      statusOptions: [{
+        'label': 'productive',
+        'value': 0
+      }, {
+        'label': 'standby',
+        'value': 1
+      }, {
+        'label': 'unscheduled downtime',
+        'value': 2
+      }, {
+        'label': 'scheduled downtime',
+        'value': 3
+      }, {
+        'label': 'engineering',
+        'value': 4
+      }, {
+        'label': 'non-scheduled',
+        'value': 5
+      }]
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    onOpen() {
+      this.formData.id = this.targetInfo.id
+      this.formData.oldStatus = this.targetInfo.status
+    },
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        const result = await editStatusSetting({
+          ...this.formData,
+          id: this.targetInfo?.id
+        })
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '修改状态成功!'
+          })
+          this.$emit('done')
+          this.close()
+        }
+      })
+    }
+  }
+}
+
+</script>
+<style>
+</style>

src/views/EquipmentManager/Analysis/index.vue

@@ -0,0 +1,156 @@
+<!--
+ * @Date: 2020-12-15 15:36:52
+ * @LastEditors: guo
+ * @LastEditTime: 2021-03-04 10:29:37
+ * @FilePath: \basic-admin\src\views\EquipmentManager\Analysis\index.vue
+ * @Description:
+-->
+<template>
+  <div class="usermanager-container">
+    <div class="method-btn-area">
+      <el-input v-model="listQuery.keywords" placeholder="设备编码或名称" style="width: 200px;" clearable />
+      <el-button type="primary" @click="getList">{{ 'btn.search' | i18nFilter }}</el-button>
+    </div>
+    <base-table :table-config="tableProps" :table-data="list" :is-loading="listLoading" :page="listQuery.current" :limit="listQuery.size">
+      <method-btn slot="handleBtn" :method-list="tableBtn" @clickBtn="handleClick" />
+    </base-table>
+    <pagination :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" />
+    <edit-form :visible.sync="showEditDialog" :target-info="{id: curEditId, status: curStatus}" @done="getList" />
+  </div>
+</template>
+
+<script>
+// import dataDict from '@/filters/DataDict'
+// edit here
+const colorTable = {
+  '0': 'rgb(155,187,89)',
+  '1': 'rgb(255,255,0)',
+  '2': 'rgb(192,80,77)',
+  '3': 'rgb(247,150,70)',
+  '4': 'rgb(79,129,189)',
+  '5': 'rgb(0,0,0)'
+}
+const tableBtn = [{
+  type: 'edit',
+  btnName: 'btn.edit'
+}]
+const tableProps = [{
+  prop: 'code',
+  label: '设备编号',
+  align: 'center'
+}, {
+  prop: 'name',
+  label: '设备名称',
+  align: 'center'
+}, {
+  prop: 'status',
+  label: '设备类型',
+  align: 'center'
+}, {
+  prop: 'color',
+  label: '车间',
+  align: 'center'
+}, {
+  prop: 'color',
+  label: '工作时间累计',
+  align: 'center'
+}, {
+  prop: 'color',
+  label: '维修次数',
+  align: 'center'
+}, {
+  prop: 'color',
+  label: '保养次数',
+  align: 'center'
+}, {
+  prop: 'remark',
+  label: '备注',
+  align: 'center'
+}]
+import EditForm from './EditForm'
+import BaseTable from '@/components/BaseTable'
+// edit here
+import { getStatusSettingList } from '@/api/equipment'
+
+import Pagination from '@/components/Pagination'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+export default {
+  name: 'OrgManager',
+  components: {
+    Pagination,
+    BaseTable,
+    MethodBtn,
+    EditForm
+  },
+  props: {},
+  data() {
+    return {
+      tableBtn,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      showDialog: false,
+      curEditId: null,
+      curStatus: null,
+      showEditDialog: false,
+      listQuery: {
+        current: 1,
+        size: 10,
+        keywords: ''
+      }
+    }
+  },
+  created() {
+    this.getList()
+    // this.listLoading = false
+  },
+  mounted() {},
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      switch (raw.type) {
+        case 'edit':
+          this.showEditDialog = true
+          this.curEditId = raw.data.id
+          this.curStatus = raw.data.status
+          break
+      }
+    },
+    async getList() {
+      this.listLoading = true
+      // edit here
+      const res = await getStatusSettingList(this.listQuery)
+      if (res.code === 0) {
+        this.list = res.data.records ? res.data.records.map(item => {
+          return {
+            ...item,
+            color: colorTable[item.status]
+          }
+        }) : []
+        this.total = res.data.total
+        this.listLoading = false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.usermanager-container {
+  padding: 20px;
+  .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+  }
+}
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>

src/views/EquipmentManager/BOMManager/AddForm.vue

@@ -0,0 +1,144 @@
+<!--
+ * @Date: 2021-01-12 09:37:27
+ * @LastEditors: guo
+ * @LastEditTime: 2021-03-22 15:31:49
+ * @FilePath: \basic-admin\src\views\EquipmentManager\BOMManager\AddForm.vue
+ * @Description: 物料BOM添加弹窗页面
+-->
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="$t('module.equipmentManager.bom.addDialogTitle')" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="220px">
+        <el-form-item :label="$t('module.equipmentManager.bom.equipmentName')" prop="equipmentId">
+          <el-select v-model="formData.equipmentId" :placeholder="$t('module.equipmentManager.bom.placeholderequipmentName')" clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in dict.device"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.bom.name')" prop="code">
+          <el-select v-model="formData.code" :placeholder="$t('module.equipmentManager.bom.placeholdername')" clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in dict.bom"
+              :key="index"
+              :label="item.name"
+              :value="item.code"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.bom.enabled')" prop="enabled" required>
+          <el-switch v-model="formData.enabled" :active-value="1" :inactive-value="0" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.bom.remark')" prop="remark">
+          <el-input v-model="formData.remark" :placeholder="$t('module.equipmentManager.bom.placeholderremark')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+        <!--  :loading="waiting" -->
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { addBOM } from '@/api/equipment/bom'
+import { getDictDevice, getDictBom } from '@/api/dict'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: [],
+  data() {
+    return {
+      waiting: false,
+      formData: {
+        equipmentId: undefined,
+        code: undefined,
+        name: undefined,
+        enabled: 1,
+        remark: undefined
+      },
+      rules: {
+        equipmentId: [{
+          required: true,
+          message: '请选择设备名称',
+          trigger: 'change'
+        }],
+        code: [{
+          required: true,
+          message: '请选择物料',
+          trigger: 'blur'
+        }],
+        name: [{
+          required: true,
+          message: '请输入物料BOM名称',
+          trigger: 'blur'
+        }],
+        remark: []
+      },
+      dict: {
+        device: [],
+        bom: []
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {
+    this.getDict()
+  },
+  methods: {
+    onOpen() {},
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      // this.waiting = true
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) {
+          // this.waiting = false
+          return
+        }
+        this.dict.bom.map(item => {
+          if (item.code === this.formData.code) {
+            this.formData.name = item.name
+          }
+        })
+        const result = await addBOM(this.formData)
+        // this.waiting = false
+        console.log(1)
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '添加成功！'
+          })
+          this.$emit('done')
+          this.close()
+        }
+      })
+    },
+    async getDict() {
+      const result = await getDictDevice({
+        current: 1,
+        size: 999
+      })
+      this.dict.device = result
+      const res = await getDictBom({
+        current: 1,
+        size: 999
+      })
+      this.dict.bom = res
+    }
+  }
+}
+
+</script>
+<style>
+</style>

src/views/EquipmentManager/BOMManager/EditForm.vue

@@ -0,0 +1,155 @@
+<!--
+ * @Date: 2021-01-12 09:37:27
+ * @LastEditors: guo
+ * @LastEditTime: 2021-03-22 15:32:19
+ * @FilePath: \basic-admin\src\views\EquipmentManager\BOMManager\EditForm.vue
+ * @Description: 物料BOM编辑弹窗页面
+-->
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="$t('module.equipmentManager.bom.editDialogTitle')" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="220px">
+        <el-form-item :label="$t('module.equipmentManager.bom.equipmentName')" prop="equipmentId">
+          <el-select v-model="formData.equipmentId" :placeholder="$t('module.equipmentManager.bom.placeholderequipmentName')" clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in dict.device"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.bom.name')" prop="code">
+          <el-select v-model="formData.code" :placeholder="$t('module.equipmentManager.bom.placeholdername')" clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in dict.bom"
+              :key="index"
+              :label="item.name"
+              :value="item.code"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.bom.enabled')" prop="enabled" required>
+          <el-switch v-model="formData.enabled" :active-value="1" :inactive-value="0" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.bom.remark')" prop="remark">
+          <el-input v-model="formData.remark" :placeholder="$t('module.equipmentManager.bom.placeholderremark')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { getBOMInfo, editBOM } from '@/api/equipment/bom'
+import { getDictDevice, getDictBom } from '@/api/dict'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: {
+    targetInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      formData: {
+        equipmentId: undefined,
+        code: undefined,
+        name: undefined,
+        enabled: 1,
+        remark: undefined
+      },
+      rules: {
+        equipmentId: [{
+          required: true,
+          message: '请选择设备名称',
+          trigger: 'change'
+        }],
+        code: [{
+          required: false,
+          message: '请输入物料BOM编码',
+          trigger: 'blur'
+        }],
+        name: [{
+          required: true,
+          message: '请输入物料BOM名称',
+          trigger: 'blur'
+        }],
+        remark: []
+      },
+      dict: {
+        device: [],
+        bom: []
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {
+    this.getDict()
+  },
+  methods: {
+    onOpen() {
+      this.getDetail()
+    },
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        this.dict.bom.map(item => {
+          if (item.code === this.formData.code) {
+            this.formData.name = item.name
+          }
+        })
+        const result = await editBOM({
+          ...this.formData,
+          id: this.targetInfo?.id
+        })
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '修改成功！'
+          })
+          this.$emit('done')
+          this.close()
+        }
+      })
+    },
+    async getDetail() {
+      const result = await getBOMInfo({
+        id: this.targetInfo?.id
+      })
+      if (result.code === 0) {
+        this.formData = result.data
+        // console.log(result)
+      }
+    },
+    async getDict() {
+      const result = await getDictDevice({
+        current: 1,
+        size: 999
+      })
+      this.dict.device = result
+      const res = await getDictBom({
+        current: 1,
+        size: 999
+      })
+      this.dict.bom = res
+    }
+  }
+}
+
+</script>
+<style>
+</style>

src/views/EquipmentManager/BOMManager/index.vue

@@ -0,0 +1,172 @@
+<!--
+ * @Date: 2020-12-15 15:36:52
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-21 14:00:18
+ * @FilePath: \basic-admin\src\views\EquipmentManager\BOMManager\index.vue
+ * @Description:
+-->
+<template>
+  <div class="usermanager-container">
+    <div class="method-btn-area">
+      <el-input v-model="listQuery.keywords" :placeholder="$t('module.equipmentManager.bom.searchPlaceholder')" style="width: 200px;" clearable />
+      <el-button @click="getList">{{ 'btn.search' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="showDialog = true">{{ 'btn.add' | i18nFilter }}</el-button>
+    </div>
+    <base-table :table-config="tableProps" :table-data="list" :is-loading="listLoading" :page="listQuery.current" :limit="listQuery.size">
+      <method-btn slot="handleBtn" :method-list="tableBtn" @clickBtn="handleClick" />
+    </base-table>
+    <pagination :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" />
+    <add-form :visible.sync="showDialog" @done="getList" />
+    <edit-form :visible.sync="showEditDialog" :target-info="{id: curEditId}" @done="getList" />
+  </div>
+</template>
+
+<script>
+import dataDict from '@/filters/DataDict'
+// edit here
+const tableBtn = [{
+  type: 'edit',
+  btnName: 'btn.edit'
+}, {
+  type: 'delete',
+  btnName: 'btn.delete'
+}, {
+  type: 'detail',
+  btnName: 'btn.detail'
+}]
+const tableProps = [{
+  prop: 'code',
+  label: i18n.t('module.equipmentManager.bom.code'),
+  align: 'center',
+  sortable: true,
+  sortMethod: (a, b) => {
+    // 返回-1, 1或者0
+  }
+}, {
+  prop: 'name',
+  label: i18n.t('module.equipmentManager.bom.name'),
+  align: 'center',
+  sortable: true
+}, {
+  prop: 'equipmentCode',
+  label: i18n.t('module.equipmentManager.bom.equipmentCode'),
+  align: 'center'
+}, {
+  prop: 'equipmentName',
+  label: i18n.t('module.equipmentManager.bom.equipmentName'),
+  align: 'center'
+}, {
+  prop: 'enabled',
+  label: i18n.t('module.equipmentManager.bom.enabled'),
+  align: 'center',
+  filter: dataDict('enableState')
+}, {
+  prop: 'remark',
+  label: i18n.t('module.equipmentManager.bom.remark'),
+  align: 'center'
+}]
+import AddForm from './AddForm'
+import EditForm from './EditForm'
+import BaseTable from '@/components/BaseTable'
+// edit here
+import { getBOMList, delBOM } from '@/api/equipment/bom'
+// , getMaterialList
+import { objFilter } from '@/utils'
+import Pagination from '@/components/Pagination'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import i18n from '@/lang'
+export default {
+  name: 'OrgManager',
+  components: { Pagination, BaseTable, MethodBtn, AddForm, EditForm },
+  props: {},
+  data() {
+    return {
+      tableBtn,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      showDialog: false,
+      curEditId: null,
+      showEditDialog: false,
+      listQuery: {
+        current: 1,
+        size: 10,
+        keywords: ''
+      }
+    }
+  },
+  created() {
+    this.getList()
+    // this.listLoading = false
+  },
+  mounted() {},
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      switch (raw.type) {
+        case 'delete':
+          this.$confirm(i18n.t('deleteMsgBox.content'), i18n.t('deleteMsgBox.hint'), {
+            confirmButtonText: i18n.t('btn.confirm'),
+            cancelButtonText: i18n.t('btn.cancel'),
+            type: 'warning'
+          }).then(async() => {
+            // 走接口
+            const result = await delBOM({
+              id: raw.data.id
+            })
+            if (result.code === 0) {
+              this.$message({
+                type: 'success',
+                message: i18n.t('deleteMsgBox.doneMsg')
+              })
+              this.getList()
+            }
+          })
+          break
+        case 'edit':
+          this.showEditDialog = true
+          this.curEditId = raw.data.id
+          break
+        case 'detail':
+          this.$router.push({
+            name: 'DeviceBOMManage',
+            query: {
+              id: raw.data.id
+            }
+          })
+          break
+      }
+    },
+    async getList() {
+      this.listLoading = true
+      // edit here
+      const res = await getBOMList(objFilter(this.listQuery))
+      if (res.code === 0) {
+        this.list = res.data.records
+        this.total = res.data.total
+        this.listLoading = false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.usermanager-container {
+  padding: 20px;
+  .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+  }
+}
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>

src/views/EquipmentManager/BOMManager/subpage/AddForm.vue

@@ -0,0 +1,152 @@
+<!--
+ * @Date: 2021-01-09 16:25:11
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-05-19 15:03:21
+ * @FilePath: \basic-admin\src\views\EquipmentManager\BOMManager\subpage\AddForm.vue
+ * @Description: 子页面
+-->
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="$t('module.equipmentManager.bomdetail.addDialogTitle')" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="120px">
+        <el-form-item :label="$t('module.equipmentManager.bomdetail.materialName')" prop="materialId">
+          <el-select v-model="formData.materialId" :placeholder="$t('module.equipmentManager.bomdetail.placeholdermaterialName')" clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in dict.material"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.bomdetail.unit')" prop="unit">
+          <el-select v-model="formData.unit" :placeholder="$t('module.equipmentManager.bomdetail.placeholderunit')" clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in dict.unit"
+              :key="index"
+              :label="item.dataName"
+              :value="item.dataName"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.bomdetail.quantity')" prop="quantity">
+          <el-input v-model="formData.quantity" type="number" :placeholder="$t('module.equipmentManager.bomdetail.placeholderquantity')" :min="0" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.bomdetail.remark')" prop="remark">
+          <el-input v-model="formData.remark" :placeholder="$t('module.equipmentManager.bomdetail.placeholderremark')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" :loading="waiting" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { addDeviceBOM } from '@/api/equipment/bom'
+import { getDictMaterial } from '@/api/dict'
+import { dataDictionaryDataList } from '@/api/basicData/dataDictionary'
+import i18n from '@/lang'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: {
+    targetInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      waiting: false,
+      formData: {
+        materialId: null,
+        unit: undefined,
+        quantity: undefined,
+        remark: undefined,
+        equipmentBomId: undefined
+      },
+      rules: {
+        materialId: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.bomdetail.placeholdermaterialName'),
+          trigger: 'change'
+        }],
+        unit: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.bomdetail.placeholderunit'),
+          trigger: 'blur'
+        }],
+        quantity: [{
+          required: false,
+          trigger: 'blur'
+        }],
+        remark: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.bomdetail.placeholderremark'),
+          trigger: 'blur'
+        }]
+      },
+      dict: {
+        material: [],
+        unit: []
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {
+    this.getDict()
+  },
+  mounted() {},
+  methods: {
+    onOpen() {
+      this.formData.equipmentBomId = this.targetInfo.id
+    },
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.waiting = true
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) {
+          this.waiting = false
+          return
+        }
+        const result = await addDeviceBOM(this.formData)
+        this.waiting = false
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '添加成功！'
+          })
+          this.$emit('done')
+          this.close()
+        }
+      })
+    },
+    async getDict() {
+      const result = await getDictMaterial()
+      this.dict.material = result
+      const listQuery = {
+        current: 1,
+        size: 500
+      }
+      await dataDictionaryDataList(Object.assign(listQuery, {
+        dictTypeId: '1392033901169348609'
+      })).then(response => {
+        if (response.data.records) {
+          this.dict.unit = response.data.records
+        }
+      })
+    }
+  }
+}
+
+</script>
+<style>
+</style>

src/views/EquipmentManager/BOMManager/subpage/EditForm.vue

@@ -0,0 +1,159 @@
+<!--
+ * @Date: 2021-01-09 16:25:11
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-05-13 15:00:54
+ * @FilePath: \basic-admin\src\views\EquipmentManager\BOMManager\subpage\EditForm.vue
+ * @Description: 子页面
+-->
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="$t('module.equipmentManager.bomdetail.editDialogTitle')" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="120px">
+        <el-form-item :label="$t('module.equipmentManager.bomdetail.materialName')" prop="materialId">
+          <el-select v-model="formData.materialId" :placeholder="$t('module.equipmentManager.bomdetail.placeholdermaterialName')" clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in dict.material"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.bomdetail.unit')" prop="unit">
+          <el-select v-model="formData.unit" :placeholder="$t('module.equipmentManager.bomdetail.placeholderunit')" clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in dict.unit"
+              :key="index"
+              :label="item.dataName"
+              :value="item.dataName"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.bomdetail.quantity')" prop="quantity">
+          <el-input v-model="formData.quantity" :placeholder="$t('module.equipmentManager.bomdetail.placeholderquantity')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.bomdetail.remark')" prop="remark">
+          <el-input v-model="formData.remark" :placeholder="$t('module.equipmentManager.bomdetail.placeholderremark')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { editDeviceBOM, getDeviceBOMInfo } from '@/api/equipment/bom'
+import { dataDictionaryDataList } from '@/api/basicData/dataDictionary'
+import { getDictMaterial } from '@/api/dict'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: {
+    targetInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      formData: {
+        materialId: undefined,
+        unit: undefined,
+        quantity: undefined,
+        remark: undefined,
+        id: undefined,
+        equipmentId: undefined
+      },
+      rules: {
+        materialId: [{
+          required: true,
+          message: '请输入物料名称',
+          trigger: 'change'
+        }],
+        unit: [{
+          required: false,
+          message: '请输入单位',
+          trigger: 'blur'
+        }],
+        quantity: [{
+          required: false,
+          trigger: 'blur'
+        }],
+        remark: [{
+          required: false,
+          message: '请输入备注',
+          trigger: 'blur'
+        }]
+      },
+      dict: {
+        unit: [],
+        material: []
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {
+  },
+  mounted() {
+    this.getDict()
+  },
+  methods: {
+    onOpen() {
+      this.formData
+      this.getInfo()
+    },
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        const result = await editDeviceBOM(this.formData)
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '修改成功！'
+          })
+          this.$emit('done')
+          this.close()
+        }
+      })
+    },
+    async getInfo() {
+      const result = await getDeviceBOMInfo({
+        id: this.targetInfo?.id
+      })
+      if (result.code === 0) {
+        this.formData = result.data
+      }
+    },
+    async getDict() {
+      const result = await getDictMaterial()
+      this.dict.material = result
+      const listQuery = {
+        current: 1,
+        size: 500
+      }
+      await dataDictionaryDataList(Object.assign(listQuery, {
+        dictTypeId: '1392033901169348609'
+      })).then(response => {
+        if (response.data.records) {
+          this.dict.unit = response.data.records
+        }
+      })
+      // const result2 = await getDictUnit()
+      // this.dict.unit = result2.records
+      // console.log(this.dict.unit)
+    }
+  }
+}
+
+</script>
+<style>
+</style>

src/views/EquipmentManager/BOMManager/subpage/detail.vue

@@ -0,0 +1,232 @@
+<!--
+ * @Date: 2020-12-15 15:36:52
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-06 17:21:36
+ * @FilePath: \basic-admin\src\views\EquipmentManager\BOMManager\subpage\detail.vue
+ * @Description:
+-->
+<template>
+  <div class="bom-form-container">
+    <el-form ref="elForm" :model="formData" size="medium" label-width="150px">
+      <el-form-item :label="$t('module.equipmentManager.bom.equipmentName')" prop="equipmentName">
+        <el-input :value="equipmentName" :style="{width: '100%'}" :disabled="pagetype" />
+      </el-form-item>
+      <el-form-item :label="$t('module.equipmentManager.bom.code')" prop="code">
+        <el-input v-model="formData.code" :style="{width: '100%'}" :disabled="pagetype" />
+      </el-form-item>
+      <el-form-item :label="$t('module.equipmentManager.bom.name')" prop="name">
+        <el-input v-model="formData.name" :style="{width: '100%'}" :disabled="pagetype" />
+      </el-form-item>
+      <el-form-item :label="$t('module.equipmentManager.bom.enabled')" prop="enabled" required>
+        <el-switch v-model="formData.enabled" :disabled="pagetype" :active-value="1" :inactive-value="0" />
+      </el-form-item>
+      <el-form-item :label="$t('module.equipmentManager.bom.remark')" prop="remark">
+        <el-input v-model="formData.remark" :style="{width: '100%'}" :disabled="pagetype" />
+      </el-form-item>
+    </el-form>
+    <div class="sub-table-container">
+      <el-divider>{{ $t('module.equipmentManager.bomdetail.title') }}</el-divider>
+      <div class="method-btn-area">
+        <el-button type="primary" style="float: right;margin: 0 20px;" @click="showDialog = true">{{ 'btn.add' | i18nFilter }}</el-button>
+        <el-button type="primary" plain icon="el-icon-arrow-left" @click="turnBack">{{ 'btn.back' | i18nFilter }}</el-button>
+        <!-- <el-button style="float: right;" @click="resetForm">重置</el-button> -->
+      </div>
+      <base-table :table-config="tableProps" :table-data="list" :is-loading="listLoading" :page="listQuery.current" :limit="listQuery.size">
+        <method-btn slot="handleBtn" :method-list="tableBtn" @clickBtn="handleClick" />
+      </base-table>
+    </div>
+    <pagination :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" />
+    <add-form :visible.sync="showDialog" :target-info="{id: listQuery.id}" @done="getList" />
+    <edit-form :visible.sync="showEditDialog" :target-info="{id: curEditId, fatherId: listQuery.id}" @done="getList" />
+  </div>
+</template>
+
+<script>
+// import CheckDetail from '@/components/BaseTable/subcomponents/CheckDetail'
+// import dataDict from '@/filters/DataDict'
+// edit here
+const tableBtn = [{
+  type: 'edit',
+  btnName: 'btn.edit'
+}, {
+  type: 'delete',
+  btnName: 'btn.delete'
+}]
+const tableProps = [{
+  prop: 'materialCode',
+  label: i18n.t('module.equipmentManager.bomdetail.materialId'),
+  align: 'center'
+}, {
+  prop: 'materialName',
+  label: i18n.t('module.equipmentManager.bomdetail.materialName'),
+  align: 'center'
+}, {
+  prop: 'unit',
+  label: i18n.t('module.equipmentManager.bomdetail.unit'),
+  align: 'center'
+}, {
+  prop: 'quantity',
+  label: i18n.t('module.equipmentManager.bomdetail.quantity'),
+  align: 'center'
+}, {
+  prop: 'remark',
+  label: i18n.t('module.equipmentManager.bomdetail.remark'),
+  align: 'center'
+}]
+import AddForm from './AddForm'
+import EditForm from './EditForm'
+import BaseTable from '@/components/BaseTable'
+// edit here
+// import { objFilter } from '@/utils'
+import { getDeviceBOMList, delDeviceBOM, getBOMInfo } from '@/api/equipment/bom'
+import { getDictDevice } from '@/api/dict'
+import { dictChange, dictFilter } from '@/utils'
+import Pagination from '@/components/Pagination'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import i18n from '@/lang'
+export default {
+  name: 'BOMForm',
+  components: { Pagination, BaseTable, MethodBtn, AddForm, EditForm },
+  props: {},
+  data() {
+    return {
+      tableBtn,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      showDialog: false,
+      curEditId: null,
+      showEditDialog: false,
+      listQuery: {
+        enabled: 1,
+        id: null,
+        current: 1,
+        size: 10,
+        keywords: ''
+      },
+      equipmentName: undefined,
+      formData: {
+        equipmentCode: undefined,
+        code: undefined,
+        name: undefined,
+        enabled: 1,
+        remark: undefined
+      },
+      dict: {
+        deviceTable: {}
+      }
+    }
+  },
+  computed: {
+    pagetype() {
+      return true
+      // return false
+    }
+  },
+  async created() {
+    console.log(this.$route.query)
+    this.listQuery.id = this.$route.query.id
+    this.listQuery.keywords = this.$route.query.id
+    await this.getDict()
+    await this.getDetail()
+    await this.getList()
+    // this.listLoading = false
+  },
+  mounted() {},
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      switch (raw.type) {
+        case 'delete':
+          this.$confirm(i18n.t('deleteMsgBox.content'), i18n.t('deleteMsgBox.hint'), {
+            confirmButtonText: i18n.t('btn.confirm'),
+            cancelButtonText: i18n.t('btn.cancel'),
+            type: 'warning'
+          }).then(async() => {
+            // 走接口
+            const result = await delDeviceBOM({
+              id: raw.data.id
+            })
+            if (result.code === 0) {
+              this.$message({
+                type: 'success',
+                message: i18n.t('deleteMsgBox.doneMsg')
+              })
+              this.getList()
+            }
+          })
+          break
+        case 'edit':
+          this.showEditDialog = true
+          this.curEditId = raw.data.id
+          break
+      }
+    },
+    async getList() {
+      this.listLoading = true
+      // edit here
+      const res = await getDeviceBOMList(this.listQuery)
+      if (res.code === 0) {
+        this.list = res.data.records
+        this.total = res.data.total
+        this.listLoading = false
+      }
+    },
+    async getDetail() {
+      const result = await getBOMInfo({
+        id: this.listQuery.id
+      })
+      if (result.code === 0) {
+        this.formData = result.data
+        this.equipmentName = dictFilter(this.dict.deviceTable, { key: 'id', value: 'name' })(result.data.equipmentId)
+        // console.log(result)
+      }
+    },
+    submitForm() {
+      this.$refs['elForm'].validate(valid => {
+        if (!valid) return
+        // TODO 提交表单
+      })
+    },
+    resetForm() {
+      this.$refs['elForm'].resetFields()
+    },
+    saveForm() {},
+    async getDict() {
+      const result = await getDictDevice({
+        current: 1,
+        size: 999
+      })
+      this.dict.deviceTable = dictChange(result, { key: 'id', value: 'name' })
+    },
+    turnBack() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/styles/mixin.scss";
+.bom-form-container {
+  padding: 20px;
+  .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+    @include clearfix;
+  }
+  .sub-table-container {
+    margin-top: 80px;
+  }
+}
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>

src/views/EquipmentManager/DeviceMonitoring/AddForm.vue

@@ -0,0 +1,203 @@
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" title="添加备品备件" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
+        <el-form-item label="备件编码" prop="name">
+          <el-input v-model="formData.code" placeholder="请输入备件编码" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item label="备件名称" prop="name">
+          <el-input v-model="formData.name" placeholder="请输入备件名称" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item label="备件型号" prop="sparePartModel">
+          <el-input
+            v-model="formData.sparePartModel"
+            placeholder="请输入备件型号"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+        <el-form-item label="外部编码" prop="externalCode">
+          <el-input
+            v-model="formData.externalCode"
+            placeholder="请输入备件型号"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+        <el-form-item label="单位" prop="accessoryUnit">
+          <el-select v-model="formData.accessoryUnit" placeholder="请选择单位" clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in accessoryUnitOptions"
+              :key="index"
+              :label="item.label"
+              :value="item.value"
+              :disabled="item.disabled"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="批次号" prop="batchNumber">
+          <el-input v-model="formData.batchNumber" type="number" placeholder="请输入批次号" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item label="数量" prop="accessoryNumber">
+          <el-input v-model="formData.accessoryNumber" type="number" placeholder="请输入数量" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item label="进厂时间" prop="entryTime">
+          <el-date-picker
+            v-model="formData.entryTime"
+            format="yyyy-MM-dd"
+            :style="{width: '100%'}"
+            placeholder="请选择进厂时间"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="供应商" prop="supplierId">
+          <el-select v-model="formData.supplierId" placeholder="请选择供应商" clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in supplierIdOptions"
+              :key="index"
+              :label="item.label"
+              :value="item.value"
+              :disabled="item.disabled"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="接收人" prop="receiver">
+          <el-input v-model="formData.receiver" placeholder="请输入接收人" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="formData.remark" placeholder="请输入备注" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { addSapre } from '@/api/equipment/spare'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: [],
+  data() {
+    return {
+      formData: {
+        code: undefined,
+        name: undefined,
+        sparePartModel: undefined,
+        accessoryUnit: undefined,
+        batchNumber: undefined,
+        accessoryNumber: undefined,
+        entryTime: null,
+        supplierId: undefined,
+        receiver: undefined,
+        remark: undefined,
+        externalCode: undefined
+      },
+      rules: {
+        code: [{
+          required: false,
+          message: '请输入备件编码',
+          trigger: 'blur'
+        }],
+        name: [{
+          required: true,
+          message: '请输入备件名称',
+          trigger: 'blur'
+        }],
+        sparePartModel: [{
+          required: true,
+          message: '请输入备件型号',
+          trigger: 'blur'
+        }],
+        accessoryUnit: [{
+          required: true,
+          message: '请选择单位',
+          trigger: 'change'
+        }],
+        externalCode: [{
+          required: true,
+          message: '请输入外部编码',
+          trigger: 'blur'
+        }],
+        batchNumber: [{
+          required: true,
+          message: '请输入批次号',
+          trigger: 'blur'
+        }],
+        accessoryNumber: [{
+          required: true,
+          message: '请输入数量',
+          trigger: 'blur'
+        }],
+        entryTime: [{
+          required: true,
+          message: '请选择进厂时间',
+          trigger: 'change'
+        }],
+        supplierId: [{
+          required: true,
+          message: '请选择供应商',
+          trigger: 'change'
+        }],
+        receiver: [{
+          required: true,
+          message: '请输入接收人',
+          trigger: 'blur'
+        }],
+        remark: [{
+          required: false,
+          message: '请输入备注',
+          trigger: 'blur'
+        }]
+      },
+      accessoryUnitOptions: [{
+        'label': '选项一',
+        'value': 1
+      }, {
+        'label': '选项二',
+        'value': 2
+      }],
+      supplierIdOptions: [{
+        'label': '选项一',
+        'value': 1
+      }, {
+        'label': '选项二',
+        'value': 2
+      }]
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    onOpen() {},
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        const result = await addSapre(this.formData)
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '添加成功！'
+          })
+          this.$emit('done')
+          this.close()
+        }
+      })
+    }
+  }
+}
+
+</script>
+<style>
+</style>

src/views/EquipmentManager/DeviceMonitoring/EditForm.vue

@@ -0,0 +1,222 @@
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" title="编辑备品备件" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
+        <el-form-item label="备件编码" prop="name">
+          <el-input v-model="formData.code" placeholder="请输入备件编码" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item label="备件名称" prop="name">
+          <el-input v-model="formData.name" placeholder="请输入备件名称" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item label="备件型号" prop="sparePartModel">
+          <el-input
+            v-model="formData.sparePartModel"
+            placeholder="请输入备件型号"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+        <el-form-item label="外部编码" prop="externalCode">
+          <el-input
+            v-model="formData.externalCode"
+            placeholder="请输入备件型号"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+        <el-form-item label="单位" prop="accessoryUnit">
+          <el-select v-model="formData.accessoryUnit" placeholder="请选择单位" clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in accessoryUnitOptions"
+              :key="index"
+              :label="item.label"
+              :value="item.value"
+              :disabled="item.disabled"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="批次号" prop="batchNumber">
+          <el-input v-model="formData.batchNumber" type="number" placeholder="请输入批次号" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item label="数量" prop="accessoryNumber">
+          <el-input v-model="formData.accessoryNumber" type="number" placeholder="请输入数量" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item label="进厂时间" prop="entryTime">
+          <el-date-picker
+            v-model="formData.entryTime"
+            format="yyyy-MM-dd"
+            :style="{width: '100%'}"
+            placeholder="请选择进厂时间"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="供应商" prop="supplierId">
+          <el-select v-model="formData.supplierId" placeholder="请选择供应商" clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in supplierIdOptions"
+              :key="index"
+              :label="item.label"
+              :value="item.value"
+              :disabled="item.disabled"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="接收人" prop="receiver">
+          <el-input v-model="formData.receiver" placeholder="请输入接收人" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="formData.remark" placeholder="请输入备注" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { getSpareInfo, editSpare } from '@/api/equipment/spare'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: {
+    targetInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      formData: {
+        code: undefined,
+        name: undefined,
+        sparePartModel: undefined,
+        accessoryUnit: undefined,
+        batchNumber: undefined,
+        accessoryNumber: undefined,
+        entryTime: null,
+        supplierId: undefined,
+        receiver: undefined,
+        remark: undefined,
+        externalCode: undefined
+      },
+      rules: {
+        code: [{
+          required: true,
+          message: '请输入备件编码',
+          trigger: 'blur'
+        }],
+        externalCode: [{
+          required: true,
+          message: '请输入外部编码',
+          trigger: 'blur'
+        }],
+        name: [{
+          required: true,
+          message: '请输入备件名称',
+          trigger: 'blur'
+        }],
+        sparePartModel: [{
+          required: true,
+          message: '请输入备件型号',
+          trigger: 'blur'
+        }],
+        accessoryUnit: [{
+          required: true,
+          message: '请选择单位',
+          trigger: 'change'
+        }],
+        batchNumber: [{
+          required: true,
+          message: '请输入批次号',
+          trigger: 'blur'
+        }],
+        accessoryNumber: [{
+          required: true,
+          message: '请输入数量',
+          trigger: 'blur'
+        }],
+        entryTime: [{
+          required: true,
+          message: '请选择进厂时间',
+          trigger: 'change'
+        }],
+        supplierId: [{
+          required: true,
+          message: '请选择供应商',
+          trigger: 'change'
+        }],
+        receiver: [{
+          required: true,
+          message: '请输入接收人',
+          trigger: 'blur'
+        }],
+        remark: [{
+          required: false,
+          message: '请输入备注',
+          trigger: 'blur'
+        }]
+      },
+      accessoryUnitOptions: [{
+        'label': '选项一',
+        'value': 1
+      }, {
+        'label': '选项二',
+        'value': 2
+      }],
+      supplierIdOptions: [{
+        'label': '选项一',
+        'value': 1
+      }, {
+        'label': '选项二',
+        'value': 2
+      }]
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    onOpen() {
+      this.getDetail()
+    },
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        const result = await editSpare({
+          ...this.formData,
+          id: this.targetInfo?.id
+        })
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '修改成功！'
+          })
+          this.$emit('done')
+          this.close()
+        }
+      })
+    },
+    async getDetail() {
+      const result = await getSpareInfo({
+        id: this.targetInfo?.id
+      })
+      if (result.code === 0) {
+        this.formData = result.data
+        // console.log(result)
+      }
+    }
+  }
+}
+
+</script>
+<style>
+</style>

src/views/EquipmentManager/DeviceMonitoring/index.vue

@@ -0,0 +1,167 @@
+<!--
+ * @Date: 2020-12-15 15:36:52
+ * @LastEditors: guo
+ * @LastEditTime: 2021-03-20 17:51:55
+ * @FilePath: \basic-admin\src\views\EquipmentManager\DeviceMonitoring\index.vue
+ * @Description:
+-->
+<template>
+  <div class="usermanager-container">
+    <div class="method-btn-area">
+      <el-input v-model="listQuery.keywords" :placeholder="$t('module.equipmentManager.monitoring.searchPlaceholder')" style="width: 200px;" clearable />
+      <el-button @click="getList">{{ 'btn.search' | i18nFilter }}</el-button>
+      <!-- <el-button type="primary" @click="showDialog = true">{{ 'btn.add' | i18nFilter }}</el-button> -->
+    </div>
+    <base-table :table-config="tableProps" :table-data="list" :is-loading="listLoading" :page="listQuery.current" :limit="listQuery.size">
+      <method-btn slot="handleBtn" :method-list="tableBtn" @clickBtn="handleClick" />
+    </base-table>
+    <pagination :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" />
+    <add-form :visible.sync="showDialog" @done="getList" />
+    <edit-form :visible.sync="showEditDialog" :target-info="{id: curEditId}" @done="getList" />
+  </div>
+</template>
+
+<script>
+// import dataDict from '@/filters/DataDict'
+// edit here
+import { timeFormatter } from '@/filters'
+const statusTableFilter = value => {
+  const table = {
+    '0': 'productive',
+    '1': 'standby',
+    '2': 'unscheduled downtime',
+    '3': 'scheduled downtime',
+    '4': 'engineering',
+    '5': 'non-scheduled'
+  }
+  return table[value] ? table[value] : value
+}
+const tableBtn = [{
+  type: 'detail',
+  btnName: 'btn.detail'
+}]
+const tableProps = [{
+  prop: 'code',
+  label: i18n.t('module.equipmentManager.monitoring.code'),
+  align: 'center'
+}, {
+  prop: 'name',
+  label: i18n.t('module.equipmentManager.monitoring.name'),
+  align: 'center'
+}, {
+  prop: 'status',
+  label: i18n.t('module.equipmentManager.monitoring.status'),
+  align: 'center',
+  filter: statusTableFilter
+}, {
+  prop: 'startTime',
+  label: i18n.t('module.equipmentManager.monitoring.startTime'),
+  align: 'center',
+  filter: timeFormatter
+  // filter: dataDict('enableState')
+}, {
+  prop: 'totalCount',
+  label: i18n.t('module.equipmentManager.monitoring.totalCount'),
+  align: 'center'
+}, {
+  prop: 'repairTime',
+  label: i18n.t('module.equipmentManager.monitoring.repairTime'),
+  align: 'center',
+  filter: timeFormatter
+}]
+import AddForm from './AddForm'
+import EditForm from './EditForm'
+import BaseTable from '@/components/BaseTable'
+// edit here
+import { getDeviceMonitoringList } from '@/api/equipment/monitoring'
+import { getDictSupplier } from '@/api/dict/index'
+import { dictChange, dictFilter } from '@/utils'
+import Pagination from '@/components/Pagination'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import i18n from '@/lang'
+export default {
+  name: 'OrgManager',
+  components: { Pagination, BaseTable, MethodBtn, AddForm, EditForm },
+  props: {},
+  data() {
+    return {
+      tableBtn,
+      tableProps: [],
+      list: [],
+      total: 0,
+      listLoading: true,
+      showDialog: false,
+      curEditId: null,
+      showEditDialog: false,
+      listQuery: {
+        current: 1,
+        size: 10,
+        keywords: ''
+      },
+      dict: {
+        supplier: []
+      }
+    }
+  },
+  async created() {
+    await this.getDict()
+    await this.preprocess()
+    await this.getList()
+    // this.listLoading = false
+  },
+  mounted() {},
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      switch (raw.type) {
+        case 'detail':
+          // this.showEditDialog = true
+          this.curEditId = raw.data.id
+          break
+      }
+    },
+    async getList() {
+      this.listLoading = true
+      // edit here
+      const res = await getDeviceMonitoringList(this.listQuery)
+      if (res.code === 0) {
+        this.list = res.data
+        this.total = res.data.total
+        this.listLoading = false
+      }
+    },
+    async getDict() {
+      const result = await getDictSupplier()
+      this.dict.supplier = result.data
+    },
+    async preprocess() {
+      this.tableProps = tableProps.map(item => {
+        if (this.dict[item.prop]) {
+          console.log(dictChange(this.dict[item.prop], { key: 'id', value: 'name' }))
+          item.filter = dictFilter(dictChange(this.dict[item.prop], { key: 'id', value: 'name' }))
+        }
+        return item
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.usermanager-container {
+  padding: 20px;
+  .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+  }
+}
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>

src/views/EquipmentManager/MaintainLog/AddLog.vue

@@ -0,0 +1,358 @@
+<template>
+  <div class="form-container">
+    <div class="method-btn-area">
+      <el-button type="primary" plain icon="el-icon-arrow-left" @click="turnBack">{{ 'btn.back' | i18nFilter }}</el-button>
+    </div>
+    <el-row :gutter="15">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="180px">
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.maintainlog.equipmentId')" prop="equipmentId">
+            <el-select
+              v-model="formData.equipmentId"
+              :placeholder="$t('module.equipmentManager.maintainlog.placeholderequipmentId')"
+              clearable
+              :style="{width: '100%'}"
+            >
+              <el-option
+                v-for="(item, index) in dict.device"
+                :key="index"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.maintainlog.maintenanceOrderNumber')" prop="logMaintenanceOrderNumber">
+            <el-input v-model="formData.logMaintenanceOrderNumber" :placeholder="$t('module.equipmentManager.maintainlog.placeholdermaintenanceOrderNumber')" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <!-- <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.maintainlog.maintainNextTime')" prop="nextMaintenanceTime">
+            <el-date-picker
+              v-model="formData.nextMaintenanceTime"
+              type="datetime"
+              :style="{width: '100%'}"
+              :placeholder="$t('module.equipmentManager.maintainlog.placeholdermaintainNextTime')"
+              clearable
+            />
+          </el-form-item>
+        </el-col> -->
+        <el-col :span="12">
+          <el-form-item :label="$t('module.equipmentManager.maintainlog.maintainStartTime')" prop="actualStartTime">
+            <el-date-picker
+              v-model="formData.actualStartTime"
+              type="datetime"
+              :style="{width: '100%'}"
+              :placeholder="$t('module.equipmentManager.maintainlog.placeholdermaintainEndTime')"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('module.equipmentManager.maintainlog.maintainEndTime')" prop="actualEndTime">
+            <el-date-picker
+              v-model="formData.actualEndTime"
+              type="datetime"
+              :style="{width: '100%'}"
+              :placeholder="$t('module.equipmentManager.maintainlog.placeholdermaintainEndTime')"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.maintainlog.maintainDuration')" prop="maintainDuration">
+            <el-input v-model="formData.maintainDuration" :placeholder="$t('module.equipmentManager.maintainlog.placeholdermaintainDuration')" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.maintainlog.maintainWorkerId')" prop="maintainWorkerId">
+            <el-select
+              v-model="formData.maintainWorkerId"
+              :placeholder="$t('module.equipmentManager.maintainlog.placeholdermaintainWorkerId')"
+              clearable
+              multiple
+              :style="{width: '100%'}"
+            >
+              <el-option
+                v-for="(item, index) in dict.worker"
+                :key="index"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.maintainplan.status')" prop="status">
+            <el-select
+              v-model="formData.status"
+              :placeholder="$t('module.equipmentManager.maintainplan.placeholderstatus')"
+              clearable
+              :style="{width: '100%'}"
+            >
+              <el-option
+                :label="$t('module.equipmentManager.repair.maintenanceStatusNo')"
+                :value="0"
+              />
+              <el-option
+                :label="$t('module.equipmentManager.repair.maintenanceStatusYes')"
+                :value="1"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('module.equipmentManager.maintainplan.maintainType')" prop="maintainType">
+            <el-select
+              v-model="formData.maintainType"
+              :placeholder="$i18nForm(['placeholder.input', $t('module.equipmentManager.maintainlog.placeholdermaintainType')])"
+              celearable
+              :style="{width: '100%'}"
+            >
+              <el-option
+                v-for="(item, index) in dict.maintainType"
+                :key="index"
+                :label="item.dataName"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.maintainlog.maintenanceDetail')" prop="maintenanceDes">
+            <el-input
+              v-model="formData.maintenanceDes"
+              type="textarea"
+              :placeholder="$t('module.equipmentManager.maintainlog.placeholdermaintenanceDetail')"
+              :autosize="{minRows: 4, maxRows: 4}"
+              :style="{width: '100%'}"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.maintainlog.annex')" prop="annex">
+            <el-upload
+              ref="annex"
+              :file-list="annexfileList"
+              :action="annexAction"
+              :before-upload="annexBeforeUpload"
+              name="annex"
+            >
+              <el-button size="small" type="primary" icon="el-icon-upload">{{ 'btn.upload' | i18nFilter }}</el-button>
+            </el-upload>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.maintainlog.remark')" prop="remark">
+            <el-input v-model="formData.remark" :placeholder="$t('module.equipmentManager.maintainlog.placeholderremark')" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item size="large">
+            <el-button type="primary" @click="submitForm">{{ 'btn.submit' | i18nFilter }}</el-button>
+            <el-button @click="resetForm">{{ 'btn.reset' | i18nFilter }}</el-button>
+          </el-form-item>
+        </el-col>
+      </el-form>
+    </el-row>
+  </div>
+</template>
+<script>
+import { addMaintainLog, getMaintainPlan, getLogCode } from '@/api/equipment/maintain'
+import { getDictDevice, getDictWorker } from '@/api/dict'
+import i18n from '@/lang'
+import { timeIsBefore } from '@/utils'
+import { dataDictionaryDataList } from '@/api/basicData/dataDictionary'
+export default {
+  components: {},
+  props: [],
+  data() {
+    return {
+      formData: {
+        equipmentId: undefined,
+        logMaintenanceOrderNumber: undefined,
+        nextMaintenanceTime: null,
+        actualStartTime: null,
+        maintainWorkerId: undefined,
+        actualEndTime: undefined,
+        maintenanceDes: undefined,
+        annex: null,
+        remark: undefined,
+        status: undefined
+      },
+      rules: {
+        equipmentId: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainlog.placeholderequipmentId'),
+          trigger: 'change'
+        }],
+        logMaintenanceOrderNumber: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainlog.placeholdermaintenanceOrderNumber'),
+          trigger: 'change'
+        }],
+        maintainType: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainlog.placeholdermaintainType'),
+          trigger: 'blur'
+        }],
+        nextMaintenanceTime: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.maintainlog.placeholdermaintainNextTime'),
+          trigger: 'change'
+        }],
+        maintainDuration: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainplan.placeholdermaintainDuration'),
+          trigger: 'blur'
+        }],
+        actualStartTime: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainlog.placeholderactualStartTime'),
+          trigger: 'change'
+        }],
+        actualEndTime: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainlog.placeholderactualEndTime'),
+          trigger: 'change'
+        }],
+        maintainWorkerId: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainlog.placeholdermaintainWorkerId'),
+          trigger: 'change'
+        }],
+        maintenanceDes: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainlog.placeholdermaintenanceDetail'),
+          trigger: 'blur'
+        }],
+        status: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainplan.placeholderstatus'),
+          trigger: 'blur'
+        }],
+        remark: []
+      },
+      annexAction: 'https://jsonplaceholder.typicode.com/posts/',
+      annexfileList: [],
+      dict: {
+        device: [],
+        worker: [],
+        maintainType: []
+      }
+    }
+  },
+  computed: {
+    orderId() {
+      return this.$route.query.orderId
+    }
+  },
+  watch: {},
+  created() {},
+  mounted() {
+    this.formData.maintainPlanId = this.$route.query.orderId
+    this.getInfo()
+    this.getDict()
+  },
+  methods: {
+    submitForm() {
+      console.log(this.formData)
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        // TODO 提交表单
+        if (this.formData.actualStartTime && this.formData.actualEndTime && !timeIsBefore(this.formData.actualStartTime, this.formData.actualEndTime)) {
+          this.$message({
+            type: 'error',
+            message: '请确保时间前后顺序正确！'
+          })
+          return console.log('拦截')
+        }
+        this.formData.maintainWorkerId = this.formData.maintainWorkerId.join(',')
+        await addMaintainLog(this.formData).then(res => {
+          if (res.code === 0) {
+            this.$message({
+              type: 'success',
+              message: '添加成功！'
+            })
+            this.$router.go(-1)
+          }
+        }).catch(res => {
+          if (res.code !== 0) {
+            this.formData.maintainWorkerId = this.formData.maintainWorkerId.split(',')
+            console.log(this.formData.maintainWorkerId)
+          }
+        })
+      })
+    },
+    resetForm() {
+      this.$refs['elForm'].resetFields()
+    },
+    annexBeforeUpload(file) {
+      const isRightSize = file.size / 1024 / 1024 < 2
+      if (!isRightSize) {
+        this.$message.error('文件大小超过 2MB')
+      }
+      return isRightSize
+    },
+    async getDict() {
+      const result3 = await getLogCode()
+      if (result3.code === 0) {
+        this.formData.logMaintenanceOrderNumber = result3.data
+      }
+      const result = await getDictDevice({
+        current: 1,
+        size: 999
+      })
+      this.dict.device = result
+      const result2 = await getDictWorker()
+      this.dict.worker = result2
+      const listQuery = {
+        current: 1,
+        size: 500
+      }
+      await dataDictionaryDataList(Object.assign(listQuery, {
+        dictTypeId: '1393401964580093954'
+      })).then(response => {
+        if (response.data.records) {
+          this.dict.maintainType = response.data.records
+          console.log(this.dict.maintainType)
+        }
+      })
+    },
+    turnBack() {
+      this.$router.go(-1)
+    },
+    async getInfo() {
+      if (this.orderId) {
+        const result = await getMaintainPlan({
+          id: this.orderId,
+          current: 1,
+          size: 10
+        })
+        if (result.code === 0) {
+          console.log(result)
+          this.formData.equipmentId = result.data.records[0].equipmentId
+          this.formData.status = result.data.records[0].status
+          console.log(this.formData.equipmentId)
+        }
+      }
+    }
+  }
+}
+
+</script>
+<style lang="scss">
+.form-container {
+  padding: 30px;
+    .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+  }
+}
+.el-upload__tip {
+  line-height: 1.2;
+}
+
+</style>

src/views/EquipmentManager/MaintainLog/EditLog.vue

@@ -0,0 +1,319 @@
+<template>
+  <div class="form-container">
+    <div class="method-btn-area">
+      <el-button type="primary" plain icon="el-icon-arrow-left" @click="turnBack">{{ 'btn.back' | i18nFilter }}</el-button>
+    </div>
+    <el-row :gutter="15">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="180px">
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.maintainlog.equipmentId')" prop="equipmentId">
+            <el-select
+              v-model="formData.equipmentId"
+              :placeholder="$t('module.equipmentManager.maintainlog.placeholderequipmentId')"
+              clearable
+              :style="{width: '100%'}"
+            >
+              <el-option
+                v-for="(item, index) in dict.device"
+                :key="index"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.maintainlog.maintenanceOrderNumber')" prop="logMaintenanceOrderNumber">
+            <el-input v-model="formData.logMaintenanceOrderNumber" :placeholder="$t('module.equipmentManager.maintainlog.placeholdermaintenanceOrderNumber')" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <!-- <el-col :span="23">
+          <el-form-item label="是否结束保养" prop="field104" required>
+            <el-switch v-model="formData.field104" />
+          </el-form-item>
+        </el-col> -->
+        <!-- <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.maintainlog.maintainNextTime')" prop="nextMaintenanceTime">
+            <el-date-picker
+              v-model="formData.nextMaintenanceTime"
+              type="datetime"
+              :style="{width: '100%'}"
+              :placeholder="$t('module.equipmentManager.maintainlog.placeholdermaintainNextTime')"
+              clearable
+            />
+          </el-form-item>
+        </el-col> -->
+        <el-col :span="12">
+          <el-form-item :label="$t('module.equipmentManager.maintainlog.maintainStartTime')" prop="actualStartTime">
+            <el-date-picker
+              v-model="formData.actualStartTime"
+              type="datetime"
+              :style="{width: '100%'}"
+              :placeholder="$t('module.equipmentManager.maintainlog.placeholdermaintainEndTime')"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('module.equipmentManager.maintainlog.maintainEndTime')" prop="actualEndTime">
+            <el-date-picker
+              v-model="formData.actualEndTime"
+              type="datetime"
+              :style="{width: '100%'}"
+              :placeholder="$t('module.equipmentManager.maintainlog.placeholdermaintainEndTime')"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.maintainlog.maintainWorkerId')" prop="maintainWorkerId">
+            <el-select
+              v-model="formData.maintainWorkerId"
+              :placeholder="$t('module.equipmentManager.maintainlog.placeholdermaintainWorkerId')"
+              clearable
+              multiple
+              :style="{width: '100%'}"
+            >
+              <el-option
+                v-for="(item, index) in dict.worker"
+                :key="index"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.maintainlog.maintainDuration')" prop="maintainDuration">
+            <el-input v-model="formData.maintainDuration" :placeholder="$t('module.equipmentManager.maintainlog.placeholdermaintainDuration')" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.maintainplan.status')" prop="status">
+            <el-select
+              v-model="formData.status"
+              :placeholder="$t('module.equipmentManager.maintainplan.placeholderstatus')"
+              clearable
+              :style="{width: '100%'}"
+            >
+              <el-option
+                :label="$t('module.equipmentManager.repair.maintenanceStatusNo')"
+                :value="0"
+              />
+              <el-option
+                :label="$t('module.equipmentManager.repair.maintenanceStatusYes')"
+                :value="1"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.maintainlog.maintenanceDetail')" prop="maintenanceDes">
+            <el-input
+              v-model="formData.maintenanceDes"
+              type="textarea"
+              :placeholder="$t('module.equipmentManager.maintainlog.placeholdermaintenanceDetail')"
+              :autosize="{minRows: 4, maxRows: 4}"
+              :style="{width: '100%'}"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.maintainlog.annex')" prop="field110">
+            <el-upload
+              ref="field110"
+              :file-list="field110fileList"
+              :action="field110Action"
+              :before-upload="field110BeforeUpload"
+              name="annex"
+            >
+              <el-button size="small" type="primary" icon="el-icon-upload">{{ 'btn.upload' | i18nFilter }}</el-button>
+            </el-upload>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.maintainlog.remark')" prop="remark">
+            <el-input v-model="formData.remark" :placeholder="$t('module.equipmentManager.maintainlog.placeholderremark')" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item size="large">
+            <el-button type="primary" @click="submitForm">{{ 'btn.submit' | i18nFilter }}</el-button>
+            <el-button @click="resetForm">{{ 'btn.reset' | i18nFilter }}</el-button>
+          </el-form-item>
+        </el-col>
+      </el-form>
+    </el-row>
+  </div>
+</template>
+<script>
+import { editMaintainLog, getMaintainLog } from '@/api/equipment/maintain'
+import { getDictDevice, getDictWorker } from '@/api/dict'
+import i18n from '@/lang'
+import { timeIsBefore } from '@/utils'
+export default {
+  components: {},
+  props: [],
+  data() {
+    return {
+      formData: {
+        equipmentId: undefined,
+        logMaintenanceOrderNumber: undefined,
+        field104: false,
+        nextMaintenanceTime: null,
+        actualStartTime: null,
+        maintainWorkerIdId: undefined,
+        actualEndTime: undefined,
+        maintenanceDes: undefined,
+        field110: null,
+        remark: undefined,
+        status: undefined
+      },
+      rules: {
+        equipmentId: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainlog.placeholderequipmentId'),
+          trigger: 'change'
+        }],
+        logMaintenanceOrderNumber: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainlog.placeholdermaintenanceOrderNumber'),
+          trigger: 'change'
+        }],
+        maintainWorkerId: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainlog.placeholdermaintainWorkerId'),
+          trigger: 'change'
+        }],
+        nextMaintenanceTime: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.maintainlog.placeholdermaintainNextTime'),
+          trigger: 'change'
+        }],
+        actualStartTime: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainlog.placeholderactualStartTime'),
+          trigger: 'change'
+        }],
+        actualEndTime: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainlog.placeholderactualEndTime'),
+          trigger: 'change'
+        }],
+        maintainDuration: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainplan.placeholdermaintainDuration'),
+          trigger: 'blur'
+        }],
+        maintenanceDes: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainlog.placeholdermaintenanceDetail'),
+          trigger: 'blur'
+        }],
+        status: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainplan.placeholderstatus'),
+          trigger: 'blur'
+        }],
+        remark: []
+      },
+      field110Action: 'https://jsonplaceholder.typicode.com/posts/',
+      field110fileList: [],
+      dict: {
+        device: [],
+        worker: []
+      }
+    }
+  },
+  computed: {
+    orderId() {
+      return this.$route.query.orderId
+    },
+    id() {
+      return this.$route.query.id
+    }
+  },
+  watch: {},
+  created() {},
+  mounted() {
+    this.getDict()
+    this.getInfo()
+  },
+  methods: {
+    submitForm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        // TODO 提交表单
+        if (this.formData.actualStartTime && this.formData.actualEndTime && !timeIsBefore(this.formData.actualStartTime, this.formData.actualEndTime)) {
+          this.$message({
+            type: 'error',
+            message: '请确保时间前后顺序正确！'
+          })
+          return console.log('拦截')
+        }
+        this.formData.maintainWorkerId = this.formData.maintainWorkerId.join(',')
+        await editMaintainLog(this.formData).then(res => {
+          if (res.code === 0) {
+            this.$message({
+              type: 'success',
+              message: '修改成功！'
+            })
+            this.$router.go(-1)
+          }
+        }).catch(res => {
+          if (res.code !== 0) {
+            this.formData.maintainWorkerId = this.formData.maintainWorkerId.split(',')
+            console.log(this.formData.maintainWorkerId)
+          }
+        })
+      })
+    },
+    resetForm() {
+      this.$refs['elForm'].resetFields()
+    },
+    field110BeforeUpload(file) {
+      const isRightSize = file.size / 1024 / 1024 < 10
+      if (!isRightSize) {
+        this.$message.error('文件大小超过 10MB')
+      }
+      return isRightSize
+    },
+    async getInfo() {
+      const result = await getMaintainLog({
+        id: this.id
+      })
+      if (result.code === 0) {
+        this.formData = result.data
+        this.formData.maintainWorkerId = this.formData.maintainWorkerId.split(',')
+      }
+    },
+    async getDict() {
+      const result = await getDictDevice({
+        current: 1,
+        size: 999
+      })
+      this.dict.device = result
+      const result2 = await getDictWorker()
+      this.dict.worker = result2
+    },
+    turnBack() {
+      this.$router.go(-1)
+    }
+  }
+}
+
+</script>
+<style lang="scss">
+.form-container {
+  padding: 30px;
+      .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+  }
+}
+.el-upload__tip {
+  line-height: 1.2;
+}
+
+</style>

src/views/EquipmentManager/MaintainLog/index.vue

@@ -0,0 +1,372 @@
+<!--
+ * @Date: 2020-12-15 15:36:52
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-05-25 08:57:51
+ * @FilePath: \basic-admin\src\views\EquipmentManager\MaintainLog\index.vue
+ * @Description:
+-->
+<template>
+  <div class="usermanager-container">
+    <div class="method-btn-area">
+      <span v-if="!orderId">
+        {{ $t('module.equipmentManager.maintainlog.equipment') }}：
+        <el-select v-model="listQuery.eqId">
+          <el-option :value="null" :label="$t('module.equipmentManager.maintainlog.planAll')" />
+          <el-option v-for="item in eqList" :key="item.id" :value="item.id" :label="item.name" />
+        </el-select>
+        {{ $t('module.equipmentManager.maintainlog.isplan') }}：
+        <el-select v-model="listQuery.relatePlan">
+          <el-option :value="0" :label="$t('module.equipmentManager.maintainlog.planAll')" />
+          <el-option :value="1" :label="$t('module.equipmentManager.maintainlog.planYes')" />
+          <el-option :value="-1" :label="$t('module.equipmentManager.maintainlog.planNo')" />
+        </el-select>
+        {{ $t('module.equipmentManager.maintainlog.maintainType') }}：
+        <el-select
+          v-model="listQuery.maintainType"
+          :placeholder="$i18nForm(['placeholder.input', $t('module.equipmentManager.maintainlog.placeholdermaintainType')])"
+        >
+          <el-option :value="null" :label="$t('module.equipmentManager.maintainlog.planAll')" />
+          <el-option
+            v-for="(item, index) in dict.maintainType"
+            :key="index"
+            :label="item.dataName"
+            :value="item.id"
+          />
+        </el-select>
+        {{ $t('module.equipmentManager.maintainlog.maintainWorkerId') }}：
+        <el-select
+          v-model="array"
+          :placeholder="$t('module.equipmentManager.maintainlog.placeholdermaintainWorkerId')"
+          clearable
+          multiple
+        >
+          <el-option
+            v-for="(item, index) in dict.worker"
+            :key="index"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </span>
+      {{ $t('module.equipmentManager.maintainlog.maintainlogTime') }}：
+      <el-date-picker
+        v-model="date"
+        type="daterange"
+        range-separator="-"
+        :start-placeholder="$t('module.equipmentManager.maintainlog.startTime')"
+        :end-placeholder="$t('module.equipmentManager.maintainlog.endTime')"
+        @change="changeTime"
+      />
+      <el-button type="primary" @click="getList">{{ 'btn.search' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="toAddPage">{{ 'btn.add' | i18nFilter }}</el-button>
+    </div>
+    <!-- <el-row :gutter="20">
+      <el-col :span="4">
+        <div class="tree-select-container">
+          <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick" />
+        </div>
+      </el-col>
+      <el-col :span="20">
+      </el-col>
+    </el-row> -->
+    <base-table :table-config="orderId ? tableProps : tablePropsOnly" :table-data="list" :is-loading="listLoading" :page="listQuery.current" :limit="listQuery.size">
+      <method-btn slot="handleBtn" :method-list="tableBtn" @clickBtn="handleClick" />
+    </base-table>
+    <pagination :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" />
+  </div>
+</template>
+
+<script>
+import dataDict from '@/filters/DataDict'
+import { timeFormatter } from '@/filters'
+import { getDictWorker } from '@/api/dict'
+const tableBtn = [{
+  type: 'edit',
+  btnName: 'btn.edit'
+}, {
+  type: 'delete',
+  btnName: 'btn.delete'
+}]
+const tableProps = [{
+  prop: 'logMaintenanceOrderNumber',
+  label: i18n.t('module.equipmentManager.maintainlog.maintenanceOrderNumber'),
+  align: 'center'
+}, {
+  prop: 'actualStartTime',
+  label: i18n.t('module.equipmentManager.maintainlog.maintainStartTime'),
+  align: 'center',
+  filter: timeFormatter
+}, {
+  prop: 'actualEndTime',
+  label: i18n.t('module.equipmentManager.maintainlog.maintainEndTime'),
+  align: 'center',
+  filter: timeFormatter
+}, {
+  prop: 'maintainDuration',
+  label: i18n.t('module.equipmentManager.maintainlog.maintainDuration'),
+  align: 'center'
+},
+{
+  prop: 'status',
+  label: i18n.t('module.equipmentManager.maintainplan.status'),
+  align: 'center',
+  filter: dataDict('doneStatus')
+},
+{
+  prop: 'equipmentCode',
+  label: i18n.t('module.equipmentManager.maintainlog.equipmentCode'),
+  align: 'center'
+  // filter: dataDict('enableState')
+},
+// {
+//   prop: 'nextMaintenanceTime',
+//   label: i18n.t('module.equipmentManager.maintainlog.nextMaintenanceTime'),
+//   align: 'center',
+//   filter: timeFormatter
+// },
+// {
+//   prop: 'maintenanceDes',
+//   label: '保养记录',
+//   align: 'center'
+//   // filter: dataDict('enableState')
+// },
+{
+  prop: 'remark',
+  label: i18n.t('module.equipmentManager.maintainlog.remark'),
+  align: 'center'
+}]
+const tablePropsOnly = [{
+  prop: 'logMaintenanceOrderNumber',
+  label: i18n.t('module.equipmentManager.maintainlog.maintenanceOrderNumber'),
+  align: 'center'
+}, {
+  prop: 'actualStartTime',
+  label: i18n.t('module.equipmentManager.maintainlog.maintainStartTime'),
+  align: 'center',
+  filter: timeFormatter
+}, {
+  prop: 'actualEndTime',
+  label: i18n.t('module.equipmentManager.maintainlog.maintainEndTime'),
+  align: 'center',
+  filter: timeFormatter
+}, {
+  prop: 'maintainDuration',
+  label: i18n.t('module.equipmentManager.maintainlog.maintainDuration'),
+  align: 'center'
+},
+{
+  prop: 'relatePlan',
+  label: i18n.t('module.equipmentManager.maintainlog.isplan'),
+  align: 'center',
+  filter: dataDict('yesOrNoEquipment')
+},
+{
+  prop: 'status',
+  label: i18n.t('module.equipmentManager.maintainplan.status'),
+  align: 'center',
+  filter: dataDict('doneStatus')
+},
+{
+  prop: 'equipmentCode',
+  label: i18n.t('module.equipmentManager.maintainlog.equipmentCode'),
+  align: 'center'
+  // filter: dataDict('enableState')
+},
+// {
+//   prop: 'nextMaintenanceTime',
+//   label: i18n.t('module.equipmentManager.maintainlog.nextMaintenanceTime'),
+//   align: 'center',
+//   filter: timeFormatter
+// },
+// {
+//   prop: 'maintenanceDes',
+//   label: '保养记录',
+//   align: 'center'
+//   // filter: dataDict('enableState')
+// },
+{
+  prop: 'remark',
+  label: i18n.t('module.equipmentManager.maintainlog.remark'),
+  align: 'center'
+}]
+import BaseTable from '@/components/BaseTable'
+// edit here
+import { getMaintainLogList, delMaintainLog, getSingleMaintainLogList, getEqList } from '@/api/equipment/maintain'
+
+import Pagination from '@/components/Pagination'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { objFilter } from '@/utils'
+import i18n from '@/lang'
+import { dataDictionaryDataList } from '@/api/basicData/dataDictionary'
+export default {
+  name: 'OrgManager',
+  components: { Pagination, BaseTable, MethodBtn },
+  props: {},
+  data() {
+    return {
+      tableBtn,
+      tableProps,
+      tablePropsOnly,
+      list: [],
+      total: 0,
+      listLoading: true,
+      showDialog: false,
+      curEditId: null,
+      showEditDialog: false,
+      listQuery: {
+        current: 1,
+        size: 10,
+        startTime: '',
+        endTime: '',
+        relatePlan: 0,
+        maintainType: null,
+        eqId: null,
+        maintainWorkerId: undefined
+      },
+      dict: {
+        maintainType: [],
+        worker: []
+      },
+      date: null,
+      array: [],
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      eqList: []
+    }
+  },
+  computed: {
+    orderId() {
+      return this.$route.query.orderId
+    }
+  },
+  created() {
+    this.getEquipmentList()
+    this.getDict()
+  },
+  mounted() {},
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      switch (raw.type) {
+        case 'delete':
+          this.$confirm(i18n.t('deleteMsgBox.content'), i18n.t('deleteMsgBox.hint'), {
+            confirmButtonText: i18n.t('btn.confirm'),
+            cancelButtonText: i18n.t('btn.cancel'),
+            type: 'warning'
+          }).then(async() => {
+            // 走接口
+            const result = await delMaintainLog({
+              id: raw.data.id
+            })
+            if (result.code === 0) {
+              this.$message({
+                type: 'success',
+                message: i18n.t('deleteMsgBox.doneMsg')
+              })
+              this.getList()
+            }
+          })
+          break
+        case 'edit':
+          this.$router.push({
+            name: 'MaintainEditLog',
+            query: {
+              id: raw.data.id
+            }
+          })
+          break
+      }
+    },
+    async getList() {
+      this.listLoading = true
+      // edit here
+      if (this.orderId) {
+        const res = await getMaintainLogList(objFilter({
+          ...this.listQuery,
+          eqMaintenanceId: this.orderId
+        }))
+        if (res.code === 0) {
+          this.list = res.data.records
+          this.total = res.data.total
+          this.listLoading = false
+        }
+      } else {
+        if (this.array) {
+          console.log(this.array)
+          this.listQuery.maintainWorkerId = this.array.join(',')
+        }
+        const result = await getSingleMaintainLogList(this.listQuery)
+        if (result.code === 0) {
+          this.list = result.data.records
+          this.total = result.data.total
+          this.listLoading = false
+        }
+      }
+    },
+    async getEquipmentList() {
+      const res = await getEqList({
+        current: 1,
+        size: 999
+      })
+      this.getList()
+      if (res.code === 0) {
+        this.eqList = res.data.records
+      }
+    },
+    async getDict() {
+      const listQuery = {
+        current: 1,
+        size: 500
+      }
+      await dataDictionaryDataList(Object.assign(listQuery, {
+        dictTypeId: '1393401964580093954'
+      })).then(response => {
+        if (response.data.records) {
+          this.dict.maintainType = response.data.records
+          console.log(this.dict.maintainType)
+        }
+      })
+      const result2 = await getDictWorker()
+      this.dict.worker = result2
+    },
+    toAddPage() {
+      this.$router.push({
+        name: 'MaintainAddLog',
+        query: {
+          orderId: this.orderId
+        }
+      })
+    },
+    changeTime(val) {
+      this.listQuery.startTime = val ? val[0] : null
+      this.listQuery.endTime = val ? val[1] : null
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.usermanager-container {
+  padding: 20px;
+  .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+  }
+  .tree-select-container {
+    border: 1px solid #dfe6ec;
+    min-height: 400px;
+    padding: 20px;
+  }
+}
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>

src/views/EquipmentManager/MaintainPlan/AddForm.vue

@@ -0,0 +1,340 @@
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="$t('module.equipmentManager.maintainplan.addDialogTitle')" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="245px">
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.maintenanceOrderNumber')" prop="maintenanceOrderNumber">
+          <el-input
+            v-model="formData.maintenanceOrderNumber"
+            :placeholder="$t('module.equipmentManager.maintainplan.placeholdermaintenanceOrderNumber')"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+        <!-- <el-form-item :label="$t('module.equipmentManager.maintainplan.maintainDuration')" prop="maintainDuration">
+          <el-input v-model="formData.maintainDuration" :placeholder="$t('module.equipmentManager.maintainplan.placeholdermaintainDuration')" clearable :style="{width: '100%'}" />
+        </el-form-item> -->
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.equipmentId')" prop="equipmentId">
+          <el-select
+            v-model="formData.equipmentId"
+            :placeholder="$t('module.equipmentManager.maintainplan.placeholderequipmentId')"
+            clearable
+            :style="{width: '100%'}"
+            @change="getCode($event)"
+          >
+            <el-option
+              v-for="(item, index) in dict.device"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+              :disabled="item.disabled"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.equipmentCode')" prop="equipmentCode">
+          <el-input v-model="formData.equipmentCode" disabled :placeholder="$t('module.equipmentManager.maintainplan.placeholderequipmentCode')" :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.maintenancePeriodId')" prop="maintenancePeriodId">
+          <el-input v-model="formData.maintenancePeriodId" disabled :placeholder="$t('module.equipmentManager.maintainplan.placeholdermaintenancePeriodId')" :style="{width: '100%'}" />
+          <!-- <el-select
+            v-model="formData.maintenancePeriodId"
+            :placeholder="$t('module.equipmentManager.maintainplan.placeholdermaintenancePeriodId')"
+            clearable
+            :style="{width: '100%'}"
+          >
+            <el-option
+              v-for="(item, index) in dict.maintainPeriodList"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select> -->
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.erpIdentification')" prop="erpIdentification">
+          <el-input v-model="formData.erpIdentification" :placeholder="$t('module.equipmentManager.maintainplan.placeholdererpIdentification')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.maintainStartTime')" prop="maintainStartTime">
+          <el-date-picker
+            v-model="formData.maintainStartTime"
+            type="datetime"
+            :style="{width: '100%'}"
+            :placeholder="$t('module.equipmentManager.maintainplan.placeholdermaintainStartTime')"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.maintainEndTime')" prop="maintainEndTime">
+          <el-date-picker
+            v-model="formData.maintainEndTime"
+            type="datetime"
+            :style="{width: '100%'}"
+            :placeholder="$t('module.equipmentManager.maintainplan.placeholdermaintainEndTime')"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.maintainWorkerId')" prop="maintainWorkerId">
+          <el-select v-model="formData.maintainWorkerId" multiple>
+            <el-option
+              v-for="(item,index) in dict.worker"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.maintainType')" prop="maintainType">
+          <el-select
+            v-model="formData.maintainType"
+            :placeholder="$i18nForm(['placeholder.input', $t('module.equipmentManager.maintainplan.placeholdermaintainType')])"
+            celearabl
+            :style="{width: '100%'}"
+          >
+            <el-option
+              v-for="(item, index) in dict.maintainType"
+              :key="index"
+              :label="item.dataName"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.maintainFuncDesc')" prop="maintainFuncDesc">
+          <el-input v-model="formData.maintainFuncDesc" :placeholder="$t('module.equipmentManager.maintainplan.placeholdermaintainFuncDesc')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.status')" prop="status">
+          <el-select
+            v-model="formData.status"
+            :placeholder="$t('module.equipmentManager.maintainplan.placeholderstatus')"
+            clearable
+            :style="{width: '100%'}"
+          >
+            <el-option
+              :label="$t('module.equipmentManager.repair.maintenanceStatusNo')"
+              :value="0"
+            />
+            <el-option
+              :label="$t('module.equipmentManager.repair.maintenanceStatusYes')"
+              :value="1"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.maintainlog.annex')" prop="annex">
+          <el-upload
+            ref="annex"
+            :data="dataObj"
+            name="files"
+            :file-list="fileList"
+            :action="uploadPath"
+            :before-upload="annexBeforeUpload"
+            :on-success="handleSuccess"
+            class="btn"
+          >
+            <el-button size="small" type="primary" icon="el-icon-upload">{{ 'btn.upload' | i18nFilter }}</el-button>
+          </el-upload>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.remark')" prop="remark">
+          <el-input v-model="formData.remark" :placeholder="$t('module.equipmentManager.maintainplan.placeholderremark')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { addMaintainPlan, getPlanCode } from '@/api/equipment/maintain'
+import { getDictDevice, maintainPeriod, getDictWorker } from '@/api/dict'
+import { uploadPath } from '@/api/basic'
+import { equipmentInfoDetail } from '@/api/basicData/Equipment/equipmentInfo'
+import { dataDictionaryDataList } from '@/api/basicData/dataDictionary'
+import i18n from '@/lang'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: [],
+  data() {
+    return {
+      uploadPath,
+      annexfileList: [],
+      fileList: [],
+      dataObj: { typeCode: 'file' },
+      formData: {
+        maintenanceOrderNumber: null,
+        maintenancePeriod: undefined,
+        equipmentId: undefined,
+        maintainStartTime: null,
+        maintainEndTime: null,
+        status: 0,
+        maintainFuncDesc: null,
+        remark: undefined,
+        annexUrl: null,
+        maintainWorkerId: null,
+        groupId: undefined
+      },
+      rules: {
+        maintenanceOrderNumber: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainplan.placeholdermaintenanceOrderNumber'),
+          trigger: 'blur'
+        }],
+        maintenancePeriodId: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.maintainplan.placeholdermaintenancePeriodId'),
+          trigger: 'change'
+        }],
+        equipmentId: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainplan.placeholderequipmentId'),
+          trigger: 'change'
+        }],
+        maintainStartTime: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainplan.placeholdermaintainStartTime'),
+          trigger: 'change'
+        }],
+        maintainEndTime: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainplan.placeholdermaintainEndTime'),
+          trigger: 'change'
+        }],
+        lastMaintainTime: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainplan.placeholderlastMaintainTime'),
+          trigger: 'change'
+        }],
+        nextMaintainTime: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainplan.placeholdernextMaintainTime'),
+          trigger: 'change'
+        }],
+        remark: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.maintainplan.placeholderremark'),
+          trigger: 'blur'
+        }],
+        // maintainDuration: [{
+        //   required: true,
+        //   message: i18n.t('module.equipmentManager.maintainplan.placeholdermaintainDuration'),
+        //   trigger: 'blur'
+        // }],
+        maintainFuncDesc: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.maintainplan.placeholdermaintainFuncDesc'),
+          trigger: 'blur'
+        }],
+        maintainType: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.maintainplan.placeholdermaintainType'),
+          trigger: 'blur'
+        }],
+        erpIdentification: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.maintainplan.placeholdererpIdentification'),
+          trigger: 'blur'
+        }]
+      },
+      dict: {
+        device: [],
+        maintainPeriodList: [],
+        worker: [],
+        maintainType: []
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {
+    this.getDict()
+  },
+  mounted() {},
+  methods: {
+    async onOpen() {
+      const result = await getPlanCode()
+      if (result.code === 0) {
+        this.formData.maintenanceOrderNumber = result.data
+      }
+    },
+    onClose() {
+      this.$refs['elForm'].resetFields()
+      this.fileList = []
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        this.formData.maintainWorkerId = this.formData.maintainWorkerId.join(',')
+        await addMaintainPlan(this.formData).then(res => {
+          if (res.code === 0) {
+            this.$message({
+              type: 'success',
+              message: '添加成功！'
+            })
+            this.$emit('done')
+            this.close()
+          }
+        }).catch(res => {
+          if (res.code !== 0) {
+            this.formData.maintainWorkerId = this.formData.maintainWorkerId.split(',')
+            console.log(this.formData.maintainWorkerId)
+          }
+        })
+      })
+    },
+    async getCode($event) {
+      const result = await equipmentInfoDetail($event)
+      if (result.code === 0) {
+        this.formData.equipmentCode = result.data.code
+        this.formData.maintenancePeriodId = result.data.maintenanceCycle
+        this.$forceUpdate()
+      }
+    },
+    annexBeforeUpload(file) {
+      const isRightSize = file.size / 1024 / 1024 < 2
+      if (!isRightSize) {
+        this.$message.error('文件大小超过 2MB')
+      }
+      return isRightSize
+    },
+    handleSuccess(res, file) {
+      console.log(res)
+      this.fileList.push({ name: file.name, id: res.data[0].id })
+      const arr = this.fileList.map(item => {
+        return {
+          name: item.name,
+          id: item.id
+        }
+      })
+      let str = ''
+      arr.forEach((v) => {
+        str += v.name + ':' + v.id + ';'
+      })
+      this.formData.annexUrl = str.slice(0, -1)
+    },
+    async getDict() {
+      const result = await getDictDevice({
+        current: 1,
+        size: 999
+      })
+      this.dict.device = result
+      const result2 = await maintainPeriod()
+      this.dict.maintainPeriodList = result2
+      const result4 = await getDictWorker()
+      this.dict.worker = result4
+      const listQuery = {
+        current: 1,
+        size: 500
+      }
+      await dataDictionaryDataList(Object.assign(listQuery, {
+        dictTypeId: '1393401964580093954'
+      })).then(response => {
+        if (response.data.records) {
+          this.dict.maintainType = response.data.records
+        }
+      })
+    }
+  }
+}
+</script>
+<style>
+</style>

src/views/EquipmentManager/MaintainPlan/EditForm.vue

@@ -0,0 +1,420 @@
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="$t('module.equipmentManager.maintainplan.editDialogTitle')" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="245px">
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.maintenanceOrderNumber')" prop="maintenanceOrderNumber">
+          <el-input
+            v-model="formData.maintenanceOrderNumber"
+            :placeholder="$t('module.equipmentManager.maintainplan.placeholdermaintenanceOrderNumber')"
+            clearable
+            :style="{width: '100%'}"
+            :disabled="readonly"
+          />
+        </el-form-item>
+        <!-- <el-form-item :label="$t('module.equipmentManager.maintainplan.maintainDuration')" prop="maintainDuration">
+          <el-input v-model="formData.maintainDuration" :placeholder="$t('module.equipmentManager.maintainplan.placeholdermaintainDuration')" clearable :style="{width: '100%'}" />
+        </el-form-item> -->
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.equipmentId')" prop="equipmentId">
+          <el-select
+            v-model="formData.equipmentId"
+            :placeholder="$t('module.equipmentManager.maintainplan.placeholderequipmentId')"
+            clearable
+            :style="{width: '100%'}"
+            :disabled="readonly"
+            @change="getCode($event)"
+          >
+            <el-option
+              v-for="(item, index) in dict.device"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+              :disabled="item.disabled"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.equipmentCode')" prop="equipmentCode">
+          <el-input v-model="formData.equipmentCode" disabled :placeholder="$t('module.equipmentManager.maintainplan.placeholderequipmentCode')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.maintenancePeriodId')" prop="maintenancePeriodId">
+          <el-input v-model="formData.maintenancePeriodId" disabled :placeholder="$t('module.equipmentManager.maintainplan.placeholdermaintenancePeriodId')" :style="{width: '100%'}" />
+          <!-- <el-select
+            v-model="formData.maintenancePeriodId"
+            :placeholder="$t('module.equipmentManager.maintainplan.placeholdermaintenancePeriodId')"
+            clearable
+            :style="{width: '100%'}"
+            :disabled="readonly"
+          >
+            <el-option
+              v-for="(item, index) in dict.maintainPeriodList"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select> -->
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.maintainWorkerId')" prop="maintainWorkerId">
+          <el-select v-model="formData.maintainWorkerId" :disabled="readonly" multiple>
+            <el-option
+              v-for="(item,index) in dict.worker"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-if="readonly" :label="$t('module.equipmentManager.maintainplan.lastMaintainWorkerId')">
+          <el-select v-model="lastFormData.maintainWorkerId" :placeholder="$t('module.equipmentManager.maintainplan.lastMaintainWorkerId')" disabled multiple>
+            <el-option
+              v-for="(item,index) in dict.worker"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.maintainType')" prop="maintainType">
+          <el-select
+            v-model="formData.maintainType"
+            :placeholder="$i18nForm(['placeholder.input', $t('module.equipmentManager.maintainplan.placeholdermaintainType')])"
+            clearable
+            :style="{width: '100%'}"
+            :disabled="readonly"
+          >
+            <el-option
+              v-for="(item, index) in dict.maintainType"
+              :key="index"
+              :label="item.dataName"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.erpIdentification')" prop="erpIdentification">
+          <el-input v-model="formData.erpIdentification" :disabled="readonly" :placeholder="$t('module.equipmentManager.maintainplan.placeholdererpIdentification')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <!-- <el-form-item :label="$t('module.equipmentManager.maintainplan.lastMaintainTime')" prop="lastMaintainTime">
+          <el-date-picker
+            v-model="formData.lastMaintainTime"
+            type="datetime"
+            :style="{width: '100%'}"
+            :placeholder="$t('module.equipmentManager.maintainplan.placeholderlastMaintainTime')"
+            disabled
+          />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.nextMaintainTime')" prop="nextMaintainTime">
+          <el-date-picker
+            v-model="formData.nextMaintainTime"
+            type="datetime"
+            :style="{width: '100%'}"
+            :placeholder="$t('module.equipmentManager.maintainplan.placeholdernextMaintainTime')"
+            disabled
+          />
+        </el-form-item> -->
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.maintainStartTime')" prop="maintainStartTime">
+          <el-date-picker
+            v-model="formData.maintainStartTime"
+            type="datetime"
+            :style="{width: '100%'}"
+            :placeholder="$t('module.equipmentManager.maintainplan.placeholdermaintainStartTime')"
+            clearable
+            :disabled="readonly"
+          />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.maintainEndTime')" prop="maintainEndTime">
+          <el-date-picker
+            v-model="formData.maintainEndTime"
+            type="datetime"
+            :style="{width: '100%'}"
+            :placeholder="$t('module.equipmentManager.maintainplan.placeholdermaintainEndTime')"
+            clearable
+            :disabled="readonly"
+          />
+        </el-form-item>
+        <el-form-item v-if="readonly" :label="$t('module.equipmentManager.maintainplan.lastMaintainStartTime')">
+          <el-date-picker
+            v-model="lastFormData.maintainStartTime"
+            type="datetime"
+            :style="{width: '100%'}"
+            clearable
+            disabled
+          />
+        </el-form-item>
+        <el-form-item v-if="readonly" :label="$t('module.equipmentManager.maintainplan.lastMaintainEndTime')">
+          <el-date-picker
+            v-model="lastFormData.maintainEndTime"
+            type="datetime"
+            :style="{width: '100%'}"
+            clearable
+            disabled
+          />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.maintainlog.annex')" prop="annex">
+          <el-upload
+            ref="annex"
+            :data="dataObj"
+            name="files"
+            :file-list="fileList"
+            :action="uploadPath"
+            :show-file-list="true"
+            :before-upload="annexBeforeUpload"
+            :on-success="handleSuccess"
+            :on-preview="openFile"
+            class="btn"
+            :disabled="readonly"
+          >
+            <el-button :disabled="readonly" size="small" type="primary" icon="el-icon-upload">{{ 'btn.upload' | i18nFilter }}</el-button>
+          </el-upload>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.status')" prop="status">
+          <el-select
+            v-model="formData.status"
+            :placeholder="$t('module.equipmentManager.maintainplan.placeholderstatus')"
+            clearable
+            :style="{width: '100%'}"
+            :disabled="readonly"
+          >
+            <el-option
+              :label="$t('module.equipmentManager.repair.maintenanceStatusNo')"
+              :value="0"
+            />
+            <el-option
+              :label="$t('module.equipmentManager.repair.maintenanceStatusYes')"
+              :value="1"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.maintainFuncDesc')" prop="maintainFuncDesc">
+          <el-input v-model="formData.maintainFuncDesc" :disabled="readonly" :placeholder="$t('module.equipmentManager.maintainplan.placeholdermaintainFuncDesc')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.maintainplan.remark')" prop="remark">
+          <el-input v-model="formData.remark" :disabled="readonly" :placeholder="$t('module.equipmentManager.maintainplan.placeholderremark')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button v-if="!readonly" type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { editMaintainPlan, getMaintainPlan } from '@/api/equipment/maintain'
+import { maintainPeriod, getDictWorker } from '@/api/dict'
+import i18n from '@/lang'
+import { uploadPath } from '@/api/basic'
+import { equipmentInfoDetail } from '@/api/basicData/Equipment/equipmentInfo'
+import { dataDictionaryDataList } from '@/api/basicData/dataDictionary'
+import { getEqList } from '@/api/equipment/eqManager'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: {
+    targetInfo: {
+      type: Object,
+      default: () => ({})
+    },
+    readonly: {
+      type: Boolean,
+      default: () => false
+    }
+  },
+  data() {
+    return {
+      formData: {
+        maintenanceOrderNumber: undefined,
+        maintenancePeriodId: undefined,
+        equipmentId: undefined,
+        maintainStartTime: null,
+        maintainEndTime: null,
+        remark: undefined,
+        annexUrl: null
+      },
+      lastFormData: {
+        maintainStartTime: null,
+        maintainEndTime: null,
+        maintainWorkerId: []
+      },
+      uploadPath,
+      fileList: null,
+      dataObj: { typeCode: 'file' },
+      rules: {
+        maintenanceOrderNumber: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainplan.placeholdermaintenanceOrderNumber'),
+          trigger: 'blur'
+        }],
+        maintenancePeriodId: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.maintainplan.placeholdermaintenancePeriodId'),
+          trigger: 'change'
+        }],
+        equipmentId: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainplan.placeholderequipmentId'),
+          trigger: 'change'
+        }],
+        maintainStartTime: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainplan.placeholdermaintainStartTime'),
+          trigger: 'change'
+        }],
+        maintainEndTime: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.maintainplan.placeholdermaintainEndTime'),
+          trigger: 'change'
+        }],
+        remark: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.maintainplan.placeholderremark'),
+          trigger: 'blur'
+        }]
+      },
+      maintenancePeriodOptions: [{
+        'label': '周',
+        'value': 'week'
+      }, {
+        'label': '月',
+        'value': 'month'
+      }, {
+        'label': '年',
+        'value': 'year'
+      }],
+      dict: {
+        device: [],
+        maintainPeriodList: []
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {
+    this.getDict()
+  },
+  mounted() {},
+  methods: {
+    openFile(file) {
+      console.log(file)
+      window.open(`${location.origin}/api/common/attachment/downloadFile?type=file&attachmentId=${file.id}`)
+    },
+    onOpen() {
+      this.getInfo()
+    },
+    onClose() {
+      this.$refs['elForm'].resetFields()
+      this.fileList = []
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      console.log(this.formData)
+      console.log(this.formData.maintainDuration)
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        this.formData.maintainWorkerId = this.formData.maintainWorkerId.join(',')
+        const result = await editMaintainPlan(this.formData)
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '编辑成功！'
+          })
+          this.$emit('done')
+          this.close()
+        }
+      })
+    },
+    annexBeforeUpload(file) {
+      const isRightSize = file.size / 1024 / 1024 < 2
+      if (!isRightSize) {
+        this.$message.error('文件大小超过 2MB')
+      }
+      return isRightSize
+    },
+    handleSuccess(res, file) {
+      console.log(res)
+      this.fileList.push({ name: file.name, id: res.data[0].id })
+      const arr = this.fileList.map(item => {
+        return {
+          name: item.name,
+          id: item.id
+        }
+      })
+      let str = ''
+      arr.forEach((v) => {
+        str += v.name + ':' + v.id + ';'
+      })
+      this.formData.annexUrl = str.slice(0, -1)
+    },
+    async getCode($event) {
+      const result = await equipmentInfoDetail($event)
+      if (result.code === 0) {
+        this.formData.equipmentCode = result.data.code
+        this.formData.maintenancePeriodId = result.data.maintenanceCycle
+        this.$forceUpdate()
+      }
+    },
+    async getInfo() {
+      const result = await getMaintainPlan({
+        id: this.targetInfo?.id,
+        current: 1,
+        size: 10
+      })
+      if (result.code === 0) {
+        this.formData = result.data.records[0]
+        if (this.readonly && this.formData.lastMaintainPlanId) {
+          this.getLastInfo(this.formData.lastMaintainPlanId)
+        }
+        // console.log(this.formData.annexUrl)
+        this.formData.maintainWorkerId = this.formData.maintainWorkerId.split(',')
+        if (this.formData.annexUrl) {
+          const arr = this.formData.annexUrl.split(';').map(v => {
+            const obj = {}
+            const a = v.split(':')
+            obj.name = a[0]
+            obj.id = a[1]
+            return obj
+          })
+          this.fileList = arr
+          // console.log(this.formData)
+        }
+      }
+    },
+    async getLastInfo(id) {
+      const result = await getMaintainPlan({
+        id,
+        current: 1,
+        size: 10
+      })
+      if (result.code === 0 && result.data.records.length > 0) {
+        this.lastFormData = result.data.records[0]
+        this.lastFormData.maintainWorkerId = this.lastFormData.maintainWorkerId.split(',')
+      }
+    },
+    async getDict() {
+      const result = await getEqList({
+        current: 1,
+        size: 999
+      })
+      this.dict.device = result.data.records
+      const result2 = await maintainPeriod()
+      this.dict.maintainPeriodList = result2
+      const result4 = await getDictWorker()
+      console.log(result4)
+      this.dict.worker = result4
+      const listQuery = {
+        current: 1,
+        size: 500
+      }
+      await dataDictionaryDataList(Object.assign(listQuery, {
+        dictTypeId: '1393401964580093954'
+      })).then(response => {
+        if (response.data.records) {
+          this.dict.maintainType = response.data.records
+        }
+      })
+    }
+  }
+}
+
+</script>
+<style>
+</style>

src/views/EquipmentManager/MaintainPlan/index.vue

@@ -0,0 +1,288 @@
+<!--
+ * @Date: 2020-12-15 15:36:52
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-12 10:11:25
+ * @FilePath: \basic-admin\src\views\EquipmentManager\MaintainPlan\index.vue
+ * @Description:
+-->
+<template>
+  <div class="usermanager-container">
+    <div class="method-btn-area">
+      {{ $t('module.equipmentManager.maintainplan.status') }}:
+      <el-select v-model="listQuery.status" :placeholder="$t('module.equipmentManager.maintainplan.searchPlaceholder')" clearable style="width: 200px;">
+        <el-option
+          label="全部"
+          value=""
+        />
+        <el-option
+          :label="$t('module.equipmentManager.repair.maintenanceStatusNo')"
+          :value="0"
+        />
+        <el-option
+          label="完成"
+          :value="1"
+        />
+      </el-select>
+      {{ $t('module.equipmentManager.maintainplan.equipmentId') }}:
+      <el-select v-model="listQuery.eqId" :placeholder="$t('module.equipmentManager.maintainplan.placeholderequipmentId')" clearable style="width: 200px;">
+        <el-option
+          v-for="(item, index) in dict.device"
+          :key="index"
+          :label="item.name"
+          :value="item.id"
+          :disabled="item.disabled"
+        />
+      </el-select>
+      <el-date-picker
+        v-model="listQuery.date"
+        type="daterange"
+        range-separator="-"
+        :start-placeholder="$t('module.equipmentManager.maintainplan.startTime')"
+        :end-placeholder="$t('module.equipmentManager.maintainplan.endTime')"
+        @change="changeTime"
+      />
+      <el-button type="primary" @click="getList">{{ 'btn.search' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="showDialog = true">{{ 'btn.add' | i18nFilter }}</el-button>
+    </div>
+    <!-- <el-row :gutter="20">
+      <el-col :span="4">
+        <div class="tree-select-container">
+          <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick" />
+        </div>
+      </el-col>
+      <el-col :span="20">
+      </el-col>
+    </el-row> -->
+    <base-table :table-config="tableProps" :table-data="list" :is-loading="listLoading" :page="listQuery.current" :limit="listQuery.size">
+      <method-btn slot="handleBtn" :width="260" :method-list="tableBtn" @clickBtn="handleClick" />
+    </base-table>
+    <pagination :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" />
+    <add-form :visible.sync="showDialog" @done="getList" />
+    <edit-form :readonly="readonly" :visible.sync="showEditDialog" :target-info="{id: curEditId}" @done="getList" />
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import dataDict from '@/filters/DataDict'
+// edit here
+import { timeFormatter } from '@/filters'
+const tableBtn = [{
+  type: 'detail',
+  btnName: 'btn.detail'
+}, {
+  type: 'edit',
+  btnName: 'btn.edit'
+}, {
+  type: 'delete',
+  btnName: 'btn.delete'
+}, {
+  type: 'check',
+  btnName: 'btn.checkLog'
+}]
+// 暂时隐藏
+const tableProps = [{
+  prop: 'maintenanceOrderNumber',
+  label: i18n.t('module.equipmentManager.maintainplan.maintenanceOrderNumber'),
+  align: 'center'
+}, {
+  prop: 'equipmentName',
+  label: i18n.t('module.equipmentManager.maintainplan.equipmentId'),
+  align: 'center'
+  // filter: dataDict('enableState')
+}, {
+  prop: 'maintenancePeriodId',
+  label: i18n.t('module.equipmentManager.maintainplan.maintenancePeriodId'),
+  align: 'center'
+},
+// {
+//   prop: 'groupName',
+//   label: i18n.t('module.equipmentManager.maintainplan.EquipmentGrouping'),
+//   align: 'center'
+// },
+{
+  prop: 'maintainStartTime',
+  label: i18n.t('module.equipmentManager.maintainplan.maintainStartTime'),
+  align: 'center',
+  filter: timeFormatter
+},
+{
+  prop: 'maintainEndTime',
+  label: i18n.t('module.equipmentManager.maintainplan.maintainEndTime'),
+  align: 'center',
+  filter: timeFormatter
+},
+{
+  prop: 'status',
+  label: i18n.t('module.equipmentManager.maintainplan.status'),
+  align: 'center',
+  filter: dataDict('doneStatus')
+},
+{
+  prop: 'maintainType',
+  label: i18n.t('module.equipmentManager.maintainplan.maintainType'),
+  align: 'center',
+  filter: dataDict('doneStatus')
+}
+// {
+//   prop: 'remark',
+//   label: i18n.t('module.equipmentManager.maintainplan.remark'),
+//   align: 'center'
+// }
+]
+import AddForm from './AddForm'
+import EditForm from './EditForm'
+import BaseTable from '@/components/BaseTable'
+import { objFilter } from '@/utils'
+// edit here
+import { getMaintainPlanList, delMaintainPlan } from '@/api/equipment/maintain'
+import { getDictDevice } from '@/api/dict'
+import { dataDictionaryDataList } from '@/api/basicData/dataDictionary'
+import Pagination from '@/components/Pagination'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import i18n from '@/lang'
+export default {
+  name: 'OrgManager',
+  components: { Pagination, BaseTable, MethodBtn, AddForm, EditForm },
+  props: {},
+  data() {
+    return {
+      tableBtn,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      showDialog: false,
+      curEditId: null,
+      showEditDialog: false,
+      readonly: false,
+      dict: {
+        device: []
+      },
+      listQuery: {
+        current: 1,
+        size: 10,
+        keywords: '',
+        status: '',
+        eqId: null,
+        startTime: null,
+        date: null,
+        endTime: null
+      },
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      }
+    }
+  },
+  created() {
+    this.getList()
+    // this.listLoading = false
+    this.getDict()
+  },
+  mounted() {},
+  methods: {
+    handleNodeClick() {},
+    handleClick(raw) {
+      console.log(raw)
+      switch (raw.type) {
+        case 'delete':
+          this.$confirm(i18n.t('deleteMsgBox.content'), i18n.t('deleteMsgBox.hint'), {
+            confirmButtonText: i18n.t('btn.confirm'),
+            cancelButtonText: i18n.t('btn.cancel'),
+            type: 'warning'
+          }).then(async() => {
+            // 走接口
+            const result = await delMaintainPlan({
+              id: raw.data.id
+            })
+            if (result.code === 0) {
+              this.$message({
+                type: 'success',
+                message: i18n.t('deleteMsgBox.doneMsg')
+              })
+            }
+            this.getList()
+          })
+          break
+        case 'detail':
+          this.showEditDialog = true
+          this.readonly = true
+          this.curEditId = raw.data.id
+          break
+        case 'edit':
+          this.showEditDialog = true
+          this.readonly = false
+          this.curEditId = raw.data.id
+          break
+        case 'check':
+          this.$router.push({
+            name: 'MaintainLog',
+            query: {
+              orderId: raw.data.id
+            }
+          })
+          break
+      }
+    },
+    async getDict() {
+      const result = await getDictDevice({
+        current: 1,
+        size: 999
+      })
+      this.dict.device = result
+      const res = await dataDictionaryDataList({
+        current: 1,
+        size: 500,
+        dictTypeId: '1393401964580093954'
+      })
+      const resObj = {}
+      res.data.records.map(item => {
+        resObj[item.id] = item.dataName
+      })
+      Vue.set(this.tableProps[this.tableProps.length - 1], 'filter', function(val) {
+        return resObj?.[val]
+      })
+    },
+    async getList() {
+      this.listLoading = true
+      // edit here
+      const res = await getMaintainPlanList(objFilter(this.listQuery))
+      if (res.code === 0) {
+        this.list = res.data.records
+        console.log(this.list)
+        this.total = res.data.total
+        this.listLoading = false
+      }
+    },
+    changeTime(val) {
+      this.listQuery.startTime = val ? val[0] : null
+      this.listQuery.endTime = val ? val[1] : null
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.usermanager-container {
+  padding: 20px;
+  .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+  }
+  .tree-select-container {
+    border: 1px solid #dfe6ec;
+    min-height: 400px;
+    padding: 20px;
+  }
+}
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>

src/views/EquipmentManager/ProcessData/Details.vue

@@ -0,0 +1,133 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-06-26 16:53:05
+ * @LastEditTime: 2021-06-29 17:30:31
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \mt-bus-fe\src\views\EquipmentManager\ProcessData\Details.vue
+-->
+<template>
+  <div>
+    <el-row style="padding: 20px">
+      <el-button type="primary" icon="el-icon-arrow-left" @click="goBack">{{ 'btn.back' | i18nFilter }}</el-button>
+    </el-row>
+    <div id="main" style="width: 1000px;height: 700px;" />
+  </div>
+</template>
+
+<script>
+import { getProcess } from '@/api/equipment/process'
+// import * as echarts from 'echarts'
+import echarts from 'echarts'
+export default {
+  data() {
+    return {
+      eventId: this.$route.query.eventId,
+      ParameterName: this.$route.query.ParameterName,
+      charts: '',
+      opinionData: ['3', '2', '4', '4', '5'],
+      time: [],
+      value: [],
+      upperLimit: '',
+      lowerLimit: '',
+      y: []
+    }
+  },
+  mounted() {
+    this.getData()
+  },
+  methods: {
+    async getData() {
+      const result = await getProcess({
+        eventId: this.eventId
+      })
+      if (result.code === 0) {
+        console.log(result.data)
+        this.lowerLimit = result.data[1].lowerLimit
+        this.upperLimit = result.data[1].upperLimit
+        this.y = [this.lowerLimit - 10, this.lowerLimit - 5, this.lowerLimit, this.lowerLimit * 1 + 5, this.upperLimit, this.upperLimit * 1 + 5, this.upperLimit * 1 + 10]
+        console.log(this.y)
+        result.data.forEach(element => {
+          this.time.unshift(element.createTime.slice(11))
+          this.value.unshift(element.parameterValue)
+        })
+        console.log(this.value)
+        var data = [
+          [this.time[0], this.value[0]],
+          [this.time[1], this.value[1]],
+          [this.time[2], this.value[2]],
+          [this.time[3], this.value[3]],
+          [this.time[4], this.value[4]],
+          [this.time[5], this.value[5]],
+          [this.time[6], this.value[6]],
+          [this.time[7], this.value[7]],
+          [this.time[8], this.value[8]],
+          [this.time[9], this.value[9]],
+          [this.time[10], this.value[10]]
+        ]
+        var chartDom = document.getElementById('main')
+        var myChart = echarts.init(chartDom)
+        var option
+        option = {
+          xAxis: {
+            name: '时间/分钟',
+            axisLabel: {
+              show: true,
+              inside: false, // 是否朝内
+              rotate: 0, // 旋转角度
+              margin: 5, // 刻度标签与轴线之间的距离
+              color: '#999'
+            },
+            data: this.time
+          },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            }
+          },
+          yAxis: {
+            // scale: true,
+            name: this.ParameterName,
+            min: this.lowerLimit * 1 - 10,
+            max: this.upperLimit * 1 + 10
+          },
+          legend: {
+            data: ['标准值']
+          },
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+          },
+          series: [{
+            data: data,
+            type: 'scatter',
+            markArea: {
+              data: [
+                [{
+                  yAxis: this.lowerLimit * 1,
+                  itemStyle: {
+                    color: '#81b22f'
+                  }
+                }, {
+                  yAxis: this.upperLimit
+                }]
+              ]
+            }
+          }]
+        }
+        option && myChart.setOption(option)
+      }
+    },
+    goBack() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/EquipmentManager/ProcessData/ProcessData.vue

@@ -0,0 +1,307 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-06-25 10:17:15
+ * @LastEditTime: 2021-06-29 21:17:15
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \mt-bus-fe\src\views\EquipmentManager\ProcessData\ProcessData.vue
+-->
+<template>
+  <div>
+    <el-row style="padding: 20px">
+      <el-button type="primary" icon="el-icon-arrow-left" @click="goBack">{{ 'btn.back' | i18nFilter }}</el-button>
+    </el-row>
+    <div class="image">
+      <img class="Toughened" src="../../../assets/img/Toughenedfurnace.png" alt="">
+      <div class="box t-data">
+        <el-tag class="one">{{ $t('module.equipmentManager.ProcessData.top') }}1: {{ top }}℃</el-tag>
+        <el-tag class="two">{{ $t('module.equipmentManager.ProcessData.top') }}2:{{ top }} ℃</el-tag>
+        <el-tag class="three">{{ $t('module.equipmentManager.ProcessData.top') }}3:{{ top }} ℃</el-tag>
+      </div>
+      <div class="box b-data">
+        <el-tag class="one" style="height:50px">{{ $t('module.equipmentManager.ProcessData.bottom') }}1: {{ bottom }}℃ <br> {{ $t('module.equipmentManager.ProcessData.bottomHigh') }} 5 mm </el-tag>
+        <el-tag class="five" style="height:50px">{{ $t('module.equipmentManager.ProcessData.bottom') }}2:{{ bottom }}℃ <br> {{ $t('module.equipmentManager.ProcessData.bottomHigh') }}  5 mm </el-tag>
+        <el-tag class="six" style="height:50px">{{ $t('module.equipmentManager.ProcessData.bottom') }}3:{{ bottom }}℃ <br> {{ $t('module.equipmentManager.ProcessData.bottomHigh') }}  5 mm</el-tag>
+      </div>
+      <div class="box rate">
+        <el-tag size="	medium">{{ $t('module.equipmentManager.ProcessData.speed') }}:0.05m/ms </el-tag>
+      </div>
+    </div>
+    <div class="left">
+      <el-row>
+        <el-col :span="24">
+          <el-card class="box-card">
+            <div class="text item">
+              {{ $t('module.equipmentManager.ProcessData.highPressureFan') }}1{{ $t('module.equipmentManager.ProcessData.current') }}: 11A
+            </div>
+            <div class="text item">
+              {{ $t('module.equipmentManager.ProcessData.highPressureFan') }}2{{ $t('module.equipmentManager.ProcessData.current') }}: 11A
+            </div>
+            <div class="text item">
+              {{ $t('module.equipmentManager.ProcessData.lowPressureFan') }}1{{ $t('module.equipmentManager.ProcessData.current') }}: 11A
+            </div>
+            <div class="text item">
+              {{ $t('module.equipmentManager.ProcessData.lowPressureFan') }}2{{ $t('module.equipmentManager.ProcessData.current') }}: 11A
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="right">
+      <el-row>
+        <el-col :span="24">
+          <el-card class="box-card">
+            <div class="text item">
+              {{ $t('module.equipmentManager.ProcessData.selfChecking') + ' ' + $t('module.equipmentManager.ProcessData.qualifiedRate') }}:98%
+            </div>
+            <div class="text item">
+              {{ $t('module.equipmentManager.ProcessData.manualChecking') + ' ' + $t('module.equipmentManager.ProcessData.qualifiedRate') }}:99%
+            </div>
+            <div class="text item">
+              {{ $t('module.equipmentManager.ProcessData.powerOffPackaging') + ' ' + $t('module.equipmentManager.ProcessData.qualifiedRate') }}:99.8%
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
+    <el-col :span="16">
+      <el-table
+        :data="tableData"
+        border
+      >
+        <el-table-column
+          :label="'tableHeader.index' | i18nFilter"
+          type="index"
+          width="80"
+          align="center"
+        />
+        <el-table-column
+          prop="ParameterName"
+          :label="$t('module.equipmentManager.ProcessData.parameterName')"
+          width="200"
+          align="center"
+        />
+        <el-table-column
+          prop="ParametersCode"
+          :label="$t('module.equipmentManager.ProcessData.parameterCode')"
+          align="center"
+        />
+        <el-table-column
+          prop="currentValue"
+          :label="$t('module.equipmentManager.ProcessData.nowValue')"
+          width="200"
+          align="center"
+        />
+        <el-table-column
+          prop="StandardValues"
+          :label="$t('module.equipmentManager.ProcessData.standardValue')"
+          width="200"
+          align="center"
+        />
+        <el-table-column
+          fixed="right"
+          :label="'tableHeader.operation' | i18nFilter"
+          width="80"
+          align="center"
+        >
+          <template slot-scope="o">
+            <el-button
+              type="text"
+              size="small"
+              @click="handleShow(o.row)"
+            >
+              {{ 'btn.detail' | i18nFilter }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-col>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tem: [715, 710, 705, 700, 690],
+      tem1: [725, 720, 715, 705, 695],
+      top: '',
+      bottom: '',
+      current: [11, 13, 15, 14, 18],
+      cur: '',
+      qualified: [99, 99.8, 99.1, 99.5, 99.6],
+      qua: '',
+      list: [],
+      listLoading: true,
+      height: [5, 4, 3, 8, 6],
+      gaodu: '',
+      tableData: [{
+        ParameterName: '上部温度℃',
+        ParametersCode: '213123213',
+        currentValue: '710',
+        StandardValues: '715',
+        eventId: 10001
+      }, {
+        ParameterName: '下部温度℃',
+        ParametersCode: '2131231',
+        currentValue: '705',
+        StandardValues: '710',
+        eventId: 10002
+      }, {
+        ParameterName: '急冷风压',
+        ParametersCode: '3123214',
+        currentValue: '6500',
+        StandardValues: '710',
+        eventId: 10003
+      }, {
+        ParameterName: '冷却时间',
+        ParametersCode: '443434343',
+        currentValue: '50',
+        StandardValues: '710',
+        eventId: 10004
+      }, {
+        ParameterName: '冷却风压',
+        ParametersCode: '434343434',
+        currentValue: '4500',
+        StandardValues: '710',
+        eventId: 10005
+      }]
+    }
+  },
+  mounted() {
+    this.changeOne()
+    this.changeTwo()
+    this.changeCurrent()
+    this.changeQualified()
+    this.changeheight()
+  },
+  methods: {
+    changeOne() {
+      setInterval(() => {
+        for (let i = 0; i < this.tem.length; i++) {
+          setTimeout(() => {
+            this.top = this.tem[i]
+          }, 500 * i)
+        }
+      }, 500)
+    },
+    changeTwo() {
+      setInterval(() => {
+        for (let i = 0; i < this.tem.length; i++) {
+          setTimeout(() => {
+            this.bottom = this.tem[i]
+            // console.log(this.tem[i])
+          }, 500 * i)
+        }
+      }, 2500)
+    },
+    changeQualified() {
+      setInterval(() => {
+        for (let i = 0; i < this.qualified.length; i++) {
+          setTimeout(() => {
+            this.qua = this.qualified[i]
+          }, 500 * i)
+        }
+      }, 2500)
+    },
+    handleShow(obj) {
+      const eventId = obj.eventId
+      const ParameterName = obj.ParameterName
+      console.log(eventId)
+      console.log(ParameterName)
+      this.$router.push({
+        path: 'Details',
+        query: {
+          eventId: eventId,
+          ParameterName: ParameterName }
+      })
+    },
+    goBack() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.image{
+  display: flex;
+  justify-content: center;
+}
+.two{
+  margin-left: 150px;
+}
+.el-tag{
+    font-size: 20px;
+    text-align: center;
+}
+.three{
+  margin-left: 80px;
+}
+.five{
+  margin-left: 70px;
+}
+.six{
+  margin-left: 50px;
+}
+.Toughened{
+  width: 80%;
+
+}
+  .box {
+    width: 1000px;
+
+    .top {
+      text-align: center;
+    }
+
+    .left {
+      float: left;
+      width: 60px;
+    }
+
+    .right {
+      float: right;
+      width: 60px;
+    }
+
+    .bottom {
+      clear: both;
+      text-align: center;
+    }
+
+    .item {
+      margin: 4px;
+    }
+
+    .left .el-tooltip__popper,
+    .right .el-tooltip__popper {
+      padding: 8px 10px;
+    }
+  }
+  .t-data{
+    position: absolute;
+    left: 50%;
+    top: 25%;
+  }
+  .b-data{
+    position: absolute;
+    left: 50%;
+    top: 52%;
+  }
+  .rate{
+    position: absolute;
+    left: 30%;
+    top: 52%;
+  }
+  .left{
+    position: absolute;
+    top: 27%;
+    left: 3%;
+  }
+   .right{
+    position: absolute;
+    top: 30%;
+    left: 87%;
+  }
+</style>

src/views/EquipmentManager/ProcessData/Processequipment.vue

@@ -0,0 +1,138 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-06-28 14:52:36
+ * @LastEditTime: 2021-06-29 09:50:02
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \mt-bus-fe\src\views\EquipmentManager\ProcessData\Processequipment.vue
+-->
+<template>
+  <div>
+    <el-main>
+      <el-form :inline="true" label-width="120px" class="demo-form-inline">
+        <el-form-item :label="$t('module.equipmentManager.ProcessData.productInfo')">
+          <el-input />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.ProcessData.processName')">
+          <el-input />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary">{{ 'btn.search' | i18nFilter }}</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table
+        :data="tableData"
+        border
+        style="width: 100%"
+      >
+        <el-table-column
+          :label="'tableHeader.index' | i18nFilter"
+          type="index"
+          align="center"
+        />
+        <el-table-column
+          prop="name"
+          :label="$t('module.equipmentManager.ProcessData.productName')"
+          align="center"
+        />
+        <el-table-column
+          prop="ParametersCode"
+          :label="$t('module.equipmentManager.ProcessData.specifications')"
+          align="center"
+        />
+        <el-table-column
+          prop="Devicename"
+          :label="$t('module.equipmentManager.ProcessData.equipmentName')"
+          align="center"
+        />
+        <el-table-column
+          prop="processname"
+          :label="$t('module.equipmentManager.ProcessData.processName')"
+          align="center"
+        />
+        <el-table-column
+          prop="processcode"
+          :label="$t('module.equipmentManager.ProcessData.processCode')"
+          align="center"
+        />
+        <el-table-column
+          prop="Processversion"
+          :label="$t('module.equipmentManager.ProcessData.processVersion')"
+          align="center"
+        />
+        <el-table-column
+          prop="pass"
+          :label="$t('module.equipmentManager.ProcessData.qualifiedRate')"
+          align="center"
+        />
+        <el-table-column
+          :label="$t('module.equipmentManager.ProcessData.analysis')"
+          fixed="right"
+          align="center"
+        >
+          <template slot-scope="o">
+            <el-button
+              type="text"
+              size="small"
+              @click="handleShow(o.row)"
+            >
+              {{ 'btn.detail' | i18nFilter }}
+            </el-button>
+          </template>
+        </el-table-column>
+        <el-table-column
+          :label="$t('module.equipmentManager.ProcessData.contrast')"
+          fixed="right"
+          width="240"
+          align="center"
+        >
+          <template slot-scope="o">
+            <el-button
+              type="text"
+              size="small"
+              @click="handlePush(o.row)"
+            >
+              {{ $t('module.equipmentManager.ProcessData.comparisonOfInfluencingFactors') }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-main>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      key: 11111,
+      tableData: [{
+        name: '35611325',
+        ParametersCode: '213123213',
+        Devicename: '钢化炉',
+        processname: '715',
+        processcode: '154812',
+        Processversion: '1.02',
+        pass: '99.9',
+        eventId: 10001
+      }]
+    }
+  },
+  methods: {
+    handleShow() {
+      this.$router.push({
+        path: 'ProcessData'
+      })
+    },
+    handlePush() {
+      this.$router.push({
+        path: 'Three'
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/EquipmentManager/ProcessData/Three.vue

@@ -0,0 +1,112 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-06-28 15:31:00
+ * @LastEditTime: 2021-06-29 21:05:31
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \mt-bus-fe\src\views\EquipmentManager\ProcessData\Three.vue
+-->
+<template>
+  <div>
+    <el-row style="padding: 20px">
+      <el-button type="primary" icon="el-icon-arrow-left" @click="goBack">{{ 'btn.back' | i18nFilter }}</el-button>
+    </el-row>
+    <div id="main" style="width: 1000px;height: 800px;" />
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+export default {
+  data() {
+    return {
+      key: 11111
+    }
+  },
+  mounted() {
+    this.getData()
+  },
+  methods: {
+    async getData() {
+      var chartDom = document.getElementById('main')
+      var myChart = echarts.init(chartDom)
+      var option
+      option = {
+        title: {
+          text: '钢化炉影响因素对比图',
+          top: 10,
+          left: 10
+        },
+        tooltip: {
+          trigger: 'item',
+          backgroundColor: 'rgba(0,0,250,0.2)'
+        },
+        legend: {
+          type: 'scroll',
+          bottom: 10,
+          data: (function() {
+            var list = []
+            for (var i = 1; i < 10; i++) {
+              list.push('产品' + i)
+            }
+            return list
+          })()
+        },
+        visualMap: {
+          top: 'middle',
+          right: 10,
+          show: false,
+          color: ['red', 'blue'],
+          calculable: true
+        },
+        radar: {
+          indicator: [
+            { text: '上部温度', max: 1 },
+            { text: '下部温度', max: 1 },
+            { text: '急冷风压', max: 1 },
+            { text: '急冷时间', max: 1 },
+            { text: '冷却风压', max: 1 }
+          ]
+        },
+        series: (function() {
+          var series = []
+          for (var i = 1; i < 10; i++) {
+            series.push({
+              name: '',
+              type: 'radar',
+              symbol: 'none',
+              lineStyle: {
+                width: 1
+              },
+              emphasis: {
+                areaStyle: {
+                  color: 'rgba(0,250,0,0.3)'
+                }
+              },
+              data: [{
+                value: [
+                  (10 - i) * 0.2 * 0.5,
+                  (10 - i) * 0.11,
+                  i * 0.2 * 0.4,
+                  i / 8 * 0.5,
+                  i * 0.1
+                ],
+                name: '产品' + i
+              }]
+            })
+          }
+          return series
+        })()
+      }
+      option && myChart.setOption(option)
+    },
+    goBack() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/EquipmentManager/RecipeManager/AddForm.vue

@@ -0,0 +1,146 @@
+<!--
+ * @Date: 2021-02-01 16:12:13
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-23 16:43:32
+ * @FilePath: \basic-admin\src\views\EquipmentManager\RecipeManager\AddForm.vue
+ * @Description: 添加设备类型配方
+-->
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="$t('module.equipmentManager.recipe.addDialogTitle')" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="150px">
+        <el-form-item :label="$t('module.equipmentManager.recipe.name')" prop="name">
+          <el-input v-model="formData.name" :placeholder="$t('module.equipmentManager.recipe.placeholdername')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.recipe.equipmentId')" prop="equipmentId">
+          <el-select
+            v-model="formData.equipmentId"
+            :placeholder="$t('module.equipmentManager.recipe.placeholderdevice')"
+            clearable
+            filterable
+            :style="{width: '100%'}"
+          >
+            <el-option
+              v-for="(item, index) in dict.deviceId"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.recipe.code')" prop="code">
+          <el-input v-model="formData.code" :placeholder="$t('module.equipmentManager.recipe.placeholdercode')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.recipe.description')" prop="description">
+          <el-input v-model="formData.description" :placeholder="$t('module.equipmentManager.recipe.placeholderdescription')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.recipe.activationState')" prop="activationState" required>
+          <el-switch v-model="formData.activationState" :active-value="1" :inactive-value="0" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.recipe.enabled')" prop="enabled" required>
+          <el-switch v-model="formData.enabled" :active-value="1" :inactive-value="0" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.recipe.remark')" prop="remark">
+          <el-input v-model="formData.remark" :placeholder="$t('module.equipmentManager.recipe.placeholderremark')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { getDictDevice } from '@/api/dict'
+import { addDeviceRecipe, getDeviceRecipeCode } from '@/api/equipment/recipe'
+import i18n from '@/lang'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: [],
+  data() {
+    return {
+      formData: {
+        name: undefined,
+        equipmentId: undefined,
+        code: undefined,
+        description: undefined,
+        activationState: 0,
+        enabled: 1,
+        remark: undefined
+      },
+      rules: {
+        name: [{
+          required: true,
+          message: i18n.t('module.quality.plan.notEmpty'),
+          trigger: 'blur'
+        }],
+        equipmentId: [{
+          required: true,
+          message: i18n.t('module.quality.plan.notEmpty'),
+          trigger: 'change'
+        }],
+        code: [{
+          required: true,
+          message: i18n.t('module.quality.plan.notEmpty'),
+          trigger: 'blur'
+        }],
+        description: [{
+          required: false,
+          message: '请输入配方描述',
+          trigger: 'blur'
+        }],
+        remark: []
+      },
+      dict: {
+        deviceId: []
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {
+    this.getDict()
+  },
+  methods: {
+    async onOpen() {
+      const result = await getDeviceRecipeCode()
+      if (result.code === 0) {
+        this.formData.code = result.data
+      }
+    },
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        const result = await addDeviceRecipe(this.formData)
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '添加成功！'
+          })
+          this.$emit('done')
+          this.close()
+        }
+      })
+    },
+    async getDict() {
+      const result = await getDictDevice({
+        current: 1,
+        size: 999
+      })
+      this.dict.deviceId = result
+    }
+  }
+}
+
+</script>
+<style>
+</style>

src/views/EquipmentManager/RecipeManager/EditForm.vue

@@ -0,0 +1,158 @@
+<!--
+ * @Date: 2021-02-01 16:12:13
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-05-10 16:56:32
+ * @FilePath: \basic-admin\src\views\EquipmentManager\RecipeManager\EditForm.vue
+ * @Description: 编辑设备类型配方
+-->
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="$t('module.equipmentManager.recipe.editDialogTitle')" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="150px">
+        <el-form-item :label="$t('module.equipmentManager.recipe.name')" prop="name">
+          <el-input v-model="formData.name" :placeholder="$t('module.equipmentManager.recipe.placeholdername')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.recipe.equipmentId')" prop="equipmentId">
+          <el-select
+            v-model="formData.equipmentId"
+            :placeholder="$t('module.equipmentManager.recipe.placeholderdevice')"
+            clearable
+            filterable
+            :style="{width: '100%'}"
+          >
+            <el-option
+              v-for="(item, index) in dict.deviceId"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.recipe.code')" prop="code">
+          <el-input v-model="formData.code" :placeholder="$t('module.equipmentManager.recipe.placeholdercode')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.recipe.description')" prop="description">
+          <el-input v-model="formData.description" :placeholder="$t('module.equipmentManager.recipe.placeholderdescription')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.recipe.activationState')" prop="activationState" required>
+          <el-switch v-model="formData.activationState" :active-value="1" :inactive-value="0" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.recipe.enabled')" prop="enabled" required>
+          <el-switch v-model="formData.enabled" :active-value="1" :inactive-value="0" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.recipe.remark')" prop="remark">
+          <el-input v-model="formData.remark" :placeholder="$t('module.equipmentManager.recipe.placeholderremark')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { getDictDevice } from '@/api/dict'
+import { editDeviceRecipe, getDeviceRecipe } from '@/api/equipment/recipe'
+import i18n from '@/lang'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: {
+    targetInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      formData: {
+        name: undefined,
+        equipmentId: undefined,
+        code: undefined,
+        description: undefined,
+        activationState: 1,
+        enabled: 1,
+        remark: undefined
+      },
+      rules: {
+        name: [{
+          required: true,
+          message: i18n.t('module.quality.plan.notEmpty'),
+          trigger: 'blur'
+        }],
+        equipmentId: [{
+          required: true,
+          message: i18n.t('module.quality.plan.notEmpty'),
+          trigger: 'change'
+        }],
+        code: [{
+          required: true,
+          message: i18n.t('module.quality.plan.notEmpty'),
+          trigger: 'blur'
+        }],
+        description: [{
+          required: false,
+          message: '请输入配方描述',
+          trigger: 'blur'
+        }],
+        remark: []
+      },
+      dict: {
+        deviceId: []
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {
+    this.getDict()
+  },
+  methods: {
+    onOpen() {
+      this.getInfo()
+    },
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        console.log(this.formData.activationState)
+        console.log(this.formData.enabled)
+        const result = await editDeviceRecipe(this.formData)
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '修改成功！'
+          })
+          this.$emit('done')
+          this.close()
+        }
+      })
+    },
+    async getInfo() {
+      const result = await getDeviceRecipe({
+        id: this.targetInfo?.id
+      })
+      if (result.code === 0) {
+        this.formData = result.data
+      }
+    },
+    async getDict() {
+      const result = await getDictDevice({
+        current: 1,
+        size: 999
+      })
+      this.dict.deviceId = result
+    }
+  }
+}
+
+</script>
+<style>
+</style>

src/views/EquipmentManager/RecipeManager/index.vue

@@ -0,0 +1,203 @@
+<!--
+ * @Date: 2020-12-15 15:36:52
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-23 16:39:27
+ * @FilePath: \basic-admin\src\views\EquipmentManager\RecipeManager\index.vue
+ * @Description:
+-->
+<template>
+  <div class="usermanager-container">
+    <div class="method-btn-area">
+      <el-input v-model="listQuery.equipmentRecipeName" clearable :placeholder="$t('module.equipmentManager.recipe.searchPlaceholder')" style="width: 200px;" />
+      <el-select v-model="listQuery.equipmentId" :placeholder="$t('module.equipmentManager.recipe.deviceselect')" filterable clearable style="width: 200px;">
+        <el-option
+          v-for="(item, index) in dict.deviceId"
+          :key="'device-' + index"
+          :label="item.name"
+          :value="item.id"
+        />
+      </el-select>
+      <el-button @click="getList">{{ 'btn.search' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="showDialog = true">{{ 'btn.add' | i18nFilter }}</el-button>
+    </div>
+    <base-table :table-config="tableProps" :table-data="list" :is-loading="listLoading" :page="listQuery.current" :limit="listQuery.size">
+      <method-btn slot="handleBtn" :method-list="tableBtn" @clickBtn="handleClick" />
+    </base-table>
+    <pagination :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" />
+    <add-form :visible.sync="showDialog" @done="getList" />
+    <edit-form :visible.sync="showEditDialog" :target-info="{id: curEditId}" @done="getList" />
+  </div>
+</template>
+
+<script>
+import dataDict from '@/filters/DataDict'
+// edit here
+const tableBtn = [{
+  type: 'edit',
+  btnName: 'btn.edit'
+}, {
+  type: 'delete',
+  btnName: 'btn.delete'
+}, {
+  type: 'detail',
+  btnName: 'btn.detail'
+}]
+const tableProps = [{
+  prop: 'equipmentId',
+  label: i18n.t('module.equipmentManager.recipe.equipmentId'),
+  align: 'center',
+  subcomponent: DictFilter,
+  filter: getDictDevice
+}, {
+  prop: 'name',
+  label: i18n.t('module.equipmentManager.recipe.name'),
+  align: 'center'
+}, {
+  prop: 'code',
+  label: i18n.t('module.equipmentManager.recipe.code'),
+  align: 'center'
+}, {
+  prop: 'activationState',
+  label: i18n.t('module.equipmentManager.recipe.activationState'),
+  align: 'center',
+  filter: dataDict('enableState')
+},
+// {
+//   prop: 'enabled',
+//   label: i18n.t('module.equipmentManager.recipe.enabled'),
+//   align: 'center',
+//   filter: dataDict('enableState')
+// },
+{
+  prop: 'remark',
+  label: i18n.t('module.equipmentManager.recipe.remark'),
+  align: 'center'
+}]
+import AddForm from './AddForm'
+import EditForm from './EditForm'
+import BaseTable from '@/components/BaseTable'
+import { objFilter } from '@/utils'
+import { getDictDevice } from '@/api/dict'
+// edit here
+import { getDeviceRecipeList, delDeviceRecipe } from '@/api/equipment/recipe'
+import DictFilter from '@/components/BaseTable/subcomponents/DataDictFilter'
+import Pagination from '@/components/Pagination'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import i18n from '@/lang'
+export default {
+  name: 'OrgManager',
+  components: { Pagination, BaseTable, MethodBtn, AddForm, EditForm },
+  props: {},
+  data() {
+    return {
+      tableBtn,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      showDialog: false,
+      curEditId: null,
+      showEditDialog: false,
+      listQuery: {
+        current: 1,
+        size: 10,
+        equipmentId: null,
+        equipmentRecipeName: ''
+      },
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      dict: {
+        deviceId: []
+      }
+    }
+  },
+  created() {
+    this.getDict()
+    // this.listLoading = false
+  },
+  mounted() {},
+  methods: {
+    handleNodeClick() {},
+    handleClick(raw) {
+      console.log(raw)
+      switch (raw.type) {
+        case 'delete':
+          this.$confirm(i18n.t('deleteMsgBox.content'), i18n.t('deleteMsgBox.hint'), {
+            confirmButtonText: i18n.t('btn.confirm'),
+            cancelButtonText: i18n.t('btn.cancel'),
+            type: 'warning'
+          }).then(async() => {
+            // 走接口
+            const result = await delDeviceRecipe({
+              id: raw.data.id
+            })
+            if (result.code === 0) {
+              this.$message({
+                type: 'success',
+                message: i18n.t('deleteMsgBox.doneMsg')
+              })
+              this.getList()
+            }
+          })
+          break
+        case 'edit':
+          this.showEditDialog = true
+          this.curEditId = raw.data.id
+          break
+        case 'detail':
+          this.$router.push({
+            name: 'RecipeParamManage',
+            query: {
+              id: raw.data.id
+            }
+          })
+          break
+      }
+    },
+    async getList() {
+      this.listLoading = true
+      // edit here
+      const res = await getDeviceRecipeList(objFilter(this.listQuery))
+      if (res.code === 0) {
+        this.list = res.data
+        // this.total = res.data.total
+        this.listLoading = false
+      }
+    },
+    async getDict() {
+      const result = await getDictDevice({
+        current: 1,
+        size: 999
+      })
+      this.dict.deviceId = result
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.usermanager-container {
+  padding: 20px;
+  .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+  }
+  .tree-select-container {
+    border: 1px solid #dfe6ec;
+    min-height: 400px;
+    padding: 20px;
+  }
+}
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>

src/views/EquipmentManager/RecipeManager/subpage/AddForm.vue

@@ -0,0 +1,118 @@
+<!--
+ * @Date: 2021-01-09 16:25:11
+ * @LastEditors: guo
+ * @LastEditTime: 2021-03-20 15:46:42
+ * @FilePath: \basic-admin\src\views\EquipmentManager\RecipeManager\subpage\AddForm.vue
+ * @Description: 设备配方添加参数
+-->
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="$t('module.equipmentManager.recipeDetail.addDialogTitle')" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="150px">
+        <el-form-item :label="$t('module.equipmentManager.recipeDetail.recipeParam')" prop="equipmentParameterId">
+          <el-select
+            v-model="formData.equipmentParameterId"
+            :placeholder="$t('module.equipmentManager.recipeDetail.placeholderrecipeParam')"
+            clearable
+            :style="{width: '100%'}"
+          >
+            <el-option
+              v-for="(item, index) in dict.param"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.recipeDetail.paramValue')" prop="paramValue">
+          <el-input v-model="formData.paramValue" :placeholder="$t('module.equipmentManager.recipeDetail.placeholderparamValue')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.recipeDetail.remark')" prop="remark">
+          <el-input v-model="formData.remark" :placeholder="$t('module.equipmentManager.recipeDetail.placeholderremark')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { addDeviceRecipeParam } from '@/api/equipment/recipe'
+import { equipmentTypeParam } from '@/api/dict'
+import i18n from '@/lang'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: {
+    targetInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      formData: {
+        equipmentParameterId: undefined,
+        equipmentRecipeId: null,
+        paramValue: undefined,
+        remark: undefined
+      },
+      rules: {
+        equipmentParameterId: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.recipeDetail.placeholderrecipeParam'),
+          trigger: 'change'
+        }],
+        paramValue: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.recipeDetail.placeholderparamValue'),
+          trigger: 'blur'
+        }],
+        remark: []
+      },
+      dict: {
+        param: []
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    onOpen() {
+      this.formData.equipmentRecipeId = this.targetInfo?.id
+      this.getDict(this.targetInfo?.equipmentType)
+    },
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        const result = await addDeviceRecipeParam(this.formData)
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '添加成功！'
+          })
+          this.$emit('done')
+          this.close()
+        }
+      })
+    },
+    async getDict(id) {
+      const result = await equipmentTypeParam(id)
+      this.dict.param = result
+    }
+  }
+}
+
+</script>
+<style>
+</style>

src/views/EquipmentManager/RecipeManager/subpage/EditForm.vue

@@ -0,0 +1,127 @@
+<!--
+ * @Date: 2021-01-09 16:25:11
+ * @LastEditors: guo
+ * @LastEditTime: 2021-03-20 15:56:09
+ * @FilePath: \basic-admin\src\views\EquipmentManager\RecipeManager\subpage\EditForm.vue
+ * @Description: 设备配方添加参数
+-->
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="$t('module.equipmentManager.recipeDetail.editDialogTitle')" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="120px">
+        <el-form-item :label="$t('module.equipmentManager.recipeDetail.recipeParam')" prop="equipmentParameterId">
+          <el-select
+            v-model="formData.equipmentParameterId"
+            :placeholder="$t('module.equipmentManager.recipeDetail.placeholderrecipeParam')"
+            clearable
+            :style="{width: '100%'}"
+          >
+            <el-option
+              v-for="(item, index) in dict.param"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.recipeDetail.paramValue')" prop="paramValue">
+          <el-input v-model="formData.paramValue" :placeholder="$t('module.equipmentManager.recipeDetail.placeholderparamValue')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.recipeDetail.remark')" prop="remark">
+          <el-input v-model="formData.remark" :placeholder="$t('module.equipmentManager.recipeDetail.placeholderremark')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { editDeviceRecipeParam, getDeviceRecipeParam } from '@/api/equipment/recipe'
+import { equipmentTypeParam } from '@/api/dict'
+import i18n from '@/lang'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: {
+    targetInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      formData: {
+        equipmentParameterId: undefined,
+        equipmentRecipeId: null,
+        paramValue: undefined,
+        remark: undefined
+      },
+      rules: {
+        equipmentParameterId: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.recipeDetail.placeholderrecipeParam'),
+          trigger: 'change'
+        }],
+        paramValue: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.recipeDetail.placeholderparamValue'),
+          trigger: 'blur'
+        }],
+        remark: []
+      },
+      dict: {
+        param: []
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    onOpen() {
+      // this.formData.equipmentRecipeId = this.targetInfo?.id
+      this.getInfo()
+      this.getDict(this.targetInfo?.equipmentType)
+    },
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        const result = await editDeviceRecipeParam(this.formData)
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '添加成功！'
+          })
+          this.$emit('done')
+          this.close()
+        }
+      })
+    },
+    async getDict(id) {
+      const result = await equipmentTypeParam(id)
+      this.dict.param = result
+    },
+    async getInfo() {
+      const result = await getDeviceRecipeParam({
+        id: this.targetInfo?.id
+      })
+      if (result.code === 0) {
+        this.formData = result.data
+      }
+    }
+  }
+}
+
+</script>
+<style>
+</style>

src/views/EquipmentManager/RecipeManager/subpage/detail.vue

@@ -0,0 +1,269 @@
+<!--
+ * @Date: 2020-12-15 15:36:52
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-23 16:45:56
+ * @FilePath: \basic-admin\src\views\EquipmentManager\RecipeManager\subpage\detail.vue
+ * @Description:
+-->
+<template>
+  <div class="bom-form-container">
+    <div class="method-btn-area">
+      <el-button type="primary" plain icon="el-icon-arrow-left" @click="turnBack">{{ 'btn.back' | i18nFilter }}</el-button>
+    </div>
+    <el-form ref="elForm" :model="formData" size="medium" label-width="150px">
+      <el-form-item :label="$t('module.equipmentManager.recipe.equipmentId')" prop="equipmentId">
+        <el-select
+          v-model="formData.equipmentId"
+          :placeholder="$t('module.equipmentManager.recipe.placeholderdevice')"
+          clearable
+          disabled
+          filterable
+          :style="{width: '100%'}"
+        >
+          <el-option
+            v-for="(item, index) in dict.deviceId"
+            :key="index"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('module.equipmentManager.recipe.code')" prop="code">
+        <el-input v-model="formData.code" :style="{width: '100%'}" :disabled="pagetype" />
+      </el-form-item>
+      <el-form-item :label="$t('module.equipmentManager.recipe.name')" prop="name">
+        <el-input v-model="formData.name" :style="{width: '100%'}" :disabled="pagetype" />
+      </el-form-item>
+      <el-form-item :label="$t('module.equipmentManager.recipe.description')" prop="description">
+        <el-input v-model="formData.description" :style="{width: '100%'}" :disabled="pagetype" />
+      </el-form-item>
+      <el-form-item :label="$t('module.equipmentManager.recipe.activationState')" prop="activationState" required>
+        <el-switch v-model="formData.activationState" :disabled="pagetype" :active-value="1" :inactive-value="0" />
+      </el-form-item>
+      <el-form-item :label="$t('module.equipmentManager.recipe.enabled')" prop="enabled" required>
+        <el-switch v-model="formData.enabled" :disabled="pagetype" :active-value="1" :inactive-value="0" />
+      </el-form-item>
+      <el-form-item :label="$t('module.equipmentManager.recipe.remark')" prop="remark">
+        <el-input v-model="formData.remark" :style="{width: '100%'}" :disabled="pagetype" />
+      </el-form-item>
+    </el-form>
+    <!-- <div class="sub-table-container">
+      <el-divider>{{ $t('module.equipmentManager.recipeDetail.title') }}</el-divider>
+      <div class="method-btn-area">
+        <el-button type="primary" style="float: right;margin: 0 20px;" @click="showDialog = true">{{ 'btn.add' | i18nFilter }}</el-button>
+      </div>
+      <base-table :table-config="tableProps" :table-data="list" :is-loading="listLoading" :page="listQuery.current" :limit="listQuery.size">
+        <method-btn slot="handleBtn" :method-list="tableBtn" @clickBtn="handleClick" />
+      </base-table>
+    </div> -->
+    <!-- <pagination :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" /> -->
+    <!-- <add-form :visible.sync="showDialog" :target-info="{id: listQuery.equipmentRecipeId, equipmentType: formData.equipmentType }" @done="getList" />
+    <edit-form :visible.sync="showEditDialog" :target-info="{id: curEditId, fatherId: listQuery.equipmentRecipeId, equipmentType: formData.equipmentType}" @done="getList" /> -->
+  </div>
+</template>
+
+<script>
+// import CheckDetail from '@/components/BaseTable/subcomponents/CheckDetail'
+// import dataDict from '@/filters/DataDict'
+// edit here
+const tableBtn = [{
+  type: 'edit',
+  btnName: 'btn.edit'
+}, {
+  type: 'delete',
+  btnName: 'btn.delete'
+}]
+const tableProps = [{
+  prop: 'paramCode',
+  label: i18n.t('module.equipmentManager.recipeDetail.paramCode'),
+  align: 'center'
+}, {
+  prop: 'paramName',
+  label: i18n.t('module.equipmentManager.recipeDetail.paramName'),
+  align: 'center'
+}, {
+  prop: 'type',
+  label: i18n.t('module.equipmentManager.recipeDetail.type'),
+  align: 'center'
+}, {
+  prop: 'minValue',
+  label: i18n.t('module.equipmentManager.recipeDetail.minValue'),
+  align: 'center'
+}, {
+  prop: 'maxValue',
+  label: i18n.t('module.equipmentManager.recipeDetail.maxValue'),
+  align: 'center'
+}, {
+  prop: 'defaultValue',
+  label: i18n.t('module.equipmentManager.recipeDetail.defaultValue'),
+  align: 'center'
+}, {
+  prop: 'unit',
+  label: i18n.t('module.equipmentManager.recipeDetail.unit'),
+  align: 'center'
+}, {
+  prop: 'remark',
+  label: i18n.t('module.equipmentManager.recipeDetail.remark'),
+  align: 'center'
+}]
+// import AddForm from './AddForm'
+// import EditForm from './EditForm'
+// import BaseTable from '@/components/BaseTable'
+// import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+// edit here
+// import { objFilter } from '@/utils'
+import { getDictDevice } from '@/api/dict'
+import { getDeviceRecipeParamList, getDeviceRecipe, delDeviceRecipeParam } from '@/api/equipment/recipe'
+// import { dictChange } from '@/utils'
+// import Pagination from '@/components/Pagination'
+import i18n from '@/lang'
+export default {
+  name: 'BOMForm',
+  // components: { Pagination, BaseTable, MethodBtn, AddForm, EditForm },
+  props: {},
+  data() {
+    return {
+      tableBtn,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      showDialog: false,
+      curEditId: null,
+      showEditDialog: false,
+      listQuery: {
+        enabled: 1,
+        equipmentRecipeId: null,
+        current: 1,
+        size: 10
+      },
+      formData: {
+        equipmentCode: undefined,
+        equipmentName: undefined,
+        code: undefined,
+        name: undefined,
+        enabled: 1,
+        remark: undefined
+      },
+      dict: {
+        deviceId: {}
+      }
+    }
+  },
+  computed: {
+    pagetype() {
+      return true
+      // return false
+    },
+    typeName() {
+      if (this.dict.equipmentTypeTable) {
+        return this.dict.equipmentTypeTable[this.formData.equipmentType]
+      } else {
+        return this.formData.equipmentType
+      }
+    }
+  },
+  created() {
+    console.log(this.$route.query)
+    this.listQuery.equipmentRecipeId = this.$route.query.id
+    this.getDict()
+    this.getDetail()
+    this.getList()
+    // this.listLoading = false
+  },
+  mounted() {},
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      switch (raw.type) {
+        case 'delete':
+          this.$confirm(i18n.t('deleteMsgBox.content'), i18n.t('deleteMsgBox.hint'), {
+            confirmButtonText: i18n.t('btn.confirm'),
+            cancelButtonText: i18n.t('btn.cancel'),
+            type: 'warning'
+          }).then(async() => {
+            // 走接口
+            const result = await delDeviceRecipeParam({
+              id: raw.data.id
+            })
+            if (result.code === 0) {
+              this.$message({
+                type: 'success',
+                message: i18n.t('deleteMsgBox.doneMsg')
+              })
+              this.getList()
+            }
+          })
+          break
+        case 'edit':
+          this.showEditDialog = true
+          this.curEditId = raw.data.id
+          break
+      }
+    },
+    async getList() {
+      this.listLoading = true
+      // edit here
+      const res = await getDeviceRecipeParamList(this.listQuery)
+      if (res.code === 0) {
+        this.list = res.data.records ? res.data.records : []
+        this.total = res.data.total
+        this.listLoading = false
+      }
+    },
+    async getDetail() {
+      const result = await getDeviceRecipe({
+        id: this.listQuery.equipmentRecipeId
+      })
+      if (result.code === 0) {
+        this.formData = result.data
+        // console.log(result)
+      }
+    },
+    submitForm() {
+      this.$refs['elForm'].validate(valid => {
+        if (!valid) return
+        // TODO 提交表单
+      })
+    },
+    resetForm() {
+      this.$refs['elForm'].resetFields()
+    },
+    saveForm() {},
+    async getDict() {
+      const result = await getDictDevice({
+        current: 1,
+        size: 999
+      })
+      this.dict.deviceId = result
+    },
+    turnBack() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/styles/mixin.scss";
+.bom-form-container {
+  padding: 20px;
+  .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+    @include clearfix;
+  }
+  .sub-table-container {
+    margin-top: 80px;
+  }
+}
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>

src/views/EquipmentManager/RepairManager/AddRepair.vue

@@ -0,0 +1,393 @@
+<template>
+  <div>
+    <el-row :gutter="15" class="page-form-container">
+      <div class="method-btn-area">
+        <el-button type="primary" plain icon="el-icon-arrow-left" @click="turnBack">{{ 'btn.back' | i18nFilter }}</el-button>
+      </div>
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="200px">
+        <el-col :span="12">
+          <el-form-item :label="$t('module.equipmentManager.repair.repairOrderNumber')" prop="repairOrderNumber">
+            <el-input
+              v-model="formData.repairOrderNumber"
+              :placeholder="$t('module.equipmentManager.repair.placeholderrepairOrderNumber')"
+              clearable
+              :style="{width: '100%'}"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('module.equipmentManager.repair.equipmentId')" prop="equipmentId">
+            <el-select
+              v-model="formData.equipmentId"
+              :placeholder="$t('module.equipmentManager.repair.placeholderequipmentId')"
+              clearable
+              :style="{width: '100%'}"
+            >
+              <el-option
+                v-for="(item, index) in dict.device"
+                :key="index"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('module.equipmentManager.repair.maintenanceWorker')" prop="maintenanceWorker">
+            <el-select
+              v-model="maintenanceWorker"
+              :placeholder="$t('module.equipmentManager.repair.placeholdermaintenanceWorker')"
+              clearable
+              multiple
+              :style="{width: '100%'}"
+              @change="changeWorker"
+            >
+              <el-option
+                v-for="(item, index) in dict.worker"
+                :key="index"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('module.equipmentManager.repair.workerContactInformation')" prop="workerContactInformation">
+            <el-input
+              v-model="formData.workerContactInformation"
+              :placeholder="$t('module.equipmentManager.repair.placeholderworkerContactInformation')"
+              clearable
+              disabled
+              :style="{width: '100%'}"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('module.equipmentManager.repair.maintenanceStatus')" prop="maintenanceStatus">
+            <el-select
+              v-model="formData.maintenanceStatus"
+              :placeholder="$t('module.equipmentManager.repair.placeholdermaintenanceStatus')"
+              clearable
+              :style="{width: '100%'}"
+            >
+              <el-option
+                :label="$t('module.equipmentManager.repair.maintenanceStatusNo')"
+                :value="0"
+              />
+              <el-option
+                :label="$t('module.equipmentManager.repair.maintenanceStatusYes')"
+                :value="1"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('module.equipmentManager.repair.equipmentPosition')" prop="equipmentPosition">
+            <el-input v-model="formData.equipmentPosition" :placeholder="$t('module.equipmentManager.repair.placeholderequipmentPosition')" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('module.equipmentManager.repair.timeOfFailure')" prop="timeOfFailure">
+            <el-date-picker
+              v-model="formData.timeOfFailure"
+              format="yyyy-MM-dd"
+              value-format="yyyy-MM-ddTHH:mm:ss"
+              :style="{width: '100%'}"
+              :placeholder="$t('module.equipmentManager.repair.placeholdertimeOfFailure')"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('module.equipmentManager.repair.faultLevel')" prop="faultLevel">
+            <el-select v-model="formData.faultLevel" :placeholder="$t('module.equipmentManager.repair.placeholderfaultLevel')" clearable :style="{width: '100%'}">
+              <el-option
+                v-for="(item, index) in dict.faultLevel"
+                :key="index"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item :label="$t('module.equipmentManager.repair.timerange')" prop="maintenanceStartTime">
+                <el-date-picker
+                  v-model="dateRange"
+                  type="datetimerange"
+                  :style="{width: '100%'}"
+                  :start-placeholder="$t('module.equipmentManager.repair.startDate')"
+                  :end-placeholder="$t('module.equipmentManager.repair.endDate')"
+                  clearable
+                  @change="dateChange"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item :label="$t('module.equipmentManager.repair.repairMode')" prop="repairMode">
+                <el-select
+                  v-model="formData.repairMode"
+                  :placeholder="$t('module.equipmentManager.repair.placeholderrepairMode')"
+                  clearable
+                  :style="{width: '100%'}"
+                >
+                  <el-option
+                    v-for="(item, index) in dict.repairType"
+                    :key="index"
+                    :label="item.name"
+                    :value="item.id"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.repair.faultDetail')" prop="faultDetail">
+            <el-input
+              v-model="formData.faultDetail"
+              type="textarea"
+              :placeholder="$t('module.equipmentManager.repair.placeholderfaultDetail')"
+              :autosize="{minRows: 4, maxRows: 4}"
+              :maxlength="200"
+              :style="{width: '100%'}"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.repair.maintenanceDetail')" prop="maintenanceDetail">
+            <el-input
+              v-model="formData.maintenanceDetail"
+              type="textarea"
+              :placeholder="$t('module.equipmentManager.repair.placeholdermaintenanceDetail')"
+              :autosize="{minRows: 4, maxRows: 4}"
+              :maxlength="200"
+              :style="{width: '100%'}"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.repair.annex')" prop="annex">
+            <single-file :file-id="formData.annex" @done="uploadSuccess" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.repair.repairTools')" prop="repairTools">
+            <el-input v-model="formData.repairTools" :placeholder="$t('module.equipmentManager.repair.placeholderrepairTools')" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.repair.remark')" prop="remark">
+            <el-input v-model="formData.remark" :placeholder="$t('module.equipmentManager.repair.placeholderremark')" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item size="large">
+            <el-button type="primary" @click="submitForm">{{ 'btn.submit' | i18nFilter }}</el-button>
+            <el-button @click="resetForm">{{ 'btn.reset' | i18nFilter }}</el-button>
+          </el-form-item>
+        </el-col>
+      </el-form>
+    </el-row>
+  </div>
+</template>
+<script>
+import { uploadPath } from '@/api/basic'
+import { addRepairInfo, getCode } from '@/api/equipment/repair'
+import { getDictDevice, getDictRepairType, getDictWorker, faultLevelList } from '@/api/dict'
+import SingleFile from '@/components/Upload/SingleFile'
+import i18n from '@/lang'
+export default {
+  components: {
+    SingleFile
+  },
+  props: [],
+  data() {
+    return {
+      formData: {
+        repairOrderNumber: undefined,
+        equipmentId: undefined,
+        maintenanceWorker: undefined,
+        maintenanceStatus: undefined,
+        equipmentPosition: undefined,
+        workerContactInformation: undefined,
+        timeOfFailure: undefined,
+        faultLevel: undefined,
+        maintenanceStartTime: null,
+        maintenanceFinishTime: null,
+        repairMode: undefined,
+        faultDetail: undefined,
+        maintenanceDetail: undefined,
+        annex: '',
+        repairTools: undefined,
+        remark: undefined
+      },
+      maintenanceWorker: [],
+      dateRange: null,
+      rules: {
+        repairOrderNumber: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.repair.placeholderrepairOrderNumber'),
+          trigger: 'blur'
+        }],
+        equipmentId: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.repair.placeholderequipmentId'),
+          trigger: 'change'
+        }],
+        maintenanceWorker: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.repair.placeholdermaintenanceWorker'),
+          trigger: 'blur'
+        }],
+        maintenanceStatus: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.repair.placeholdermaintenanceStatus'),
+          trigger: 'blur'
+        }],
+        equipmentPosition: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.repair.placeholderequipmentPosition'),
+          trigger: 'blur'
+        }],
+        workerContactInformation: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.repair.placeholderworkerContactInformation'),
+          trigger: 'blur'
+        }],
+        timeOfFailure: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.repair.placeholdertimeOfFailure'),
+          trigger: 'change'
+        }],
+        faultLevel: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.repair.placeholderfaultLevel'),
+          trigger: 'change'
+        }],
+        repairMode: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.repair.placeholderrepairMode'),
+          trigger: 'change'
+        }],
+        faultDetail: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.repair.placeholderfaultDetail'),
+          trigger: 'blur'
+        }],
+        maintenanceDetail: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.repair.placeholdermaintenanceDetail'),
+          trigger: 'blur'
+        }],
+        remark: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.repair.placeholderremark'),
+          trigger: 'blur'
+        }]
+      },
+      annexAction: uploadPath,
+      annexfileList: [],
+      dict: {
+        device: [],
+        repairType: [],
+        worker: [],
+        faultLevel: []
+      },
+      workerPhone: {}
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {
+    this.getDict()
+  },
+  methods: {
+    uploadSuccess(id) {
+      console.log(id)
+      this.formData.annex = id
+    },
+    changeWorker(v) {
+      this.formData.maintenanceWorker = this.maintenanceWorker.join(',')
+      this.formData.workerContactInformation = this.maintenanceWorker.map(item => {
+        return this.workerPhone[item.id]
+      }).join(',')
+    },
+    dateChange(date) {
+      console.log(date)
+      this.formData.maintenanceStartTime = date[0]
+      this.formData.maintenanceFinishTime = date[1]
+    },
+    submitForm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        // TODO 提交表单
+        const result = await addRepairInfo(this.formData)
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '添加成功！'
+          })
+          this.$router.go(-1)
+        }
+      })
+    },
+    resetForm() {
+      this.$refs['elForm'].resetFields()
+      this.dateRange = null
+      this.maintenanceWorker = []
+      this.formData.maintenanceStartTime = null
+      this.formData.maintenanceFinishTime = null
+    },
+    annexBeforeUpload(file) {
+      const isRightSize = file.size / 1024 / 1024 < 10
+      if (!isRightSize) {
+        this.$message.error('文件大小超过 10MB')
+      }
+      return isRightSize
+    },
+    async getDict() {
+      const result = await getDictDevice({
+        current: 1,
+        size: 999
+      })
+      this.dict.device = result
+      const result2 = await getDictRepairType()
+      this.dict.repairType = result2
+      const result3 = await getDictWorker()
+      this.dict.worker = result3
+      result3.map(item => {
+        this.workerPhone[item.id] = item.telephone
+      })
+      const result4 = await faultLevelList()
+      this.dict.faultLevel = result4
+      const result5 = await getCode()
+      this.formData.repairOrderNumber = result5.data
+    },
+    turnBack() {
+      this.$router.go(-1)
+    }
+  }
+}
+
+</script>
+<style lang="scss">
+.page-form-container {
+  padding: 20px;
+  .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+  }
+}
+.form-container {
+  padding-top: 40px;
+}
+.el-upload__tip {
+  line-height: 1.2;
+}
+
+</style>

src/views/EquipmentManager/RepairManager/EditRepair.vue

@@ -0,0 +1,416 @@
+<template>
+  <div>
+    <el-row :gutter="15" class="page-form-container">
+      <div class="method-btn-area">
+        <el-button type="primary" plain icon="el-icon-arrow-left" @click="turnBack">{{ 'btn.back' | i18nFilter }}</el-button>
+      </div>
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="200px">
+        <el-col :span="12">
+          <el-form-item :label="$t('module.equipmentManager.repair.repairOrderNumber')" prop="repairOrderNumber">
+            <el-input
+              v-model="formData.repairOrderNumber"
+              :placeholder="$t('module.equipmentManager.repair.placeholderrepairOrderNumber')"
+              clearable
+              :style="{width: '100%'}"
+              :disabled="readonly"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('module.equipmentManager.repair.equipmentId')" prop="equipmentId">
+            <el-select
+              v-model="formData.equipmentId"
+              :placeholder="$t('module.equipmentManager.repair.placeholderequipmentId')"
+              clearable
+              :style="{width: '100%'}"
+              :disabled="readonly"
+            >
+              <el-option
+                v-for="(item, index) in dict.device"
+                :key="index"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('module.equipmentManager.repair.maintenanceWorker')" prop="maintenanceWorker">
+            <el-select
+              v-model="maintenanceWorker"
+              :placeholder="$t('module.equipmentManager.repair.placeholdermaintenanceWorker')"
+              clearable
+              multiple
+              :disabled="readonly"
+              :style="{width: '100%'}"
+              @change="changeWorker"
+            >
+              <el-option
+                v-for="(item, index) in dict.worker"
+                :key="index"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('module.equipmentManager.repair.workerContactInformation')" prop="workerContactInformation">
+            <el-input
+              v-model="formData.workerContactInformation"
+              :placeholder="$t('module.equipmentManager.repair.placeholderworkerContactInformation')"
+              clearable
+              :style="{width: '100%'}"
+              disabled
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('module.equipmentManager.repair.maintenanceStatus')" prop="maintenanceStatus">
+            <el-select
+              v-model="formData.maintenanceStatus"
+              :placeholder="$t('module.equipmentManager.repair.placeholdermaintenanceStatus')"
+              clearable
+              :disabled="readonly"
+              :style="{width: '100%'}"
+            >
+              <el-option
+                :label="$t('module.equipmentManager.repair.maintenanceStatusNo')"
+                :value="0"
+              />
+              <el-option
+                :label="$t('module.equipmentManager.repair.maintenanceStatusYes')"
+                :value="1"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('module.equipmentManager.repair.equipmentPosition')" prop="equipmentPosition">
+            <el-input v-model="formData.equipmentPosition" :placeholder="$t('module.equipmentManager.repair.placeholderequipmentPosition')" clearable :style="{width: '100%'}" :disabled="readonly" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('module.equipmentManager.repair.timeOfFailure')" prop="timeOfFailure">
+            <el-date-picker
+              v-model="formData.timeOfFailure"
+              format="yyyy-MM-dd"
+              :style="{width: '100%'}"
+              :placeholder="$t('module.equipmentManager.repair.placeholdertimeOfFailure')"
+              clearable
+              :disabled="readonly"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('module.equipmentManager.repair.faultLevel')" prop="faultLevel">
+            <el-select v-model="formData.faultLevel" :placeholder="$t('module.equipmentManager.repair.placeholderfaultLevel')" clearable :style="{width: '100%'}" :disabled="readonly">
+              <el-option
+                v-for="(item, index) in dict.faultLevel"
+                :key="index"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item :label="$t('module.equipmentManager.repair.timerange')" prop="maintenanceStartTime">
+                <el-date-picker
+                  v-model="dateRange"
+                  type="datetimerange"
+                  :style="{width: '100%'}"
+                  :start-placeholder="$t('module.equipmentManager.repair.startDate')"
+                  :end-placeholder="$t('module.equipmentManager.repair.endDate')"
+                  clearable
+                  :disabled="readonly"
+                  @change="dateChange"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item :label="$t('module.equipmentManager.repair.repairMode')" prop="repairMode">
+                <el-select
+                  v-model="formData.repairMode"
+                  :placeholder="$t('module.equipmentManager.repair.placeholderrepairMode')"
+                  clearable
+                  :style="{width: '100%'}"
+                  :disabled="readonly"
+                >
+                  <el-option
+                    v-for="(item, index) in dict.repairType"
+                    :key="index"
+                    :label="item.name"
+                    :value="item.id"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.repair.faultDetail')" prop="faultDetail">
+            <el-input
+              v-model="formData.faultDetail"
+              type="textarea"
+              :placeholder="$t('module.equipmentManager.repair.placeholderfaultDetail')"
+              :autosize="{minRows: 4, maxRows: 4}"
+              :style="{width: '100%'}"
+              :maxlength="200"
+              :disabled="readonly"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.repair.maintenanceDetail')" prop="maintenanceDetail">
+            <el-input
+              v-model="formData.maintenanceDetail"
+              type="textarea"
+              :placeholder="$t('module.equipmentManager.repair.placeholdermaintenanceDetail')"
+              :autosize="{minRows: 4, maxRows: 4}"
+              :style="{width: '100%'}"
+              :maxlength="200"
+              :disabled="readonly"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.repair.annex')" prop="annex">
+            <single-file :file-id="formData.annex" :show-btn="!readonly" @done="uploadSuccess" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.repair.repairTools')" prop="repairTools">
+            <el-input v-model="formData.repairTools" :disabled="readonly" :placeholder="$t('module.equipmentManager.repair.placeholderrepairTools')" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item :label="$t('module.equipmentManager.repair.remark')" prop="remark">
+            <el-input v-model="formData.remark" :placeholder="$t('module.equipmentManager.repair.placeholderremark')" clearable :style="{width: '100%'}" :disabled="readonly" />
+          </el-form-item>
+        </el-col>
+        <el-col v-if="!readonly" :span="24">
+          <el-form-item size="large">
+            <el-button type="primary" @click="submitForm">{{ 'btn.submit' | i18nFilter }}</el-button>
+            <el-button @click="resetForm">{{ 'btn.reset' | i18nFilter }}</el-button>
+          </el-form-item>
+        </el-col>
+      </el-form>
+    </el-row>
+  </div>
+</template>
+<script>
+import { editRepairInfo, getRepairInfo } from '@/api/equipment/repair'
+import { getDictDevice, getDictRepairType, getDictWorker, faultLevelList } from '@/api/dict'
+import SingleFile from '@/components/Upload/SingleFile'
+import i18n from '@/lang'
+export default {
+  components: {
+    SingleFile
+  },
+  props: [],
+  data() {
+    return {
+      formData: {
+        repairOrderNumber: undefined,
+        equipmentId: undefined,
+        maintenanceWorker: undefined,
+        maintenanceStatus: null,
+        equipmentPosition: undefined,
+        workerContactInformation: undefined,
+        timeOfFailure: undefined,
+        faultLevel: undefined,
+        maintenanceStartTime: null,
+        maintenanceFinishTime: null,
+        repairMode: undefined,
+        faultDetail: undefined,
+        maintenanceDetail: undefined,
+        annex: '',
+        repairTools: undefined,
+        remark: undefined
+      },
+      dateRange: null,
+      rules: {
+        repairOrderNumber: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.repair.placeholderrepairOrderNumber'),
+          trigger: 'blur'
+        }],
+        equipmentId: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.repair.placeholderequipmentId'),
+          trigger: 'change'
+        }],
+        maintenanceWorker: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.repair.placeholdermaintenanceWorker'),
+          trigger: 'blur'
+        }],
+        maintenanceStatus: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.repair.placeholdermaintenanceStatus'),
+          trigger: 'blur'
+        }],
+        equipmentPosition: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.repair.placeholderequipmentPosition'),
+          trigger: 'blur'
+        }],
+        workerContactInformation: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.repair.placeholderworkerContactInformation'),
+          trigger: 'blur'
+        }],
+        timeOfFailure: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.repair.placeholdertimeOfFailure'),
+          trigger: 'change'
+        }],
+        faultLevel: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.repair.placeholderfaultLevel'),
+          trigger: 'change'
+        }],
+        repairMode: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.repair.placeholderrepairMode'),
+          trigger: 'change'
+        }],
+        faultDetail: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.repair.placeholderfaultDetail'),
+          trigger: 'blur'
+        }],
+        maintenanceDetail: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.repair.placeholdermaintenanceDetail'),
+          trigger: 'blur'
+        }],
+        remark: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.repair.placeholderremark'),
+          trigger: 'blur'
+        }]
+      },
+      dict: {
+        device: [],
+        repairType: [],
+        worker: [],
+        faultLevel: []
+      },
+      workerPhone: {}
+    }
+  },
+  computed: {
+    readonly() {
+      return this.$route.query.type === 'readonly'
+    },
+    id() {
+      return this.$route.query.id
+    }
+  },
+  watch: {},
+  created() {},
+  mounted() {
+    this.getDict()
+    this.getInfo()
+  },
+  methods: {
+    uploadSuccess(id) {
+      console.log(id)
+      this.formData.annex = id
+    },
+    changeWorker(v) {
+      this.formData.maintenanceWorker = this.maintenanceWorker.join(',')
+      this.formData.workerContactInformation = this.maintenanceWorker.map(item => {
+        return this.workerPhone[item.id]
+      }).join(',')
+    },
+    dateChange(date) {
+      this.formData.maintenanceStartTime = date[0]
+      this.formData.maintenanceFinishTime = date[1]
+    },
+    submitForm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        // TODO 提交表单
+        if (this.dateRange) {
+          this.formData.maintenanceStartTime = this.dateRange[0]
+          this.formData.maintenanceFinishTime = this.dateRange[1]
+        } else {
+          this.formData.maintenanceStartTime = ''
+          this.formData.maintenanceFinishTime = ''
+        }
+        const result = await editRepairInfo(this.formData)
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '修改成功！'
+          })
+          this.$router.go(-1)
+        }
+      })
+    },
+    resetForm() {
+      this.$refs['elForm'].resetFields()
+      this.dateRange = null
+      this.maintenanceWorker = []
+      this.formData.maintenanceStartTime = null
+      this.formData.maintenanceFinishTime = null
+    },
+    async getDict() {
+      const result = await getDictDevice({
+        current: 1,
+        size: 999
+      })
+      this.dict.device = result
+      const result2 = await getDictRepairType()
+      this.dict.repairType = result2
+      const result3 = await getDictWorker()
+      this.dict.worker = result3
+      result3.map(item => {
+        this.workerPhone[item.id] = item.telephone
+      })
+      const result4 = await faultLevelList()
+      this.dict.faultLevel = result4
+    },
+    async getInfo() {
+      const result = await getRepairInfo({
+        id: this.id
+      })
+      if (result.code === 0) {
+        this.formData = result.data
+        if (this.formData.maintenanceStartTime && this.formData.maintenanceFinishTime) {
+          this.dateRange = [this.formData.maintenanceStartTime, this.formData.maintenanceFinishTime]
+        }
+        if (this.formData.maintenanceWorker) {
+          this.maintenanceWorker = this.formData.maintenanceWorker.split(',')
+        }
+      }
+    },
+    turnBack() {
+      this.$router.go(-1)
+    }
+  }
+}
+
+</script>
+<style lang="scss">
+.page-form-container {
+  padding: 20px;
+  .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+  }
+}
+.form-container {
+  padding-top: 40px;
+}
+.el-upload__tip {
+  line-height: 1.2;
+}
+
+</style>

src/views/EquipmentManager/RepairManager/index.vue

@@ -0,0 +1,241 @@
+<!--
+ * @Date: 2020-12-15 15:36:52
+ * @LastEditors: guo
+ * @LastEditTime: 2021-03-20 17:22:44
+ * @FilePath: \basic-admin\src\views\EquipmentManager\RepairManager\index.vue
+ * @Description:
+-->
+<template>
+  <div class="usermanager-container">
+    <div class="method-btn-area">
+      <el-input v-model="listQuery.equipmentName" :placeholder="$t('module.equipmentManager.repair.searchPlaceholder')" style="width: 200px;" clearable />
+      <!-- <el-select v-model="listQuery.status" placeholder="请选择状态" clearable style="width: 200px;">
+        <el-option
+          label="完成"
+          value="1"
+        />
+        <el-option
+          label="等待"
+          value="2"
+        />
+        <el-option
+          label="进行中"
+          value="3"
+        />
+      </el-select> -->
+      <el-date-picker
+        v-model="datepicker"
+        type="daterange"
+        range-separator="-"
+        :start-placeholder="$t('module.equipmentManager.repair.startDate')"
+        :end-placeholder="$t('module.equipmentManager.repair.endDate')"
+        @change="changeTime"
+      />
+      <el-button type="primary" @click="getList">{{ 'btn.search' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="toAddPage">{{ 'btn.add' | i18nFilter }}</el-button>
+    </div>
+    <!-- <el-row :gutter="20">
+      <el-col :span="4">
+        <div class="tree-select-container">
+          <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick" />
+        </div>
+      </el-col>
+      <el-col :span="20">
+      </el-col>
+    </el-row> -->
+    <base-table :table-config="tableProps" :table-data="list" :is-loading="listLoading" :page="listQuery.current" :limit="listQuery.size">
+      <method-btn slot="handleBtn" :method-list="tableBtn" @clickBtn="handleClick" />
+    </base-table>
+    <pagination :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" />
+  </div>
+</template>
+
+<script>
+import dataDict from '@/filters/DataDict'
+// import DictFilter from '@/components/BaseTable/subcomponents/DataDictFilter'
+// edit here
+import { timeFormatter } from '@/filters'
+const tableBtn = [{
+  type: 'edit',
+  btnName: 'btn.edit'
+}, {
+  type: 'delete',
+  btnName: 'btn.delete'
+}, {
+  type: 'detail',
+  btnName: 'btn.detail'
+}]
+const tableProps = [{
+  prop: 'repairOrderNumber',
+  label: i18n.t('module.equipmentManager.repair.repairOrderNumber'),
+  align: 'center'
+}, {
+  prop: 'maintenanceStartTime',
+  label: i18n.t('module.equipmentManager.repair.maintenanceStartTime'),
+  align: 'center',
+  filter: timeFormatter,
+  width: '180px'
+}, {
+  prop: 'maintenanceFinishTime',
+  label: i18n.t('module.equipmentManager.repair.maintenanceFinishTime'),
+  align: 'center',
+  filter: timeFormatter,
+  width: '180px'
+}, {
+  prop: 'maintenanceStatus',
+  label: i18n.t('module.equipmentManager.repair.maintenanceStatus'),
+  align: 'center',
+  filter: dataDict('doneStatus')
+}, {
+  prop: 'equipmentName',
+  label: i18n.t('module.equipmentManager.repair.equipmentName'),
+  align: 'center'
+  // filter: dataDict('enableState')
+},
+// {
+//   prop: 'maintenanceWorker',
+//   label: i18n.t('module.equipmentManager.repair.maintenanceWorker'),
+//   align: 'center',
+//   subcomponent: DictFilter,
+//   filter: getDictWorker
+
+// }, {
+//   prop: 'workerContactInformation',
+//   label: i18n.t('module.equipmentManager.repair.workerContactInformation'),
+//   align: 'center'
+//   // filter: dataDict('enableState')
+// },
+{
+  prop: 'remark',
+  label: i18n.t('module.equipmentManager.repair.remark'),
+  align: 'center'
+}]
+import BaseTable from '@/components/BaseTable'
+// edit here
+import { objFilter } from '@/utils'
+import { getRepairList, delRepairInfo } from '@/api/equipment/repair'
+// import { getDictWorker } from '@/api/dict'
+import Pagination from '@/components/Pagination'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import i18n from '@/lang'
+export default {
+  name: 'OrgManager',
+  components: { Pagination, BaseTable, MethodBtn },
+  props: {},
+  data() {
+    return {
+      tableBtn,
+      tableProps,
+      datepicker: [],
+      list: [],
+      total: 0,
+      listLoading: true,
+      curEditId: null,
+      listQuery: {
+        current: 1,
+        size: 10,
+        equipmentName: '',
+        status: '',
+        date: '',
+        startTime: null,
+        endTime: null
+      },
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      }
+    }
+  },
+  created() {
+    this.getList()
+    // this.listLoading = false
+  },
+  mounted() {},
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      switch (raw.type) {
+        case 'delete':
+          this.$confirm(i18n.t('deleteMsgBox.content'), i18n.t('deleteMsgBox.hint'), {
+            confirmButtonText: i18n.t('btn.confirm'),
+            cancelButtonText: i18n.t('btn.cancel'),
+            type: 'warning'
+          }).then(async() => {
+            // 走接口
+            const result = await delRepairInfo({
+              id: raw.data.id
+            })
+            if (result.code === 0) {
+              this.$message({
+                type: 'success',
+                message: i18n.t('deleteMsgBox.doneMsg')
+              })
+              this.getList()
+            }
+          })
+          break
+        case 'edit':
+          this.$router.push({
+            name: 'EditRepair',
+            query: {
+              id: raw.data.id
+            }
+          })
+          break
+        case 'detail':
+          this.$router.push({
+            name: 'EditRepair',
+            query: {
+              id: raw.data.id,
+              type: 'readonly'
+            }
+          })
+          break
+      }
+    },
+    async getList() {
+      this.listLoading = true
+      // edit here
+      const res = await getRepairList(objFilter(this.listQuery))
+      if (res.code === 0) {
+        this.list = res.data.records
+        this.total = res.data.total
+        this.listLoading = false
+      }
+    },
+    toAddPage() {
+      this.$router.push({
+        name: 'AddRepair'
+      })
+    },
+    changeTime(val) {
+      this.listQuery.startTime = val ? val[0] : null
+      this.listQuery.endTime = val ? val[1] : null
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.usermanager-container {
+  padding: 20px;
+  .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+  }
+  .tree-select-container {
+    border: 1px solid #dfe6ec;
+    min-height: 400px;
+    padding: 20px;
+  }
+}
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>

src/views/EquipmentManager/StatusSetting/EditForm.vue

@@ -0,0 +1,129 @@
+<!--
+ * @Date: 2021-01-11 09:24:41
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-05-11 10:54:22
+ * @FilePath: \basic-admin\src\views\EquipmentManager\StatusSetting\EditForm.vue
+ * @Description: 子页面
+-->
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" title="修改设备状态" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="120px">
+        <el-form-item :label="$t('module.equipmentManager.statusSetting.devicestatus')" prop="status">
+          <el-select v-model="formData.status" :placeholder="$t('module.equipmentManager.statusSetting.placeholderdevicestatus')" clearable :style="{width: '80%'}">
+            <el-option
+              v-for="(item, index) in statusOptions"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+          <el-tooltip placement="top" style="float:right;margin-right:100px">
+            <div slot="content"><img src="../../../assets/img/status.png" alt=""></div>
+            <el-button type="text" icon="el-icon-question" />
+          </el-tooltip>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.statusSetting.controlStatus')" prop="controlStatus">
+          <el-select v-model="formData.controlStatus" :placeholder="$t('module.equipmentManager.statusSetting.placeholdercontrolStatus')" clearable :style="{width: '80%'}">
+            <el-option
+              v-for="(item, index) in controlStatusOptions"
+              :key="index"
+              :label="item.name"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { editStatusSetting } from '@/api/equipment/index'
+import { statusList } from '@/api/dict'
+import i18n from '@/lang'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: {
+    targetInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      formData: {
+        status: null,
+        oldStatus: null,
+        id: null,
+        controlStatus: null
+      },
+      rules: {
+        status: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.statusSetting.placeholderdevicestatus'),
+          trigger: 'change'
+        }],
+        controlStatus: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.statusSetting.placeholdercontrolStatus'),
+          trigger: 'change'
+        }]
+      },
+      statusOptions: [],
+      controlStatusOptions: [
+        { name: this.$t('module.equipmentManager.statusSetting.controlStatusLocal'), value: 0 },
+        { name: this.$t('module.equipmentManager.statusSetting.controlStatusOnline'), value: 1 }
+      ]
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {
+    this.getDict()
+  },
+  methods: {
+    onOpen() {
+      this.formData.id = this.targetInfo.id
+      this.formData.status = String(this.targetInfo.status)
+      this.formData.oldStatus = String(this.targetInfo.status)
+      this.formData.controlStatus = this.targetInfo.controlStatus
+    },
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        const result = await editStatusSetting({
+          ...this.formData,
+          id: this.targetInfo?.id
+        })
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '修改状态成功!'
+          })
+          this.$emit('done')
+          this.close()
+        }
+      })
+    },
+    async getDict() {
+      const result = await statusList()
+      this.statusOptions = result
+    }
+  }
+}
+
+</script>
+<style>
+</style>

src/views/EquipmentManager/StatusSetting/index.vue

@@ -0,0 +1,193 @@
+<!--
+ * @Date: 2020-12-15 15:36:52
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-05-11 11:29:33
+ * @FilePath: \basic-admin\src\views\EquipmentManager\StatusSetting\index.vue
+ * @Description:
+-->
+<template>
+  <div class="usermanager-container">
+    <div class="method-btn-area">
+      <el-input v-model="listQuery.equipmentName" :placeholder="$t('module.equipmentManager.statusSetting.searchPlaceholder')" style="width: 200px;" clearable />
+      <el-select v-model="listQuery.status" :placeholder="$t('module.equipmentManager.statusSetting.searchPlaceholder2')" clearable style="width: 200px;">
+        <el-option
+          v-for="item in dict.statusList"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"
+        />
+      </el-select>
+      <el-button type="primary" @click="getList">{{ 'btn.search' | i18nFilter }}</el-button>
+    </div>
+    <base-table :table-config="tableProps" :table-data="list" :is-loading="listLoading" :page="listQuery.current" :limit="listQuery.size">
+      <method-btn slot="handleBtn" :method-list="tableBtn" @clickBtn="handleClick" />
+    </base-table>
+    <pagination :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" />
+    <edit-form :visible.sync="showEditDialog" :target-info="{id: curEditId, status: curStatus, controlStatus: curControlStatus }" @done="getList" />
+  </div>
+</template>
+
+<script>
+// import dataDict from '@/filters/DataDict'
+import ColorSqua from '@/components/BaseTable/subcomponents/ColorSqua'
+import equipment from '@/filters/equipment'
+// edit here
+// const statusTableFilter = value => {
+//   const table = {
+//     '0': 'productive',
+//     '1': 'standby',
+//     '2': 'unscheduled downtime',
+//     '3': 'scheduled downtime',
+//     '4': 'engineering',
+//     '5': 'non-scheduled'
+//   }
+//   return table[value] ? table[value] : value
+// }
+
+// const colorTable = {
+//   '0': 'rgb(155,187,89)',
+//   '1': 'rgb(255,255,0)',
+//   '2': 'rgb(192,80,77)',
+//   '3': 'rgb(247,150,70)',
+//   '4': 'rgb(79,129,189)',
+//   '5': 'rgb(0,0,0)'
+// }
+const tableBtn = [{
+  type: 'edit',
+  btnName: 'btn.edit'
+}]
+const tableProps = [{
+  prop: 'code',
+  label: i18n.t('module.equipmentManager.statusSetting.code'),
+  align: 'center'
+}, {
+  prop: 'name',
+  label: i18n.t('module.equipmentManager.statusSetting.name'),
+  align: 'center'
+}, {
+  prop: 'controlStatus',
+  label: i18n.t('module.equipmentManager.statusSetting.controlStatus'),
+  align: 'center',
+  filter: equipment('controlStatus')
+}, {
+  prop: 'communication',
+  label: i18n.t('module.equipmentManager.statusSetting.communication'),
+  align: 'center',
+  filter: equipment('communication')
+}, {
+  prop: 'equipmentStatusName',
+  label: i18n.t('module.equipmentManager.statusSetting.status'),
+  align: 'center'
+}, {
+  prop: 'equipmentStatusColor',
+  label: i18n.t('module.equipmentManager.statusSetting.color'),
+  align: 'center',
+  subcomponent: ColorSqua
+  // filter: dataDict('enableState')
+}, {
+  prop: 'description',
+  label: i18n.t('module.equipmentManager.statusSetting.description'),
+  align: 'center'
+}]
+import EditForm from './EditForm'
+import BaseTable from '@/components/BaseTable'
+// edit here
+import { getStatusSettingList } from '@/api/equipment'
+import { statusList } from '@/api/dict'
+import Pagination from '@/components/Pagination'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import i18n from '@/lang'
+export default {
+  name: 'OrgManager',
+  components: {
+    Pagination,
+    BaseTable,
+    MethodBtn,
+    EditForm
+  },
+  props: {},
+  data() {
+    return {
+      tableBtn,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      showDialog: false,
+      curEditId: null,
+      curStatus: null,
+      curControlStatus: null,
+      showEditDialog: false,
+      listQuery: {
+        current: 1,
+        size: 10,
+        equipmentName: ''
+      },
+      dict: {
+        statusList: []
+      }
+    }
+  },
+  created() {
+    this.getList()
+    this.getDict()
+    // this.listLoading = false
+  },
+  mounted() {},
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      switch (raw.type) {
+        case 'edit':
+          this.showEditDialog = true
+          this.curEditId = raw.data.id
+          this.curStatus = raw.data.status
+          this.curControlStatus = raw.data.controlStatus
+          break
+      }
+    },
+    async getList() {
+      this.listLoading = true
+      // edit here
+      if (this.listQuery.status === '') {
+        delete this.listQuery.status
+      }
+      const res = await getStatusSettingList(this.listQuery)
+      if (res.code === 0) {
+        this.list = res.data.records
+        // this.list = res.data.records ? res.data.records.map(item => {
+        //   return {
+        //     ...item,
+        //     color: colorTable[item.status]
+        //   }
+        // }) : []
+        this.total = res.data.total
+        this.listLoading = false
+      }
+    },
+    async getDict() {
+      const result = await statusList()
+      this.dict.statusList = result
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.usermanager-container {
+  padding: 20px;
+  .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+  }
+}
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>

src/views/EquipmentManager/TypeParamSetting/ColorSqua.vue

@@ -0,0 +1,55 @@
+<!--
+ * @Date: 2021-02-20 10:45:21
+ * @LastEditors: guo
+ * @LastEditTime: 2021-03-16 14:36:29
+ * @FilePath: \basic-admin\src\views\EquipmentManager\TypeParamSetting\ColorSqua.vue
+ * @Description:
+-->
+<template>
+  <span class="color-squa" :style="{'color': color}" @click="emitClick">
+    {{ statusName }}
+  </span>
+</template>
+
+<script>
+const colorTable = {
+  '0': 'rgb(155,187,89)',
+  '1': 'rgb(255,255,0)',
+  '2': 'rgb(192,80,77)',
+  '3': 'rgb(247,150,70)',
+  '4': 'rgb(79,129,189)',
+  '5': 'rgb(0,0,0)'
+}
+const statusTableFilter = value => {
+  const table = {
+    '0': 'productive',
+    '1': 'standby',
+    '2': 'unscheduled downtime',
+    '3': 'scheduled downtime',
+    '4': 'engineering',
+    '5': 'non-scheduled'
+  }
+  return table[value] ? table[value] : value
+}
+export default {
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    color() {
+      return colorTable[this.injectData.status]
+    },
+    statusName() {
+      return statusTableFilter(this.injectData.status)
+    }
+  },
+  methods: {
+    emitClick() {
+      console.log(this.injectData)
+    }
+  }
+}
+</script>

src/views/EquipmentManager/TypeParamSetting/detail.vue

@@ -0,0 +1,86 @@
+<!--
+ * @Date: 2020-12-15 15:36:52
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-23 15:48:58
+ * @FilePath: \basic-admin\src\views\EquipmentManager\TypeParamSetting\detail.vue
+ * @Description: 设备类型参数列表
+-->
+<template>
+  <div class="usermanager-container">
+    <div class="info-box">
+      <span class="type">{{ $t('module.equipmentManager.baseinfo.name') }}: {{ info.name }}</span>
+      <span class="code">{{ $t('module.equipmentManager.baseinfo.code') }}: {{ info.code }}</span>
+    </div>
+    <el-tabs type="border-card">
+      <el-tab-pane :label="$t('module.equipmentManager.baseinfo.deviceTypeParam')">
+        <param-page />
+      </el-tab-pane>
+      <el-tab-pane :label="$t('module.equipmentManager.baseinfo.deviceTypeEvent')">
+        <event-page />
+      </el-tab-pane>
+      <el-tab-pane :label="$t('module.equipmentManager.baseinfo.deviceTypeAlarm')">
+        <alarm-page />
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import { getDeviceInfo } from '@/api/equipment/param'
+import ParamPage from './subpage/param'
+import EventPage from './subpage/event'
+import AlarmPage from './subpage/alarm'
+export default {
+  name: 'OrgManager',
+  components: { ParamPage, EventPage, AlarmPage },
+  props: {},
+  data() {
+    return {
+      info: {}
+    }
+  },
+  computed: {
+    id() {
+      return this.$route.query.id
+    }
+  },
+  mounted() {
+    this.getInfo()
+  },
+  methods: {
+    async getInfo() {
+      const result = await getDeviceInfo({
+        id: this.id
+      })
+      if (result.code === 0) {
+        this.info = result.data
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.usermanager-container {
+  padding: 20px;
+  .info-box {
+    padding: 40px 5px;
+    .code {
+      margin-left: 40px;
+    }
+  }
+  .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+  }
+}
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>

src/views/EquipmentManager/TypeParamSetting/index.vue

@@ -0,0 +1,119 @@
+<!--
+ * @Date: 2020-12-15 15:36:52
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-06-29 19:25:49
+ * @FilePath: \basic-admin\src\views\EquipmentManager\TypeParamSetting\index.vue
+ * @Description: 设备类型参数列表
+-->
+<template>
+  <div class="usermanager-container">
+    <div class="method-btn-area">
+      <el-input v-model="keywords" :placeholder="$t('module.equipmentManager.baseinfo.searchPlaceholder')" style="width: 200px;" clearable />
+      <el-button @click="getList">{{ 'btn.search' | i18nFilter }}</el-button>
+    </div>
+    <base-table :table-config="tableProps" :table-data="list" :is-loading="listLoading" :page="listQuery.current" :limit="listQuery.size">
+      <method-btn slot="handleBtn" :method-list="tableBtn" @clickBtn="handleClick" />
+    </base-table>
+    <pagination :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" />
+  </div>
+</template>
+
+<script>
+// import dataDict from '@/filters/DataDict'
+// edit here
+const tableBtn = [{
+  type: 'detail',
+  btnName: 'btn.detail'
+}]
+const tableProps = [{
+  prop: 'code',
+  label: i18n.t('module.equipmentManager.baseinfo.code'),
+  align: 'center'
+}, {
+  prop: 'name',
+  label: i18n.t('module.equipmentManager.baseinfo.name'),
+  align: 'center'
+}, {
+  prop: 'remark',
+  label: i18n.t('module.equipmentManager.baseinfo.remark'),
+  align: 'center'
+}]
+import BaseTable from '@/components/BaseTable'
+// edit here
+import { getDeviceList } from '@/api/equipment/param'
+
+import Pagination from '@/components/Pagination'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import i18n from '@/lang'
+export default {
+  name: 'OrgManager',
+  components: { Pagination, BaseTable, MethodBtn },
+  props: {},
+  data() {
+    return {
+      tableBtn,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      keywords: '',
+      listQuery: {
+        current: 1,
+        size: 10,
+        name: '',
+        code: ''
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  mounted() {},
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      switch (raw.type) {
+        case 'detail':
+          this.$router.push({
+            name: 'TypeParamDetail',
+            query: {
+              id: raw.data.id
+            }
+          })
+          break
+      }
+    },
+    async getList() {
+      this.listLoading = true
+      // edit here
+      this.listQuery.name = this.keywords
+      this.listQuery.code = this.keywords
+      const res = await getDeviceList(this.listQuery)
+      if (res.code === 0) {
+        this.list = res.data.records ? res.data.records : []
+        this.total = res.data.total
+        this.listLoading = false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.usermanager-container {
+  padding: 20px;
+  .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+  }
+}
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>

src/views/EquipmentManager/TypeParamSetting/subpage/alarm/addForm.vue

@@ -0,0 +1,132 @@
+<!--
+ * @Date: 2021-01-18 10:47:42
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-23 15:57:43
+ * @FilePath: \basic-admin\src\views\EquipmentManager\TypeParamSetting\subpage\alarm\addForm.vue
+ * @Description:
+-->
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="$t('module.equipmentManager.baseinfoalarm.addDialogTitle')" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="150px">
+        <el-form-item :label="$t('module.equipmentManager.baseinfoalarm.alarmId')" prop="alarmId">
+          <el-input v-model="formData.alarmId" clearable :style="{width: '100%'}" type="number" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.baseinfoalarm.alarmName')" prop="alarmName">
+          <el-input v-model="formData.alarmName" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.baseinfoalarm.alarmCode')" prop="alarmCode">
+          <el-input v-model="formData.alarmCode" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.baseinfoalarm.category')" prop="category">
+          <el-input v-model="formData.category" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.baseinfoalarm.enabled')" prop="enabled">
+          <el-switch v-model="formData.enabled" :active-value="1" :inactive-value="0" />
+        </el-form-item>
+        <!-- <el-form-item :label="$t('module.equipmentManager.baseinfoalarm.description')" prop="description">
+          <el-input v-model="formData.description" clearable :style="{width: '100%'}" />
+        </el-form-item> -->
+        <el-form-item :label="$t('module.equipmentManager.baseinfoalarm.remark')" prop="remark">
+          <el-input v-model="formData.remark" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">取消</el-button>
+        <el-button type="primary" @click="handelConfirm">确定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { addDeviceAlarmSetting, getDeviceAlarmCode } from '@/api/equipment/param'
+import i18n from '@/lang'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: {
+    targetInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      formData: {
+        alarmId: undefined,
+        alarmName: undefined,
+        alarmCode: undefined,
+        category: undefined,
+        enabled: 1,
+        description: undefined,
+        remark: undefined,
+        equipmentId: undefined
+
+      },
+      rules: {
+        alarmId: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.baseinfoalarm.placeholderalarmId'),
+          trigger: 'blur'
+        }],
+        alarmName: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.baseinfoalarm.placeholderalarmName'),
+          trigger: 'blur'
+        }],
+        alarmCode: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.baseinfoalarm.placeholderalarmCode'),
+          trigger: 'blur'
+        }],
+        category: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.baseinfoalarm.placeholdercategory'),
+          trigger: 'blur'
+        }],
+        description: [],
+        remark: []
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    onOpen() {
+      this.formData.equipmentId = this.targetInfo?.id
+      this.getCode()
+    },
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        const result = await addDeviceAlarmSetting(this.formData)
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '添加成功！'
+          })
+          this.$emit('done')
+          this.close()
+        }
+      })
+    },
+    async getCode() {
+      const result = await getDeviceAlarmCode()
+      if (result.code === 0) {
+        this.formData.alarmCode = result.data
+      }
+    }
+  }
+}
+
+</script>
+<style>
+</style>

src/views/EquipmentManager/TypeParamSetting/subpage/alarm/editForm.vue

@@ -0,0 +1,134 @@
+<!--
+ * @Date: 2021-01-18 10:47:42
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-23 15:58:05
+ * @FilePath: \basic-admin\src\views\EquipmentManager\TypeParamSetting\subpage\alarm\editForm.vue
+ * @Description:
+-->
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="$t('module.equipmentManager.baseinfoalarm.editDialogTitle')" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="150px">
+        <el-form-item :label="$t('module.equipmentManager.baseinfoalarm.alarmId')" prop="alarmId">
+          <el-input v-model="formData.alarmId" clearable :style="{width: '100%'}" type="number" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.baseinfoalarm.alarmName')" prop="alarmName">
+          <el-input v-model="formData.alarmName" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.baseinfoalarm.alarmCode')" prop="alarmCode">
+          <el-input v-model="formData.alarmCode" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.baseinfoalarm.category')" prop="category">
+          <el-input v-model="formData.category" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.baseinfoalarm.enabled')" prop="enabled">
+          <el-switch v-model="formData.enabled" :active-value="1" :inactive-value="0" />
+        </el-form-item>
+        <!-- <el-form-item :label="$t('module.equipmentManager.baseinfoalarm.description')" prop="description">
+          <el-input v-model="formData.description" clearable :style="{width: '100%'}" />
+        </el-form-item> -->
+        <el-form-item :label="$t('module.equipmentManager.baseinfoalarm.remark')" prop="remark">
+          <el-input v-model="formData.remark" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { editDeviceAlarmSetting, getDeviceAlarmSetting } from '@/api/equipment/param'
+import i18n from '@/lang'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: {
+    targetInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      formData: {
+        alarmId: undefined,
+        alarmName: undefined,
+        alarmCode: undefined,
+        category: undefined,
+        enabled: 1,
+        description: undefined,
+        remark: undefined,
+        equipmentId: undefined
+      },
+      rules: {
+        alarmId: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.baseinfoalarm.placeholderalarmId'),
+          trigger: 'blur'
+        }],
+        alarmName: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.baseinfoalarm.placeholderalarmName'),
+          trigger: 'blur'
+        }],
+        alarmCode: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.baseinfoalarm.placeholderalarmCode'),
+          trigger: 'blur'
+        }],
+        category: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.baseinfoalarm.placeholdercategory'),
+          trigger: 'blur'
+        }],
+        description: [],
+        remark: []
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    onOpen() {
+      this.formData.equipmentId = this.targetInfo.equipmentId
+      this.formData.id = this.targetInfo.id
+      this.getInfo()
+    },
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        const result = await editDeviceAlarmSetting(this.formData)
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '添加成功！'
+          })
+          this.$emit('done')
+          this.close()
+        }
+      })
+    },
+    async getInfo() {
+      const result = await getDeviceAlarmSetting({
+        id: this.formData.id
+      })
+      if (result.code === 0) {
+        this.formData = result.data
+      }
+    }
+  }
+}
+
+</script>
+<style>
+</style>

src/views/EquipmentManager/TypeParamSetting/subpage/alarm/index.vue

@@ -0,0 +1,153 @@
+<!--
+ * @Date: 2020-12-15 15:36:52
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-06-29 20:29:18
+ * @FilePath: \basic-admin\src\views\EquipmentManager\TypeParamSetting\subpage\alarm\index.vue
+ * @Description: 设备类型参数列表
+-->
+<template>
+  <div class="param-subpage-container">
+    <div class="method-btn-area">
+      <el-input v-model="listQuery.keywords" :placeholder="$t('module.equipmentManager.baseinfoalarm.searchPlaceholder')" style="width: 200px;" clearable />
+      <el-button @click="getList">{{ 'btn.search' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="showDialog = true">{{ 'btn.add' | i18nFilter }}</el-button>
+    </div>
+    <base-table :table-config="tableProps" :table-data="list" :is-loading="listLoading" :page="listQuery.current" :limit="listQuery.size">
+      <method-btn slot="handleBtn" :method-list="tableBtn" :is-fixed="false" :width="180" @clickBtn="handleClick" />
+    </base-table>
+    <pagination :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" />
+    <add-form :visible.sync="showDialog" :target-info="{id: listQuery.equipmentId}" @done="getList" />
+    <edit-form :visible.sync="showEditDialog" :target-info="{id: curEditId, equipmentId: listQuery.equipmentId }" @done="getList" />
+  </div>
+</template>
+
+<script>
+// import dataDict from '@/filters/DataDict'
+// edit here
+const tableBtn = [{
+  type: 'edit',
+  btnName: 'btn.edit'
+}, {
+  type: 'delete',
+  btnName: 'btn.delete'
+}]
+const tableProps = [{
+  prop: 'alarmId',
+  label: i18n.t('module.equipmentManager.baseinfoalarm.alarmId'),
+  align: 'center'
+}, {
+  prop: 'alarmName',
+  label: i18n.t('module.equipmentManager.baseinfoalarm.alarmName'),
+  align: 'center'
+}, {
+  prop: 'alarmCode',
+  label: i18n.t('module.equipmentManager.baseinfoalarm.alarmCode'),
+  align: 'center'
+}, {
+  prop: 'category',
+  label: i18n.t('module.equipmentManager.baseinfoalarm.category'),
+  align: 'center'
+}, {
+  prop: 'remark',
+  label: i18n.t('module.equipmentManager.baseinfoalarm.remark'),
+  align: 'center'
+}]
+import BaseTable from '@/components/BaseTable'
+// edit here
+import { getDeviceAlarmSettingList, delDeviceAlarmSetting } from '@/api/equipment/param'
+import AddForm from './addForm'
+import EditForm from './editForm'
+import Pagination from '@/components/Pagination'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import i18n from '@/lang'
+export default {
+  name: 'OrgManager',
+  components: { Pagination, BaseTable, MethodBtn, AddForm, EditForm },
+  props: {},
+  data() {
+    return {
+      tableBtn,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      showDialog: false,
+      curEditId: null,
+      showEditDialog: false,
+      listQuery: {
+        current: 1,
+        size: 10,
+        equipmentId: null
+      }
+    }
+  },
+  created() {
+    this.listQuery.equipmentId = this.$route.query.id
+    this.getList()
+    // this.listLoading = false
+  },
+  mounted() {},
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      switch (raw.type) {
+        case 'delete':
+          this.$confirm(i18n.t('deleteMsgBox.content'), i18n.t('deleteMsgBox.hint'), {
+            confirmButtonText: i18n.t('btn.confirm'),
+            cancelButtonText: i18n.t('btn.cancel'),
+            type: 'warning'
+          }).then(async() => {
+            // 走接口
+            const result = await delDeviceAlarmSetting({
+              id: raw.data.id
+            })
+            if (result.code === 0) {
+              this.$message({
+                type: 'success',
+                message: i18n.t('deleteMsgBox.doneMsg')
+              })
+              this.getList()
+            }
+          })
+          break
+        case 'edit':
+          this.showEditDialog = true
+          this.curEditId = raw.data.id
+          break
+      }
+    },
+    async getList(val) {
+      this.listLoading = true
+      // edit here
+      // console.log(this.listQuery
+      console.log(val)
+      console.log(this.listQuery.current)
+      const res = await getDeviceAlarmSettingList(this.listQuery)
+      if (res.code === 0) {
+        this.list = res.data.records ? res.data.records : []
+        this.total = res.data.total
+        this.listLoading = false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.param-subpage-container {
+  padding: 40px;
+  .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+  }
+}
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>

src/views/EquipmentManager/TypeParamSetting/subpage/event/addForm.vue

@@ -0,0 +1,131 @@
+<!--
+ * @Date: 2021-01-18 10:47:42
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-23 15:59:17
+ * @FilePath: \basic-admin\src\views\EquipmentManager\TypeParamSetting\subpage\event\addForm.vue
+ * @Description:
+-->
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="$t('module.equipmentManager.baseinfoevent.addDialogTitle')" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="150px">
+        <el-form-item :label="$t('module.equipmentManager.baseinfoevent.eventId')" prop="eventId">
+          <el-input v-model="formData.eventId" clearable :style="{width: '100%'}" type="number" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.baseinfoevent.eventName')" prop="eventName">
+          <el-input v-model="formData.eventName" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.baseinfoevent.eventCode')" prop="eventCode">
+          <el-input v-model="formData.eventCode" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <!-- <el-form-item :label="$t('module.equipmentManager.baseinfoevent.category')" prop="category">
+          <el-input v-model="formData.category" clearable :style="{width: '100%'}" />
+        </el-form-item> -->
+        <el-form-item :label="$t('module.equipmentManager.baseinfoevent.enabled')" prop="enabled">
+          <el-switch v-model="formData.enabled" :active-value="1" :inactive-value="0" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.baseinfoevent.description')" prop="description">
+          <el-input v-model="formData.description" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.baseinfoevent.remark')" prop="remark">
+          <el-input v-model="formData.remark" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { addDeviceEventSetting, getDeviceEventCode } from '@/api/equipment/param'
+import i18n from '@/lang'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: {
+    targetInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      formData: {
+        eventId: undefined,
+        eventName: undefined,
+        eventCode: undefined,
+        category: undefined,
+        enabled: 1,
+        description: undefined,
+        remark: undefined,
+        equipmentId: undefined
+      },
+      rules: {
+        eventId: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.baseinfoevent.placeholdereventId'),
+          trigger: 'blur'
+        }],
+        eventName: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.baseinfoevent.placeholdereventName'),
+          trigger: 'blur'
+        }],
+        eventCode: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.baseinfoevent.placeholdereventCode'),
+          trigger: 'blur'
+        }],
+        category: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.baseinfoevent.placeholdercategory'),
+          trigger: 'blur'
+        }],
+        description: [],
+        remark: []
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    onOpen() {
+      this.formData.equipmentId = this.targetInfo.id
+      this.getCode()
+    },
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        const result = await addDeviceEventSetting(this.formData)
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '添加成功！'
+          })
+          this.$emit('done')
+          this.close()
+        }
+      })
+    },
+    async getCode() {
+      const result = await getDeviceEventCode()
+      if (result.code === 0) {
+        this.formData.eventCode = result.data
+      }
+    }
+  }
+}
+
+</script>
+<style>
+</style>

src/views/EquipmentManager/TypeParamSetting/subpage/event/editForm.vue

@@ -0,0 +1,134 @@
+<!--
+ * @Date: 2021-01-18 10:47:42
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-23 15:59:53
+ * @FilePath: \basic-admin\src\views\EquipmentManager\TypeParamSetting\subpage\event\editForm.vue
+ * @Description:
+-->
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="$t('module.equipmentManager.baseinfoevent.editDialogTitle')" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="150px">
+        <el-form-item :label="$t('module.equipmentManager.baseinfoevent.eventId')" prop="eventId">
+          <el-input v-model="formData.eventId" clearable :style="{width: '100%'}" type="number" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.baseinfoevent.eventName')" prop="eventName">
+          <el-input v-model="formData.eventName" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.baseinfoevent.eventCode')" prop="eventCode">
+          <el-input v-model="formData.eventCode" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <!-- <el-form-item :label="$t('module.equipmentManager.baseinfoevent.category')" prop="category">
+          <el-input v-model="formData.category" clearable :style="{width: '100%'}" />
+        </el-form-item> -->
+        <el-form-item :label="$t('module.equipmentManager.baseinfoevent.enabled')" prop="enabled">
+          <el-switch v-model="formData.enabled" :active-value="1" :inactive-value="0" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.baseinfoevent.description')" prop="description">
+          <el-input v-model="formData.description" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.baseinfoevent.remark')" prop="remark">
+          <el-input v-model="formData.remark" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { editDeviceEventSetting, getDeviceEventSetting } from '@/api/equipment/param'
+import i18n from '@/lang'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: {
+    targetInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      formData: {
+        eventId: undefined,
+        eventName: undefined,
+        eventCode: undefined,
+        category: undefined,
+        enabled: 1,
+        description: undefined,
+        remark: undefined,
+        equipmentId: undefined
+      },
+      rules: {
+        eventId: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.baseinfoevent.placeholdereventId'),
+          trigger: 'blur'
+        }],
+        eventName: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.baseinfoevent.placeholdereventName'),
+          trigger: 'blur'
+        }],
+        eventCode: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.baseinfoevent.placeholdereventCode'),
+          trigger: 'blur'
+        }],
+        category: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.baseinfoevent.placeholdercategory'),
+          trigger: 'blur'
+        }],
+        description: [],
+        remark: []
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    onOpen() {
+      this.formData.equipmentId = this.targetInfo.equipmentId
+      this.formData.id = this.targetInfo.id
+      this.getInfo()
+    },
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        const result = await editDeviceEventSetting(this.formData)
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '修改成功！'
+          })
+          this.$emit('done')
+          this.close()
+        }
+      })
+    },
+    async getInfo() {
+      const result = await getDeviceEventSetting({
+        id: this.formData.id
+      })
+      if (result.code === 0) {
+        this.formData = result.data
+      }
+    }
+  }
+}
+
+</script>
+<style>
+</style>

src/views/EquipmentManager/TypeParamSetting/subpage/event/index.vue

@@ -0,0 +1,161 @@
+<!--
+ * @Date: 2020-12-15 15:36:52
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-06-29 20:26:56
+ * @FilePath: \basic-admin\src\views\EquipmentManager\TypeParamSetting\subpage\event\index.vue
+ * @Description: 设备类型参数列表
+-->
+<template>
+  <div class="param-subpage-container">
+    <div class="method-btn-area">
+      <el-input v-model="listQuery.keywords" :placeholder="$t('module.equipmentManager.baseinfoevent.searchPlaceholder')" style="width: 200px;" clearable />
+      <el-button @click="getList">{{ 'btn.search' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="showDialog = true">{{ 'btn.add' | i18nFilter }}</el-button>
+    </div>
+    <base-table :table-config="tableProps" :table-data="list" :is-loading="listLoading" :page="listQuery.current" :limit="listQuery.size">
+      <method-btn slot="handleBtn" :method-list="tableBtn" :is-fixed="false" :width="180" @clickBtn="handleClick" />
+    </base-table>
+    <pagination :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" />
+    <add-form :visible.sync="showDialog" :target-info="{id: listQuery.equipmentId}" @done="getList" />
+    <edit-form :visible.sync="showEditDialog" :target-info="{id: curEditId, equipmentId: listQuery.equipmentId }" @done="getList" />
+  </div>
+</template>
+
+<script>
+import dataDict from '@/filters/DataDict'
+// edit here
+const tableBtn = [{
+  type: 'edit',
+  btnName: 'btn.edit'
+}, {
+  type: 'delete',
+  btnName: 'btn.delete'
+}]
+//  {
+//   prop: 'category',
+//   label: i18n.t('module.equipmentManager.baseinfoevent.category'),
+//   align: 'center'
+// },
+const tableProps = [{
+  prop: 'eventId',
+  label: i18n.t('module.equipmentManager.baseinfoevent.eventId'),
+  align: 'center'
+}, {
+  prop: 'eventCode',
+  label: i18n.t('module.equipmentManager.baseinfoevent.eventCode'),
+  align: 'center'
+}, {
+  prop: 'eventName',
+  label: i18n.t('module.equipmentManager.baseinfoevent.eventName'),
+  align: 'center'
+}, {
+  prop: 'enabled',
+  label: i18n.t('module.equipmentManager.baseinfoevent.enabled'),
+  align: 'center',
+  filter: dataDict('yesOrNo')
+}, {
+  prop: 'description',
+  label: i18n.t('module.equipmentManager.baseinfoevent.description'),
+  align: 'center'
+}, {
+  prop: 'remark',
+  label: i18n.t('module.equipmentManager.baseinfoevent.remark'),
+  align: 'center'
+}]
+import BaseTable from '@/components/BaseTable'
+// edit here
+import { getDeviceEventSettingList, delDeviceEventSetting } from '@/api/equipment/param'
+import AddForm from './addForm'
+import EditForm from './editForm'
+import Pagination from '@/components/Pagination'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import i18n from '@/lang'
+export default {
+  name: 'OrgManager',
+  components: { Pagination, BaseTable, MethodBtn, AddForm, EditForm },
+  props: {},
+  data() {
+    return {
+      tableBtn,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      showDialog: false,
+      curEditId: null,
+      showEditDialog: false,
+      listQuery: {
+        current: 1,
+        size: 10,
+        equipmentId: null
+      }
+    }
+  },
+  created() {
+    this.listQuery.equipmentId = this.$route.query.id
+    this.getList()
+    // this.listLoading = false
+  },
+  mounted() {},
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      switch (raw.type) {
+        case 'delete':
+          this.$confirm(i18n.t('deleteMsgBox.content'), i18n.t('deleteMsgBox.hint'), {
+            confirmButtonText: i18n.t('btn.confirm'),
+            cancelButtonText: i18n.t('btn.cancel'),
+            type: 'warning'
+          }).then(async() => {
+            // 走接口
+            const result = await delDeviceEventSetting({
+              id: raw.data.id
+            })
+            if (result.code === 0) {
+              this.$message({
+                type: 'success',
+                message: i18n.t('deleteMsgBox.doneMsg')
+              })
+              this.getList()
+            }
+          })
+          break
+        case 'edit':
+          this.showEditDialog = true
+          this.curEditId = raw.data.id
+          break
+      }
+    },
+    async getList() {
+      this.listLoading = true
+      // edit here
+      console.log(this.listQuery)
+      const res = await getDeviceEventSettingList(this.listQuery)
+      if (res.code === 0) {
+        this.list = res.data.records ? res.data.records : []
+        this.total = res.data.total
+        this.listLoading = false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.param-subpage-container {
+  padding: 40px;
+  .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+  }
+}
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>

src/views/EquipmentManager/TypeParamSetting/subpage/param/addForm.vue

@@ -0,0 +1,274 @@
+<!--
+ * @Date: 2021-01-18 10:47:42
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-06-29 15:21:21
+ * @FilePath: \basic-admin\src\views\EquipmentManager\TypeParamSetting\subpage\param\addForm.vue
+ * @Description:
+-->
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="$t('module.equipmentManager.baseinfoparam.addDialogTitle')" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-row :gutter="15">
+        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" :label-width="language === 'zh' ? '120px' : '200px'">
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.paramName')" prop="paramName">
+              <el-input v-model="formData.paramName" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.paramId')" prop="paramId">
+              <el-input v-model="formData.paramId" type="number" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.paramCode')" prop="paramCode">
+              <el-input v-model="formData.paramCode" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.format')" prop="format">
+              <el-input v-model="formData.format" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.valueType')" prop="valueType">
+              <el-input v-model="formData.valueType" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.unit')" prop="unit">
+              <el-input v-model="formData.unit" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.maxValue')" prop="maxValue">
+              <el-input v-model="formData.maxValue" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.minValue')" prop="minValue">
+              <el-input v-model="formData.minValue" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.defaultValue')" prop="defaultValue">
+              <el-input v-model="formData.defaultValue" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <!-- <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.category')" prop="category">
+              <el-select v-model="formData.category" clearable :style="{width: '100%'}">
+                <el-option
+                  v-for="(item, index) in categoryOptions"
+                  :key="index"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col> -->
+          <!-- <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.dataWithPlc')" prop="dataWithPlc">
+              <el-input v-model="formData.dataWithPlc" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col> -->
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.enabled')" prop="enabled">
+              <el-switch v-model="formData.enabled" :active-value="1" :inactive-value="0" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.type')" prop="type">
+              <!-- <el-input v-model="formData.type" clearable :style="{width: '100%'}" /> -->
+              <el-select v-model="formData.type" clearable :style="{width: '100%'}">
+                <el-option
+                  label="SV"
+                  value="SV"
+                />
+                <el-option
+                  label="DV"
+                  value="DV"
+                />
+                <el-option
+                  label="ECV"
+                  value="ECV"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.uploadSpc')" prop="uploadSpc">
+              <el-switch v-model="formData.uploadSpc" :active-value="1" :inactive-value="0" />
+            </el-form-item>
+          </el-col>
+          <!-- <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.note')" prop="note">
+              <el-input v-model="formData.note" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col> -->
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.isCollected')" prop="isCollected">
+              <el-switch v-model="formData.isCollected" :active-value="1" :inactive-value="0" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="23">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.description')" prop="description">
+              <el-input v-model="formData.description" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="23">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.remark')" prop="remark">
+              <el-input v-model="formData.remark" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+        </el-form>
+      </el-row>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+const categoryOptions = [{
+  id: 'M',
+  name: i18n.t('module.equipmentManager.baseinfoparam.M')
+}, {
+  id: 'V',
+  name: i18n.t('module.equipmentManager.baseinfoparam.V')
+}, {
+  id: 'P',
+  name: i18n.t('module.equipmentManager.baseinfoparam.P')
+}, {
+  id: 'R',
+  name: i18n.t('module.equipmentManager.baseinfoparam.R')
+}, {
+  id: 'C',
+  name: i18n.t('module.equipmentManager.baseinfoparam.C')
+}, {
+  id: 'I',
+  name: i18n.t('module.equipmentManager.baseinfoparam.I')
+}]
+import { addDeviceParam, getDeviceParamCode } from '@/api/equipment/param'
+import { getLanguage } from '@/lang/index'
+import i18n from '@/lang'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: {
+    targetInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      formData: {
+        paramName: undefined,
+        paramId: undefined,
+        paramCode: undefined,
+        format: undefined,
+        valueType: undefined,
+        unit: undefined,
+        maxValue: undefined,
+        minValue: undefined,
+        defaultValue: undefined,
+        category: undefined,
+        dataWithPlc: undefined,
+        enabled: true,
+        type: undefined,
+        uploadSpc: true,
+        note: undefined,
+        isCollected: true,
+        description: undefined,
+        remark: undefined,
+        equipmentId: undefined
+      },
+      categoryOptions,
+      rules: {
+        paramName: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.baseinfoparam.placeholderparamName'),
+          trigger: 'blur'
+        }],
+        paramId: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.baseinfoparam.placeholderparamId'),
+          trigger: 'blur'
+        }],
+        paramCode: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.baseinfoparam.placeholderparamCode'),
+          trigger: 'blur'
+        }],
+        format: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.baseinfoparam.placeholderformat'),
+          trigger: 'blur'
+        }],
+        valueType: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.baseinfoparam.placeholderValueType'),
+          trigger: 'blur'
+        }],
+        category: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.baseinfoparam.placeholdertype'),
+          trigger: 'blur'
+        }],
+        dataWithPlc: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.baseinfoparam.placeholderdataWithPlc'),
+          trigger: 'blur'
+        }],
+        unit: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.baseinfoparam.placeholderunit'),
+          trigger: 'blur'
+        }]
+      },
+      language: getLanguage()
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    onOpen() {
+      this.formData.equipmentId = this.targetInfo?.id
+      this.getCode()
+    },
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        const result = await addDeviceParam(this.formData)
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '添加成功！'
+          })
+          this.$emit('done')
+          this.close()
+        }
+      })
+    },
+    async getCode() {
+      const result = await getDeviceParamCode()
+      if (result.code === 0) {
+        this.formData.paramCode = result.data
+      }
+    }
+  }
+}
+
+</script>
+<style>
+</style>

src/views/EquipmentManager/TypeParamSetting/subpage/param/editForm.vue

@@ -0,0 +1,278 @@
+<!--
+ * @Date: 2021-01-18 10:47:42
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-04-21 14:49:19
+ * @FilePath: \basic-admin\src\views\EquipmentManager\TypeParamSetting\subpage\param\editForm.vue
+ * @Description:
+-->
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="$t('module.equipmentManager.baseinfoparam.addDialogTitle')" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-row :gutter="15">
+        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" :label-width="language === 'zh' ? '120px' : '200px'">
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.paramName')" prop="paramName">
+              <el-input v-model="formData.paramName" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.paramId')" prop="paramId">
+              <el-input v-model="formData.paramId" type="number" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.paramCode')" prop="paramCode">
+              <el-input v-model="formData.paramCode" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.format')" prop="format">
+              <el-input v-model="formData.format" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.valueType')" prop="valueType">
+              <el-input v-model="formData.valueType" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.unit')" prop="unit">
+              <el-input v-model="formData.unit" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.maxValue')" prop="maxValue">
+              <el-input v-model="formData.maxValue" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.minValue')" prop="minValue">
+              <el-input v-model="formData.minValue" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.defaultValue')" prop="defaultValue">
+              <el-input v-model="formData.defaultValue" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <!-- <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.category')" prop="category">
+              <el-select v-model="formData.category" clearable :style="{width: '100%'}">
+                <el-option
+                  v-for="(item, index) in categoryOptions"
+                  :key="index"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.dataWithPlc')" prop="dataWithPlc">
+              <el-input v-model="formData.dataWithPlc" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col> -->
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.enabled')" prop="enabled">
+              <el-switch v-model="formData.enabled" :active-value="1" :inactive-value="0" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.type')" prop="type">
+              <el-select v-model="formData.type" clearable :style="{width: '100%'}">
+                <el-option
+                  label="SV"
+                  value="SV"
+                />
+                <el-option
+                  label="DV"
+                  value="DV"
+                />
+                <el-option
+                  label="ECV"
+                  value="ECV"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.uploadSpc')" prop="uploadSpc">
+              <el-switch v-model="formData.uploadSpc" :active-value="1" :inactive-value="0" />
+            </el-form-item>
+          </el-col>
+          <!-- <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.note')" prop="note">
+              <el-input v-model="formData.note" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col> -->
+          <el-col :span="12">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.isCollected')" prop="isCollected">
+              <el-switch v-model="formData.isCollected" :active-value="1" :inactive-value="0" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="23">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.description')" prop="description">
+              <el-input v-model="formData.description" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="23">
+            <el-form-item :label="$t('module.equipmentManager.baseinfoparam.remark')" prop="remark">
+              <el-input v-model="formData.remark" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+        </el-form>
+      </el-row>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+const categoryOptions = [{
+  id: 'M',
+  name: 'Material Related Value'
+}, {
+  id: 'V',
+  name: 'Process Actual Value'
+}, {
+  id: 'P',
+  name: 'Recipe Parameter'
+}, {
+  id: 'R',
+  name: 'Material Related Value'
+}, {
+  id: 'C',
+  name: 'Consumable Value'
+}, {
+  id: 'I',
+  name: 'Interface Related'
+}]
+import { getDeviceParam, editDeviceParam } from '@/api/equipment/param'
+import { getLanguage } from '@/lang/index'
+import i18n from '@/lang'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: {
+    targetInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      formData: {
+        paramName: undefined,
+        paramId: undefined,
+        paramCode: undefined,
+        format: undefined,
+        field103: undefined,
+        unit: undefined,
+        maxValue: undefined,
+        minValue: undefined,
+        defaultValue: undefined,
+        type: undefined,
+        dataWithPlc: undefined,
+        enabled: true,
+        field113: undefined,
+        uploadSpc: true,
+        field115: undefined,
+        isCollected: true,
+        description: undefined,
+        remark: undefined,
+        equipmentId: undefined
+      },
+      categoryOptions,
+      rules: {
+        paramName: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.baseinfoparam.placeholderparamName'),
+          trigger: 'blur'
+        }],
+        paramId: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.baseinfoparam.placeholderparamId'),
+          trigger: 'blur'
+        }],
+        paramCode: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.baseinfoparam.placeholderparamCode'),
+          trigger: 'blur'
+        }],
+        format: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.baseinfoparam.placeholderformat'),
+          trigger: 'blur'
+        }],
+        valueType: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.baseinfoparam.placeholderValueType'),
+          trigger: 'blur'
+        }],
+        category: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.baseinfoparam.placeholdertype'),
+          trigger: 'blur'
+        }],
+        dataWithPlc: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.baseinfoparam.placeholderdataWithPlc'),
+          trigger: 'blur'
+        }],
+        unit: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.baseinfoparam.placeholderunit'),
+          trigger: 'blur'
+        }]
+      },
+      language: getLanguage()
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {
+    console.log(this.language)
+  },
+  mounted() {},
+  methods: {
+    onOpen() {
+      this.getInfo()
+      // this.formData.id = this.targetInfo?.id
+      this.formData.equipmentId = this.targetInfo?.equipmentId
+    },
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        const result = await editDeviceParam(this.formData)
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '修改成功！'
+          })
+          this.$emit('done')
+          this.close()
+        }
+      })
+    },
+    async getInfo() {
+      const result = await getDeviceParam({
+        id: this.targetInfo?.id
+      })
+      if (result.code === 0) {
+        this.formData = result.data
+      }
+    }
+  }
+}
+
+</script>
+<style>
+</style>

src/views/EquipmentManager/TypeParamSetting/subpage/param/index.vue

@@ -0,0 +1,224 @@
+<!--
+ * @Date: 2020-12-15 15:36:52
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-06-29 20:46:28
+ * @FilePath: \basic-admin\src\views\EquipmentManager\TypeParamSetting\subpage\param\index.vue
+ * @Description: 设备类型参数列表
+-->
+<template>
+  <div class="param-subpage-container">
+    <div class="method-btn-area">
+      <el-input v-model="listQuery.paramName" :placeholder="$t('module.equipmentManager.baseinfoparam.searchPlaceholder')" style="width: 200px;" clearable />
+      <el-button @click="getList">{{ 'btn.search' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="showDialog = true">{{ 'btn.add' | i18nFilter }}</el-button>
+    </div>
+    <base-table :table-config="tableProps" :table-data="list" :is-loading="listLoading" :page="listQuery.current" :limit="listQuery.size" :is-fixed="true">
+      <method-btn slot="handleBtn" :method-list="tableBtn" :is-fixed="true" @clickBtn="handleClick" />
+    </base-table>
+    <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.size" @pagination="getList" />
+    <add-form :visible.sync="showDialog" :target-info="{id: listQuery.equipmentId}" @done="getList" />
+    <edit-form :visible.sync="showEditDialog" :target-info="{id: curEditId, equipmentId: listQuery.equipmentId }" @done="getList" />
+  </div>
+</template>
+
+<script>
+import dataDict from '@/filters/DataDict'
+// import equipmentDict from '@/filters/equipment'
+// edit here
+const tableBtn = [{
+  type: 'edit',
+  btnName: 'btn.edit'
+}, {
+  type: 'delete',
+  btnName: 'btn.delete'
+}]
+//  {
+//   prop: 'dataWithPlc',
+//   label: i18n.t('module.equipmentManager.baseinfoparam.dataWithPlc'),
+//   align: 'center',
+//   width: '120px'
+// }, {
+//   prop: 'category',
+//   label: i18n.t('module.equipmentManager.baseinfoparam.category'),
+//   align: 'center',
+//   width: '120px',
+//   filter: equipmentDict('category')
+// },
+const tableProps = [{
+  prop: 'paramId',
+  label: i18n.t('module.equipmentManager.baseinfoparam.paramId'),
+  align: 'center'
+}, {
+  prop: 'paramName',
+  label: i18n.t('module.equipmentManager.baseinfoparam.paramName'),
+  align: 'center',
+  width: '120px'
+}, {
+  prop: 'paramCode',
+  label: i18n.t('module.equipmentManager.baseinfoparam.paramCode'),
+  align: 'center',
+  width: '120px'
+}, {
+  prop: 'format',
+  label: i18n.t('module.equipmentManager.baseinfoparam.format'),
+  align: 'center',
+  width: '120px'
+}, {
+  prop: 'unit',
+  label: i18n.t('module.equipmentManager.baseinfoparam.unit'),
+  align: 'center',
+  width: '120px'
+}, {
+  prop: 'maxValue',
+  label: i18n.t('module.equipmentManager.baseinfoparam.maxValue'),
+  align: 'center',
+  width: '120px'
+}, {
+  prop: 'minValue',
+  label: i18n.t('module.equipmentManager.baseinfoparam.minValue'),
+  align: 'center',
+  width: '120px'
+}, {
+  prop: 'defaultValue',
+  label: i18n.t('module.equipmentManager.baseinfoparam.defaultValue'),
+  align: 'center',
+  width: '120px'
+}, {
+  prop: 'valueType',
+  label: i18n.t('module.equipmentManager.baseinfoparam.valueType'),
+  align: 'center',
+  width: '120px'
+}, {
+  prop: 'enabled',
+  label: i18n.t('module.equipmentManager.baseinfoparam.enabled'),
+  align: 'center',
+  width: '120px',
+  filter: dataDict('yesOrNo')
+}, {
+  prop: 'type',
+  label: i18n.t('module.equipmentManager.baseinfoparam.type'),
+  align: 'center',
+  width: '120px'
+}, {
+  prop: 'uploadSpc',
+  label: i18n.t('module.equipmentManager.baseinfoparam.uploadSpc'),
+  align: 'center',
+  width: '120px',
+  filter: dataDict('yesOrNo')
+}, {
+  prop: 'isCollected',
+  label: i18n.t('module.equipmentManager.baseinfoparam.isCollected'),
+  align: 'center',
+  width: '120px',
+  filter: dataDict('yesOrNo')
+}, {
+  prop: 'description',
+  label: i18n.t('module.equipmentManager.baseinfoparam.description'),
+  align: 'center',
+  width: '120px'
+}, {
+  prop: 'remark',
+  label: i18n.t('module.equipmentManager.baseinfoparam.remark'),
+  align: 'center',
+  width: '120px'
+}]
+import BaseTable from '@/components/BaseTable'
+// edit here
+import { getDeviceParamList, delDeviceParam } from '@/api/equipment/param'
+import AddForm from './addForm'
+import EditForm from './editForm'
+import Pagination from '@/components/Pagination'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import i18n from '@/lang'
+export default {
+  name: 'OrgManager',
+  components: { Pagination, BaseTable, MethodBtn, AddForm, EditForm },
+  props: {},
+  data() {
+    return {
+      tableBtn,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      showDialog: false,
+      curEditId: null,
+      showEditDialog: false,
+      listQuery: {
+        current: 1,
+        size: 10,
+        equipmentId: null,
+        paramName: null
+      }
+    }
+  },
+  created() {
+    this.listQuery.equipmentId = this.$route.query.id
+    this.getList()
+    // this.listLoading = false
+  },
+  mounted() {},
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      switch (raw.type) {
+        case 'delete':
+          this.$confirm(i18n.t('deleteMsgBox.content'), i18n.t('deleteMsgBox.hint'), {
+            confirmButtonText: i18n.t('btn.confirm'),
+            cancelButtonText: i18n.t('btn.cancel'),
+            type: 'warning'
+          }).then(async() => {
+            // 走接口
+            const result = await delDeviceParam({
+              id: raw.data.id
+            })
+            if (result.code === 0) {
+              this.$message({
+                type: 'success',
+                message: i18n.t('deleteMsgBox.doneMsg')
+              })
+              this.getList()
+            }
+          })
+          break
+        case 'edit':
+          this.showEditDialog = true
+          this.curEditId = raw.data.id
+          break
+      }
+    },
+    async getList(val) {
+      this.listLoading = true
+      // edit here
+      if (val) {
+        this.listQuery.current = val.current
+      }
+      const res = await getDeviceParamList(this.listQuery)
+      if (res.code === 0) {
+        this.list = res.data.records ? res.data.records : []
+        this.total = res.data.total
+        this.listLoading = false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.param-subpage-container {
+  padding: 40px;
+  .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+  }
+}
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>

src/views/EquipmentManager/equipmentManagerManage/AddorEditForm.vue

@@ -0,0 +1,159 @@
+<template>
+  <el-drawer
+    :append-to-body="true"
+    :show-close="false"
+    :visible.sync="visible"
+    size="40%"
+  >
+    <div slot="title" style=" background-color:#02BCFF;font-size:1.5em;color:white;padding:5px 20px">
+      {{ !dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter }}
+    </div>
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="150px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('module.equipmentManager.eqManagerManage.equipmentName')" prop="equipmentId">
+        <el-select v-model="dataForm.equipmentId" :placeholder="$i18nForm(['placeholder.select', $t('module.equipmentManager.eqManagerManage.equipmentName')])" clearable>
+          <el-option v-for="item in eqList" :key="item.id" :value="item.id" :label="item.name" />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('module.equipmentManager.eqManagerManage.equipmentCode')" prop="equipmentId">
+        <el-select v-model="dataForm.equipmentId" :placeholder="$i18nForm(['placeholder.select', $t('module.equipmentManager.eqManagerManage.equipmentCode')])" clearable disabled>
+          <el-option v-for="item in eqList" :key="item.id" :value="item.id" :label="item.code" />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('module.equipmentManager.eqManagerManage.worker')" prop="workerId">
+        <el-select v-model="dataForm.workerId" :placeholder="$i18nForm(['placeholder.select', $t('module.equipmentManager.eqManagerManage.worker')])" clearable @change="changeWorker">
+          <el-option v-for="item in roleList" :key="item.userId" :value="item.userId" :label="item.name" />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <div class="drawer-footer">
+      <el-button @click="visible = false">{{ 'btn.back' | i18nFilter }}</el-button>
+      <el-button type="primary" :loading="btnLoading" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </div>
+  </el-drawer>
+</template>
+
+<script>
+import { getInfo, add, edit } from '@/api/equipment/eqManager'
+
+export default {
+  props: {
+    workerList: {
+      type: Array,
+      default: () => []
+    },
+    eqList: {
+      type: Array,
+      default: () => []
+    },
+    roleList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      btnLoading: false,
+      dataForm: {
+        id: 0,
+        equipmentId: '',
+        workerId: ''
+      },
+      roleId: '',
+      dataRule: {
+        equipmentId: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.equipmentManager.eqManagerManage.equipmentName')]), trigger: 'blur' }
+        ],
+        workerId: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.equipmentManager.eqManagerManage.worker')]), trigger: 'blur' }
+        ]
+      },
+      roleObj: {}
+    }
+  },
+  watch: {
+    roleList: function(val) {
+      this.roleObj = {}
+      val.map(item => {
+        this.roleObj[item.id] = item.dataName
+      })
+    }
+  },
+  mounted() {},
+  methods: {
+    init(id) {
+      this.dataForm.id = id || ''
+      this.btnLoading = false
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          getInfo({ id: this.dataForm.id }).then(res => {
+            this.dataForm.equipmentId = res.data.equipmentId
+            this.dataForm.workerId = res.data.workerId
+          })
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.btnLoading = true
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = {
+            'equipmentId': this.dataForm.equipmentId,
+            'workerId': this.dataForm.workerId,
+            'id': this.dataForm.id
+          }
+          if (this.dataForm.id) {
+            edit(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.btnLoading = false
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            add(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.$refs['dataForm'].resetFields()
+                  this.btnLoading = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    },
+    changeWorker(v) {
+      for (let i = 0; i < this.workerList.length; i++) {
+        if (v === this.workerList[i].id) {
+          this.roleId = this.workerList[i].roleId
+          return
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.drawer-footer {
+  width: 100%;
+  margin-top: 50px;
+  border-top: 1px solid #e8e8e8;
+  padding: 10px 50px;
+  text-align: left;
+  background: #fff;
+}
+</style>

src/views/EquipmentManager/equipmentManagerManage/index.vue

@@ -0,0 +1,204 @@
+<!--
+ * @Author: gtz
+ * @Date: 2021-04-16 16:05:31
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-23 09:14:27
+ * @Description: file content
+-->
+<template>
+  <div class="usermanager-container">
+    <div class="method-btn-area">
+      <el-select v-model="listQuery.workerId" :placeholder="$t('module.equipmentManager.eqManagerManage.worker')" filterable clearable style="width: 200px;">
+        <el-option
+          v-for="item in roleList"
+          :key="item.userId"
+          :label="item.name"
+          :value="item.userId"
+        />
+      </el-select>
+      <el-select v-model="listQuery.equipmentId" :placeholder="$t('module.equipmentManager.eqManagerManage.equipmentName')" filterable clearable style="width: 200px;">
+        <el-option
+          v-for="item in eqList"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"
+        />
+      </el-select>
+      <!-- <el-select v-model="listQuery.workerId" :placeholder="$t('module.equipmentManager.eqManagerManage.worker')" clearable style="width: 200px;">
+        <el-option
+          v-for="item in workerList"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"
+        />
+      </el-select> -->
+      <el-button type="primary" @click="getList">{{ 'btn.search' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="handleAdd">{{ 'btn.add' | i18nFilter }}</el-button>
+    </div>
+    <base-table :table-config="tableProps" :table-data="list" :is-loading="listLoading" :page="listQuery.current" :limit="listQuery.size">
+      <method-btn slot="handleBtn" :method-list="tableBtn" @clickBtn="handleClick" />
+    </base-table>
+    <pagination :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" />
+    <add-or-edit-form ref="addorEditDrawer" :role-list="roleList" :worker-list="workerList" :eq-list="eqList" :visible.sync="showAddorEditDialog" @refreshDataList="getList" @done="getList" />
+  </div>
+</template>
+
+<script>
+
+const tableBtn = [{
+  type: 'edit',
+  btnName: 'btn.edit'
+}, {
+  type: 'delete',
+  btnName: 'btn.delete'
+}]
+const tableProps = [{
+  prop: 'equipmentName',
+  label: i18n.t('module.equipmentManager.eqManagerManage.equipmentName'),
+  align: 'center'
+}, {
+  prop: 'equipmentCode',
+  label: i18n.t('module.equipmentManager.eqManagerManage.equipmentCode'),
+  align: 'center'
+}, {
+  prop: 'equipmentDesc',
+  label: i18n.t('module.equipmentManager.eqManagerManage.description'),
+  align: 'center'
+}, {
+  prop: 'workerName',
+  label: i18n.t('module.equipmentManager.eqManagerManage.worker'),
+  align: 'center'
+}, {
+  prop: 'ruleName',
+  label: i18n.t('module.equipmentManager.eqManagerManage.roleName'),
+  align: 'center'
+}]
+// , {
+//   prop: 'remark',
+//   label: i18n.t('module.equipmentManager.eqManagerManage.remark'),
+//   align: 'center'
+// }
+import AddOrEditForm from './AddorEditForm'
+import BaseTable from '@/components/BaseTable'
+// edit here
+import { page, del, getEqList, getWorkerList, getRoleList } from '@/api/equipment/eqManager'
+import Pagination from '@/components/Pagination'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import i18n from '@/lang'
+export default {
+  name: 'OrgManager',
+  components: {
+    Pagination,
+    BaseTable,
+    MethodBtn,
+    AddOrEditForm
+  },
+  props: {},
+  data() {
+    return {
+      tableBtn,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      showDialog: false,
+      curEditId: null,
+      curStatus: null,
+      showAddorEditDialog: false,
+      listQuery: {
+        current: 1,
+        size: 10,
+        equipmentId: null,
+        workerId: null
+      },
+      eqList: [],
+      workerList: [],
+      roleList: []
+    }
+  },
+  created() {},
+  mounted() {
+    this.getListQuery()
+  },
+  methods: {
+    handleClick(raw) {
+      switch (raw.type) {
+        case 'edit':
+          this.showAddorEditDialog = true
+          this.$nextTick(() => {
+            this.$refs.addorEditDrawer.init(raw.data.id)
+          })
+          break
+        case 'delete':
+          this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}?`, this.$t('module.basicData.visual.Tips'), {
+            confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+            cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+            type: 'warning'
+          }).then(() => {
+            del({ id: raw.data.id }).then(response => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.getList()
+                }
+              })
+            })
+          }).catch(() => {})
+      }
+    },
+    handleAdd() {
+      this.showAddorEditDialog = true
+      this.$nextTick(() => {
+        this.$refs.addorEditDrawer.init()
+      })
+    },
+    async getList() {
+      this.listLoading = true
+      // edit here
+      const res = await page(this.listQuery)
+      if (res.code === 0) {
+        this.list = res.data.records
+        this.total = res.data.total
+        this.listLoading = false
+      }
+    },
+    async getListQuery() {
+      const resEq = await getEqList({
+        current: 1,
+        size: 999
+      })
+      this.eqList = resEq.data.records
+      const resWorker = await getWorkerList({
+        current: 1,
+        size: 999
+      })
+      this.workerList = resWorker.data.records
+      const resRole = await getRoleList()
+      this.roleList = resRole.data
+      console.log(this.roleList)
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.usermanager-container {
+  padding: 20px;
+  .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+  }
+}
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>

src/views/EquipmentManager/equipmentParams/choiceParamModel.vue

@@ -0,0 +1,75 @@
+<!--
+ * @Author: gtz
+ * @Date: 2021-06-17 16:54:55
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-06-17 17:19:56
+ * @Description: file content
+-->
+<template>
+  <div>
+    <el-dialog :visible.sync="visible" :title="$t('module.equipmentManager.equipmentParams.choiceParam')" @open="onOpen" @close="onClose">
+      <el-checkbox-group
+        v-model="checkedItems"
+        :min="0"
+        :max="100"
+      >
+        <el-checkbox v-for="item in items" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
+      </el-checkbox-group>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+// import i18n from '@/lang'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: {
+    paramNameList: {
+      type: Array,
+      default: () => []
+    },
+    checkParams: {
+      type: Array,
+      default: () => []
+    },
+    isShow: {
+      type: Boolean,
+      default: () => false
+    }
+  },
+  data() {
+    return {
+      items: [],
+      checkedItems: [],
+      visible: false
+    }
+  },
+  computed: {},
+  watch: {
+    isShow: function(val) {
+      this.visible = val
+    }
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    onOpen() {
+      this.items = JSON.parse(JSON.stringify(this.paramNameList))
+      this.checkedItems = JSON.parse(JSON.stringify(this.checkParams))
+    },
+    onClose() {},
+    close() {
+      this.$emit('close')
+    },
+    handelConfirm() {
+      this.$emit('handelConfirm', this.checkedItems)
+    }
+  }
+}
+</script>
+<style>
+</style>

src/views/EquipmentManager/equipmentParams/index.vue

@@ -0,0 +1,185 @@
+<!--
+ * @Author: gtz
+ * @Date: 2021-06-17 09:49:03
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-06-17 17:53:30
+ * @Description: file content
+-->
+<!--
+ * @Date: 2020-12-15 15:36:52
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-05-25 08:57:51
+ * @FilePath: \basic-admin\src\views\EquipmentManager\MaintainLog\index.vue
+ * @Description:
+-->
+<template>
+  <div class="usermanager-container">
+    <div class="method-btn-area">
+      {{ $t('module.equipmentManager.equipmentParams.startAndEndTime') }}：
+      <el-date-picker
+        v-model="date"
+        type="daterange"
+        range-separator="-"
+        :start-placeholder="$t('module.equipmentManager.equipmentParams.startTime')"
+        :end-placeholder="$t('module.equipmentManager.equipmentParams.endTime')"
+        @change="changeTime"
+      />
+      <el-button type="primary" @click="showChoiceParam">{{ $t('module.equipmentManager.equipmentParams.choiceParam') }}</el-button>
+      <el-button type="primary" @click="getList">{{ 'btn.search' | i18nFilter }}</el-button>
+    </div>
+    <el-row :gutter="20">
+      <el-col :span="4">
+        <div class="tree-select-container">
+          <Tree :tree-type="treeType" @lastNodeClick="eqChange" />
+        </div>
+      </el-col>
+      <el-col :span="20">
+        <base-table :table-config="tableProps" :table-data="list" :is-loading="listLoading" :page="listQuery.current" :limit="listQuery.size" />
+      </el-col>
+    </el-row>
+    <pagination :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" />
+    <choice-dialog :param-name-list="paramNameList" :check-params="checkParamName" :is-show="choiceParamShow" @handleConfirm="handleConfirm" @close="closeDialog" />
+  </div>
+</template>
+
+<script>
+import { timeFormatter } from '@/filters'
+import Tree from '@/components/Tree'
+const tableProps = [{
+  prop: 'substrateId',
+  label: i18n.t('module.equipmentManager.equipmentParams.substrateId'),
+  align: 'center'
+}, {
+  prop: 'createTime',
+  label: i18n.t('module.equipmentManager.equipmentParams.createTime'),
+  align: 'center',
+  filter: timeFormatter
+}]
+import BaseTable from '@/components/BaseTable'
+import choiceDialog from './choiceParamModel.vue'
+// edit here
+import { getParamNameList, getParamList } from '@/api/equipment/equipmentParams'
+
+import Pagination from '@/components/Pagination'
+import i18n from '@/lang'
+
+export default {
+  name: 'OrgManager',
+  components: { Pagination, BaseTable, Tree, choiceDialog },
+  props: {},
+  data() {
+    return {
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: false,
+      showDialog: false,
+      curEditId: null,
+      showEditDialog: false,
+      listQuery: {
+        current: 1,
+        size: 10,
+        startTime: '',
+        endTime: '',
+        equipmentId: null,
+        paramNameList: ''
+      },
+      paramNameList: [],
+      paramNameObj: {},
+      checkParamName: [],
+      date: null,
+      treeType: 'equipment',
+      choiceParamShow: false
+    }
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    async getList() {
+      this.listLoading = true
+      this.tableProps = tableProps
+      this.checkParamName.map(item => {
+        this.tableProps.push({
+          prop: this.paramNameObj[item],
+          label: this.paramNameObj[item],
+          align: 'center'
+        })
+      })
+      // edit here
+      const result = await getParamList(this.listQuery)
+      if (result.code === 0) {
+        this.list = result.data.records.map(item => {
+          item.paramList.map(i => {
+            item[i.name] = i.value
+          })
+          return item
+        })
+        this.total = result.data.total
+        this.listLoading = false
+      }
+    },
+    async eqChange(data) {
+      this.listQuery.equipmentId = data.id
+      this.date = [new Date() - 1000 * 60 * 60 * 24, new Date()]
+      const result = await getParamNameList({ equipmentId: data.id })
+      if (result.code === 0) {
+        this.paramNameList = result.data
+        this.paramNameList(item => {
+          this.paramNameObj[item.id] = item.name
+        })
+        if (this.paramNameList.length > 100) {
+          this.listQuery.paramNameList = this.paramNameList.slice(0, 100).join(',')
+          this.checkParamName = this.paramNameList.slice(0, 100).map(item => {
+            return item.id
+          })
+        } else {
+          this.listQuery.paramNameList = 'all'
+          this.checkParamName = JSON.parse(JSON.stringify(this.ParamNameList)).map(item => {
+            return item.id
+          })
+        }
+        this.getList()
+      }
+    },
+    showChoiceParam() {
+      this.choiceParamShow = true
+    },
+    changeTime(val) {
+      this.listQuery.startTime = val ? val[0] : null
+      this.listQuery.endTime = val ? val[1] : null
+    },
+    handleConfirm(data) {
+      this.checkParamName = data
+      this.listQuery.paramNameList = data.join(',')
+      this.choiceParamShow = false
+    },
+    closeDialog() {
+      this.choiceParamShow = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.usermanager-container {
+  padding: 20px;
+  .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+  }
+  .tree-select-container {
+    border: 1px solid #dfe6ec;
+    min-height: 400px;
+    padding: 20px;
+  }
+}
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>

src/views/EquipmentManager/equipmentVisualization/EquipmentEnergyMonitor.vue

@@ -0,0 +1,285 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-26 10:35:28
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <el-form
+      :model="formData"
+      :inline="true"
+      size="medium"
+      label-width="150px"
+    >
+      <el-form-item>
+        <el-radio-group v-model="formData.timeType">
+          <el-radio-button label="Year">{{ $t('module.equipmentManager.equipmentVisualization.Year') }}</el-radio-button>
+          <el-radio-button label="Quarter">{{ $t('module.equipmentManager.equipmentVisualization.Quarter') }}</el-radio-button>
+          <el-radio-button label="Month">{{ $t('module.equipmentManager.equipmentVisualization.Month') }}</el-radio-button>
+          <el-radio-button label="Week">{{ $t('module.equipmentManager.equipmentVisualization.Week') }}</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item :label="$t('module.equipmentManager.equipmentVisualization.timeSlot')" label-width="100px" prop="time">
+        <el-date-picker
+          v-model="formData.timeSlot"
+          type="daterange"
+          format="yyyy-MM-dd"
+          value-format="yyyy-MM-dd"
+          :start-placeholder="$t('module.orderManage.order.StartTime')"
+          :end-placeholder="$t('module.orderManage.order.StartTime')"
+          :range-separator="$t('module.orderManage.order.To')"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item :label="$t('module.orderManage.order.WorkOrderName')" prop="workOrderId">
+        <el-select v-model="formData.workOrderId" filterable :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.WorkOrderName')])" clearable>
+          <el-option
+            v-for="item in WorkOrderList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="getList()"> {{ 'btn.search' | i18nFilter }} </el-button>
+      </el-form-item>
+    </el-form>
+    <el-radio-group v-model="barType" @change="setBarType">
+      <el-radio-button label="Electric">{{ $t('module.equipmentManager.equipmentVisualization.Electric') }}</el-radio-button>
+      <el-radio-button label="Water">{{ $t('module.equipmentManager.equipmentVisualization.Water') }}</el-radio-button>
+      <el-radio-button label="Gas">{{ $t('module.equipmentManager.equipmentVisualization.Gas') }}</el-radio-button>
+    </el-radio-group>
+    <el-card style="margin-top:10px">
+      <echarts-bar
+        v-if="BarVisible"
+        ref="BarRef"
+        :color="color"
+        :bar-style="barStyle"
+        :title="barTitle"
+        :legend="legend"
+        :x-axis="xAxis"
+        :y-axis="yAxis"
+        :series="series"
+        @refreshDataList="getList"
+      />
+    </el-card>
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-card style="margin-top:10px;width:100%">
+          <echarts-bar-one
+            v-if="BarVisible1"
+            :id="bar1"
+            ref="BarRef1"
+            :bar-style="barStyle1"
+            :title="barTitle1"
+            :legend="legend1"
+            :x-axis="xAxis1"
+            :y-axis="yAxis1"
+            :series="series1"
+            @refreshDataList="getList"
+          />
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card style="margin-top:10px;width:100%,">
+          <echarts-gauge
+            :id="gauge"
+            :gauge-style="gaugeStyle"
+            @refreshDataList="getList"
+          />
+          <div style="height:115px">
+            <el-row :gutter="10">
+              <el-col :span="8"><div class="grid-content bg-purple">今日用电:10837</div></el-col>
+              <el-col :span="8"><div class="grid-content bg-purple">昨日用电:18832</div></el-col>
+              <el-col :span="8"><div class="grid-content bg-purple">前日用电:10837</div></el-col>
+            </el-row>
+            <el-row :gutter="10">
+              <el-col :span="8"><div class="grid-content bg-purple">本周用电:80237</div></el-col>
+              <el-col :span="8"><div class="grid-content bg-purple">上周用电:17552</div></el-col>
+              <el-col :span="8"><div class="grid-content bg-purple">前周用电:657828</div></el-col>
+            </el-row>
+            <el-row :gutter="10">
+              <el-col :span="8"><div class="grid-content bg-purple">本月用电:767837</div></el-col>
+              <el-col :span="8"><div class="grid-content bg-purple">上月用电:785879</div></el-col>
+              <el-col :span="8"><div class="grid-content bg-purple">前月用电:765868</div></el-col>
+            </el-row>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { workOrderList } from '@/api/orderManage/workOrder/workOrder'
+import echartsBar from './components/echarts-Bar.vue'
+import echartsBarOne from './components/echarts-Bar.vue'
+import echartsGauge from './components/echarts-Gauge.vue'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+export default {
+  name: 'EquipmentEnergyMonitor',
+  components: { echartsBar, echartsBarOne, echartsGauge },
+  data() {
+    return {
+      BarVisible: false,
+      BarVisible1: true,
+      WorkOrderList: [],
+      barType: 'Electric',
+      formData: {
+        WorkOrderId: '',
+        timeType: 'Month',
+        timeSlot: []
+      },
+      // 假数据
+      barStyle: {
+        height: '400px',
+        width: '100%',
+        margin: '20px'
+      },
+      color: [
+        '#5470C6', '#91CC75'
+      ],
+      barTitle: {
+        text: '能耗数据',
+        subtext: '同环能耗数据'
+      },
+      legend: {
+        data: ['综合线', '镀膜线']
+      },
+      xAxis: {
+        type: 'category',
+        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+      },
+      yAxis: {
+        type: 'value'
+      },
+      series: [{
+        name: '综合线',
+        data: [],
+        type: 'bar'
+      }, {
+        name: '镀膜线',
+        data: [],
+        type: 'bar'
+      }],
+      // 假数据
+      bar1: 'barChart1',
+      barStyle1: {
+        height: '515px',
+        width: '100%',
+        margin: '20px'
+      },
+      barTitle1: {
+        text: '设备加工数量',
+        subtext: '设备加工数量柱状图'
+      },
+      legend1: {
+        data: []
+      },
+      xAxis1: {
+        type: 'value'
+      },
+      yAxis1: {
+        type: 'category',
+        data: ['涂覆机', '活化炉', '退火炉', '汇流条粘接机', '热熔封边机', '磨边机', '清边机']
+      },
+      series1: [{
+        name: '电量消耗',
+        data: [323.234, 323.841, 755.45, 251.453, 454.786, 484.786, 154.786],
+        barWidth: '60%',
+        type: 'bar'
+      }],
+      gauge: 'gauge1',
+      gaugeStyle: {
+        height: '400px',
+        width: '100%',
+        margin: '20px'
+      }
+    }
+  },
+  created() {
+    this.getList()
+    this.setBarType()
+  },
+  methods: {
+    getList() {
+      const listQuery = {
+        current: 1,
+        size: 500
+      }
+      this.WorkOrderList.splice(0, this.WorkOrderList.length)
+      workOrderList(listQuery).then(response => {
+        if (response.data.records) {
+          this.WorkOrderList = response.data.records
+        }
+      })
+      if (this.formData.timeSlot) {
+        this.formData.startTime = this.formData.timeSlot[0]
+        this.formData.endTime = this.formData.timeSlot[1]
+      } else {
+        this.formData.startTime = ''
+        this.formData.endTime = ''
+      }
+    },
+    setBarData() {
+      this.series[0].data.splice(0, this.series[0].data.length)
+      this.series[1].data.splice(0, this.series[1].data.length)
+      for (let i = 0; i < 12; i++) {
+        this.series[0].data.push(Math.round(Math.random() * 1500))
+        this.series[1].data.push(Math.round(Math.random() * 1500))
+      }
+    },
+    setBarType() {
+      this.setBarData()
+      this.BarVisible = true
+      // 获取柱状图数据
+      // getBarData(Object.assign(this.formData, { barType: this.barType })).then(response => {
+      //   if (response.data.records) {
+      //     this.getBarData = response.data.records
+      //   }
+      // })
+      this.$nextTick(() => {
+        this.$refs.BarRef.init()
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+  .bg-purple {
+    background: #d3dce6;
+  }
+  .grid-content {
+    border-radius: 4px;
+    text-align: center;
+    padding: 5px;
+    margin-bottom: 10px;
+  }
+</style>

src/views/EquipmentManager/equipmentVisualization/EquipmentProcessingQuantity.vue

@@ -0,0 +1,173 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-22 09:36:48
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <el-form
+      :model="formData"
+      :inline="true"
+      size="medium"
+      label-width="80px"
+    >
+      <el-form-item :label="$t('module.equipmentManager.equipmentVisualization.timeSlot')" label-width="100px" prop="time">
+        <el-date-picker
+          v-model="formData.timeSlot"
+          type="daterange"
+          format="yyyy-MM-dd"
+          value-format="yyyy-MM-dd"
+          :start-placeholder="$t('module.orderManage.order.StartTime')"
+          :end-placeholder="$t('module.orderManage.order.StartTime')"
+          :range-separator="$t('module.orderManage.order.To')"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="getList()"> {{ 'btn.search' | i18nFilter }} </el-button>
+      </el-form-item>
+    </el-form>
+    <el-card>
+      <el-menu
+        :default-active="activeIndex"
+        mode="horizontal"
+        background-color="#545c64"
+        text-color="#fff"
+        active-text-color="#ffd04b"
+        @select="handleSelect"
+      >
+        <el-menu-item index="1">{{ $t('module.equipmentManager.equipmentVisualization.DataTable') }}</el-menu-item>
+        <el-menu-item index="2">{{ $t('module.equipmentManager.equipmentVisualization.Histogram') }}</el-menu-item>
+      </el-menu>
+    </el-card>
+    <EquipmentProcessingQuantity-table v-if="tableVisible" ref="tableRef" @refreshDataList="getList" />
+    <echarts-bar
+      v-if="BarVisible"
+      ref="BarRef"
+      :bar-style="barStyle"
+      :title="barTitle"
+      :legend="legend"
+      :x-axis="xAxis"
+      :y-axis="yAxis"
+      :series="series"
+      @refreshDataList="getList"
+    />
+  </div>
+</template>
+
+<script>
+import EquipmentProcessingQuantityTable from './components/EquipmentProcessingQuantity-table'
+import echartsBar from './components/echarts-Bar.vue'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+export default {
+  name: 'EquipmentProcessingQuantity',
+  components: { EquipmentProcessingQuantityTable, echartsBar },
+  data() {
+    return {
+      tableVisible: false,
+      BarVisible: false,
+      activeIndex: '1',
+      formData: {
+        timeSlot: [],
+        current: 1,
+        size: 10
+      },
+      // 假数据
+      barStyle: {
+        height: '500px',
+        width: '100%',
+        margin: '20px'
+      },
+      barTitle: {
+        text: '设备加工数量',
+        subtext: '设备加工数量柱状图'
+      },
+      legend: {
+        data: []
+      },
+      xAxis: {
+        type: 'category',
+        data: ['涂覆机', 'ACOAT Machine', '活化炉', 'Activation furnace', '退火炉', '仓储系统', '汇流条粘接机', 'CSS镀膜 CSS', '铜扩散', 'DOPE Machine', '热熔封边机', '终检仪(FL+HP)', '性能检测(EL+IV)', '磨边机', 'Grind Machine', '接线盒安装站', '层压机－01', '层压机－02', '清边机', '上片机械手', 'Loading Robot', '上片机械手', 'Loading Robot', '下片机械手', '合片封装站', 'ID打标机', 'Laser Mark', '刻蚀设备', '光刻胶显影机', 'RDEV machine', '光刻胶处理设备', 'RTREAT Machine', '刻线机', 'SCR Machine', '刻线机', 'SCR Machine', '刻线机', '磁控溅射设备', 'Sputtering machine', '磁控溅射设备', '玻璃检测仪', 'Glass detector', '膜层检测仪', 'SUBIN Detector', '缺陷检测仪', '传输系统', '清洗机', 'Cleaning machine', '涂层清洗机', 'Wash machine', '玻璃清洗机', '预清洗机', 'Pre cleaning machine', 'SUBIN_THK_01', 'SUBIN_THK_02'],
+        axisLabel: {
+          interval: 0,
+          formatter: function(value) {
+            return value.split('').join('\n')
+          }
+        }
+      },
+      yAxis: {
+        type: 'value'
+      },
+      series: [{
+        data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 150, 160, 140, 170, 155, 140, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 150, 160, 140, 170, 155, 140, 160, 140, 170, 155, 140, 167],
+        type: 'scatter',
+        showBackground: true,
+        backgroundStyle: {
+          color: 'rgba(220, 220, 220, 0.8)'
+        }
+      }]
+    }
+  },
+  created() {
+    this.getList()
+    this.handleSelect('1')
+  },
+  methods: {
+    getList() {
+      if (this.formData.timeSlot) {
+        this.formData.startTime = this.formData.timeSlot[0]
+        this.formData.endTime = this.formData.timeSlot[1]
+      } else {
+        this.formData.startTime = ''
+        this.formData.endTime = ''
+      }
+    },
+    handleSelect(key, keyPath) {
+      this.tableVisible = false
+      this.BarVisible = false
+      switch (key) {
+        case '1':
+          this.tableVisible = true
+          this.$nextTick(() => {
+            this.$refs.tableRef.init()
+          })
+          break
+        case '2':
+          this.BarVisible = true
+          this.$nextTick(() => {
+            this.$refs.BarRef.init()
+          })
+          break
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>

src/views/EquipmentManager/equipmentVisualization/Visualized.vue

@@ -0,0 +1,225 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-22 10:18:21
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <el-form
+      :model="formData"
+      :inline="true"
+      size="medium"
+      label-width="80px"
+    >
+      <el-form-item :label="$t('module.equipmentManager.equipmentVisualization.timeSlot')" label-width="100px" prop="time">
+        <el-date-picker
+          v-model="formData.timeSlot"
+          type="daterange"
+          format="yyyy-MM-dd"
+          value-format="yyyy-MM-dd"
+          :start-placeholder="$t('module.orderManage.order.StartTime')"
+          :end-placeholder="$t('module.orderManage.order.StartTime')"
+          :range-separator="$t('module.orderManage.order.To')"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="getList()"> {{ 'btn.search' | i18nFilter }} </el-button>
+      </el-form-item>
+    </el-form>
+    <el-row :gutter="10">
+      <el-col :span="8">
+        <div>
+          <echarts-pie-a
+            id="pieA"
+            ref="BarRef"
+            :pie-style="pieStyle"
+            :title="title1"
+            :legend="legend"
+            :name="name"
+            :data="pieData"
+            @refreshDataList="getList"
+          />
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <div>
+          <echarts-pie-b
+            id="pieB"
+            ref="BarRef"
+            :pie-style="pieStyle"
+            :title="title2"
+            :legend="legend"
+            :name="name"
+            :data="pieData"
+            @refreshDataList="getList"
+          />
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <div>
+          <echarts-pie-c
+            id="pieC"
+            ref="BarRef"
+            :pie-style="pieStyle"
+            :title="title3"
+            :legend="legend"
+            :name="name"
+            :data="pieData"
+            @refreshDataList="getList"
+          />
+        </div>
+      </el-col>
+    </el-row>
+    <el-row :gutter="10">
+      <el-col :span="8">
+        <div>
+          <echarts-pie-d
+            id="pieD"
+            ref="BarRef"
+            :pie-style="pieStyle"
+            :title="title4"
+            :legend="legend"
+            :name="name"
+            :data="pieData"
+            @refreshDataList="getList"
+          />
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <div>
+          <echarts-pie-e
+            id="pieE"
+            ref="BarRef"
+            :pie-style="pieStyle"
+            :title="title5"
+            :legend="legend"
+            :name="name"
+            :data="pieData"
+            @refreshDataList="getList"
+          />
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <div>
+          <echarts-pie-f
+            id="pieF"
+            ref="BarRef"
+            :pie-style="pieStyle"
+            :title="title6"
+            :legend="legend"
+            :name="name"
+            :data="pieData"
+            @refreshDataList="getList"
+          />
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import echartsPieA from './components/echarts-Pie.vue'
+import echartsPieB from './components/echarts-Pie.vue'
+import echartsPieC from './components/echarts-Pie.vue'
+import echartsPieD from './components/echarts-Pie.vue'
+import echartsPieE from './components/echarts-Pie.vue'
+import echartsPieF from './components/echarts-Pie.vue'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+export default {
+  name: 'EquipmentProcessingQuantity',
+  components: { echartsPieA, echartsPieB, echartsPieC, echartsPieD, echartsPieE, echartsPieF },
+  data() {
+    return {
+      formData: {
+        timeSlot: [],
+        current: 1,
+        size: 10
+      },
+      // 假数据
+      pieStyle: {
+        height: '350px',
+        width: '100%',
+        margin: '20px'
+      },
+      title1: {
+        text: '涂覆机',
+        subtext: '运行状态良好'
+      },
+      title2: {
+        text: '活化炉',
+        subtext: '运行状态良好'
+      },
+      title3: {
+        text: '退火炉',
+        subtext: '运行状态良好'
+      },
+      title4: {
+        text: '仓储系统',
+        subtext: '运行状态良好'
+      },
+      title5: {
+        text: '汇流条粘接机',
+        subtext: '运行状态良好'
+      },
+      title6: {
+        text: '热熔封边机',
+        subtext: '运行状态良好'
+      },
+      legend: {
+        top: 'bottom',
+        left: 'center'
+      },
+      name: '时间',
+      pieData: [
+        { value: Math.round(Math.random() * 200), name: '运行时间' },
+        { value: Math.round(Math.random() * 200), name: '维修时间' },
+        { value: Math.round(Math.random() * 200), name: '维护时间' },
+        { value: Math.round(Math.random() * 200), name: '停机时间' }
+      ]
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      if (this.formData.timeSlot) {
+        this.formData.startTime = this.formData.timeSlot[0]
+        this.formData.endTime = this.formData.timeSlot[1]
+      } else {
+        this.formData.startTime = ''
+        this.formData.endTime = ''
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>

src/views/EquipmentManager/equipmentVisualization/components/EquipmentProcessingQuantity-table.vue

@@ -0,0 +1,129 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-04-22 14:54:30
+ * @Description:
+-->
+<template>
+  <base-table
+    :page="listQuery.current"
+    :limit="listQuery.size"
+    :table-config="tableProps"
+    :table-data="list"
+    :is-loading="listLoading"
+  />
+</template>
+
+<script>
+import i18n from '@/lang'
+import BaseTable from '@/components/BaseTable'
+// import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+const tableProps = [
+  {
+    prop: 'name',
+    label: i18n.t('module.basicData.equipment.EquipmentName'),
+    align: 'center'
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.basicData.equipment.EquipmentCode'),
+    align: 'center'
+  }, {
+    prop: 'ProcessingQuantity',
+    label: i18n.t('module.equipmentManager.equipmentVisualization.ProcessingQuantity'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: '',
+  components: { BaseTable },
+  props: {
+  },
+  data() {
+    return {
+      tableProps,
+      list: [],
+      listLoading: false,
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  methods: {
+    init() {
+      this.listQuery = {
+        current: 1,
+        size: 10
+      }
+      this.getList()
+    },
+    getList() {
+      this.list = [
+        {
+          'name': '设备1',
+          'code': 'SB20210203000028',
+          'ProcessingQuantity': '361'
+        },
+        {
+          'name': '设备2',
+          'code': 'SB20210203000105',
+          'ProcessingQuantity': '2'
+        },
+        {
+          'name': '设备3',
+          'code': 'SB20210203000208',
+          'ProcessingQuantity': '987'
+        },
+        {
+          'name': '设备4',
+          'code': 'SB20210203000450',
+          'ProcessingQuantity': '65'
+        },
+        {
+          'name': '设备5',
+          'code': 'SB20210203000768',
+          'ProcessingQuantity': '7645'
+        }
+      ]
+      // this.listLoading = true
+      // staffList(this.listQuery).then(response => {
+      //   if (response.data.records) {
+      //     this.list = response.data.records
+      //   } else {
+      //     this.list.splice(0, this.list.length)
+      //   }
+      //   this.listLoading = false
+      // })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>

src/views/EquipmentManager/equipmentVisualization/components/echarts-Bar.vue

@@ -0,0 +1,108 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-03-03 16:39:34
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-23 10:26:44
+ * @Description:
+-->
+<template>
+  <div :id="id" :style="barStyle" />
+</template>
+
+<script>
+import echarts from 'echarts'
+
+export default {
+  props: {
+    id: {
+      type: String,
+      default: () => {
+        return 'barChart'
+      }
+    },
+    barStyle: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    title: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    legend: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    xAxis: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    yAxis: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    series: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    color: {
+      type: Array,
+      default: () => {
+        return ['#5470C6']
+      }
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    init() {
+      this.chart = echarts.init(document.getElementById(this.id))
+
+      this.chart.setOption({
+        color: this.color,
+        title: this.title,
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: this.legend,
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: this.xAxis,
+        yAxis: this.yAxis,
+        series: this.series
+      })
+    }
+  }
+}
+</script>

src/views/EquipmentManager/equipmentVisualization/components/echarts-Gauge.vue

@@ -0,0 +1,125 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-03-03 16:39:34
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-04-22 18:06:50
+ * @Description:
+-->
+<template>
+  <div :id="id" :style="gaugeStyle" />
+</template>
+
+<script>
+import echarts from 'echarts'
+
+export default {
+  props: {
+    id: {
+      type: String,
+      default: () => {
+        return 'barChart'
+      }
+    },
+    gaugeStyle: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    init() {
+      this.chart = echarts.init(document.getElementById(this.id))
+
+      this.chart.setOption({
+        title: {
+          text: '实时能耗',
+          subtext: 'Kwh'
+        },
+        series: [{
+          type: 'gauge',
+          center: ['50%', '70%'],
+          startAngle: 180,
+          endAngle: 0,
+          min: 0,
+          max: 500000,
+          splitNumber: 10,
+          axisLine: {
+            lineStyle: {
+              width: 10,
+              opacity: 0.5,
+              color: [
+                [0.4, '#1CB727'],
+                [0.7, '#E0980C'],
+                [1, '#fd666d']
+              ]
+            }
+          },
+          pointer: {
+            itemStyle: {
+              opacity: 0.5
+            }
+          },
+          progress: {
+            show: true,
+            width: 10
+          },
+          axisTick: {
+            distance: -45,
+            splitNumber: 2,
+            lineStyle: {
+              width: 2,
+              color: '#999'
+            }
+          },
+          splitLine: {
+            distance: -32,
+            length: 20,
+            lineStyle: {
+              width: 3,
+              color: '#999'
+            }
+          },
+          axisLabel: {
+            color: 'auto',
+            distance: -65,
+            fontSize: 15
+          },
+          detail: {
+            valueAnimation: true,
+            offsetCenter: [0, '-15%'],
+            formatter: function(value) {
+              return '{value|' + value.toFixed(0) + 'Kwh}'
+            },
+            color: 'auto',
+            rich: {
+              value: {
+                fontSize: 20,
+                fontWeight: 'bolder'
+              }
+            }
+          },
+          data: [{
+            value: 81175
+          }]
+        }]
+      }, true)
+    }
+  }
+}
+</script>

src/views/EquipmentManager/equipmentVisualization/components/echarts-Pie.vue

@@ -0,0 +1,108 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-03-03 16:39:34
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-04-22 18:59:58
+ * @Description:
+-->
+<template>
+  <div :id="id" :style="pieStyle" />
+</template>
+
+<script>
+import echarts from 'echarts'
+
+export default {
+  props: {
+    id: {
+      type: String,
+      default: () => {
+        return 'barChart'
+      }
+    },
+    pieStyle: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    title: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    legend: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    name: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    },
+    data: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    init() {
+      this.chart = echarts.init(document.getElementById(this.id))
+
+      this.chart.setOption({
+        title: this.title,
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: this.legend,
+        series: [
+          {
+            name: this.name,
+            type: 'pie',
+            radius: ['40%', '70%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: '20',
+                fontWeight: 'bold'
+              }
+            },
+            data: [
+              { value: Math.round(Math.random() * 200), name: '运行时间' },
+              { value: Math.round(Math.random() * 200), name: '维修时间' },
+              { value: Math.round(Math.random() * 200), name: '维护时间' },
+              { value: Math.round(Math.random() * 200), name: '停机时间' }
+            ]
+          }
+        ]
+      })
+    }
+  }
+}
+</script>

src/views/EquipmentManager/sqarepart/AddForm.vue

@@ -0,0 +1,216 @@
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="$t('module.equipmentManager.sparepart.addDialogTtile')" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="150px">
+        <!-- <el-form-item label="备件编码" prop="name">
+          <el-input v-model="formData.code" placeholder="请输入备件编码" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item label="备件名称" prop="name">
+          <el-input v-model="formData.name" placeholder="请输入备件名称" clearable :style="{width: '100%'}" />
+        </el-form-item> -->
+        <el-form-item :label="$t('module.equipmentManager.sparepart.sparepart')" prop="basicSparePartId">
+          <el-select v-model="formData.basicSparePartId" filterable :placeholder="$t('module.equipmentManager.sparepart.placeholdersparepart')" clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in dict.sparepart"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <!-- <el-form-item :label="$t('module.equipmentManager.sparepart.model')" prop="model">
+          <el-input
+            v-model="formData.model"
+            :placeholder="$t('module.equipmentManager.sparepart.placeholdermodel')"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item> -->
+        <el-form-item :label="$t('module.equipmentManager.sparepart.externalCode')" prop="externalCode">
+          <el-input
+            v-model="formData.externalCode"
+            :placeholder="$t('module.equipmentManager.sparepart.placeholderexternalCode')"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+        <!-- <el-form-item :label="$t('module.equipmentManager.sparepart.unit')" prop="accessoryUnit">
+          <el-select v-model="formData.accessoryUnit" :placeholder="$t('module.equipmentManager.sparepart.placeholderunit')" clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in dict.unit"
+              :key="index"
+              :label="item.dataName"
+              :value="item.dataName"
+            />
+          </el-select>
+        </el-form-item> -->
+        <el-form-item :label="$t('module.equipmentManager.sparepart.batchNumber')" prop="batchNumber">
+          <el-input v-model="formData.batchNumber" :placeholder="$t('module.equipmentManager.sparepart.placeholderbatchNumber')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.sparepart.number')" prop="accessoryNumber">
+          <el-input v-model="formData.accessoryNumber" type="number" :placeholder="$t('module.equipmentManager.sparepart.placeholdernumber')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.sparepart.entryTime')" prop="entryTime">
+          <el-date-picker
+            v-model="formData.entryTime"
+            format="yyyy-MM-dd"
+            :style="{width: '100%'}"
+            :placeholder="$t('module.equipmentManager.sparepart.placeholderentryTime')"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.sparepart.supplier')" prop="supplierId">
+          <el-select v-model="formData.supplierId" :placeholder="$t('module.equipmentManager.sparepart.placeholdersupplier')" clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in dict.supplier"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.sparepart.receiver')" prop="receiver">
+          <el-select v-model="formData.receiver" :placeholder="$t('module.equipmentManager.sparepart.placeholderreceiver')" clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in dict.worker"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.sparepart.remark')" prop="remark">
+          <el-input v-model="formData.remark" :placeholder="$t('module.equipmentManager.sparepart.placeholderremark')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { addSapre } from '@/api/equipment/spare'
+import { getDictUnit, getDictSupplier, getDictSparepart, getDictWorker } from '@/api/dict'
+import i18n from '@/lang'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: [],
+  data() {
+    return {
+      formData: {
+        code: undefined,
+        name: undefined,
+        // model: undefined,
+        // accessoryUnit: undefined,
+        batchNumber: undefined,
+        accessoryNumber: undefined,
+        entryTime: null,
+        supplierId: undefined,
+        receiver: undefined,
+        remark: undefined,
+        externalCode: undefined
+      },
+      rules: {
+        basicSparePartId: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.sparepart.placeholdersparepart'),
+          trigger: 'blur'
+        }],
+        model: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.sparepart.placeholdermodel'),
+          trigger: 'blur'
+        }],
+        accessoryUnit: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.sparepart.placeholderunit'),
+          trigger: 'change'
+        }],
+        batchNumber: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.sparepart.placeholderbatchNumber'),
+          trigger: 'blur'
+        }],
+        accessoryNumber: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.sparepart.placeholdernumber'),
+          trigger: 'blur'
+        }],
+        entryTime: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.sparepart.placeholderentryTime'),
+          trigger: 'change'
+        }],
+        supplierId: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.sparepart.placeholdersupplier'),
+          trigger: 'change'
+        }],
+        receiver: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.sparepart.placeholderreceiver'),
+          trigger: 'blur'
+        }],
+        remark: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.sparepart.placeholderremark'),
+          trigger: 'blur'
+        }]
+      },
+      dict: {
+        unit: [],
+        supplier: [],
+        sparepart: []
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {
+    this.getDict()
+  },
+  methods: {
+    onOpen() {
+      this.$refs['elForm'].resetFields()
+      this.getDict()
+    },
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        const result = await addSapre(this.formData)
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '添加成功！'
+          })
+          this.$emit('done')
+          this.close()
+        }
+      })
+    },
+    async getDict() {
+      const result = await getDictUnit()
+      this.dict.unit = result
+      const result2 = await getDictSupplier()
+      this.dict.supplier = result2
+      const result3 = await getDictSparepart()
+      this.dict.sparepart = result3
+      const result4 = await getDictWorker()
+      this.dict.worker = result4
+    }
+  }
+}
+
+</script>
+<style>
+</style>

src/views/EquipmentManager/sqarepart/EditForm.vue

@@ -0,0 +1,231 @@
+<template>
+  <div>
+    <el-dialog v-bind="$attrs" :title="$t('module.equipmentManager.sparepart.editDialogTtile')" v-on="$listeners" @open="onOpen" @close="onClose">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="150px">
+        <!-- <el-form-item label="备件编码" prop="name">
+          <el-input v-model="formData.code" placeholder="请输入备件编码" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item label="备件名称" prop="name">
+          <el-input v-model="formData.name" placeholder="请输入备件名称" clearable :style="{width: '100%'}" />
+        </el-form-item> -->
+        <el-form-item :label="$t('module.equipmentManager.sparepart.sparepart')" prop="basicSparePartId">
+          <el-select v-model="formData.basicSparePartId" :placeholder="$t('module.equipmentManager.sparepart.placeholdersparepart')" clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in dict.sparepart"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <!-- <el-form-item :label="$t('module.equipmentManager.sparepart.model')" prop="sparePartModel">
+          <el-input
+            v-model="formData.model"
+            :placeholder="$t('module.equipmentManager.sparepart.placeholdermodel')"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item> -->
+        <el-form-item :label="$t('module.equipmentManager.sparepart.externalCode')" prop="externalCode">
+          <el-input
+            v-model="formData.externalCode"
+            :placeholder="$t('module.equipmentManager.sparepart.placeholderexternalCode')"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+        <!-- <el-form-item :label="$t('module.equipmentManager.sparepart.unit')" prop="accessoryUnit">
+          <el-select v-model="formData.accessoryUnit" :placeholder="$t('module.equipmentManager.sparepart.placeholderunit')" clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in dict.unit"
+              :key="index"
+              :label="item.dataName"
+              :value="item.dataName"
+            />
+          </el-select>
+        </el-form-item> -->
+        <el-form-item :label="$t('module.equipmentManager.sparepart.batchNumber')" prop="batchNumber">
+          <el-input v-model="formData.batchNumber" :placeholder="$t('module.equipmentManager.sparepart.placeholderbatchNumber')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.sparepart.number')" prop="accessoryNumber">
+          <el-input v-model="formData.accessoryNumber" type="number" :placeholder="$t('module.equipmentManager.sparepart.placeholdernumber')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.sparepart.entryTime')" prop="entryTime">
+          <el-date-picker
+            v-model="formData.entryTime"
+            format="yyyy-MM-dd"
+            :style="{width: '100%'}"
+            :placeholder="$t('module.equipmentManager.sparepart.placeholderentryTime')"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.sparepart.supplier')" prop="supplierId">
+          <el-select v-model="formData.supplierId" :placeholder="$t('module.equipmentManager.sparepart.placeholdersupplier')" clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in dict.supplier"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.sparepart.receiver')" prop="receiver">
+          <el-select v-model="formData.receiver" :placeholder="$t('module.equipmentManager.sparepart.placeholderreceiver')" clearable :style="{width: '100%'}">
+            <el-option
+              v-for="(item, index) in dict.worker"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('module.equipmentManager.sparepart.remark')" prop="remark">
+          <el-input v-model="formData.remark" :placeholder="$t('module.equipmentManager.sparepart.placeholderremark')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
+        <el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { getSpareInfo, editSpare } from '@/api/equipment/spare'
+import { getDictUnit, getDictSupplier, getDictSparepart, getDictWorker } from '@/api/dict'
+import i18n from '@/lang'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: {
+    targetInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      formData: {
+        basicSparePartId: undefined,
+        // model: undefined,
+        // accessoryUnit: undefined,
+        batchNumber: undefined,
+        accessoryNumber: undefined,
+        entryTime: null,
+        supplierId: undefined,
+        receiver: undefined,
+        remark: undefined,
+        externalCode: undefined
+      },
+      rules: {
+        basicSparePartId: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.sparepart.placeholdersparepart'),
+          trigger: 'blur'
+        }],
+        sparePartModel: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.sparepart.placeholdermodel'),
+          trigger: 'blur'
+        }],
+        accessoryUnit: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.sparepart.placeholderunit'),
+          trigger: 'change'
+        }],
+        batchNumber: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.sparepart.placeholderbatchNumber'),
+          trigger: 'blur'
+        }],
+        accessoryNumber: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.sparepart.placeholdernumber'),
+          trigger: 'blur'
+        }],
+        entryTime: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.sparepart.placeholderentryTime'),
+          trigger: 'change'
+        }],
+        supplierId: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.sparepart.placeholdersupplier'),
+          trigger: 'change'
+        }],
+        receiver: [{
+          required: true,
+          message: i18n.t('module.equipmentManager.sparepart.placeholderreceiver'),
+          trigger: 'blur'
+        }],
+        remark: [{
+          required: false,
+          message: i18n.t('module.equipmentManager.sparepart.placeholderremark'),
+          trigger: 'blur'
+        }]
+      },
+      dict: {
+        unit: [],
+        supplier: [],
+        sparepart: [],
+        worker: []
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    onOpen() {
+      this.getDict()
+      this.getDetail()
+    },
+    onClose() {
+      this.$refs['elForm'].resetFields()
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    handelConfirm() {
+      this.$refs['elForm'].validate(async valid => {
+        if (!valid) return
+        const result = await editSpare({
+          ...this.formData,
+          id: this.targetInfo?.id
+        })
+        if (result.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '修改成功！'
+          })
+          this.$emit('done')
+          this.close()
+        }
+      })
+    },
+    async getDetail() {
+      const result = await getSpareInfo({
+        id: this.targetInfo?.id
+      })
+      if (result.code === 0) {
+        this.formData = result.data
+        // console.log(result)
+      }
+    },
+    async getDict() {
+      const result = await getDictUnit()
+      this.dict.unit = result
+      const result2 = await getDictSupplier()
+      this.dict.supplier = result2
+      const result3 = await getDictSparepart()
+      this.dict.sparepart = result3
+      const result4 = await getDictWorker()
+      this.dict.worker = result4
+    }
+  }
+}
+
+</script>
+<style>
+</style>

src/views/EquipmentManager/sqarepart/index.vue

@@ -0,0 +1,208 @@
+<!--
+ * @Date: 2020-12-15 15:36:52
+ * @LastEditors: guo
+ * @LastEditTime: 2021-03-23 10:20:05
+ * @FilePath: \basic-admin\src\views\EquipmentManager\sqarepart\index.vue
+ * @Description:
+-->
+<template>
+  <div class="usermanager-container">
+    <div class="method-btn-area">
+      <el-input v-model="listQuery.keywords" :placeholder="$t('module.equipmentManager.sparepart.searchPlaceholder')" style="width: 200px;" clearable />
+      <el-button @click="getList">{{ 'btn.search' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="showDialog = true">{{ 'btn.add' | i18nFilter }}</el-button>
+    </div>
+    <base-table :table-config="tableProps" :table-data="list" :is-loading="listLoading" :page="listQuery.current" :limit="listQuery.size">
+      <method-btn slot="handleBtn" :method-list="tableBtn" :is-fixed="true" @clickBtn="handleClick" />
+    </base-table>
+    <pagination :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" />
+    <add-form :visible.sync="showDialog" @done="getList" />
+    <edit-form :visible.sync="showEditDialog" :target-info="{id: curEditId}" @done="getList" />
+  </div>
+</template>
+
+<script>
+// import dataDict from '@/filters/DataDict'
+// edit here
+import { timeFormatter } from '@/filters'
+import i18n from '@/lang'
+const tableBtn = [{
+  type: 'edit',
+  btnName: 'btn.edit'
+}, {
+  type: 'delete',
+  btnName: 'btn.delete'
+}]
+const tableProps = [{
+  prop: 'code',
+  label: i18n.t('module.equipmentManager.sparepart.code'),
+  align: 'center',
+  sortable: true,
+  width: '200px'
+}, {
+  prop: 'name',
+  label: i18n.t('module.equipmentManager.sparepart.name'),
+  align: 'center',
+  width: '140px'
+}, {
+  prop: 'model',
+  label: i18n.t('module.equipmentManager.sparepart.model'),
+  align: 'center',
+  width: '140px'
+}, {
+  prop: 'batchNumber',
+  label: i18n.t('module.equipmentManager.sparepart.batchNumber'),
+  align: 'center',
+  width: '120px'
+  // filter: dataDict('enableState')
+}, {
+  prop: 'supplierId',
+  label: i18n.t('module.equipmentManager.sparepart.supplier'),
+  align: 'center',
+  subcomponent: DictFilter,
+  filter: getDictSupplier,
+  width: '140px'
+}, {
+  prop: 'accessoryNumber',
+  label: i18n.t('module.equipmentManager.sparepart.number'),
+  align: 'center',
+  width: '120px'
+}, {
+  prop: 'accessoryUnit',
+  label: i18n.t('module.equipmentManager.sparepart.unit'),
+  align: 'center',
+  width: '120px'
+}, {
+  prop: 'entryTime',
+  label: i18n.t('module.equipmentManager.sparepart.entryTime'),
+  align: 'center',
+  filter: timeFormatter,
+  width: '140px'
+}, {
+  prop: 'receiver',
+  label: i18n.t('module.equipmentManager.sparepart.receiver'),
+  align: 'center',
+  subcomponent: DictFilter,
+  filter: getDictWorker,
+  width: '120px'
+}, {
+  prop: 'remark',
+  label: i18n.t('module.equipmentManager.sparepart.remark'),
+  align: 'center',
+  width: '120px'
+}]
+import AddForm from './AddForm'
+import EditForm from './EditForm'
+import BaseTable from '@/components/BaseTable'
+// edit here
+import DictFilter from '@/components/BaseTable/subcomponents/DataDictFilter'
+import { getSpareList, delSpare } from '@/api/equipment/spare'
+import { getDictSupplier, getDictWorker } from '@/api/dict/index'
+import { dictChange, dictFilter } from '@/utils'
+import Pagination from '@/components/Pagination'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+export default {
+  name: 'OrgManager',
+  components: { Pagination, BaseTable, MethodBtn, AddForm, EditForm },
+  props: {},
+  data() {
+    return {
+      tableBtn,
+      tableProps: [],
+      list: [],
+      total: 0,
+      listLoading: true,
+      showDialog: false,
+      curEditId: null,
+      showEditDialog: false,
+      listQuery: {
+        current: 1,
+        size: 10,
+        keywords: ''
+      },
+      dict: {
+        supplier: []
+      }
+    }
+  },
+  async created() {
+    await this.getDict()
+    await this.preprocess()
+    await this.getList()
+    // this.listLoading = false
+  },
+  mounted() {},
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      switch (raw.type) {
+        case 'delete':
+          this.$confirm(i18n.t('deleteMsgBox.content'), i18n.t('deleteMsgBox.hint'), {
+            confirmButtonText: i18n.t('btn.confirm'),
+            cancelButtonText: i18n.t('btn.cancel'),
+            type: 'warning'
+          }).then(async() => {
+            // 走接口
+            const result = await delSpare({
+              id: raw.data.id
+            })
+            if (result.code === 0) {
+              this.$message({
+                type: 'success',
+                message: i18n.t('deleteMsgBox.doneMsg')
+              })
+              this.getList()
+            }
+          })
+          break
+        case 'edit':
+          this.showEditDialog = true
+          this.curEditId = raw.data.id
+          break
+      }
+    },
+    async getList() {
+      this.listLoading = true
+      // edit here
+      const res = await getSpareList(this.listQuery)
+      if (res.code === 0) {
+        this.list = res.data.records
+        this.total = res.data.total
+        this.listLoading = false
+      }
+    },
+    async getDict() {
+      const result = await getDictSupplier()
+      this.dict.supplier = result
+    },
+    async preprocess() {
+      this.tableProps = tableProps.map(item => {
+        if (this.dict[item.prop]) {
+          console.log(dictChange(this.dict[item.prop], { key: 'id', value: 'name' }))
+          item.filter = dictFilter(dictChange(this.dict[item.prop], { key: 'id', value: 'name' }))
+        }
+        return item
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.usermanager-container {
+  padding: 20px;
+  .method-btn-area {
+    padding: 15px 30px;
+    margin: 10px 0 20px 0;
+    border: 1px solid #dfe6ec;
+  }
+}
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>