diff --git a/ah-jjzhgd-web/src/api/basic/sideband.js b/ah-jjzhgd-web/src/api/basic/sideband.js
new file mode 100644
index 0000000..d45bdbd
--- /dev/null
+++ b/ah-jjzhgd-web/src/api/basic/sideband.js
@@ -0,0 +1,92 @@
+import request from '@/utils/request'
+
+// 查询边带设备列表
+export function getSidebandList(data) {
+  return request({
+    url: '/background/back/deviceBd/getDeviceBdList',
+    method: 'get',
+    params: data
+  })
+}
+
+// 新增边带设备
+export function addSidebandItem(data) {
+  return request({
+    url: '/background/back/deviceBd/addDeviceBd',
+    method: 'post',
+    data
+  })
+}
+
+// 编辑边带设备
+export function updateSidebandItem(data) {
+  return request({
+    url: '/background/back/deviceBd/editDeviceBd',
+    method: 'post',
+    data
+  })
+}
+
+// 删除边带设备
+export function deleteSidebandItem(data) {
+  return request({
+    url: '/background/back/deviceBd/delDeviceBdById',
+    method: 'post',
+    data
+  })
+}
+
+// 查看边带设备详情
+export function getSidebandItemDetail(data) {
+  return request({
+    url: '/background/back/deviceBd/getDeviceBdById',
+    method: 'get',
+    params: data
+  })
+}
+
+// 获取边带子设备列表
+export function getSidebandChildList(data) {
+  return request({
+    url: '/background/back/deviceBd/getDeviceBdChildList',
+    method: 'get',
+    params: data
+  })
+}
+
+// 新增边带子设备
+export function addSidebandChildItem(data) {
+  return request({
+    url: '/background/back/deviceBd/addDeviceBdChild',
+    method: 'post',
+    data
+  })
+}
+
+// 编辑边带子设备
+export function updateSidebandChildItem(data) {
+  return request({
+    url: '/background/back/deviceBd/editDeviceBdChild',
+    method: 'post',
+    data
+  })
+}
+
+// 删除边带子设备
+export function deleteSidebandChildItem(data) {
+  return request({
+    url: '/background/back/deviceBd/delDeviceBdChildById',
+    method: 'post',
+    data
+  })
+}
+
+// 查看边带子设备详情
+export function getSidebandChildItemDetail(data) {
+  return request({
+    url: '/background/back/deviceBd/getDeviceBdChildById',
+    method: 'get',
+    params: data
+  })
+}
+
diff --git a/ah-jjzhgd-web/src/api/public/index.js b/ah-jjzhgd-web/src/api/public/index.js
new file mode 100644
index 0000000..5bd576b
--- /dev/null
+++ b/ah-jjzhgd-web/src/api/public/index.js
@@ -0,0 +1,34 @@
+import request from '@/utils/request'
+
+// 获取工程下拉列表
+export function getProjectSelectList(data) {
+    return request({
+        url: '/system/sys/select/getProLists',
+        method: 'get',
+        params: data
+    })
+}
+
+// 获取区域下拉选择列表
+export function getAreaSelectList(data) {
+    return request({
+        url: '/system/sys/select/getAreaLists',
+        method: 'get',
+        params: data
+    })
+}
+
+// 获取字典下拉表
+// 400：变电工序
+// 500：线路工序
+// 600：边带型号
+// 700：设备类型
+// 800：设备状态
+// 900：班组状态
+export function getDictSelectList(type = 400) {
+    return request({
+        url: '/system/sys/select/getDictLists',
+        method: 'get',
+        params: {param: type}
+    })
+}
\ No newline at end of file
diff --git a/ah-jjzhgd-web/src/views/basic/progress/components/ProcessTable2.vue b/ah-jjzhgd-web/src/views/basic/progress/components/ProcessTable2.vue
index d9076a1..859759a 100644
--- a/ah-jjzhgd-web/src/views/basic/progress/components/ProcessTable2.vue
+++ b/ah-jjzhgd-web/src/views/basic/progress/components/ProcessTable2.vue
@@ -97,7 +97,7 @@
         >
           <el-table-column label="序号" align="center" width="80" type="index">
             <template scope="scope">
