fix:地图

quanyawei

2024-01-09 4462b1bf81d82cf690b16aad2cc0955a7c6e0b01

fix:地图

 src/App.vue

@@ -22,4 +22,5 @@
#app {
  height: 100%;
}
.amap-sug-result { z-index: 99999 !important; }
</style>

 src/main.js

@@ -58,7 +58,8 @@
    'AMap.MapType',
    'AMap.PolyEditor',
    'AMap.CircleEditor',
    'AMap.DistrictSearch'
    'AMap.DistrictSearch',
    'AMap.Geolocation'
  ],
  // 默认高德 sdk 版本为 1.4.4
  v: '1.4.4'

 src/views/toCarryOutLegislativeReforms/components/locationMap.vue

@@ -7,25 +7,25 @@
      width="1000px"
      center
      :before-close="close"
      @closed="close"
    >
      <div class="searchBox">
        <el-input
          v-model="placeSearch"
          placeholder="请输入地址"
          class="input-with-select"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="search"
          />
        </el-input>
      </div>
      <div id="panel" />
      <div
        v-if="visible"
        class="mapBox"
      >
        <div
          class="searchBox"
        >
          <el-input
            id="tipinput"
            v-model="placeSearchName"
            :disabled="$parent.mapType!=='edit'"
            prefix-icon="el-icon-search"
            placeholder="请输入地址"
            class="input-with-select"
            @keyup.enter.native="searchPlace"
          />
        </div>
        <div id="mapd" />
      </div>
    </el-dialog>
