feat: 修改项目台账

src/App.vue

@@ -128,4 +128,13 @@ body,
   min-width: 160px;
   min-width: 160px;
   border: 1px solid #ccc;
   border: 1px solid #ccc;
 }
 }
+
+.page-bottom-pagination {
+  width: 100%;
+  position: relative;
+  height: 70px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 </style>
 </style>

src/api/projectManaApi/download.js

+export default {
+  // 下载 Excel 方法
+  excel(data, fileName) {
+    this.download(data, fileName, "application/vnd.ms-excel");
+  },
+
+  // 下载 Word 方法
+  word(data, fileName) {
+    this.download(data, fileName, "application/msword");
+  },
+
+  // 下载 Zip 方法
+  zip(data, fileName) {
+    this.download(data, fileName, "application/zip");
+  },
+
+  // 下载 Html 方法
+  html(data, fileName) {
+    this.download(data, fileName, "text/html");
+  },
+
+  // 下载 Markdown 方法
+  markdown(data, fileName) {
+    this.download(data, fileName, "text/markdown");
+  },
+
+  // 下载 pdf 方法
+  pdf(data, fileName) {
+    console.log("data", data);
+    console.log("fileName", fileName);
+    this.download(data, fileName, "application/pdf");
+  },
+
+  // 下载 图片方法
+  png(data, fileName) {
+    this.download(data, fileName, "application/png");
+  },
+
+  // 兼容写法
+  stream(data, fileName) {
+    this.download(data, fileName, "application/octet-stream");
+  },
+
+  download(data, fileName, mineType) {
+    // 创建 blob对象
+    let blob = new Blob([data], { type: mineType });
+    // 浏览器api 有的不支持-二种都写
+    window.URL = window.URL || window.webkitURL;
+    // 获取链接地址-(内容赋值到临时链接)
+    let href = URL.createObjectURL(blob);
+    // 创建a标签
+    let downA = document.createElement("a");
+    // 把链接赋值给a标签
+    downA.href = href;
+    // 赋值文件名称
+    downA.download = fileName;
+    // 点击下载
+    downA.click();
+    // 销毁超连接
+    window.URL.revokeObjectURL(href);
+  },
+};

src/api/projectManaApi/index.js

+import api from "@/utils/http";
+let { service: request } = api;
+
+// import CryptoJS from '@/utils/aes_util'
+
+// 新登陆
+export const doLogin = ({ name, password }) => {
+  return request({
+    method: "post",
+    url: "/login",
+    urlType: "api5",
+    data: {
+      username: name,
+      password,
+    },
+  });
+};
+
+// 获取用户信息
+export const getCurrentUserInfo = () => {
+  return request({
+    method: "get",
+    url: "/getInfo",
+    urlType: "api5",
+  });
+};
+
+// 项目总览 table
+export const projectOverview = (county, time = "") => {
+  return request({
+    method: "post",
+    url: `/project/project/api/selectProjectDetail`,
+    urlType: "api5",
+    data: {
+      county,
+      time,
+    },
+  });
+};
+
+// 项目推送 table
+export const projectPushList = (data) => {
+  return request({
+    method: "post",
+    url: "/push/push/api/list",
+    urlType: "api5",
+    data,
+  });
+};
+
+// 项目推送 数据更新
+export const projectPushUpdate = (data) => {
+  return request({
+    method: "post",
+    url: "/push/push/api/update",
+    urlType: "api5",
+    data,
+  });
+};
+
+// 项目推送 流转
+export const projectPushWanderAbout = (id) => {
+  return request({
+    method: "get",
+    url: `/push/push/api/projectByTurnovere?id=${id}`,
+    urlType: "api5",
+  });
+};
+
+// 历史数据
+export const projectHistoryList = (data) => {
+  return request({
+    method: "get",
+    url: `/push/push/api/historyList?pageSize=${data.pageSize}&pageNum=${data.pageNum}`,
+    urlType: "api5",
+  });
+};
+
+// 项目推送 统计
+export const projectPushTotal = () => {
+  return request({
+    method: "get",
+    url: "/push/push/api/selectCountByStatus",
+    urlType: "api5",
+  });
+};
+
+// 项目推送 分发
+export const projectPushDistribute = (data) => {
+  return request({
+    method: "post",
+    url: "/push/push/api/projectByFenfa",
+    urlType: "api5",
+    data,
+  });
+};
+
+// 项目推送 退回
+export const projectPushBack = (data) => {
+  return request({
+    method: "post",
+    url: "/push/push/api/projectByFallBack",
+    urlType: "api5",
+    data,
+  });
+};
+
+// 项目推送 恢复
+export const projectPushRestore = (id) => {
+  return request({
+    method: "get",
+    url: `/push/push/api/projectByRecover?id=${id}`,
+    urlType: "api5",
+  });
+};
+
+// 项目推送 暂停或终止
+export const projectPushPause = (id) => {
+  return request({
+    method: "get",
+    url: `/push/push/api/projectByPause?id=${id}`,
+    urlType: "api5",
+  });
+};
+
+// 重点项目 统计
+export const keyProjectStatistics = () => {
+  return request({
+    method: "get",
+    url: "/keyproject/keyproject/api/selectProjectCount",
+    urlType: "api5",
+  });
+};
+
+// 重点项目 table
+export const keyProjectList = (data = {}) => {
+  return request({
+    method: "post",
+    url: "/keyproject/keyproject/api/list",
+    urlType: "api5",
+    data,
+  });
+};
+
+// 重点项目 添加
+export const createKeyProject = (data) => {
+  return request({
+    method: "post",
+    url: "/keyproject/keyproject/api/adds",
+    urlType: "api5",
+    data,
+  });
+};
+
+// 重点项目 详情
+export const detailKeyProject = (id) => {
+  return request({
+    method: "get",
+    url: `/keyproject/keyproject/api/findById?id=${id}`,
+    urlType: "api5",
+  });
+};
+
+// 重点项目 修改
+export const updatelKeyProject = (data) => {
+  return request({
+    method: "post",
+    url: `/keyproject/keyproject/api/updates`,
+    urlType: "api5",
+    data,
+  });
+};
+
+// 重点项目 流程列表
+export const keyProjectFlowChart = (data) => {
+  return request({
+    method: "post",
+    url: "/flow/flow/selectProjectFlow",
+    urlType: "api5",
+    data,
+  });
+};
+
+// 重点项目 工作动态
+export const keyProjectWork = (data) => {
+  return request({
+    method: "post",
+    url: "/dynamics/dynamics/api/list",
+    urlType: "api5",
+    data,
+  });
+};
+
+// 重点项目 导出
+export const keyProjectExport = (data) => {
+  return request({
+    method: "post",
+    url: "/keyproject/keyproject/export",
+    urlType: "api5",
+    data,
+    responseType: "blob",
+  });
+};
+
+// 数据 导出
+export const dataExport = (data) => {
+  return request({
+    method: "post",
+    url: "/push/push/export",
+    urlType: "api5",
+    data,
+    responseType: "blob",
+  });
+};
+
+// 台账管理 Ledger management
+export const ledgerManagementList = (data) => {
+  return request({
+    method: "post",
+    url: "/book/book/api/list",
+    urlType: "api5",
+    data,
+  });
+};
+
+// 台账管理 删除
+export const ledgerManagementRemove = (ids) => {
+  return request({
+    method: "delete",
+    url: `/book/book/${ids}`,
+    urlType: "api5",
+  });
+};
+
+// 台账管理 数据导入
+export const ledgerUpload = (data) => {
+  return request({
+    method: "post",
+    url: `/book/book/api/uploadExcel`,
+    urlType: "api5",
+    data,
+  });
+};
+
+// 台账管理 数据导出
+export const ledgerExport = (data) => {
+  return request({
+    method: "post",
+    url: `/book/book/api/export`,
+    urlType: "api5",
+    responseType: "blob",
+    data,
+  });
+};
+
+// 台账管理 修改
+export const ledgerUpdate = (data) => {
+  return request({
+    method: "put",
+    url: `/book/book`,
+    urlType: "api5",
+    data,
+  });
+};
+
+// 台账管理 修改
+export const ledgerUpdateData = (data) => {
+  return request({
+    method: "post",
+    url: `/book/book/api/update`,
+    urlType: "api5",
+    data,
+  });
+};
+
+// 文件上传
+export const fileUploadApi = (data) => {
+  return request({
+    method: "post",
+    url: "/common/upload",
+    urlType: "api5",
+    data,
+  });
+};
+
+// 项目推送导入数据
+export const projectPushUploadApi = (data) => {
+  return request({
+    method: "post",
+    url: "/push/push/api/uploadExcel",
+    urlType: "api5",
+    data,
+  });
+};
+
+// 台账导入数据
+export const bookUploadApi = (data) => {
+  return request({
+    method: "post",
+    url: "/book/book/api/uploadExcel",
+    urlType: "api5",
+    data,
+  });
+};
+
+// 文件下载
+export const fileDownload = (fileName) => {
+  return request({
+    method: "get",
+    url: `/common/download?fileName=${fileName}`,
+    urlType: "api5",
+  });
+};
+
+// 模版下载
+export const fileModelDownload = (fileName) => {
+  return request({
+    method: "get",
+    url: `/common/download?fileName=${fileName}`,
+    urlType: "api5",
+    responseType: "blob",
+  });
+};
+/**
+ * 台账模板
+ * @param fileName
+ * @returns {*}
+ */
+export const bookfileDownload = (
+  fileName = "/profile/upload/2023/12/09/太原市在谈项目信息表_20231209153228A003.xlsx"
+) => {
+  return request({
+    method: "get",
+    url: `/common/download?fileName=${fileName}`,
+    urlType: "api5",
+    responseType: "blob",
+  });
+};
+
+// 统计分析 指标分析 indexAnalysis
+export const indexAnalysis = (data) => {
+  return request({
+    method: "get",
+    url: `/xzxl/xzxl/api/indexAnalysis?time=${data.time}&type=${data.type}`,
+    urlType: "api5",
+  });
+};
+
+// 统计分析 项目分析 projectAnalysisData
+export const projectAnalysisData = (data) => {
+  return request({
+    method: "post",
+    url: `/project/project/projectStatistics`,
+    urlType: "api5",
+    data,
+  });
+};

src/router/index.js

@@ -147,7 +147,7 @@ const routes = [
             meta: {
             meta: {
               keepAlive: true, // 需要缓存
               keepAlive: true, // 需要缓存
             },
             },
-            component: () => import("../views/resources/page/account.vue"),
+            component: () => import("../views/resources/page/keyProject.vue"),
           },
           },
 
 
           // 台账详情
           // 台账详情

src/utils/http.js

@@ -17,6 +17,8 @@ let baseURL2 = "https://zysf-store.oss-cn-beijing.aliyuncs.com";
 let baseURL3 = url;
 let baseURL3 = url;
 let baseURL4 = "http://39.100.39.50:8006";
 let baseURL4 = "http://39.100.39.50:8006";
 
 
