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/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/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/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 {