@@ -41,7 +41,11 @@
    return {
      title: '污染位置',
      map: null,
      placeSearch: null
      geolocation: null,
      marker: null,
      placeSearchName: null,
      mapPlaceSearch: null,
      position: []
    }
  },
  mounted () {
@@ -61,37 +65,71 @@
        resizeEnable: true,
        zooms: [3, 18],
        zoom: 15,
        center: [120.9781494, 31.4265156]
      })
      this.map = map

      const lnglat = new AMap.LngLat('120.9781494', '31.4265156')
      const marker = new AMap.Marker({
        position: lnglat
      })

      // 设置点标记的动画效果，此处为弹跳效果
      marker.setAnimation('AMAP_ANIMATION_BOUNCE')
      marker.setMap(this.map)
      AMap.service(['AMap.PlaceSearch'], function () {
        // 构造地点查询类
        var placeSearch = new AMap.PlaceSearch({
          pageSize: 5, // 单页显示结果条数
          pageIndex: 1, // 页码
          city: '010', // 兴趣点城市
          citylimit: true, // 是否强制限制在设置的城市内搜索
          map: map, // 展现结果的地图实例
          panel: 'panel', // 结果列表将在此容器中进行展示。
          autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
      let that = this
      AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], function () {
        // 实例化Autocomplete
        let autoOptions = {
          // city 限定城市，默认全国
          city: '全国',
          input: 'tipinput',
        }
        that.mapPlaceSearch = new AMap.PlaceSearch({
          map: map,
        })
        // 关键字查询
        placeSearch.search('北京大学')
        // that.geolocation = new AMap.Geolocation({})
        let autoComplete = new AMap.Autocomplete(autoOptions)
        AMap.event.addListener(autoComplete, 'select', function (e) {
          that.map.clearMap()
          that.mapPlaceSearch.search(e.poi.name)
        })
        AMap.event.addListener(that.mapPlaceSearch, 'markerClick', function (e) {
          that.position = [e.data.location.lng, e.data.location.lat]
          this.placeSearchName = e.data.cityname + e.data.adname + e.data.address
          console.log(e)
          console.log(this.placeSearchName)
          document.getElementById('tipinput').value = e.data.name
        })
      })
      if (this.$parent.mapType === 'edit') {
        map.on('click', function (ev) {
          that.map.clearMap()
          that.position = [ev.lnglat.lng, ev.lnglat.lat]
          that.marker = new AMap.Marker({
            position: that.position,
            offset: new AMap.Pixel(-13, -30)
          })
          that.marker.setMap(map)
          that.getAddress(that.position)
        })
      } else {
        this.map.clearMap()
        let marker = new AMap.Marker({
          map: map,
          position: this.$parent.position
        })
        marker.setMap(map)
        marker.setAnimation('AMAP_ANIMATION_BOUNCE')
        this.placeSearchName = this.$parent.address
      }
    },
    getAddress (position) {
      AMap.plugin('AMap.Geocoder', () => {
        const geocoder = new AMap.Geocoder({})
        geocoder.getAddress(position, (status, result) => {
          if (status === 'complete' && result.info === 'OK') {
            this.placeSearchName = result.regeocode.formattedAddress
          }
        })
      })
    },
    search () {
      let this_ = this
    searchPlace () {
      this.mapPlaceSearch.search(this.placeSearchName)
    },
    close () {
      this.map.destroy()
      this.$emit('addressAndLnt', this.position, this.placeSearchName)
      this.$emit('update:visible', false)
    }
  }
@@ -101,13 +139,16 @@
<style scoped lang="scss">
/deep/.el-dialog__body {
  height: 600px;
  .searchBox {
    margin-bottom: 10px;
  }
  .mapBox {
    width: 100%;
    height: 100%;
    padding-bottom: 30px;
    position: relative;
    .searchBox{
      position: absolute;
      z-index: 100;
       width: 100%;
    }
  }
}
#mapd {

 src/views/toCarryOutLegislativeReforms/components/newWorkOrder.vue

@@ -1,120 +1,322 @@
<template>
  <div>
    <el-dialog :title="title" :visible.sync="visible" top="30px" width="900px" center :before-close="close">
      <div slot="title" class="titBox">
    <el-dialog
      :title="title"
      :visible.sync="visible"
      top="30px"
      width="900px"
      center
      :before-close="close"
    >
      <div
        slot="title"
        class="titBox"
      >
        <div>{{ parentFormData.allocationNum }}</div>
        <div>{{ title }}</div>
      </div>
      <div>
        <el-form ref="ruleForm" :disabled="pageState === 'detail'" label-width="120px" :model="formData" class="demo-form-inline" :rules="rules">
        <el-form
          ref="ruleForm"
          :disabled="pageState === 'detail'"
          label-width="120px"
          :model="formData"
          class="demo-form-inline"
          :rules="rules"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="上报时间：" prop="escalationTime" class="span">
                <el-date-picker v-model="formData.escalationTime" value-format="yyyy-MM-dd" size="small" type="date" placeholder="选择日期" />
              <el-form-item
                label="上报时间："
                prop="escalationTime"
                class="span"
              >
                <el-date-picker
                  v-model="formData.escalationTime"
                  value-format="yyyy-MM-dd"
                  size="small"
                  type="date"
                  placeholder="选择日期"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="污染位置：" prop="pollutePosition" class="span">
                <el-input v-model="formData.pollutePosition" type="text" placeholder="请选择" size="small" />
              <el-form-item
                label="污染位置："
                prop="pollutePosition"
                class="span"
              >
                <!-- el-icon-map-location -->
                <el-input
                  v-model="formData.pollutePosition"
                  type="text"
                  placeholder="请选择"
                  size="small"
                >
                  <template
                    slot="append"
                  >
                    <div
                      style="line-height: 2;"
                      @click="toMap()"
                    >
                      定位
                    </div>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="责任主体：" prop="unitId" class="span">
                <el-select v-model="formData.unitId" placeholder="请选择" size="small">
                  <el-option v-for="item in unitList" :key="item.unitId" :label="item.unitName" :value="item.unitId" />
              <el-form-item
                label="责任主体："
                prop="unitId"
                class="span"
              >
                <el-select
                  v-model="formData.unitId"
                  placeholder="请选择"
                  size="small"
                >
                  <el-option
                    v-for="item in unitList"
                    :key="item.unitId"
                    :label="item.unitName"
                    :value="item.unitId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="污染分类：" prop="polluteType" class="span">
                <el-select v-model="formData.polluteType" placeholder="请选择" size="small">
                  <el-option v-for="item in polluteList" :key="item.dataKey" :label="item.dataValue" :value="item.dataKey" />
              <el-form-item
                label="污染分类："
                prop="polluteType"
                class="span"
              >
                <el-select
                  v-model="formData.polluteType"
                  placeholder="请选择"
                  size="small"
                >
                  <el-option
                    v-for="item in polluteList"
                    :key="item.dataKey"
                    :label="item.dataValue"
                    :value="item.dataKey"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="整改类型：" prop="changeType" class="span">
                <el-select v-model="formData.changeType" placeholder="请选择" size="small" @change="changeEnumList">
                  <el-option v-for="item in Dic.changeEnum" :key="item.value" :label="item.name" :value="item.value" />
              <el-form-item
                label="整改类型："
                prop="changeType"
                class="span"
              >
                <el-select
                  v-model="formData.changeType"
                  placeholder="请选择"
                  size="small"
                  @change="changeEnumList"
                >
                  <el-option
                    v-for="item in Dic.changeEnum"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="限期天数：" prop="changeDay" class="span">
                <el-input-number v-model="formData.changeDay" :disabled="formData.changeType === 1" :min="0" label="请输入" />
              <el-form-item
                label="限期天数："
                prop="changeDay"
                class="span"
              >
                <el-input-number
                  v-model="formData.changeDay"
                  :disabled="formData.changeType === 1"
                  :min="0"
                  label="请输入"
                />
                <!-- <el-input v-model.number="formData.changeDay" :disabled="formData.changeType===1" type="text" placeholder="请输入" size="small" /> -->
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="上报单位：" prop="escalationUnitId" class="span">
                <el-select v-model="formData.escalationUnitId" placeholder="请选择" size="small">
                  <el-option v-for="item in unitList" :key="item.unitId" :label="item.unitName" :value="item.unitId" />
              <el-form-item
                label="上报单位："
                prop="escalationUnitId"
                class="span"
              >
                <el-select
                  v-model="formData.escalationUnitId"
                  placeholder="请选择"
                  size="small"
                >
                  <el-option
                    v-for="item in unitList"
                    :key="item.unitId"
                    :label="item.unitName"
                    :value="item.unitId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="上报人：" prop="escalationName" class="span">
                <el-input v-model="formData.escalationName" type="text" placeholder="请选择" size="small" />
              <el-form-item
                label="上报人："
                prop="escalationName"
                class="span"
              >
                <el-input
                  v-model="formData.escalationName"
                  type="text"
                  placeholder="请选择"
                  size="small"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="排查方式：" prop="investigationType" class="span">
                <el-radio-group v-model="formData.investigationType" size="small">
                  <el-radio v-for="item in Dic.investigationEnum" :key="item.value" :label="item.value">{{ item.name }}</el-radio>
              <el-form-item
                label="排查方式："
                prop="investigationType"
                class="span"
              >
                <el-radio-group
                  v-model="formData.investigationType"
                  size="small"
                >
                  <el-radio
                    v-for="item in Dic.investigationEnum"
                    :key="item.value"
                    :label="item.value"
                  >
                    {{ item.name }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="任务分类：" prop="keyPointlist" class="span">
                <el-radio-group v-model="formData.keyPoint" size="small">
                  <el-radio v-for="item in Dic.emphasisEnum" :key="item.value" :label="item.value">{{ item.name }}</el-radio>
              <el-form-item
                label="任务分类："
                prop="keyPointlist"
                class="span"
              >
                <el-radio-group
                  v-model="formData.keyPoint"
                  size="small"
                >
                  <el-radio
                    v-for="item in Dic.emphasisEnum"
                    :key="item.value"
                    :label="item.value"
                  >
                    {{ item.name }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item label="问题描述：" prop="problemDescribe" class="span">
              <el-input v-model="formData.problemDescribe" type="textarea" :rows="4" placeholder="请输入内容" />
            <el-form-item
              label="问题描述："
              prop="problemDescribe"
              class="span"
            >
              <el-input
                v-model="formData.problemDescribe"
                type="textarea"
                :rows="4"
                placeholder="请输入内容"
              />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="附件：">
              <div>
                <div v-if="pageState === 'edit'">
                  <div v-for="(file, index) in fileBaseListCover" :key="file.fileId + index" class="block">
                    <el-image v-if="file.fileType === 1" style="width: 100px; height: 100px" :src="file.url" :preview-src-list="
                  <div
                    v-for="(file, index) in fileBaseListCover"
                    :key="file.fileId + index"
                    class="block"
                  >
                    <el-image
                      v-if="file.fileType === 1"
                      style="width: 100px; height: 100px"
                      :src="file.url"
                      :preview-src-list="
                        getPreviewImages(file.fileId, fileBaseList)
                      " :initial-index="index" />
                    <video v-else :src="file.url" style="width: 100px; height: 100px" @click="openVideo(file)">
                      "
                      :initial-index="index"
                    />
                    <video
                      v-else
                      :src="file.url"
                      style="width: 100px; height: 100px"
                      @click="openVideo(file)"
                    >
                      您的浏览器不支持 video 标签。
                    </video>
                  </div>
                </div>
              </div>
              <uploadFile v-if="pageState !== 'detail'" :upload-url="uploadTermExcelUrl" :sys-code="sysCode" />
              <uploadFile
                v-if="pageState !== 'detail'"
                :upload-url="uploadTermExcelUrl"
                :sys-code="sysCode"
              />
            </el-form-item>
          </el-row>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">关闭</el-button>
        <el-button v-if="pageState !== 'detail'" type="info" @click="handleSubmit('9')">保存</el-button>
        <el-button v-if="pageState !== 'detail'" type="primary" @click="handleSubmit('10')">提交</el-button>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="close">
          关闭
        </el-button>
        <el-button
          v-if="pageState !== 'detail'"
          type="info"
          @click="handleSubmit('9')"
        >
          保存
        </el-button>
        <el-button
          v-if="pageState !== 'detail'"
          type="primary"
          @click="handleSubmit('10')"
        >
          提交
        </el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="videoVisible" width="600px" :modal-append-to-body="false" :destroy-on-close="true" @close="handleCancel">
    <el-dialog
      :visible.sync="videoVisible"
      width="600px"
      :modal-append-to-body="false"
      :destroy-on-close="true"
      @close="handleCancel"
    >
      <div style="text-align: center">
        <video ref="video" style="width: 300px; height: 500px" :src="dialogImageUrl" controls autoplay />
        <video
          ref="video"
          style="width: 300px; height: 500px"
          :src="dialogImageUrl"
          controls
          autoplay
        />
      </div>
    </el-dialog>
  </div>
@@ -130,10 +332,11 @@
  props: {
    title: { type: String, default: '' },
    visible: { type: Boolean, required: true },
    isToMap: { type: Boolean, required: true, default: false },
    pageState: { type: String, required: true, default: 'add' },
    parentFormData: { type: Object, default: () => {} }
  },
  data() {
  data () {
    return {
      videoVisible: false,
      formData: {
@@ -146,7 +349,8 @@
        escalationName: '',
        keyPoint: 0,
        changeDay: 0,
        investigationType: 1
        investigationType: 1,
        pollutePosition: ''
      },
      fileBaseList: [],
      fileBaseListCover: [],
@@ -188,13 +392,13 @@
    }
  },
  computed: {
    uploadTermExcelUrl() {
    uploadTermExcelUrl () {
      return `${requestObj.baseUrl}/file/upload`
    }
  },
  watch: {
    pageState: {
      handler(newVal) {
      handler (newVal) {
        if (this.pageState === 'edit') {
          if (
            this.parentFormData.fileBaseList &&
@@ -226,7 +430,7 @@
      immediate: true
    }
  },
  async created() {
  async created () {
    this.getUnitList()

    console.log('oldValue', this.parentFormData)
@@ -244,10 +448,13 @@
    })
  },
  methods: {
    changeKeyPoint(data) {
    toMap () {
      this.$emit('update:isToMap', true)
    },
    changeKeyPoint (data) {
      this.$forceUpdate()
    },
    getPreviewImages(index, list) {
    getPreviewImages (index, list) {
      let startIndex = 0
      const chechList = _.cloneDeep(list)
      chechList.forEach((item, i) => {
@@ -266,22 +473,22 @@
      var remain = imgList.splice(0, startIndex)
      return start.concat(remain)
    },
    openVideo(item) {
    openVideo (item) {
      console.log('item', item)
      this.dialogImageUrl = item.url
      this.videoVisible = true
    },
    handleCancel() {
    handleCancel () {
      this.dialogImageUrl = ''
      this.videoVisible = false
    },
    changeEnumList(val) {
    changeEnumList (val) {
      if (val === 1) {
        this.formData.changeDay = 0
      }
    },
    // 获取责任单位list
    getUnitList() {
    getUnitList () {
      this.$request({
        url: '/allocation/unit',
        method: 'get'
@@ -290,7 +497,7 @@
        this.getContaminateList()
      })
    },
    getContaminateList() {
    getContaminateList () {
      this.$request({
        url: '/allocation/contaminate',
        method: 'get'
@@ -310,13 +517,13 @@
        }
      })
    },
    close() {
    close () {
      this.$nextTick(function () {
        this.$refs.ruleForm.resetFields()
      })
      this.$emit('update:visible', false)
    },
    handleSubmit(val) {
    handleSubmit (val) {
      console.log('this.formData', this.formData)
      if (this.fileBaseListCover && this.fileBaseListCover.length > 0) {
        this.fileBaseListCover.forEach(item => {
@@ -386,4 +593,10 @@
/deep/.el-checkbox__inner {
  border-radius: 50%;
}
/deep/.el-input-group__append {
  width: 60px !important;
  padding: 0;
  text-align: center;
  cursor: pointer;
}
</style>

 src/views/toCarryOutLegislativeReforms/components/workOrderInformation.vue

@@ -1,37 +1,137 @@
<template>
  <div>
    <el-dialog :title="dialogData.title" top="30px" :visible.sync="visible" width="900px" center :before-close="close">
      <div slot="title" class="titBox">
    <el-dialog
      :title="dialogData.title"
      top="30px"
      :visible.sync="visible"
      width="900px"
      center
      :before-close="close"
    >
      <div
        slot="title"
        class="titBox"
      >
        <div>{{ parentFormData.allocationNum }}</div>
        <div>{{ dialogData.title }}</div>
      </div>
      <div>
        <div v-if="dialogData.pageType !=='delay'" class="stepsList">
          <el-steps :space="200" :active="activeLeng" align-center>
            <el-step v-for="(item,index) in setepList" :key="index" :title="'' + item.createName + ' ' + item.stateName" :description="item.createTime" />
        <div
          v-if="dialogData.pageType !=='delay'"
          class="stepsList"
        >
          <el-steps
            :space="200"
            :active="activeLeng"
            align-center
          >
            <el-step
              v-for="(item,index) in setepList"
              :key="index"
              :title="'' + item.createName + ' ' + item.stateName"
              :description="item.createTime"
            />
          </el-steps>
        </div>
        <div class="inforData">
          <el-descriptions title="基本信息" :column="parseInt('4')">
            <el-descriptions-item label="上报时间" label-class-name="itemSpan">{{ parentFormData.escalationTime }}</el-descriptions-item>
            <el-descriptions-item label="责任单位" label-class-name="itemSpan">{{ unitIdFormatter }}</el-descriptions-item>
            <el-descriptions-item label="污染分类" label-class-name="itemSpan">{{ polluteTypeFormatter }}</el-descriptions-item>
            <el-descriptions-item label="整改类型" label-class-name="itemSpan">{{ dictObj.changeEnum[parentFormData.changeType] }}</el-descriptions-item>
            <el-descriptions-item label="期限天数" label-class-name="itemSpan">{{ parentFormData.changeDay }}</el-descriptions-item>
            <el-descriptions-item label="上报单位" label-class-name="itemSpan">{{ updataUnitIdFormatter }}</el-descriptions-item>
            <el-descriptions-item label="上报人" label-class-name="itemSpan">{{ parentFormData.escalationName }}</el-descriptions-item>
          <el-descriptions
            title="基本信息"
          >
            <el-descriptions-item
              label="上报时间"
              label-class-name="itemSpan"
            >
              {{ parentFormData.escalationTime }}
            </el-descriptions-item>
            <el-descriptions-item
              label="责任单位"
              label-class-name="itemSpan"
            >
              {{ unitIdFormatter }}
            </el-descriptions-item>
            <el-descriptions-item
              label="污染分类"
              label-class-name="itemSpan"
            >
              {{ polluteTypeFormatter }}
            </el-descriptions-item>
            <el-descriptions-item
              label="整改类型"
              label-class-name="itemSpan"
            >
              {{ dictObj.changeEnum[parentFormData.changeType] }}
            </el-descriptions-item>
            <el-descriptions-item
              label="期限天数"
              label-class-name="itemSpan"
            >
              {{ parentFormData.changeDay }}
            </el-descriptions-item>
            <el-descriptions-item
              label="上报单位"
              label-class-name="itemSpan"
            >
              {{ updataUnitIdFormatter }}
            </el-descriptions-item>
            <el-descriptions-item
              label="上报人"
              label-class-name="itemSpan"
            >
              {{ parentFormData.escalationName }}
            </el-descriptions-item>
            <el-descriptions-item
              label="任务分类"
              label-class-name="itemSpan"
            >
              {{ dictObj.emphasisEnum[parentFormData.keyPoint] }}
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions :column="parseInt('2')">
            <el-descriptions-item label="污染位置" label-class-name="itemSpan">{{ parentFormData.pollutePosition }}</el-descriptions-item>
            <el-descriptions-item label="任务分类" label-class-name="itemSpan">{{ dictObj.emphasisEnum[parentFormData.keyPoint]  }}</el-descriptions-item>
          <el-descriptions>
            <el-descriptions-item
              label="污染位置"
              label-class-name="itemSpan"
            >
              {{ parentFormData.pollutePosition }}
              <i
                v-if="parentFormData.latitude&&parentFormData.longitude"
                style="color:#409EFF;margin-left:10px;font-size:18px;cursor:pointer"
                class="el-icon-location-outline"
                @click="toMap"
              />
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions :column="parseInt('1')">
            <el-descriptions-item label="问题描述" label-class-name="itemSpan" :content-style="{'width': '80%'}">{{ parentFormData.problemDescribe }}</el-descriptions-item>
            <el-descriptions-item label="附件" label-class-name="itemSpan" :content-style="{'width': '80%'}">
            <el-descriptions-item
              label="问题描述"
              label-class-name="itemSpan"
              :content-style="{'width': '80%'}"
            >
              {{ parentFormData.problemDescribe }}
            </el-descriptions-item>
            <el-descriptions-item
              label="附件"
              label-class-name="itemSpan"
              :content-style="{'width': '80%'}"
            >
              <div>
                <div v-for="(file,index) in fileBaseListCover" :key="file.id+index" class="block">
                  <el-image v-if="file.fileType ===1" style="width: 100px; height: 100px" :src="file.url" :preview-src-list="getPreviewImages(file.id,fileBaseList)" :initial-index="index" />
                  <video v-else :src="file.url" style="width: 100px; height: 100px" @click="openVideo(file)">
                <div
                  v-for="(file,index) in fileBaseListCover"
                  :key="file.id+index"
                  class="block"
                >
                  <el-image
                    v-if="file.fileType ===1"
                    style="width: 100px; height: 100px"
                    :src="file.url"
                    :preview-src-list="getPreviewImages(file.id,fileBaseList)"
                    :initial-index="index"
                  />
                  <video
                    v-else
                    :src="file.url"
                    style="width: 100px; height: 100px"
                    @click="openVideo(file)"
                  >
                    您的浏览器不支持 video 标签。
                  </video>
                </div>
@@ -40,29 +140,50 @@
          </el-descriptions>
        </div>
        <!-- 整改部分操作 -->
        <div v-if="dialogData.pageType ==='work'" class="rectification">
        <div
          v-if="dialogData.pageType ==='work'"
          class="rectification"
        >
          <div>
            <el-form label-width="90px" class="demo-form-inline">
            <el-form
              label-width="90px"
              class="demo-form-inline"
            >
              <div style="display: flex;">
                <el-form-item label="是否整改:">
                  <el-radio-group v-model="workForme.isChange">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                    <el-radio :label="1">
                      是
                    </el-radio>
                    <el-radio :label="0">
                      否
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="整改人:">
                  <el-input v-model="workForme.changeName" size="mini" placeholder="请输入整改人" />
                  <el-input
                    v-model="workForme.changeName"
                    size="mini"
                    placeholder="请输入整改人"
                  />
                </el-form-item>
              </div>
              <el-form-item label="整改反馈:">
                <el-input v-model="workForme.changeDescribe" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" />
                <el-input
                  v-model="workForme.changeDescribe"
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4}"
                  placeholder="请输入内容"
                />
              </el-form-item>
              <el-row>
                <el-form-item label="附件:">
                  <uploadFile :upload-url="uploadTermExcelUrl" :sys-code="dialogData.sysCode" />
                  <uploadFile
                    :upload-url="uploadTermExcelUrl"
                    :sys-code="dialogData.sysCode"
                  />
                </el-form-item>
              </el-row>

            </el-form>
          </div>
        </div>
@@ -71,26 +192,62 @@
          <el-row class="rectificationContent">
            <el-col :span="12">
              <div class="grid-content bg-purple" />
              <el-descriptions title="整改信息" :column="parseInt('2')">
                <el-descriptions-item label="是否整改" label-class-name="itemSpan">{{ dictObj.yesOrNo[parentFormData.isChange] }}</el-descriptions-item>
                <el-descriptions-item label="整改人" label-class-name="itemSpan">{{ parentFormData.changeName }}</el-descriptions-item>
              <el-descriptions
                title="整改信息"
                :column="parseInt('2')"
              >
                <el-descriptions-item
                  label="是否整改"
                  label-class-name="itemSpan"
                >
                  {{ dictObj.yesOrNo[parentFormData.isChange] }}
                </el-descriptions-item>
                <el-descriptions-item
                  label="整改人"
                  label-class-name="itemSpan"
                >
                  {{ parentFormData.changeName }}
                </el-descriptions-item>
              </el-descriptions>
              <el-descriptions :column="parseInt('1')">
                <el-descriptions-item label="整改反馈" label-class-name="itemSpan">{{ parentFormData.changeDescribe }}</el-descriptions-item>
                <el-descriptions-item
                  label="整改反馈"
                  label-class-name="itemSpan"
                >
                  {{ parentFormData.changeDescribe }}
                </el-descriptions-item>
              </el-descriptions>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-light" />
              <el-row>
                <el-col :span="3" style="margin-top: 40px;font-size: 15px;color: #101010;">
                <el-col
                  :span="3"
                  style="margin-top: 40px;font-size: 15px;color: #101010;"
                >
                  <div class="grid-content bg-purple" />附件：
                </el-col>
                <el-col :span="21">
                  <div class="grid-content bg-purple-light" />
                  <div>
                    <div v-for="(file,index) in fileChangeListCover" :key="file.id+index" class="block">
                      <el-image v-if="file.fileType ===1" style="width: 100px; height: 100px" :src="file.url" :preview-src-list="getPreviewImages(file.id,fileChangeList)" :initial-index="index" />
                      <video v-else :src="file.url" style="width: 100px; height: 100px" @click="openVideo(file)">
                    <div
                      v-for="(file,index) in fileChangeListCover"
                      :key="file.id+index"
                      class="block"
                    >
                      <el-image
                        v-if="file.fileType ===1"
                        style="width: 100px; height: 100px"
                        :src="file.url"
                        :preview-src-list="getPreviewImages(file.id,fileChangeList)"
                        :initial-index="index"
                      />
                      <video
                        v-else
                        :src="file.url"
                        style="width: 100px; height: 100px"
                        @click="openVideo(file)"
                      >
                        您的浏览器不支持 video 标签。
                      </video>
                    </div>
@@ -105,26 +262,57 @@
          <el-row class="rectificationContent">
            <el-col :span="12">
              <div class="grid-content bg-purple" />
              <el-descriptions title="审批信息" :column="2">
                <el-descriptions-item label="考核打分" label-class-name="itemSpan">{{ parentFormData.checkScore }}</el-descriptions-item>
              <el-descriptions
                title="审批信息"
                :column="2"
              >
                <el-descriptions-item
                  label="考核打分"
                  label-class-name="itemSpan"
                >
                  {{ parentFormData.checkScore }}
                </el-descriptions-item>
              </el-descriptions>
              <el-descriptions :column="1">
                <el-descriptions-item label="理由" label-class-name="itemSpan">{{ parentFormData.checkDescribe }}</el-descriptions-item>
                <el-descriptions-item
                  label="理由"
                  label-class-name="itemSpan"
                >
                  {{ parentFormData.checkDescribe }}
                </el-descriptions-item>
              </el-descriptions>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-light" />
              <el-row>
                <el-col :span="3" style="margin-top: 40px;font-size: 15px;color: #101010;">
                <el-col
                  :span="3"
                  style="margin-top: 40px;font-size: 15px;color: #101010;"
                >
                  <div class="grid-content bg-purple" />附件：
                </el-col>
                <el-col :span="21">
                  <div class="grid-content bg-purple-light" />
                  <div>
                    <div>
                      <div v-for="(file,index) in fileApproveListCover" :key="file.id+index" class="block">
                        <el-image v-if="file.fileType ===1" style="width: 100px; height: 100px" :src="file.url" :preview-src-list="getPreviewImages(file.id,fileApproveList)" :initial-index="index" />
                        <video v-else :src="file.url" style="width: 100px; height: 100px" @click="openVideo(file)">
                      <div
                        v-for="(file,index) in fileApproveListCover"
                        :key="file.id+index"
                        class="block"
                      >
                        <el-image
                          v-if="file.fileType ===1"
                          style="width: 100px; height: 100px"
                          :src="file.url"
                          :preview-src-list="getPreviewImages(file.id,fileApproveList)"
                          :initial-index="index"
                        />
                        <video
                          v-else
                          :src="file.url"
                          style="width: 100px; height: 100px"
                          @click="openVideo(file)"
                        >
                          您的浏览器不支持 video 标签。
                        </video>
                      </div>
@@ -140,23 +328,54 @@
          <el-row class="rectificationContent">
            <el-col :span="12">
              <div class="grid-content bg-purple" />
              <el-descriptions title="延期信息" :column="1">
                <el-descriptions-item label="延期天数" label-class-name="itemSpan">{{ parentFormData.extensionNum }}</el-descriptions-item>
                <el-descriptions-item label="延期理由" label-class-name="itemSpan">{{ parentFormData.remake }}</el-descriptions-item>
              <el-descriptions
                title="延期信息"
                :column="1"
              >
                <el-descriptions-item
                  label="延期天数"
                  label-class-name="itemSpan"
                >
                  {{ parentFormData.extensionNum }}
                </el-descriptions-item>
                <el-descriptions-item
                  label="延期理由"
                  label-class-name="itemSpan"
                >
                  {{ parentFormData.remake }}
                </el-descriptions-item>
              </el-descriptions>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-light" />
              <el-row>
                <el-col :span="3" style="margin-top: 40px;font-size: 15px;color: #101010;">
                <el-col
                  :span="3"
                  style="margin-top: 40px;font-size: 15px;color: #101010;"
                >
                  <div class="grid-content bg-purple" />附件：
                </el-col>
                <el-col :span="21">
                  <div class="grid-content bg-purple-light" />
                  <div>
                    <div v-for="(file,index) in fileDelayListCover" :key="file.id+index" class="block">
                      <el-image v-if="file.fileType ===1" style="width: 100px; height: 100px" :src="file.url" :preview-src-list="getPreviewImages(file.id,fileDelayList)" :initial-index="index" />
                      <video v-else :src="file.url" style="width: 100px; height: 100px" @click="openVideo(file)">
                    <div
                      v-for="(file,index) in fileDelayListCover"
                      :key="file.id+index"
                      class="block"
                    >
                      <el-image
                        v-if="file.fileType ===1"
                        style="width: 100px; height: 100px"
                        :src="file.url"
                        :preview-src-list="getPreviewImages(file.id,fileDelayList)"
                        :initial-index="index"
                      />
                      <video
                        v-else
                        :src="file.url"
                        style="width: 100px; height: 100px"
                        @click="openVideo(file)"
                      >
                        您的浏览器不支持 video 标签。
                      </video>
                    </div>
@@ -167,47 +386,131 @@
          </el-row>
        </div>
        <!-- 审批操作 -->
        <div v-if="dialogData.pageType ==='approve'" class="examineAndApprove">
          <el-form label-width="90px" :model="rectificationFromData" class="demo-form-inline">
        <div
          v-if="dialogData.pageType ==='approve'"
          class="examineAndApprove"
        >
          <el-form
            label-width="90px"
            :model="rectificationFromData"
            class="demo-form-inline"
          >
            <el-form-item label="考核打分:">
              <el-input v-model="approveForm.checkScore" style="width: 120px;" size="mini" />
              <el-input
                v-model="approveForm.checkScore"
                style="width: 120px;"
                size="mini"
              />
            </el-form-item>
            <el-form-item label="理由:">
              <el-input v-model="approveForm.checkDescribe" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" />
              <el-input
                v-model="approveForm.checkDescribe"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="请输入内容"
              />
            </el-form-item>
            <el-form-item label="附件:">
              <uploadFile :upload-url="uploadTermExcelUrl" :sys-code="dialogData.sysCode" />
              <uploadFile
                :upload-url="uploadTermExcelUrl"
                :sys-code="dialogData.sysCode"
              />
            </el-form-item>
          </el-form>
        </div>
        <!-- 延期操作 -->
        <div v-if="dialogData.pageType ==='delay' && ( dialogData.pageState ==='approve')" class="examineAndApprove">
          <el-form label-width="90px" :model="rectificationFromData" class="demo-form-inline">
        <div
          v-if="dialogData.pageType ==='delay' && ( dialogData.pageState ==='approve')"
          class="examineAndApprove"
        >
          <el-form
            label-width="90px"
            :model="rectificationFromData"
            class="demo-form-inline"
          >
            <el-form-item label="延期天数:">
              <el-input v-model="delayForm.extensionNum" style="width: 200px;" />
              <el-input
                v-model="delayForm.extensionNum"
                style="width: 200px;"
              />
            </el-form-item>
            <el-form-item label="延期理由:">
              <el-input v-model="delayForm.remake" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" />
              <el-input
                v-model="delayForm.remake"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="请输入内容"
              />
            </el-form-item>
            <el-form-item label="附件:">
              <uploadFile :upload-url="uploadTermExcelUrl" :sys-code="dialogData.sysCode" />
              <uploadFile
                :upload-url="uploadTermExcelUrl"
                :sys-code="dialogData.sysCode"
              />
            </el-form-item>
          </el-form>
        </div>
      </div>
      <el-alert v-if="parentFormData.isInvalid===1" title="已作废" type="warning" show-icon :description="`理由：${parentFormData.invalidReason}`" :closable="false">
      </el-alert>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close()">关闭</el-button>
        <el-button v-if="dialogData.pageType ==='approve'" type="danger" @click="handleSubmit(50)">拒绝</el-button>
        <el-button v-if="dialogData.pageType ==='delay'&& dialogData.pageState ==='edit'" type="danger" @click="handleDelaySubmit(50)">拒绝</el-button>
        <el-button v-if="dialogData.pageType ==='delay'&& dialogData.pageState ==='edit'" type="primary" @click="handleDelaySubmit(40)">提交</el-button>
        <el-button v-if="dialogData.pageType !=='detail'&& dialogData.pageState ==='approve'" type="primary" @click="handleSubmit(40)">提交</el-button>
      <el-alert
        v-if="parentFormData.isInvalid===1"
        title="已作废"
        type="warning"
        show-icon
        :description="`理由：${parentFormData.invalidReason}`"
        :closable="false"
      />
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="close()">
          关闭
        </el-button>
        <el-button
          v-if="dialogData.pageType ==='approve'"
          type="danger"
          @click="handleSubmit(50)"
        >
          拒绝
        </el-button>
        <el-button
          v-if="dialogData.pageType ==='delay'&& dialogData.pageState ==='edit'"
          type="danger"
          @click="handleDelaySubmit(50)"
        >
          拒绝
        </el-button>
        <el-button
          v-if="dialogData.pageType ==='delay'&& dialogData.pageState ==='edit'"
          type="primary"
          @click="handleDelaySubmit(40)"
        >
          提交
        </el-button>
        <el-button
          v-if="dialogData.pageType !=='detail'&& dialogData.pageState ==='approve'"
          type="primary"
          @click="handleSubmit(40)"
        >
          提交
        </el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="videoVisible" width="600px" :modal-append-to-body="false" :destroy-on-close="true" @close="handleCancel">
    <el-dialog
      :visible.sync="videoVisible"
      width="600px"
      :modal-append-to-body="false"
      :destroy-on-close="true"
      @close="handleCancel"
    >
      <div style="text-align: center;">
        <video ref="video" style="width: 300px;height: 500px" :src="dialogImageUrl" controls autoplay />
        <video
          ref="video"
          style="width: 300px;height: 500px"
          :src="dialogImageUrl"
          controls
          autoplay
        />
      </div>
    </el-dialog>
  </div>
@@ -224,10 +527,11 @@
    uploadFile
  },
  props: {
    isToMap: { type: Boolean, required: true, default: false },
    dialogData: { type: Object, default: () => {} },
    visible: { type: Boolean, required: true }
  },
  data() {
  data () {
    return {
      centerDialogVisible: true,
      workForme: {
@@ -277,11 +581,11 @@
    }
  },
  computed: {
    uploadTermExcelUrl() {
    uploadTermExcelUrl () {
      return `${requestObj.baseUrl}/file/upload`
    },
    parentFormData() {
      console.log('parentFormData.approveList', this.dialogData.parentFormData)
    parentFormData () {
      console.log('parentFormData.approveList', this.dialogData)
      return this.dialogData.parentFormData
    },
    updataUnitIdFormatter: function () {
@@ -306,20 +610,22 @@
      )
      return data ? data.dataValue : ''
    },
    setepList() {
    setepList () {
      const leng = this.dialogData.parentFormData.approveList.length
      let data = _.cloneDeep(this.dialogData.parentFormData.approveList)
      console.log('setepList', this.dialogData.parentFormData.approveList)
      if (leng === 1) {
        data = [...data, ...this.setepListAdd.set1]
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.activeLeng = 1
      }
      if (leng === 2) {
        data = [...data, ...this.setepListAdd.set2]
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.activeLeng = 2
      }
      if (leng === 3) {
        data = [...data, ...this.setepListAdd.set3]
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.activeLeng = 4
      }
      console.log('datadata', data)
@@ -328,14 +634,14 @@
  },
  watch: {
    parentFormData: {
      handler(newVal) {
      handler (newVal) {
        this.searchthisFileList(newVal)
      },
      deep: true,
      immediate: true
    }
  },
  created() {
  created () {
    const name = this.$store.state.user.name
    this.workForme.changeName = name
    this.getContaminateList()
@@ -353,7 +659,10 @@
    })
  },
  methods: {
    getPreviewImages(index, list) {
    toMap () {
      this.$emit('update:isToMap', true)
    },
    getPreviewImages (index, list) {
      let startIndex = 0
      const chechList = _.cloneDeep(list)
      chechList.forEach((item, i) => {
@@ -369,16 +678,16 @@
      var remain = imgList.splice(0, startIndex)
      return start.concat(remain)
    },
    openVideo(item) {
    openVideo (item) {
      console.log('item', item)
      this.dialogImageUrl = item.url
      this.videoVisible = true
    },
    handleCancel() {
    handleCancel () {
      this.dialogImageUrl = ''
      this.videoVisible = false
    },
    searchthisFileList(newVal) {
    searchthisFileList (newVal) {
      if (newVal.fileBaseList && newVal.fileBaseList.length > 0) {
        newVal.fileBaseList.forEach(item => {
          if (item.fileType === 1) {
@@ -456,11 +765,11 @@
        })
      }
    },
    close() {
    close () {
      this.$emit('update:visible', false)
    },
    // 获取责任单位list
    getUnitList() {
    getUnitList () {
      this.$request({
        url: '/allocation/unit',
        method: 'get'
@@ -468,7 +777,7 @@
        this.unitList = res.data
      })
    },
    handleDelaySubmit(state) {
    handleDelaySubmit (state) {
      this.$request({
        url: '/allocationExtension/check',
        method: 'get',
@@ -485,7 +794,7 @@
        }
      })
    },
    handleSubmit(state) {
    handleSubmit (state) {
      // 整改
      let api = '/allocation/change'
      let data = {}
@@ -527,7 +836,7 @@
        }
      })
    },
    getContaminateList() {
    getContaminateList () {
      this.$request({
        url: '/allocation/contaminate',
        method: 'get'

 src/views/toCarryOutLegislativeReforms/reform/index.vue

@@ -1,17 +1,43 @@
<template>
  <div v-loading="loading" class="main">
  <div
    v-loading="loading"
    class="main"
  >
    <div>
      <searchBar v-if="searchType" :search-type="'reform'" @handleSearch="handleSearchBut" @handleAdd="handleOpenDialog(null, 'add')" />
      <newWorkOrder v-if="centerDialogVisible" ref="newWorkOrder" :isToMap.sync='isToMap' :parent-form-data="parentFormData" :title="title" :page-state="pageState" :visible.sync="centerDialogVisible" @handleSubmit="newHandleSubmit" />
      <searchBar
        v-if="searchType"
        :search-type="'reform'"
        @handleSearch="handleSearchBut"
        @handleAdd="handleOpenDialog(null, 'add')"
      />
      <newWorkOrder
        v-if="centerDialogVisible"
        ref="newWorkOrder"
        :is-to-map.sync="isToMap"
        :parent-form-data="parentFormData"
        :title="title"
        :page-state="pageState"
        :visible.sync="centerDialogVisible"
        @handleSubmit="newHandleSubmit"
      />
      <!-- <el-divider></el-divider> -->
      <div class="tab">
        <div class="exportBox">
          <div>查询列表</div>
          <div>
            <el-button type="primary" size="mini" @click="handleOpenDialog(null, 'add')">
            <el-button
              type="primary"
              size="mini"
              @click="handleOpenDialog(null, 'add')"
            >
              新建
            </el-button>
            <el-button :disabled="!(selectionRows.length>0)" type="info" size="mini" @click="isNowDonw">
            <el-button
              :disabled="!(selectionRows.length>0)"
              type="info"
              size="mini"
              @click="isNowDonw"
            >
              导出
            </el-button>
          </div>
@@ -20,8 +46,15 @@
        <div style="position: relative;">
          <div>
            <div v-if="sealList.length>0">
              <div v-for="(item,index) in sealList" :key="index" :style="{'height':item.styleHeight}">
                <div v-if="item.isInvalid===1" class="yingzhang">
              <div
                v-for="(item,index) in sealList"
                :key="index"
                :style="{'height':item.styleHeight}"
              >
                <div
                  v-if="item.isInvalid===1"
                  class="yingzhang"
                >
                  <div class="seal-red">
                    已作废
                  </div>
@@ -30,12 +63,28 @@
            </div>
          </div>
          <div style="position: absolute;top:0;width: 100%;">
            <el-table size="mini" :data="tableData" border style="width: 100%" :header-cell-style="{
            <el-table
              size="mini"
              :data="tableData"
              border
              style="width: 100%"
              :header-cell-style="{
                color: '#101111',
                fontSize: '16px'
              }" @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="40" align="center" />
              <el-table-column type="index" label="序号" width="60px" align="center" />
              }"
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                type="selection"
                width="40"
                align="center"
              />
              <el-table-column
                type="index"
                label="序号"
                width="60px"
                align="center"
              />
              <el-table-column align="center">
                <template slot="header">
                  <div>单号</div>
@@ -46,8 +95,20 @@
                  <div>{{ scope.row.escalationTime }}</div>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="unitId" label="责任主体" width="150px" :formatter="unitIdFormatter" />
              <el-table-column align="center" prop="polluteType" label="污染分类" width="120px" :formatter="polluteTypeFormatter" />
              <el-table-column
                align="center"
                prop="unitId"
                label="责任主体"
                width="150px"
                :formatter="unitIdFormatter"
              />
              <el-table-column
                align="center"
                prop="polluteType"
                label="污染分类"
                width="120px"
                :formatter="polluteTypeFormatter"
              />
              <el-table-column align="center">
                <template slot="header">
                  <div>整改方式</div>
@@ -55,7 +116,10 @@
                </template>
                <template slot-scope="scope">
                  <div>{{ dictObj.changeEnum[scope.row.changeType] }}</div>
                  <div v-show="scope.row.changeType && scope.row.changeType === 2" :class="[Number(scope.row.residueDay) < 0 ? errorClass : '']">
                  <div
                    v-show="scope.row.changeType && scope.row.changeType === 2"
                    :class="[Number(scope.row.residueDay) < 0 ? errorClass : '']"
                  >
                    <span v-if="Number(scope.row.residueDay) < 0">
                      延期 {{ Math.abs(scope.row.residueDay) }}天
                    </span>
@@ -63,31 +127,63 @@
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="investigationType" label="排查方式" width="100px" :formatter="investigationTypeFormatter" />
              <el-table-column align="center" prop="state" width="100px" label="流程状态">
              <el-table-column
                align="center"
                prop="investigationType"
                label="排查方式"
                width="100px"
                :formatter="investigationTypeFormatter"
              />
              <el-table-column
                align="center"
                prop="state"
                width="100px"
                label="流程状态"
              >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.state === 40" type="success">
                  <el-tag
                    v-if="scope.row.state === 40"
                    type="success"
                  >
                    {{ stateFormatter(scope.row) }}
                  </el-tag>
                  <el-tag v-if="scope.row.state === 50" type="danger">
                  <el-tag
                    v-if="scope.row.state === 50"
                    type="danger"
                  >
                    {{ stateFormatter(scope.row) }}
                  </el-tag>
                  <el-tag v-if="scope.row.state === 9" type="info">
                  <el-tag
                    v-if="scope.row.state === 9"
                    type="info"
                  >
                    {{ stateFormatter(scope.row) }}
                  </el-tag>
                  <el-tag v-if="scope.row.state === 20" type="warning">
                  <el-tag
                    v-if="scope.row.state === 20"
                    type="warning"
                  >
                    {{ stateFormatter(scope.row) }}
                  </el-tag>
                  <el-tag v-if="scope.row.state === 10" type="warning">
                  <el-tag
                    v-if="scope.row.state === 10"
                    type="warning"
                  >
                    {{ stateFormatter(scope.row) }}
                  </el-tag>
                  <el-tag v-if="scope.row.state === 30" type="warning">
                  <el-tag
                    v-if="scope.row.state === 30"
                    type="warning"
                  >
                    {{ stateFormatter(scope.row) }}
                  </el-tag>
                </template>
              </el-table-column>
              <!-- <el-table-column align="center" prop="isInvalid" label="是否作废" width="60px" :formatter="isInvalidFormatter" /> -->
              <el-table-column align="center" width="150px">
              <el-table-column
                align="center"
                width="150px"
              >
                <template slot="header">
                  <div>上报单位</div>
                  <div>上报人</div>
@@ -107,27 +203,66 @@
                  <div>{{ scope.row.updateTime }}</div>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="createTime" min-width="100px" label="操作">
              <el-table-column
                align="center"
                prop="createTime"
                min-width="100px"
                label="操作"
              >
                <template slot-scope="scope">
                  <el-button type="text" size="medium" @click="openWorkOrdinDialog(scope.row, 'detail')">
                  <el-button
                    type="text"
                    size="medium"
                    @click="openWorkOrdinDialog(scope.row, 'detail')"
                  >
                    详情
                  </el-button>
                  <el-button v-if="scope.row.isCode==='1'" type="text" size="medium" @click="openEditDialog(scope.row)">
                  <el-button
                    v-if="scope.row.isCode==='1'"
                    type="text"
                    size="medium"
                    @click="openEditDialog(scope.row)"
                  >
                    修改单位
                  </el-button>
                  <el-button v-if="scope.row.state === 9" type="text" size="medium" @click="handleOpenDialog(scope.row, 'edit')">
                  <el-button
                    v-if="scope.row.state === 9"
                    type="text"
                    size="medium"
                    @click="handleOpenDialog(scope.row, 'edit')"
                  >
                    编辑
                  </el-button>
                  <el-button v-if="scope.row.state > 30 && scope.row.isInvalid === 0" type="text" size="medium" @click="handleCancel(scope.row)">
                  <el-button
                    v-if="scope.row.state > 30 && scope.row.isInvalid === 0"
                    type="text"
                    size="medium"
                    @click="handleCancel(scope.row)"
                  >
                    作废
                  </el-button>
                  <el-button v-if="scope.row.state === 20" type="text" size="medium" @click="openWorkOrdinDialog(scope.row, 'work')">
                  <el-button
                    v-if="scope.row.state === 20"
                    type="text"
                    size="medium"
                    @click="openWorkOrdinDialog(scope.row, 'work')"
                  >
                    整改
                  </el-button>
                  <el-button v-if="scope.row.state === 30 && scope.row.isApprove === 1" type="text" size="medium" @click="openWorkOrdinDialog(scope.row, 'approve')">
                  <el-button
                    v-if="scope.row.state === 30 && scope.row.isApprove === 1"
                    type="text"
                    size="medium"
                    @click="openWorkOrdinDialog(scope.row, 'approve')"
                  >
                    审批
                  </el-button>
                  <el-button v-if="scope.row.state === 20 && scope.row.changeType === 2 &&scope.row.applyState === 0" type="text" size="medium" @click="openWorkOrdinDialog(scope.row, 'delay')">
                  <el-button
                    v-if="scope.row.state === 20 && scope.row.changeType === 2 &&scope.row.applyState === 0"
                    type="text"
                    size="medium"
                    @click="openWorkOrdinDialog(scope.row, 'delay')"
                  >
                    延期申请
                  </el-button>
                </template>
@@ -137,52 +272,119 @@
        </div>
      </div>
      <div class="pagina">
        <el-pagination background :current-page="pagination.currentPage" :page-sizes="pagination.pageSizes" :page-size="pagination.pageSize" :total="pagination.totalCount" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        <el-pagination
          background
          :current-page="pagination.currentPage"
          :page-sizes="pagination.pageSizes"
          :page-size="pagination.pageSize"
          :total="pagination.totalCount"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <workOrderInformation v-if="workOrdinDialogVisible" :dialog-data="dialogData" :visible.sync="workOrdinDialogVisible" @handeleSumit="handeleSumit" />
    <el-dialog title="作废" :visible.sync="dialogVisible" width="600px" :before-close="handleClose" center>
    <workOrderInformation
      v-if="workOrdinDialogVisible"
      :dialog-data="dialogData"
      :is-to-map.sync="isToMap"
      :visible.sync="workOrdinDialogVisible"
      @handeleSumit="handeleSumit"
    />
    <el-dialog
      title="作废"
      :visible.sync="dialogVisible"
      width="600px"
      :before-close="handleClose"
      center
    >
      <div>
        <el-form label-width="100px">
          <el-form-item label="作废理由：" style="margin-right: 30px">
            <el-input v-model="invalidReason" type="textarea" :autosize="{ minRows: 2, maxRows: 10 }" placeholder="请输入内容" />
          <el-form-item
            label="作废理由："
            style="margin-right: 30px"
          >
            <el-input
              v-model="invalidReason"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 10 }"
              placeholder="请输入内容"
            />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleInvalid">确 定</el-button>
        <el-button
          type="primary"
          @click="handleInvalid"
        >确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog v-if="dialogEditVisible" title="修改" :visible.sync="dialogEditVisible" width="800px" top="5vh" :before-close="handleClose" center>
    <el-dialog
      v-if="dialogEditVisible"
      title="修改"
      :visible.sync="dialogEditVisible"
      width="800px"
      top="5vh"
      :before-close="handleClose"
      center
    >
      <el-descriptions title="基本信息">
        <template slot="extra">
          <div>
            {{ editEscalationUnitData.allocationNum }}
          </div>
        </template>
        <el-descriptions-item label="上报时间" label-class-name="itemSpan">
        <el-descriptions-item
          label="上报时间"
          label-class-name="itemSpan"
        >
          {{ editEscalationUnitData.escalationTime }}
        </el-descriptions-item>
        <el-descriptions-item label="责任单位" label-class-name="itemSpan">
        <el-descriptions-item
          label="责任单位"
          label-class-name="itemSpan"
        >
          {{ updataUnitIdFormatter }}
        </el-descriptions-item>
        <el-descriptions-item label="污染分类" label-class-name="itemSpan">
        <el-descriptions-item
          label="污染分类"
          label-class-name="itemSpan"
        >
          {{ polluteTypeeDITFormatter }}
        </el-descriptions-item>
        <el-descriptions-item label="整改类型" label-class-name="itemSpan">
        <el-descriptions-item
          label="整改类型"
          label-class-name="itemSpan"
        >
          {{ dictObj.changeEnum[editEscalationUnitData.changeType] }}
        </el-descriptions-item>
        <el-descriptions-item label="期限天数" label-class-name="itemSpan">
        <el-descriptions-item
          label="期限天数"
          label-class-name="itemSpan"
        >
          {{ editEscalationUnitData.changeDay || 0 }} 天
        </el-descriptions-item>
        <el-descriptions-item label="上报单位" label-class-name="itemSpan">
        <el-descriptions-item
          label="上报单位"
          label-class-name="itemSpan"
        >
          {{ updataEscalationUnitIdFormatter }}
        </el-descriptions-item>
        <el-descriptions-item label="上报人" label-class-name="itemSpan">
        <el-descriptions-item
          label="上报人"
          label-class-name="itemSpan"
        >
          {{ editEscalationUnitData.escalationName }}
        </el-descriptions-item>
        <el-descriptions-item label="污染位置" label-class-name="itemSpan">
        <el-descriptions-item
          label="污染位置"
          label-class-name="itemSpan"
        >
          {{ editEscalationUnitData.pollutePosition }}
        </el-descriptions-item>
      </el-descriptions>
@@ -191,24 +393,55 @@
        <p class="editTile">
          修改操作
        </p>
        <el-form :inline="true" class="demo-form-inline">
        <el-form
          :inline="true"
          class="demo-form-inline"
        >
          <el-form-item label="责任单位:">
            <el-select v-model="formInEdit.unitId" size="small" clearable placeholder="请选择">
              <el-option v-for="item in unitList" :key="item.unitId" :label="item.unitName" :value="item.unitId" />
            <el-select
              v-model="formInEdit.unitId"
              size="small"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in unitList"
                :key="item.unitId"
                :label="item.unitName"
                :value="item.unitId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="污染分类:">
            <el-select v-model="formInEdit.polluteType" size="small" clearable placeholder="请选择">
              <el-option v-for="item in polluteList" :key="item.dataKey" :label="item.dataValue" :value="item.dataKey" />
            <el-select
              v-model="formInEdit.polluteType"
              size="small"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in polluteList"
                :key="item.dataKey"
                :label="item.dataValue"
                :value="item.dataKey"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <el-collapse>
        <el-collapse-item title="修改记录" name="1">
        <el-collapse-item
          title="修改记录"
          name="1"
        >
          <div class="block">
            <el-timeline>
              <el-timeline-item v-for="(activity, index) in operatingLog" :key="index" :color="'#0bbd87'" :timestamp="activity.createTime">
              <el-timeline-item
                v-for="(activity, index) in operatingLog"
                :key="index"
                :color="'#0bbd87'"
                :timestamp="activity.createTime"
              >
                <div v-if="activity.content">
                  操作人: {{ activity.userName }}
                </div>
@@ -224,12 +457,22 @@
        </el-collapse-item>
      </el-collapse>

      <span slot="footer" class="dialog-footer">
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleEditChange">确 定</el-button>
        <el-button
          type="primary"
          @click="handleEditChange"
        >确 定</el-button>
      </span>
    </el-dialog>
    <mapContainer :visible.sync="isToMap" v-if="isToMap"></mapContainer>
    <mapContainer
      v-if="isToMap"
      :visible.sync="isToMap"
      @addressAndLnt="getaddressAndLnt"
    />
  </div>
</template>

@@ -250,11 +493,12 @@
    workOrderInformation
  },
  // mixins: [mixins],
  data() {
  data () {
    return {
      loading: false,
      isToMap: false,
      selectionRows: [],
      position: [],
      errorClass: 'errorClass',
      searchType: 'reform',
      pagination: {
@@ -284,7 +528,9 @@
      dictObj: JSON.parse(localStorage.getItem('dictObj')),
      parentFormData: {},
      pageState: 'add',
      mapType: 'edit',
      invalidReason: '',
      address: '',
      slectRow: {},
      title: '',
      searchData: {
@@ -297,11 +543,6 @@
      },
      operatingLog: [],
      sealList: []
    }
  },
  watch: {
    isToMap(newVal, oldVal) {
      this.isToMap = newVal
    }
  },
  computed: {
@@ -327,32 +568,28 @@
      return data ? data.dataValue : ''
    }
  },
  created() {
  watch: {
    isToMap (newVal, oldVal) {
      this.isToMap = newVal
    }
  },
  created () {
    this.handleSearch({ isInvalid: 0, state: [9, 20, 30] })
    this.getUnitList()
    this.getContaminateList()
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        this.successCallback,
        this.errorCallback
      )
    } else {
      alert('该浏览器不支持获取当前位置信息')
    }
  },
  methods: {
    successCallback(position) {
      const latitude = position.coords.latitude // 纬度
      const longitude = position.coords.longitude // 经度
      console.log('经度：' + longitude)
      console.log('纬度：' + latitude)
    getaddressAndLnt (position, address) {
      if (this.mapType === 'edit') {
        this.$refs.newWorkOrder.formData.pollutePosition = address
        this.position = position
      }
    },
    errorCallback() {},
    handleSelectionChange(rows) {
    handleSelectionChange (rows) {
      console.log(rows)
      this.selectionRows = rows
    },
    isNowDonw() {
    isNowDonw () {
      this.$confirm('立即下载或者后台下载?', '提示', {
        confirmButtonText: '立即下载',
        cancelButtonText: '后台下载',
@@ -372,7 +609,7 @@
          }
        })
    },
    exportData() {
    exportData () {
      // this.dowOrgFile('交办单导出.xlsx')
      let that = this
      const CancelToken = axios.CancelToken
@@ -396,10 +633,10 @@
        params: {
          id: this.selectionRows.map(item => item.allocationId)
        },
        cancelToken: new CancelToken(function executor(c) {
        cancelToken: new CancelToken(function executor (c) {
          cancel = c
        }),
        onDownloadProgress(progress) {
        onDownloadProgress (progress) {
          console.log('onDownloadProgress', progress)
          const loaded = progress.loaded
          // progress对象中的loaded表示已经下载的数量，total表示总数量，这里计算出百分比
@@ -436,10 +673,11 @@
        })
        .catch(err => {
          clearTimeout(timer)
          console.log('导出失败', err)
          this.loading = false
        })
    },
    getOutExcel(fileName, res) {
    getOutExcel (fileName, res) {
      const blob = new Blob([res], { type: 'application/x-xls' })
      if (window.navigator.msSaveOrOpenBlob) {
        // 兼容 IE & EDGE
@@ -466,7 +704,7 @@
        this.loading = false
      }
    },
    openEditDialog(row) {
    openEditDialog (row) {
      this.editEscalationUnitData = row
      this.dialogEditVisible = true
      this.$request({
@@ -485,15 +723,15 @@
          console.log(err)
        })
    },
    handleCancel(row) {
    handleCancel (row) {
      this.dialogVisible = true
      this.slectRow = row
    },
    handleClose() {
    handleClose () {
      this.dialogVisible = false
      this.dialogEditVisible = false
    },
    handleEditChange() {
    handleEditChange () {
      if (this.formInEdit.polluteType === '' && this.formInEdit.unitId === '') {
        this.$message({
          message: '请选择后再提交',
@@ -529,7 +767,7 @@
          console.log(err)
        })
    },
    handleInvalid() {
    handleInvalid () {
      this.$request({
        url: '/allocation/invalid',
        method: 'get',
@@ -550,12 +788,13 @@
      })
    },
    // 详情
    handleOpenDialog(row, type) {
    handleOpenDialog (row, type) {
      this.pageState = type
      this.parentFormData = {}
      if (type === 'add') {
        this.title = '新建交办单'
        this.centerDialogVisible = true
        this.mapType = 'edit'
      } else {
        this.title = '编辑交办单'
        this.$request({
@@ -571,35 +810,35 @@
        })
      }
    },
    updatUnitIdFormatter(val) {
    updatUnitIdFormatter (val) {
      const data = this.unitList.find(
        item => item && item.unitId === val.escalationUnitId
      )
      return data ? data.unitName : ''
    },
    unitIdFormatter(val) {
    unitIdFormatter (val) {
      const data = this.unitList.find(
        item => item && item.unitId === val.unitId
      )
      return data ? data.unitName : ''
    },
    polluteTypeFormatter(val) {
    polluteTypeFormatter (val) {
      const data = this.polluteList.find(
        item => item && parseInt(item.dataKey) === val.polluteType
      )
      return data ? data.dataValue : ''
    },
    investigationTypeFormatter(val) {
    investigationTypeFormatter (val) {
      return this.dictObj.investigationEnum[val.investigationType]
    },
    stateFormatter(val) {
    stateFormatter (val) {
      return this.dictObj.allocationApproveEnum[val.state]
    },
    isInvalidFormatter(val) {
    isInvalidFormatter (val) {
      return this.dictObj.yesOrNo[val.isInvalid]
    },
    // 获取责任单位list
    getUnitList() {
    getUnitList () {
      this.$request({
        url: '/allocation/unit',
        method: 'get'
@@ -611,7 +850,7 @@
        }
      })
    },
    getContaminateList() {
    getContaminateList () {
      this.$request({
        url: '/allocation/contaminate',
        method: 'get'
@@ -623,11 +862,11 @@
        }
      })
    },
    handeleSumit() {
    handeleSumit () {
      this.handleSearch()
    },
    // 提交
    newHandleSubmit(obj) {
    newHandleSubmit (obj) {
      console.log(obj)
      console.log(this.parentFormData)
      let api = '/allocation/insert'
@@ -635,10 +874,18 @@
        api = '/allocation/update'
        // obj.fileBaseList = [...this.parentFormData.fileBaseList, ... obj.fileBaseList]
      }
      let latitude = ''
      let longitude = ''
      if (this.position.length > 0) {
        latitude = this.position[1]
        longitude = this.position[0]
      }
      this.$request({
        url: api,
        method: 'post',
        data: {
          'latitude': latitude,
          'longitude': longitude,
          ...obj
        }
      }).then(res => {
@@ -651,7 +898,7 @@
        }
      })
    },
    handleSearchBut(obj) {
    handleSearchBut (obj) {
      const pageSize = this.pagination.pageSize
      this.pagination = {
        currentPage: 1,
@@ -664,7 +911,7 @@
      }
      this.handleSearch(obj)
    },
    handleSearch(obj) {
    handleSearch (obj) {
      this.selectionRows = []
      if (obj) {
        this.searchData = obj
@@ -701,7 +948,7 @@
    },
    // 分页
    // 每页显示的条数
    handleSizeChange(val) {
    handleSizeChange (val) {
      // 改变每页显示的条数
      console.log('345')
      this.pagination.pageSize = val
@@ -710,14 +957,14 @@
      this.handleSearch()
    },
    // 显示第几页
    handleCurrentChange(val) {
    handleCurrentChange (val) {
      // 改变默认的页数
      console.log('123')
      this.pagination.currentPage = val
      this.handleSearch()
      // console.log(val)
    },
    openWorkOrdinDialog(row, type) {
    openWorkOrdinDialog (row, type) {
      this.$request({
        url: '/allocation/detail',
        method: 'get',
@@ -744,6 +991,9 @@
            sysCode: '1010203'
          }
        } else if (type === 'detail') {
          this.mapType = 'view'
          this.position = [res.data.longitude, res.data.latitude]
          this.address = res.data.pollutePosition
          this.dialogData = {
            title: '交办单详情',
            parentFormData: res.data,