fix:立行立改

quanyawei

2023-09-27 ea9f9a9f6dc6dc88f3916d1d25a0cb3be436d1ba

fix:立行立改

 package-lock.json

@@ -9931,8 +9931,8 @@
    },
    "lodash": {
      "version": "4.17.21",
      "resolved": "https://registry.npm.taobao.org/lodash/download/lodash-4.17.21.tgz?cache=0&sync_timestamp=1613835860585&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flodash%2Fdownload%2Flodash-4.17.21.tgz",
      "integrity": "sha1-Z5WRxWTDv/quhFTPCz3zcMPWkRw="
      "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
    },
    "lodash.debounce": {
      "version": "4.0.8",

 package.json

@@ -35,6 +35,7 @@
    "leaflet-velocity": "^1.7.0",
    "less": "^4.1.1",
    "less-loader": "^6.2.0",
    "lodash": "^4.17.21",
    "moment": "^2.29.4",
    "node-sass": "^4.14.1",
    "normalize.css": "7.0.0",

 src/assets/images/1.jpg

 src/assets/images/2.png

 src/assets/images/3.jpg

 src/assets/images/4.png

 src/components/UploadExcel/index.vue

New file
@@ -0,0 +1,249 @@
<template>
  <div>
    <el-upload
      :limit="limit"
      :action="uploadUrl"
      accept="image/*,video/*"
      :data="{sysCode}"
      :file-list="UrlList"
      :headers="{ token: token }"
      list-type="picture-card"
      :before-upload="before_upload"
      :on-change="handleImgChange"
      :on-success="handleUploadSuccess"
    >
      <i slot="default" class="el-icon-plus" />
      <div slot="file" slot-scope="{ file }">
        <img
          v-if="file.type == 1"
          class="el-upload-list__item-thumbnail"
          :src="file.url"
          alt=""
        >
        <video v-if="file.type == 2" :src="file.url" style="width: 100%">
          您的浏览器不支持 video 标签。
        </video>
        <audio
          v-if="file.type == 3"
          controls
          :src="file.url"
          style="width: 100%"
        >
          您的浏览器不支持该音频格式。
        </audio>
        <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <i class="el-icon-zoom-in" />
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleImgRemove(file)"
          >
            <i class="el-icon-delete" />
          </span>
        </span>
      </div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" width="600px" :modal-append-to-body="false" :destroy-on-close="true" @close="handleCancel">
      <div style="text-align: center;">
        <img
          v-if="dialogType == 1"
          class="el-upload-list__item-thumbnail"
          style="width: 300px;height: 500px"
          :src="dialogImageUrl"
          alt=""
        >
        <video
          v-if="dialogType == 2"
          ref="video"
          style="width: 300px;height: 500px"
          :src="dialogImageUrl"
          controls
          autoplay
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import bus from '@/Bus'
export default {
  name: 'UploadExcel',
  props: {
    uploadUrl: {
      type: String,
      required: true
    },
    sysCode: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      token: getToken(),
      limit: 9, // 限制上传数量
      dialogImageUrl: null,
      dialogVisible: false,
      UrlList: [],
      disabled: false,
      dialogType: null,
      fileBaseList: [],
      fileChangeList: []
    }
  },

  methods: {
    handleCancel(e) {
      if (this.$refs.video) {
        this.$refs.video.pause()
      }
      this.dialogImageUrl = ''
      this.dialogVisible = false
    },
    // 上传前
    before_upload(file) {
      const fileSize = file.size
      const FIVE_M = 100 * 1024 * 1024
      // 不允许上传大于2M
      if (fileSize > FIVE_M) {
        this.$message.error('最大上传1002M')
        return false
      }
      const name = file.name.substring(file.name.lastIndexOf('.') + 1)
      const nameList = ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'jpe', 'mp4', 'm2v', 'mkv']
      if (!nameList.includes(name)) {
        this.$message.error('只能上传图片和视频！')
        return false
      }
      return true
    },

    handlePictureCardPreview(file) {
      console.log('file', file)
      // const baseUrl = `${requestObj.baseUrl}/static/img/`
      this.dialogImageUrl = file.url
      console.log('this.dialogImageUrl', file)
      this.dialogType = file.type
      this.dialogVisible = true
    },
    // 图片改变
    handleImgChange(file, fileList) {
      bus.$emit('changeFileAfterList', 'change', fileList)

      this.UrlList = fileList
    },
    // 图片移除
    handleImgRemove(file, fileList) {
      fileList = this.UrlList
      const index = fileList.indexOf(file)
      fileList.splice(index, 1)
      bus.$emit('changeFileAfterList', 'detail', fileList)
    },
    // 图片上传成功
    handleUploadSuccess(response, file, fileList) {
      console.log(file)
      this.UrlList.push({
        url: file.url
      })
      bus.$emit('changeFileAfterList', 'success', fileList)
      file.type = this.matchType(file.response.data.fileName)
    },

    // 根据文件名后缀区分 文件类型
    /*
     * @param: fileName - 文件名称
     * @param: 数据返回 1) 无后缀匹配 - false
     * @param: 数据返回 2) 匹配图片 - image
     * @param: 数据返回 8) 匹配 视频 - video
     * @param: 数据返回 9) 匹配 音频 - radio
     * @param: 数据返回 10) 其他匹配项 - other
     */
    matchType(fileName) {
      // 后缀获取
      var suffix = ''
      // 获取类型结果
      var result = ''
      try {
        var flieArr = fileName.split('.')
        suffix = flieArr[flieArr.length - 1]
      } catch (err) {
        suffix = ''
      }
      // fileName无后缀返回 false
      if (!suffix) {
        result = false
        return result
      }
      // 图片格式
      var imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'jpe']
      // 进行图片匹配
      result = imglist.some(function(item) {
        return item === suffix
      })
      if (result) {
        result = '1'
        return result
      }
      // 匹配 视频
      var videolist = ['mp4', 'm2v', 'mkv']
      result = videolist.some(function(item) {
        return item === suffix
      })
      if (result) {
        result = '2'
        return result
      }
      // 匹配 音频
      var radiolist = ['mp3', 'wav', 'wmv', 'flac']
      result = radiolist.some(function(item) {
        return item === suffix
      })
      if (result) {
        result = '3'
        return result
      }
      // 其他 文件类型
      result = 'other'
      return result
    }

  }
}
</script>
<style lang="scss" scope>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
}
.avatar {
  width: 148px;
  max-height: 148px;
  display: block;
}
.avatar-video {
  width: 200px;
  max-height: 200px;
  display: block;
}
</style>

 src/router/dynamicRouter.js

@@ -196,7 +196,25 @@
  component: () => import('@/views/dailyreport/index'),
  meta: { title: '走航监测日报', icon: 'example' }
}

// 业务交办
const summaryPage = {
  path: 'toCarryOutLegislativeReforms/summaryPage',
  name: 'summaryPage',
  component: () => import('@/views/toCarryOutLegislativeReforms/summaryPage/index'),
  meta: { title: '业务汇总', icon: 'example' }
}
const reform = {
  path: 'toCarryOutLegislativeReforms/reform',
  name: 'reform',
  component: () => import('@/views/toCarryOutLegislativeReforms/reform/index'),
  meta: { title: '立行立改', icon: 'example' }
}
const delay = {
  path: 'toCarryOutLegislativeReforms/delay',
  name: 'delay',
  component: () => import('@/views/toCarryOutLegislativeReforms/delay/index'),
  meta: { title: '延期申请', icon: 'example' }
}

// 映射路由，存入对象
const ruleMapping = {
@@ -226,6 +244,9 @@
  dailyreport,
  sectionReport,
  Listdata,
  summaryPage,
  reform,
  delay
  // Equidata
}