+export const baseURL5 = "https://touzi.cjwltzj.taiyuan.gov.cn/prod-api";
+
 // 2.请求拦截器
 // 2.请求拦截器
 service.interceptors.request.use(
 service.interceptors.request.use(
   (config) => {
   (config) => {
@@ -33,6 +35,9 @@ service.interceptors.request.use(
       case "api4":
       case "api4":
         config.url = baseURL4 + config.url;
         config.url = baseURL4 + config.url;
         break;
         break;
+      case "api5":
+        config.url = baseURL5 + config.url;
+        break;
       default:
       default:
         config.url = baseURL + config.url;
         config.url = baseURL + config.url;
     }
     }
@@ -48,6 +53,13 @@ service.interceptors.request.use(
       // config.params = { 'token': token } //如果要求携带在参数中
       // config.params = { 'token': token } //如果要求携带在参数中
       config.headers.token = token; //如果要求携带在请求头中
       config.headers.token = token; //如果要求携带在请求头中
     }
     }
+    if (config.url == `${baseURL5}/common/upload`) {
+      config.headers = {
+        token: localStorage.getItem("token"),
+        "Content-Type": "multipart/form-data",
+      };
+      return config;
+    }
     return config;
     return config;
   },
   },
   (error) => {
   (error) => {

src/views/resources/page/common/backModel.vue

+<template>
+  <el-dialog :title="curTitle" :visible.sync="visible" width="760px" center :before-close="handleClose">
+    <el-input type="textarea" :rows="4" placeholder="请输入" v-model="textarea">
+    </el-input>
+    <el-button type="primary" size="small" style="margin:20px auto" @click="saveData">确定</el-button>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'backModel',
+  props: ['visible', 'curTitle'],
+  data() {
+    return {
+      textarea: ''
+    }
+  },
+  methods: {
+    saveData() {
+      if (!this.textarea) {
+        return this.$message.error('退回原因不能为空')
+      }
+      this.$emit('returnBack', this.textarea)
+    },
+    handleClose() {
+      this.$emit('close')
+    }
+  }
+}
+</script>
+<style scoped lang="less"></style>
\ No newline at end of file

src/views/resources/page/common/circleTemp.vue

+<template>
+  <div class="circle-temp" :style="{ background: color }">
+    <span :style="{ background: color }"></span>
+  </div>
+</template>
+<script>
+export default {
+  name: 'circleTemp',
+  props: ['color']
+}
+</script>
+
+<style scoped lang="less">
+.circle-temp {
+  width: 26px;
+  height: 26px;
+  border-radius: 13px;
+  display: inline-block;
+  box-sizing: border-box;
+
+  span {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    display: inline-block;
+    box-sizing: border-box;
+    border: 4px solid #fff;
+    margin: 3px;
+  }
+}
+</style>
\ No newline at end of file

src/views/resources/page/common/editLedger.vue

+<template>
+    <el-dialog title="编辑" :visible.sync="visible" width="760px" :before-close="handleClose">
+        <el-form :model="formData" ref="formInfoRef" label-width="120px" size="mini" class="edit-dialog">
+            <el-form-item label="拟落地区域：" prop="landingCity">
+                <el-select v-model="formData.landingCity" placeholder="请选择" style="width: 300px;">
+                    <el-option v-for="item in options_district" :label="item.label" :value="item.value" :key="item.value">
+                    </el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="项目名称：" prop="projectName">
+                <el-input v-model="formData.projectName" placeholder="项目名称"></el-input>
+            </el-form-item>
+            <el-form-item label="投资方名称：" prop="investorName">
+                <el-input v-model="formData.investorName" placeholder="投资方名称"></el-input>
+            </el-form-item>
+            <el-form-item label="所属产业：" prop="owningIndustry">
+                <el-select v-model="formData.owningIndustry" placeholder="请选择" class="input-width" style="width: 300px;">
+                    <el-option v-for="item in options_sscy" :label="item" :value="item" :key="item"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="总投资额(万元)：" prop="totalMoney">
+                <el-input v-model="formData.totalMoney" placeholder="总投资额"></el-input>
+            </el-form-item>
+            <el-form-item label="项目建设内容：" prop="projectCentent">
+                <el-input v-model="formData.projectCentent" type="textarea" :rows="2" placeholder="项目建设内容"></el-input>
+            </el-form-item>
+            <el-form-item label="进展情况：" prop="projectProgress">
+                <el-input v-model="formData.projectProgress" type="textarea" :rows="2" placeholder="进展情况"></el-input>
+            </el-form-item>
+            <el-form-item label="联系人：" prop="projectPerson">
+                <el-input v-model="formData.projectPerson" placeholder="联系人"></el-input>
+            </el-form-item>
+            <el-form-item label="所在省份：" prop="homeProvince">
+                <el-input v-model="formData.homeProvince" placeholder="所在省份"></el-input>
+            </el-form-item>
+            <el-form-item label="对接情况：" prop="dockingCondition">
+                <el-select v-model="formData.dockingCondition" placeholder="请选择" style="width: 300px;">
+                    <el-option v-for="item in djData" :label="item" :value="item" :key="item"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="拟签约时间：" prop="signTime">
+                <el-date-picker v-model="formData.signTime" type="month" placeholder="请选择" style="width: 300px;">
+                </el-date-picker>
+            </el-form-item>
+            <el-form-item label="项目进展：" prop="projectProgress">
+                <el-input type="textarea" :rows="2" v-model="formData.projectProgress" placeholder="项目进展"></el-input>
+            </el-form-item>
+            <el-form-item>
+                <el-button size="small" type="primary" @click="handleSubmit('formInfoRef')">保存</el-button>
+                <el-button size="small" type="info" @click="handleClose(false)">关闭</el-button>
+            </el-form-item>
+        </el-form>
+    </el-dialog>
+</template>
+<script>
+import {
+    ledgerUpdateData,
+} from "@/api/projectManaApi";
+export default {
+    name: "editLedger",
+    props: ["formData", "visible", "options_district", "options_sscy"],
+    data() {
+        return {
+            djData: ['初步对接', '深度对接', '拟签约']
+        };
+    },
+    created() {
+    },
+    mounted() { },
+    methods: {
+        handleSubmit(formName) {
+            this.$refs[formName].validate((valid) => {
+                if (valid) {
+                    this.saveData(this.formData);
+                    this.$refs[formName].resetFields();
+                } else {
+                    return false;
+                }
+            });
+        },
+        async saveData(data) {
+            const res = await ledgerUpdateData(data)
+            if (res.code === 200) {
+                this.handleClose(true)
+                this.$message({
+                    message: '修改成功',
+                    type: 'success'
+                });
+            } else {
+                this.$message({
+                    message: '修改失败',
+                    type: 'error'
+                });
+            }
+        },
+        handleClose(status) {
+            this.$emit('close', status)
+        }
+    },
+};
+</script>
+<style scoped lang="less">
+.edit-dialog {
+
+    /deep/ .el-form-item--mini.el-form-item,
+    .el-form-item--small.el-form-item {
+        margin-bottom: 20px !important;
+    }
+}
+</style>
+  
\ No newline at end of file

src/views/resources/page/common/fileUpload.vue

+<template>
+  <el-dialog
+    title="数据上传"
+    :visible.sync="visible"
+    width="760px"
+    center
+    :before-close="handleClose"
+  >
+    <div class="file-upload-box">
+      <el-upload
+        :action="url"
+        :accept="accept"
+        :on-change="handleChange"
+        :on-remove="handleRemove"
+        :file-list="fileList"
+        :multiple="false"
+        :auto-upload="false"
+        style="width: 200px"
+      >
+        <el-button style="height: 40px" size="small" type="success"
+          >选择文件</el-button
+        >
+        <div slot="tip" class="el-upload__tip">只能上传excel格式</div>
+      </el-upload>
+      <el-button
+        size="small"
+        style="height: 40px"
+        type="primary"
+        @click="submitUpload"
+      >
+        开始上传
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import {fileUploadApi, ledgerUpload, projectPushUploadApi} from "@api/projectManaApi";
+
+export default {
+  name: "fileUpload",
+  props: ["visible", "curType", "statusType"],
+  data() {
+    return {
+      fileList: [],
+      url: "",
+      accept: ".xls,.xlsx",
+    };
+  },
+  created(){
+    this.fileList = []
+  },
+  methods: {
+    handleChange(file, fileList) {
+      this.fileList = fileList;
+    },
+    handleRemove() {
+      this.fileList = [];
+    },
+    async submitUpload() {
+      if (this.fileList.length === 0)
+        return this.$message.error("请选选择文件");
+      const formData = new FormData();
+      this.fileList.forEach((file) => {
+        formData.append("file", file.raw);
+      });
+      let res;
+      if (this.curType === "台账") {
+        formData.append("status", this.statusType);
+        res = await ledgerUpload(formData);
+      }
+      if (this.curType === "项目" || this.curType === 'startSign') {
+        res = await projectPushUploadApi(formData);
+      }
+      if (this.curType === "项目2" ) {
+        res = await fileUploadApi(formData);
+      }
+      if (res.code === 200) {
+        this.$message.success(res.msg);
+        if (this.curType === "项目" || this.curType === "项目2" || this.curType === 'startSign') {
+          this.fileList = []
+          this.$emit("close", res.fileName || res.code);
+        } else {
+          this.handleClose("update");
+        }
+      } else {
+        this.$message.error(res.msg);
+      }
+    },
+    handleClose(type) {
+      this.fileList = []
+      this.$emit("close", type);
+    },
+  },
+};
+</script>
+<style scoped lang="less">
+.file-upload-box {
+  height: 300px;
+  display: flex;
+}
+</style>

src/views/resources/page/common/flowChart.vue

+<template>
+  <el-table
+    :data="transFormData"
+    size="small"
+    v-loading="loading"
+    style="width: 100%;border-radius: 8px;overflow: hidden;border: 1px solid #e5e5e5;box-sizing: border-box;overflow-x: hidden;"
+    :height="tableHeight"
+    :header-cell-style="headerRowStyle"
+    :highlight-current-row="false"
+    @cell-click="handleCellClick"
+  >
+    <el-table-column type="index" label="序号" align="center" width="50"> </el-table-column>
+    <el-table-column prop="projectName" align="center" label="项目名称" width="150">
+      <template slot-scope="scope">
+        <el-tooltip placement="top" effect="light">
+          <div slot="content" style="width: 300px">{{ scope.row.projectName }}</div>
+          <div class="text-overflow key-projectName">{{ scope.row.projectName }}</div>
+        </el-tooltip>
+      </template>
+    </el-table-column>
+    <el-table-column prop="qt" align="center" label="洽谈">
+      <template slot-scope="scope">
+        <div class="flowitem">
+          <el-popover
+            v-if="scope.row.qt && scope.row.qt.status === '遇到堵点'"
+            placement="top-start"
+            width="200"
+            trigger="hover"
+          >
+            <div v-for="point in scope.row.qt.tProjectFlowStopList" :key="point.id" class="point-box">
+              <div class="point-title">
+                <i class="el-icon-warning" style="color: #FF0000"></i>
+                {{ point.department }}
+              </div>
+              <div class="point-content">
+                {{ point.content }}
+              </div>
+            </div>
+            <img
+              slot="reference"
+              :src="setStatusImg(scope.row.qt ? scope.row.qt.status : null)"
+              style="width: 20px;height: 20px;"
+            />
+          </el-popover>
+          <img
+            v-else
+            :src="setStatusImg(scope.row.qt ? scope.row.qt.status : null)"
+            style="width: 20px;height: 20px;"
+          />
+          <div :style="setStyle(scope.row.qt)">{{ setTextTime(scope.row.qt) }}</div>
+          <div class="line2" :style="setLineColor(scope.row.qy)"></div>
+        </div>
+      </template>
+    </el-table-column>
+    <el-table-column prop="qy" align="center" label="签约">
+      <template slot-scope="scope">
+        <div class="flowitem flowqt">
+          <el-popover
+            v-if="scope.row.qy && scope.row.qy.status === '遇到堵点'"
+            placement="top-start"
+            width="200"
+            trigger="hover"
+          >
+            <div v-for="point in scope.row.qy.tProjectFlowStopList" :key="point.id" class="point-box">
+              <div class="point-title">
+                <i class="el-icon-warning" style="color: #FF0000"></i>
+                {{ point.department }}
+              </div>
+              <div class="point-content">
+                {{ point.content }}
+              </div>
+            </div>
+            <img
+              slot="reference"
+              :src="setStatusImg(scope.row.qy ? scope.row.qy.status : null)"
+              style="width: 20px;height: 20px;"
+            />
+          </el-popover>
+          <img
+            v-else
+            :src="setStatusImg(scope.row.qy ? scope.row.qy.status : null)"
+            style="width: 20px;height: 20px;"
+          />
+          <div :style="setStyle(scope.row.qy)">{{ setTextTime(scope.row.qy) }}</div>
+          <div class="line1" :style="setLineColor(scope.row.qy)"></div>
+          <div class="line2" :style="setLineColor(scope.row.tdsx)"></div>
+          <div class="jg-day">
+            {{
+              beApartDays(
+                scope.row && scope.row.qt ? scope.row.qt.startTime : null,
+                scope.row && scope.row.qy ? scope.row.qy.endTime : null
+              )
+            }}
+          </div>
+        </div>
+      </template>
+    </el-table-column>
+    <el-table-column prop="tdsx" align="center" label="拿地">
+      <template slot-scope="scope">
+        <div class="flowitem flowqt">
+          <el-popover
+            v-if="scope.row.tdsx && scope.row.tdsx.status === '遇到堵点'"
+            placement="top-start"
+            width="200"
+            trigger="hover"
+          >
+            <div v-for="point in scope.row.tdsx.tProjectFlowStopList" :key="point.id" class="point-box">
+              <div class="point-title">
+                <i class="el-icon-warning" style="color: #FF0000"></i>
+                {{ point.department }}
+              </div>
+              <div class="point-content">
+                {{ point.content }}
+              </div>
+            </div>
+            <img
+              slot="reference"
+              :src="setStatusImg(scope.row.tdsx ? scope.row.tdsx.status : null)"
+              style="width: 20px;height: 20px;"
+            />
+          </el-popover>
+          <img
+            v-else
+            :src="setStatusImg(scope.row.tdsx ? scope.row.tdsx.status : null)"
+            style="width: 20px;height: 20px;"
+          />
+          <div :style="setStyle(scope.row.tdsx)">{{ setTextTime(scope.row.tdsx) }}</div>
+          <div class="line1" :style="setLineColor(scope.row.tdsx)"></div>
+          <div class="line2" :style="setLineColor(scope.row.spsx)"></div>
+          <div class="jg-day">
+            {{
+              beApartDays(
+                scope.row && scope.row.qy ? scope.row.qy.endTime : null,
+                scope.row && scope.row.tdsx ? scope.row.tdsx.endTime : null
+              )
+            }}
+          </div>
+        </div>
+      </template>
+    </el-table-column>
+    <el-table-column prop="spsx" align="center" label="开工">
+      <template slot-scope="scope">
+        <div class="flowitem flowqt">
+          <el-popover
+            v-if="scope.row.spsx && scope.row.spsx.status === '遇到堵点'"
+            placement="top-start"
+            width="200"
+            trigger="hover"
+          >
+            <div v-for="point in scope.row.spsx.tProjectFlowStopList" :key="point.id" class="point-box">
+              <div class="point-title">
+                <i class="el-icon-warning" style="color: #FF0000"></i>
+                {{ point.department }}
+              </div>
+              <div class="point-content">
+                {{ point.content }}
+              </div>
+            </div>
+            <img
+              slot="reference"
+              :src="setStatusImg(scope.row.spsx ? scope.row.spsx.status : null)"
+              style="width: 20px;height: 20px;"
+            />
+          </el-popover>
+          <img
+            v-else
+            :src="setStatusImg(scope.row.spsx ? scope.row.spsx.status : null)"
+            style="width: 20px;height: 20px;"
+          />
+          <div :style="setStyle(scope.row.spsx)">{{ setTextTime(scope.row.spsx) }}</div>
+          <div class="line1" :style="setLineColor(scope.row.spsx)"></div>
+          <div class="line2" :style="setLineColor(scope.row.qtsx)"></div>
+          <div class="jg-day">
+            {{
+              beApartDays(
+                scope.row && scope.row.tdsx ? scope.row.tdsx.endTime : null,
+                scope.row && scope.row.spsx ? scope.row.spsx.endTime : null
+              )
+            }}
+          </div>
+        </div>
+      </template>
+    </el-table-column>
+    <el-table-column prop="qtsx" align="center" label="建成">
+      <template slot-scope="scope">
+        <div class="flowitem flowqt">
+          <el-popover
+            v-if="scope.row.qtsx && scope.row.qtsx.status === '遇到堵点'"
+            placement="top-start"
+            width="200"
+            trigger="hover"
+          >
+            <div v-for="point in scope.row.qtsx.tProjectFlowStopList" :key="point.id" class="point-box">
+              <div class="point-title">
+                <i class="el-icon-warning" style="color: #FF0000"></i>
+                {{ point.department }}
+              </div>
+              <div class="point-content">
+                {{ point.content }}
+              </div>
+            </div>
+            <img
+              slot="reference"
+              :src="setStatusImg(scope.row.qtsx ? scope.row.qtsx.status : null)"
+              style="width: 20px;height: 20px;"
+            />
+          </el-popover>
+          <img
+            v-else
+            :src="setStatusImg(scope.row.qtsx ? scope.row.qtsx.status : null)"
+            style="width: 20px;height: 20px;"
+          />
+          <div :style="setStyle(scope.row.qtsx)">{{ setTextTime(scope.row.qtsx) }}</div>
+          <div class="line1" :style="setLineColor(scope.row.qtsx)"></div>
+          <div class="line2" :style="setLineColor(scope.row.kg)"></div>
+          <div class="jg-day">
+            {{
+              beApartDays(
+                scope.row && scope.row.spsx ? scope.row.spsx.endTime : null,
+                scope.row && scope.row.qtsx ? scope.row.qtsx.endTime : null
+              )
+            }}
+          </div>
+        </div>
+      </template>
+    </el-table-column>
+    <!-- <el-table-column prop="kg" align="center" label="">
+      <template slot-scope="scope">
+        <div class="flowitem flowqt">
+          <el-popover
+            v-if="scope.row.kg && scope.row.kg.status === '遇到堵点'"
+            placement="top-start"
+            width="200"
+            trigger="hover"
+          >
+            <div v-for="point in scope.row.kg.tProjectFlowStopList" :key="point.id" class="point-box">
+              <div class="point-title">
+                <i class="el-icon-warning" style="color: #FF0000"></i>
+                {{ point.department }}
+              </div>
+              <div class="point-content">
+                {{ point.content }}
+              </div>
+            </div>
+            <img
+              slot="reference"
+              :src="setStatusImg(scope.row.kg ? scope.row.kg.status : null)"
+              style="width: 20px;height: 20px;"
+            />
+          </el-popover>
+          <img
+            v-else
+            :src="setStatusImg(scope.row.kg ? scope.row.kg.status : null)"
+            style="width: 20px;height: 20px;"
+          />
+          <div :style="setStyle(scope.row.kg)">{{ setTextTime(scope.row.kg) }}</div>
+          <div class="line1" :style="setLineColor(scope.row.kg)"></div>
+          <div class="jg-day">
+            {{
+              beApartDays(
+                scope.row && scope.row.qtsx ? scope.row.qtsx.endTime : null,
+                scope.row && scope.row.kg ? scope.row.kg.endTime : null
+              )
+            }}
+          </div>
+        </div>
+      </template>
+    </el-table-column> -->
+    <el-table-column prop="projectDay" label="项目用时" align="center" width="130">
+      <template slot-scope="scope">
+        <div>{{ scope.row.projectDay || "--" }}</div>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+import flowNodeTemp from "./flowNodeTemp.vue";
+
+const blueColor = "#4D82FF";
+const redColor = "#FF0000";
+const grayColor = "#B8B8B8";
+const bbgColor = "#F2F5FE";
+const rbgColor = "#FFEEEE";
+const gbgColor = "#F5F5F5";
+const greenColor = "#0DC807";
+const greenBgColor = "#EBF9EF";
+import circleBlue from "@images/project/level-blue@2x.png";
+import circleGreen from "@images/project/level-green@2x.png";
+import circleRed from "@images/project/level-red@2x.png";
+import circleGray from "@images/project/level-gray@2x.png";
+export default {
+  name: "flowChart",
+  components: { flowNodeTemp },
+  props: ["curData", "tableHeight", "headerRowStyle", "loading"],
+  data() {
+    return {
+      transFormData: [],
+      isDetail: false,
+    };
+  },
+  watch: {
+    curData: {
+      handler(newValue, oldValue) {
+        const flows = ["洽谈", "签约", "土地手续", "立项审批", "其他事项", "开工"];
+        const nArr = JSON.parse(JSON.stringify(newValue));
+        // this.transFormData = nArr.map((par, pIndex) => {
+        //   if (par.tProjectFlows && par.tProjectFlows.length > 0) {
+        //     for (let i = 0; i < 6; i++) {
+        //       const flow = par.tProjectFlows[i];
+        //       if (flow && flow.id) {
+        //         if (!flow.processSchedule) {
+        //           flow.color = grayColor;
+        //           flow.bgColor = gbgColor;
+        //           flow.blocking = true;
+        //           flow.processSchedule = flows[i];
+        //         } else {
+        //           if (flow.status === '遇到堵点') {
+        //             flow.color = redColor
+        //             flow.bgColor = rbgColor
+        //             flow.blocking = true;
+        //           }
+        //           if (flow.status === '顺利推进') {
+        //             flow.color = greenColor
+        //             flow.bgColor = greenBgColor
+        //           }
+        //           if (flow.status === '已完成') {
+        //             flow.color = blueColor
+        //             flow.bgColor = bbgColor
+        //           }
+        //           if (flow.status === '未开始') {
+        //             flow.color = grayColor
+        //             flow.bgColor = gbgColor
+        //             flow.blocking = true;
+        //           }
+        //         }
+        //       } else {
+        //         par.tProjectFlows.push({
+        //           processSchedule: flows[i],
+        //           color: grayColor,
+        //           bgColor: gbgColor,
+        //           blocking: true,
+        //         });
+        //       }
+        //     }
+        //   }
+        //   return par;
+        // });
+        this.transFormData = nArr.map((par, pIndex) => {
+          if (par.tProjectFlows && par.tProjectFlows.length > 0) {
+            for (let i = 0; i < 6; i++) {
+              const flow = par.tProjectFlows[i];
+              if (flow && flow.id) {
+                if (!flow.processSchedule) {
+                  flow.processSchedule = flows[i];
+                } else {
+                  if (flow.processSchedule === "洽谈") {
+                    par.qt = flow;
+                  }
+                  if (flow.processSchedule === "签约") {
+                    par.qy = flow;
+                  }
+                  if (flow.processSchedule === "土地手续") {
+                    par.tdsx = flow;
+                  }
+                  if (flow.processSchedule === "审批手续" || flow.processSchedule === "立项审批") {
+                    par.spsx = flow;
+                  }
+                  if (flow.processSchedule === "其他事项") {
+                    par.qtsx = flow;
+                  }
+                  if (flow.processSchedule === "开工") {
+                    par.kg = flow;
+                  }
+                }
+              } else {
+                par.tProjectFlows.push({
+                  processSchedule: flows[i],
+                });
+              }
+            }
+          }
+          return par;
+        });
+      },
+      deep: true,
+    },
+  },
+  methods: {
+    handleCellClick(row, col) {
+      if (col.label === "项目名称") {
+        this.$emit("changeEdit", row, "detail");
+      }
+    },
+    beApartDays(end, start) {
+      if (end && start) {
+        // 时间格式化
+        let date1 = new Date(end);
+        let date2 = new Date(start);
+        date1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
+        date2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
+        //目标时间减去当前时间
+        const diff = date1.getTime() - date2.getTime();
+        //计算当前时间与结束时间之间相差天数
+        return `${Math.abs(diff) / (24 * 60 * 60 * 1000)}天`;
+      } else {
+        return "";
+      }
+    },
+    setLineColor(row) {
+      // green rgb(4,244,8,0.1)
+      // red rgb(255,26,26,0.1)
+      // gray rgb(191,191,191,0.1)
+      // blue rgb(25,143,255,0.1)
+      const status = row ? row.status : null;
+      if (status && status === "已完成") {
+        return {
+          backgroundColor: "rgba(25,143,255,0.1)",
+        };
+      } else if (status && status === "遇到堵点") {
+        return {
+          backgroundColor: "rgba(255,26,26,0.1)",
+        };
+      } else if (status && status === "顺利推进") {
+        return {
+          backgroundColor: "rgba(4,244,8,0.1)",
+        };
+      } else {
+        return {
+          backgroundColor: "rgba(191,191,191,0.1)",
+        };
+      }
+    },
+    setStyle(row) {
+      const status = row ? row.status : null;
+      if (status && status === "已完成") {
+        return {
+          color: "#333",
+          fontWeight: "bold",
+        };
+      } else if (status && status === "遇到堵点") {
+        return {
+          color: "#D60000",
+          fontWeight: "bold",
+        };
+      } else if (status && status === "顺利推进") {
+        return {
+          color: "#048700",
+          fontWeight: "bold",
+        };
+      }
+    },
+    setTextTime(row) {
+      const status = row ? row.status : null;
+      if (status && status === "已完成") {
+        return row && row.processSchedule === "洽谈" ? row.startTime : row.endTime || "--";
+      } else if (status && status === "遇到堵点") {
+        return row && row.endTime ? row.endTime : "进行中";
+      } else if (status && status === "顺利推进") {
+        return row && row.endTime ? row.endTime : "进行中";
+      } else {
+        return "--";
+      }
+    },
+    setStatusImg(status) {
+      if (status === "已完成") {
+        return circleBlue;
+      } else if (status === "遇到堵点") {
+        return circleRed;
+      } else if (status === "顺利推进") {
+        return circleGreen;
+      } else {
+        return circleGray;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+.flow-box {
+  display: flex;
+  align-items: center;
+}
+
+/deep/ .cell {
+  padding: 0 !important;
+}
+
+.flowitem {
+  position: relative;
+  width: 100%;
+}
+
+.flowitem img {
+  position: relative;
+  z-index: 1;
+}
+
+.flowitem .line1 {
+  width: 50%;
+  height: 6px;
+  position: absolute;
+  top: 15%;
+  left: 0;
+}
+
+.flowitem .line2 {
+  width: 50%;
+  height: 6px;
+  position: absolute;
+  top: 15%;
+  right: 0;
+}
+
+.jg-day {
+  position: absolute;
+  top: 15%;
+  font-size: 14px;
+  height: 30px;
+  line-height: 30px;
+}
+
+.point-box {
+  font-size: 13px;
+
+  .point-title {
+    font-weight: bold;
+  }
+
+  .point-content {
+    padding: 5px 0;
+  }
+}
+</style>

src/views/resources/page/common/flowChartDetail.vue

+<template>
+  <div class="item">
+    <div class="title" :style="{ background: setColor(item.status) }">{{ item.processSchedule }}</div>
+    <el-popover v-if="item.status === '遇到堵点'" placement="top-start" width="200" trigger="hover">
+      <div v-for="point in item.tProjectFlowStopList" :key="point.id" class="point-box">
+        <div class="point-title">
+          <i class="el-icon-warning" style="color: #FF0000"></i>
+          {{ point.department }}
+        </div>
+        <div class="point-content">
+          {{ point.content }}
+        </div>
+      </div>
+      <img slot="reference" style="width: 20px;height: 20px;" :src="setImg(item.status)" />
+    </el-popover>
+    <img v-else style="width: 20px;height: 20px;" :src="setImg(item.status)" />
+    <div class="line" v-if="showLine">
+      <div class="jg-day" v-if="jgEnd">{{ beApartDays(item.startTime, jgEnd) }}天</div>
+      <div class="line-left" :style="setLineColor(lastStatus)"></div>
+    </div>
+    <div class="time">
+      {{ setTimeStatus(item) }}
+    </div>
+  </div>
+</template>
+
+<script>
+import circleBlue from "@images/project/level-blue@2x.png";
+import circleGreen from "@images/project/level-green@2x.png";
+import circleRed from "@images/project/level-red@2x.png";
+import circleGray from "@images/project/level-gray@2x.png";
+
+export default {
+  name: "flowChartDetail",
+  props: ["showLine", "jgEnd", "lastStatus", "item"],
+  data() {
+    return {
+      jgDay: 0,
+    };
+  },
+  methods: {
+    setColor(title) {
+      if (title === "遇到堵点") {
+        return "#FF0000";
+      } else if (title === "顺利推进") {
+        return "#048700";
+      } else if (title === "已完成") {
+        return "#1E90FF";
+      } else {
+        return "#B8B8B8";
+      }
+    },
+    setImg(title) {
+      if (title === "已完成") {
+        return circleBlue;
+      } else if (title === "遇到堵点") {
+        return circleRed;
+      } else if (title === "顺利推进") {
+        return circleGreen;
+      } else {
+        return circleGray;
+      }
+    },
+    setLineColor(status) {
+      // green rgb(4,244,8,0.1)
+      // red rgb(255,26,26,0.1)
+      // gray rgb(191,191,191,0.1)
+      // blue rgb(25,143,255,0.1)
+      // const status = row ? row.status : null
+      if (status && status === "已完成") {
+        return {
+          backgroundColor: "rgba(25,143,255,0.1)",
+        };
+      } else if (status && status === "遇到堵点") {
+        return {
+          backgroundColor: "rgba(255,26,26,0.1)",
+        };
+      } else if (status && status === "顺利推进") {
+        return {
+          backgroundColor: "rgba(4,244,8,0.1)",
+        };
+      } else {
+        return {
+          backgroundColor: "rgba(191,191,191,0.1)",
+        };
+      }
+    },
+    setTimeStatus(row) {
+      const status = row ? row.status : null;
+      if (status && status === "已完成") {
+        return row && row.processSchedule === "洽谈" ? row.startTime : row.endTime || "--";
+      } else if (status && status === "遇到堵点") {
+        return row && row.endTime ? row.endTime : "进行中";
+      } else if (status && status === "顺利推进") {
+        return row && row.endTime ? row.endTime : "进行中";
+      } else {
+        return "--";
+      }
+    },
+    /**
+     * 计算两个日期相隔多少天，不限制先后顺序
+     * @param {Date} Date_start 开始时间
+     * @param {Date} Date_end 结束时间
+     * @returns number
+     * 可传一个参数，第二个参数不传为当前日期
+     */
+    beApartDays(Date_start, Date_end = new Date()) {
+      // 时间格式化
+      let date1 = new Date(Date_start);
+      let date2 = new Date(Date_end);
+      date1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
+      date2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
+      //目标时间减去当前时间
+      const diff = date1.getTime() - date2.getTime();
+      //计算当前时间与结束时间之间相差天数
+      return Math.abs(diff) / (24 * 60 * 60 * 1000);
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+.item {
+  flex: 1;
+  text-align: center;
+  position: relative;
+  height: 120px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.line {
+  width: 80%;
+  height: 14px;
+  position: absolute;
+  top: 45%;
+  left: 60%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  z-index: 0;
+  //overflow: hidden;
+
+  .line-left {
+    flex: 1;
+    height: 6px;
+  }
+
+  .line-right {
+    width: 12px;
+    text-align: center;
+  }
+
+  .jg-day {
+    position: absolute;
+    width: 50px;
+    text-align: center;
+    left: 50%;
+    margin-left: -25px;
+    top: 10px;
+    color: #373737;
+    font-size: 14px;
+  }
+}
+
+.title {
+  color: white;
+  width: 106px;
+  height: 30px;
+  border-radius: 8px;
+  line-height: 30px;
+  margin: 0 auto 5px auto;
+}
+
+.time {
+  border-radius: 8px;
+  height: 30px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto;
+
+  .time-point {
+    font-weight: bold;
+    color: #e20000;
+  }
+
+  .time-item {
+    font-weight: bold;
+    color: #333;
+  }
+
+  span {
+    line-height: normal;
+  }
+}
+
+.point-box {
+  font-size: 13px;
+
+  .point-title {
+    font-weight: bold;
+  }
+
+  .point-content {
+    padding: 5px 0;
+  }
+}
+</style>

src/views/resources/page/common/flowNodeTemp.vue

+<template>
+  <div class="item">
+    <div class="title" :style="{ background: setColor(status) }">{{ title }}</div>
+    <el-popover v-if="status === '遇到堵点'" placement="top-start" width="200" trigger="hover">
+      <div v-for="point in currentPointData" :key="point.id" class="point-box">
+        <div class="point-title">
+          <i class="el-icon-warning" style="color: red"></i>
+          {{ point.department }}
+        </div>
+        <div class="point-content">
+          {{ point.content }}
+        </div>
+      </div>
+      <img slot="reference" style="width: 20px;height: 20px;" :src="setImg(status)" />
+    </el-popover>
+    <img v-else style="width: 20px;height: 20px;" :src="setImg(status)" />
+    <div class="line" v-if="showLine">
+      <div class="jg-day" v-if="jgEnd">{{ beApartDays(jgStart, jgEnd) }}天</div>
+      <div class="line-left" :style="lineStyle(blocking)"></div>
+    </div>
+    <div class="time">
+      <div v-if="status === '遇到堵点'" class="time-point">进行中</div>
+      <div v-else-if="startTime" class="time-item">
+        <span>{{ endTime }}</span>
+      </div>
+      <div v-else>--</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import circleBlue from "@images/project/level-blue@2x.png";
+import circleGreen from "@images/project/level-green@2x.png";
+import circleRed from "@images/project/level-red@2x.png";
+import circleGray from "@images/project/level-gray@2x.png";
+
+export default {
+  name: "flowNodeTemp",
+  props: [
+    "title",
+    "showLine",
+    "blocking",
+    "startTime",
+    "endTime",
+    "currentPoint",
+    "currentPointData",
+    "jgStart",
+    "jgEnd",
+    "status",
+  ],
+  data() {
+    return {
+      jgDay: 0,
+    };
+  },
+  methods: {
+    setColor(title) {
+      if (title === "遇到堵点") {
+        return "#FF0000";
+      } else if (title === "顺利推进") {
+        return "#048700";
+      } else if (title === "已完成") {
+        return "#1E90FF";
+      } else {
+        return "#B8B8B8";
+      }
+    },
+    setImg(title) {
+      if (title === "已完成") {
+        return circleBlue;
+      } else if (title === "遇到堵点") {
+        return circleRed;
+      } else if (title === "顺利推进") {
+        return circleGreen;
+      } else {
+        return circleGray;
+      }
+    },
+    lineStyle(blocking) {
+      // green rgb(4,244,8)
+      // red rgb(255,26,26)
+      return {
+        backgroundColor: blocking ? "rgb(191,191,191,0.1)" : "rgb(25,143,255,0.1)",
+      };
+    },
+    /**
+     * 计算两个日期相隔多少天，不限制先后顺序
+     * @param {Date} Date_start 开始时间
+     * @param {Date} Date_end 结束时间
+     * @returns number
+     * 可传一个参数，第二个参数不传为当前日期
+     */
+    beApartDays(Date_start, Date_end = new Date()) {
+      // 时间格式化
+      let date1 = new Date(Date_start);
+      let date2 = new Date(Date_end);
+      date1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
+      date2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
+      //目标时间减去当前时间
+      const diff = date1.getTime() - date2.getTime();
+      //计算当前时间与结束时间之间相差天数
+      return Math.abs(diff) / (24 * 60 * 60 * 1000);
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+.item {
+  flex: 1;
+  text-align: center;
+  position: relative;
+  height: 120px;
+}
+
+.line {
+  width: 80%;
+  height: 14px;
+  position: absolute;
+  top: 32%;
+  left: 60%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  z-index: 0;
+  //overflow: hidden;
+
+  .line-left {
+    flex: 1;
+    height: 6px;
+  }
+
+  .line-right {
+    width: 12px;
+    text-align: center;
+  }
+
+  .jg-day {
+    position: absolute;
+    width: 50px;
+    text-align: center;
+    left: 50%;
+    margin-left: -25px;
+    top: 10px;
+    color: #373737;
+    font-size: 14px;
+  }
+}
+
+.title {
+  color: white;
+  width: 106px;
+  height: 30px;
+  border-radius: 8px;
+  line-height: 30px;
+  margin: 0 auto 5px auto;
+}
+
+.time {
+  border-radius: 8px;
+  height: 30px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto;
+
+  .time-point {
+    font-weight: bold;
+  }
+
+  .time-item {
+    font-weight: bold;
+    color: #333;
+  }
+
+  span {
+    line-height: normal;
+  }
+}
+
+.point-box {
+  font-size: 13px;
+
+  .point-title {
+    font-weight: bold;
+  }
+
+  .point-content {
+    padding: 5px 0;
+  }
+}
+</style>

src/views/resources/page/common/keyProjectDetail.vue

+<template>
+  <div class="key-project-detail">
+    <el-card class="box-card" style="margin-bottom: 10px" shadow="never">
+      <div slot="header" class="box-card-header">
+        <span style="display: flex;align-items: center;">
+          <img style="width: 26px;height: 22px; margin:0 5px" :src="topImg" alt="img" />
+          <span style="font-size: 22px; font-weight: bold">{{ projectName }}</span>
+        </span>
+        <el-button size="mini" type="primary" @click="goBack" style="width: 80px;">返回</el-button>
+      </div>
+      <div>
+        <div v-if="curFlow.length === 0">无流程</div>
+        <div v-else class="flow-box">
+          <flowChartDetail
+            v-for="(item, index) in curFlow"
+            :key="item.processSchedule"
+            :item="item"
+            :showLine="index < curFlow.length - 1"
+            :startTime="item.startTime"
+            :lastStatus="curFlow[index + 1] && curFlow[index + 1].status"
+            :jgEnd="curFlow[index + 1] && curFlow[index + 1].endTime ? curFlow[index + 1].endTime : null"
+          >
+          </flowChartDetail>
+          <div class="project-day">
+            <div class="div1">项目用时</div>
+            <div>{{ projectDay }}</div>
+          </div>
+        </div>
+      </div>
+    </el-card>
+    <el-row :gutter="20">
+      <el-col :span="18">
+        <el-card class="box-card" shadow="never">
+          <div slot="header" class="box-card-header">
+            <span>项目信息</span>
+            <span>
+              <el-button size="mini" type="primary" icon="el-icon-download" @click="downProject">项目下载</el-button>
+              <el-button size="mini" type="warning" icon="el-icon-edit-outline" @click="editProject"
+                >项目编辑</el-button
+              >
+              <!-- <el-button size="mini" type="danger" icon="el-icon-edit-outline" @click="disProject"
+              >项目调度</el-button
+              > -->
+            </span>
+          </div>
+          <div class="form-box" :style="{ height: `${formBoxHeight}px` }">
+            <div class="grid-title">基本信息</div>
+            <el-form :model="formInfo" ref="formInfo" label-position="top" size="mini" disabled>
+              <el-row :gutter="20">
+                <el-col :span="8">
+                  <el-form-item label="项目名称：" prop="projectName">
+                    <el-input v-model="formInfo.projectName" placeholder="项目名称"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="包联领导：" prop="projectLeader">
+                    <el-input v-model="formInfo.projectLeader" placeholder="包联领导"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="牵头部门：" prop="leadingDepartment">
+                    <el-input v-model="formInfo.leadingDepartment" placeholder="牵头部门"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="投资主体：" prop="investmentEntity">
+                    <el-input v-model="formInfo.investmentEntity" placeholder="投资主体"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="总投资：" prop="totalMoney">
+                    <el-input v-model="formInfo.totalMoney" placeholder="总投资(亿元)"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="占地面积：" prop="floorSpace">
+                    <el-input v-model="formInfo.floorSpace" placeholder="占地面积(亩)"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="项目介绍：" prop="projectIntroduce">
+                    <el-input v-model="formInfo.projectIntroduce" placeholder="项目介绍"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="建设地址：" prop="constructionAddress">
+                    <el-input v-model="formInfo.constructionAddress" placeholder="建设地址"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="政策诉求：" prop="policyStatement">
+                    <el-input v-model="formInfo.policyStatement" placeholder="政策诉求"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="投资承诺：" prop="investmentCommitment">
+                    <el-input v-model="formInfo.investmentCommitment" placeholder="投资承诺"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="项目进展：" prop="projectProgress">
+                    <el-input
+                      v-model="formInfo.projectProgress"
+                      type="textarea"
+                      :rows="2"
+                      placeholder="项目进展"
+                    ></el-input>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <div class="grid-title">项目阶段</div>
+              <el-row :gutter="20">
+                <!-- 洽谈 -->
+                <el-col :span="8">
+                  <el-form-item label="洽谈阶段开始时间：" prop="startTime">
+                    <el-date-picker
+                      v-model="formInfo.tProjectFlows[0].startTime"
+                      type="date"
+                      placeholder="选择日期"
+                      value-format="yyyy-MM-dd"
+                    >
+                    </el-date-picker>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="洽谈阶段结束时间：" prop="endTime">
+                    <el-date-picker
+                      v-model="formInfo.tProjectFlows[0].endTime"
+                      type="date"
+                      placeholder="选择日期"
+                      value-format="yyyy-MM-dd"
+                    >
+                    </el-date-picker>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="是否存在堵点：">
+                    <el-select v-model="formInfo.isPoint1" placeholder="请选择">
+                      <el-option label="是" value="yes"></el-option>
+                      <el-option label="否" value="no"></el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <div
+                  v-if="
+                    formInfo.tProjectFlows[0].tProjectFlowStopList &&
+                      formInfo.tProjectFlows[0].tProjectFlowStopList.length > 0
+                  "
+                  class="point-box"
+                >
+                  <el-button size="small" style="margin-top: 10px" type="primary">新增堵点 </el-button>
+                  <el-row
+                    v-for="(item, index) in formInfo.tProjectFlows[0].tProjectFlowStopList"
+                    :key="`row${index}`"
+                    class="point-box-item"
+                    :gutter="20"
+                  >
+                    <el-col :span="24">
+                      <el-form-item prop="content">
+                        <div slot="label" class="form-point-label">
+                          <span>{{ `堵点${index + 1}` }}</span>
+                          <span class="delete-point"><i class="el-icon-delete"></i>删除</span>
+                        </div>
+                        <el-input v-model="item.content" placeholder="堵点"></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="24">
+                      <el-form-item label="推进要求：" prop="requirements">
+                        <el-input v-model="item.requirements" placeholder="推进要求"></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-form-item label="责任部门：" prop="department">
+                        <el-input v-model="item.department" placeholder="责任部门"></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-form-item label="完成时限：" prop="successTime">
+                        <el-date-picker
+                          type="date"
+                          v-model="item.successTime"
+                          placeholder="选择日期"
+                          value-format="yyyy-MM-dd"
+                        >
+                        </el-date-picker>
+                      </el-form-item>
+                    </el-col>
+                  </el-row>
+                </div>
+                <!-- 洽谈end -->
+                <!-- 签约 -->
+                <el-col :span="8">
+                  <el-form-item label="签约阶段开始时间：" prop="startTime">
+                    <el-date-picker
+                      v-model="formInfo.tProjectFlows[1].startTime"
+                      type="date"
+                      placeholder="选择日期"
+                      value-format="yyyy-MM-dd"
+                    >
+                    </el-date-picker>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="签约阶段结束时间：" prop="endTime">
+                    <el-date-picker
+                      v-model="formInfo.tProjectFlows[1].endTime"
+                      type="date"
+                      placeholder="选择日期"
+                      value-format="yyyy-MM-dd"
+                    >
+                    </el-date-picker>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="是否存在堵点：" prop="isPoint2">
+                    <el-select v-model="formInfo.isPoint2" placeholder="请选择">
+                      <el-option label="是" value="yes"></el-option>
+                      <el-option label="否" value="no"></el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <div
+                  v-if="
+                    formInfo.tProjectFlows[1].tProjectFlowStopList &&
+                      formInfo.tProjectFlows[1].tProjectFlowStopList.length > 0
+                  "
+                  class="point-box"
+                >
+                  <el-button size="small" style="margin-top: 10px" type="primary">新增堵点 </el-button>
+                  <el-row
+                    v-for="(item, index) in formInfo.tProjectFlows[1].tProjectFlowStopList"
+                    :key="`row${index}`"
+                    class="point-box-item"
+                    :gutter="20"
+                  >
+                    <el-col :span="24">
+                      <el-form-item prop="content">
+                        <div slot="label" class="form-point-label">
+                          <span>{{ `堵点${index + 1}` }}</span>
+                          <span class="delete-point"><i class="el-icon-delete"></i>删除</span>
+                        </div>
+                        <el-input v-model="item.content" placeholder="堵点"></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="24">
+                      <el-form-item label="推进要求：" prop="requirements">
+                        <el-input v-model="item.requirements" placeholder="推进要求"></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-form-item label="责任部门：" prop="department">
+                        <el-input v-model="item.department" placeholder="责任部门"></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-form-item label="完成时限：" prop="successTime">
+                        <el-date-picker
+                          type="date"
+                          v-model="item.successTime"
+                          placeholder="选择日期"
+                          value-format="yyyy-MM-dd"
+                        >
+                        </el-date-picker>
+                      </el-form-item>
+                    </el-col>
+                  </el-row>
+                </div>
+                <!-- 签约end -->
+                <!-- 土地手续 -->
+                <el-col :span="8">
+                  <el-form-item label="土地手续阶段开始时间：" prop="startTime">
+                    <el-date-picker
+                      v-model="formInfo.tProjectFlows[2].startTime"
+                      type="date"
+                      placeholder="选择日期"
+                      value-format="yyyy-MM-dd"
+                    >
+                    </el-date-picker>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="土地手续阶段结束时间：" prop="endTime">
+                    <el-date-picker
+                      v-model="formInfo.tProjectFlows[2].endTime"
+                      type="date"
+                      placeholder="选择日期"
+                      value-format="yyyy-MM-dd"
+                    >
+                    </el-date-picker>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="是否存在堵点：" prop="isPoint3">
+                    <el-select v-model="formInfo.isPoint3" placeholder="请选择">
+                      <el-option label="是" value="yes"></el-option>
+                      <el-option label="否" value="no"></el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <div
+                  v-if="
+                    formInfo.tProjectFlows[2].tProjectFlowStopList &&
+                      formInfo.tProjectFlows[2].tProjectFlowStopList.length > 0
+                  "
+                  class="point-box"
+                >
+                  <el-button size="small" style="margin-top: 10px" type="primary">新增堵点 </el-button>
+                  <el-row
+                    v-for="(item, index) in formInfo.tProjectFlows[2].tProjectFlowStopList"
+                    :key="`row${index}`"
+                    class="point-box-item"
+                    :gutter="20"
+                  >
+                    <el-col :span="24">
+                      <el-form-item prop="content">
+                        <div slot="label" class="form-point-label">
+                          <span>{{ `堵点${index + 1}` }}</span>
+                          <span class="delete-point"><i class="el-icon-delete"></i>删除</span>
+                        </div>
+                        <el-input v-model="item.content" placeholder="堵点"></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="24">
+                      <el-form-item label="推进要求：" prop="requirements">
+                        <el-input v-model="item.requirements" placeholder="推进要求"></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-form-item label="责任部门：" prop="department">
+                        <el-input v-model="item.department" placeholder="责任部门"></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-form-item label="完成时限：" prop="successTime">
+                        <el-date-picker
+                          type="date"
+                          v-model="item.successTime"
+                          placeholder="选择日期"
+                          value-format="yyyy-MM-dd"
+                        >
+                        </el-date-picker>
+                      </el-form-item>
+                    </el-col>
+                  </el-row>
+                </div>
+                <!-- 土地手续end -->
+                <!-- 立项审批 -->
+                <el-col :span="8">
+                  <el-form-item label="立项审批阶段开始时间：" prop="startTime">
+                    <el-date-picker
+                      v-model="formInfo.tProjectFlows[3].startTime"
+                      type="date"
+                      placeholder="选择日期"
+                      value-format="yyyy-MM-dd"
+                    >
+                    </el-date-picker>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="立项审批阶段结束时间：" prop="endTime">
+                    <el-date-picker
+                      v-model="formInfo.tProjectFlows[3].endTime"
+                      type="date"
+                      placeholder="选择日期"
+                      value-format="yyyy-MM-dd"
+                    >
+                    </el-date-picker>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="是否存在堵点：" prop="isPoint4">
+                    <el-select v-model="formInfo.isPoint4" placeholder="请选择">
+                      <el-option label="是" value="yes"></el-option>
+                      <el-option label="否" value="no"></el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <div
+                  v-if="
+                    formInfo.tProjectFlows[3].tProjectFlowStopList &&
+                      formInfo.tProjectFlows[3].tProjectFlowStopList.length > 0
+                  "
+                  class="point-box"
+                >
+                  <el-button size="small" style="margin-top: 10px" type="primary">新增堵点 </el-button>
+                  <el-row
+                    v-for="(item, index) in formInfo.tProjectFlows[3].tProjectFlowStopList"
+                    :key="`row${index}`"
+                    class="point-box-item"
+                    :gutter="20"
+                  >
+                    <el-col :span="24">
+                      <el-form-item prop="content">
+                        <div slot="label" class="form-point-label">
+                          <span>{{ `堵点${index + 1}` }}</span>
+                          <span class="delete-point"><i class="el-icon-delete"></i>删除</span>
+                        </div>
+                        <el-input v-model="item.content" placeholder="堵点"></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="24">
+                      <el-form-item label="推进要求：" prop="requirements">
+                        <el-input v-model="item.requirements" placeholder="推进要求"></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-form-item label="责任部门：" prop="department">
+                        <el-input v-model="item.department" placeholder="责任部门"></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-form-item label="完成时限：" prop="successTime">
+                        <el-date-picker
+                          type="date"
+                          v-model="item.successTime"
+                          placeholder="选择日期"
+                          value-format="yyyy-MM-dd"
+                        >
+                        </el-date-picker>
+                      </el-form-item>
+                    </el-col>
+                  </el-row>
+                </div>
+                <!-- 立项审批end -->
+                <!-- 其他事项 -->
+                <el-col :span="8">
+                  <el-form-item label="其他事项阶段开始时间：" prop="startTime">
+                    <el-date-picker
+                      v-model="formInfo.tProjectFlows[4].startTime"
+                      type="date"
+                      placeholder="选择日期"
+                      value-format="yyyy-MM-dd"
+                    >
+                    </el-date-picker>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="其他事项阶段结束时间：" prop="endTime">
+                    <el-date-picker
+                      v-model="formInfo.tProjectFlows[4].endTime"
+                      type="date"
+                      placeholder="选择日期"
+                      value-format="yyyy-MM-dd"
+                    >
+                    </el-date-picker>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="是否存在堵点：" prop="isPoint5">
+                    <el-select v-model="formInfo.isPoint5" placeholder="请选择">
+                      <el-option label="是" value="yes"></el-option>
+                      <el-option label="否" value="no"></el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <div
+                  v-if="
+                    formInfo.tProjectFlows[4].tProjectFlowStopList &&
+                      formInfo.tProjectFlows[4].tProjectFlowStopList.length > 0
+                  "
+                  class="point-box"
+                >
+                  <el-button size="small" style="margin-top: 10px" type="primary">新增堵点 </el-button>
+                  <el-row
+                    v-for="(item, index) in formInfo.tProjectFlows[4].tProjectFlowStopList"
+                    :key="`row${index}`"
+                    class="point-box-item"
+                    :gutter="20"
+                  >
+                    <el-col :span="24">
+                      <el-form-item prop="content">
+                        <div slot="label" class="form-point-label">
+                          <span>{{ `堵点${index + 1}` }}</span>
+                          <span class="delete-point"><i class="el-icon-delete"></i>删除</span>
+                        </div>
+                        <el-input v-model="item.content" placeholder="堵点"></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="24">
+                      <el-form-item label="推进要求：" prop="requirements">
+                        <el-input v-model="item.requirements" placeholder="推进要求"></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-form-item label="责任部门：" prop="department">
+                        <el-input v-model="item.department" placeholder="责任部门"></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-form-item label="完成时限：" prop="successTime">
+                        <el-date-picker
+                          type="date"
+                          v-model="item.successTime"
+                          placeholder="选择日期"
+                          value-format="yyyy-MM-dd"
+                        >
+                        </el-date-picker>
+                      </el-form-item>
+                    </el-col>
+                  </el-row>
+                </div>
+                <!-- 其他事项end -->
+                <!-- 开工 -->
+                <el-col :span="8">
+                  <el-form-item label="开工阶段开始时间：" prop="startTime">
+                    <el-date-picker
+                      v-model="formInfo.tProjectFlows[5].startTime"
+                      type="date"
+                      placeholder="选择日期"
+                      value-format="yyyy-MM-dd"
+                    >
+                    </el-date-picker>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="开工阶段结束时间：" prop="endTime">
+                    <el-date-picker
+                      v-model="formInfo.tProjectFlows[5].endTime"
+                      type="date"
+                      placeholder="选择日期"
+                      value-format="yyyy-MM-dd"
+                    >
+                    </el-date-picker>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="是否存在堵点：" prop="isPoint6">
+                    <el-select v-model="formInfo.isPoint6" placeholder="请选择">
+                      <el-option label="是" value="yes"></el-option>
+                      <el-option label="否" value="no"></el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <div
+                  v-if="
+                    formInfo.tProjectFlows[5].tProjectFlowStopList &&
+                      formInfo.tProjectFlows[5].tProjectFlowStopList.length > 0
+                  "
+                  class="point-box"
+                >
+                  <el-button size="small" style="margin-top: 10px" type="primary">新增堵点 </el-button>
+                  <el-row
+                    v-for="(item, index) in formInfo.tProjectFlows[5].tProjectFlowStopList"
+                    :key="`row${index}`"
+                    class="point-box-item"
+                    :gutter="20"
+                  >
+                    <el-col :span="24">
+                      <el-form-item prop="content">
+                        <div slot="label" class="form-point-label">
+                          <span>{{ `堵点${index + 1}` }}</span>
+                          <span class="delete-point"><i class="el-icon-delete"></i>删除</span>
+                        </div>
+                        <el-input v-model="item.content" placeholder="堵点"></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="24">
+                      <el-form-item label="推进要求：" prop="requirements">
+                        <el-input v-model="item.requirements" placeholder="推进要求"></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-form-item label="责任部门：" prop="department">
+                        <el-input v-model="item.department" placeholder="责任部门"></el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                      <el-form-item label="完成时限：" prop="successTime">
+                        <el-date-picker
+                          type="date"
+                          v-model="item.successTime"
+                          placeholder="选择日期"
+                          value-format="yyyy-MM-dd"
+                        >
+                        </el-date-picker>
+                      </el-form-item>
+                    </el-col>
+                  </el-row>
+                </div>
+                <!-- 开工end -->
+              </el-row>
+            </el-form>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card class="work-card" shadow="never">
+          <div slot="header">
+            <span>工作动态</span>
+          </div>
+          <div
+            :style="{
+              height: `${formBoxHeight}px`,
+              overflowY: 'auto',
+              padding: '10px',
+            }"
+          >
+            <div
+              v-for="(item, index) in workData"
+              :key="index"
+              class="item"
+              :style="{
+                borderBottom: index !== workData.length - 1 && '1px solid #E5E5E5',
+              }"
+            >
+              <div class="work-item-top">
+                <span><i class="el-icon-date"></i> {{ item.date }}</span>
+                <span><i class="el-icon-s-custom"></i> {{ item.uname }}</span>
+              </div>
+              <div><i class="el-icon-s-order"></i> {{ item.text }}</div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+    <backModel
+      :visible="showBackReason"
+      @close="switchBackReason"
+      @returnBack="returnBack"
+      curTitle="项目调度"
+    ></backModel>
+  </div>
+</template>
+<script>
+import topImg from "@images/project/icon-xmgl4.png";
+import { detailKeyProject, keyProjectWork } from "@/api/projectManaApi";
+import flowChartDetail from "./flowChartDetail.vue";
+import backModel from "./backModel.vue";
+
+const flows = [
+  {
+    processSchedule: "洽谈",
+    startTime: "",
+    endTime: "",
+    tProjectFlowStopList: [],
+  },
+  {
+    processSchedule: "签约",
+    startTime: "",
+    endTime: "",
+    tProjectFlowStopList: [],
+  },
+  {
+    processSchedule: "土地手续",
+    startTime: "",
+    endTime: "",
+    tProjectFlowStopList: [],
+  },
+  {
+    processSchedule: "立项审批",
+    startTime: "",
+    endTime: "",
+    tProjectFlowStopList: [],
+  },
+  {
+    processSchedule: "其他事项",
+    startTime: "",
+    endTime: "",
+    tProjectFlowStopList: [],
+  },
+  {
+    processSchedule: "开工",
+    startTime: "",
+    endTime: "",
+    tProjectFlowStopList: [],
+  },
+];
+export default {
+  name: "keyProjectDetail",
+  props: ["curId"],
+  components: { flowChartDetail, backModel },
+  data() {
+    return {
+      topImg: topImg,
+      formInfo: {
+        projectName: "",
+        projectLeader: "",
+        leadingDepartment: "",
+        investmentEntity: "",
+        totalMoney: "",
+        floorSpace: "",
+        projectIntroduce: "",
+        constructionAddress: "",
+        policyStatement: "",
+        investmentCommitment: "",
+        projectProgress: "",
+        isPoint1: "",
+        isPoint2: "",
+        isPoint3: "",
+        isPoint4: "",
+        isPoint5: "",
+        isPoint6: "",
+        tProjectFlows: flows,
+      },
+      formBoxHeight: document.body.clientHeight - 430,
+      projectName: "",
+      projectDay: "--",
+      workData: [],
+      curFlow: [],
+      showBackReason: false,
+    };
+  },
+  created() {
+    if (this.curId) {
+      this.initData(this.curId);
+    }
+  },
+  mounted() {
+    window.addEventListener(
+      "resize",
+      () => {
+        this.formBoxHeight = document.body.clientHeight - 430;
+      },
+      false
+    );
+  },
+  methods: {
+    returnBack(value) {
+      console.log(value);
+    },
+    switchBackReason() {
+      this.showBackReason = !this.showBackReason;
+    },
+    // 返回
+    goBack(type) {
+      this.$emit("onDetailBack", type);
+    },
+    // 获取详情
+    async initData(id) {
+      const res = await detailKeyProject(id);
+      const res2 = await keyProjectWork({ id: id });
+      if (res.id) {
+        this.projectName = res.projectName;
+        this.projectDay = res.projectDay || "--";
+        this.formInfo = { ...this.formInfo, ...res };
+        if (!this.formInfo.tProjectFlows) {
+          this.formInfo.tProjectFlows = flows;
+        }
+        this.curFlow = this.formInfo.tProjectFlows;
+      } else {
+        this.$message.error("请求错误");
+      }
+      if (res2.code === 200) {
+        this.workData = res2.rows;
+      }
+    },
+    // 项目下载
+    downProject() {},
+    // 项目编辑
+    editProject() {
+      this.$emit("onProjectEdit", this.curId);
+    },
+    // 项目调度
+    disProject() {
+      this.showBackReason = true;
+    },
+  },
+};
+</script>
+<style scoped lang="less">
+.key-project-detail {
+  border-radius: 0 0 8px 8px;
+
+  .top {
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 20px;
+    background: #e5e5e5;
+
+    .left {
+      font-weight: bold;
+      font-size: 16px;
+    }
+  }
+
+  /deep/ .el-card__header {
+    padding: 0 10px;
+    background: #e5e5e5;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
+}
+
+.form-box {
+  padding: 15px;
+  overflow-y: auto;
+
+  .grid-title {
+    font-weight: bold;
+  }
+
+  .el-form-item--mini.el-form-item,
+  .el-form-item--small.el-form-item {
+    margin-bottom: 10px;
+  }
+
+  /deep/ .el-form--label-top .el-form-item__label {
+    padding: 0;
+    width: 100%;
+  }
+}
+
+.point-box {
+  padding: 0 15px 10px 15px;
+  box-sizing: border-box;
+  border: 1px solid #eee;
+  background: #f9f9f9;
+  margin: 10px;
+  overflow: hidden;
+
+  .point-box-item {
+    float: none;
+  }
+
+  .form-point-label {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .delete-point:hover {
+    cursor: pointer;
+    color: red;
+  }
+}
+
+.box-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.work-item-top {
+  display: flex;
+  justify-content: space-between;
+  color: #a2aab3;
+  height: 32px;
+  align-items: center;
+}
+
+.work-card,
+.box-card {
+  /deep/ .el-card__body {
+    padding: 0;
+  }
+}
+
+.flow-box {
+  display: flex;
+  align-items: center;
+  padding: 10px 0;
+}
+
+.project-day {
+  width: 80px;
+  text-align: center;
+
+  .div1 {
+    font-weight: bold;
+  }
+}
+</style>

src/views/resources/page/common/keyProjectTemp.vue

+<template>
+  <div class="key-project-temp">
+    <div class="top">
+      <span style="display: flex;align-items: center;">
+        <img style="width: 26px;height: 22px; margin:0 5px" :src="topImg" alt="img" />
+        <span style="font-size: 22px; font-weight: bold">{{ projectName }}</span>
+      </span>
+      <el-button size="small" type="primary" @click="goBack" style="width: 80px;">返回</el-button>
+    </div>
+    <div class="form-box" :style="{ height: `${formBoxHeight}px` }">
+      <div class="grid-title">基本信息</div>
+      <el-form :model="formInfo" ref="formInfoRef" label-position="top" size="mini" :rules="rules">
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="项目名称：" prop="projectName">
+              <el-input v-model="formInfo.projectName" placeholder="项目名称"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="包联领导：" prop="projectLeader">
+              <el-input v-model="formInfo.projectLeader" placeholder="包联领导"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="牵头部门：" prop="leadingDepartment">
+              <el-input v-model="formInfo.leadingDepartment" placeholder="牵头部门"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="投资主体：" prop="investmentEntity">
+              <el-input v-model="formInfo.investmentEntity" placeholder="投资主体"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="总投资：" prop="totalMoney">
+              <el-input v-model="formInfo.totalMoney" placeholder="总投资"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="占地面积：" prop="floorSpace">
+              <el-input v-model="formInfo.floorSpace" placeholder="占地面积"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="项目介绍：" prop="projectIntroduce">
+              <el-input v-model="formInfo.projectIntroduce" placeholder="项目介绍"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="建设地址：" prop="constructionAddress">
+              <el-input v-model="formInfo.constructionAddress" placeholder="建设地址"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="政策诉求：" prop="policyStatement">
+              <el-input v-model="formInfo.policyStatement" placeholder="政策诉求"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="投资承诺：" prop="investmentCommitment">
+              <el-input v-model="formInfo.investmentCommitment" placeholder="投资承诺"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="项目进展：" prop="projectProgress">
+              <el-input v-model="formInfo.projectProgress" type="textarea" :rows="2" placeholder="项目进展"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <div class="grid-title">项目阶段</div>
+        <el-row :gutter="20">
+          <!-- 洽谈 -->
+          <el-col :span="8">
+            <el-form-item label="洽谈阶段开始时间：" prop="startTime">
+              <el-date-picker
+                v-model="formInfo.tProjectFlows[0].startTime"
+                type="date"
+                placeholder="选择日期"
+                value-format="yyyy-MM-dd"
+              >
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="洽谈阶段结束时间：" prop="endTime">
+              <el-date-picker
+                v-model="formInfo.tProjectFlows[0].endTime"
+                type="date"
+                placeholder="选择日期"
+                value-format="yyyy-MM-dd"
+              >
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="是否存在堵点：">
+              <el-select v-model="formInfo.isPoint1" placeholder="请选择" @change="changeOne">
+                <el-option label="是" value="yes"></el-option>
+                <el-option label="否" value="no"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <div
+            v-if="
+              formInfo.tProjectFlows[0].tProjectFlowStopList &&
+                formInfo.tProjectFlows[0].tProjectFlowStopList.length > 0
+            "
+            class="point-box"
+          >
+            <el-button size="small" style="margin-top: 10px" type="primary" @click="addPoint('1')">新增堵点</el-button>
+            <el-row
+              v-for="(item, index) in formInfo.tProjectFlows[0].tProjectFlowStopList"
+              :key="`row${index}`"
+              class="point-box-item"
+              :gutter="20"
+            >
+              <el-col :span="24">
+                <el-form-item prop="content">
+                  <div slot="label" class="form-point-label">
+                    <span>{{ `堵点${index + 1}` }}</span>
+                    <span @click="removePoint('1', index)" class="delete-point"
+                      ><i class="el-icon-delete"></i>删除</span
+                    >
+                  </div>
+                  <el-input v-model="item.content" placeholder="堵点"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <el-form-item label="推进要求：" prop="requirements">
+                  <el-input v-model="item.requirements" placeholder="推进要求"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="责任部门：" prop="department">
+                  <el-input v-model="item.department" placeholder="责任部门"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="完成时限：" prop="successTime">
+                  <el-date-picker
+                    type="date"
+                    v-model="item.successTime"
+                    placeholder="选择日期"
+                    value-format="yyyy-MM-dd"
+                  >
+                  </el-date-picker>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </div>
+          <!-- 洽谈end -->
+          <!-- 签约 -->
+          <el-col :span="8">
+            <el-form-item label="签约阶段开始时间：" prop="startTime">
+              <el-date-picker
+                v-model="formInfo.tProjectFlows[1].startTime"
+                type="date"
+                placeholder="选择日期"
+                value-format="yyyy-MM-dd"
+              >
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="签约阶段结束时间：" prop="endTime">
+              <el-date-picker
+                v-model="formInfo.tProjectFlows[1].endTime"
+                type="date"
+                placeholder="选择日期"
+                value-format="yyyy-MM-dd"
+              >
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="是否存在堵点：" prop="isPoint2">
+              <el-select v-model="formInfo.isPoint2" placeholder="请选择" @change="changeTwo">
+                <el-option label="是" value="yes"></el-option>
+                <el-option label="否" value="no"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <div
+            v-if="
+              formInfo.tProjectFlows[1].tProjectFlowStopList &&
+                formInfo.tProjectFlows[1].tProjectFlowStopList.length > 0
+            "
+            class="point-box"
+          >
+            <el-button size="small" style="margin-top: 10px" type="primary" @click="addPoint('2')">新增堵点</el-button>
+            <el-row
+              v-for="(item, index) in formInfo.tProjectFlows[1].tProjectFlowStopList"
+              :key="`row${index}`"
+              class="point-box-item"
+              :gutter="20"
+            >
+              <el-col :span="24">
+                <el-form-item prop="content">
+                  <div slot="label" class="form-point-label">
+                    <span>{{ `堵点${index + 1}` }}</span>
+                    <span @click="removePoint('2', index)" class="delete-point"
+                      ><i class="el-icon-delete"></i>删除</span
+                    >
+                  </div>
+                  <el-input v-model="item.content" placeholder="堵点"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <el-form-item label="推进要求：" prop="requirements">
+                  <el-input v-model="item.requirements" placeholder="推进要求"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="责任部门：" prop="department">
+                  <el-input v-model="item.department" placeholder="责任部门"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="完成时限：" prop="successTime">
+                  <el-date-picker
+                    type="date"
+                    v-model="item.successTime"
+                    placeholder="选择日期"
+                    value-format="yyyy-MM-dd"
+                  >
+                  </el-date-picker>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </div>
+          <!-- 签约end -->
+          <!-- 土地手续 -->
+          <el-col :span="8">
+            <el-form-item label="土地手续阶段开始时间：" prop="startTime">
+              <el-date-picker
+                v-model="formInfo.tProjectFlows[2].startTime"
+                type="date"
+                placeholder="选择日期"
+                value-format="yyyy-MM-dd"
+              >
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="土地手续阶段结束时间：" prop="endTime">
+              <el-date-picker
+                v-model="formInfo.tProjectFlows[2].endTime"
+                type="date"
+                placeholder="选择日期"
+                value-format="yyyy-MM-dd"
+              >
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="是否存在堵点：" prop="isPoint3">
+              <el-select v-model="formInfo.isPoint3" placeholder="请选择" @change="changeThree">
+                <el-option label="是" value="yes"></el-option>
+                <el-option label="否" value="no"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <div
+            v-if="
+              formInfo.tProjectFlows[2].tProjectFlowStopList &&
+                formInfo.tProjectFlows[2].tProjectFlowStopList.length > 0
+            "
+            class="point-box"
+          >
+            <el-button size="small" style="margin-top: 10px" type="primary" @click="addPoint('3')">新增堵点</el-button>
+            <el-row
+              v-for="(item, index) in formInfo.tProjectFlows[2].tProjectFlowStopList"
+              :key="`row${index}`"
+              class="point-box-item"
+              :gutter="20"
+            >
+              <el-col :span="24">
+                <el-form-item prop="content">
+                  <div slot="label" class="form-point-label">
+                    <span>{{ `堵点${index + 1}` }}</span>
+                    <span @click="removePoint('3', index)" class="delete-point"
+                      ><i class="el-icon-delete"></i>删除</span
+                    >
+                  </div>
+                  <el-input v-model="item.content" placeholder="堵点"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <el-form-item label="推进要求：" prop="requirements">
+                  <el-input v-model="item.requirements" placeholder="推进要求"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="责任部门：" prop="department">
+                  <el-input v-model="item.department" placeholder="责任部门"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="完成时限：" prop="successTime">
+                  <el-date-picker
+                    type="date"
+                    v-model="item.successTime"
+                    placeholder="选择日期"
+                    value-format="yyyy-MM-dd"
+                  >
+                  </el-date-picker>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </div>
+          <!-- 土地手续end -->
+          <!-- 立项审批 -->
+          <el-col :span="8">
+            <el-form-item label="立项审批阶段开始时间：" prop="startTime">
+              <el-date-picker
+                v-model="formInfo.tProjectFlows[3].startTime"
+                type="date"
+                placeholder="选择日期"
+                value-format="yyyy-MM-dd"
+              >
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="立项审批阶段结束时间：" prop="endTime">
+              <el-date-picker
+                v-model="formInfo.tProjectFlows[3].endTime"
+                type="date"
+                placeholder="选择日期"
+                value-format="yyyy-MM-dd"
+              >
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="是否存在堵点：" prop="isPoint4">
+              <el-select v-model="formInfo.isPoint4" placeholder="请选择" @change="changeFour">
+                <el-option label="是" value="yes"></el-option>
+                <el-option label="否" value="no"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <div
+            v-if="
+              formInfo.tProjectFlows[3].tProjectFlowStopList &&
+                formInfo.tProjectFlows[3].tProjectFlowStopList.length > 0
+            "
+            class="point-box"
+          >
+            <el-button size="small" style="margin-top: 10px" type="primary" @click="addPoint('4')">新增堵点</el-button>
+            <el-row
+              v-for="(item, index) in formInfo.tProjectFlows[3].tProjectFlowStopList"
+              :key="`row${index}`"
+              class="point-box-item"
+              :gutter="20"
+            >
+              <el-col :span="24">
+                <el-form-item prop="content">
+                  <div slot="label" class="form-point-label">
+                    <span>{{ `堵点${index + 1}` }}</span>
+                    <span @click="removePoint('4', index)" class="delete-point"
+                      ><i class="el-icon-delete"></i>删除</span
+                    >
+                  </div>
+                  <el-input v-model="item.content" placeholder="堵点"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <el-form-item label="推进要求：" prop="requirements">
+                  <el-input v-model="item.requirements" placeholder="推进要求"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="责任部门：" prop="department">
+                  <el-input v-model="item.department" placeholder="责任部门"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="完成时限：" prop="successTime">
+                  <el-date-picker
+                    type="date"
+                    v-model="item.successTime"
+                    placeholder="选择日期"
+                    value-format="yyyy-MM-dd"
+                  >
+                  </el-date-picker>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </div>
+          <!-- 立项审批end -->
+          <!-- 其他事项 -->
+          <el-col :span="8">
+            <el-form-item label="其他事项阶段开始时间：" prop="startTime">
+              <el-date-picker
+                v-model="formInfo.tProjectFlows[4].startTime"
+                type="date"
+                placeholder="选择日期"
+                value-format="yyyy-MM-dd"
+              >
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="其他事项阶段结束时间：" prop="endTime">
+              <el-date-picker
+                v-model="formInfo.tProjectFlows[4].endTime"
+                type="date"
+                placeholder="选择日期"
+                value-format="yyyy-MM-dd"
+              >
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="是否存在堵点：" prop="isPoint5">
+              <el-select v-model="formInfo.isPoint5" placeholder="请选择" @change="changeFive">
+                <el-option label="是" value="yes"></el-option>
+                <el-option label="否" value="no"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <div
+            v-if="
+              formInfo.tProjectFlows[4].tProjectFlowStopList &&
+                formInfo.tProjectFlows[4].tProjectFlowStopList.length > 0
+            "
+            class="point-box"
+          >
+            <el-button size="small" style="margin-top: 10px" type="primary" @click="addPoint('5')">新增堵点</el-button>
+            <el-row
+              v-for="(item, index) in formInfo.tProjectFlows[4].tProjectFlowStopList"
+              :key="`row${index}`"
+              class="point-box-item"
+              :gutter="20"
+            >
+              <el-col :span="24">
+                <el-form-item prop="content">
+                  <div slot="label" class="form-point-label">
+                    <span>{{ `堵点${index + 1}` }}</span>
+                    <span @click="removePoint('5', index)" class="delete-point"
+                      ><i class="el-icon-delete"></i>删除</span
+                    >
+                  </div>
+                  <el-input v-model="item.content" placeholder="堵点"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <el-form-item label="推进要求：" prop="requirements">
+                  <el-input v-model="item.requirements" placeholder="推进要求"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="责任部门：" prop="department">
+                  <el-input v-model="item.department" placeholder="责任部门"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="完成时限：" prop="successTime">
+                  <el-date-picker
+                    type="date"
+                    v-model="item.successTime"
+                    placeholder="选择日期"
+                    value-format="yyyy-MM-dd"
+                  >
+                  </el-date-picker>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </div>
+          <!-- 其他事项end -->
+          <!-- 开工 -->
+          <el-col :span="8">
+            <el-form-item label="开工阶段开始时间：" prop="startTime">
+              <el-date-picker
+                v-model="formInfo.tProjectFlows[5].startTime"
+                type="date"
+                placeholder="选择日期"
+                value-format="yyyy-MM-dd"
+              >
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="开工阶段结束时间：" prop="endTime">
+              <el-date-picker
+                v-model="formInfo.tProjectFlows[5].endTime"
+                type="date"
+                placeholder="选择日期"
+                value-format="yyyy-MM-dd"
+              >
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="是否存在堵点：" prop="isPoint6">
+              <el-select v-model="formInfo.isPoint6" placeholder="请选择" @change="changeSix">
+                <el-option label="是" value="yes"></el-option>
+                <el-option label="否" value="no"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <div
+            v-if="
+              formInfo.tProjectFlows[5].tProjectFlowStopList &&
+                formInfo.tProjectFlows[5].tProjectFlowStopList.length > 0
+            "
+            class="point-box"
+          >
+            <el-button size="small" style="margin-top: 10px" type="primary" @click="addPoint('6')">新增堵点</el-button>
+            <el-row
+              v-for="(item, index) in formInfo.tProjectFlows[5].tProjectFlowStopList"
+              :key="`row${index}`"
+              class="point-box-item"
+              :gutter="20"
+            >
+              <el-col :span="24">
+                <el-form-item prop="content">
+                  <div slot="label" class="form-point-label">
+                    <span>{{ `堵点${index + 1}` }}</span>
+                    <span @click="removePoint('6', index)" class="delete-point"
+                      ><i class="el-icon-delete"></i>删除</span
+                    >
+                  </div>
+                  <el-input v-model="item.content" placeholder="堵点"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <el-form-item label="推进要求：" prop="requirements">
+                  <el-input v-model="item.requirements" placeholder="推进要求"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="责任部门：" prop="department">
+                  <el-input v-model="item.department" placeholder="责任部门"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="完成时限：" prop="successTime">
+                  <el-date-picker
+                    type="date"
+                    v-model="item.successTime"
+                    placeholder="选择日期"
+                    value-format="yyyy-MM-dd"
+                  >
+                  </el-date-picker>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </div>
+          <!-- 开工end -->
+        </el-row>
+        <el-form-item>
+          <div class="save-btn">
+            <el-button size="small" type="primary" @click="handleSubmit('formInfoRef')">保存</el-button>
+          </div>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+<script>
+import topImg from "@images/project/icon-xmgl4.png";
+import { createKeyProject, updatelKeyProject, detailKeyProject } from "@/api/projectManaApi";
+const obj = {
+  content: "",
+  requirements: "",
+  department: "",
+  successTime: "",
+};
+const flows = [
+  {
+    processSchedule: "洽谈",
+    startTime: "",
+    endTime: "",
+    tProjectFlowStopList: [],
+  },
+  {
+    processSchedule: "签约",
+    startTime: "",
+    endTime: "",
+    tProjectFlowStopList: [],
+  },
+  {
+    processSchedule: "土地手续",
+    startTime: "",
+    endTime: "",
+    tProjectFlowStopList: [],
+  },
+  {
+    processSchedule: "立项审批",
+    startTime: "",
+    endTime: "",
+    tProjectFlowStopList: [],
+  },
+  {
+    processSchedule: "其他事项",
+    startTime: "",
+    endTime: "",
+    tProjectFlowStopList: [],
+  },
+  {
+    processSchedule: "开工",
+    startTime: "",
+    endTime: "",
+    tProjectFlowStopList: [],
+  },
+];
+export default {
+  name: "keyProjectTemp",
+  props: ["curId"],
+  data() {
+    return {
+      topImg: topImg,
+      formInfo: {
+        projectName: "",
+        projectLeader: "",
+        leadingDepartment: "",
+        investmentEntity: "",
+        totalMoney: "",
+        floorSpace: "",
+        projectIntroduce: "",
+        constructionAddress: "",
+        policyStatement: "",
+        investmentCommitment: "",
+        projectProgress: "",
+        isPoint1: "",
+        isPoint2: "",
+        isPoint3: "",
+        isPoint4: "",
+        isPoint5: "",
+        isPoint6: "",
+        tProjectFlows: JSON.parse(JSON.stringify(flows)),
+      },
+      formBoxHeight: document.body.clientHeight - 250,
+      rules: {
+        projectName: [{ required: true, message: "请输入项目名称", trigger: "blur" }],
+        projectLeader: [{ required: true, message: "请输入包联领导", trigger: "blur" }],
+        leadingDepartment: [{ required: true, message: "请输入牵头部门", trigger: "blur" }],
+        investmentEntity: [{ required: true, message: "请输入投资主体", trigger: "blur" }],
+      },
+      projectName: "新增项目",
+      // formInfoRef:null
+    };
+  },
+  created() {
+    if (this.curId) {
+      this.initData(this.curId);
+    }
+  },
+  mounted() {
+    window.addEventListener(
+      "resize",
+      () => {
+        this.formBoxHeight = document.body.clientHeight - 240;
+      },
+      false
+    );
+  },
+  methods: {
+    async initData(id) {
+      const res = await detailKeyProject(id);
+      if (res.id) {
+        this.projectName = res.projectName;
+        this.formInfo = { ...this.formInfo, ...res };
+        if (!this.formInfo.tProjectFlows) {
+          this.formInfo.tProjectFlows = flows;
+        }
+        this.formInfo.tProjectFlows = this.formInfo.tProjectFlows.map((item) => {
+          if (!item.tProjectFlowStopList) {
+            item.tProjectFlowStopList = [];
+          }
+          return item;
+        });
+      }
+      console.log(res);
+    },
+    // 返回
+    goBack(type) {
+      this.formInfo = null;
+      this.$refs.formInfoRef.resetFields();
+      this.$emit("switchDom", type);
+    },
+
+    addPoint(type) {
+      let newObj = { ...obj };
+      for (var key in newObj) {
+        newObj[key] = "";
+      }
+      if (type === "1") {
+        this.formInfo.tProjectFlows[0].tProjectFlowStopList.push({ ...newObj });
+      }
+      if (type === "2") {
+        this.formInfo.tProjectFlows[1].tProjectFlowStopList.push({ ...newObj });
+      }
+      if (type === "3") {
+        this.formInfo.tProjectFlows[2].tProjectFlowStopList.push({ ...newObj });
+      }
+      if (type === "4") {
+        this.formInfo.tProjectFlows[3].tProjectFlowStopList.push({ ...newObj });
+      }
+      if (type === "5") {
+        this.formInfo.tProjectFlows[4].tProjectFlowStopList.push({ ...newObj });
+      }
+      if (type === "6") {
+        this.formInfo.tProjectFlows[5].tProjectFlowStopList.push({ ...newObj });
+      }
+    },
+    removePoint(type, index) {
+      if (type === "1") {
+        this.formInfo.tProjectFlows[0].tProjectFlowStopList.splice(index, 1);
+        if (this.formInfo.tProjectFlows[0].tProjectFlowStopList.length === 0) {
+          this.formInfo.isPoint1 = "no";
+        }
+      }
+      if (type === "2") {
+        this.formInfo.tProjectFlows[1].tProjectFlowStopList.splice(index, 1);
+        if (this.formInfo.tProjectFlows[1].tProjectFlowStopList.length === 0) {
+          this.formInfo.isPoint2 = "no";
+        }
+      }
+      if (type === "3") {
+        this.formInfo.tProjectFlows[2].tProjectFlowStopList.splice(index, 1);
+        if (this.formInfo.tProjectFlows[2].tProjectFlowStopList.length === 0) {
+          this.formInfo.isPoint3 = "no";
+        }
+      }
+      if (type === "4") {
+        this.formInfo.tProjectFlows[3].tProjectFlowStopList.splice(index, 1);
+        if (this.formInfo.tProjectFlows[3].tProjectFlowStopList.length === 0) {
+          this.formInfo.isPoint4 = "no";
+        }
+      }
+      if (type === "5") {
+        this.formInfo.tProjectFlows[4].tProjectFlowStopList.splice(index, 1);
+        if (this.formInfo.tProjectFlows[4].tProjectFlowStopList.length === 0) {
+          this.formInfo.isPoint5 = "no";
+        }
+      }
+      if (type === "6") {
+        this.formInfo.tProjectFlows[5].tProjectFlowStopList.splice(index, 1);
+        if (this.formInfo.tProjectFlows[5].tProjectFlowStopList.length === 0) {
+          this.formInfo.isPoint6 = "no";
+        }
+      }
+    },
+    checkObjectValues(obj) {
+      return Object.values(obj).some((val) => val !== null && val !== undefined && val !== "");
+    },
+    handleSubmit(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          const data = JSON.parse(JSON.stringify(this.formInfo));
+          for (let flow of data.tProjectFlows) {
+            if (!flow.tProjectFlowStopList || flow.tProjectFlowStopList.length === 0) {
+              delete flow.tProjectFlowStopList;
+            }
+          }
+          this.saveData(data);
+          // this.$refs[formName].resetFields();
+        } else {
+          return false;
+        }
+      });
+    },
+    async saveData(data) {
+      let res;
+      if (this.curId) {
+        data.id = this.curId;
+        res = await updatelKeyProject(data);
+      } else {
+        res = await createKeyProject(data);
+      }
+      if (res.code === 200) {
+        this.$confirm("是否返回上一页?", "操作成功", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "success",
+        })
+          .then(() => {
+            this.goBack(true);
+          })
+          .catch(() => {
+            this.$message({
+              type: "info",
+              message: "取消返回",
+            });
+          });
+      } else {
+        this.$message({
+          type: "error",
+          message: res.msg,
+        });
+      }
+    },
+    changeOne(val) {
+      if (val === "yes") {
+        this.formInfo.tProjectFlows[0].tProjectFlowStopList.push(obj);
+      } else {
+        this.formInfo.tProjectFlows[0].tProjectFlowStopList = [];
+      }
+    },
+    changeTwo(val) {
+      if (val === "yes") {
+        this.formInfo.tProjectFlows[1].tProjectFlowStopList.push(obj);
+      } else {
+        this.formInfo.tProjectFlows[1].tProjectFlowStopList = [];
+      }
+    },
+    changeThree(val) {
+      if (val === "yes") {
+        this.formInfo.tProjectFlows[2].tProjectFlowStopList.push(obj);
+      } else {
+        this.formInfo.tProjectFlows[2].tProjectFlowStopList = [];
+      }
+    },
+    changeFour(val) {
+      if (val === "yes") {
+        this.formInfo.tProjectFlows[3].tProjectFlowStopList.push(obj);
+      } else {
+        this.formInfo.tProjectFlows[3].tProjectFlowStopList = [];
+      }
+    },
+    changeFive(val) {
+      if (val === "yes") {
+        this.formInfo.tProjectFlows[4].tProjectFlowStopList.push(obj);
+      } else {
+        this.formInfo.tProjectFlows[4].tProjectFlowStopList = [];
+      }
+    },
+    changeSix(val) {
+      if (val === "yes") {
+        this.formInfo.tProjectFlows[5].tProjectFlowStopList.push(obj);
+      } else {
+        this.formInfo.tProjectFlows[5].tProjectFlowStopList = [];
+      }
+    },
+  },
+};
+</script>
+<style scoped lang="less">
+.key-project-temp {
+  border-radius: 0 0 8px 8px;
+  border: 1px solid #e5e5e5;
+
+  .top {
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 20px;
+    background: #e5e5e5;
+
+    .left {
+      font-weight: bold;
+      font-size: 16px;
+    }
+  }
+}
+
+.form-box {
+  padding: 15px;
+  overflow-y: auto;
+
+  .grid-title {
+    font-weight: bold;
+  }
+
+  .el-form-item--mini.el-form-item,
+  .el-form-item--small.el-form-item {
+    margin-bottom: 10px;
+  }
+
+  /deep/.el-form--label-top .el-form-item__label {
+    padding: 0;
+    width: 100%;
+  }
+}
+
+.point-box {
+  padding: 0 15px 10px 15px;
+  box-sizing: border-box;
+  border: 1px solid #eee;
+  background: #f9f9f9;
+  margin: 10px;
+  overflow: hidden;
+
+  .point-box-item {
+    float: none;
+  }
+
+  .form-point-label {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .delete-point:hover {
+    cursor: pointer;
+    color: red;
+  }
+}
+
+.save-btn {
+  width: 100%;
+  text-align: center;
+  margin-top: 20px;
+}
+</style>

src/views/resources/page/common/oldFlowTemp.vue

+<template>
+    <div class="item">
+      <div class="title" :style="{ background: color }">{{ title }}</div>
+      <el-popover v-if="currentPoint" placement="top-start" width="200" trigger="hover">
+        <div v-for="point in currentPointData" :key="point.id" class="point-box">
+          <div class="point-title">
+            <i class="el-icon-warning" style="color: red"></i>
+            {{ point.department }}
+          </div>
+          <div class="point-content">
+            {{ point.content }}
+          </div>
+        </div>
+        <circleTemp slot="reference" :color="color"></circleTemp>
+      </el-popover>
+      <circleTemp v-else :color="color"></circleTemp>
+      <div class="line" v-if="showLine">
+        <div class="jg-day" v-if="jgEnd">{{ beApartDays(jgStart, jgEnd) }}天</div>
+        <div class="line-left" :style="lineStyle(blocking)"></div>
+        <div class="line-right" :style="arrowStyle(blocking)">
+          <i class="el-icon-caret-right"></i>
+        </div>
+      </div>
+      <div class="time" :style="{ background: bgColor }">
+        <div v-if="currentPoint">进行中</div>
+        <div v-else-if="startTime" class="time-item">
+          <span>{{ startTime }}</span>
+          <el-divider direction="vertical" style="height: 6px"></el-divider>
+          <span>{{ endTime }}</span>
+        </div>
+        <div v-else>--</div>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  import circleTemp from "./circleTemp.vue";
+  
+  export default {
+    name: "flowNodeTemp",
+    components: {circleTemp},
+    props: [
+      "color",
+      "title",
+      "showLine",
+      "blocking",
+      "bgColor",
+      "startTime",
+      "endTime",
+      "currentPoint",
+      "currentPointData",
+      "jgStart",
+      "jgEnd"
+    ],
+    data() {
+      return {
+        jgDay: 0
+      };
+    },
+    methods: {
+      lineStyle(blocking) {
+        return {
+          borderColor: blocking ? "#B8B8B8" : "#4D82FF",
+        };
+      },
+      arrowStyle(blocking) {
+        return {
+          color: blocking ? "#B8B8B8" : "#4D82FF",
+        };
+      },
+      /**
+       * 计算两个日期相隔多少天，不限制先后顺序
+       * @param {Date} Date_start 开始时间
+       * @param {Date} Date_end 结束时间
+       * @returns number
+       * 可传一个参数，第二个参数不传为当前日期
+       */
+      beApartDays(Date_start, Date_end = new Date()) {
+        // 时间格式化
+        let date1 = new Date(Date_start);
+        let date2 = new Date(Date_end);
+        date1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
+        date2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
+        //目标时间减去当前时间
+        const diff = date1.getTime() - date2.getTime();
+        //计算当前时间与结束时间之间相差天数
+        return Math.abs(diff) / (24 * 60 * 60 * 1000);
+      }
+    },
+  };
+  </script>
+  
+  <style scoped lang="less">
+  .item {
+    flex: 1;
+    text-align: center;
+    position: relative;
+    height: 120px;
+  }
+  
+  /deep/ .el-divider--vertical {
+    margin: 0;
+  }
+  
+  .line {
+    width: 80%;
+    height: 14px;
+    position: absolute;
+    top: 35%;
+    left: 60%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    z-index: 0;
+    //overflow: hidden;
+  
+    .line-left {
+      border-bottom: 1px dashed;
+      flex: 1;
+    }
+  
+    .line-right {
+      width: 12px;
+      text-align: center;
+    }
+  
+    .jg-day {
+      position: absolute;
+      width: 50px;
+      text-align: center;
+      left: 50%;
+      margin-left: -25px;
+      top: -15px;
+      color: #373737;
+      font-size: 14px;
+    }
+  }
+  
+  .title {
+    color: white;
+    width: 106px;
+    height: 30px;
+    border-radius: 8px;
+    line-height: 30px;
+    margin: 0 auto 5px auto;
+  }
+  
+  .time {
+    border-radius: 8px;
+    width: 150px;
+    height: 50px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto;
+  
+    .time-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+  
+    span {
+      line-height: normal;
+    }
+  }
+  
+  .point-box {
+    font-size: 13px;
+  
+    .point-title {
+      font-weight: bold;
+    }
+  
+    .point-content {
+      padding: 5px 0;
+    }
+  }
+  </style>
\ No newline at end of file

src/views/resources/page/common/optionConfig.js

+const options_district = [
+    { label: "小店区", value: "小店区" },
+    { label: "迎泽区", value: "迎泽区" },
+    { label: "杏花岭区", value: "杏花岭区" },
+    { label: "尖草坪区", value: "尖草坪区" },
+    { label: "万柏林区", value: "万柏林区" },
+    { label: "晋源区", value: "晋源区" },
+    { label: "古交市", value: "古交市" },
+    { label: "清徐县", value: "清徐县" },
+    { label: "阳曲县", value: "阳曲县" },
+    { label: "娄烦县", value: "娄烦县" },
+    { label: "中北高新区", value: "中北高新区" },
+    { label: "清徐开发区", value: "清徐开发区" },
+    { label: "阳曲示范区", value: "阳曲示范区" }
+]
+const options_sscy = ['高端装备制造业', '新材料产业', '信息技术产业', '绿色能源产业', '现代农业', '生态文旅休闲类', '现代服务业']
+
+export {
+    options_district,
+    options_sscy
+}
\ No newline at end of file

src/views/resources/page/common/pageTitle.vue

+<template>
+  <div class="page-title">
+    <img style="width: 20px;height: 20px" :src="src" alt="" />
+    <span>{{ name }}</span>
+  </div>
+</template>
+<script>
+export default {
+  name: 'PageTitle',
+  props: ['src', 'name']
+}
+</script>
+
+<style scoped lang="less">
+.page-title {
+  display: flex;
+  height: 24px;
+  align-items: center;
+  font-size: inherit;
+  color: #1D2129;
+  font-size: 18px;
+  font-weight: bold;
+
+  span {
+    padding-left: 10px;
+  }
+}
+@media screen and(min-width: 1460px) {
+  .page-title {
+    span {
+      font-size: 17px;
+    }
+  }
+}
+
+@media screen and(min-width: 1366px) {
+  .page-title {
+    span {
+      font-size: 15px;
+    }
+  }
+}
+</style>
\ No newline at end of file

src/views/resources/page/common/projectTitle.vue

+<template>
+  <div class="page-title">
+    <div class="left">
+      <img style="width: 20px;height: 20px" :src="project ? icon2 : icon" alt=""/>
+      <span class="span">{{ name }}</span>
+    </div>
+    <div class="right">
+      <div v-for="item in tags" :key="item.name" class="item" :class="[tabActive === item.name && 'item-active']"
+           @click="changeTag(item.name)">
+        <img style="width: 16px" :src="tabActive === item.name ? item.imgS : item.img" alt="img"/>
+        <span>{{ item.name }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  import icon from '@img/project/icon-khzb.png';
+  import img1 from '@img/project/icon-xmzl.png';
+  import imgs1 from '@img/project/icon-xmzl-select.png';
+  import img2 from '@img/project/icon-slzb.png';
+  import imgs2 from '@img/project/icon-slzb-select.png';
+  import icon2 from '@img/project/icon-xmfx.png'
+
+  export default {
+    name: 'ProjectTitle',
+    props: ['name','project'],
+    data () {
+      return {
+        icon: icon,
+        icon2:icon2,
+        tags: [
+          {
+            name: '投资额占比',
+            img: img1,
+            imgS: imgs1
+          },
+          {
+            name: '数量占比',
+            img: img2,
+            imgS: imgs2
+          }
+        ],
+        tabActive: '投资额占比'
+      };
+    },
+    methods: {
+      changeTag (name) {
+        this.tabActive = name;
+        this.$emit('changeTabName',name)
+      }
+    }
+  };
+</script>
+
+<style scoped lang="less">
+  .page-title {
+    display: flex;
+    height: 50px;
+    align-items: center;
+    font-size: inherit;
+    justify-content: space-between;
+
+    .left {
+      display: flex;
+      align-items: center;
+    }
+
+    .span {
+      padding-left: 10px;
+    }
+
+    .right {
+      width: 250px;
+      height: 36px;
+      background: #EFEFF0;
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0 4px;
+      box-sizing: border-box;
+    }
+
+    .item {
+      text-align: center;
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      img {
+        margin-right: 2px;
+      }
+    }
+
+    .item:hover {
+      cursor: pointer;
+    }
+
+    .item-active {
+      height: 28px;
+      background: #FFFFFF;
+      border-radius: 8px;
+      color: #0063F7;
+    }
+  }
+</style>

src/views/resources/page/common/statisticalTimeTemp.vue

+<template>
+  <div class="select-month">
+    <span class="span">统计时间:</span>
+    <el-cascader v-model="monthValue" :options="options" @change="changeTime" size="mini" placeholder="请选择" clearable
+      separator="年" style="width: 190px;"></el-cascader>
+  </div>
+</template>
+
+<script>
+const childMonth = [
+  {
+    value: `1-1月`,
+    label: `1月`,
+  },
+  {
+    value: `1-2月`,
+    label: `1-2月`,
+  },
+  {
+    value: `1-3月`,
+    label: `1-3月`,
+  },
+  {
+    value: `1-4月`,
+    label: `1-4月`,
+  },
+  {
+    value: `1-5月`,
+    label: `1-5月`,
+  },
+  {
+    value: `1-6月`,
+    label: `1-6月`,
+  },
+  {
+    value: `1-7月`,
+    label: `1-7月`,
+  },
+  {
+    value: `1-8月`,
+    label: `1-8月`,
+  },
+  {
+    value: `1-9月`,
+    label: `1-9月`,
+  },
+  {
+    value: `1-10月`,
+    label: `1-10月`,
+  },
+  {
+    value: `1-11月`,
+    label: `1-11月`,
+  },
+  {
+    value: `1-12月`,
+    label: `1-12月`,
+  }
+]
+export default {
+  name: 'statisticalTimeTemp',
+  data() {
+    return {
+      options: [],
+      monthValue: '1-9月'
+    }
+  },
+  mounted() {
+    this.initOptions();
+  },
+  methods: {
+    initOptions() {
+      const currentYear = new Date().getFullYear();
+      const startYear = currentYear;
+      const endYear = currentYear;
+
+      for (let year = startYear; year <= endYear; year++) {
+        this.options.push({
+          value: year.toString(),
+          label: year.toString(),
+          children: childMonth,
+        });
+      }
+    },
+    // 时间改变
+    changeTime(val) {
+      if (val.length === 0) {
+        this.$emit('changeTimeVal', '')
+        return
+      }
+      const time = `${val[0]}年${val[1]}`
+      this.$emit('changeTimeVal', time)
+    },
+  }
+}
+</script>
+
+<style scoped lang="less">
+.select-month {
+  display: flex;
+  height: 30px;
+  align-items: center;
+
+  .span {
+    padding-right: 10px;
+    width: 70px;
+    display: inline-block;
+  }
+}
+</style>

src/views/resources/page/keyProject.vue

+<template>
+  <div>
+    <div class="key-project" v-if="!isEdit && !isDetail">
+      <div class="top">
+        <div v-for="item in topData" :key="item.name" :style="{ background: item.bgColor }" class="item">
+          <div class="left">
+            <img style="width: 36px; height: 36px" :src="item.img" alt="img" />
+          </div>
+          <div class="right">
+            <span style="color: #1C1C28;font-weight: bold;font-size: 18px;">{{ item.name }}</span>
+            <span :style="{ color: item.color, fontSize: '30px', margin: '0 5px', fontWeight: 'bold' }">{{
+              item.count
+            }}</span>
+            <span style="color: #999;font-size: 16px;">个</span>
+          </div>
+        </div>
+      </div>
+      <div class="form">
+        <el-form
+          size="small"
+          :model="searchForm"
+          :inline="true"
+          ref="searchForm"
+          style="width: 100%"
+          label-width="80px"
+        >
+          <el-form-item label="项目名称" prop="projectName">
+            <el-input v-model="searchForm.projectName" placeholder="请输入" class="input-width"></el-input>
+          </el-form-item>
+          <el-form-item label="牵头部门" prop="leadingDepartment">
+            <el-input v-model="searchForm.leadingDepartment" placeholder="请输入" class="input-width"></el-input>
+          </el-form-item>
+          <!-- <el-form-item label="包联领导" prop="projectLeader" style="margin-right: 0;">
+            <el-input v-model="searchForm.projectLeader" placeholder="请输入" class="input-width"></el-input>
+          </el-form-item> -->
+          <el-divider direction="vertical"></el-divider>
+          <el-form-item style="margin-right: 0;">
+            <el-button
+              type="primary"
+              size="small"
+              icon="el-icon-search"
+              @click="onSubmit('searchForm')"
+              style="width: 90px;"
+              >查询
+            </el-button>
+            <el-button
+              type="info"
+              size="small"
+              icon="el-icon-refresh-left"
+              @click="onReset('searchForm')"
+              style="width: 90px;"
+              >重置
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="center-btn">
+        <span>
+          <el-button size="small" type="primary" icon="el-icon-plus" @click="onAdd">新增项目</el-button>
+          <el-button size="small" type="danger" icon="el-icon-top" @click="onDataExport">数据导出</el-button>
+        </span>
+        <!-- <div class="tab">
+          <div
+            v-for="item in tabs2"
+            :key="item.name"
+            class="item"
+            :class="activeTab === item.name && 'active-item'"
+            @click="switchTab(item.name)"
+          >
+            <img style="width: 18px;" :src="activeTab === item.name ? item.imgS : item.img" />
+            <span>{{ item.name }}</span>
+          </div>
+        </div> -->
+      </div>
+      <div class="table-content" ref="tableRef">
+        <!-- <el-table
+          v-if="activeTab === '项目表'"
+          :data="tableData"
+          v-loading="loading"
+          stripe
+          size="small"
+          style="width: 100%;border-radius: 8px;overflow: hidden;border: 1px solid #e5e5e5;box-sizing: border-box;overflow-x: hidden;"
+          :height="tableHeight"
+          :header-cell-style="headerRowStyle"
+          @cell-click="handleCellClick"
+        >
+          <el-table-column type="index" label="序号" align="center" width="50"> </el-table-column>
+          <el-table-column prop="projectName" align="center" label="项目名称" width="150">
+            <template slot-scope="scope">
+              <div class="key-projectName">
+                {{ scope.row.projectName }}
+              </div>
+            </template>
+          </el-table-column>
+
+          <el-table-column prop="leadingDepartment" label="牵头部门" align="center" width="120"> </el-table-column>
+
+          <el-table-column prop="projectProgress" label="项目进展" align="center">
+            <template slot-scope="scope">
+              <el-tooltip placement="top" effect="light">
+                <div slot="content" style="width: 300px">{{ scope.row.projectProgress }}</div>
+                <div class="text-overflow">{{ scope.row.projectProgress }}</div>
+              </el-tooltip>
+            </template>
+          </el-table-column>
+          <el-table-column prop="cloggingPoint" label="当前堵点" align="center"> </el-table-column>
+          <el-table-column prop="advanceRequirement" label="推进要求" align="center">
+            <template slot-scope="scope">
+              <el-tooltip placement="top" effect="light">
+                <div slot="content" style="width: 300px">{{ scope.row.advanceRequirement }}</div>
+                <div class="text-overflow">{{ scope.row.advanceRequirement }}</div>
+              </el-tooltip>
+            </template>
+          </el-table-column>
+          <el-table-column prop="responsibleDepartment" label="责任部门" align="center" width="130"> </el-table-column>
+          <el-table-column prop="deadlineCompletion" label="完成时限" align="center" width="130"> </el-table-column>
+        </el-table> -->
+        <flowChart
+          :curData="flowData"
+          :tableHeight="tableHeight"
+          :loading="false"
+          @changeEdit="handleClickRow"
+          :headerRowStyle="headerRowStyle"
+        ></flowChart>
+      </div>
+      <div class="page-bottom-pagination">
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page.sync="currentPage"
+          layout="prev, pager, next, jumper"
+          :total="total"
+          background
+        >
+        </el-pagination>
+        <div v-if="activeTab === '流程图'" class="flow-chart-info">
+          <span style="font-weight: bold; padding-right: 5px">图例:</span>
+          <div v-for="item in legendData" class="item" :key="item.name">
+            <img style="width: 20px;height: 20px;" :src="setCircleImg(item.name)" />
+            <span style="margin-left: 5px">{{ item.name }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <keyProjectTemp v-if="isEdit" :curId="curId" @switchDom="switchDom"></keyProjectTemp>
+    <keyProjectDetail v-if="isDetail" :curId="curId" @onDetailBack="onDetailBack" @onProjectEdit="onProjectEdit">
+    </keyProjectDetail>
+  </div>
+</template>
+
+<script>
+import img1 from "@images/project/icon-czdddxm.png";
+import img2 from "@images/project/icon-jzsldxm.png";
+import img3 from "@images/project/icon-zdxm1.png";
+import imgL from "@images/project/icon-xmb.png";
+import imgLS from "@images/project/icon-xmb-select.png";
+import imgR from "@images/project/icon-lct.png";
+import imgRS from "@images/project/icon-lct-select.png";
+import circleBlue from "@images/project/level-blue@2x.png";
+import circleGreen from "@images/project/level-green@2x.png";
+import circleRed from "@images/project/level-red@2x.png";
+import circleGray from "@images/project/level-gray@2x.png";
+import keyProjectTemp from "./common/keyProjectTemp.vue";
+import keyProjectDetail from "./common/keyProjectDetail.vue";
+import flowChart from "./common/flowChart.vue";
+import downFile from "@api/projectManaApi/download";
+import { keyProjectStatistics, keyProjectList, keyProjectFlowChart, keyProjectExport } from "@api/projectManaApi";
+
+const colors = ["#21BB7E", "#FF7700", "#FF0000"];
+const bgColors = ["#EBF9EF", "#FFEFE5", "#FFEEEE"];
+const imgs = [img2, img1, img3];
+export default {
+  components: { keyProjectTemp, flowChart, keyProjectDetail },
+  data() {
+    return {
+      topData: [
+        {
+          name: "重点项目",
+          color: colors[1],
+          bgColor: bgColors[1],
+          img: imgs[2],
+          count: 0,
+        },
+        {
+          name: "进展顺利的项目",
+          color: colors[0],
+          bgColor: bgColors[0],
+          img: imgs[0],
+          count: 0,
+        },
+        {
+          name: "存在堵点的项目",
+          color: colors[2],
+          bgColor: bgColors[2],
+          img: imgs[1],
+          count: 0,
+        },
+      ],
+      searchForm: {
+        projectName: "",
+        leadingDepartment: "",
+        projectLeader: "",
+      },
+      tableData: [],
+      tableHeight: 510,
+      tabs2: [
+        {
+          name: "流程图",
+          img: imgR,
+          imgS: imgRS,
+        },
+        {
+          name: "项目表",
+          img: imgL,
+          imgS: imgLS,
+        },
+      ],
+      activeTab: "流程图",
+      legendData: [
+        { color: "#4D82FF", name: "已完成" },
+        { color: "#0DC807", name: "顺利推进" },
+        { color: "#FF1E1E", name: "遇到堵点" },
+        { color: "#B8B8B8", name: "未开始" },
+      ],
+      curTitle: "",
+      tableRef: null,
+      loading: false,
+      total: 0,
+      currentPage: 1,
+      pageSize: 10, // 每页
+      pageNum: 1, // 当前
+      flowData: [],
+      isEdit: false,
+      isDetail: false,
+      curId: null,
+    };
+  },
+  mounted() {
+    // this.initSize();
+    this.initStatistics();
+    this.switchGetData();
+    // window.addEventListener("resize", this.initSize);
+  },
+  methods: {
+    setCircleImg(name) {
+      if (name === "已完成") {
+        return circleBlue;
+      } else if (name === "遇到堵点") {
+        return circleRed;
+      } else if (name === "顺利推进") {
+        return circleGreen;
+      } else {
+        return circleGray;
+      }
+    },
+    onDetailBack() {
+      this.isDetail = false;
+      this.switchGetData();
+    },
+    // 详情点击项目编辑
+    onProjectEdit(id) {
+      this.curId = id;
+      this.isDetail = false;
+      this.isEdit = true;
+    },
+    // 详情或编辑
+    handleClickRow(row, type) {
+      this.curId = row.id;
+      if (type === "edit") {
+        this.isEdit = true;
+        this.isDetail = false;
+      }
+      if (type === "detail") {
+        this.isEdit = false;
+        this.isDetail = true;
+      }
+    },
+    // 表头
+    headerRowStyle() {
+      return "color: #1C1C28;background:#F2F3F5";
+    },
+    handleCellClick(row, col) {
+      if (col.label === "项目名称") {
+        this.handleClickRow(row, "detail");
+      }
+    },
+    // 获取统计数据
+    async initStatistics() {
+      const res = await keyProjectStatistics();
+      if (res && res.length > 0) {
+        res.forEach((item, index) => {
+          if (item.name === "进展顺利的项目") {
+            this.topData[1].count = item.count;
+          }
+          if (item.name === "存在堵点的项目") {
+            this.topData[2].count = item.count;
+          }
+          if (item.name === "重点项目") {
+            this.topData[0].count = item.count;
+          }
+        });
+      }
+    },
+    // 获取table数据
+    async initData() {
+      this.loading = true;
+      const params = {
+        ...this.searchForm,
+        pageSize: this.pageSize,
+        pageNum: this.pageNum,
+      };
+      const res = await keyProjectList(params);
+      if (res.code === 200) {
+        this.tableData = res.rows;
+        this.total = res.total;
+        this.loading = false;
+      } else {
+        this.$message.error(res.msg);
+      }
+    },
+    // 尺寸设置
+    initSize() {
+      this.tableHeight = document.body.clientHeight - 450;
+    },
+    // search
+    onSubmit(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (!valid) {
+          return false;
+        }
+        this.switchGetData();
+      });
+    },
+    // reset
+    onReset(formName) {
+      this.$refs[formName].resetFields();
+      this.switchGetData();
+    },
+    switchGetData() {
+      const actions = {
+        项目表: this.initData,
+        default: this.getFlowChart,
+      };
+      (actions[this.activeTab] || actions.default)();
+    },
+    // 显示切换
+    switchTab(name) {
+      this.activeTab = name;
+      this.switchGetData();
+    },
+    // 获取流程列表
+    async getFlowChart() {
+      this.loading = true;
+      const params = {
+        ...this.searchForm,
+        pageSize: this.pageSize,
+        pageNum: this.pageNum,
+      };
+      const res = await keyProjectFlowChart(params);
+      if (res.code === 200) {
+        this.flowData = res.rows;
+        this.total = res.total;
+        this.loading = false;
+      } else {
+        this.$message.error(res.msg);
+      }
+    },
+    // add new project
+    onAdd() {
+      this.curTitle = "新增项目";
+      this.curId = null;
+      this.isEdit = true;
+      this.isDetail = false;
+    },
+    switchDom(type) {
+      if (type) {
+        if (this.activeTab === "项目表") {
+          this.initData();
+        } else {
+          this.getFlowChart();
+        }
+      }
+      this.curId = null;
+      this.isEdit = false;
+    },
+    // 数据导出
+    async onDataExport() {
+      const res = await keyProjectExport();
+      downFile.excel(res, "重点项目");
+      this.$message.success("导出成功");
+    },
+    // 每页
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.switchGetData();
+    },
+    // 当前页
+    handleCurrentChange(val) {
+      this.pageNum = val;
+      this.switchGetData();
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+.top {
+  display: grid;
+  align-items: center;
+  width: 100%;
+  grid-template-columns: repeat(3, 350px);
+  grid-column-gap: 20px;
+
+  .item {
+    width: 100%;
+    height: 68px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .right {
+      display: flex;
+      align-items: center;
+      margin-left: 10px;
+    }
+  }
+}
+
+.form {
+  margin: 20px 0 10px 0;
+  width: 100%;
+
+  form {
+    display: flex;
+    align-items: center;
+  }
+
+  /deep/ .el-divider--vertical {
+    margin: 0 20px;
+  }
+
+  /deep/ .el-form-item--mini.el-form-item,
+  .el-form-item--small.el-form-item {
+    margin-bottom: 0;
+  }
+}
+
+.center-btn {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 50px;
+  width: 100%;
+  margin-bottom: 20px;
+
+  .tab {
+    width: 242px;
+    height: 48px;
+    background: #efeff0;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    padding: 5px;
+    box-sizing: border-box;
+
+    .item {
+      flex: 1;
+      height: 100%;
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      span {
+        padding-left: 5px;
+      }
+
+      :hover {
+        cursor: pointer;
+      }
+    }
+
+    .active-item {
+      background: #fff;
+      color: #0063f7;
+    }
+  }
+}
+
+.table-content {
+  position: relative;
+  width: 100%;
+}
+
+.flow-chart-info {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  right: 0;
+  height: 70px;
+  top: 0;
+
+  .item {
+    display: flex;
+    align-items: center;
+    margin-left: 10px;
+  }
+}
+
+.input-width {
+  width: 230px;
+}
+
+@media screen and(max-width: 1460px) {
+  .form {
+    /deep/ .el-divider--vertical {
+      margin: 0 10px;
+    }
+  }
+
+  .input-width {
+    width: 215px;
+  }
+}
+
+@media screen and(max-width: 1366px) {
+  .input-width {
+    width: 190px;
+  }
+}
+</style>

src/views/resources/resources.vue

@@ -28,7 +28,7 @@
         </el-submenu>
         </el-submenu>
       </el-menu>
       </el-menu>
     </div>
     </div>
-    <div class="usercenter_body">
+    <div class="usercenter_body p-right">
       <transition name="el-fade-in" mode="out-in">
       <transition name="el-fade-in" mode="out-in">
         <keep-alive>
         <keep-alive>
           <router-view v-if="$route.meta.keepAlive"></router-view>
           <router-view v-if="$route.meta.keepAlive"></router-view>
@@ -111,6 +111,16 @@ export default {
   .usercenter_body {
   .usercenter_body {
     flex: 1;
     flex: 1;
   }
   }
+  .p-right {
+    flex: 1;
+    margin: 20px;
+    background: white;
+    box-sizing: border-box;
+    border-radius: 4px;
+    padding: 20px;
+    text-align: left;
+    overflow: hidden;
+  }
 }
 }
 
 
 /deep/.user_menu .el-menu {
 /deep/.user_menu .el-menu {