Signed-off-by: zhaobao <528046418@qq.com>

src/api/aqpt/visualEditor.js

@@ -1,4 +1,47 @@
 import request from '@/utils/request'
+
+/**
+ * 工作项目查询
+ */
+export function getJobsApi() {
+  return request({
+    url: '/JobActivitys/logo/list'
+  })
+}
+export function getJobsByIdApi(typeId) {
+  return request({
+    url: `/JobActivitys/logo/${typeId}`
+  })
+}
+/**
+ * 工作项目新增
+ */
+export function jobAddApi(data) {
+  return request({
+    url: '/JobActivitys/logo/add',
+    method: 'post',
+    data
+  })
+}
+/**
+ * 工作项目删除
+ */
+export function jobDelApi(typeId) {
+  return request({
+    url: `/JobActivitys/logo/delete/${typeId}`,
+    method: 'delete'
+  })
+}
+/**
+ * 工作项目修改
+ */
+export function jobUpdateApi(data) {
+  return request({
+    url: `/JobActivitys/logo/update`,
+    method: 'put',
+    data
+  })
+}
 /**
  * 查询
  */
@@ -28,7 +71,7 @@ export function delApi(veditId) {
   })
 }
 /**
- * 删除
+ * 修改
  */
 export function updateApi(data) {
   return request({

src/router/modules/aqpt.js

@@ -121,6 +121,13 @@ const aqptRouter = [
         name: 'entRiskPoint',
         meta: { title: '风险点', noCache: true, permit: 'aqpt_scene_riskpoint' }
       },
+
+      {
+        path: 'projectWork',
+        component: () => import('@/views/aqpt/projectWork/index'),
+        name: 'projectWork',
+        meta: { title: '工作项目管理', noCache: true, permit: 'aqpt_scene_riskpoint' }
+      },
       {
         path: 'VisualEditor',
         component: () => import('@/views/aqpt/visualEditor/index'),

src/views/aqpt/projectWork/components/projectWorkForm.vue

@@ -0,0 +1,169 @@
+<template>
+  <el-drawer
+    :title="title"
+    :modal-append-to-body="false"
+    :modal="false"
+    :wrapper-closable="false"
+    size="35%"
+    :visible.sync="dialogVisible"
+  >
+    <div class="content-container">
+      <vuescroll :ops="ops" style="height: calc(100vh - 250px)">
+        <el-form ref="ruleForm" :model="formData" :rules="rules" label-position="right" label-width="120px">
+          <el-form-item label="标题">
+            <el-input v-model="formData.jobactivityTitle" placeholder="输入标题" readonly />
+          </el-form-item>
+          {{ formData.jobactivityTitle }}
+          <el-form-item label="工作类型">
+            <el-select v-model="formData.typeId" style="width: 100%" filterable placeholder="选择类别" @change="changeType(formData.typeId)">
+              <el-option
+                v-for="item in typeList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="图标">
+            <FileUpload v-model="formData.logoUrl" />
+          </el-form-item>
+        </el-form>
+      </vuescroll>
+
+      <div class="btn-group">
+        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
+        <el-button class="cancel-btn" @click="dialogVisible = false">取 消</el-button>
+      </div>
+    </div>
+
+  </el-drawer>
+</template>
+
+<script>
+import vuescroll from 'vuescroll'
+import FileUpload from '@/components/FileUpload/avatarUpload'
+import { getJobsByIdApi, jobAddApi, jobUpdateApi } from '@/api/aqpt/visualEditor'
+export default {
+  name: 'ProjectWorkForm',
+  components: {
+    vuescroll,
+    FileUpload
+  },
+  props: {
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      ops: {
+        bar: {
+          keepShow: false,
+          background: 'rgba(144, 147, 153, 0.4)',
+          onlyShowBarOnScroll: false
+        }
+      },
+      dialogVisible: false,
+      actionType: 1,
+      typeList: [
+        { id: 1, name: '动火作业' },
+        { id: 2, name: '有限空间作业' },
+        { id: 3, name: '高处作业' },
+        { id: 4, name: '起重作业' },
+        { id: 5, name: '交叉作业' },
+        { id: 6, name: '临时用电作业' },
+        { id: 7, name: '断路作业' },
+        { id: 8, name: '动土作业' },
+        { id: 9, name: '防护设备拆除' },
+        { id: 10, name: '高温及其他危险作业' },
+        { id: 11, name: '盲板抽堵作业' },
+        { id: 12, name: '预热器清堵作业' },
+        { id: 13, name: '篦冷机清大块作业' }
+      ],
+      rules: {
+        jobactivityTitle: [
+          { required: true, message: '请填写名称', trigger: 'blur' }
+        ]
+      },
+      formData: {
+        logoUrl: '',
+        jobactivityTitle: ''
+      }
+    }
+  },
+  methods: {
+
+    // Show Add Dialog
+    showAddView() {
+      this.resetFormData()
+      this.actionType = 1
+      this.dialogVisible = true
+    },
+
+    // Show Edit Dialog
+    showEditView(id) {
+      this.resetFormData()
+      this.actionType = 2
+      this.dialogVisible = true
+      getJobsByIdApi(id).then((res) => {
+        this.formData = res.data
+      })
+    },
+    changeType(id) {
+      this.formData.jobactivityTitle = this.typeList.filter((item) => item.id === id)[0]?.name
+    },
+    // Reset Form Data
+    resetFormData() {
+      this.formData = {
+        logoUrl: '',
+        jobactivityTitle: ''
+      }
+    },
+    // 提交
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          if (this.actionType === 1) {
+            jobAddApi(this.formData).then((resp) => {
+              const { code, msg } = resp
+              if (code === 0) {
+                this.dialogVisible = false
+                this.$message.success(msg)
+                this.formSuccess()
+              } else {
+                this.$message.error(msg)
+              }
+            }).catch((error) => {
+              console.log(error)
+            })
+          } else {
+            jobUpdateApi(this.formData).then((resp) => {
+              const { code, msg } = resp
+              if (code === 0) {
+                this.dialogVisible = false
+                this.$message.success(msg)
+                this.formSuccess()
+              } else {
+                this.$message.error(msg)
+              }
+            }).catch((error) => {
+              console.log(error)
+            })
+          }
+        } else {
+          this.$message.error('操作失败')
+          return false
+        }
+      })
+    },
+    formSuccess() {
+      this.$emit('formSuccess')
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields()
+    }
+  }
+}
+</script>
+

