From ea9f9a9f6dc6dc88f3916d1d25a0cb3be436d1ba Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Wed, 27 Sep 2023 19:40:24 +0800
Subject: [PATCH] fix:立行立改

---
 src/views/toCarryOutLegislativeReforms/components/queryForm.vue                                  |  156 +++
 package-lock.json                                                                                |    4 
 src/assets/images/3.jpg                                                                          |    0 
 src/utils/dic.js                                                                                 |   33 
 src/views/login/index.vue                                                                        |    3 
 src/router/dynamicRouter.js                                                                      |   26 
 src/views/toCarryOutLegislativeReforms/reform/index.vue                                          |  450 +++++++++
 src/views/toCarryOutLegislativeReforms/components/newWorkOrder.vue                               |  355 +++++++
 src/views/personnel/index.vue                                                                    |   50 
 src/views/toCarryOutLegislativeReforms/components/workOrderInformation.vue                       |  549 +++++++++++
 src/views/toCarryOutLegislativeReforms/summaryPage/index.vue                                     |  414 ++++++++
 src/views/toCarryOutLegislativeReforms/summaryPage/components/pollutionClassificationEcharts.vue |  150 +++
 src/components/UploadExcel/index.vue                                                             |  249 +++++
 src/assets/images/1.jpg                                                                          |    0 
 src/views/toCarryOutLegislativeReforms/summaryPage/components/reportTypeEcharts.vue              |  148 +++
 package.json                                                                                     |    1 
 src/views/toCarryOutLegislativeReforms/delay/index.vue                                           |  297 ++++++
 src/assets/images/4.png                                                                          |    0 
 src/assets/images/2.png                                                                          |    0 
 19 files changed, 2,878 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 49e55c3..a62ed5f 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 0039fd1..2d6487c 100644
--- a/package.json
+++ b/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",
diff --git a/src/assets/images/1.jpg b/src/assets/images/1.jpg
new file mode 100644
index 0000000..44ecbf5
--- /dev/null
+++ b/src/assets/images/1.jpg
Binary files differ
diff --git a/src/assets/images/2.png b/src/assets/images/2.png
new file mode 100644
index 0000000..cae32e5
--- /dev/null
+++ b/src/assets/images/2.png
Binary files differ
diff --git a/src/assets/images/3.jpg b/src/assets/images/3.jpg
new file mode 100644
index 0000000..c97f4b2
--- /dev/null
+++ b/src/assets/images/3.jpg
Binary files differ
diff --git a/src/assets/images/4.png b/src/assets/images/4.png
new file mode 100644
index 0000000..9a72bef
--- /dev/null
+++ b/src/assets/images/4.png
Binary files differ
diff --git a/src/components/UploadExcel/index.vue b/src/components/UploadExcel/index.vue
new file mode 100644
index 0000000..39f111c
--- /dev/null
+++ b/src/components/UploadExcel/index.vue
@@ -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>
diff --git a/src/router/dynamicRouter.js b/src/router/dynamicRouter.js
index 1246779..5358aeb 100644
--- a/src/router/dynamicRouter.js
+++ b/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 {
diff --git a/src/utils/dic.js b/src/utils/dic.js
new file mode 100644
index 0000000..da381ed
--- /dev/null
+++ b/src/utils/dic.js
@@ -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
+}
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index ea9242d..e9b6b3a 100644
--- a/src/views/login/index.vue
+++ b/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(() => {
diff --git a/src/views/personnel/index.vue b/src/views/personnel/index.vue
index bb5aa50..8164ed6 100644
--- a/src/views/personnel/index.vue
+++ b/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
diff --git a/src/views/toCarryOutLegislativeReforms/components/newWorkOrder.vue b/src/views/toCarryOutLegislativeReforms/components/newWorkOrder.vue
new file mode 100644
index 0000000..e8784e7
--- /dev/null
+++ b/src/views/toCarryOutLegislativeReforms/components/newWorkOrder.vue
@@ -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>
diff --git a/src/views/toCarryOutLegislativeReforms/components/queryForm.vue b/src/views/toCarryOutLegislativeReforms/components/queryForm.vue
new file mode 100644
index 0000000..2e8e7df
--- /dev/null
+++ b/src/views/toCarryOutLegislativeReforms/components/queryForm.vue
@@ -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>
diff --git a/src/views/toCarryOutLegislativeReforms/components/workOrderInformation.vue b/src/views/toCarryOutLegislativeReforms/components/workOrderInformation.vue
new file mode 100644
index 0000000..78f1045
--- /dev/null
+++ b/src/views/toCarryOutLegislativeReforms/components/workOrderInformation.vue
@@ -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>
diff --git a/src/views/toCarryOutLegislativeReforms/delay/index.vue b/src/views/toCarryOutLegislativeReforms/delay/index.vue
new file mode 100644
index 0000000..20c511f
--- /dev/null
+++ b/src/views/toCarryOutLegislativeReforms/delay/index.vue
@@ -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>
diff --git a/src/views/toCarryOutLegislativeReforms/reform/index.vue b/src/views/toCarryOutLegislativeReforms/reform/index.vue
new file mode 100644
index 0000000..9b1cc60
--- /dev/null
+++ b/src/views/toCarryOutLegislativeReforms/reform/index.vue
@@ -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>
diff --git a/src/views/toCarryOutLegislativeReforms/summaryPage/components/pollutionClassificationEcharts.vue b/src/views/toCarryOutLegislativeReforms/summaryPage/components/pollutionClassificationEcharts.vue
new file mode 100644
index 0000000..a44c3d4
--- /dev/null
+++ b/src/views/toCarryOutLegislativeReforms/summaryPage/components/pollutionClassificationEcharts.vue
@@ -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>
+
diff --git a/src/views/toCarryOutLegislativeReforms/summaryPage/components/reportTypeEcharts.vue b/src/views/toCarryOutLegislativeReforms/summaryPage/components/reportTypeEcharts.vue
new file mode 100644
index 0000000..388a22f
--- /dev/null
+++ b/src/views/toCarryOutLegislativeReforms/summaryPage/components/reportTypeEcharts.vue
@@ -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>
+
diff --git a/src/views/toCarryOutLegislativeReforms/summaryPage/index.vue b/src/views/toCarryOutLegislativeReforms/summaryPage/index.vue
new file mode 100644
index 0000000..2148833
--- /dev/null
+++ b/src/views/toCarryOutLegislativeReforms/summaryPage/index.vue
@@ -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>

--
Gitblit v1.8.0