1

src/assets/styles/style.scss

@@ -1,7 +1,8 @@
+.flex{display: flex;}
 .flexc{display: flex;align-items: center;}
 .flexcc{display: flex;align-items: center;justify-content: center;}
 .flex1{flex: 1;}
 .flex0{flex: 0 0 auto;}
 .plr15{padding: 0 15px;}
 .mt22{margin-top: 22px;}
-.pt7{padding-top: 7px;}
+.pt7{padding-top: 7px;}

src/components/dragFileUpload/index.vue

@@ -0,0 +1,268 @@
+<template>
+  <div class="upload-file">
+    <el-upload
+      class="upload-demo"
+      drag
+      action="https://jsonplaceholder.typicode.com/posts/"
+      multiple
+      v-if="!disabled"
+      >
+      <img src="@/assets/images/project/upload.png" class="imgs"/>
+      <!-- <i class="el-icon-upload"></i> -->
+      <div class="el-upload__text">拖拽文件到此处或点击上传</div>
+      <div class="el-upload__tip" >支持格式：PDF,DOC,JPG,PNG.ZIP(单个文件≤50MB)</div>
+    </el-upload>
+
+    <!-- 文件列表 -->
+    <!-- <transition-group ref="uploadFileList" class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
+      <li :key="file.url" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
+        <el-link :href="`${baseUrl}${file.url}`" :underline="false" target="_blank">
+          <div class="files">
+            <img  src="@/assets/images/project/file.png"/>
+            {{ getFileName(file.name) }}
+          </div>
+          <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
+        </el-link>
+        <div class="ele-upload-list__item-content-action">
+          <el-link :underline="false" @click="handleDelete(index)" type="danger" v-if="!disabled">删除</el-link>
+        </div>
+      </li>
+    </transition-group> -->
+  </div>
+</template>
+
+<script>
+import { getToken } from "@/utils/auth"
+import Sortable from 'sortablejs'
+
+export default {
+  name: "FileUpload",
+  props: {
+    // 值
+    value: [String, Object, Array],
+    // 上传接口地址
+    action: {
+      type: String,
+      default: "/common/upload"
+    },
+    // 上传携带的参数
+    data: {
+      type: Object
+    },
+    // 数量限制
+    limit: {
+      type: Number,
+      default: 5
+    },
+    // 大小限制(MB)
+    fileSize: {
+      type: Number,
+      default: 5
+    },
+    // 文件类型, 例如['png', 'jpg', 'jpeg']
+    fileType: {
+      type: Array,
+      default: () => ["doc", "docx", "xls", "xlsx", "ppt", "pptx", "txt", "pdf"]
+    },
+    // 是否显示提示
+    isShowTip: {
+      type: Boolean,
+      default: true
+    },
+    // 禁用组件（仅查看文件）
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // 拖动排序
+    drag: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      number: 0,
+      uploadList: [],
+      baseUrl: process.env.VUE_APP_BASE_API,
+      uploadFileUrl: process.env.VUE_APP_BASE_API + this.action, // 上传文件服务器地址
+      headers: {
+        Authorization: "Bearer " + getToken(),
+      },
+      fileLists: [],
+      fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
+    }
+  },
+  mounted() {
+    if (this.drag && !this.disabled) {
+      this.$nextTick(() => {
+        const element = this.$refs.uploadFileList?.$el || this.$refs.uploadFileList
+        Sortable.create(element, {
+          ghostClass: 'file-upload-darg',
+          onEnd: (evt) => {
+            const movedItem = this.fileList.splice(evt.oldIndex, 1)[0]
+            this.fileList.splice(evt.newIndex, 0, movedItem)
+            this.$emit("input", this.listToString(this.fileList))
+          }
+        })
+      })
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        if (val) {
+          let temp = 1
+          // 首先将值转为数组
+          const list = Array.isArray(val) ? val : this.value.split(',')
+          // 然后将数组转为对象数组
+          this.fileList = list.map(item => {
+            if (typeof item === "string") {
+              item = { name: item, url: item }
+            }
+            item.uid = item.uid || new Date().getTime() + temp++
+            return item
+          })
+        } else {
+          this.fileList = []
+          return []
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  computed: {
+    // 是否显示提示
+    showTip() {
+      return this.isShowTip && (this.fileType || this.fileSize)
+    },
+  },
+  methods: {
+    // 上传前校检格式和大小
+    handleBeforeUpload(file) {
+      // 校检文件类型
+      if (this.fileType) {
+        const fileName = file.name.split('.')
+        const fileExt = fileName[fileName.length - 1]
+        const isTypeOk = this.fileType.indexOf(fileExt) >= 0
+        if (!isTypeOk) {
+          this.$modal.msgError(`文件格式不正确，请上传${this.fileType.join("/")}格式文件!`)
+          return false
+        }
+      }
+      // 校检文件名是否包含特殊字符
+      if (file.name.includes(',')) {
+        this.$modal.msgError('文件名不正确，不能包含英文逗号!')
+        return false
+      }
+      // 校检文件大小
+      if (this.fileSize) {
+        const isLt = file.size / 1024 / 1024 < this.fileSize
+        if (!isLt) {
+          this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`)
+          return false
+        }
+      }
+      this.$modal.loading("正在上传文件，请稍候...")
+      this.number++
+      return true
+    },
+    // 文件个数超出
+    handleExceed() {
+      this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`)
+    },
+    // 上传失败
+    handleUploadError(err) {
+      this.$modal.msgError("上传文件失败，请重试")
+      this.$modal.closeLoading()
+    },
+    // 上传成功回调
+    handleUploadSuccess(res, file) {
+      if (res.code === 200) {
+        this.uploadList.push({ name: res.fileName, url: res.fileName })
+        this.uploadedSuccessfully()
+      } else {
+        this.number--
+        this.$modal.closeLoading()
+        this.$modal.msgError(res.msg)
+        this.$refs.fileUpload.handleRemove(file)
+        this.uploadedSuccessfully()
+      }
+    },
+    // 删除文件
+    handleDelete(index) {
+      this.fileList.splice(index, 1)
+      this.$emit("input", this.listToString(this.fileList))
+    },
+    // 上传结束处理
+    uploadedSuccessfully() {
+      if (this.number > 0 && this.uploadList.length === this.number) {
+        this.fileList = this.fileList.concat(this.uploadList)
+        this.uploadList = []
+        this.number = 0
+        this.$emit("input", this.listToString(this.fileList))
+        this.$modal.closeLoading()
+      }
+    },
+    // 获取文件名称
+    getFileName(name) {
+      // 如果是url那么取最后的名字 如果不是直接返回
+      if (name.lastIndexOf("/") > -1) {
+        return name.slice(name.lastIndexOf("/") + 1)
+      } else {
+        return name
+      }
+    },
+    // 对象转成指定字符串分隔
+    listToString(list, separator) {
+      let strs = ""
+      separator = separator || ","
+      for (let i in list) {
+        strs += list[i].url + separator
+      }
+      return strs != '' ? strs.substr(0, strs.length - 1) : ''
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.file-upload-darg {
+  opacity: 0.5;
+  background: #c8ebfb;
+}
+.upload-file-uploader {
+  margin-bottom: 5px;
+}
+.upload-file-list .el-upload-list__item {
+  border: 1px solid #e4e7ed;
+  line-height: 2;
+  margin-bottom: 10px;
+  position: relative;
+}
+.upload-file-list .ele-upload-list__item-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: inherit;
+}
+.ele-upload-list__item-content-action .el-link {
+  margin-right: 10px;
+}
+::v-deep{
+  .el-upload{width: 100%;}
+  .el-upload-dragger{width: 100%;height: 100px;background: #F6FAFF;
+  border-radius: 4px;
+  border: 1px solid #DADADA;display: flex;flex-direction: column;align-items: center;justify-content: center;}
+}
+
+.imgs{width: 30px;height: 21px;margin-bottom: 4px;}
+.el-upload__text{font-size: 14px;color: #666666;}
+.el-upload__tip{font-size: 12px;color: #AAAAAA;}
+.files{
+  img{width: 14px;height: 12px;margin-right: 10px;font-weight: 500;
+font-size: 14px;
+color: #222838;}
+}
+</style>

src/components/projectPagination/index.vue

@@ -0,0 +1,113 @@
+<template>
+  <div :class="{'hidden':hidden}" class="pagination-container">
+    <el-pagination
+      :background="background"
+      :current-page.sync="currentPage"
+      :page-size.sync="pageSize"
+      :layout="layout"
+      :page-sizes="pageSizes"
+      :pager-count="pagerCount"
+      :total="total"
+      v-bind="$attrs"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+
+<script>
+import { scrollTo } from '@/utils/scroll-to'
+
+export default {
+  name: 'Pagination',
+  props: {
+    total: {
+      required: true,
+      type: Number
+    },
+    page: {
+      type: Number,
+      default: 1
+    },
+    limit: {
+      type: Number,
+      default: 20
+    },
+    pageSizes: {
+      type: Array,
+      default() {
+        return [5, 10, 20, 30]
+      }
+    },
+    // 移动端页码按钮的数量端默认值5
+    pagerCount: {
+      type: Number,
+      default: document.body.clientWidth < 992 ? 5 : 7
+    },
+    layout: {
+      type: String,
+      default: 'total, sizes, prev, pager, next, jumper'
+    },
+    background: {
+      type: Boolean,
+      default: true
+    },
+    autoScroll: {
+      type: Boolean,
+      default: true
+    },
+    hidden: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  computed: {
+    currentPage: {
+      get() {
+        return this.page
+      },
+      set(val) {
+        this.$emit('update:page', val)
+      }
+    },
+    pageSize: {
+      get() {
+        return this.limit
+      },
+      set(val) {
+        this.$emit('update:limit', val)
+      }
+    }
+  },
+  methods: {
+    handleSizeChange(val) {
+      if (this.currentPage * val > this.total) {
+        this.currentPage = 1
+      }
+      this.$emit('pagination', { page: this.currentPage, limit: val })
+      if (this.autoScroll) {
+        scrollTo(0, 800)
+      }
+    },
+    handleCurrentChange(val) {
+      this.$emit('pagination', { page: val, limit: this.pageSize })
+      if (this.autoScroll) {
+        scrollTo(0, 800)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.pagination-container {
+  background: #fff;
+}
+.pagination-container.hidden {
+  display: none;
+}
+</style>

src/main.js

@@ -22,12 +22,14 @@ import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels,
 // 分页组件
 import Pagination from "@/components/Pagination"
 import Paginations from "@/components/Paginations"
+import projectPagination from "@/components/projectPagination"
 // 自定义表格工具组件
 import RightToolbar from "@/components/RightToolbar"
 // 富文本组件
 import Editor from "@/components/Editor"
 // 文件上传组件
 import FileUpload from "@/components/FileUpload"
+import dragFileUpload from "@/components/dragFileUpload"
 // 图片上传组件
 import ImageUpload from "@/components/ImageUpload"
 // 图片预览组件
@@ -55,6 +57,8 @@ Vue.component('Paginations', Paginations)
 Vue.component('RightToolbar', RightToolbar)
 Vue.component('Editor', Editor)
 Vue.component('FileUpload', FileUpload)
+Vue.component('dragFileUpload', dragFileUpload)
+Vue.component('projectPagination', projectPagination)
 Vue.component('ImageUpload', ImageUpload)
 Vue.component('ImagePreview', ImagePreview)
 

src/views/project/add.vue

@@ -22,7 +22,7 @@
                 <div slot="label" class="tab flexc">
                   <img class="tabimg" v-if="activeName=='first'" src="@/assets/images/project/taba_.png"/>
                   <img class="tabimg" v-else src="@/assets/images/project/taba.png"/>
-                  <span>签约环节(6)
+                  <span>签约环节
                   </span>
                 </div>
                 <first-info-form ref="firstInfo" :info="info"></first-info-form>
@@ -31,7 +31,7 @@
                 <div slot="label" class="tab flexc">
                   <img class="tabimg" v-if="activeName=='second'" src="@/assets/images/project/tabb_.png"/>
                   <img class="tabimg" v-else src="@/assets/images/project/tabb.png"/>
-                  <span>开工环节(2)
+                  <span>开工环节
                   </span>
                 </div>
                 <second-info-form ref="secondInfo" :info="info"></second-info-form>
@@ -40,7 +40,7 @@
                 <div slot="label" class="tab flexc">
                   <img class="tabcimg" v-if="activeName=='third'" src="@/assets/images/project/tabc_.png"/>
                   <img class="tabcimg" v-else src="@/assets/images/project/tabc.png"/>
-                  <span>建设环节(5)
+                  <span>建设环节
                   </span>
                 </div>
                 <third-info-form ref="thirdInfo" :info="info"></third-info-form>
@@ -49,7 +49,7 @@
                 <div slot="label" class="tab flexc">
                   <img class="tabdimg" v-if="activeName=='fourth'" src="@/assets/images/project/tabd_.png"/>
                   <img class="tabdimg" v-else src="@/assets/images/project/tabd.png"/>
-                  <span>投产环节(2)
+                  <span>投产环节
                   </span>
                 </div>
                 <fourth-info-form ref="fourthInfo" :info="info"></fourth-info-form>
@@ -91,7 +91,7 @@
           {tit:'投产',desc:[{tit:'投产信息'},{tit:'附件上传'}]},
           {tit:'完成',desc:[{tit:'提交'},{tit:'审核'}]},
         ],
-        activeName:'first',
+        activeName:'third',
         // 表详细信息
         info: {}
       }
@@ -155,7 +155,7 @@ background: #E6E6E6;}
   .tabimg{width: 14px;height: 14px;margin-right: 8px;}
   .tabcimg{width: 13px;height: 13px;margin-right: 9px;}
   .tabdimg{width: 14px;height: 15px;margin-right: 8px;}
-  .btns{height: 45px;border-bottom: 2px solid #dfe4ed;box-sizing: border-box;position: absolute;right: 0;top: 0;
+  .btns{height: 45px;box-sizing: border-box;position: absolute;right: 0;top: 0;
   }
 }
 </style>

src/views/project/boxlist.vue

@@ -0,0 +1,193 @@
+<template>
+  <div>
+    <block v-if="type=='xmgl'">
+      <div class="boxlist" v-for="ite in 5">
+        <div class="ltop flex yqtop">
+            <div class="check">
+              <img src="@/assets/images/project/check.png"/>
+              <!-- <img src="@/assets/images/project/ncheck.png"/> -->
+            </div>
+           <div style="display: flex;flex-wrap: wrap;align-items: center;">
+             <div class="tit">智能装备制造项目</div>
+             <div class="txt">项目编号：<span>zs1000</span></div>
+             <div class="txt">投资方：华能新能源科技有限公司</div>
+             <div class="txt">属地政府：某某市经济开发区管委会</div>
+           </div>
+            <div class="flex1"></div>
+            <div class="flex0">
+              <el-popover
+                  placement="bottom"
+                  width="auto"
+                  trigger="hover" >
+                  <div class="tipbox">逾期触发点：6月项目进展未上报</div>
+                  <div class="btna coa flexc" slot="reference">
+                    <img  src="@/assets/images/project/yqicoa.png"/>已逾期6天
+                  </div>
+                  <!-- 严重逾期 -->
+                  <!-- <div class="btna cob flexc">
+                    <img  src="@/assets/images/project/yqicob.png"/>严重逾期
+                  </div> -->
+                </el-popover>
+            </div>
+        </div>
+        <div class="lbox">
+          <div class="lboxl">
+            <div class="lbtab">
+              <div class="tit">总投资额</div>
+              <div class="txt">100000 万元</div>
+            </div>
+            <div class="lbtab">
+              <div class="tit">固定资产投资额</div>
+              <div class="txt">25000 万元</div>
+            </div>
+            <div class="lbtab">
+              <div class="tit">项目进度</div>
+              <div class="txt coa">建设中</div>
+            </div>
+            <div class="lbtab isno">
+              <div class="tit">审核状态</div>
+              <div class="txt coc">建设环节未通过</div>
+            </div>
+          </div>
+
+          <div class="rbox">
+            <div class="tit">签约日期：2025-02-03</div>
+            <div class="tit">投资方联系人：刘安源</div>
+            <div class="tit">联系方式：13804235698</div>
+            <div class="tit">供地面积：150亩</div>
+            <div class="tit">租赁厂房面积：20000平</div>
+            <div class="tit">流转土地面积：0亩</div>
+          </div>
+        </div>
+      </div>
+    </block>
+    <block v-if="type=='xmyq'">
+      <div class="boxlist" v-for="ite in 5">
+        <div class="ltop flex yqtop">
+            <div class="check">
+              <!-- <img src="@/assets/images/project/check.png"/> -->
+              <img src="@/assets/images/project/ncheck.png"/>
+            </div>
+           <div style="display: flex;flex-wrap: wrap;align-items: center;">
+             <div class="tit">智能装备制造项目</div>
+             <div class="txt">项目编号：<span>zs1000</span></div>
+             <div class="txt">投资方：华能新能源科技有限公司</div>
+             <div class="txt">属地政府：某某市经济开发区管委会</div>
+           </div>
+            <div class="flex1"></div>
+            <div class="flex0">
+              <div class="btna coa flexc">
+                <img  src="@/assets/images/project/yqicoa.png"/>
+              </div>
+              <!-- 严重逾期 -->
+              <!-- <div class="btna cob flexc">
+                <img  src="@/assets/images/project/yqicob.png"/>
+              </div> -->
+            </div>
+        </div>
+        <div class="lbox">
+          <div class="lboxl">
+            <div class="lbtab">
+              <div class="tit">逾期环节</div>
+              <div class="txt coe">建设环节</div>
+            </div>
+            <div class="lbtab">
+              <div class="tit">逾期天数</div>
+              <div class="txt coe">6 天</div>
+            </div>
+            <div class="lbtab isno">
+              <div class="tit">逾期触发点</div>
+              <div class="txt coe">6月项目进展未上报</div>
+            </div>
+          </div>
+
+          <div class="rbox">
+            <div class="flex1 rboxa">
+              <div class="tit">投资方联系人：王敏溪</div>
+              <div class="tit">联系方式：13804235698</div>
+              <div class="tit">逾期原因：因土地摘牌延迟，导致后续建设连环延误</div>
+            </div>
+
+             <el-button type="success" class="rbtns" plain>催办</el-button>
+          </div>
+        </div>
+      </div>
+    </block>
+  </div>
+</template>
+
+<script>
+  export default{
+    props: {
+      info: {
+        type: Object,
+        default: null
+      },
+      type: {
+        type: String,
+        default: ''
+      }
+    },
+    data() {
+      return{
+
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+::v-deep {
+ .el-popover{box-shadow: 0px 0px 10px 0px #D1D1D1;
+ border-radius: 8px;border: none;}
+
+}
+ .boxlist{
+   border-radius: 4px;margin-bottom: 17px;
+   border: 1px solid #E6E6E6;
+   .ltop{background: #F6FAFD;padding:13px 16px;display: flex;border-bottom: 1px solid #E6E6E6;align-items: flex-start;
+      &.yqtop{background: #FFF4EF;}
+      .check{width: 20px;height: 20px;margin-right: 13px;flex: 0 0 auto;
+        img{width: 100%;height: 100%;}
+      }
+      .tit{font-weight: bold;font-size: 16px;color: #3D455B;margin-right: 53px;}
+      .txt{font-size: 14px;color: #3d455b;margin-right: 49px;line-height: 20px;
+        span{color:#1890ff ;}
+      }
+      .btna{margin-left: 28px;font-weight: bold;flex: 0 0 auto;
+      font-size: 14px;line-height: 20px;
+          &.coa{color: #FE960E;}
+          &.cob{color: #FF6969;}
+            img{width: 12px;height: 14px;margin-right: 7px;}
+          }
+
+   }
+   .lbox{display: flex;align-items: center;
+    .lboxl{width: 56%;flex: 0 0 auto;display: flex;align-items: center;flex-wrap: wrap;}
+     .lbtab{display: flex;flex-direction: column;align-items: center;position: relative;padding: 0px 12px;box-sizing: border-box;flex: 1 0 auto;
+      &::after{content: '';width: 1px;height: 44px;background: #E6E6E6;position: absolute;right: 0;top: 50%;margin-top: -22px;}
+      &.isno::after{display: none;}
+        .tit{font-size: 16px;color: #3D455B;margin-bottom: 6px;font-weight: bold;}
+        .txt{font-size: 14px;color: #3D455B;
+          &.coa{color: #1890ff;}
+          &.cob{color: #00A854;}
+          &.coc{color: #FF6969;}
+          &.cod{color: #B4B4B4;}
+          &.coe{color: #FE5A0E;}
+
+        }
+     }
+     .rbox{background: #FAFAFA;min-height: 94px;flex: 1;display: flex;flex-wrap: wrap;align-items: center;padding: 15px 0;
+      .tit{font-weight: 500;font-size: 12px;color: #666666;line-height: 32px;padding-left: 23px;min-width: 33.3%;box-sizing: border-box;}
+      .rboxa{flex: 1;display: flex;flex-wrap: wrap;
+        .tit{min-width: 50%;}
+      }
+      .rbtns{margin-right: 23px;background: #E9FFF4;
+border-radius: 4px;
+border: 1px solid #00A854;color: #00A854;padding: 0 12px;line-height: 30px;box-sizing: border-box;}
+     }
+   }
+
+ }
+ .tipbox{font-weight: 500;font-size: 14px;color: #FE960E;}
+</style>

src/views/project/list.vue

@@ -1,22 +1,353 @@
 <template>
-  <div>
-    <!-- 步骤条 -->
+  <div class="app-container">
+    <el-form class="secbox" :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="88px">
+      <el-row :gutter="20">
+        <el-col :span="8">
+          <el-form-item label="项目编号" prop="noticeTitle">
+            <el-input
+              v-model="queryParams.noticeTitle"
+              placeholder="输入项目编号"
+              clearable
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="投资方" prop="noticeTitle">
+            <el-input
+              v-model="queryParams.noticeTitle"
+              placeholder="输入投资方名称"
+              clearable
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="属地政府" prop="noticeTitle">
+            <el-input
+              v-model="queryParams.noticeTitle"
+              placeholder="输入属地政府名称"
+              clearable
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="创建日期" prop="noticeTitle">
+            <el-date-picker
+                  v-model="value1"
+                  type="date"
+                  placeholder="年 / 月 / 日">
+                </el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="审核状态" prop="createBy">
+            <el-select v-model="value" placeholder="选择审核状态">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+          </el-form-item>
+        </el-col>
+        <!-- <el-col :span="8">
+          <el-form-item label="逾期程度" prop="createBy">
+            <el-select v-model="value" placeholder="选择建设内容">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+          </el-form-item>
+        </el-col> -->
+        <el-col :span="8">
+          <el-form-item>
+             <div style="padding-left: 20px;">
+               <el-button type="primary" plain size="mini" style="margin-right: 19px;" @click="resetQuery">重置</el-button>
+               <el-button type="primary"  size="mini" @click="handleQuery">检索</el-button>
+             </div>
+           </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <!-- 列表 -->
+    <!-- 标签页 -->
+    <div class="tabs">
+        <el-tabs v-model="activeName" @tab-click="handleClick">
+            <el-tab-pane name="first">
+              <div slot="label" class="tab flexc">
+                <img class="tabimg" v-if="activeName=='first'" src="@/assets/images/project/taba_.png"/>
+                <img class="tabimg" v-else src="@/assets/images/project/taba.png"/>
+                <span>签约环节(6)
+                </span>
+              </div>
+              <!-- 列表数据 -->
+              <div class="blist">
+                <boxlist type="xmyq"></boxlist>
+              </div>
+
+            </el-tab-pane>
+            <el-tab-pane  name="second">
+              <div slot="label" class="tab flexc">
+                <img class="tabimg" v-if="activeName=='second'" src="@/assets/images/project/tabb_.png"/>
+                <img class="tabimg" v-else src="@/assets/images/project/tabb.png"/>
+                <span>开工环节(2)
+                </span>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane  name="third">
+              <div slot="label" class="tab flexc">
+                <img class="tabcimg" v-if="activeName=='third'" src="@/assets/images/project/tabc_.png"/>
+                <img class="tabcimg" v-else src="@/assets/images/project/tabc.png"/>
+                <span>建设环节(5)
+                </span>
+              </div>
+              </el-tab-pane>
+            <el-tab-pane  name="fourth">
+              <div slot="label" class="tab flexc">
+                <img class="tabdimg" v-if="activeName=='fourth'" src="@/assets/images/project/tabd_.png"/>
+                <img class="tabdimg" v-else src="@/assets/images/project/tabd.png"/>
+                <span>投产环节(2)
+                </span>
+              </div>
+              
+              </el-tab-pane>
+          </el-tabs>
+
+          <div class="btns flexcc">
+            <div class="btna coa flexc">
+              <img  src="@/assets/images/project/yqicoa.png"/>一般逾期
+            </div>
+            <div class="btna cob flexc">
+              <img  src="@/assets/images/project/yqicob.png"/>严重逾期
+            </div>
+            <div style="width: 25px;"></div>
+            <el-button type="success"  class="cbbtn"  size="small">一键催办</el-button>
+            <el-button type="primary" plain   size="small">创建</el-button>
+            <el-button type="success"  class="cbbtn" size="small">审核</el-button>
+          </div>
+          <Pagination
+            v-show="total>0"
+            :total="total"
+            background
+            :page.sync="queryParams.pageNum"
+            :limit.sync="queryParams.pageSize"
+            @pagination="getList"
+          />
+    </div>
 
   </div>
 </template>
 
 <script>
-  export default{
-    data() {
-      return{
-
+// import { listNotice, getNotice, delNotice, addNotice, updateNotice } from "@/api/system/notice"
+import firstInfoForm from "./firstInfoForm"
+import boxlist from "./boxlist.vue"
+  import secondInfoForm from "./secondInfoForm"
+  import thirdInfoForm from "./thirdInfoForm"
+  import fourthInfoForm from "./fourthInfoForm"
+export default {
+  name: "Notice",
+  dicts: ['sys_notice_status', 'sys_notice_type'],
+  components:{
+    boxlist,secondInfoForm,thirdInfoForm,fourthInfoForm
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+	  ishsouetan:false,
+      // 总条数
+      total: 112,
+      // 公告表格数据
+      noticeList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 5,
+        noticeTitle: undefined,
+        createBy: undefined,
+        status: undefined
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        noticeTitle: [
+          { required: true, message: "公告标题不能为空", trigger: "blur" }
+        ],
+        noticeType: [
+          { required: true, message: "公告类型不能为空", trigger: "change" }
+        ]
+      },
+	  tableMaxHeight:380,
+    value:'',
+    options: [{
+              value: '选项1',
+              label: '黄金糕'
+            }, {
+              value: '选项2',
+              label: '双皮奶'
+            }],
+       activeName:'first',
+       info:{},
+    }
+  },
+  created() {
+    // this.getList()
+  },
+  computed: {
+    dynamicStyle() {
+      return {
+        overflow:'auto',
+        height:  this.tableMaxHeight + 'px',
       }
+    }
     },
-    methods:{
+  methods: {
+    /** 查询公告列表 */
+    getList() {
+      this.loading = true
+      listNotice(this.queryParams).then(response => {
+        this.noticeList = response.rows
+        this.total = response.total
+        this.loading = false
+      })
+    },
+    handleClick(){
 
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false
+      this.reset()
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        noticeId: undefined,
+        noticeTitle: undefined,
+        noticeType: undefined,
+        noticeContent: undefined,
+        status: "0"
+      }
+      this.resetForm("form")
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm")
+      this.handleQuery()
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.noticeId)
+      this.single = selection.length!=1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset()
+      this.open = true
+      this.title = "添加公告"
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset()
+      const noticeId = row.noticeId || this.ids
+      getNotice(noticeId).then(response => {
+        this.form = response.data
+        this.open = true
+        this.title = "修改公告"
+      })
+    },
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.noticeId != undefined) {
+            updateNotice(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功")
+              this.open = false
+              this.getList()
+            })
+          } else {
+            addNotice(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功")
+              this.open = false
+              this.getList()
+            })
+          }
+        }
+      })
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const noticeIds = row.noticeId || this.ids
+      this.$modal.confirm('是否确认删除公告编号为"' + noticeIds + '"的数据项？').then(function() {
+        return delNotice(noticeIds)
+      }).then(() => {
+        this.getList()
+        this.$modal.msgSuccess("删除成功")
+      }).catch(() => {})
     }
   }
+}
 </script>
-
-<style lang="scss">
+<style scoped lang="scss">
+::v-deep{
+  .secbox{
+    .el-button{padding: 13px 24px;}
+    .el-form-item__label{line-height: 40px;}
+    .el-input__inner{height: 40px;line-height: 40px;}
+    // .el-form-item{min-width: 25%;}
+  }
+  .tabs{
+    .el-tabs__item{padding-right: 0;color: #666666;line-height: 45px;height: 45px;padding-left: 0;}
+    .is-active{color: #2777D0;font-weight: bold;}
+  }
+  .pagination-container{margin-top: 8px;}
+}
+.secbox{background: #FFFFFF;
+border-radius: 4px;padding: 25px 16px 7px;margin-bottom: 15px;}
+.tabs{position: relative;background: #FFFFFF;padding-bottom: 25px;
+  .tab{padding: 0 21px;}
+  .tabimg{width: 14px;height: 14px;margin-right: 8px;}
+  .tabcimg{width: 13px;height: 13px;margin-right: 9px;}
+  .tabdimg{width: 14px;height: 15px;margin-right: 8px;}
+  .btns{height: 45px;box-sizing: border-box;position: absolute;right: 0;top: 0;
+    .btna{margin-left: 28px;font-weight: bold;
+font-size: 14px;
+    &.coa{color: #FE960E;}
+    &.cob{color: #FF6969;}
+      img{width: 12px;height: 14px;margin-right: 7px;}
+    }
+  }
+  .cbbtn{padding: 0 12px;height: 32px;line-height: 32px;border-radius: 4px;font-weight: bold;
+font-size: 14px;
+color: #FFFFFF;}
+.blist{padding: 10px 16px 0;}
+}
 </style>

src/views/project/secondInfoForm.vue

@@ -169,7 +169,7 @@ export default {
     table{width: 100% !important;}
    }
 }
-.fomebox{background: #FFFFFF;margin-bottom: 15px;border-radius: 4px;
+.fomebox{background: #FFFFFF;margin-top: 15px;border-radius: 4px;
   .ftop{padding: 10px 17px 10px 16px;border-bottom: 1px solid #E6E6E6;
     .timg{width: 20px;height: 20px;margin-right: 13px;}
     .tit{font-weight: bold;font-size: 16px;color: #222838;}

src/views/project/thirdInfoForm.vue

@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <el-form ref="basicInfoForm" label-position="top" :model="info" :rules="rules" label-width="150px">
+  <div class="infobox">
+    <el-form ref="basicInfoForm" label-position="top" :model="info" :rules="rules" >
       <div class="fomebox">
         <div class="ftop flexc">
           <img class="timg flex0" src="@/assets/images/project/tabtit.png"/>
@@ -32,7 +32,7 @@
                 <el-input placeholder="请输入土地出让金总额" v-model="info.tableName" />
               </el-form-item>
             </el-col>
-            <el-col :span="18">
+            <el-col :span="6">
               <el-form-item label="厂房投入金额(万元)" prop="tableComment">
                 <el-input placeholder="请输入厂房投入金额" v-model="info.tableComment" />
               </el-form-item>
@@ -52,6 +52,14 @@
                 <el-input placeholder="请输入设备合同金额" v-model="info.functionAuthor" />
               </el-form-item>
             </el-col>
+            <el-col :span="6">
+              <el-form-item label="建设周期" prop="remark">
+                <el-input v-model="input" placeholder="请输入建设周期">
+                  <span slot="suffix" class="txt">月</span>
+                  <i slot="suffix" class="el-input__icon el-icon-arrow-down"></i>
+                </el-input>
+              </el-form-item>
+            </el-col>
           </el-row>
         </div>
       </div>
@@ -61,7 +69,7 @@
           <div class="flex1 tit">建设进度跟踪</div>
           <el-button type="primary" plain>保存</el-button>
         </div>
-        <div class="rowbox">
+       <!-- <div class="rowbox">
           <el-row :gutter="22">
             <el-col :span="6">
               <el-form-item label="建设周期" prop="remark">
@@ -72,11 +80,11 @@
               </el-form-item>
             </el-col>
           </el-row>
-        </div>
-        <div class="ftab flexc" style="padding-top: 0;">
+        </div> -->
+        <div class="ftab flexc" style="padding-top: 7px;">
           <div class="line"></div>每月项目建设进展情况
           <div class="flex1"></div>
-          <el-button type="success" class="upbox" plain>
+          <el-button type="success" class="upbox" plain @click="dialogFormVisible = true">
             <img src="@/assets/images/project/upe.png"/>
             上传建设进度
           </el-button>
@@ -159,6 +167,56 @@
         </div>
       </div>
     </el-form>
+    <el-dialog  :visible.sync="dialogFormVisible">
+      <template slot="title">
+       <div class="ftop flexc diaboxt">
+         <img class="timg flex0" src="@/assets/images/project/tabtit.png"/>
+         <div class="flex1 tit">上传建设进度</div>
+       </div>
+      </template>
+      <el-form :model="form" label-position="top">
+        <div class="fomebox">
+          <el-row  :gutter="22">
+            <el-col :span="12">
+              <el-form-item label="上传日期" prop="remark">
+                <el-date-picker
+                      v-model="value1"
+                      disabled
+                      type="date"
+                      placeholder="年 / 月 / 日">
+                    </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="项目进展月" prop="remark">
+                <el-input v-model="input" placeholder="请输入项目进展月">
+                  <span slot="suffix" class="txt">月</span>
+                  <i slot="suffix" class="el-input__icon el-icon-arrow-down"></i>
+                </el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="建设进展情况" prop="remark">
+                <el-input type="textarea" placeholder="输入项目进展情况…" v-model="info.tableComment"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="存在的问题" prop="remark">
+                <el-input type="textarea" placeholder="输入存在的问题…" v-model="info.tableComment"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <div>
+            <drag-file-upload v-model="form.desc"/>
+          </div>
+        </div>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="dialogFormVisible = false">提交</el-button>
+      </div>
+    </el-dialog>
   </div>
 
 </template>
@@ -188,6 +246,19 @@ export default {
                 dx: '11.8 MB',
                 time: '2025-06-16 16:57',
       }],
+      form: {
+                name: '',
+                region: '',
+                date1: '',
+                date2: '',
+                delivery: false,
+                type: [],
+                resource: '',
+                desc: ''
+              },
+              formLabelWidth: '120px',
+              dialogFormVisible:false,
+              input:'',
       rules: {
         // tableName: [
         //   { required: true, message: "请输入表名称", trigger: "blur" }
@@ -218,15 +289,16 @@ export default {
     table{width: 100% !important;}
     .upbox{padding:8px 12px;
       img{width: 12px;height: 12px;margin-right: 2px;}
-      color: #00A854;
+      // color: #00A854;
     }
    }
+   .infobox{
+     .el-dialog__header{border-bottom: 1px solid #E6E6E6;padding: 0;}
+   }
+   .el-dialog__header{border-bottom: 1px solid #E6E6E6;padding: 0;}
 }
 .fomebox{background: #FFFFFF;margin-bottom: 15px;border-radius: 4px;
-  .ftop{padding: 10px 17px 10px 16px;border-bottom: 1px solid #E6E6E6;
-    .timg{width: 20px;height: 20px;margin-right: 13px;}
-    .tit{font-weight: bold;font-size: 16px;color: #222838;}
-  }
+
   .rowbox{padding: 10px 15px 9px;}
   .ftab{font-weight: bold;font-size: 14px;color: #2777D0;padding: 24px 16px 7px;
     .line{width: 6px;margin-right: 9px;height: 20px;background: #2777D0;}
@@ -247,4 +319,10 @@ color: #666666;}
     &.cod{color: #F25858;}
   }
 }
+.ftop{padding: 10px 17px 10px 16px;border-bottom: 1px solid #E6E6E6;
+    .timg{width: 20px;height: 20px;margin-right: 13px;}
+    .tit{font-weight: bold;font-size: 16px;color: #222838;}
+    &.diaboxt{padding: 16px;border-bottom: none;}
+}
+
 </style>