src/views/aqpt/projectWork/index.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="content-container">
+
+    <div class="header">
+      <span class="title">创建工作项目</span>
+      <el-button type="primary" @click="handleAdd">新增</el-button>
+    </div>
+    <el-row class="content-body">
+      <el-table v-loading="listLoading" border :data="dataList" height="calc(100vh - 250px)">
+        <el-table-column type="index" label="序号" header-align="center" align="center" width="50" />
+        <el-table-column prop="jobactivityTitle" label="标题" header-align="center" align="center" />
+        <el-table-column prop="logoUrl" label="图标" header-align="left" align="left" width="100">
+          <template v-slot="{row}">
+            <el-avatar :src="row.logoUrl" />
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" header-align="center" align="center">
+          <template v-slot="{row}">
+            <el-button size="mini" type="info" icon="el-icon-edit" plain @click="handleEdit(row)">修改</el-button>
+            <el-button v-if="row.isFixed !== 1" size="mini" icon="el-icon-delete" type="danger" @click="handleDelete(row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-row>
+    <project-work-form ref="project-work-form" @formSuccess="formSuccess" />
+  </div>
+</template>
+
+<script>
+
+import projectWorkForm from './components/projectWorkForm.vue'
+import { getJobsApi, jobDelApi } from '@/api/aqpt/visualEditor'
+export default {
+  components: {
+    projectWorkForm
+  },
+  data() {
+    return {
+      title: '风险点',
+      dataList: [],
+      total: 0,
+      listLoading: false,
+      conditions: {
+        page: 1,
+        limit: 10,
+        keywords: ''
+      },
+      handleModal: false,
+      miniUrl: '',
+      exportItems: []
+    }
+  },
+  created() {
+    this.getData()
+  },
+  methods: {
+
+    getData() {
+      this.listLoading = true
+      getJobsApi(this.conditions).then((resp) => {
+        this.listLoading = false
+        const { code, data, total, msg } = resp
+        if (code === 0) {
+          this.total = total
+          this.dataList = data
+        } else {
+          this.$message.error(msg)
+        }
+      }).catch((error) => {
+        console.log(error)
+      })
+    },
+
+    // 添加
+    handleAdd() {
+      this.$refs['project-work-form'].showAddView()
+    },
+
+    // 修改
+    handleEdit(data) {
+      const { typeId } = data
+      this.$refs['project-work-form'].showEditView(typeId)
+    },
+    // 删除
+    handleDelete(data) {
+      const { typeId } = data
+      this.$confirm(`此操作将删除该数据 ${data.riskPointTitle}, 是否继续?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        jobDelApi(typeId).then((resp) => {
+          const { code, msg } = resp
+          if (code === 0) {
+            this.getData()
+            this.$message.success(msg)
+          } else {
+            this.$message.error(msg)
+          }
+        }).catch((error) => {
+          console.log(error)
+        })
+      }).catch(() => {
+        this.$message({ type: 'info', message: '已取消删除' })
+      })
+    },
+    formSuccess() {
+      this.getData()
+    }
+
+  }
+}
+</script>
+<style lang="scss" scoped>
+.header{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .title{
+        font-size: 18px;
+        font-weight: bold;
+        color: #FFFFFF;
+    }
+}
+</style>
+

src/views/aqpt/visualEditor/index.vue

@@ -42,7 +42,7 @@
       <div v-if="type==3" class="deleteForm">
         <div class="title">作业点基本信息</div>
         <div class="item">
-          <div class="lable">作业项：</div>
+          <div class="lable">作业项目：</div>
           <div class="content">
             <img class="icon" :src="deleteForm.icon" alt="">
             <span>{{ deleteForm.name }}</span>
@@ -185,7 +185,7 @@ export default {
         this.dragstartMarker = undefined
         return
       }
-      if (this.map._layers[this.layer._leaflet_id]) {
+      if (this.layer._leaflet_id && this.map._layers[this.layer._leaflet_id]) {
         this.map.removeLayer(this.map._layers[this.layer._leaflet_id])
       }
     },
@@ -231,65 +231,67 @@ export default {
       this.getLayers()
     },
     getLayers() {
-      const self = this
       getLayersApi().then((res) => {
-        const markers = L.layerGroup()
-        const coordinates = [-100, 100]
-        const options = { id: 1 }
-        const icon = 'project-12'
-        const tip = '盲板抽堵作业'
-        const iconSize = [27, 33]
-        function drawMark(option = { tip, icon, options, coordinates }) {
-          const myIcon = L.divIcon({
-            // iconUrl: require(`./images/layers/${option.options.typeId}.png`),
-            className: option.icon,
-            iconSize: iconSize
-          })
-          const marker = L.marker(option.coordinates, { ...option.options, icon: myIcon, draggable: false })
+        this.initMarkers(res.data)
+      })
+    },
+    initMarkers(markerList = []) {
+      const self = this
+      const markers = L.layerGroup()
+      const coordinates = [-100, 100]
+      const options = { id: 1 }
+      const icon = 'project-12'
+      const tip = '盲板抽堵作业'
+      const iconSize = [27, 33]
+      function drawMark(option = { tip, icon, options, coordinates }) {
+        const myIcon = L.icon({
+          iconUrl: require(`./images/layers/${option.options.typeId}.png`),
+          className: option.icon,
+          iconSize: iconSize
+        })
+        const marker = L.marker(option.coordinates, { ...option.options, icon: myIcon, draggable: false })
           // .bindPopup(option.tip)
-            .addTo(markers)
-          marker.on('click', function(ev) {
-            if (self.type === 'drage') {
-              self.$message.success('请先确认当前标记点操作！')
-              return
-            }
-            const id = ev.target.options?.id
-            self.type = 3
-            self.veditId = id
-            self.markerId = ev.target._leaflet_id
-            self.deleteForm.name = ev.target.options.name
-            self.deleteForm.icon = require(`./images/layers/${ev.target.options.typeId}.png`)
-            marker.dragging.enable()
-          })
-          marker.on('dragstart', function(ev) {
-            const id = ev.target.options?.id
-            self.type = 'drage'
-            if (self.dragstartMarker === undefined) {
-              self.dragstartMarker = { marker, _latlng: ev.target._latlng }
-            }
-            self.veditId = id
-            self.markerId = ev.target._leaflet_id
-            self.saveForm.name = ev.target.options.name
-            self.saveForm.icon = require(`./images/layers/${ev.target.options.typeId}.png`)
-          })
-          marker.on('dragend', function(ev) {
-            self.layer = ev.target
-          })
-        }
-        markers.addTo(this.map)
-        this.markerGroup = markers
-        const markerList = res.data
-        if (markerList && markerList.length > 0) {
-          for (let i = 0; i < markerList.length; i++) {
-            drawMark({
-              // tip: `${markerList[i].jobactivityTitle}`,
-              icon: `project-${markerList[i].typeId}`,
-              coordinates: [markerList[i].jobactQywzwd, markerList[i].jobactQywzjd],
-              options: { id: markerList[i].veditId, typeId: markerList[i].typeId, name: markerList[i].jobactivityTitle }
-            })
+          .addTo(markers)
+        marker.on('click', function(ev) {
+          if (self.type === 'drage') {
+            self.$message.success('请先确认当前标记点操作！')
+            return
+          }
+          const id = ev.target.options?.id
+          self.type = 3
+          self.veditId = id
+          self.markerId = ev.target._leaflet_id
+          self.deleteForm.name = ev.target.options.name
+          self.deleteForm.icon = require(`./images/layers/${ev.target.options.typeId}.png`)
+          marker.dragging.enable()
+        })
+        marker.on('dragstart', function(ev) {
+          const id = ev.target.options?.id
+          self.type = 'drage'
+          if (self.dragstartMarker === undefined) {
+            self.dragstartMarker = { marker, _latlng: ev.target._latlng }
           }
+          self.veditId = id
+          self.markerId = ev.target._leaflet_id
+          self.saveForm.name = ev.target.options.name
+          self.saveForm.icon = require(`./images/layers/${ev.target.options.typeId}.png`)
+        })
+        marker.on('dragend', function(ev) {
+          self.layer = ev.target
+        })
+      }
+      markers.addTo(this.map)
+      this.markerGroup = markers
+      if (markerList && markerList.length > 0) {
+        for (let i = 0; i < markerList.length; i++) {
+          drawMark({
+            // tip: `${markerList[i].jobactivityTitle}`,
+            icon: `project-${markerList[i].typeId}`,
+            coordinates: [markerList[i].jobactQywzwd, markerList[i].jobactQywzjd],
+            options: { id: markerList[i].veditId, typeId: markerList[i].typeId, name: markerList[i].jobactivityTitle }
+          })
         }
-      })
+      }
     },
     mapListener() {
       const self = this
@@ -334,17 +336,14 @@ export default {
       this.map.on('pm:remove', (e) => {
         console.log(e, '移除')
       })
-      this.map.on('pm:globaldragmodetoggled', e => {
-        console.log(e, '拖拽结束')
-      })
-      this.map.on('pm:rotateend', (e) => {
-        console.log(e, 'rotateend')
-        this.handleType = undefined
-      })
-      // this.map.on('contextmenu', () => {
-      //   // 取消所有状态
-      //   this.resetMapControl()
+      // this.map.on('pm:globaldragmodetoggled', e => {
+      //   console.log(e, '拖拽结束')
       // })
+      this.map.on('contextmenu', () => {
+        // 取消所有状态
+        this.map.pm.disableGlobalDragMode()
+        this.cancel()
+      })
     }
   }
 }