@@ -242,6 +263,7 @@
export function routerMenus() {
  const routersMenu = JSON.parse(store.state.user.menus)
  // 路由分两块，左侧列表， 最右侧员工下拉菜单
  console.log('routersMenu',routersMenu)
  const currentRoutes = router.options.routes
  if (routersMenu.length > 0) {
    routersMenu.forEach(item => {
@@ -263,7 +285,7 @@
          if (temp !== undefined) {
            currentRoutes[currentRoutes.length - 1].children.push(temp)
          } else {
            console.log('存在菜单配置给该用户，但是代码中无该组件')
            console.log('存在菜单配置给该用户，但是代码中无该组件1')
          }
        })
      } else {

 src/utils/dic.js

New file
@@ -0,0 +1,33 @@
// 系统中封装好的axios
import requestObj from '@/utils/request'
const request = requestObj.service
export function getDict() {
  request({
    url: '/dict/list',
    method: 'get'
  })
    .then((result) => {
      // console.log('字典', result)
      console.log('字典', objToArr(result.data))
      localStorage.setItem('dict', JSON.stringify(result.data))
      localStorage.setItem('dictObj', JSON.stringify(objToArr(result.data)))
    })
    .catch((err) => {
      console.log('err', err)
    })
}
// 字典数组转obj
export function arrToObj(arr) {
  return arr.reduce((obj, item) => {
    obj[item.value] = item.name
    return obj
  }, {})
}
export function objToArr(obj) {
  const objde = {}

  for (const key in obj) {
    objde[key] = arrToObj(obj[key])
  }
  return objde
}

 src/views/login/index.vue

@@ -74,7 +74,7 @@
import { getMenus } from '@/router/dynamicRouter.js'
// import store from '@/store'
import { getToken, removeToken } from '@/utils/auth'

import { getDict } from '@/utils/dic.js'
export default {
  name: 'Login',
  data() {
@@ -142,6 +142,7 @@
            .then((res) => {
              new Promise((resolve, reject) => {
                getMenus()
                getDict()
                resolve()
              }).then(() => {
                setTimeout(() => {

 src/views/personnel/index.vue

@@ -13,7 +13,11 @@
            border
            style="width: 100%"
            :stripe="true"
          >
          ><el-table-column
             prop="unitId"
             label="责任单位"
             :formatter="unitIdFormatter"
           />
            <el-table-column
              prop="account"
              label="员工账号"
@@ -80,6 +84,16 @@
        <el-form-item label="员工名称" :label-width="formLabelWidth" prop="userName">
          <el-input v-model="form.userName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="责任单位" :label-width="formLabelWidth">
          <el-select v-model="form.unitId" placeholder="请选择" size="small" style="width: 100%;">
            <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="手机" :label-width="formLabelWidth" prop="mobile">
          <el-input v-model="form.mobile" autocomplete="off" />
        </el-form-item>
@@ -114,6 +128,16 @@
        </el-form-item>
        <el-form-item label="员工名称" :label-width="formLabelWidth" prop="userName">
          <el-input v-model="formEdit.userName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="责任单位" :label-width="formLabelWidth">
          <el-select v-model="formEdit.unitId" placeholder="请选择" size="small" style="width: 100%;">
            <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="手机" :label-width="formLabelWidth" prop="mobile">
          <el-input v-model="formEdit.mobile" autocomplete="off" />
@@ -190,6 +214,7 @@
    // 这里存放数据
    return {
      options: [],
      unitList: [],
      radio1: '',
      value: '',
      value1: '',
@@ -202,6 +227,7 @@
      dialogEdit: false,
      dialogRole: false,
      form: {
        unitId: '',
        account: '',
        password: '',
        userName: '',
@@ -212,6 +238,7 @@
      },
      formEdit: {
        id: 0,
        unitId: '',
        account: '',
        password: '',
        userName: '',
@@ -260,6 +287,7 @@
  },
  // 生命周期 - 创建完成（可以访问当前 this 实例）
  created() {
    this.getUnitList()
    this.personnelList()
    this.roleList()
  },
@@ -282,6 +310,7 @@
      this.form.account = ''
      this.form.password = ''
      this.form.userName = ''
      this.form.unitId = ''
      this.form.mobile = ''
      this.form.email = ''
      this.form.wechat = ''
@@ -314,6 +343,19 @@
        })
      })
    },
    unitIdFormatter(val) {
      const data = this.unitList.find(item => item && item.unitId === val.unitId)
      return data ? data.unitName : ''
    },
    // 获取责任单位list
    getUnitList() {
      this.$request({
        url: '/allocation/unit',
        method: 'get'
      }).then((res) => {
        this.unitList = res.data
      })
    },
    // 新建员工方法
    personnelAdd() {
      if (this.form.account && this.form.password && this.form.userName) {
@@ -324,6 +366,7 @@
            account: this.form.account,
            password: this.$encrypt(this.form.password),
            userName: this.form.userName,
            unitId: Number(this.form.unitId),
            mobile: this.form.mobile,
            email: this.form.email,
            wechat: this.form.wechat,
@@ -384,6 +427,7 @@
      this.form.id = row.id
      this.form.account = row.account
      this.form.userName = row.userName
      this.form.unitId = row.unitId
      this.form.mobile = row.mobile
      this.form.email = row.email
      this.form.wechat = row.wechat
@@ -394,6 +438,7 @@
      this.formEdit.userName = ''
      this.formEdit.mobile = ''
      this.formEdit.email = ''
      this.formEdit.unitId = ''
      this.formEdit.wechat = ''
      this.formEdit.expireTime = ''
      this.formEdit.password = ''
@@ -403,7 +448,7 @@
    // 编辑员工方法
    personnelEdit() {
      // return
      if (this.formEdit.userName !== this.form.userName || this.formEdit.password !== this.form.password || this.formEdit.mobile !== this.form.mobile || this.formEdit.wechat !== this.form.wechat || this.formEdit.email !== this.form.email || this.formEdit.expireTime !== this.form.expireTime) {
      if (this.formEdit.unitId !== this.form.unitId || this.formEdit.userName !== this.form.userName || this.formEdit.password !== this.form.password || this.formEdit.mobile !== this.form.mobile || this.formEdit.wechat !== this.form.wechat || this.formEdit.email !== this.form.email || this.formEdit.expireTime !== this.form.expireTime) {
        this.$request({
          url: '/user/update',
          method: 'post',
@@ -412,6 +457,7 @@
            password: this.formEdit.password ? this.$encrypt(this.formEdit.password) : null,
            userName: this.formEdit.userName ? this.formEdit.userName : null,
            mobile: this.formEdit.mobile ? this.formEdit.mobile : null,
            unitId: Number(this.formEdit.unitId) ? Number(this.formEdit.unitId) : null,
            email: this.formEdit.email ? this.formEdit.email : null,
            wechat: this.formEdit.wechat ? this.formEdit.wechat : null,
            expireTime: this.formEdit.expireTime ? this.formEdit.expireTime : null

 src/views/toCarryOutLegislativeReforms/components/newWorkOrder.vue

New file
@@ -0,0 +1,355 @@
<template>
  <div>
    <el-dialog :title="title" :visible.sync="visible" width="900px" center :before-close="close">
      <div>
        <el-form ref="ruleForm" :disabled="pageState==='detail'" label-width="100px" :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>
            </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>
            </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-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-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-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-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-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>
            </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-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>
          </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="fileBaseList"
                      :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" />
            </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>
    </el-dialog>
    <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
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import uploadFile from '@/components/UploadExcel/index'
import bus from '@/Bus'
import requestObj from '@/utils/request'
export default {
  components: { uploadFile },
  props: {
    title: { type: String, default: '' },
    visible: { type: Boolean, required: true },
    pageState: { type: String, required: true, default: 'add' },
    parentFormData: { type: Object, default: () => {} }
  },
  data() {
    return {
      videoVisible: false,
      formData: {
        fileBaseList: [],
        escalationName: '',
        changeDay: 0,
        investigationType: 1
      },
      fileBaseList: [],
      fileBaseListCover: [],
      sysCode: '1010201', //
      Dic: JSON.parse(localStorage.getItem('dict')),
      unitList: [],
      polluteList: [],
      dialogImageUrl: '',
      rules: {
        escalationTime: [
          { required: true, message: '请选择上报时间', trigger: 'change' }
        ],
        pollutePosition: [
          { required: true, message: '请输入污染位置', trigger: 'blur' }
        ],
        unitId: [
          { required: true, message: '请选择责任主体', trigger: 'change' }
        ],
        polluteType: [
          { required: true, message: '请选择污染分类', trigger: 'change' }
        ],
        changeType: [
          { required: true, message: '请选择整改类型', trigger: 'change' }
        ],
        changeDay: [
          { required: true, message: '请输入天数', trigger: 'blur' }
        ],
        escalationUnitId: [
          { required: true, message: '请选择上报单位', trigger: 'change' }
        ],
        investigationType: [
          { required: true, message: '请选择排查方式', trigger: 'change' }
        ],
        escalationName: [
          { required: true, message: '请输入上报人', trigger: 'blur' }
        ],
        problemDescribe: [
          { required: true, message: '请输入问题描述', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    uploadTermExcelUrl() {
      return `${requestObj.baseUrl}/file/upload`
    }
  },
  watch: {
    'pageState': {
      handler(newVal) {
        if (this.pageState === 'edit') {
          if (this.parentFormData.fileBaseList && this.parentFormData.fileBaseList.length > 0) {
            this.parentFormData.fileBaseList.forEach(item => {
              // const srcApi = item.fileType === 1 ? api + 'preview/' : api + 'preview/cover/'
              this.fileBaseList.push(`${requestObj.baseUrl}/file/preview/${item.fileId}`) // 原图
              this.fileBaseListCover.push({
                url: item.fileType === 1 ? `${requestObj.baseUrl}/file/preview/cover/${item.fileId}` : `${requestObj.baseUrl}/file/preview/${item.fileId}`,
                fileType: item.fileType,
                fileId: item.fileId,
                fileName: item.fileName
              })
            })
            console.log('fileBaseList', this.fileBaseList)
          }
        }
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    console.log('oldValue', this.parentFormData)
    if (!(JSON.stringify(this.parentFormData) === '{}')) {
      this.formData = this.parentFormData
      this.formData.polluteType = String(this.parentFormData.polluteType)
    } else {
      const name = this.$store.state.user.name
      this.formData.escalationName = name
    }

    this.getUnitList()
    this.getContaminateList()
    bus.$on('changeFileAfterList', (type, fileList) => {
      this.formData.fileBaseList = []
      if (fileList.length > 0) {
        fileList.map((item) => {
          if (item.response) {
            console.log('item.response.data', item.response.data)
            this.formData.fileBaseList.push(item.response.data)
          }
        })
      }
    })
  },
  methods: {
    openVideo(item) {
      console.log('item', item)
      this.dialogImageUrl = item.url
      this.videoVisible = true
    },
    handleCancel() {
      this.dialogImageUrl = ''
      this.videoVisible = false
    },
    changeEnumList(val) {
      if (val === 1) {
        this.formData.changeDay = 0
      }
    },
    // 获取责任单位list
    getUnitList() {
      this.$request({
        url: '/allocation/unit',
        method: 'get'
      }).then((res) => {
        this.unitList = res.data
      })
    },
    getContaminateList() {
      this.$request({
        url: '/allocation/contaminate',
        method: 'get'
      }).then((res) => {
        this.polluteList = res.data
      })
    },
    close() {
      this.$nextTick(function() {
        this.$refs.ruleForm.resetFields()
      })
      this.$emit('update:visible', false)
    },
    handleSubmit(val) {
      console.log('this.formData', this.formData)
      if (this.fileBaseListCover && this.fileBaseListCover.length > 0) {
        this.fileBaseListCover.forEach(item => {
          this.formData.fileBaseList.push({
            fileId: item.fileId,
            fileName: item.fileName
          })
        })
      }
      this.formData.state = val
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          // this.formData.fileBaseList = [...this.parentFormData.fileBaseList, this.formData.fileBaseList]
          this.$emit('handleSubmit', this.formData)
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.block {
    display: inline-block !important;
    margin-right: 10px;
}
.textBox {
    display: flex;
    justify-content: space-between;
    margin-left: 15px;
}

.el-dialog__body>div {
    border-bottom: 1px dashed rgba(187, 187, 187, 1);
}
.span{
  /deep/.el-form-item__content {

      div {
          width: 100%;
      }
  }
}

.textare {
    /deep/.el-form-item__content {
        width: 800px;

        div {
            width: 100%;
        }
    }
  }

</style>

 src/views/toCarryOutLegislativeReforms/components/queryForm.vue

New file
@@ -0,0 +1,156 @@
<template>
  <div>
    <div class="search-form">
      <el-form :inline="true" :model="formData" class="demo-form-inline">
        <el-form-item label="责任主体：">
          <el-select v-model="formData.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 v-if="searchType==='reform'" label="流程状态：">
          <el-select v-model="formData.state" size="small" clearable placeholder="请选择">
            <el-option
              v-for="item in Dic.allocationApproveEnum"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="污染分类：">
          <el-select v-model="formData.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-item label="排查方式：">
          <el-select v-model="formData.investigationType" size="small" clearable placeholder="请选择">
            <el-option
              v-for="item in Dic.investigationEnum"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="整改类型：">
          <el-select v-model="formData.changeType" placeholder="请选择" clearable size="small">
            <el-option
              v-for="item in Dic.changeEnum"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="上报时间：">
          <el-date-picker
            v-model="valueTime"
            clearable
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item v-if="searchType==='reform'" label="是否作废：">
          <el-select v-model="formData.isInvalid " placeholder="请选择" clearable size="small">
            <el-option
              v-for="item in Dic.yesOrNo"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="searchType==='delay'" label="审批状态：">
          <el-select v-model="formData.state" placeholder="请选择" clearable size="small">
            <el-option
              v-for="item in Dic.allocationExtensionApproveEnum"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="onSubmit">查询</el-button>
          <el-button v-if="searchType==='reform'" type="primary" size="small" @click="handleAdd">新建</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    searchType: { type: String, default: '' }
  },
  data() {
    return {
      formData: {},
      unitList: [],
      Dic: JSON.parse(localStorage.getItem('dict')),
      polluteList: [],
      valueTime: [],
      isReform: false
    }
  },

  created() {
    this.getUnitList()
    this.getContaminateList()
    console.log('searchType', this.searchType)
  },
  methods: {
    // 获取责任单位list
    getUnitList() {
      this.$request({
        url: '/allocation/unit',
        method: 'get'
      }).then((res) => {
        this.unitList = res.data
      })
    },
    getContaminateList() {
      this.$request({
        url: '/allocation/contaminate',
        method: 'get'
      }).then((res) => {
        this.polluteList = res.data
      })
    },
    onSubmit() {
      if (this.valueTime.length > 0) {
        this.formData.endTime = this.valueTime[1]
        this.formData.startTime = this.valueTime[0]
      }
      this.$emit('handleSearch', this.formData)
    },
    handleAdd() {
      this.$emit('handleAdd', '12122')
    }
  }
}
</script>

<style scoped lang="scss">
.search-form {
    margin: 20px;

    /deep/.el-select {
        width: 120px;
    }
}
</style>

 src/views/toCarryOutLegislativeReforms/components/workOrderInformation.vue

New file
@@ -0,0 +1,549 @@
<template>
  <div>
    <el-dialog :title="dialogData.title" :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="parentFormData.approveList.length+1" 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">{{ parentFormData.pollutePosition }}</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>
          <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%'}">
              <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="fileBaseList"
                    :initial-index="index"
                  />
                  <video v-else :src="file.url" style="width: 100px; height: 100px" @click="openVideo(file)">
                    您的浏览器不支持 video 标签。
                  </video>
                </div>
              </div>
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <!-- 整改部分操作 -->
        <div v-if="dialogData.pageType ==='work'" class="rectification">
          <div>
            <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="0">是</el-radio>
                    <el-radio :label="1">否</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="整改人:">
                  <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-form-item>
              <el-row>
                <el-form-item label="附件:">
                  <uploadFile :upload-url="uploadTermExcelUrl" :sys-code="dialogData.sysCode" />
                </el-form-item>
              </el-row>

            </el-form>
          </div>
        </div>
        <!-- 整改信息 -->
        <div v-if="dialogData.pageType ==='detail' && parentFormData.state >=30">
          <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">{{ parentFormData.changeType }}</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>
            </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;"><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="fileChangeList"
                        :initial-index="index"
                      />
                      <video v-else :src="file.url" style="width: 100px; height: 100px" @click="openVideo(file)">
                        您的浏览器不支持 video 标签。
                      </video>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
        <!-- 审批信息 -->
        <div v-if="dialogData.pageType ==='detail'&& parentFormData.state>30">
          <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>
              <el-descriptions :column="1">
                <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;"><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="fileApproveList"
                          :initial-index="index"
                        />
                        <video v-else :src="file.url" style="width: 100px; height: 100px" @click="openVideo(file)">
                          您的浏览器不支持 video 标签。
                        </video>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
        <!-- 延期信息 -->
        <div v-if="(dialogData.pageType ==='delay' && (dialogData.pageState ==='view' ||dialogData.pageState ==='edit'))">
          <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>
            </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;"><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="fileDelayList"
                        :initial-index="index"
                      />
                      <video v-else :src="file.url" style="width: 100px; height: 100px" @click="openVideo(file)">
                        您的浏览器不支持 video 标签。
                      </video>
                    </div>
                  </div></el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
        <!-- 审批操作 -->
        <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-form-item>
            <el-form-item label="理由:">
              <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" />
            </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">
            <el-form-item label="延期天数:">
              <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-form-item>
            <el-form-item label="附件:">
              <uploadFile :upload-url="uploadTermExcelUrl" :sys-code="dialogData.sysCode" />
            </el-form-item>
          </el-form>
        </div>
      </div>
      <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">
      <div style="text-align: center;">
        <video
          ref="video"
          style="width: 300px;height: 500px"
          :src="dialogImageUrl"
          controls
          autoplay
        />
      </div>
    </el-dialog>
  </div>
</template>
p
<script>
import _ from 'lodash'
import uploadFile from '@/components/UploadExcel/index'
import Bus from '@/Bus'
import requestObj from '@/utils/request'

export default {
  components: {
    uploadFile
  },
  props: {
    dialogData: { type: Object, default: () => {} },
    visible: { type: Boolean, required: true }
  },
  data() {
    return {
      centerDialogVisible: true,
      workForme: {
        isChange: '',
        changeName: '',
        changeDescribe: ''
      },
      approveForm: {
        checkScore: '',
        checkDescribe: ''
      },
      delayForm: {
        remake: '',
        extensionNum: ''
      },
      rectificationFromData: {

      },
      dialogVisibleMainGraph: false,
      hasFile: '',
      setepListAdd: {
        set1: [
          { createName: '', stateName: '整改', createTime: '' },
          { createName: '', stateName: '审批', createTime: '' },
          { createName: '', stateName: '完成', createTime: '' }
        ],
        set2: [
          { createName: '', stateName: '审批', createTime: '' },
          { createName: '', stateName: '完成', createTime: '' }
        ],
        set3: [
          { createName: '', stateName: '完成', createTime: '' }
        ]
      },
      unitList: [],
      polluteList: [],
      fileList: [],
      Dic: JSON.parse(localStorage.getItem('dict')),
      dictObj: JSON.parse(localStorage.getItem('dictObj')),
      fileBaseList: [],
      fileChangeList: [],
      fileApproveList: [],
      fileBaseListCover: [],
      fileChangeListCover: [],
      fileApproveListCover: [],
      fileDelayListCover: [],
      fileDelayList: [],
      videoVisible: false,
      dialogImageUrl: ''
    }
  },
  computed: {
    uploadTermExcelUrl() {
      return `${requestObj.baseUrl}/file/upload`
    },
    parentFormData() {
      console.log('parentFormData.approveList', this.dialogData.parentFormData)
      return this.dialogData.parentFormData
    },
    updataUnitIdFormatter: function() {
      const data = this.unitList.find(item => item && item.unitId === this.dialogData.parentFormData.escalationUnitId)
      return data ? data.unitName : ''
    },
    unitIdFormatter: function() {
      const data = this.unitList.find(item => item && item.unitId === this.dialogData.parentFormData.unitId)
      return data ? data.unitName : ''
    },
    polluteTypeFormatter: function() {
      const data = this.polluteList.find(item => item && parseInt(item.dataKey) === this.dialogData.parentFormData.polluteType)
      return data ? data.dataValue : ''
    },
    setepList() {
      const leng = this.dialogData.parentFormData.approveList.length
      let data = _.cloneDeep(this.dialogData.parentFormData.approveList)

      if (leng === 1) {
        data = [...data, ...this.setepListAdd.set1]
      }
      if (leng === 2) {
        data = [...data, ...this.setepListAdd.set2]
      }
      if (leng === 3) {
        data = [...data, ...this.setepListAdd.set3]
      }
      console.log('data', leng)
      return data
    }
  },
  watch: {
    'parentFormData': {
      handler(newVal) {
        this.searchthisFileList(newVal)
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    const name = this.$store.state.user.name
    this.workForme.changeName = name
    this.getContaminateList()
    this.getUnitList()
    Bus.$on('changeFileAfterList', (type, fileList) => {
      console.log('fileList', fileList)
      this.fileList = []
      if (fileList.length > 0) {
        fileList.map((item) => {
          if (item.response) {
            this.fileList.push(item.response.data)
          }
        })
      }
    })
  },
  methods: {
    openVideo(item) {
      console.log('item', item)
      this.dialogImageUrl = item.url
      this.videoVisible = true
    },
    handleCancel() {
      this.dialogImageUrl = ''
      this.videoVisible = false
    },
    searchthisFileList(newVal) {
      if (newVal.fileBaseList && newVal.fileBaseList.length > 0) {
        newVal.fileBaseList.forEach(item => {
          // const srcApi = item.fileType === 1 ? api + 'preview/' : api + 'preview/cover/'
          this.fileBaseList.push(`${requestObj.baseUrl}/file/preview/${item.fileId}`) // 原图
          this.fileBaseListCover.push({
            url: item.fileType === 1 ? `${requestObj.baseUrl}/file/preview/cover/${item.fileId}` : `${requestObj.baseUrl}/file/preview/${item.fileId}`,
            fileType: item.fileType,
            id: item.fileId
          })
        })
        console.log('fileBaseList', this.fileBaseList)
      }
      if (newVal.fileChangeList && newVal.fileChangeList.length > 0) {
        newVal.fileChangeList.forEach(item => {
          this.fileChangeList.push(`${requestObj.baseUrl}/file/preview/${item.fileId}`) // 原图
          this.fileChangeListCover.push({
            url: item.fileType === 1 ? `${requestObj.baseUrl}/file/preview/cover/${item.fileId}` : `${requestObj.baseUrl}/file/preview/${item.fileId}`,
            fileType: item.fileType,
            id: item.fileId
          })
        })
      }
      if (newVal.fileApproveList && newVal.fileApproveList.length > 0) {
        newVal.fileApproveList.forEach(item => {
          this.fileApproveList.push(`${requestObj.baseUrl}/file/preview/${item.fileId}`) // 原图
          this.fileApproveListCover.push({
            url: item.fileType === 1 ? `${requestObj.baseUrl}/file/preview/cover/${item.fileId}` : `${requestObj.baseUrl}/file/preview/${item.fileId}`,
            fileType: item.fileType,
            id: item.fileId
          })
        })
      }
      if (newVal.fileList && newVal.fileList.length > 0) {
        newVal.fileList.forEach(item => {
          this.fileDelayList.push(`${requestObj.baseUrl}/file/preview/${item.fileId}`) // 原图
          this.fileDelayListCover.push({
            url: item.fileType === 1 ? `${requestObj.baseUrl}/file/preview/cover/${item.fileId}` : `${requestObj.baseUrl}/file/preview/${item.fileId}`,
            fileType: item.fileType,
            id: item.fileId
          })
        })
      }
    },
    close() {
      this.$emit('update:visible', false)
    },
    // 获取责任单位list
    getUnitList() {
      this.$request({
        url: '/allocation/unit',
        method: 'get'
      }).then((res) => {
        this.unitList = res.data
      })
    },
    handleDelaySubmit(state) {
      this.$request({
        url: '/allocationExtension/check',
        method: 'get',
        params: {
          id: this.dialogData.parentFormData.id,
          state: state
        }
      }).then((res) => {
        if (res.code === 0) {
          this.$emit('update:visible', false)
          this.$emit('handeleSumit')
        } else {
          this.$message.error(res.message)
        }
      })
    },
    handleSubmit(state) {
      // 整改
      let api = '/allocation/change'
      let data = {}
      console.log('this.dialogData.pageType', this.dialogData.pageType)
      if (this.dialogData.pageType === 'work') {
        api = '/allocation/change'
        data = {
          'allocationId': this.dialogData.parentFormData.allocationId,
          ...this.workForme,
          'fileChangeList': this.fileList,
          state: 30
        }
      } else if (this.dialogData.pageType === 'approve') {
        api = '/allocation/check'
        data = {
          'allocationId': this.dialogData.parentFormData.allocationId,
          ...this.approveForm,
          'fileApproveList': this.fileList,
          state: state
        }
      } else if (this.dialogData.pageType === 'delay') {
        api = '/allocation/applyfor'
        data = {
          'allocationId': this.dialogData.parentFormData.allocationId,
          ...this.delayForm,
          'fileList': this.fileList
        }
      }
      this.$request({
        url: api,
        method: 'post',
        data: data
      }).then((res) => {
        if (res.code === 0) {
          this.$emit('update:visible', false)
          this.$emit('handeleSumit')
        } else {
          this.$message.error(res.message)
        }
      })
    },
    getContaminateList() {
      this.$request({
        url: '/allocation/contaminate',
        method: 'get'
      }).then((res) => {
        this.polluteList = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.titBox{
  position: relative;
  font-size: 18px;
  div:first-child{
    position: absolute;
    left: 10px;
  }
  div{
    display: inline-block;
  }
}
.stepsList {
  border-bottom: 1px dashed rgba(187, 187, 187, 1);
  padding-bottom: 10px;
}
.inforData{
  margin-top: 20px;
  border-bottom: 1px dashed rgba(187, 187, 187, 1);
  padding-bottom: 10px;
  font-size: 15px!important;
  color: rgba(16, 16, 16, 1)!important;
}
  /deep/.itemSpan{
    width: 70px;
    text-align: right;
    font-size: 15px;
    color: rgba(16, 16, 16, 1);
  }
  .rectification ,.examineAndApprove,.rectificationContent{
    margin-top: 20px;
    border-bottom: 1px dashed rgba(187, 187, 187, 1);
    margin-bottom: 10px;
  }
  .block {
    display: inline-block;
    margin-right: 10px;
}
</style>

 src/views/toCarryOutLegislativeReforms/delay/index.vue

New file
@@ -0,0 +1,297 @@
<template>
  <div class="main">
    <div>
      <searchBar v-if="searchType" :search-type="searchType" @handleSearch="handleSearch" @handleAdd="handleOpenDialog(null,'add')" />
      <div class="tab">
        <el-table
          :data="tableData"
          border
          max-height=" 400px"
          style="width: 100%"
          :header-cell-style="{
            color: '#101111', fontSize: '16px'
          }"
        >
          <el-table-column
            type="index"
            label="序号"
            width="100px"
            align="center"
          />
          <el-table-column
            align="center"
            prop="allocationNum"
            label="单号"
          />
          <el-table-column
            align="center"
            prop="createTime"
            label="时间"
          />
          <el-table-column
            align="center"
            prop="unitId"
            label="责任单位"
            :formatter="unitIdFormatter"
          />
          <el-table-column
            align="center"
            prop="polluteType"
            label="污染分类"
            :formatter="polluteTypeFormatter"
          />
          <el-table-column
            align="center"
            prop="changeType"
            label="整改类型"
          >
            <template slot-scope="scope">
              <p>  {{ dictObj.changeEnum[scope.row.changeType] }}</p>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="extensionNum"
            label="延期天数"
          >
            <template slot-scope="scope">
              <p>  {{ scope.row.extensionNum }}天</p>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="address"
            label="状态"
          >
            <template slot-scope="scope">
              <el-tag v-if="scope.row.state===40" type="success" size="medium ">
                {{ stateFormatter(scope.row) }}
              </el-tag>
              <el-tag v-if="scope.row.state===50" type="danger" size="medium ">
                {{ stateFormatter(scope.row) }}
              </el-tag>
              <el-tag v-if="scope.row.state===9" type="info" size="medium ">
                {{ stateFormatter(scope.row) }}
              </el-tag>
              <el-tag v-if="scope.row.state===20" type="warning" size="medium ">
                {{ stateFormatter(scope.row) }}
              </el-tag>
              <el-tag v-if="scope.row.state===10" type="warning" size="medium ">
                {{ stateFormatter(scope.row) }}
              </el-tag>
              <el-tag v-if="scope.row.state===30" type="warning" size="medium ">
                {{ stateFormatter(scope.row) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="address"
            label="上报单位上报人"
          >
            <template slot="header" slot-scope="scope">
              <p>上报单位</p>
              <p>上报人</p>
            </template>
            <template slot-scope="scope">
              <p> {{ scope.row.escalationName }}</p>
              <p> {{ updatUnitIdFormatter(scope.row) }}</p>

            </template>
          </el-table-column>
          <el-table-column
            align="center"
          >
            <template slot="header" slot-scope="scope">
              <p>操作人</p>
              <p>操作时间</p>
            </template>
            <template slot-scope="scope">
              <p>{{ scope.row.updateName }}</p>
              <p>{{ scope.row.updateTime }}</p>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="address"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button type="text" size="medium" @click="openWorkOrdinDialog(scope.row,'detail')">详情</el-button>
              <el-button v-if="scope.row.state===30" type="text" size="medium" @click="openWorkOrdinDialog(scope.row,'approve')">审批</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagina">
        <el-pagination
          background
          :current-page="pagination.currentPage"
          :page-sizes="pagination.pageSizes"
          :page-size="pagination.PageSize"
          :total="pagination.totalCount"
          layout="sizes,prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <workOrderInformation v-if="workOrdinDialogVisible" :dialog-data="dialogData" :visible.sync="workOrdinDialogVisible" @handeleSumit="handeleWorkSumbit" />
  </div>
</template>

<script>
import workOrderInformation from '@/views/toCarryOutLegislativeReforms/components/workOrderInformation'
import searchBar from '@/views/toCarryOutLegislativeReforms/components/queryForm'
export default {
  components: {
    searchBar,
    workOrderInformation
  },
  data() {
    return {
      Dic: JSON.parse(localStorage.getItem('dict')),
      dictObj: JSON.parse(localStorage.getItem('dictObj')),
      workOrdinDialogVisible: false,
      formData: {},
      tableData: [],
      polluteList: [],
      unitList: [],
      searchType: 'delay',
      pagination: {
        currentPage: 1,
        // 总条数，根据接口获取数据长度(注意：这里不能为空)
        totalCount: 0,
        // 个数选择器（可修改）
        pageSizes: [10, 20, 30, 40],
        // 默认每页显示的条数（可修改）
        pageSize: 10
      }
    }
  },
  created() {
    this.getUnitList()
    this.getContaminateList()
    this.handleSearch()
  },
  methods: {
    handeleWorkSumbit() {
      this.handleSearch()
    },
    handleSearch(obj) {
      this.$request({
        url: '/allocationExtension/page',
        method: 'post',
        data: {
          ...obj,
          'page': this.pagination
        }
      }).then((res) => {
        this.tableData = res.data.list
        this.pagination.totalCount = res.data.page.totalNum
      })
    },
    // 分页
    // 每页显示的条数
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.pagination.PageSize = val
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.pagination.currentPage = 1
    },
    // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.pagination.currentPage = val
      // console.log(val)
    },
    openWorkOrdinDialog(row, type) {
      this.$request({
        url: '/allocationExtension/detail',
        method: 'get',
        params: {
          id: row.id
        }
      }).then((res) => {
        this.parentFormData = res.data
        this.workOrdinDialogVisible = true
        if (type === 'detail') {
          this.dialogData = {
            title: '审批交办单',
            parentFormData: res.data,
            pageState: 'view',
            pageType: 'delay',
            sysCode: '1010202'
          }
        } else if (type === 'approve') {
          this.dialogData = {
            title: '延期申请审批',
            parentFormData: res.data,
            pageState: 'edit',
            pageType: 'delay',
            sysCode: '1010202'
          }
        }
      })
    },
    updatUnitIdFormatter(val) {
      const data = this.unitList.find(item => item && item.unitId === val.escalationUnitId)
      return data ? data.unitName : ''
    },
    unitIdFormatter(val) {
      const data = this.unitList.find(item => item && item.unitId === val.unitId)
      return data ? data.unitName : ''
    },
    polluteTypeFormatter(val) {
      const data = this.polluteList.find(item => item && parseInt(item.dataKey) === val.polluteType)
      return data ? data.dataValue : ''
    },
    investigationTypeFormatter(val) {
      return this.dictObj.investigationEnum[val.investigationType]
    },
    stateFormatter(val) {
      return this.dictObj.allocationApproveEnum[val.state]
    },
    isInvalidFormatter(val) {
      return this.dictObj.yesOrNo[val.isInvalid]
    },
    // 获取责任单位list
    getUnitList() {
      this.$request({
        url: '/allocation/unit',
        method: 'get'
      }).then((res) => {
        this.unitList = res.data
        console.log(' JSON.stringify(this.unitList)', this.unitList)
      })
    },
    getContaminateList() {
      this.$request({
        url: '/allocation/contaminate',
        method: 'get'
      }).then((res) => {
        this.polluteList = res.data
      })
    }
  }
}
</script>

<style scoped lang="scss">
.main{
    padding: 20px;
}
.tab {
    margin-top: 10px;
}
/deep/ .el-table__body-wrapper {
    overflow: scroll;
    position: relative;
    overflow-x: hidden;
    max-height: 400px;
}
.pagina{
    margin-top: 10px;
    text-align: right;
}
</style>

 src/views/toCarryOutLegislativeReforms/reform/index.vue

New file
@@ -0,0 +1,450 @@
<template>
  <div class="main">
    <div>
      <searchBar v-if="searchType" :search-type="'reform'" @handleSearch="handleSearch" @handleAdd="handleOpenDialog(null,'add')" />
      <newWorkOrder
        v-if="centerDialogVisible"
        ref="newWorkOrder"
        :parent-form-data="parentFormData"
        :title="title"
        :page-state="pageState"
        :visible.sync="centerDialogVisible"
        @handleSubmit="newHandleSubmit"
      />
      <div class="tab">
        <el-table
          :data="tableData"
          border
          max-height="500px"
          style="width: 100%"
          :header-cell-style="{
            color: '#101111', fontSize: '16px'
          }"
        >
          <el-table-column
            type="index"
            label="序号"
            width="100px"
            align="center"
          />
          <el-table-column
            align="center"
            prop="escalationTime"
            label="单号上报时间"
          />
          <el-table-column
            align="center"
            prop="unitId"
            label="责任主体"
            :formatter="unitIdFormatter"
          />
          <el-table-column
            align="center"
            prop="polluteType"
            label="污染分类"
            :formatter="polluteTypeFormatter"
          />
          <el-table-column
            align="center"
          >
            <template slot="header" slot-scope="scope">
              <p>整改方式</p>
              <p>剩余天数</p>
            </template>
            <template slot-scope="scope">
              <p>  {{ dictObj.changeEnum[scope.row.changeType] }}</p>
              <p v-show="scope.row.changeType && scope.row.changeType===2">  {{ scope.row.residueDay }}天</p>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="investigationType"
            label="排查方式"
            :formatter="investigationTypeFormatter"
          />
          <el-table-column
            align="center"
            prop="state"
            label="流程状态"
          >
            <template slot-scope="scope">
              <el-tag v-if="scope.row.state===40" type="success" size="medium ">
                {{ stateFormatter(scope.row) }}
              </el-tag>
              <el-tag v-if="scope.row.state===50" type="danger" size="medium ">
                {{ stateFormatter(scope.row) }}
              </el-tag>
              <el-tag v-if="scope.row.state===9" type="info" size="medium ">
                {{ stateFormatter(scope.row) }}
              </el-tag>
              <el-tag v-if="scope.row.state===20" type="warning" size="medium ">
                {{ stateFormatter(scope.row) }}
              </el-tag>
              <el-tag v-if="scope.row.state===10" type="warning" size="medium ">
                {{ stateFormatter(scope.row) }}
              </el-tag>
              <el-tag v-if="scope.row.state===30" type="warning" size="medium ">
                {{ stateFormatter(scope.row) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="isInvalid"
            label="是否作废"
            :formatter="isInvalidFormatter"
          />
          <el-table-column
            align="center"
          >
            <template slot="header" slot-scope="scope">
              <p>报单位</p>
              <p>上报人</p>
            </template>
            <template slot-scope="scope">
              <p> {{ scope.row.escalationName }}</p>
              <p> {{ updatUnitIdFormatter(scope.row) }}</p>

            </template>
          </el-table-column>
          <el-table-column
            align="center"
          >
            <template slot="header" slot-scope="scope">
              <p>操作人</p>
              <p>操作时间</p>
            </template>
            <template slot-scope="scope">
              <p>{{ scope.row.updateName }}</p>
              <p>{{ scope.row.updateTime }}</p>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="createTime"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button type="text" size="medium" @click="openWorkOrdinDialog(scope.row,'detail')">详情</el-button>
              <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>
              <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" 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>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagina">
        <el-pagination
          background
          :current-page="pagination.currentPage"
          :page-sizes="pagination.pageSizes"
          :page-size="pagination.PageSize"
          :total="pagination.totalCount"
          layout="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
    >
      <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>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleInvalid">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import searchBar from '@/views/toCarryOutLegislativeReforms/components/queryForm'
import newWorkOrder from '@/views/toCarryOutLegislativeReforms/components/newWorkOrder'
import workOrderInformation from '@/views/toCarryOutLegislativeReforms/components/workOrderInformation'
export default {
  components: {
    searchBar,
    newWorkOrder,
    workOrderInformation
  },
  data() {
    return {
      searchType: 'reform',
      pagination: {
        currentPage: 1,
        // 总条数，根据接口获取数据长度(注意：这里不能为空)
        totalCount: 0,
        // 个数选择器（可修改）
        pageSizes: [10, 20, 30, 40],
        // 默认每页显示的条数（可修改）
        pageSize: 10
      },
      formData: {},
      tableData: [
      ],
      dialogData: {
        title: '整改',
        parentFormData: {},
        pageState: 'work'
      },
      pageStats: 'add',
      workOrdinDialogVisible: false,
      centerDialogVisible: false,
      dialogVisible: false,
      unitList: [],
      polluteList: [],
      Dic: JSON.parse(localStorage.getItem('dict')),
      dictObj: JSON.parse(localStorage.getItem('dictObj')),
      parentFormData: {},
      pageState: 'add',
      invalidReason: '',
      slectRow: {},
      title: ''
    }
  },

  created() {
    this.handleSearch()
    this.getUnitList()
    this.getContaminateList()
  },
  methods: {
    handleCancel(row) {
      this.dialogVisible = true
      this.slectRow = row
    },
    handleClose() {
      this.dialogVisible = false
    },
    handleInvalid() {
      this.$request({
        url: '/allocation/invalid',
        method: 'get',
        params: {
          id: this.slectRow.allocationId,
          invalidReason: this.invalidReason
        }
      }).then((res) => {
        if (res.code === 0) {
          this.$message({
            message: '处理成功',
            type: 'success'
          })
          this.dialogVisible = false
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 详情
    handleOpenDialog(row, type) {
      this.pageState = type
      this.parentFormData = {}
      if (type === 'add') {
        this.title = '新建交办单'
        this.centerDialogVisible = true
      } else {
        this.title = '编辑交办单'
        this.$request({
          url: '/allocation/detail',
          method: 'get',
          params: {
            id: row.allocationId
          }
        }).then((res) => {
          this.parentFormData = res.data
          console.log(this.parentFormData)
          this.centerDialogVisible = true
        })
      }
    },
    updatUnitIdFormatter(val) {
      const data = this.unitList.find(item => item && item.unitId === val.escalationUnitId)
      return data ? data.unitName : ''
    },
    unitIdFormatter(val) {
      const data = this.unitList.find(item => item && item.unitId === val.unitId)
      return data ? data.unitName : ''
    },
    polluteTypeFormatter(val) {
      const data = this.polluteList.find(item => item && parseInt(item.dataKey) === val.polluteType)
      return data ? data.dataValue : ''
    },
    investigationTypeFormatter(val) {
      return this.dictObj.investigationEnum[val.investigationType]
    },
    stateFormatter(val) {
      console.log('valval', val)
      return this.dictObj.allocationApproveEnum[val.state]
    },
    isInvalidFormatter(val) {
      return this.dictObj.yesOrNo[val.isInvalid]
    },
    // 获取责任单位list
    getUnitList() {
      this.$request({
        url: '/allocation/unit',
        method: 'get'
      }).then((res) => {
        if (res.code === 0) {
          this.unitList = res.data
        } else {
          this.$message.error(res.message)
        }
      })
    },
    getContaminateList() {
      this.$request({
        url: '/allocation/contaminate',
        method: 'get'
      }).then((res) => {
        if (res.code === 0) {
          this.polluteList = res.data
        } else {
          this.$message.error(res.message)
        }
      })
    },
    handeleSumit() {
      this.handleSearch()
    },
    // 提交
    newHandleSubmit(obj) {
      console.log(obj)
      console.log(this.parentFormData)
      let api = '/allocation/insert'
      if (this.pageState !== 'add') {
        api = '/allocation/update'
        // obj.fileBaseList = [...this.parentFormData.fileBaseList, ... obj.fileBaseList]
      }
      this.$request({
        url: api,
        method: 'post',
        data: {
          ...obj
        }
      }).then((res) => {
        if (res.code === 0) {
          this.centerDialogVisible = false

          this.handleSearch()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    handleSearch(obj) {
      this.$request({
        url: '/allocation/page',
        method: 'post',
        data: {
          ...obj,
          'page': this.pagination
        }
      }).then((res) => {
        if (res.code === 0) {
          this.tableData = res.data.list
          this.pagination.totalCount = res.data.page.totalNum
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 分页
    // 每页显示的条数
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.pagination.PageSize = val
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.pagination.currentPage = 1
    },
    // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.pagination.currentPage = val
      // console.log(val)
    },
    openWorkOrdinDialog(row, type) {
      this.$request({
        url: '/allocation/detail',
        method: 'get',
        params: {
          id: row.allocationId
        }
      }).then((res) => {
        this.parentFormData = res.data
        this.workOrdinDialogVisible = true
        if (type === 'work') {
          this.dialogData = {
            title: '整改交办单',
            parentFormData: res.data,
            pageType: 'work',
            pageState: 'approve',
            sysCode: '1010202'
          }
        } else if (type === 'approve') {
          this.dialogData = {
            title: '审批交办单',
            parentFormData: res.data,
            pageType: 'approve',
            pageState: 'approve',
            sysCode: '1010203'
          }
        } else if (type === 'detail') {
          this.dialogData = {
            title: '交办单',
            parentFormData: res.data,
            pageType: 'detail'
          }
        } else if (type === 'delay') {
          this.dialogData = {
            title: '延期交办单',
            parentFormData: res.data,
            pageType: 'delay',
            pageState: 'approve',
            sysCode: '1251701'
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.main{
    padding: 20px;
}
.tab {
    margin-top: 10px;
}
// /deep/ .el-table__body-wrapper {
//     overflow: scroll;
//     position: relative;
//     overflow-x: hidden;
//     max-height: 400px;
// }
.pagina{
    margin-top: 10px;
    text-align: right;
}
</style>

 src/views/toCarryOutLegislativeReforms/summaryPage/components/pollutionClassificationEcharts.vue

New file
@@ -0,0 +1,150 @@
<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
// import echarts from 'echarts'
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
// import resize from '@/components/Echarts/mixins/resize'
export default {
  // mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '290px'
    },
    chartData: {
      type: Array,
      required: false,
      default: () => []
    }
  },
  data() {
    return {
      chart: null,
      seriesData: []
    }
  },
  watch: {
    'chartData': {
      handler(newVal) {
        console.log('newVal', newVal)
        this.seriesData = []
        this.seriesData = newVal
        this.$nextTick(() => {
          this.initChart()
        })
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions()
    },
    setOptions() {
      // function fontSize(res) {
      //     let clientWidth =
      //         window.innerWidth ||
      //         document.documentElement.clientWidth ||
      //         document.body.clientWidth
      //     if (!clientWidth) return
      //     let fontSize = 100 * (clientWidth / 1920)
      //     return res * fontSize
      // }

      this.chart.setOption(
        {
          color: ['#F56463', '#00C6FF', '#F09615', '#0079E6', '#a814ff', '#03b915'],
          legend: {
            itemHeight: 14,
            itemWidth: 14,
            icon: 'rect',
            orient: 'vertical',
            top: 'center',
            right: '5%',
            textStyle: {
              align: 'left',
              color: '#',
              verticalAlign: 'middle',
              rich: {
                name: {
                  width: 80,
                  fontSize: 16
                },
                value: {
                  width: 20,
                  align: 'right',
                  fontFamily: 'Medium',
                  fontSize: 16
                },
                rate: {
                  width: 10,
                  align: 'right',
                  fontSize: 16
                }
              }
            },
            data: this.seriesData,
            formatter: (name) => {
              if (this.seriesData.length) {
                const item = this.seriesData.filter((item) => item.name === name)[0]
                return `{name|${name}}{value| ${item.value}}`
              }
            }
          },
          tooltip: {
            trigger: 'item',
            backgroundColor: 'rgba(255,255,255,.8)', // 通过设置rgba调节背景颜色与透明度
            color: 'gray'
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: ['30%', '80%'],
              center: ['35%', '50%'],
              roseType: 'radius',
              label: {
                formatter: '{d}%'
              },
              labelLine: {
                length: 1,
                length2: 20
              },
              data: this.seriesData
            }
          ]
        },
        true
      )
      this.chart.resize()
      window.onresize = this.chart.resize
    }
  }
}
</script>


 src/views/toCarryOutLegislativeReforms/summaryPage/components/reportTypeEcharts.vue

New file
@@ -0,0 +1,148 @@
<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
// import echarts from 'echarts'
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
// import resize from '@/components/Echarts/mixins/resize'
export default {
  // mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '290px'
    },
    cylindricalityData: {
      type: Array,
      required: false,
      default: () => []
    }
  },
  data() {
    return {
      chart: null,
      seriesData: [],
      namelist: []
    }
  },
  watch: {
    'cylindricalityData': {
      handler(newVal) {
        console.log('newVal', newVal)
        this.seriesData = []
        const arr = []

        newVal.forEach(item => {
          arr.push({
            name: item.name,
            type: 'bar',
            barWidth: '40%',
            data: [item.value]
          })
          this.namelist.push(item.name)
        })
        this.seriesData = arr
        this.$nextTick(() => {
          this.initChart()
        })
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions()
    },
    setOptions() {
      // function fontSize(res) {
      //     let clientWidth =
      //         window.innerWidth ||
      //         document.documentElement.clientWidth ||
      //         document.body.clientWidth
      //     if (!clientWidth) return
      //     let fontSize = 100 * (clientWidth / 1920)
      //     return res * fontSize
      // }

      this.chart.setOption(
        {
          tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(255,255,255,.8)', // 通过设置rgba调节背景颜色与透明度
            color: 'gray',
            axisPointer: {
              type: 'line'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            data: this.namelist,
            axisTick: {
              show: false,
              alignWithLabel: true
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              color: '#989898'
            }
          }],
          yAxis: [{
            type: 'value',
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            splitLine: {
              lineStyle: {
                color: '#ebebeb'
              }
            },
            axisLabel: {
              color: '#8c8c8c'
            }
          }],
          series: this.seriesData
        },
        true
      )
      this.chart.resize()
      window.onresize = this.chart.resize
    }
  }
}
</script>


 src/views/toCarryOutLegislativeReforms/summaryPage/index.vue

New file
@@ -0,0 +1,414 @@
<template>
  <div class="main">
    <div class="timeSelect">
      <el-radio-group
        v-model="searchForm.number"
        style="margin-left:20px"
        @input="changeNumber"
      >
        <el-radio-button label="1">近1个月</el-radio-button>
        <el-radio-button label="2">近2个月</el-radio-button>
        <el-radio-button label="3">近3个月</el-radio-button>
        <el-radio-button label="6">近6个月</el-radio-button>
        <el-radio-button label="12">近12个月</el-radio-button>
      </el-radio-group>
      <el-date-picker
        v-model="timeInterval"
        el-time-picker
        type="daterange"
        value-format="yyyy-MM-dd"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="changeNumber"
      />
    </div>
    <div class="agentSummary">
      <div class="circle">
        <span>总交办单</span>
        <span>{{ responeForm.total }}</span>
      </div>
      <div class="circle">
        <span>进行中</span>
        <span>{{ responeForm.total }}</span>
      </div>
      <div class="circle">
        <span>已完成</span>
        <span>{{ responeForm.complete }}</span>
      </div>
      <div class="circle">
        <span>逾期</span>
        <span>{{ responeForm.overdue }}</span>
      </div>
    </div>
    <div class="overviewAndDetails">
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
      >
        <el-tab-pane
          label="总览"
          name="first"
        >
          <div>
            <div class="tit">
              <span>
                责任单位交办单总览
              </span>
              <el-button
                type="primary"
                plain
                size="small"
                style="float: right;"
                @click="ecxport"
              >
                导出
              </el-button>
            </div>
            <div class="tab">
              <el-table
                :data="tableData"
                border
                max-height=" 400px"
                style="width: 100%"
                :header-cell-style="{
                  background: '#99D4FF', color: '#101111', fontSize: '16px'
                }"
              >
                <el-table-column
                  align="center"
                  prop="unitName"
                  label="责任单位"
                />
                <el-table-column
                  align="center"
                  prop="total"
                  label="总工单"
                />
                <el-table-column
                  align="center"
                  prop="number"
                  label="完成数"
                />
                <el-table-column
                  align="center"
                  prop="unNumber"
                  label="未成数"
                />
                <el-table-column
                  align="center"
                  prop="rate"
                  label="完成率"
                />
                <el-table-column
                  align="center"
                  prop="deduction"
                  label="扣分"
                />
                <el-table-column
                  align="center"
                  prop="marks"
                  label="加分"
                />
                <el-table-column
                  align="center"
                  prop="totalPoints"
                  label="总得分"
                />
              </el-table>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane
          label="明细"
          name="second"
        >
          <div>
            <div>
              <p style="text-align: center;">
                责任单位：
                <el-select v-model="unitId" size="small" placeholder="请选择" @change="changeUnitId">
                  <el-option
                    v-for="item in unitList"
                    :key="item.unitId"
                    :label="item.unitName"
                    :value="item.unitId"
                  />
                </el-select>
              </p>
            </div>
            <div class="chartsTitle">
              <p>污染分类</p>
              <p>上报类型</p>
            </div>
            <div class="caets">
              <div>
                <pollutionClassificationEcharts
                  v-if="activeName === 'second'"
                  ref="leftEcharts"
                  :chart-data="chartData"
                />
              </div>
              <div>
                <reportTypeEcharts
                  v-if="activeName === 'second'"
                  ref="rightEcharts"
                  :cylindricality-data="cylindricalityData"
                />
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import pollutionClassificationEcharts from '@/views/toCarryOutLegislativeReforms/summaryPage/components/pollutionClassificationEcharts'
import reportTypeEcharts from '@/views/toCarryOutLegislativeReforms/summaryPage/components/reportTypeEcharts'
export default {
  components: {
    pollutionClassificationEcharts,
    reportTypeEcharts
  },
  data() {
    return {
      mount: '',
      timeInterval: [],
      polluteList: [],
      unitList: [],
      activeName: 'first',
      tableData: [],
      responsibleUnit: '',
      searchForm: {
        number: 1,
        startTime: '',
        endTime: ''
      },
      unitId: '',
      responeForm: {
        total: '',
        complete: '',
        unComplete: '',
        overdue: ''
      },
      chartData: [],
      cylindricalityData: []
    }
  },
  created() {
    this.getUnitList()
    this.getContaminateList()
    this.handleSearch()
  },
  methods: {
    ecxport() {
      this.$request({
        url: '/allocation/unitExel',
        method: 'get',
        responseType: 'blob',
        params: {
          startTime: this.timeInterval[0],
          endTime: this.timeInterval[1],
          number: Number(this.searchForm.number)
        }
      }).then((res) => {
        this.getOutExcel('列表数据导出.xlsx', res)
      })
    },
    getOutExcel(fileName, res) {
      const blob = new Blob([res], { type: 'application/x-xls' })
      if (window.navigator.msSaveOrOpenBlob) {
        // 兼容 IE & EDGE
        navigator.msSaveBlob(blob, fileName)
      } else {
        var link = document.createElement('a')
        // 兼容不同浏览器的URL对象
        const url = window.URL || window.webkitURL || window.moxURL
        // 创建下载链接
        link.href = url.createObjectURL(blob)
        // 命名下载名称
        link.download = fileName
        // 点击触发下载
        link.click()
        // 下载完成进行释放
        url.revokeObjectURL(link.href)
      }
    },
    unitIdFormatter(val) {
      const data = this.unitList.find(item => item && item.unitId === val.unitId)
      return data ? data.unitName : ''
    },
    changeNumber(val) {
      this.handleSearch()
    },
    handleClick(tab, event) {
      console.log(tab)
    },
    changeUnitId() {
      this.$request({
        url: '/allocation/selectUnitView',
        method: 'get',
        params: {
          startTime: this.timeInterval[0],
          endTime: this.timeInterval[1],
          number: Number(this.searchForm.number),
          unitId: this.unitId
        }
      }).then((res) => {
        if (res.code === 0) {
          this.chartData = res.data.polluteType
          this.cylindricalityData = res.data.escalationType
        } else {
          this.$message.error(res.message)
        }
      })
    },
    handleSearch() {
      this.$request({
        url: '/allocation/selectUnitView',
        method: 'get',
        params: {
          startTime: this.timeInterval[0],
          endTime: this.timeInterval[1],
          number: Number(this.searchForm.number)
        }
      }).then((res) => {
        if (res.code === 0) {
          this.responeForm = res.data
          this.tableData = res.data.unitView
          this.chartData = res.data.polluteType
          this.cylindricalityData = res.data.escalationType
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 获取责任单位list
    getUnitList() {
      this.$request({
        url: '/allocation/unit',
        method: 'get'
      }).then((res) => {
        this.unitList = res.data
        console.log(' JSON.stringify(this.unitList)', this.unitList)
      })
    },
    getContaminateList() {
      this.$request({
        url: '/allocation/contaminate',
        method: 'get'
      }).then((res) => {
        this.polluteList = res.data
      })
    }
  }
}
</script>

<style scoped lang="scss">
$red:  url('~@/assets/images/1.jpg') ;
$orange:url('~@/assets/images/2.png');
$yellow:url('~@/assets/images/3.jpg');
$green:url('~@/assets/images/4.png');
$bgcolorlist: $red $orange $yellow $green;

.main {
  background: #bbbbbb;
  min-height: 800px;
  padding: 15px 10px;
  overflow: scroll;

  .timeSelect {
    width: 100%;
    height: 80px;
    line-height: 80px;
    background-color: rgba(255, 255, 255, 1);
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
  }

  .agentSummary {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 195px;
    background-color: rgba(255, 255, 255, 1);
    margin-top: 20px;

    @for $i from 1 to length($bgcolorlist) + 1 {
      div:nth-child(#{$i}) {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        background-image: nth($bgcolorlist, $i);
        // background-image: radial-gradient(ellipse farthest-side at bottom right, rgba(153, 212, 255, 1), 50%, transparent 50%, transparent),
        //     radial-gradient(ellipse farthest-side at top right, rgba(153, 212, 255, 1), 30%, transparent 30%, transparent);
      }
    }

    .circle {
      box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
      border-radius: 5px;
      width: 200px;
      height: 90px;
      align-items: center;
      padding-top: 20px;

      span {
        margin: 10px 20px;
        display: block;
        color: rgba(255, 255, 255, 1);
        font-size: 20px;
        font-weight: 700;
      }
    }
  }

  .overviewAndDetails {
    height: 550px;
    margin-top: 20px;
    background-color: rgba(255, 255, 255, 1);
    padding: 15px;

    .tit {
      width: 100%;
      display: inline-block;
      color: rgba(16, 16, 16, 1);
      font-size: 24px;
      text-align: center;
    }

    .tab {
      margin-top: 10px;
    }
    .caets {
      width: 100%;

      div {
        display: inline-block;
        margin-top: 10px;
        width: 49%;
        height: 200px;
      }

      div:nth-child(1) {
        border-right: 1px dashed rgba(221, 221, 221, 1);
      }
    }

    .chartsTitle {
      width: 100%;

      p {
        display: inline-block;
        width: 49%;
        text-align: center;
        font-size: 24px;
        font-weight: 700;
      }
    }
  }
}
</style>