-              <span>{{ (listQuery.pageNum - 1) * 10 + scope.$index + 1 }}</span>
+              <span>{{ (listQuery2.pageNum - 1) * 10 + scope.$index + 1 }}</span>
             </template>
           </el-table-column>
           <el-table-column :label="`${title}名称`" align="center" prop="gxName" />
diff --git a/ah-jjzhgd-web/src/views/basic/sideband/components/AreaSelect.vue b/ah-jjzhgd-web/src/views/basic/sideband/components/AreaSelect.vue
new file mode 100644
index 0000000..d2c6206
--- /dev/null
+++ b/ah-jjzhgd-web/src/views/basic/sideband/components/AreaSelect.vue
@@ -0,0 +1,55 @@
+<template>
+  <el-select v-model="currentOption" placeholder="请选择" style="width: 100%" @change="handleChange">
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value"
+    />
+  </el-select>
+</template>
+
+<script>
+import { getAreaSelectList } from '@/api/public'
+
+export default {
+  name: 'AreaSelect',
+  props: ['bindValue', 'bidCode', 'gtId', 'disabled'],
+  data() {
+    return {
+      options: []
+    }
+  },
+  computed: {
+    currentOption: {
+      get() {
+        return this.bindValue
+      },
+      set(val) {
+        this.$emit('update:bindValue', val)
+      }
+    }
+  },
+  mounted() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      getAreaSelectList({ bidCode: this.bidCode, gtId: this.gtId || '' }).then(res => {
+        this.options = res.data.map(item => {
+          const { id, name } = item
+          return {
+            value: id,
+            label: name
+          }
+        })
+      })
+    },
+    handleChange(value) {
+
+    }
+  }
+}
+</script>
+
+<style scoped lang="less"></style>
diff --git a/ah-jjzhgd-web/src/views/basic/sideband/components/DeviceSelect.vue b/ah-jjzhgd-web/src/views/basic/sideband/components/DeviceSelect.vue
new file mode 100644
index 0000000..373daa2
--- /dev/null
+++ b/ah-jjzhgd-web/src/views/basic/sideband/components/DeviceSelect.vue
@@ -0,0 +1,55 @@
+<template>
+  <el-select v-model="currentOption" placeholder="请选择" style="width: 100%" @change="handleChange">
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value"
+    />
+  </el-select>
+</template>
+
+<script>
+import { getDictSelectList } from '@/api/public'
+
+export default {
+  name: 'DeviceSelect',
+  props: ['bindValue', 'disabled'],
+  data() {
+    return {
+      options: []
+    }
+  },
+  computed: {
+    currentOption: {
+      get() {
+        return this.bindValue
+      },
+      set(val) {
+        this.$emit('update:bindValue', val)
+      }
+    }
+  },
+  mounted() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      getDictSelectList(700).then(res => {
+        this.options = res.data.map(item => {
+          const { id, name } = item
+          return {
+            value: id,
+            label: name
+          }
+        })
+      })
+    },
+    handleChange(value) {
+
+    }
+  }
+}
+</script>
+
+<style scoped lang="less"></style>
diff --git a/ah-jjzhgd-web/src/views/basic/sideband/components/DeviceStatusSelect.vue b/ah-jjzhgd-web/src/views/basic/sideband/components/DeviceStatusSelect.vue
new file mode 100644
index 0000000..5a2fdbc
--- /dev/null
+++ b/ah-jjzhgd-web/src/views/basic/sideband/components/DeviceStatusSelect.vue
@@ -0,0 +1,55 @@
+<template>
+  <el-select v-model="currentOption" placeholder="请选择" style="width: 100%" @change="handleChange">
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value"
+    />
+  </el-select>
+</template>
+
+<script>
+import { getDictSelectList } from '@/api/public'
+
+export default {
+  name: 'DeviceStatusSelect',
+  props: ['bindValue', 'disabled'],
+  data() {
+    return {
+      options: []
+    }
+  },
+  computed: {
+    currentOption: {
+      get() {
+        return this.bindValue
+      },
+      set(val) {
+        this.$emit('update:bindValue', val)
+      }
+    }
+  },
+  mounted() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      getDictSelectList(800).then(res => {
+        this.options = res.data.map(item => {
+          const { id, name } = item
+          return {
+            value: id,
+            label: name
+          }
+        })
+      })
+    },
+    handleChange(value) {
+
+    }
+  }
+}
+</script>
+
+<style scoped lang="less"></style>
diff --git a/ah-jjzhgd-web/src/views/basic/sideband/components/GtSelect.vue b/ah-jjzhgd-web/src/views/basic/sideband/components/GtSelect.vue
new file mode 100644
index 0000000..1bb2d9a
--- /dev/null
+++ b/ah-jjzhgd-web/src/views/basic/sideband/components/GtSelect.vue
@@ -0,0 +1,63 @@
+<template>
+  <el-select v-model="currentOption" placeholder="请选择" style="width: 100%" @change="handleChange">
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value"
+    />
+  </el-select>
+</template>
+
+<script>
+import { getTowerList } from '@/api/basic/project'
+
+export default {
+  name: 'GtSelect',
+  props: ['bidCode', 'bindValue'],
+  data() {
+    return {
+      options: []
+    }
+  },
+  computed: {
+    currentOption: {
+      get() {
+        return this.bindValue
+      },
+      set(val) {
+        this.$emit('update:bindValue', val)
+      }
+    }
+  },
+  watch: {
+    bidCode: {
+      handler: function(val, old) {
+        this.getList(val)
+      },
+      immediate: true
+    }
+  },
+  mounted() {
+    // this.getList()
+  },
+  methods: {
+    getList(bidCode) {
+      getTowerList({ param: bidCode, proType: 2 }).then(res => {
+        this.options = res.data.map(item => {
+          const { id, name } = item
+          return {
+            value: id,
+            label: name
+          }
+        })
+      })
+    },
+    handleChange(value) {
+
+    }
+  }
+}
+</script>
+
+<style scoped lang="less"></style>
diff --git a/ah-jjzhgd-web/src/views/basic/sideband/components/ProjectSelect.vue b/ah-jjzhgd-web/src/views/basic/sideband/components/ProjectSelect.vue
new file mode 100644
index 0000000..f016b7a
--- /dev/null
+++ b/ah-jjzhgd-web/src/views/basic/sideband/components/ProjectSelect.vue
@@ -0,0 +1,66 @@
+<template>
+  <el-select v-model="currentOption" placeholder="请选择" style="width: 100%" @change="handleChange">
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value"
+    />
+  </el-select>
+</template>
+
+<script>
+import { getProjectSelectList } from '@/api/public'
+
+export default {
+  name: 'ProjectSelect',
+  props: ['bindValue', 'bindType', 'disabled'],
+  data() {
+    return {
+      options: []
+    }
+  },
+  computed: {
+    currentOption: {
+      get() {
+        return this.bindValue
+      },
+      set(val) {
+        this.$emit('update:bindValue', val)
+      }
+    }
+  },
+  watch: {
+    bindValue: {
+      handler: function(val, old) {
+        if (val && this.options?.length) {
+          this.$emit('update:bindType', this.options.find(item => item.value === val)['type'])
+        }
+      },
+      immediate: true
+    }
+  },
+  mounted() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      getProjectSelectList().then(res => {
+        this.options = res.data.map(item => {
+          const { id, name, proType } = item
+          return {
+            value: id,
+            label: name,
+            type: proType
+          }
+        })
+      })
+    },
+    handleChange(value) {
+      // this.$emit('update:bindType', this.options.find(item => item.value === value)['type'])
+    }
+  }
+}
+</script>
+
+<style scoped lang="less"></style>
diff --git a/ah-jjzhgd-web/src/views/basic/sideband/components/SidebandChildTable.vue b/ah-jjzhgd-web/src/views/basic/sideband/components/SidebandChildTable.vue
new file mode 100644
index 0000000..8c8b09f
--- /dev/null
+++ b/ah-jjzhgd-web/src/views/basic/sideband/components/SidebandChildTable.vue
@@ -0,0 +1,311 @@
+<template>
+  <el-dialog title="边带子设备" :visible.sync="visible" width="80%" append-to-body custom-class="custom-modal">
+    <div class="app-container">
+      <div class="filter-container">
+        <el-input
+          v-model="listQuery.keyWord"
+          placeholder="关键字"
+          style="width: 200px"
+          class="filter-item"
+          :maxlength="30"
+          @keyup.enter.native="handleFilter"
+        />
+        <el-button
+          style="margin-left: 40px"
+          class="filter-item"
+          type="primary"
+          @click="handleFilter"
+        >
+          查询
+        </el-button>
+        <el-button class="filter-item" style="margin-left: 10px" type="primary" @click="handleCreate">
+          新增
+        </el-button>
+      </div>
+
+      <el-table
+        :key="tableKey"
+        v-loading="listLoading"
+        :data="list"
+        border
+        fit
+        highlight-current-row
+        style="width: 100%"
+        :max-height="tableHeight"
+      >
+        <el-table-column label="序号" align="center" width="80" type="index">
+          <template scope="scope">
+            <span>{{ (listQuery.pageNum - 1) * 10 + scope.$index + 1 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="设备ID" align="center" prop="deviceId" />
+        <el-table-column label="设备编码" align="center" prop="deviceCode" />
+        <el-table-column label="设备类型" align="center" prop="deviceType" />
+        <el-table-column label="设备状态" align="center" prop="status" />
+        <el-table-column label="设备IP" align="center" prop="ip" />
+        <el-table-column label="设备名称" align="center" prop="deviceName" />
+        <el-table-column label="创建时间" align="center" prop="createTime" />
+        <el-table-column label="入场时间" align="center" prop="updateTime" />
+        <el-table-column label="设备信号" align="center" prop="deviceModel" />
+        <el-table-column label="边带设备名称" align="center" prop="bdName" />
+        <!--        <el-table-column label="边带设备ID" align="center" prop="bdId" />-->
+        <el-table-column label="区域名称" align="center" prop="areaName" />
+        <!--        <el-table-column label="区域ID" align="center" prop="areaId" />-->
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160">
+          <template slot-scope="{ row, $index }">
+            <el-button type="text" size="mini" @click="handleUpdate(row, $index)">编辑</el-button>
+            <el-button type="text" size="mini" @click="handleDelete(row, $index)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="listQuery.pageNum"
+        :limit.sync="listQuery.pageSize"
+        @pagination="getList"
+      />
+    </div>
+
+    <!--    编辑模态框-->
+    <el-dialog append-to-body :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="630px" @closed="handleClosedModal">
+      <el-form
+        ref="dataForm"
+        :rules="rules"
+        :model="temp"
+        label-position="right"
+        label-width="120px"
+      >
+        <el-form-item label="设备编码：" prop="deviceCode">
+          <el-input v-model="temp.deviceCode" placeholder="设备编码" :maxlength="50" />
+        </el-form-item>
+        <el-form-item label="设备类型：" prop="deviceType">
+          <DeviceSelect :bind-value.sync="temp.deviceType" />
+        </el-form-item>
+        <el-form-item label="设备状态：" prop="status">
+          <DeviceStatusSelect :bind-value.sync="temp.status" />
+        </el-form-item>
+        <el-form-item label="区域ID：" prop="areaId">
+          <AreaSelect :bind-value.sync="temp.areaId" :bid-code="bidCode" :gt-id="gtId" />
+        </el-form-item>
+        <!--        <el-form-item label="边带所属ID：" prop="bdId">-->
+        <!--          <SidebandSelect :bind-value.sync="temp.bdId" />-->
+        <!--        </el-form-item>-->
+        <el-form-item label="ip" prop="ip">
+          <el-input v-model="temp.ip" placeholder="ip" :maxlength="50" />
+        </el-form-item>
+        <el-form-item label="设备名称：" prop="deviceName">
+          <el-input v-model="temp.deviceName" placeholder="设备名称" :maxlength="50" />
+        </el-form-item>
+        <el-form-item label="设备信号：" prop="deviceModel">
+          <el-input v-model="temp.deviceModel" placeholder="设备信号" :maxlength="50" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false"> 关闭 </el-button>
+        <el-button type="primary" @click="dialogStatus === 'create' ? createData() : updateData()">
+          提交
+        </el-button>
+      </div>
+    </el-dialog>
+  </el-dialog>
+</template>
+
+<script>
+import Pagination from '@/components/Pagination'
+
+import _ from 'lodash/fp'
+import {
+  addSidebandChildItem,
+  deleteSidebandChildItem,
+  getSidebandChildItemDetail, getSidebandChildList,
+  updateSidebandChildItem
+} from '@/api/basic/sideband'
+import DeviceSelect from '@/views/basic/sideband/components/DeviceSelect.vue'
+import DeviceStatusSelect from '@/views/basic/sideband/components/DeviceStatusSelect.vue'
+import SidebandSelect from '@/views/basic/sideband/components/SidebandSelect.vue'
+import AreaSelect from '@/views/basic/sideband/components/AreaSelect.vue'
+
+const defaultTmp = {
+  deviceId: '',
+  deviceCode: '',
+  deviceType: '',
+  status: '',
+  ip: '',
+  deviceName: '',
+  createTime: '',
+  updateTime: '',
+  deviceModel: '',
+  bdName: '',
+  bdId: '',
+  areaName: '',
+  areaId: ''
+}
+export default {
+  name: 'SidebandChildTable',
+  components: { AreaSelect, DeviceStatusSelect, DeviceSelect, Pagination },
+  props: ['currentId', 'bidCode', 'gtId', 'componentVisible'],
+  data() {
+    return {
+      tableKey: 0,
+      list: [],
+      typeList: [],
+      statusList: [],
+      areaList: [],
+      bdIdList: [],
+      total: 0,
+      listLoading: false,
+      listQuery: {
+        pageNum: 1,
+        pageSize: 10,
+        keyword: '',
+        id: ''
+      },
+      tableHeight: 650,
+      showReviewer: false,
+      temp: _.cloneDeep(defaultTmp),
+      dialogFormVisible: false,
+      dialogStatus: '',
+      downloadLoading: false,
+      textMap: {
+        update: '编辑',
+        create: '新增'
+      },
+      processModalVisible: false,
+      rules: {
+        deviceCode: [{ required: true, message: '不能为空', trigger: 'blur' }],
+        deviceType: [{ required: true, message: '请选择', trigger: 'change' }],
+        status: [{ required: true, message: '请选择', trigger: 'change' }],
+        areaId: [{ required: true, message: '请选择', trigger: 'change' }],
+        bdId: [{ required: true, message: '请选择', trigger: 'change' }],
+        ip: [{ required: true, message: '不能为空', trigger: 'blur' }],
+        deviceName: [{ required: true, message: '不能为空', trigger: 'blur' }],
+        deviceModel: [{ required: true, message: '不能为空', trigger: 'blur' }]
+      }
+    }
+  },
+  computed: {
+    visible: {
+      get() {
+        return this.componentVisible
+      },
+      set(val) {
+        this.$emit('update:componentVisible', val)
+      }
+    }
+    // title() {
+    //   return this.processType === '线路' ? '杆塔' : '工序计划'
+    // }
+  },
+  watch: {
+    visible(val) {
+      if (val) {
+        this.getList()
+        // this.getTowerList()
+      }
+    }
+  },
+  created() {
+    // this.getList()
+  },
+  methods: {
+    getTowerList() {
+      // getTowerList({ param: this.processType === '线路' ? this.bidCode : '400', proType: this.processType === '线路' ? 2 : 1 }).then(res => {
+      //   this.typeList = res.data
+      // })
+    },
+    getList() {
+      this.listLoading = true
+      this.listQuery.id = this.currentId
+      getSidebandChildList(this.listQuery).then((response) => {
+        this.list = response.rows
+        this.total = response.total
+      }).finally(() => {
+        this.listLoading = false
+      })
+    },
+    // 查询
+    handleFilter() {
+      this.listQuery.pageNum = 1
+      this.getList()
+    },
+    // 新增
+    handleCreate() {
+      this.dialogStatus = 'create'
+      this.dialogFormVisible = true
+    },
+    createData() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          this.temp.bidCode = this.bidCode
+          this.temp.bdId = this.currentId
+          addSidebandChildItem(this.temp).then((response) => {
+            this.$message({
+              showClose: true,
+              message: response.msg,
+              type: 'success',
+              duration: 2000
+            })
+            this.getList()
+          }).finally(() => {
+            this.dialogFormVisible = false
+          })
+        }
+      })
+    },
+    // 编辑
+    handleUpdate(row) {
+      getSidebandChildItemDetail({ id: row.deviceId }).then((res) => {
+        this.temp = Object.assign({}, res.data)
+      })
+      this.dialogStatus = 'update'
+      this.dialogFormVisible = true
+    },
+    updateData() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          updateSidebandChildItem(this.temp).then((response) => {
+            this.$message({
+              showClose: true,
+              message: response.msg,
+              type: 'success',
+              duration: 2000
+            })
+            this.getList()
+          }).finally(() => {
+            this.dialogFormVisible = false
+          })
+        }
+      })
+    },
+    // 删除数据
+    handleDelete(row, index) {
+      this.$confirm(`确定要删除该数据吗？`, {
+        type: 'warning',
+        title: '操作提示',
+        beforeClose: async(action, instance, done) => {
+          if (action === 'confirm') {
+            deleteSidebandChildItem({ id: row.deviceId }).then((response) => {
+              done()
+              this.$message({
+                showClose: true,
+                message: response.msg,
+                type: 'success',
+                duration: 2000
+              })
+              this.getList()
+            })
+          } else {
+            done()
+          }
+        }
+      })
+    },
+    handleClosedModal() {
+      this.$refs['dataForm'].resetFields()
+      this.temp = _.cloneDeep(defaultTmp)
+    }
+  }
+}
+</script>
diff --git a/ah-jjzhgd-web/src/views/basic/sideband/components/SidebandSelect.vue b/ah-jjzhgd-web/src/views/basic/sideband/components/SidebandSelect.vue
new file mode 100644
index 0000000..1badd6f
--- /dev/null
+++ b/ah-jjzhgd-web/src/views/basic/sideband/components/SidebandSelect.vue
@@ -0,0 +1,55 @@
+<template>
+  <el-select v-model="currentOption" placeholder="请选择" style="width: 100%" @change="handleChange">
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value"
+    />
+  </el-select>
+</template>
+
+<script>
+import { getDictSelectList } from '@/api/public'
+
+export default {
+  name: 'SidebandSelect',
+  props: ['bindValue', 'disabled'],
+  data() {
+    return {
+      options: []
+    }
+  },
+  computed: {
+    currentOption: {
+      get() {
+        return this.bindValue
+      },
+      set(val) {
+        this.$emit('update:bindValue', val)
+      }
+    }
+  },
+  mounted() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      getDictSelectList(600).then(res => {
+        this.options = res.data.map(item => {
+          const { id, name } = item
+          return {
+            value: id,
+            label: name
+          }
+        })
+      })
+    },
+    handleChange(value) {
+
+    }
+  }
+}
+</script>
+
+<style scoped lang="less"></style>
diff --git a/ah-jjzhgd-web/src/views/basic/sideband/index.vue b/ah-jjzhgd-web/src/views/basic/sideband/index.vue
new file mode 100644
index 0000000..175730c
--- /dev/null
+++ b/ah-jjzhgd-web/src/views/basic/sideband/index.vue
@@ -0,0 +1,293 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-input
+        v-model="listQuery.keyword"
+        placeholder="关键字"
+        style="width: 200px"
+        class="filter-item"
+        :maxlength="30"
+        @keyup.enter.native="handleFilter"
+      />
+      <el-button
+
+        style="margin-left: 40px"
+        class="filter-item"
+        type="primary"
+        @click="handleFilter"
+      >
+        查询
+      </el-button>
+      <el-button class="filter-item" style="margin-left: 10px" type="primary" @click="handleCreate">
+        新增
+      </el-button>
+    </div>
+
+    <el-table
+      :key="tableKey"
+      v-loading="listLoading"
+      :data="list"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%"
+      :max-height="tableHeight"
+    >
+      <el-table-column label="序号" align="center" width="80" type="index">
+        <template scope="scope">
+          <span>{{ (listQuery.pageNum - 1) * 10 + scope.$index + 1 }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="边带名称" align="center" prop="bdName" />
+      <el-table-column label="边带编码" align="center" prop="bdCode" />
+      <el-table-column label="边带IP" align="center" prop="bdIp" />
+      <el-table-column label="边带类型名称" align="center" prop="bdTypeName" />
+      <el-table-column label="杆塔名称" align="center" prop="gtName" />
+      <el-table-column label="工程名称" align="center" prop="proName" />
+      <el-table-column label="绑定时间" align="center" prop="bindTime" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="{ row, $index }">
+          <el-button type="text" size="mini" @click="handleUpdate(row, $index)">编辑</el-button>
+          <el-button type="text" size="mini" @click="handleBind(row, $index)">绑定子设备</el-button>
+          <el-button type="text" size="mini" @click="handleDelete(row, $index)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.pageNum"
+      :limit.sync="listQuery.pageSize"
+      @pagination="getList"
+    />
+
+    <!--    编辑模态框-->
+    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="630px" @closed="handleClosedModal">
+      <el-form
+        ref="dataForm"
+        :rules="rules"
+        :model="temp"
+        label-position="right"
+        label-width="120px"
+      >
+        <el-form-item label="边带名称：" prop="bdName">
+          <el-input v-model="temp.bdName" placeholder="边带名称" :maxlength="50" />
+        </el-form-item>
+        <el-form-item label="边带编码：" prop="bdCode">
+          <el-input v-model="temp.bdCode" placeholder="边带编码" :maxlength="50" />
+        </el-form-item>
+        <el-form-item label="边带IP：" prop="bdIp">
+          <el-input v-model="temp.bdIp" placeholder="边带IP" :maxlength="50" />
+        </el-form-item>
+        <el-form-item label="边带类型：" prop="bdType">
+          <SidebandSelect :bind-value.sync="temp.bdType" />
+        </el-form-item>
+        <el-form-item label="设备类型：" prop="typeCode">
+          <DeviceSelect :bind-value.sync="temp.typeCode" />
+        </el-form-item>
+        <el-form-item label="标段编码：" prop="bidCode">
+          <ProjectSelect :bind-type.sync="currentProjectType" :bind-value.sync="temp.bidCode" />
+        </el-form-item>
+        <el-form-item v-if="currentProjectType === '线路'" label="杆塔ID：" prop="gtId">
+          <GtSelect :bid-code="temp.bidCode" :bind-value.sync="temp.gtId" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false"> 关闭 </el-button>
+        <el-button type="primary" @click="dialogStatus === 'create' ? createData() : updateData()">
+          提交
+        </el-button>
+      </div>
+    </el-dialog>
+
+    <!--边带子设备模态框-->
+    <SidebandChildTable :component-visible.sync="sidebandChildVisible" :current-id="currentSidebandId" :bid-code="currentBidCode" :gt-id="currentGtId" />
+  </div>
+</template>
+
+<script>
+import Pagination from '@/components/Pagination'
+import SidebandChildTable from '@/views/basic/sideband/components/SidebandChildTable.vue'
+import ProjectSelect from '@/views/basic/sideband/components/ProjectSelect.vue'
+import SidebandSelect from '@/views/basic/sideband/components/SidebandSelect.vue'
+import DeviceSelect from '@/views/basic/sideband/components/DeviceSelect.vue'
+import GtSelect from '@/views/basic/sideband/components/GtSelect.vue'
+
+import _ from 'lodash/fp'
+import {
+  addSidebandItem,
+  deleteSidebandItem,
+  getSidebandItemDetail,
+  getSidebandList,
+  updateSidebandItem
+} from '@/api/basic/sideband'
+
+const defaultTmp = {
+  bdName: '',
+  bdCode: '',
+  bdIp: '',
+  bdType: '',
+  typeCode: '',
+  gtId: '',
+  bidCode: ''
+}
+export default {
+  components: { Pagination, SidebandChildTable, ProjectSelect, SidebandSelect, DeviceSelect, GtSelect },
+  data() {
+    return {
+      tableKey: 0,
+      list: [],
+      // 边带类型列表
+      sidebandTypeList: [],
+      // 设备类型列表
+      deviceList: [],
+      // 杆塔列表
+      gtIdList: [],
+      // 标段编码列表
+      bidList: [],
+      total: 0,
+      listLoading: false,
+      listQuery: {
+        pageNum: 1,
+        pageSize: 10,
+        keyword: ''
+      },
+      tableHeight: 650,
+      showReviewer: false,
+      temp: _.cloneDeep(defaultTmp),
+      dialogFormVisible: false,
+      sidebandChildVisible: false,
+      dialogStatus: '',
+      textMap: {
+        update: '编辑',
+        create: '新增'
+      },
+      // 当前边带子设备Id
+      currentSidebandId: '',
+      currentGtId: '',
+      currentBidCode: '',
+      currentProjectType: '',
+      rules: {
+        bdName: [{ required: true, message: '不能为空', trigger: 'blur' }],
+        bdCode: [{ required: true, message: '不能为空', trigger: 'blur' }],
+        bdIp: [{ required: true, message: '不能为空', trigger: 'blur' }],
+        bdType: [{ required: true, message: '不能为空', trigger: 'change' }],
+        typeCode: [{ required: true, message: '不能为空', trigger: 'change' }],
+        gtId: [{ required: true, message: '不能为空', trigger: 'change' }],
+        bidCode: [{ required: true, message: '不能为空', trigger: 'change' }]
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    // 获取班组列表
+    getTeamList() {
+      // getQualityTeamList().then(res => {
+      //   this.teamList = res.data
+      // })
+    },
+    getList() {
+      this.listLoading = true
+      getSidebandList(this.listQuery).then((response) => {
+        this.list = response.rows.map(item => {
+          return item
+        })
+        this.total = response.total
+        this.listLoading = false
+      })
+    },
+    // 查询
+    handleFilter() {
+      this.listQuery.pageNum = 1
+      this.getList()
+    },
+    // 新增
+    handleCreate() {
+      this.dialogStatus = 'create'
+      this.dialogFormVisible = true
+    },
+    createData() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          addSidebandItem(this.temp).then((response) => {
+            this.$message({
+              showClose: true,
+              message: response.msg,
+              type: 'success',
+              duration: 2000
+            })
+            this.getList()
+            this.dialogFormVisible = false
+          }).finally(() => {
+            // this.dialogFormVisible = false
+          })
+        }
+      })
+    },
+    // 编辑
+    handleUpdate(row) {
+      getSidebandItemDetail({ id: row.id }).then((res) => {
+        this.temp = Object.assign({}, res.data)
+      })
+      this.dialogStatus = 'update'
+      this.dialogFormVisible = true
+    },
+    updateData() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          updateSidebandItem(this.temp).then((response) => {
+            this.$message({
+              showClose: true,
+              message: response.msg,
+              type: 'success',
+              duration: 2000
+            })
+            this.getList()
+          }).finally(() => {
+            this.dialogFormVisible = false
+          })
+        }
+      })
+    },
+    // 删除数据
+    handleDelete(row, index) {
+      this.$confirm(`确定要删除该数据吗？`, {
+        type: 'warning',
+        title: '操作提示',
+        beforeClose: async(action, instance, done) => {
+          if (action === 'confirm') {
+            deleteSidebandItem({ id: row.id }).then((response) => {
+              done()
+              this.$message({
+                showClose: true,
+                message: response.msg,
+                type: 'success',
+                duration: 2000
+              })
+              this.getList()
+            })
+          } else {
+            done()
+          }
+        }
+      })
+    },
+    // 绑定子设备
+    handleBind(row, index) {
+      this.currentSidebandId = row.id
+      this.currentBidCode = row.bidCode
+      this.currentGtId = row.gtId
+      this.sidebandChildVisible = true
+    },
+    handleClosedModal() {
+      this.$refs['dataForm'].resetFields()
+      this.temp = _.cloneDeep(defaultTmp)
+      this.currentProjectType = ''
+      this.currentSidebandId = ''
+    }
+  }
+}
+</script>