Skip to content

M
mancheng_code
Commit 06037f3d by heshihao
Options

feat: 修改项目台账

parent ce68a331
Showing with 4443 additions and 2 deletions
src/App.vue
......@@ -128,4 +128,13 @@ body,
min-width: 160px;
border: 1px solid #ccc;
}
.page-bottom-pagination {
width: 100%;
position: relative;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
src/api/projectManaApi/download.js 0 → 100644
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 0 → 100644
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: {
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 baseURL4 = "http://39.100.39.50:8006";
export const baseURL5 = "https://touzi.cjwltzj.taiyuan.gov.cn/prod-api";
// 2.请求拦截器
service.interceptors.request.use(
(config) => {
......@@ -33,6 +35,9 @@ service.interceptors.request.use(
case "api4":
config.url = baseURL4 + config.url;
break;
case "api5":
config.url = baseURL5 + config.url;
break;
default:
config.url = baseURL + config.url;
}
......@@ -48,6 +53,13 @@ service.interceptors.request.use(
// config.params = { '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;
},
(error) => {
......
src/views/resources/page/common/backModel.vue 0 → 100644
<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 0 → 100644
<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 0 → 100644
<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 0 → 100644
<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 0 → 100644
<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 0 → 100644
<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 0 → 100644
<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 0 → 100644
<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 0 → 100644
<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 0 → 100644
<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 0 → 100644
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 0 → 100644
<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 0 → 100644
<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 0 → 100644
<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 0 → 100644
<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-menu>
</div>
<div class="usercenter_body">
<div class="usercenter_body p-right">
<transition name="el-fade-in" mode="out-in">
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
......@@ -111,6 +111,16 @@ export default {
.usercenter_body {
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 {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment