Merge branch 'main' of http://192.168.110.2:3000/taoge/mk_system into fs
This commit is contained in:
@ -10,7 +10,7 @@ VITE_APP_ENV = 'development'
|
|||||||
# 李陈杰 209
|
# 李陈杰 209
|
||||||
# VITE_APP_BASE_API = 'http://192.168.110.209:8899'
|
# VITE_APP_BASE_API = 'http://192.168.110.209:8899'
|
||||||
# 曾涛
|
# 曾涛
|
||||||
VITE_APP_BASE_API = 'http://192.168.110.180:8899'
|
VITE_APP_BASE_API = 'http://192.168.110.209:8899'
|
||||||
# 罗成
|
# 罗成
|
||||||
# VITE_APP_BASE_API = 'http://192.168.110.188:8899'
|
# VITE_APP_BASE_API = 'http://192.168.110.188:8899'
|
||||||
# 朱银
|
# 朱银
|
||||||
|
|||||||
@ -11,3 +11,34 @@ export const keyIndex = () => {
|
|||||||
method: 'get'
|
method: 'get'
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 每个项目的出勤人数
|
||||||
|
*/
|
||||||
|
|
||||||
|
export const projectAttendanceCount = () => {
|
||||||
|
return request({
|
||||||
|
url: '/enterprise/big/screen/projectAttendanceCount',
|
||||||
|
method: 'get'
|
||||||
|
});
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* 人数统计
|
||||||
|
*/
|
||||||
|
|
||||||
|
export const peopleCount = () => {
|
||||||
|
return request({
|
||||||
|
url: '/enterprise/big/screen/peopleCount',
|
||||||
|
method: 'get'
|
||||||
|
});
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* 出勤人数统计
|
||||||
|
*/
|
||||||
|
|
||||||
|
export const allAttendanceCount = () => {
|
||||||
|
return request({
|
||||||
|
url: '/enterprise/big/screen/allAttendanceCount',
|
||||||
|
method: 'get'
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|||||||
43
src/api/outputApi/index.ts
Normal file
43
src/api/outputApi/index.ts
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
import request from '@/utils/request';
|
||||||
|
import { AxiosPromise } from 'axios';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 查询项目数据
|
||||||
|
* @param query
|
||||||
|
* @returns {*}
|
||||||
|
*/
|
||||||
|
|
||||||
|
export const projectProgress = (query?: any): any => {
|
||||||
|
return request({
|
||||||
|
url: '/enterprise/big/screen/projectProgress',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 产值
|
||||||
|
* @param query
|
||||||
|
* @returns {*}
|
||||||
|
*/
|
||||||
|
|
||||||
|
export const outpuProgress = (query?: any): any => {
|
||||||
|
return request({
|
||||||
|
url: '/enterprise/big/screen/projectOutputValueComparison',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
});
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* 预警
|
||||||
|
* @param query
|
||||||
|
* @returns {*}
|
||||||
|
*/
|
||||||
|
|
||||||
|
export const earlyWarning = (query?: any): any => {
|
||||||
|
return request({
|
||||||
|
url: '/enterprise/big/screen/riskEarlyWarning',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
});
|
||||||
|
};
|
||||||
BIN
src/assets/images/man.png
Normal file
BIN
src/assets/images/man.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
src/assets/images/map.png
Normal file
BIN
src/assets/images/map.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 360 KiB |
BIN
src/assets/large/actual.png
Normal file
BIN
src/assets/large/actual.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
src/assets/large/capacity.png
Normal file
BIN
src/assets/large/capacity.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
src/assets/large/delay.png
Normal file
BIN
src/assets/large/delay.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
src/assets/large/plan.png
Normal file
BIN
src/assets/large/plan.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
@ -1,29 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="upload-file">
|
<div class="upload-file">
|
||||||
<el-upload
|
<el-upload ref="fileUploadRef" multiple :action="realUploadUrl" :before-upload="handleBeforeUpload"
|
||||||
ref="fileUploadRef"
|
:file-list="fileList" :limit="limit" :on-error="handleUploadError" :on-exceed="handleExceed"
|
||||||
multiple
|
:on-success="handleUploadSuccess" :show-file-list="showFileList" :on-preview="handlePreview" :headers="headers"
|
||||||
:action="realUploadUrl"
|
class="upload-file-uploader" :list-type="isConstruction ? 'picture-card' : 'text'" :accept="accept" :drag="isDarg"
|
||||||
:before-upload="handleBeforeUpload"
|
:data="data" :auto-upload="autoUpload" :on-change="handleChange" :on-remove="handleRemove" :method="method"
|
||||||
:file-list="fileList"
|
:http-request="customUpload">
|
||||||
:limit="limit"
|
|
||||||
:on-error="handleUploadError"
|
|
||||||
:on-exceed="handleExceed"
|
|
||||||
:on-success="handleUploadSuccess"
|
|
||||||
:show-file-list="showFileList"
|
|
||||||
:on-preview="handlePreview"
|
|
||||||
:headers="headers"
|
|
||||||
class="upload-file-uploader"
|
|
||||||
:list-type="isConstruction ? 'picture-card' : 'text'"
|
|
||||||
:accept="accept"
|
|
||||||
:drag="isDarg"
|
|
||||||
:data="data"
|
|
||||||
:auto-upload="autoUpload"
|
|
||||||
:on-change="handleChange"
|
|
||||||
:on-remove="handleRemove"
|
|
||||||
:method="method"
|
|
||||||
:http-request="customUpload"
|
|
||||||
>
|
|
||||||
<slot>
|
<slot>
|
||||||
<div>
|
<div>
|
||||||
<!-- 上传按钮 -->
|
<!-- 上传按钮 -->
|
||||||
@ -42,20 +24,10 @@
|
|||||||
的文件
|
的文件
|
||||||
</div>
|
</div>
|
||||||
<!-- 文件列表 -->
|
<!-- 文件列表 -->
|
||||||
<transition-group
|
<transition-group v-if="!isConstruction && !isImportInfo"
|
||||||
v-if="!isConstruction && !isImportInfo"
|
class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul" @click.stop>
|
||||||
class="upload-file-list el-upload-list el-upload-list--text"
|
<li style="margin-top: 10px" v-for="(file, index) in fileList" :key="file.uid"
|
||||||
name="el-fade-in-linear"
|
class="el-upload-list__item ele-upload-list__item-content" v-if="autoUpload">
|
||||||
tag="ul"
|
|
||||||
@click.stop
|
|
||||||
>
|
|
||||||
<li
|
|
||||||
style="margin-top: 10px"
|
|
||||||
v-for="(file, index) in fileList"
|
|
||||||
:key="file.uid"
|
|
||||||
class="el-upload-list__item ele-upload-list__item-content"
|
|
||||||
v-if="autoUpload"
|
|
||||||
>
|
|
||||||
<el-link :href="`${file.url}`" :underline="false" target="_blank">
|
<el-link :href="`${file.url}`" :underline="false" target="_blank">
|
||||||
<span class="el-icon-document"> {{ getFileName(file.name) }} </span>
|
<span class="el-icon-document"> {{ getFileName(file.name) }} </span>
|
||||||
</el-link>
|
</el-link>
|
||||||
@ -305,8 +277,6 @@ const handleChange = (file: any, filelist: any) => {
|
|||||||
|
|
||||||
// 删除文件
|
// 删除文件
|
||||||
const handleRemove = (file: any, fileList: any) => {
|
const handleRemove = (file: any, fileList: any) => {
|
||||||
console.log(11);
|
|
||||||
|
|
||||||
emit('handleRemove', file, fileList);
|
emit('handleRemove', file, fileList);
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -470,7 +440,7 @@ defineExpose({ submitUpload });
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
> span {
|
>span {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,54 +1,19 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="p-2">
|
<div class="p-2">
|
||||||
<el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
|
<el-card shadow="never">
|
||||||
<el-tab-pane label="变更单" name="1"
|
<template #header>
|
||||||
><el-card shadow="never">
|
<el-row :gutter="10" class="mb8">
|
||||||
<template #header>
|
<el-col :span="1.5">
|
||||||
<el-row :gutter="10" class="mb8">
|
<el-button type="primary" plain icon="Plus" :disabled="addSingle" @click="handleAdd" v-hasPermi="['quality:qualityInspection:add']"
|
||||||
<el-col :span="1.5">
|
>上传外部联系单模版</el-button
|
||||||
<el-button type="primary" plain icon="Plus" :disabled="addSingle" @click="handleAddApp" v-hasPermi="['quality:qualityInspection:add']"
|
>
|
||||||
>上传变更单模版</el-button
|
</el-col>
|
||||||
>
|
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||||
</el-col>
|
</el-row>
|
||||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
</template>
|
||||||
</el-row>
|
<Contactform @selection-change="handleSelectionChange" :data="tableData" @delete="handleDelete"></Contactform>
|
||||||
</template>
|
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
|
||||||
<EngineeringChangeApplicationForm
|
</el-card>
|
||||||
@selection-change="handleSelectionChange"
|
|
||||||
:data="tableData"
|
|
||||||
:thumbnail="projectTypeOptions[1].thumbnail"
|
|
||||||
@delete="handleDelete"
|
|
||||||
></EngineeringChangeApplicationForm>
|
|
||||||
<pagination
|
|
||||||
v-show="total > 0"
|
|
||||||
:total="total"
|
|
||||||
v-model:page="queryParams.pageNum"
|
|
||||||
v-model:limit="queryParams.pageSize"
|
|
||||||
@pagination="getList"
|
|
||||||
/> </el-card
|
|
||||||
></el-tab-pane>
|
|
||||||
<el-tab-pane label="外部联系单" name="0"
|
|
||||||
><el-card shadow="never">
|
|
||||||
<template #header>
|
|
||||||
<el-row :gutter="10" class="mb8">
|
|
||||||
<el-col :span="1.5">
|
|
||||||
<el-button type="primary" plain icon="Plus" :disabled="addSingle" @click="handleAdd" v-hasPermi="['quality:qualityInspection:add']"
|
|
||||||
>上传外部联系单模版</el-button
|
|
||||||
>
|
|
||||||
</el-col>
|
|
||||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
|
||||||
</el-row>
|
|
||||||
</template>
|
|
||||||
<Contactform @selection-change="handleSelectionChange" :data="tableData" @delete="handleDelete"></Contactform>
|
|
||||||
<pagination
|
|
||||||
v-show="total > 0"
|
|
||||||
:total="total"
|
|
||||||
v-model:page="queryParams.pageNum"
|
|
||||||
v-model:limit="queryParams.pageSize"
|
|
||||||
@pagination="getList"
|
|
||||||
/> </el-card
|
|
||||||
></el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
<el-dialog title="新增模板" v-model="dialogVisible" width="800">
|
<el-dialog title="新增模板" v-model="dialogVisible" width="800">
|
||||||
<el-form :model="form" :rules="rules" ref="formRef" label-width="110px">
|
<el-form :model="form" :rules="rules" ref="formRef" label-width="110px">
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
@ -109,14 +74,11 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { useUserStoreHook } from '@/store/modules/user';
|
import { useUserStoreHook } from '@/store/modules/user';
|
||||||
import type { FormInstance, FormRules } from 'element-plus';
|
import type { FormInstance } from 'element-plus';
|
||||||
import Contactform from './components/contactform.vue';
|
import Contactform from './components/contactform.vue';
|
||||||
import EngineeringChangeApplicationForm from './components/engineeringChangeApplicationForm.vue';
|
|
||||||
import { listContactTypeformtemplate } from '@/api/cory/contactformtemplate';
|
import { listContactTypeformtemplate } from '@/api/cory/contactformtemplate';
|
||||||
import { addContactnotice, delContactnotice, listContactnotice } from '@/api/cory/contactnotice';
|
import { addContactnotice, delContactnotice, listContactnotice } from '@/api/cory/contactnotice';
|
||||||
|
|
||||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||||
const { wf_business_status } = toRefs(proxy?.useDict('wf_business_status'));
|
|
||||||
// 获取用户 store
|
// 获取用户 store
|
||||||
const userStore = useUserStoreHook();
|
const userStore = useUserStoreHook();
|
||||||
// 从 store 中获取项目列表和当前选中的项目
|
// 从 store 中获取项目列表和当前选中的项目
|
||||||
|
|||||||
@ -0,0 +1,396 @@
|
|||||||
|
<template>
|
||||||
|
<div class="content-box">
|
||||||
|
<el-table :data="data" style="width: 100%" @selection-change="handleSelectionChange">
|
||||||
|
<el-table-column type="index" width="55" label="序号" align="center" />
|
||||||
|
<el-table-column align="center" prop="projectName" label="工程名称" />
|
||||||
|
<el-table-column align="center" prop="submitUnit" label="提出单位" />
|
||||||
|
<el-table-column align="center" prop="specialty" label="专业">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<dict-tag :options="des_user_major" :value="row.specialty" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" prop="submitDate" label="提出日期">
|
||||||
|
<template #default="{ row }">
|
||||||
|
{{ formatDate(row.submitDate) }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" prop="volumeName" label="卷册名称" />
|
||||||
|
<el-table-column align="center" prop="volumeNumber" label="卷册号" />
|
||||||
|
<el-table-column align="center" prop="content" label="变更内容" />
|
||||||
|
<el-table-column align="center" prop="costEstimation" label="变更费用估算" />
|
||||||
|
<el-table-column label="流程状态" align="center" prop="status">
|
||||||
|
<template #default="scope">
|
||||||
|
<dict-tag :options="wf_business_status" :value="scope.row.status" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" prop="content" label="操作" width="240">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-button link type="warning" v-if="scope.row.status === 'draft'" icon="Edit" @click="handleUpdate(scope.row)" class="ml-3"
|
||||||
|
>审批
|
||||||
|
</el-button>
|
||||||
|
<el-button link type="primary" icon="View" @click="handleViewInfo(scope.row)" class="ml-3"> 查看流程 </el-button>
|
||||||
|
<el-button link type="success" icon="View" @click="handleDetail(scope.row)" class="ml-3"> 详情 </el-button>
|
||||||
|
<!-- <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)"> 删除 </el-button> -->
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<!-- 详情 -->
|
||||||
|
<el-dialog title="变更单详情" v-model="detailVisible" width="1000">
|
||||||
|
<div class="w[850px] ma word-export-wrapper" ref="exportRef">
|
||||||
|
<div class="w80% ma">
|
||||||
|
<h2 style="text-align: center; margin-top: 5px; font-weight: bold">变更单</h2>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12">编号：{{ tableDetail.id }}</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-descriptions :column="2" border style="margin-top: 8px" label-width="160px" size="large">
|
||||||
|
<el-descriptions-item label-align="center" label="工程名称" class-name="zebra"> {{ tableDetail.projectName }} </el-descriptions-item>
|
||||||
|
<el-descriptions-item label-align="center" label="提出单位" class-name="zebra"> {{ tableDetail.submitUnit }} </el-descriptions-item>
|
||||||
|
<el-descriptions-item label-align="center" label="专业" label-class-name="white"
|
||||||
|
><dict-tag :options="des_user_major" :value="tableDetail.specialty" />
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label-align="center" label="提出日期" label-class-name="white">
|
||||||
|
{{ dayjs(tableDetail.submitDate).format('YYYY-MM-DD') }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label-align="center" label="卷册名称" class-name="zebra"> {{ tableDetail.volumeName }} </el-descriptions-item>
|
||||||
|
<el-descriptions-item label-align="center" label="卷册号" class-name="zebra"> {{ tableDetail.volumeNumber }} </el-descriptions-item>
|
||||||
|
<el-descriptions-item label-align="center" label="附图" :span="2" label-class-name="white">
|
||||||
|
<img :src="item.url" v-for="item in tableDetail.attachmentsImgList" alt="" style="width: 200px; height: auto" />
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label-align="center" label="变更原因" :span="2" class-name="zebra">
|
||||||
|
<el-checkbox-group v-model="tableDetail.changeReasons">
|
||||||
|
<el-checkbox
|
||||||
|
v-for="(item, index) in radioList"
|
||||||
|
:class="index % 2 == 0 ? 'w45%' : ''"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.label"
|
||||||
|
disabled
|
||||||
|
/>
|
||||||
|
</el-checkbox-group>
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label-align="center" label="内容" :span="2" label-class-name="white">
|
||||||
|
{{ tableDetail.content }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label-align="center" label="附件" :span="2" label-class-name="white">
|
||||||
|
<el-link type="primary" :underline="false" :href="tableDetail.attachmentsList?.url" target="_blank">{{
|
||||||
|
tableDetail.attachmentsList?.originalName
|
||||||
|
}}</el-link>
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label-align="center" label="变更费用估算" :span="2" class-name="zebra">
|
||||||
|
{{ tableDetail.costEstimation }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
</el-descriptions>
|
||||||
|
<el-descriptions border direction="vertical" size="large">
|
||||||
|
<el-descriptions-item label-align="center" label="施工承包单位" class-name="none"></el-descriptions-item>
|
||||||
|
</el-descriptions>
|
||||||
|
<el-descriptions :column="2" border label-width="160px" size="large">
|
||||||
|
<el-descriptions-item label-align="center" label="项目经理 " label-class-name="white">
|
||||||
|
{{ tableDetail.contractorLeader }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label-align="center" label="日期" label-class-name="white">
|
||||||
|
{{ dayjs(tableDetail.contractorDate).format('YYYY-MM-DD') }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
</el-descriptions>
|
||||||
|
<!-- <el-descriptions border direction="vertical" size="large">
|
||||||
|
<el-descriptions-item label-align="center" label="总承包单位" class-name="none"></el-descriptions-item>
|
||||||
|
</el-descriptions>
|
||||||
|
<el-descriptions :column="2" border label-width="160px" size="large">
|
||||||
|
<el-descriptions-item label-align="center" label="项目技术负责人" label-class-name="white">{{
|
||||||
|
tableDetail.bsupervisorLeader
|
||||||
|
}}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label-align="center" label="日期" label-class-name="white">
|
||||||
|
{{ dayjs(tableDetail.bsupervisorDate).format('YYYY-MM-DD') }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
</el-descriptions>
|
||||||
|
<el-descriptions border direction="vertical" size="large">
|
||||||
|
<el-descriptions-item label-align="center" label="设计单位" class-name="none"></el-descriptions-item>
|
||||||
|
</el-descriptions>
|
||||||
|
<el-descriptions :column="2" border label-width="160px" size="large">
|
||||||
|
<el-descriptions-item label-align="center" label="设计代表" label-class-name="white">{{
|
||||||
|
tableDetail.csupervisorLeader
|
||||||
|
}}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label-align="center" label="日期" label-class-name="white">
|
||||||
|
{{ dayjs(tableDetail.csupervisorDate).format('YYYY-MM-DD') }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
</el-descriptions> -->
|
||||||
|
<el-descriptions border direction="vertical" size="large">
|
||||||
|
<el-descriptions-item label-align="center" label="项目监理单位" class-name="none"></el-descriptions-item>
|
||||||
|
</el-descriptions>
|
||||||
|
|
||||||
|
<!-- 单独插入整行占用的内容 -->
|
||||||
|
<el-descriptions :column="2" border label-width="160px" size="large">
|
||||||
|
<el-descriptions-item label="总监理工程师" label-align="center" label-class-name="white">
|
||||||
|
{{ tableDetail.supervisorLeader }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="日期" label-align="center" label-class-name="white">
|
||||||
|
{{ dayjs(tableDetail.supervisorDate).format('YYYY-MM-DD') }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
</el-descriptions>
|
||||||
|
<!-- 一组完整两列 -->
|
||||||
|
<!-- <el-descriptions :column="2" border label-width="160px" size="large">
|
||||||
|
<el-descriptions-item label="监理工程师" label-align="center" label-class-name="white">
|
||||||
|
{{ tableDetail.dsupervisorLeader }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="日期" label-align="center" label-class-name="white">
|
||||||
|
{{ dayjs(tableDetail.supervisorDate).format('YYYY-MM-DD') }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
</el-descriptions> -->
|
||||||
|
<el-descriptions border direction="vertical" size="large">
|
||||||
|
<el-descriptions-item label-align="center" label="建设单位" class-name="none"></el-descriptions-item>
|
||||||
|
</el-descriptions>
|
||||||
|
<el-descriptions :column="2" border label-width="160px" size="large">
|
||||||
|
<!-- <el-descriptions-item label-align="center" label="会签" :span="2" label-class-name="white"> {{ tableDetail.esupervisorLeader }} </el-descriptions-item> -->
|
||||||
|
<el-descriptions-item label-align="center" label="负责人" label-class-name="white">
|
||||||
|
{{ tableDetail.ownerRep }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label-align="center" label="日期" label-class-name="white">
|
||||||
|
{{ dayjs(tableDetail.ownerDate).format('YYYY-MM-DD') }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
</el-descriptions>
|
||||||
|
</div>
|
||||||
|
<div class="dialog-footer">
|
||||||
|
<div class="btn-item" @click="handleDownload">
|
||||||
|
<img src="@/assets/icons/svg/derived.png" />
|
||||||
|
<span>下载</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { listByIds } from '@/api/system/oss';
|
||||||
|
import { dayjs } from 'element-plus';
|
||||||
|
import { saveAs } from 'file-saver';
|
||||||
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||||
|
const { wf_business_status } = toRefs<any>(proxy?.useDict('wf_business_status'));
|
||||||
|
const props = defineProps({
|
||||||
|
data: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
thumbnail: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const tableDetail = ref<any>({ attachmentsImgList: [], attachmentsList: [] });
|
||||||
|
|
||||||
|
const exportRef = ref<HTMLElement>();
|
||||||
|
const radioList = ref([
|
||||||
|
{ value: 0, label: '设计漏项' },
|
||||||
|
{ value: 1, label: '设计改进' },
|
||||||
|
{ value: 2, label: '设计差错' },
|
||||||
|
{ value: 3, label: '接口差错' },
|
||||||
|
{ value: 4, label: '业主要求' },
|
||||||
|
{ value: 5, label: '施工承包商要求' },
|
||||||
|
{ value: 6, label: '外部资料与最终情况不符' },
|
||||||
|
{ value: 7, label: '材料代用及其他' }
|
||||||
|
]);
|
||||||
|
const detailVisible = ref(false);
|
||||||
|
const formatDate = (val: string | Date) => (val ? dayjs(val).format('YYYY-MM-DD') : '');
|
||||||
|
const { des_user_major } = toRefs<any>(proxy?.useDict('des_user_major'));
|
||||||
|
|
||||||
|
const handleDetail = async (row) => {
|
||||||
|
tableDetail.value = { ...row };
|
||||||
|
|
||||||
|
if (row.attachmentsImg) {
|
||||||
|
const res = await listByIds(row.attachmentsImg);
|
||||||
|
tableDetail.value.attachmentsImgList = res.data;
|
||||||
|
}
|
||||||
|
if (row.attachments) {
|
||||||
|
const res = await listByIds(row.attachments);
|
||||||
|
tableDetail.value.attachmentsList = res.data[0];
|
||||||
|
}
|
||||||
|
|
||||||
|
// tableDetail.value = {
|
||||||
|
// ...row,
|
||||||
|
// hasAttachmentList: res.data
|
||||||
|
// };
|
||||||
|
detailVisible.value = true;
|
||||||
|
};
|
||||||
|
/** 多选框选中数据 */
|
||||||
|
const emit = defineEmits(['selection-change', 'delete']);
|
||||||
|
const handleSelectionChange = (selection: any) => {
|
||||||
|
emit('selection-change', selection);
|
||||||
|
};
|
||||||
|
const handleDelete = (row) => {
|
||||||
|
emit('delete', row.id);
|
||||||
|
};
|
||||||
|
const handleUpdate = (row) => {
|
||||||
|
// 添加审批
|
||||||
|
proxy.$tab.closePage(proxy.$route);
|
||||||
|
proxy.$router.push({
|
||||||
|
path: `/approval/changeContact/indexEdit`,
|
||||||
|
query: {
|
||||||
|
thumbnailUrl: props.thumbnail,
|
||||||
|
row: JSON.stringify(row),
|
||||||
|
id: row.id,
|
||||||
|
type: 'update'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const handleViewInfo = (row) => {
|
||||||
|
// 添加审批
|
||||||
|
proxy.$tab.closePage(proxy.$route);
|
||||||
|
proxy.$router.push({
|
||||||
|
path: `/approval/changeContact/indexEdit`,
|
||||||
|
query: {
|
||||||
|
thumbnailUrl: props.thumbnail,
|
||||||
|
row: JSON.stringify(row),
|
||||||
|
id: row.id,
|
||||||
|
type: 'view'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const handleDownload = async () => {
|
||||||
|
const style = `
|
||||||
|
<style>
|
||||||
|
.white { background: #fff !important; }
|
||||||
|
.none { display: none !important; }
|
||||||
|
.zebra { background: #f5f7fa !important; }
|
||||||
|
.el-descriptions__table { table-layout: fixed !important; }
|
||||||
|
table { border-collapse: collapse; width: 100%; }
|
||||||
|
th, td { border: 1px solid #333; padding: 6px; font-size: 14px; }
|
||||||
|
</style>
|
||||||
|
`;
|
||||||
|
|
||||||
|
const el = exportRef.value;
|
||||||
|
if (!el) return;
|
||||||
|
|
||||||
|
// 拷贝 DOM，避免影响原内容
|
||||||
|
const clone = el.cloneNode(true) as HTMLElement;
|
||||||
|
|
||||||
|
// 删除 .dialog-footer
|
||||||
|
const footer = clone.querySelector('.dialog-footer');
|
||||||
|
if (footer) {
|
||||||
|
footer.remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 工具函数：图片转成指定宽度的 base64
|
||||||
|
const resizeImageToBase64 = (img: HTMLImageElement, maxWidth = 500) => {
|
||||||
|
return new Promise<string>((resolve) => {
|
||||||
|
const image = new Image();
|
||||||
|
image.crossOrigin = 'anonymous';
|
||||||
|
image.src = img.src;
|
||||||
|
image.onload = () => {
|
||||||
|
const scale = Math.min(1, maxWidth / image.naturalWidth);
|
||||||
|
const canvas = document.createElement('canvas');
|
||||||
|
canvas.width = image.naturalWidth * scale;
|
||||||
|
canvas.height = image.naturalHeight * scale;
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
ctx!.drawImage(image, 0, 0, canvas.width, canvas.height);
|
||||||
|
resolve(canvas.toDataURL('image/png'));
|
||||||
|
};
|
||||||
|
image.onerror = () => {
|
||||||
|
resolve(img.src); // 如果加载失败就用原地址
|
||||||
|
};
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 找到所有图片并替换成 base64（顺序执行以避免并发问题）
|
||||||
|
const imgs = Array.from(clone.querySelectorAll('img'));
|
||||||
|
for (let img of imgs) {
|
||||||
|
const base64 = await resizeImageToBase64(img, 200);
|
||||||
|
img.src = base64;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 应用表格的内联样式
|
||||||
|
applyInlineTableStyles(clone);
|
||||||
|
|
||||||
|
// 拼接 HTML
|
||||||
|
const html = `
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
${style}
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
${clone.innerHTML}
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
`;
|
||||||
|
|
||||||
|
const blob = (window as any).htmlDocx.asBlob(html);
|
||||||
|
saveAs(blob, '变更单.docx');
|
||||||
|
};
|
||||||
|
|
||||||
|
const applyInlineTableStyles = (rootEl: HTMLElement) => {
|
||||||
|
rootEl.querySelectorAll('table').forEach((table) => {
|
||||||
|
table.setAttribute('style', 'width:100%; border-collapse:collapse; table-layout:fixed; border:1px solid #333;');
|
||||||
|
});
|
||||||
|
|
||||||
|
rootEl.querySelectorAll('th, td').forEach((cell) => {
|
||||||
|
cell.setAttribute('style', 'border:1px solid #333; padding:6px; font-size:14px; word-break:break-all;');
|
||||||
|
});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
:deep(.white) {
|
||||||
|
background: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.none) {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.zebra) {
|
||||||
|
background: #f5f7fa;
|
||||||
|
}
|
||||||
|
:deep(.el-descriptions__table) {
|
||||||
|
table-layout: fixed !important;
|
||||||
|
}
|
||||||
|
.word-export-wrapper {
|
||||||
|
table {
|
||||||
|
width: 100% !important;
|
||||||
|
border-collapse: collapse;
|
||||||
|
table-layout: fixed;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
border: 1px solid #333;
|
||||||
|
padding: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: left;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 确保不超出 Word 页边距 */
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-descriptions__label {
|
||||||
|
font-weight: bold;
|
||||||
|
background-color: #f2f2f2;
|
||||||
|
}
|
||||||
|
.dialog-footer {
|
||||||
|
height: 100px;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
position: absolute;
|
||||||
|
top: 14%;
|
||||||
|
right: 6%;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0 0 10px #ddd;
|
||||||
|
text-align: center;
|
||||||
|
padding: 20px 10px;
|
||||||
|
|
||||||
|
.btn-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
img {
|
||||||
|
transform: rotateZ(180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
279
src/views/design/shijibiangeng/index.vue
Normal file
279
src/views/design/shijibiangeng/index.vue
Normal file
@ -0,0 +1,279 @@
|
|||||||
|
<template>
|
||||||
|
<div class="p-2">
|
||||||
|
<el-card shadow="never">
|
||||||
|
<template #header>
|
||||||
|
<el-row :gutter="10" class="mb8">
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button type="primary" plain icon="Plus" :disabled="addSingle" @click="handleAddApp" v-hasPermi="['quality:qualityInspection:add']"
|
||||||
|
>上传设计变更单</el-button
|
||||||
|
>
|
||||||
|
</el-col>
|
||||||
|
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||||
|
</el-row>
|
||||||
|
</template>
|
||||||
|
<EngineeringChangeApplicationForm
|
||||||
|
@selection-change="handleSelectionChange"
|
||||||
|
:data="tableData"
|
||||||
|
:thumbnail="projectTypeOptions[1].thumbnail"
|
||||||
|
@delete="handleDelete"
|
||||||
|
></EngineeringChangeApplicationForm>
|
||||||
|
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
|
||||||
|
</el-card>
|
||||||
|
<el-dialog title="新增模板" v-model="dialogVisible" width="800">
|
||||||
|
<el-form :model="form" :rules="rules" ref="formRef" label-width="110px">
|
||||||
|
<div class="flex">
|
||||||
|
<div><image-preview :src="thumbnailUrl" width="150px"></image-preview></div>
|
||||||
|
<div>
|
||||||
|
<el-form-item label="工程名称" prop="projectName">
|
||||||
|
<el-input v-model="form.projectName" placeholder="请输入工程名称" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="编号" prop="serialNumber">
|
||||||
|
<el-input v-model="form.serialNumber" placeholder="请输入编号" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="致" prop="to">
|
||||||
|
<el-input v-model="form.to" placeholder="致：" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="主题" prop="subject">
|
||||||
|
<el-input v-model="form.subject" placeholder="请输入主题" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="内容" prop="content">
|
||||||
|
<el-input v-model="form.content" type="textarea" :rows="6" placeholder="请输入内容" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="附件" prop="attachments">
|
||||||
|
<file-upload v-model="form.attachments" :limit="1" :file-type="['pdf', 'png', 'jpg', 'jpeg', 'gif', 'bmp']"></file-upload>
|
||||||
|
</el-form-item>
|
||||||
|
<el-divider class="mb-10! mt-10!">施工项目部</el-divider>
|
||||||
|
<el-form-item label="项目负责人" prop="contractorLeader">
|
||||||
|
<el-input v-model="form.contractorLeader" placeholder="请输入负责人姓名" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="日期" prop="contractorDate">
|
||||||
|
<el-date-picker v-model="form.contractorDate" type="date" placeholder="选择日期" style="width: 100%" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-divider class="mb-10! mt-10!">项目监理机构</el-divider>
|
||||||
|
|
||||||
|
<el-form-item label="总监理工程师" prop="supervisorLeader">
|
||||||
|
<el-input v-model="form.supervisorLeader" placeholder="请输入总监理工程师姓名" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="日期" prop="supervisorDate">
|
||||||
|
<el-date-picker v-model="form.supervisorDate" type="date" placeholder="选择日期" style="width: 100%" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-divider class="mb-10! mt-10!">建设单位</el-divider>
|
||||||
|
<el-form-item label="业主代表" prop="ownerRep">
|
||||||
|
<el-input v-model="form.ownerRep" placeholder="请输入业主代表" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="日期" prop="ownerDate">
|
||||||
|
<el-date-picker v-model="form.ownerDate" type="date" placeholder="选择日期" style="width: 100%" />
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<span>
|
||||||
|
<el-button @click="dialogVisible = false">取消</el-button>
|
||||||
|
<el-button type="primary" @click="submitForm">确定</el-button>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { useUserStoreHook } from '@/store/modules/user';
|
||||||
|
import type { FormInstance, FormRules } from 'element-plus';
|
||||||
|
import EngineeringChangeApplicationForm from './components/engineeringChangeApplicationForm.vue';
|
||||||
|
import { listContactTypeformtemplate } from '@/api/cory/contactformtemplate';
|
||||||
|
import { addContactnotice, delContactnotice, listContactnotice } from '@/api/cory/contactnotice';
|
||||||
|
|
||||||
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||||
|
const { wf_business_status } = toRefs(proxy?.useDict('wf_business_status'));
|
||||||
|
// 获取用户 store
|
||||||
|
const userStore = useUserStoreHook();
|
||||||
|
// 从 store 中获取项目列表和当前选中的项目
|
||||||
|
const currentProject = computed(() => userStore.selectedProject);
|
||||||
|
const thumbnailUrl = ref('');
|
||||||
|
const tableData = ref([]);
|
||||||
|
const total = ref(0);
|
||||||
|
const activeName = ref('1');
|
||||||
|
const formRef = ref<FormInstance>();
|
||||||
|
const dialogVisible = ref<boolean>(false);
|
||||||
|
const showSearch = ref(true);
|
||||||
|
const multiple = ref<boolean>(true);
|
||||||
|
const addSingle = ref<boolean>(false);
|
||||||
|
const single = ref<boolean>(true);
|
||||||
|
const ids = ref<Array<string | number>>([]);
|
||||||
|
|
||||||
|
const projectTypeOptions = ref<any>([
|
||||||
|
{
|
||||||
|
value: '0',
|
||||||
|
label: '外部联系单'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '1',
|
||||||
|
label: '变更单'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '2',
|
||||||
|
label: '通知单'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '3',
|
||||||
|
label: '回复单'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '4',
|
||||||
|
label: '签证单'
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
const initFormData = {
|
||||||
|
projectType: '',
|
||||||
|
projectName: '',
|
||||||
|
serialNumber: '',
|
||||||
|
to: '',
|
||||||
|
subject: '',
|
||||||
|
content: '',
|
||||||
|
attachments: '',
|
||||||
|
contractorLeader: '',
|
||||||
|
contractorDate: '',
|
||||||
|
supervisorLeader: '',
|
||||||
|
supervisorDate: '',
|
||||||
|
ownerRep: '',
|
||||||
|
ownerDate: '',
|
||||||
|
unitName: '',
|
||||||
|
profession: '',
|
||||||
|
applyDate: '',
|
||||||
|
bookName: '',
|
||||||
|
bookNo: '',
|
||||||
|
hasAttachment: '',
|
||||||
|
changeReasons: [],
|
||||||
|
changeContent: '',
|
||||||
|
costEstimate: ''
|
||||||
|
};
|
||||||
|
const data = reactive<PageData<any, any>>({
|
||||||
|
form: { ...initFormData },
|
||||||
|
queryParams: {
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
projectId: currentProject.value?.id,
|
||||||
|
inspectionType: undefined,
|
||||||
|
inspectionStatus: undefined,
|
||||||
|
teamId: undefined,
|
||||||
|
type: undefined,
|
||||||
|
params: {},
|
||||||
|
// ids: ['1942107830848872449', '1942107931415699457'],
|
||||||
|
projectType: undefined
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
projectName: [{ required: true, message: '请输入工程名称', trigger: 'blur' }],
|
||||||
|
projectType: [{ required: true, message: '请选择模板类型', trigger: 'blur' }],
|
||||||
|
serialNumber: [{ required: true, message: '请输入编号', trigger: 'blur' }],
|
||||||
|
to: [{ required: true, message: '请输入接收方', trigger: 'blur' }],
|
||||||
|
subject: [{ required: true, message: '请输入主题', trigger: 'blur' }],
|
||||||
|
content: [{ required: true, message: '请输入内容', trigger: 'blur' }]
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const { queryParams, form, rules } = toRefs(data);
|
||||||
|
|
||||||
|
const submitForm = () => {
|
||||||
|
formRef.value?.validate(async (valid) => {
|
||||||
|
if (valid) {
|
||||||
|
let data = {
|
||||||
|
type: queryParams.value.type,
|
||||||
|
projectId: currentProject.value?.id,
|
||||||
|
detail: JSON.stringify(form.value)
|
||||||
|
};
|
||||||
|
console.log('提交表单：', form);
|
||||||
|
const res = await addContactnotice(data);
|
||||||
|
if (res.code == 200) {
|
||||||
|
proxy.$modal.msgSuccess('添加成功');
|
||||||
|
dialogVisible.value = false;
|
||||||
|
formRef.value.resetFields();
|
||||||
|
getList();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAdd = () => {
|
||||||
|
dialogVisible.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getList = async () => {
|
||||||
|
if (!queryParams.value.projectType) {
|
||||||
|
const res = await listContactTypeformtemplate(queryParams.value);
|
||||||
|
projectTypeOptions.value = res.data;
|
||||||
|
queryParams.value.projectType = res.data[1].name;
|
||||||
|
thumbnailUrl.value = res.data[1].thumbnail;
|
||||||
|
queryParams.value.type = res.data[1].id as string;
|
||||||
|
}
|
||||||
|
const res = await listContactnotice(queryParams.value);
|
||||||
|
res.rows = res.rows.map((item) => {
|
||||||
|
return {
|
||||||
|
...item,
|
||||||
|
...JSON.parse(item.detail),
|
||||||
|
status: item.status
|
||||||
|
};
|
||||||
|
});
|
||||||
|
tableData.value = res.rows;
|
||||||
|
console.log('🚀 ~ getList ~ tableData.value:', tableData.value);
|
||||||
|
total.value = res.total || 0;
|
||||||
|
};
|
||||||
|
const handleDelete = async (id?: string) => {
|
||||||
|
const _ids = id || ids.value;
|
||||||
|
await proxy?.$modal.confirm('是否确认删除识别记录编号为"' + _ids + '"的数据项？').finally();
|
||||||
|
const res = await delContactnotice(_ids);
|
||||||
|
if (res.code == 200) {
|
||||||
|
proxy.$modal.msgSuccess('删除成功');
|
||||||
|
getList();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
/** 多选框选中数据 */
|
||||||
|
const handleSelectionChange = (selection: any) => {
|
||||||
|
ids.value = selection.map((item) => item.id);
|
||||||
|
single.value = selection.length != 1;
|
||||||
|
multiple.value = !selection.length;
|
||||||
|
};
|
||||||
|
|
||||||
|
const selectType = (value: string) => {
|
||||||
|
queryParams.value.projectType = value;
|
||||||
|
thumbnailUrl.value = projectTypeOptions.value.filter((item) => item.name == value)[0].thumbnail;
|
||||||
|
queryParams.value.type = projectTypeOptions.value.filter((item) => item.name == value)[0].id;
|
||||||
|
getList();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClick = (val) => {
|
||||||
|
console.log(val);
|
||||||
|
queryParams.value.projectType = val.props.name;
|
||||||
|
getList();
|
||||||
|
};
|
||||||
|
const handleAddApp = (row) => {
|
||||||
|
// 添加审批
|
||||||
|
proxy.$tab.closePage(proxy.$route);
|
||||||
|
proxy.$router.push({
|
||||||
|
path: `/approval/changeContact/indexEdit`,
|
||||||
|
query: {
|
||||||
|
thumbnailUrl: projectTypeOptions.value[1].thumbnail,
|
||||||
|
id: projectTypeOptions.value[1].id,
|
||||||
|
row,
|
||||||
|
type: 'add'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
onMounted(() => {
|
||||||
|
getList();
|
||||||
|
});
|
||||||
|
|
||||||
|
//监听项目id刷新数据
|
||||||
|
const listeningProject = watch(
|
||||||
|
() => currentProject.value?.id,
|
||||||
|
(nid, oid) => {
|
||||||
|
queryParams.value.projectId = nid;
|
||||||
|
getList();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
listeningProject();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
@ -10,6 +10,13 @@
|
|||||||
<el-form-item label="资料名称" prop="documentName">
|
<el-form-item label="资料名称" prop="documentName">
|
||||||
<el-input v-model="queryParams.documentName" placeholder="请输入资料名称" clearable @keyup.enter="handleQuery" />
|
<el-input v-model="queryParams.documentName" placeholder="请输入资料名称" clearable @keyup.enter="handleQuery" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
<el-form-item label="是否文件上传" prop="isUpload" label-width="110px">
|
||||||
|
<el-select v-model="queryParams.isUpload" placeholder="请选择" clearable @keyup.enter="handleQuery">
|
||||||
|
<el-option value="1" label="是" />
|
||||||
|
<el-option value="0" label="否" />
|
||||||
|
<el-option value="2" label="全部" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button type="primary" icon="Search" @click="handleQuery" v-hasPermi="['design:volumeCatalog:query']">搜索</el-button>
|
<el-button type="primary" icon="Search" @click="handleQuery" v-hasPermi="['design:volumeCatalog:query']">搜索</el-button>
|
||||||
<el-button icon="Refresh" @click="resetQuery" v-hasPermi="['design:volumeCatalog:query']">重置</el-button>
|
<el-button icon="Refresh" @click="resetQuery" v-hasPermi="['design:volumeCatalog:query']">重置</el-button>
|
||||||
@ -154,14 +161,14 @@
|
|||||||
<el-form-item v-if="uploadForm.type == '3'" label="蓝图" prop="fileIds">
|
<el-form-item v-if="uploadForm.type == '3'" label="蓝图" prop="fileIds">
|
||||||
<file-upload :fileType="['pdf']" :isShowTip="false" :fileSize="100" v-model="uploadForm.fileIds"></file-upload>
|
<file-upload :fileType="['pdf']" :isShowTip="false" :fileSize="100" v-model="uploadForm.fileIds"></file-upload>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item v-if="uploadForm.type == '3'" label="通知人">
|
<el-form-item v-if="uploadForm.type == '1'" label="过程图纸" prop="cancellationIds">
|
||||||
|
<file-upload :fileType="['pdf']" :isShowTip="false" :fileSize="100" v-model="uploadForm.cancellationIds"></file-upload>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="通知人">
|
||||||
<el-select multiple filterable clearable v-model="form.userIds" placeholder="请选择通知人">
|
<el-select multiple filterable clearable v-model="form.userIds" placeholder="请选择通知人">
|
||||||
<el-option :value="item.userId" v-for="item in userCoryList" :key="item.userId" :label="item.nickName + '-' + item.phonenumber" />
|
<el-option :value="item.userId" v-for="item in userCoryList" :key="item.userId" :label="item.nickName + '-' + item.phonenumber" />
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item v-if="uploadForm.type == '1'" label="过程图纸" prop="cancellationIds">
|
|
||||||
<file-upload :fileType="['pdf']" :isShowTip="false" :fileSize="100" v-model="uploadForm.cancellationIds"></file-upload>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
</el-form>
|
||||||
<span style="font-size: 12px; color: #999999">注意:请上传pdf格式文件</span>
|
<span style="font-size: 12px; color: #999999">注意:请上传pdf格式文件</span>
|
||||||
<div style="display: flex; justify-content: flex-end">
|
<div style="display: flex; justify-content: flex-end">
|
||||||
@ -360,7 +367,8 @@ const data = reactive({
|
|||||||
designSubitemId: undefined,
|
designSubitemId: undefined,
|
||||||
volumeNumber: undefined,
|
volumeNumber: undefined,
|
||||||
documentName: undefined,
|
documentName: undefined,
|
||||||
params: {}
|
params: {},
|
||||||
|
isUpload: '2'
|
||||||
},
|
},
|
||||||
rules: {
|
rules: {
|
||||||
design: [{ required: true, message: '主键ID不能为空', trigger: 'blur' }],
|
design: [{ required: true, message: '主键ID不能为空', trigger: 'blur' }],
|
||||||
@ -585,7 +593,6 @@ const handleUploadSuccess = async (flieList: any, res: any) => {
|
|||||||
};
|
};
|
||||||
/** 审核蓝图按钮操作 */
|
/** 审核蓝图按钮操作 */
|
||||||
const handleAuditLantu = async (row) => {
|
const handleAuditLantu = async (row) => {
|
||||||
proxy.$tab.closePage(proxy.$route);
|
|
||||||
proxy.$router.push({
|
proxy.$router.push({
|
||||||
path: `/approval/volumeCatalog/blueprintEdit`,
|
path: `/approval/volumeCatalog/blueprintEdit`,
|
||||||
query: {
|
query: {
|
||||||
@ -596,7 +603,6 @@ const handleAuditLantu = async (row) => {
|
|||||||
};
|
};
|
||||||
/** 查看蓝图按钮操作 */
|
/** 查看蓝图按钮操作 */
|
||||||
const handleAuditViewLantu = async (row) => {
|
const handleAuditViewLantu = async (row) => {
|
||||||
proxy.$tab.closePage(proxy.$route);
|
|
||||||
proxy.$router.push({
|
proxy.$router.push({
|
||||||
path: `/approval/volumeCatalog/blueprintEdit`,
|
path: `/approval/volumeCatalog/blueprintEdit`,
|
||||||
query: {
|
query: {
|
||||||
|
|||||||
@ -1,275 +1,328 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="centerPage">
|
<div class="centerPage">
|
||||||
<div class="topPage">
|
<div class="centerPage_map">
|
||||||
<div id="earth" style="width: 100%;height: 100%;"></div>
|
<div ref="mapRef" class="map-container" style="width: 100%; height: 100%" />
|
||||||
</div>
|
</div>
|
||||||
<div class="endPage" :class="{ 'slide-out-down': isHide }">
|
<div class="centerPage_bottom">
|
||||||
<Title title="AI安全巡检">
|
<Title title="风险预警">
|
||||||
<img src="@/assets/projectLarge/robot.svg" alt="" height="20px" width="20px">
|
<img src="@/assets/projectLarge/robot.svg" alt="" height="20px" width="20px" />
|
||||||
</Title>
|
</Title>
|
||||||
<div class="swiper" v-if="inspectionList.length">
|
<div class="centerPage_bottom_table">
|
||||||
<div class="arrow" :class="{ 'canUse': canLeft }" @click="swiperClick('left')">
|
<el-table v-loading="loading" :data="tableData" show-overflow-tooltip>
|
||||||
<el-icon size="16" :color="canLeft ? 'rgba(29, 214, 255, 1)' : 'rgba(29, 214, 255, 0.3)'">
|
<el-table-column label="时间" align="center" prop="date" />
|
||||||
<ArrowLeft />
|
<el-table-column label="类型" align="center" prop="riskType">
|
||||||
</el-icon>
|
<template #default="scope">
|
||||||
</div>
|
{{ safety_inspection_type[scope.row.riskType] }}
|
||||||
<div class="swiper_content" ref="swiperContent">
|
</template>
|
||||||
<div class="swiper_item" v-for="(item, i) in inspectionList" :key="i">
|
</el-table-column>
|
||||||
<img :src="item.picture" alt="安全巡检" class="swiper_img">
|
<el-table-column label="报警内容" align="center" prop="alarmContent" />
|
||||||
<div class="swiper_date">{{ item.createTime.slice(5) }}</div>
|
<el-table-column label="危险等级" align="center" prop="dangerLevel" />
|
||||||
<div class="swiper_tip">{{ item.label }}</div>
|
<el-table-column label="来源" align="center" prop="source" />
|
||||||
</div>
|
<el-table-column label="警告等级" align="center" prop="alarmLevel">
|
||||||
</div>
|
<template #default="scope">
|
||||||
<div class="arrow" :class="{ 'canUse': canRight }" @click="swiperClick('right')">
|
{{ risk_level_type[scope.row.alarmLevel] }}
|
||||||
<el-icon size="16" :color="canRight ? 'rgba(29, 214, 255, 1)' : 'rgba(29, 214, 255, 0.3)'">
|
</template>
|
||||||
<ArrowRight />
|
</el-table-column>
|
||||||
</el-icon>
|
</el-table>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup lang="ts">
|
||||||
import { ref, onMounted, toRefs, getCurrentInstance } from "vue"
|
import * as echarts from 'echarts';
|
||||||
import Title from './title.vue'
|
import china from '@/assets/china.json';
|
||||||
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
|
import RevenueContractCard from './RevenueContractCard.vue';
|
||||||
import { getScreenSafetyInspection } from '@/api/projectScreen'
|
import bottomboxconpoent from './bottomboxconpoent.vue';
|
||||||
|
import { totalAmount, projectGis } from '@/api/largeScreen/index'; // 导入projectGis接口
|
||||||
const { proxy } = getCurrentInstance();
|
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
|
||||||
const { violation_level_type } = toRefs(proxy?.useDict('violation_level_type'));
|
import Title from './title.vue';
|
||||||
|
import { earlyWarning } from '@/api/outputApi';
|
||||||
const props = defineProps({
|
import { useDict } from '@/utils/dict';
|
||||||
isHide: {
|
import { getDicts } from '@/api/system/dict/data';
|
||||||
type: Boolean,
|
// 地图相关变量
|
||||||
default: false
|
const mapRef = ref<HTMLDivElement | null>(null);
|
||||||
},
|
let myChart: any = null;
|
||||||
projectId: {
|
const projectData = ref<any[]>([]); // 存储项目地理信息数据
|
||||||
type: String,
|
const loading = ref(false);
|
||||||
default: ""
|
const tableData = ref([]);
|
||||||
|
const risk_level_type = ref();
|
||||||
|
const safety_inspection_type = ref();
|
||||||
|
// 新增：获取项目地理信息数据
|
||||||
|
const getProjectGisData = async () => {
|
||||||
|
try {
|
||||||
|
const response = await projectGis();
|
||||||
|
if (response.code === 200) {
|
||||||
|
// 过滤掉没有经纬度的项目
|
||||||
|
projectData.value = response.data.filter((item: any) => item.lng !== null && item.lat !== null && item.lng !== '' && item.lat !== '');
|
||||||
|
console.log('项目地理数据：', projectData.value);
|
||||||
|
} else {
|
||||||
|
console.error('项目地理数据请求失败：', response.msg);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('项目地理数据调用异常：', error);
|
||||||
}
|
}
|
||||||
})
|
};
|
||||||
|
//获取字典
|
||||||
|
const getDictsType = async () => {
|
||||||
|
const res = await getDicts('risk_level_type');
|
||||||
|
if (res.code === 200) {
|
||||||
|
risk_level_type.value = res.data.reduce((acc, item) => {
|
||||||
|
acc[item.dictValue] = item.dictLabel;
|
||||||
|
return acc;
|
||||||
|
}, {});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const getDictsType2 = async () => {
|
||||||
|
const res = await getDicts('safety_inspection_type');
|
||||||
|
if (res.code === 200) {
|
||||||
|
safety_inspection_type.value = res.data.reduce((acc, item) => {
|
||||||
|
acc[item.dictValue] = item.dictLabel;
|
||||||
|
return acc;
|
||||||
|
}, {});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
//获取表格数据
|
||||||
|
const getTableList = async () => {
|
||||||
|
const res = await earlyWarning();
|
||||||
|
if (res.code === 200) {
|
||||||
|
tableData.value = res.data;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const inspectionList = ref([{
|
// 地图resize处理
|
||||||
id: "",
|
const handleResize = () => {
|
||||||
label: "",
|
if (myChart) myChart.resize();
|
||||||
picture: "",
|
};
|
||||||
createTime: ""
|
|
||||||
}])
|
|
||||||
const swiperContent = ref()
|
|
||||||
const swiperItemWidth = ref(100)
|
|
||||||
const canLeft = ref(false)
|
|
||||||
const canRight = ref(true)
|
|
||||||
|
|
||||||
const swiperClick = (direction) => {
|
// 初始化地图（修改为使用接口数据）
|
||||||
if (!swiperContent.value) return
|
const initEcharts = () => {
|
||||||
|
if (!mapRef.value || projectData.value.length === 0) {
|
||||||
if (direction === 'right') {
|
console.error('未找到地图容器或项目数据');
|
||||||
if (swiperContent.value.scrollLeft >= swiperContent.value.scrollWidth - swiperContent.value.clientWidth) {
|
return;
|
||||||
canRight.value = false
|
|
||||||
canLeft.value = true
|
|
||||||
return
|
|
||||||
}
|
|
||||||
swiperContent.value.scrollLeft += swiperItemWidth.value
|
|
||||||
} else {
|
|
||||||
if (swiperContent.value.scrollLeft <= 0) {
|
|
||||||
canLeft.value = false
|
|
||||||
canRight.value = true
|
|
||||||
return
|
|
||||||
}
|
|
||||||
swiperContent.value.scrollLeft -= swiperItemWidth.value
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 更新箭头状态
|
echarts.registerMap('china', china as any);
|
||||||
canLeft.value = swiperContent.value.scrollLeft > 0
|
|
||||||
canRight.value = swiperContent.value.scrollLeft < swiperContent.value.scrollWidth - swiperContent.value.clientWidth
|
|
||||||
}
|
|
||||||
|
|
||||||
const getInspectionList = async () => {
|
// 从接口数据生成散点数据
|
||||||
const res = await getScreenSafetyInspection(props.projectId)
|
const scatterData = projectData.value.map((item) => ({
|
||||||
const { code, data } = res
|
name: item.projectName,
|
||||||
if (code === 200) {
|
value: [parseFloat(item.lng), parseFloat(item.lat)], // 转换为数值类型
|
||||||
data.map(item => {
|
shortName: item.shortName,
|
||||||
item.label = violation_level_type.value.find((i) => i.value === item.violationType)?.label
|
projectSite: item.projectSite,
|
||||||
})
|
symbol: 'diamond',
|
||||||
inspectionList.value = data
|
itemStyle: { color: '#0166d6' },
|
||||||
}
|
symbolSize: [20, 20],
|
||||||
}
|
label: {
|
||||||
// 创建地球
|
show: true,
|
||||||
const createEarth = () => {
|
formatter: '{b}', // 显示项目名称
|
||||||
window.YJ.on({
|
position: 'top',
|
||||||
ws: true,
|
color: '#fff',
|
||||||
// host: getIP(), //资源所在服务器地址
|
fontSize: 12,
|
||||||
// username: this.loginForm.username, //用户名 可以不登录（不填写用户名），不登录时无法加载服务端的数据
|
backgroundColor: 'rgba(3, 26, 52, 0.7)',
|
||||||
// password: md5pass, //密码 生成方式：md5(用户名_密码)
|
padding: [3, 6],
|
||||||
}).then((res) => {
|
borderRadius: 3
|
||||||
let earth = new YJ.YJEarth("earth");
|
|
||||||
window.Earth1 = earth;
|
|
||||||
YJ.Global.openRightClick(window.Earth1);
|
|
||||||
YJ.Global.openLeftClick(window.Earth1);
|
|
||||||
let view = {
|
|
||||||
"position": {
|
|
||||||
"lng": 102.03643298211526,
|
|
||||||
"lat": 34.393586474501,
|
|
||||||
"alt": 11298179.51993155
|
|
||||||
},
|
|
||||||
"orientation": {
|
|
||||||
"heading": 360,
|
|
||||||
"pitch": -89.94481747201486,
|
|
||||||
"roll": 0
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
loadBaseMap(earth.viewer)
|
}));
|
||||||
YJ.Global.CesiumContainer(window.Earth1, {
|
|
||||||
compass: false, //罗盘
|
myChart = echarts.init(mapRef.value, null, {
|
||||||
});
|
renderer: 'canvas',
|
||||||
// YJ.Global.flyTo(earth, view);
|
useDirtyRect: false
|
||||||
// YJ.Global.setDefaultView(earth.viewer, view)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// 加载底图
|
|
||||||
const loadBaseMap = (viewer) => {
|
|
||||||
// 创建瓦片提供器
|
|
||||||
const imageryProvider = new Cesium.UrlTemplateImageryProvider({
|
|
||||||
url: 'https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
|
|
||||||
// 可选：设置瓦片的格式
|
|
||||||
fileExtension: 'png',
|
|
||||||
// 可选：设置瓦片的范围和级别
|
|
||||||
minimumLevel: 0,
|
|
||||||
maximumLevel: 18,
|
|
||||||
// 可选：设置瓦片的投影（默认为Web Mercator）
|
|
||||||
projection: Cesium.WebMercatorProjection,
|
|
||||||
// 可选：如果瓦片服务需要跨域请求，设置请求头部
|
|
||||||
credit: new Cesium.Credit('卫星图数据来源')
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// 添加图层到视图
|
const option: any = {
|
||||||
const layer = viewer.imageryLayers.addImageryProvider(imageryProvider);
|
roam: true, // 允许缩放和平移
|
||||||
}
|
geo: {
|
||||||
onMounted(() => {
|
type: 'map',
|
||||||
getInspectionList()
|
map: 'china',
|
||||||
createEarth()
|
zoom: 2, // 调整初始缩放级别
|
||||||
if (swiperContent.value && swiperContent.value.children.length > 0) {
|
center: [108.95, 34.27], // 中国中心位置经纬度
|
||||||
swiperItemWidth.value = swiperContent.value.children[0].clientWidth + 20
|
label: { show: false, color: '#fff' },
|
||||||
}
|
itemStyle: {
|
||||||
})
|
areaColor: '#031a34',
|
||||||
|
borderColor: '#1e3a6e',
|
||||||
|
borderWidth: 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
backgroundColor: 'rgba(3, 26, 52, 0.8)',
|
||||||
|
borderColor: '#1e3a6e',
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
formatter: function (params: any) {
|
||||||
|
if (params.data) {
|
||||||
|
// 处理散点数据
|
||||||
|
const data = params.data;
|
||||||
|
return `
|
||||||
|
<div style="font-weight: bold;">${data.name}</div>
|
||||||
|
<div>地点：${data.projectSite}</div>
|
||||||
|
<div>经纬度：${data.value[0].toFixed(6)}, ${data.value[1].toFixed(6)}</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
if (params.seriesType === 'map') {
|
||||||
|
// console.log(params, 111111);
|
||||||
|
return `
|
||||||
|
<div style="font-weight: bold;">${params.name}</div>
|
||||||
|
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'map',
|
||||||
|
map: 'china',
|
||||||
|
geoIndex: 0,
|
||||||
|
emphasis: {
|
||||||
|
areaColor: '#fff',
|
||||||
|
label: { show: true, color: '#fff' },
|
||||||
|
itemStyle: { areaColor: '#02417e' }
|
||||||
|
},
|
||||||
|
select: { itemStyle: { areaColor: '#02417e' } },
|
||||||
|
data: [] // 可以留空，或根据需要添加区域数据
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'scatter',
|
||||||
|
coordinateSystem: 'geo',
|
||||||
|
data: scatterData,
|
||||||
|
emphasis: {
|
||||||
|
scale: true, // 鼠标悬停时放大
|
||||||
|
symbolSize: [25, 25]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
myChart.setOption(option);
|
||||||
|
};
|
||||||
|
const risk_level_type1 = ref([]);
|
||||||
|
const safety_inspection_type1 = ref([]);
|
||||||
|
// 组件生命周期
|
||||||
|
onMounted(() => {
|
||||||
|
nextTick(async () => {
|
||||||
|
// 先获取合同数据和项目地理数据，再初始化地图
|
||||||
|
getDictsType();
|
||||||
|
getDictsType2();
|
||||||
|
await Promise.all([getProjectGisData()]);
|
||||||
|
initEcharts();
|
||||||
|
getTableList();
|
||||||
|
window.addEventListener('resize', handleResize);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
window.removeEventListener('resize', handleResize);
|
||||||
|
if (myChart) {
|
||||||
|
myChart.dispose();
|
||||||
|
myChart = null;
|
||||||
|
}
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.centerPage {
|
.centerPage {
|
||||||
display: flex;
|
width: 100%;
|
||||||
flex-direction: column;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
|
||||||
|
|
||||||
.topPage,
|
|
||||||
.endPage {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
// justify-content: space-between;
|
||||||
justify-content: center;
|
padding: 0 10px 10px 10px;
|
||||||
width: 100%;
|
|
||||||
padding: 15px 0;
|
|
||||||
border: 1px solid rgba(230, 247, 255, 0.1);
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
|
||||||
|
|
||||||
.topPage {
|
.centerPage_map {
|
||||||
flex: 1;
|
|
||||||
margin-bottom: 23px;
|
|
||||||
transition: flex 0.5s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.endPage {
|
|
||||||
max-height: 300px;
|
|
||||||
opacity: 1;
|
|
||||||
transition: all 0.5s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 向下滑出动画 */
|
|
||||||
.slide-out-down {
|
|
||||||
transform: translateY(100%);
|
|
||||||
opacity: 0;
|
|
||||||
max-height: 0;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.swiper {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 20px;
|
|
||||||
padding: 20px 20px 10px 20px;
|
|
||||||
|
|
||||||
.swiper_content {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
height: 65vh;
|
||||||
gap: 20px;
|
|
||||||
transition: all 0.3s ease-in-out;
|
|
||||||
overflow-x: auto;
|
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
.centerPage_bottom {
|
||||||
.swiper_item {
|
width: 100%;
|
||||||
position: relative;
|
height: 25vh;
|
||||||
|
border: 1px solid rgba(29, 214, 255, 0.1);
|
||||||
|
padding: 10px 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
.centerPage_bottom_table {
|
||||||
width: 133px;
|
|
||||||
height: 84px;
|
|
||||||
|
|
||||||
.swiper_img {
|
|
||||||
width: 133px;
|
|
||||||
height: 84px;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.swiper_date {
|
|
||||||
position: absolute;
|
|
||||||
top: 4px;
|
|
||||||
right: 4px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 400;
|
|
||||||
color: rgba(230, 247, 255, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.swiper_tip {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 5px 0;
|
height: 100%;
|
||||||
text-align: center;
|
overflow: auto;
|
||||||
font-size: 12px;
|
:deep(.el-table, .el-table__expanded-cell) {
|
||||||
font-weight: 400;
|
background: rgba(0, 0, 0, 0);
|
||||||
color: rgba(230, 247, 255, 1);
|
color: #fff;
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
}
|
||||||
|
|
||||||
|
:deep(.el-table tr) {
|
||||||
|
background: rgba(0, 0, 0, 0);
|
||||||
|
// border: 1px solid rgba(0, 255, 255, 0.5) !important;
|
||||||
|
}
|
||||||
|
:deep(.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th) {
|
||||||
|
background: rgba(0, 0, 0, 0) !important;
|
||||||
|
}
|
||||||
|
:deep(.el-table th.el-table__cell) {
|
||||||
|
background: rgba(0, 0, 0, 0);
|
||||||
|
color: #fff;
|
||||||
|
border-bottom: 1px solid transparent !important;
|
||||||
|
border-right: 1px solid transparent !important;
|
||||||
|
}
|
||||||
|
:deep(.el-table--enable-row-transition .el-table__body td.el-table__cell) {
|
||||||
|
border-right: 1px solid transparent !important;
|
||||||
|
border-bottom: 1px solid transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-table__body tr:hover > td) {
|
||||||
|
background-color: rgba(40, 75, 91, 0.9) !important;
|
||||||
|
}
|
||||||
|
/* 表格边框颜色 */
|
||||||
|
:deep(.el-table, .el-table__header-wrapper, .el-table__body-wrapper, .el-table__footer-wrapper, .el-table th, .el-table td) {
|
||||||
|
border: 1px solid transparent !important;
|
||||||
|
background: rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
:deep(.el-table__inner-wrapper:before) {
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 固定列的边框 */
|
||||||
|
:deep(.el-table__fixed, .el-table__fixed-right) {
|
||||||
|
border: 1px solid transparent !important;
|
||||||
|
}
|
||||||
|
:deep(.el-table__body-wrapper::-webkit-scrollbar) {
|
||||||
|
width: 4px;
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
|
||||||
|
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
||||||
|
opacity: 0.2;
|
||||||
|
background: #00c0ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-table__body-wrapper::-webkit-scrollbar-track) {
|
||||||
|
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
||||||
|
border-radius: 0;
|
||||||
|
background: rgba(220, 228, 245, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-icon-arrow-right:before) {
|
||||||
|
color: #0ff;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.arrow {
|
// 滚动条优化
|
||||||
display: grid;
|
.centerPage_bottom_table::-webkit-scrollbar {
|
||||||
place-items: center;
|
width: 5px;
|
||||||
width: 24px;
|
height: 5px;
|
||||||
height: 24px;
|
}
|
||||||
border-radius: 50%;
|
|
||||||
border: 1px solid rgba(29, 214, 255, 0.3);
|
|
||||||
color: skyblue;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
|
|
||||||
&.canUse {
|
.centerPage_bottom_table::-webkit-scrollbar-thumb {
|
||||||
border: 1px solid rgba(29, 214, 255, 1);
|
background-color: #0ff;
|
||||||
}
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
&:hover:not(.canUse) {
|
.centerPage_bottom_table::-webkit-scrollbar-track {
|
||||||
opacity: 0.7;
|
background-color: rgba(0, 255, 255, 0.2);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -18,43 +18,73 @@
|
|||||||
|
|
||||||
<div class="endPage">
|
<div class="endPage">
|
||||||
<Title style="font-size: 22px" title="人员情况" />
|
<Title style="font-size: 22px" title="人员情况" />
|
||||||
<div class="map">
|
<!-- 人员总览区域 -->
|
||||||
<div class="project_attendance_chart">
|
<div class="people_overview">
|
||||||
<Title style="font-size: 22px" title="各项目人员出勤率" />
|
<div class="people_overview_content">
|
||||||
<div class="chart_content" ref="attendanceChartRef"></div>
|
<div class="people_image">
|
||||||
</div>
|
<!-- 本地图片占位，后续可替换为实际图片路径 -->
|
||||||
<div class="attendance_tag">
|
<img src="@/assets/images/man.png" alt="人员总览" class="placeholder_image" />
|
||||||
<div class="tag_item">
|
|
||||||
<img src="@/assets/projectLarge/people.svg" alt="" />
|
|
||||||
<div class="tag_title">出勤人</div>
|
|
||||||
<div class="tag_info">
|
|
||||||
{{ attendanceCount }}
|
|
||||||
<span style="font-size: 14px">人</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="tag_item">
|
<div class="people_stats">
|
||||||
<img src="@/assets/projectLarge/people.svg" alt="" />
|
<div class="stat_item">
|
||||||
<div class="tag_title">在岗人</div>
|
<div class="stat_label">出勤人数</div>
|
||||||
<div class="tag_info">
|
<div class="stat_value">{{ attendanceCount }}</div>
|
||||||
{{ peopleCount }}
|
|
||||||
<span style="font-size: 14px">人</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="stat_item">
|
||||||
<div class="tag_item">
|
<div class="stat_label">出勤率</div>
|
||||||
<img src="@/assets/projectLarge/people.svg" alt="" />
|
<div class="stat_rate">{{ attendanceRate }}%</div>
|
||||||
<div class="tag_title">出勤率</div>
|
|
||||||
<div class="tag_info">
|
|
||||||
{{ attendanceRate }}
|
|
||||||
<span style="font-size: 14px">%</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- 点阵地图 -->
|
||||||
|
<div class="people_map">
|
||||||
|
<div class="map_container">
|
||||||
|
<img src="@/assets/images/map.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="attendance_tag"></div>
|
<!-- 人员分类统计 -->
|
||||||
|
<div class="people_categories">
|
||||||
|
<div class="category_item">
|
||||||
|
<div class="category_icon">
|
||||||
|
<!-- 本地图片占位，后续可替换为实际图片路径 -->
|
||||||
|
<img src="@/assets/images/constructor.png" alt="施工人员" class="category_image" />
|
||||||
|
</div>
|
||||||
|
<div class="category_info">
|
||||||
|
<div class="category_label">施工人员</div>
|
||||||
|
<div class="category_count">{{ constructionPersonnelCount }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="category_item">
|
||||||
|
<div class="category_icon">
|
||||||
|
<!-- 本地图片占位，后续可替换为实际图片路径 -->
|
||||||
|
<img src="@/assets/images/subcontractor.png" alt="分包人员" class="category_image" />
|
||||||
|
</div>
|
||||||
|
<div class="category_info">
|
||||||
|
<div class="category_label">分包人员</div>
|
||||||
|
<div class="category_count">{{ subcontractorsCount }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="category_item">
|
||||||
|
<div class="category_icon">
|
||||||
|
<!-- 本地图片占位，后续可替换为实际图片路径 -->
|
||||||
|
<img src="@/assets/images/manager.png" alt="管理人员" class="category_image" />
|
||||||
|
</div>
|
||||||
|
<div class="category_info">
|
||||||
|
<div class="category_label">管理人员</div>
|
||||||
|
<div class="category_count">{{ managersCount }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 项目出勤率柱状图 -->
|
||||||
|
<div class="project_attendance_chart">
|
||||||
|
<Title style="font-size: 22px" title="项目出勤率统计" />
|
||||||
|
|
||||||
|
<div class="chart_content" ref="attendanceChartRef"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 项目出勤率柱状图 -->
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -62,7 +92,7 @@
|
|||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
import Title from './title.vue';
|
import Title from './title.vue';
|
||||||
import { getScreenNews, getScreenPeople } from '@/api/projectScreen';
|
import { getScreenNews, getScreenPeople } from '@/api/projectScreen';
|
||||||
import { keyIndex } from '@/api/enterpriseLarge/index';
|
import { keyIndex, projectAttendanceCount, peopleCount, allAttendanceCount } from '@/api/enterpriseLarge/index';
|
||||||
import { mapOption } from './optionList';
|
import { mapOption } from './optionList';
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
@ -114,9 +144,14 @@ const newDetail = ref({
|
|||||||
const newId = ref('');
|
const newId = ref('');
|
||||||
const attendanceCount = ref(0);
|
const attendanceCount = ref(0);
|
||||||
const attendanceRate = ref(0);
|
const attendanceRate = ref(0);
|
||||||
const peopleCount = ref(0);
|
const totalPeopleCount = ref(0);
|
||||||
const teamAttendanceList = ref([{ id: '', teamName: '', attendanceNumber: 0, allNumber: 0, attendanceRate: 0, attendanceTime: '' }]);
|
const teamAttendanceList = ref([{ id: '', teamName: '', attendanceNumber: 0, allNumber: 0, attendanceRate: 0, attendanceTime: '' }]);
|
||||||
|
|
||||||
|
// 人员分类统计数据
|
||||||
|
const constructionPersonnelCount = ref(0);
|
||||||
|
const managersCount = ref(0);
|
||||||
|
const subcontractorsCount = ref(0);
|
||||||
|
|
||||||
// 项目出勤率数据
|
// 项目出勤率数据
|
||||||
const projectAttendanceData = ref([
|
const projectAttendanceData = ref([
|
||||||
{ name: 'A项目', value: 62 },
|
{ name: 'A项目', value: 62 },
|
||||||
@ -129,6 +164,11 @@ const projectAttendanceData = ref([
|
|||||||
let attendanceChart = null;
|
let attendanceChart = null;
|
||||||
const attendanceChartRef = ref<HTMLDivElement | null>(null);
|
const attendanceChartRef = ref<HTMLDivElement | null>(null);
|
||||||
|
|
||||||
|
// 滚动相关状态
|
||||||
|
const scrollInterval = ref<number | null>(null);
|
||||||
|
const currentScrollIndex = ref(0);
|
||||||
|
const scrollSpeed = 1000; // 滚动间隔时间(ms)
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 获取项目人员出勤数据
|
* 获取项目人员出勤数据
|
||||||
*/
|
*/
|
||||||
@ -136,13 +176,189 @@ const getPeopleData = async () => {
|
|||||||
const res = await getScreenPeople(props.projectId);
|
const res = await getScreenPeople(props.projectId);
|
||||||
const { data, code } = res;
|
const { data, code } = res;
|
||||||
if (code === 200) {
|
if (code === 200) {
|
||||||
attendanceCount.value = data.attendanceCount;
|
totalPeopleCount.value = data.peopleCount;
|
||||||
attendanceRate.value = data.attendanceRate;
|
|
||||||
peopleCount.value = data.peopleCount;
|
|
||||||
teamAttendanceList.value = data.teamAttendanceList;
|
teamAttendanceList.value = data.teamAttendanceList;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取人员分类统计数据
|
||||||
|
*/
|
||||||
|
const getPeopleCategoryData = async () => {
|
||||||
|
try {
|
||||||
|
const res = await peopleCount();
|
||||||
|
const { data, code } = res;
|
||||||
|
if (code === 200 && data) {
|
||||||
|
constructionPersonnelCount.value = data.constructionPersonnelCount || 0;
|
||||||
|
managersCount.value = data.managersCount || 0;
|
||||||
|
subcontractorsCount.value = data.subcontractorsCount || 0;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取人员分类统计数据失败:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取人员总览数据 - 通过allAttendanceCount接口
|
||||||
|
*/
|
||||||
|
const getProjectAttendanceCount = async () => {
|
||||||
|
try {
|
||||||
|
const res = await allAttendanceCount();
|
||||||
|
const { data, code } = res;
|
||||||
|
if (code === 0 && data) {
|
||||||
|
// 直接使用接口返回的数据
|
||||||
|
attendanceCount.value = data.attendanceCount || 0;
|
||||||
|
attendanceRate.value = data.attendanceRate || 0;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取人员总览数据失败:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 滚动到指定项目
|
||||||
|
*/
|
||||||
|
const scrollToProject = (index: number) => {
|
||||||
|
if (!attendanceChart || projectAttendanceData.value.length === 0) return;
|
||||||
|
|
||||||
|
// 计算实际索引
|
||||||
|
const realIndex = index % projectAttendanceData.value.length;
|
||||||
|
currentScrollIndex.value = realIndex;
|
||||||
|
|
||||||
|
// 获取项目名称
|
||||||
|
const projectName = projectAttendanceData.value[realIndex].name;
|
||||||
|
|
||||||
|
// 触发tooltip显示
|
||||||
|
attendanceChart.dispatchAction({
|
||||||
|
type: 'showTip',
|
||||||
|
seriesIndex: 0,
|
||||||
|
dataIndex: realIndex
|
||||||
|
});
|
||||||
|
|
||||||
|
// 高亮当前项目的柱子
|
||||||
|
attendanceChart.dispatchAction({
|
||||||
|
type: 'highlight',
|
||||||
|
seriesIndex: 0,
|
||||||
|
dataIndex: realIndex
|
||||||
|
});
|
||||||
|
|
||||||
|
// 取消高亮其他项目的柱子
|
||||||
|
attendanceChart.dispatchAction({
|
||||||
|
type: 'downplay',
|
||||||
|
seriesIndex: 0,
|
||||||
|
dataIndex: Array.from({ length: projectAttendanceData.value.length }, (_, i) => i).filter((i) => i !== realIndex)
|
||||||
|
});
|
||||||
|
|
||||||
|
// 更新滚动条位置，确保滚动时滚动条同步移动
|
||||||
|
// 无论项目数量多少，都应该同步滚动条
|
||||||
|
if (projectAttendanceData.value.length > 0) {
|
||||||
|
// 计算滚动条应该移动到的位置
|
||||||
|
// 确保当前项目居中显示
|
||||||
|
const totalProjects = projectAttendanceData.value.length;
|
||||||
|
const visiblePercentage = 15; // 与dataZoom的end值保持一致
|
||||||
|
const itemPercentage = 100 / totalProjects; // 每个项目所占总宽度的百分比
|
||||||
|
|
||||||
|
// 计算新的start值，使当前项目尽量居中显示
|
||||||
|
let newStart = realIndex * itemPercentage - visiblePercentage / 2 + itemPercentage / 2;
|
||||||
|
|
||||||
|
// 确保start值在有效范围内
|
||||||
|
newStart = Math.max(0, Math.min(100 - visiblePercentage, newStart));
|
||||||
|
|
||||||
|
// 更新dataZoom组件的位置
|
||||||
|
attendanceChart.dispatchAction({
|
||||||
|
type: 'dataZoom',
|
||||||
|
start: newStart,
|
||||||
|
end: newStart + visiblePercentage
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 开始自动滚动
|
||||||
|
*/
|
||||||
|
const startScroll = () => {
|
||||||
|
if (scrollInterval.value) return;
|
||||||
|
|
||||||
|
scrollInterval.value = window.setInterval(() => {
|
||||||
|
currentScrollIndex.value++;
|
||||||
|
scrollToProject(currentScrollIndex.value);
|
||||||
|
}, scrollSpeed);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 停止自动滚动
|
||||||
|
*/
|
||||||
|
const stopScroll = () => {
|
||||||
|
if (scrollInterval.value) {
|
||||||
|
clearInterval(scrollInterval.value);
|
||||||
|
scrollInterval.value = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取项目出勤率统计数据 - 保持项目出勤率图表功能
|
||||||
|
*/
|
||||||
|
const getProjectAttendanceStats = async () => {
|
||||||
|
try {
|
||||||
|
const res = await projectAttendanceCount();
|
||||||
|
const { data, code } = res;
|
||||||
|
|
||||||
|
// 添加日志信息以便调试
|
||||||
|
console.log('projectAttendanceCount接口返回数据:', res);
|
||||||
|
|
||||||
|
if (code === 200 && data && data.length > 0) {
|
||||||
|
console.log('有效数据:', data);
|
||||||
|
|
||||||
|
// 更新项目出勤率图表数据
|
||||||
|
projectAttendanceData.value = data.map((project) => ({
|
||||||
|
name: project.projectName,
|
||||||
|
value: project.attendanceRate
|
||||||
|
}));
|
||||||
|
|
||||||
|
console.log('处理后的数据:', projectAttendanceData.value);
|
||||||
|
|
||||||
|
// 如果图表已初始化，重新设置数据
|
||||||
|
if (attendanceChart) {
|
||||||
|
console.log('更新图表数据');
|
||||||
|
attendanceChart.setOption({
|
||||||
|
xAxis: {
|
||||||
|
data: projectAttendanceData.value.map((item) => item.name)
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: projectAttendanceData.value.map((item) => item.value)
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.warn('数据不符合预期:', { code, data });
|
||||||
|
// 使用默认数据确保图表有内容显示
|
||||||
|
if (!projectAttendanceData.value.length) {
|
||||||
|
projectAttendanceData.value = [
|
||||||
|
{ name: 'A项目', value: 62 },
|
||||||
|
{ name: 'B项目', value: 56 },
|
||||||
|
{ name: 'C项目', value: 95 },
|
||||||
|
{ name: 'D项目', value: 64 },
|
||||||
|
{ name: 'E项目', value: 97.5 }
|
||||||
|
];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取项目出勤率数据失败:', error);
|
||||||
|
// 发生错误时使用默认数据
|
||||||
|
if (!projectAttendanceData.value.length) {
|
||||||
|
projectAttendanceData.value = [
|
||||||
|
{ name: 'A项目', value: 62 },
|
||||||
|
{ name: 'B项目', value: 56 },
|
||||||
|
{ name: 'C项目', value: 95 },
|
||||||
|
{ name: 'D项目', value: 64 },
|
||||||
|
{ name: 'E项目', value: 97.5 }
|
||||||
|
];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 获取企业关键指标数据
|
* 获取企业关键指标数据
|
||||||
*/
|
*/
|
||||||
@ -163,8 +379,23 @@ const getKeyIndexData = async () => {
|
|||||||
*/
|
*/
|
||||||
const initAttendanceChart = () => {
|
const initAttendanceChart = () => {
|
||||||
if (!attendanceChartRef.value) {
|
if (!attendanceChartRef.value) {
|
||||||
|
console.warn('attendanceChartRef不存在');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 确保有数据可显示
|
||||||
|
if (!projectAttendanceData.value || !projectAttendanceData.value.length) {
|
||||||
|
console.log('使用默认数据初始化图表');
|
||||||
|
projectAttendanceData.value = [
|
||||||
|
{ name: 'A项目', value: 62 },
|
||||||
|
{ name: 'B项目', value: 56 },
|
||||||
|
{ name: 'C项目', value: 95 },
|
||||||
|
{ name: 'D项目', value: 64 },
|
||||||
|
{ name: 'E项目', value: 97.5 }
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('开始初始化图表，当前数据:', projectAttendanceData.value);
|
||||||
attendanceChart = echarts.init(attendanceChartRef.value);
|
attendanceChart = echarts.init(attendanceChartRef.value);
|
||||||
|
|
||||||
const option = {
|
const option = {
|
||||||
@ -191,13 +422,45 @@ const initAttendanceChart = () => {
|
|||||||
grid: {
|
grid: {
|
||||||
top: 40,
|
top: 40,
|
||||||
right: 30,
|
right: 30,
|
||||||
bottom: 40,
|
bottom: 60, // 增加底部空间以确保标签完全显示
|
||||||
left: 30,
|
left: 30,
|
||||||
containLabel: true,
|
containLabel: true,
|
||||||
backgroundColor: 'rgba(10, 24, 45, 0.1)',
|
backgroundColor: 'rgba(10, 24, 45, 0.1)',
|
||||||
borderColor: 'rgba(29, 214, 255, 0.1)',
|
borderColor: 'rgba(29, 214, 255, 0.1)',
|
||||||
borderWidth: 1
|
borderWidth: 1
|
||||||
},
|
},
|
||||||
|
// 添加dataZoom组件实现水平滚动
|
||||||
|
dataZoom: [
|
||||||
|
{
|
||||||
|
type: 'slider',
|
||||||
|
show: true,
|
||||||
|
xAxisIndex: [0],
|
||||||
|
start: 0,
|
||||||
|
end: 20, // 固定为20%，与visiblePercentage保持一致
|
||||||
|
height: 20,
|
||||||
|
bottom: 10,
|
||||||
|
backgroundColor: 'rgba(10, 24, 45, 0.2)',
|
||||||
|
fillerColor: 'rgba(29, 214, 255, 0.2)',
|
||||||
|
borderColor: 'rgba(29, 214, 255, 0.3)',
|
||||||
|
textStyle: {
|
||||||
|
color: '#e6f7ff'
|
||||||
|
},
|
||||||
|
handleStyle: {
|
||||||
|
color: 'rgba(29, 214, 255, 0.6)',
|
||||||
|
borderColor: 'rgba(255, 255, 255, 0.3)'
|
||||||
|
},
|
||||||
|
moveHandleStyle: {
|
||||||
|
color: 'rgba(29, 214, 255, 0.8)'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 支持鼠标滚轮缩放
|
||||||
|
{
|
||||||
|
type: 'inside',
|
||||||
|
xAxisIndex: [0],
|
||||||
|
start: 0,
|
||||||
|
end: 20 // 固定为20%，与visiblePercentage保持一致
|
||||||
|
}
|
||||||
|
],
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: projectAttendanceData.value.map((item) => item.name),
|
data: projectAttendanceData.value.map((item) => item.name),
|
||||||
@ -209,9 +472,18 @@ const initAttendanceChart = () => {
|
|||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: '#e6f7ff',
|
color: '#e6f7ff',
|
||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
interval: 0,
|
interval: 0, // 强制显示所有标签
|
||||||
fontWeight: 'bold',
|
fontWeight: 'bold',
|
||||||
padding: [10, 0, 0, 0]
|
padding: [10, 0, 0, 0],
|
||||||
|
// 防止标签重叠，旋转角度调整
|
||||||
|
rotate: 0,
|
||||||
|
// 添加formatter函数，当名称超过6个汉字时显示省略号
|
||||||
|
formatter: function (value) {
|
||||||
|
if (value.length > 6) {
|
||||||
|
return value.substring(0, 6) + '...';
|
||||||
|
}
|
||||||
|
return value;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
axisTick: {
|
axisTick: {
|
||||||
show: true,
|
show: true,
|
||||||
@ -321,6 +593,19 @@ const initAttendanceChart = () => {
|
|||||||
|
|
||||||
attendanceChart.setOption(option);
|
attendanceChart.setOption(option);
|
||||||
|
|
||||||
|
// 添加鼠标悬浮事件监听
|
||||||
|
if (attendanceChartRef.value) {
|
||||||
|
// 鼠标进入图表区域时停止滚动
|
||||||
|
attendanceChartRef.value.addEventListener('mouseenter', () => {
|
||||||
|
stopScroll();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 鼠标离开图表区域时重新开始滚动
|
||||||
|
attendanceChartRef.value.addEventListener('mouseleave', () => {
|
||||||
|
startScroll();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// 添加窗口大小变化时的图表更新
|
// 添加窗口大小变化时的图表更新
|
||||||
const handleResize = () => {
|
const handleResize = () => {
|
||||||
if (attendanceChart) {
|
if (attendanceChart) {
|
||||||
@ -333,6 +618,12 @@ const initAttendanceChart = () => {
|
|||||||
// 清理函数
|
// 清理函数
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
window.removeEventListener('resize', handleResize);
|
window.removeEventListener('resize', handleResize);
|
||||||
|
|
||||||
|
// 移除鼠标事件监听
|
||||||
|
if (attendanceChartRef.value) {
|
||||||
|
attendanceChartRef.value.removeEventListener('mouseenter', stopScroll);
|
||||||
|
attendanceChartRef.value.removeEventListener('mouseleave', startScroll);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -347,17 +638,23 @@ const initMapChart = () => {
|
|||||||
mapChart.setOption(mapOption);
|
mapChart.setOption(mapOption);
|
||||||
};
|
};
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(async () => {
|
||||||
// nextTick(() => {
|
// nextTick(() => {
|
||||||
// initMapChart();
|
// initMapChart();
|
||||||
// });
|
// });
|
||||||
getPeopleData();
|
getPeopleData();
|
||||||
getKeyIndexData();
|
getKeyIndexData();
|
||||||
|
getProjectAttendanceCount(); // 获取人员总览数据
|
||||||
|
getPeopleCategoryData();
|
||||||
|
|
||||||
// 初始化项目出勤率柱状图
|
// 先等待获取项目出勤率数据
|
||||||
setTimeout(() => {
|
await getProjectAttendanceStats(); // 获取项目出勤率图表数据
|
||||||
initAttendanceChart();
|
|
||||||
}, 100);
|
// 再初始化图表
|
||||||
|
initAttendanceChart();
|
||||||
|
|
||||||
|
// 图表初始化后自动开始滚动
|
||||||
|
startScroll();
|
||||||
});
|
});
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
@ -370,6 +667,9 @@ onUnmounted(() => {
|
|||||||
attendanceChart.dispose();
|
attendanceChart.dispose();
|
||||||
attendanceChart = null;
|
attendanceChart = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 清理滚动计时器
|
||||||
|
stopScroll();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -383,37 +683,59 @@ onUnmounted(() => {
|
|||||||
.endPage {
|
.endPage {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 15px 0;
|
height: 250;
|
||||||
border: 1px solid rgba(29, 214, 255, 0.1);
|
border: 1px solid rgba(29, 214, 255, 0.1);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.endPage {
|
.endPage {
|
||||||
|
height: auto;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
margin-top: 23px;
|
min-height: 550px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.project_attendance_chart {
|
.project_attendance_chart {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 15px 0;
|
margin-top: 15px;
|
||||||
border: 1px solid rgba(29, 214, 255, 0.1);
|
padding-bottom: 10px;
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
.chart_title {
|
.chart_title {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #e6f7ff;
|
color: #e6f7ff;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 5px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.scroll_controls {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
padding-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control_btn {
|
||||||
|
padding: 5px 15px;
|
||||||
|
background: rgba(10, 24, 45, 0.8);
|
||||||
|
border: 1px solid rgba(29, 214, 255, 0.3);
|
||||||
|
color: #e6f7ff;
|
||||||
|
font-size: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control_btn:hover {
|
||||||
|
background: rgba(29, 214, 255, 0.2);
|
||||||
|
border-color: rgba(29, 214, 255, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
.chart_content {
|
.chart_content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 200px;
|
height: 320px; /* 增加高度以容纳滚动条 */
|
||||||
position: relative;
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -422,20 +744,20 @@ onUnmounted(() => {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(2, 1fr);
|
grid-template-columns: repeat(2, 1fr);
|
||||||
gap: 15px;
|
gap: 10px;
|
||||||
margin-top: 15px;
|
margin-bottom: 8px;
|
||||||
padding: 0 15px;
|
padding: 0 10px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.indicator-card {
|
.indicator-card {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100px;
|
height: 80px;
|
||||||
background: rgba(10, 24, 45, 0.7);
|
background: rgba(10, 24, 45, 0.7);
|
||||||
border: 1px solid rgba(29, 214, 255, 0.2);
|
border: 1px solid rgba(29, 214, 255, 0.2);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding: 15px;
|
padding: 10px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -488,53 +810,151 @@ onUnmounted(() => {
|
|||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
|
|
||||||
.map {
|
/* 人员总览样式 */
|
||||||
margin-top: 15px;
|
.people_overview {
|
||||||
}
|
|
||||||
|
|
||||||
.attendance_tag {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
margin-top: 5px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px solid rgba(29, 214, 255, 0.1);
|
||||||
|
background: rgba(10, 24, 45, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.people_overview_title {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #e6f7ff;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
border-bottom: 1px solid rgba(29, 214, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.people_overview_content {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
align-items: center;
|
||||||
padding: 0 30px;
|
|
||||||
margin-top: 15px;
|
|
||||||
|
|
||||||
.tag_item {
|
|
||||||
width: 28%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
border: 1px dashed rgba(29, 214, 255, 0.3);
|
|
||||||
padding: 10px;
|
|
||||||
|
|
||||||
.tag_info {
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: rgba(230, 247, 255, 1);
|
|
||||||
text-shadow: 0px 1.24px 6.21px rgba(0, 190, 247, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag_title {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 400;
|
|
||||||
color: rgba(230, 247, 255, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.attendance_list {
|
.people_image {
|
||||||
padding: 0px 30px;
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
background: linear-gradient(135deg, rgba(29, 214, 255, 0.1) 0%, rgba(29, 214, 255, 0.05) 100%);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.placeholder_image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.people_stats {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat_item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat_label {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
color: #8ab2ff;
|
||||||
.attendance_item {
|
margin-bottom: 5px;
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 3fr 2fr 2fr 3fr;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.subfont {
|
.stat_value {
|
||||||
color: rgba(138, 149, 165, 1);
|
font-size: 28px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #e6f7ff;
|
||||||
|
text-shadow: 0px 1.24px 6.21px rgba(0, 190, 247, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat_rate {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #00c853;
|
||||||
|
text-shadow: 0px 1.24px 6.21px rgba(0, 200, 83, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 点阵地图样式 */
|
||||||
|
.people_map {
|
||||||
|
width: 100%;
|
||||||
|
height: 120px;
|
||||||
|
margin-top: 8px;
|
||||||
|
background: rgba(10, 24, 45, 0.5);
|
||||||
|
border: 1px solid rgba(29, 214, 255, 0.1);
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map_background {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-image: radial-gradient(circle, rgba(29, 214, 255, 0.3) 1px, transparent 1px),
|
||||||
|
radial-gradient(circle, rgba(29, 214, 255, 0.3) 1px, transparent 1px);
|
||||||
|
background-size: 40px 40px;
|
||||||
|
background-position:
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
20px 20px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 人员分类统计样式 */
|
||||||
|
.people_categories {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category_item {
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
margin: 10px, 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category_icon {
|
||||||
|
margin-left: 15px;
|
||||||
|
margin-top: 10px;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
background: linear-gradient(135deg, rgba(29, 214, 255, 0.1) 0%, rgba(10, 120, 200, 0.1) 100%);
|
||||||
|
border: 1px solid rgba(29, 214, 255, 0.2);
|
||||||
|
border-radius: 5px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category_image {
|
||||||
|
width: 45px;
|
||||||
|
height: 45px;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category_info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-left: 8px;
|
||||||
|
margin-top: 8px;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category_label {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #8ab2ff;
|
||||||
|
margin-bottom: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category_count {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #e6f7ff;
|
||||||
|
text-shadow: 0px 1.24px 6.21px rgba(0, 190, 247, 0.3);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,51 +1,54 @@
|
|||||||
export let pieOption = {
|
export let pieOption = {
|
||||||
// 定义中心文字
|
// 定义中心文字
|
||||||
graphic: [
|
graphic: [
|
||||||
{
|
// {
|
||||||
type: 'text',
|
// type: 'text',
|
||||||
left: 'center',
|
// left: 'center',
|
||||||
top: '40%',
|
// top: '40%',
|
||||||
style: {
|
// style: {
|
||||||
// 需要从接口替换
|
// // 需要从接口替换
|
||||||
text: '70%',
|
// text: '70%',
|
||||||
fontSize: 24,
|
// fontSize: 24,
|
||||||
fontWeight: 'bold',
|
// fontWeight: 'bold',
|
||||||
fill: '#fff'
|
// fill: '#fff'
|
||||||
}
|
// }
|
||||||
},
|
// }
|
||||||
{
|
// {
|
||||||
type: 'text',
|
// type: 'text',
|
||||||
left: 'center',
|
// left: 'center',
|
||||||
top: '50%',
|
// top: '50%',
|
||||||
style: {
|
// style: {
|
||||||
text: '总进度',
|
// text: '111',
|
||||||
fontSize: 14,
|
// fontSize: 14,
|
||||||
fill: '#fff'
|
// fill: '#fff'
|
||||||
}
|
// }
|
||||||
},
|
// }
|
||||||
],
|
],
|
||||||
legend: {
|
// legend: {
|
||||||
show: true,
|
// show: true,
|
||||||
type: 'plain',
|
// type: 'plain',
|
||||||
bottom: 20,
|
// bottom: 20,
|
||||||
itemWidth: 12,
|
// itemWidth: 12,
|
||||||
itemHeight: 12,
|
// itemHeight: 12,
|
||||||
textStyle: {
|
// textStyle: {
|
||||||
color: '#fff'
|
// color: '#fff'
|
||||||
}
|
// }
|
||||||
},
|
// },
|
||||||
series: {
|
series: {
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
data: [],
|
data: [],
|
||||||
radius: [50, 80],
|
radius: [50, 80],
|
||||||
center: ['50%', '45%'],
|
center: ['50%', '45%'],
|
||||||
itemStyle: {
|
// itemStyle: {
|
||||||
borderColor: '#fff',
|
// borderColor: '#fff',
|
||||||
borderWidth: 1
|
// borderWidth: 1
|
||||||
},
|
// },
|
||||||
label: {
|
label: {
|
||||||
alignTo: 'edge',
|
alignTo: 'edge',
|
||||||
formatter: '{name|{b}}\n{percent|{c} %}',
|
formatter: function (params) {
|
||||||
|
// 只显示前三个数据项
|
||||||
|
return `{name|${params.data.name}}\n{percent|${params.data.completionRate}MW}`;
|
||||||
|
},
|
||||||
minMargin: 10,
|
minMargin: 10,
|
||||||
edgeDistance: 20,
|
edgeDistance: 20,
|
||||||
lineHeight: 15,
|
lineHeight: 15,
|
||||||
@ -62,7 +65,7 @@ export let pieOption = {
|
|||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
top: 'bottom'
|
top: 'bottom'
|
||||||
},
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -72,16 +75,39 @@ export let barOption = {
|
|||||||
itemWidth: 12,
|
itemWidth: 12,
|
||||||
itemHeight: 12,
|
itemHeight: 12,
|
||||||
// 调整文字与图标间距
|
// 调整文字与图标间距
|
||||||
data: ['计划流转面积', '已流转面积'],
|
data: ['计划产值', '实际产值'],
|
||||||
top: 0,
|
top: 0,
|
||||||
right: 20,
|
right: 10,
|
||||||
|
bottom: 10,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#fff',
|
color: '#fff'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
tooltip: {
|
||||||
|
show: true,
|
||||||
|
backgroundColor: '',
|
||||||
|
trigger: 'axis',
|
||||||
|
// formatter: '{b0}：{c0}万元',
|
||||||
|
formatter: (params: any) => {
|
||||||
|
// params 是数组，对应每条柱子
|
||||||
|
return params
|
||||||
|
.map((p: any) => `${p.seriesName}：${Number(p.value).toFixed(2)} 亿元`)
|
||||||
|
|
||||||
|
.join('<br/>');
|
||||||
|
},
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow',
|
||||||
|
}
|
||||||
|
// borderColor: 'rgba(252, 217, 18, 1)'
|
||||||
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: ['地块1', '地块2', '地块3', '地块4', '地块5', '地块6'],
|
data: [],
|
||||||
|
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: '#fff'
|
color: '#fff'
|
||||||
},
|
},
|
||||||
@ -93,34 +119,71 @@ export let barOption = {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
name: '单位：m²',
|
name: '单位：亿元',
|
||||||
type: 'value',
|
type: 'value',
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
formatter: '{value}'
|
formatter: '{value}'
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false // 不显示分割线
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
bottom: 0, // 距离容器底部的距离
|
left: '12%',
|
||||||
containLabel: true // 确保坐标轴标签不被裁剪
|
top: '15%', // 顶部留一点空间给 legend
|
||||||
|
bottom: '8%',
|
||||||
|
right: '2%'
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: '计划流转面积',
|
name: '计划产值',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
data: [],
|
data: [],
|
||||||
barWidth: '20%',
|
barWidth: '10',
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: 'rgb(29, 253, 253)'
|
color: {
|
||||||
},
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 1, // 修改y为1表示从底部开始
|
||||||
|
x2: 0,
|
||||||
|
y2: 0, // 修改y2为0表示渐变到顶部
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgba(255, 209, 92, 0.1)' // 底部透明度0.1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(255, 209, 92, 1)' // 顶部透明度1
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '已流转面积',
|
name: '实际产值',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
data: [],
|
data: [],
|
||||||
barWidth: '20%',
|
barWidth: '10',
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: 'rgb(25, 181, 251)'
|
color: {
|
||||||
},
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 1, // 从底部开始
|
||||||
|
x2: 0,
|
||||||
|
y2: 0, // 到顶部结束
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgba(7, 209, 250, 0.1)' // 底部透明度0.1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(7, 209, 250, 1)' // 顶部透明度1
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
@ -129,7 +192,7 @@ export let mapOption = {
|
|||||||
geo: {
|
geo: {
|
||||||
map: 'ch',
|
map: 'ch',
|
||||||
roam: true,
|
roam: true,
|
||||||
aspectScale: Math.cos((47 * Math.PI) / 180),
|
aspectScale: Math.cos((47 * Math.PI) / 180)
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
@ -147,7 +210,7 @@ export let mapOption = {
|
|||||||
{ name: 'i', value: [9.085994375000002, 47.55395822835779] },
|
{ name: 'i', value: [9.085994375000002, 47.55395822835779] },
|
||||||
{ name: 'j', value: [8.653968125000002, 47.47709530818285] },
|
{ name: 'j', value: [8.653968125000002, 47.47709530818285] },
|
||||||
{ name: 'k', value: [8.203158125000002, 47.44506909144329] }
|
{ name: 'k', value: [8.203158125000002, 47.44506909144329] }
|
||||||
],
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,13 +1,60 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="leftPage">
|
<div class="leftPage">
|
||||||
<div class="topPage">
|
<div class="topPage">
|
||||||
<Title title="项目概况" />
|
<Title title="项目进度分析" />
|
||||||
<div class="content" v-html="generalize"></div>
|
<div class="progress">
|
||||||
|
<div class="progress_item">
|
||||||
|
<div class="progress_imgBox">
|
||||||
|
<div class="progress_img">
|
||||||
|
<img src="@/assets/large/capacity.png" style="width: 100%; height: 100%" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="progress_text">
|
||||||
|
<div class="progress_text_title">
|
||||||
|
<div>{{ capacityData.gridConnectedCapacity ?? '0' }}</div>
|
||||||
|
<div>MW</div>
|
||||||
|
</div>
|
||||||
|
<div class="content_text">井网总容量</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="progress_item">
|
||||||
|
<div class="progress_imgBox">
|
||||||
|
<div class="progress_img">
|
||||||
|
<img src="@/assets/large/plan.png" style="width: 100%; height: 100%" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="progress_text">
|
||||||
|
<div class="progress_text_title">
|
||||||
|
<div>{{ capacityData.plannedCapacity ?? '0' }}</div>
|
||||||
|
<div>MW</div>
|
||||||
|
</div>
|
||||||
|
<div class="content_text">计划总容量</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="progress_item">
|
||||||
|
<div class="progress_imgBox">
|
||||||
|
<div class="progress_img">
|
||||||
|
<img src="@/assets/large/delay.png" style="width: 100%; height: 100%" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="progress_text">
|
||||||
|
<div class="progress_text_title">
|
||||||
|
<div>{{ capacityData.delayedProjectCount ?? '0' }}</div>
|
||||||
|
<div>个</div>
|
||||||
|
</div>
|
||||||
|
<div class="content_text">延期项目</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="endPage">
|
<div class="projectItem">
|
||||||
<Title title="形象进度" />
|
|
||||||
<div class="chart_container">
|
<div class="chart_container">
|
||||||
<div ref="pieChartRef" class="echart" />
|
<div ref="pieChartRef" class="echart" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="output">
|
||||||
|
<Title title="实际产值与预期产值对比" />
|
||||||
|
<div class="chart_container">
|
||||||
<div ref="lineChartRef" class="echart" />
|
<div ref="lineChartRef" class="echart" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -15,69 +62,40 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, onMounted, onUnmounted, nextTick } from "vue"
|
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
|
||||||
import Title from './title.vue'
|
import Title from './title.vue';
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
import { pieOption, barOption } from './optionList';
|
import { pieOption, barOption } from './optionList';
|
||||||
import { getScreenLand, getScreenImgProcess, getScreenGeneralize } from '@/api/projectScreen';
|
import { projectProgress, outpuProgress } from '@/api/outputApi';
|
||||||
|
const capacityData: any = ref({});
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
projectId: {
|
projectId: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 0
|
default: 0
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
|
||||||
const generalize = ref()
|
const generalize = ref();
|
||||||
// 饼图相关
|
// 饼图相关
|
||||||
const pieChartRef = ref<HTMLDivElement | null>(null);
|
const pieChartRef = ref<HTMLDivElement | null>(null);
|
||||||
let pieChart: any = null;
|
let pieChart: any = null;
|
||||||
const totalPercent = ref(0)
|
const totalPercent = ref(0);
|
||||||
// 折线图相关
|
// 折线图相关
|
||||||
const lineChartRef = ref<HTMLDivElement | null>(null);
|
const lineChartRef = ref<HTMLDivElement | null>(null);
|
||||||
let lineChart: any = null;
|
let lineChart: any = null;
|
||||||
// 土地数据 折线图
|
// 土地数据 折线图
|
||||||
const designAreaData = ref([])
|
const designAreaData = ref([]);
|
||||||
const transferAreaData = ref([])
|
const transferAreaData = ref([]);
|
||||||
// 饼图数据
|
const barNames = ref([]);
|
||||||
const pieData = [
|
// // 饼图数据
|
||||||
{ label: 'areaPercentage', name: '厂区', value: 0 },
|
// const pieData = [
|
||||||
{ label: 'roadPercentage', name: '道路', value: 0 },
|
// { label: 'areaPercentage', name: '厂区', value: 0 },
|
||||||
{ label: 'collectorLinePercentage', name: '集电线路', value: 0 },
|
// { label: 'roadPercentage', name: '道路', value: 0 },
|
||||||
{ label: 'exportLinePercentage', name: '送出线路', value: 0 },
|
// { label: 'collectorLinePercentage', name: '集电线路', value: 0 },
|
||||||
{ label: 'substationPercentage', name: '升压站', value: 0 },
|
// { label: 'exportLinePercentage', name: '送出线路', value: 0 },
|
||||||
{ label: 'boxTransformerPercentage', name: '箱变', value: 0 },
|
// { label: 'substationPercentage', name: '升压站', value: 0 },
|
||||||
]
|
// { label: 'boxTransformerPercentage', name: '箱变', value: 0 }
|
||||||
|
// ];
|
||||||
// 初始化饼图
|
|
||||||
const initPieChart = () => {
|
|
||||||
if (!pieChartRef.value) {
|
|
||||||
console.error('未找到饼图容器元素');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
pieOption.series.data = pieData
|
|
||||||
pieOption.graphic[0].style.text = totalPercent.value + '%'
|
|
||||||
pieChart = echarts.init(pieChartRef.value, null, {
|
|
||||||
renderer: 'canvas',
|
|
||||||
useDirtyRect: false
|
|
||||||
});
|
|
||||||
pieChart.setOption(pieOption);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 初始化折线图
|
|
||||||
const initLineChart = () => {
|
|
||||||
if (!lineChartRef.value) {
|
|
||||||
console.error('未找到折线图容器元素');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
barOption.series[0].data = designAreaData.value
|
|
||||||
barOption.series[1].data = transferAreaData.value
|
|
||||||
lineChart = echarts.init(lineChartRef.value, null, {
|
|
||||||
renderer: 'canvas',
|
|
||||||
useDirtyRect: false
|
|
||||||
});
|
|
||||||
lineChart.setOption(barOption);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 响应窗口大小变化
|
// 响应窗口大小变化
|
||||||
const handleResize = () => {
|
const handleResize = () => {
|
||||||
@ -85,50 +103,126 @@ const handleResize = () => {
|
|||||||
if (lineChart) lineChart.resize();
|
if (lineChart) lineChart.resize();
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
const processedDataList = ref([]);
|
||||||
* 获取项目土地统计数据
|
//获取数据
|
||||||
*/
|
const getData = async () => {
|
||||||
const getScreenLandData = async () => {
|
const res = await projectProgress();
|
||||||
const res = await getScreenLand(props.projectId);
|
if (res.code == 200) {
|
||||||
const { data, code } = res
|
capacityData.value = res.data;
|
||||||
if (code === 200) {
|
// processedDataList.value = res.data.projectProgressDetailList;
|
||||||
designAreaData.value = data.map((item: any) => Number(item.designArea))
|
let totalCapacity = 0;
|
||||||
transferAreaData.value = data.map((item: any) => Number(item.transferArea))
|
const processedData = res.data.projectProgressDetailList.map((item) => {
|
||||||
|
const capacity = parseInt(item.projectCapacity) || 0;
|
||||||
|
totalCapacity += capacity;
|
||||||
|
return {
|
||||||
|
name: item.projectName,
|
||||||
|
value: capacity,
|
||||||
|
completionRate: item.completionRate
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
// 计算每个项目的百分比
|
||||||
|
processedData.forEach((item) => {
|
||||||
|
item.percentage = totalCapacity > 0 ? ((item.value / totalCapacity) * 100).toFixed(2) : '0%';
|
||||||
|
});
|
||||||
|
processedDataList.value = processedData;
|
||||||
|
initPieChart();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// 初始化饼图
|
||||||
|
const initPieChart = () => {
|
||||||
|
if (!pieChartRef.value) {
|
||||||
|
console.error('未找到饼图容器元素');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const data = processedDataList.value.map((item: any) => {
|
||||||
|
return {
|
||||||
|
name: item.name,
|
||||||
|
value: item.percentage,
|
||||||
|
completionRate: item.value
|
||||||
|
};
|
||||||
|
});
|
||||||
|
pieOption.series.data = data;
|
||||||
|
|
||||||
|
// pieOption.graphic[0].style.text = totalPercent.value + '%';
|
||||||
|
pieChart = echarts.init(pieChartRef.value, null, {
|
||||||
|
renderer: 'canvas',
|
||||||
|
useDirtyRect: false
|
||||||
|
});
|
||||||
|
pieChart.setOption(pieOption);
|
||||||
|
};
|
||||||
|
//获取产值数据
|
||||||
|
const getOutputData = async () => {
|
||||||
|
const res = await outpuProgress();
|
||||||
|
if (res.code == 200) {
|
||||||
|
designAreaData.value = res.data.map((item: any) => Number(item.planValue));
|
||||||
|
transferAreaData.value = res.data.map((item: any) => Number(item.actualValue));
|
||||||
|
barNames.value = res.data.map((item: any) => item.projectName);
|
||||||
initLineChart();
|
initLineChart();
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
// 初始化柱状图图
|
||||||
/**
|
const initLineChart = () => {
|
||||||
* 获取项目形象进度数据
|
if (!lineChartRef.value) {
|
||||||
*/
|
console.error('未找到柱状图容器元素');
|
||||||
const getScreenImgProcessData = async () => {
|
return;
|
||||||
const res = await getScreenImgProcess(props.projectId);
|
|
||||||
const { data, code } = res
|
|
||||||
if (code === 200) {
|
|
||||||
totalPercent.value = data.totalPercentage
|
|
||||||
pieData.forEach((item: any) => {
|
|
||||||
item.value = data[item.label]
|
|
||||||
})
|
|
||||||
initPieChart()
|
|
||||||
}
|
}
|
||||||
}
|
console.log(barOption);
|
||||||
|
barOption.xAxis.data = barNames.value;
|
||||||
|
barOption.series[0].data = designAreaData.value;
|
||||||
|
barOption.series[1].data = transferAreaData.value;
|
||||||
|
lineChart = echarts.init(lineChartRef.value, null, {
|
||||||
|
renderer: 'canvas',
|
||||||
|
useDirtyRect: false
|
||||||
|
});
|
||||||
|
lineChart.setOption(barOption);
|
||||||
|
};
|
||||||
|
// /**
|
||||||
|
// * 获取项目土地统计数据
|
||||||
|
// */
|
||||||
|
// const getScreenLandData = async () => {
|
||||||
|
// const res = await getScreenLand(props.projectId);
|
||||||
|
// const { data, code } = res;
|
||||||
|
// if (code === 200) {
|
||||||
|
// designAreaData.value = data.map((item: any) => Number(item.designArea));
|
||||||
|
// transferAreaData.value = data.map((item: any) => Number(item.transferArea));
|
||||||
|
// // initLineChart();
|
||||||
|
// }
|
||||||
|
// };
|
||||||
|
|
||||||
/**
|
// /**
|
||||||
* 获取项目概况数据
|
// * 获取项目形象进度数据
|
||||||
*/
|
// */
|
||||||
const getScreenGeneralizeData = async () => {
|
// const getScreenImgProcessData = async () => {
|
||||||
const res = await getScreenGeneralize(props.projectId);
|
// const res = await getScreenImgProcess(props.projectId);
|
||||||
const { data, code } = res
|
// const { data, code } = res;
|
||||||
if (code === 200) {
|
// if (code === 200) {
|
||||||
generalize.value = data
|
// totalPercent.value = data.totalPercentage;
|
||||||
}
|
// pieData.forEach((item: any) => {
|
||||||
}
|
// item.value = data[item.label];
|
||||||
|
// });
|
||||||
|
// initPieChart();
|
||||||
|
// }
|
||||||
|
// };
|
||||||
|
|
||||||
|
// /**
|
||||||
|
// * 获取项目概况数据
|
||||||
|
// */
|
||||||
|
// const getScreenGeneralizeData = async () => {
|
||||||
|
// const res = await getScreenGeneralize(props.projectId);
|
||||||
|
// const { data, code } = res;
|
||||||
|
// if (code === 200) {
|
||||||
|
// generalize.value = data;
|
||||||
|
// }
|
||||||
|
// };
|
||||||
|
|
||||||
// 组件挂载时初始化图表
|
// 组件挂载时初始化图表
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
getScreenLandData()
|
// getScreenLandData();
|
||||||
getScreenImgProcessData()
|
// getScreenImgProcessData();
|
||||||
getScreenGeneralizeData()
|
// getScreenGeneralizeData();
|
||||||
|
getData();
|
||||||
|
getOutputData();
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
initPieChart();
|
initPieChart();
|
||||||
window.addEventListener('resize', handleResize);
|
window.addEventListener('resize', handleResize);
|
||||||
@ -155,67 +249,144 @@ onUnmounted(() => {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
.topPage,
|
.topPage {
|
||||||
.endPage {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 15px 0;
|
padding: 15px 0 0 0;
|
||||||
border: 1px solid rgba(29, 214, 255, 0.1);
|
border: 1px solid rgba(29, 214, 255, 0.1);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
height: 20%;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.endPage {
|
// .content {
|
||||||
flex: 1;
|
// height: 100px;
|
||||||
margin-top: 23px;
|
// margin: 0 15px;
|
||||||
|
// padding: 0 10px;
|
||||||
|
// margin-top: 15px;
|
||||||
|
// box-sizing: border-box;
|
||||||
|
// overflow-y: auto;
|
||||||
|
|
||||||
.chart_container {
|
// &::-webkit-scrollbar-track {
|
||||||
|
// background: rgba(204, 204, 204, 0.1);
|
||||||
|
// border-radius: 10px;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// &::-webkit-scrollbar-thumb {
|
||||||
|
// background: rgba(29, 214, 255, 0.78);
|
||||||
|
// border-radius: 10px;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .content_item {
|
||||||
|
// font-size: 14px;
|
||||||
|
// font-weight: 400;
|
||||||
|
// color: rgba(230, 247, 255, 1);
|
||||||
|
// margin-bottom: 10px;
|
||||||
|
|
||||||
|
// &:last-child {
|
||||||
|
// margin-bottom: 0;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
.progress {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
|
grid-gap: 10px;
|
||||||
|
.progress_item {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
// background: rgba(29, 214, 255, 1);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
.progress_imgBox {
|
||||||
|
width: 100%;
|
||||||
|
height: 35%;
|
||||||
|
position: relative;
|
||||||
|
.progress_img {
|
||||||
|
width: 84px;
|
||||||
|
height: 48px;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 80%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress_text {
|
||||||
|
width: 100%;
|
||||||
|
height: 65%;
|
||||||
|
background: rgba(29, 214, 255, 0.1);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 5px;
|
align-items: flex-end;
|
||||||
width: 100%;
|
padding: 15px 5px 5px 5px;
|
||||||
height: 100%;
|
.progress_text_title {
|
||||||
}
|
width: 100%;
|
||||||
|
// height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
& > div:first-child {
|
||||||
|
// 第一个子元素的样式
|
||||||
|
width: 50%;
|
||||||
|
font-size: 24px;
|
||||||
|
// font-weight: bold;
|
||||||
|
font-family: 'AlimamaShuHeiTi', sans-serif;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > div:last-child {
|
||||||
|
// 最后一个子元素的样式
|
||||||
|
width: 50%;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content_text {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #c6d1db;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.projectItem {
|
||||||
|
width: 100%;
|
||||||
|
height: 40%;
|
||||||
|
// background: rgba(29, 214, 255, 1);
|
||||||
|
padding: 10px 10px 10px 0;
|
||||||
|
// border: 1px solid rgba(29, 214, 255, 0.1);
|
||||||
|
.chart_container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
.echart {
|
.echart {
|
||||||
height: 48%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.output {
|
||||||
|
width: 100%;
|
||||||
|
height: 40%;
|
||||||
|
// background: rgba(29, 214, 255, 0.5);
|
||||||
|
padding: 10px 10px 10px 0;
|
||||||
|
border: 1px solid rgba(29, 214, 255, 0.1);
|
||||||
|
|
||||||
.content {
|
.chart_container {
|
||||||
height: 100px;
|
width: 100%;
|
||||||
margin: 0 15px;
|
height: 100%;
|
||||||
padding: 0 10px;
|
.echart {
|
||||||
margin-top: 15px;
|
height: 90%;
|
||||||
box-sizing: border-box;
|
width: 100%;
|
||||||
overflow-y: auto;
|
|
||||||
|
|
||||||
&::-webkit-scrollbar-track {
|
|
||||||
background: rgba(204, 204, 204, 0.1);
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-scrollbar-thumb {
|
|
||||||
background: rgba(29, 214, 255, 0.78);
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content_item {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 400;
|
|
||||||
color: rgba(230, 247, 255, 1);
|
|
||||||
margin-bottom: 10px;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.subfont {
|
|
||||||
color: rgba(138, 149, 165, 1);
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -82,11 +82,18 @@
|
|||||||
</el-row>
|
</el-row>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<el-table v-loading="loading" :data="formalitiesAreConsolidatedList" @selection-change="handleSelectionChange" row-key="id" default-expand-all>
|
<el-table
|
||||||
|
v-loading="loading"
|
||||||
|
:table-layout="'auto'"
|
||||||
|
:data="formalitiesAreConsolidatedList"
|
||||||
|
@selection-change="handleSelectionChange"
|
||||||
|
row-key="id"
|
||||||
|
default-expand-all
|
||||||
|
>
|
||||||
<el-table-column type="selection" width="55" align="center" />
|
<el-table-column type="selection" width="55" align="center" />
|
||||||
<el-table-column label="手续办理清单" align="left" prop="formalitiesName">
|
<el-table-column label="手续办理清单" align="left" prop="formalitiesName">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<span style="white-space: nowrap">{{ scope.row.formalitiesName }}</span>
|
{{ scope.row.formalitiesName }}
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="计划开始时间" align="center" prop="planTheStartTime" width="180">
|
<el-table-column label="计划开始时间" align="center" prop="planTheStartTime" width="180">
|
||||||
@ -109,12 +116,12 @@
|
|||||||
<el-table-column label="手续材料" align="center" prop="formalitiesUrl" width="180">
|
<el-table-column label="手续材料" align="center" prop="formalitiesUrl" width="180">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<div style="display: flex; justify-content: center; align-items: center">
|
<div style="display: flex; justify-content: center; align-items: center">
|
||||||
<div>
|
<div style="width: 30px">
|
||||||
<el-link type="primary" :underline="false" @click="handlePreview(scope.row)" target="_blank" v-if="scope.row.formalitiesPid"
|
<el-link type="primary" :underline="false" @click="handlePreview(scope.row)" target="_blank" v-if="scope.row.formalitiesPid"
|
||||||
>查看</el-link
|
>查看</el-link
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div style="width: 5px">
|
||||||
<el-badge v-if="scope.row.fileCount" :value="scope.row.fileCount" class="item" type="danger"> </el-badge>
|
<el-badge v-if="scope.row.fileCount" :value="scope.row.fileCount" class="item" type="danger"> </el-badge>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,12 +1,14 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="p-2">
|
<div class="p-2">
|
||||||
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
|
<transition :enter-active-class="proxy?.animate.searchAnimate.enter"
|
||||||
|
:leave-active-class="proxy?.animate.searchAnimate.leave">
|
||||||
<div v-show="showSearch" class="mb-[10px]">
|
<div v-show="showSearch" class="mb-[10px]">
|
||||||
<el-card shadow="hover">
|
<el-card shadow="hover">
|
||||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
||||||
<el-form-item label="请选择项目：" prop="pid" label-width="100">
|
<el-form-item label="请选择项目：" prop="pid" label-width="100">
|
||||||
<el-select v-model="queryParams.projectId" placeholder="请选择" @change="handleChange" clearable>
|
<el-select v-model="queryParams.projectId" placeholder="请选择" @change="handleChange" clearable>
|
||||||
<el-option v-for="item in matrixOptions" :key="item.projectId" :label="item.name" :value="item.projectId" />
|
<el-option v-for="item in matrixOptions" :key="item.projectId" :label="item.name"
|
||||||
|
:value="item.projectId" />
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="请选择方阵：" prop="pid" label-width="100" v-if="relevancyStructure == '2'">
|
<el-form-item label="请选择方阵：" prop="pid" label-width="100" v-if="relevancyStructure == '2'">
|
||||||
@ -21,24 +23,16 @@
|
|||||||
<el-tabs type="border-card" v-model="activeTab" @tab-click="handleTabClick">
|
<el-tabs type="border-card" v-model="activeTab" @tab-click="handleTabClick">
|
||||||
<el-tab-pane :label="item.name" v-for="item in tabList" :key="item.id" :name="item.id"></el-tab-pane>
|
<el-tab-pane :label="item.name" v-for="item in tabList" :key="item.id" :name="item.id"></el-tab-pane>
|
||||||
<el-card shadow="never">
|
<el-card shadow="never">
|
||||||
<el-table
|
<el-table ref="progressCategoryTableRef" v-loading="loading" :data="progressCategoryList" row-key="id"
|
||||||
ref="progressCategoryTableRef"
|
:default-expand-all="isExpandAll" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||||
v-loading="loading"
|
v-if="isExpand" border>
|
||||||
:data="progressCategoryList"
|
|
||||||
row-key="id"
|
|
||||||
:default-expand-all="isExpandAll"
|
|
||||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
|
||||||
v-if="isExpand"
|
|
||||||
border
|
|
||||||
>
|
|
||||||
<el-table-column label="" width="50" type="expand">
|
<el-table-column label="" width="50" type="expand">
|
||||||
<template #header>
|
<template #header>
|
||||||
<el-icon
|
<el-icon class="cursor-pointer text-4! transform-rotate-z--90 transition-all-300"
|
||||||
class="cursor-pointer text-4! transform-rotate-z--90 transition-all-300"
|
|
||||||
:class="!isExpandAll ? 'transform-rotate-z--90' : 'transform-rotate-z-90'"
|
:class="!isExpandAll ? 'transform-rotate-z--90' : 'transform-rotate-z-90'"
|
||||||
@click="handleToggleExpandAll"
|
@click="handleToggleExpandAll">
|
||||||
><Expand
|
<Expand />
|
||||||
/></el-icon>
|
</el-icon>
|
||||||
</template>
|
</template>
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-card class="pl-25" shadow="hover">
|
<el-card class="pl-25" shadow="hover">
|
||||||
@ -46,9 +40,8 @@
|
|||||||
<el-table-column label="名称" align="center" prop="name" width="170">
|
<el-table-column label="名称" align="center" prop="name" width="170">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
<el-tooltip :content="row.remark" placement="top" effect="dark" v-if="row.remark">
|
<el-tooltip :content="row.remark" placement="top" effect="dark" v-if="row.remark">
|
||||||
<span class="flex items-center justify-center"
|
<span class="flex items-center justify-center"><i
|
||||||
><i class="iconfont icon-wenhao mr-0.5 text-3.5! text-#999"></i>{{ row.name }}</span
|
class="iconfont icon-wenhao mr-0.5 text-3.5! text-#999"></i>{{ row.name }}</span>
|
||||||
>
|
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
<span v-else>{{ row.name }}</span>
|
<span v-else>{{ row.name }}</span>
|
||||||
</template>
|
</template>
|
||||||
@ -60,7 +53,8 @@
|
|||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="是否延期" align="center" prop="isDelay" width="100">
|
<el-table-column label="是否延期" align="center" prop="isDelay" width="100">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
<el-tag :type="row.isDelay == '1' ? 'danger' : 'primary'">{{ row.isDelay == '1' ? '是' : '否' }}</el-tag>
|
<el-tag :type="row.isDelay == '1' ? 'danger' : 'primary'">{{ row.isDelay == '1' ? '是' : '否'
|
||||||
|
}}</el-tag>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="计量方式" align="center" prop="unitType" width="100">
|
<el-table-column label="计量方式" align="center" prop="unitType" width="100">
|
||||||
@ -71,7 +65,8 @@
|
|||||||
<el-table-column label="总量" align="center" prop="total" width="100" />
|
<el-table-column label="总量" align="center" prop="total" width="100" />
|
||||||
<el-table-column label="总进度" align="center" prop="projectId">
|
<el-table-column label="总进度" align="center" prop="projectId">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
<el-progress :text-inside="true" :stroke-width="20" :percentage="row.completedPercentage" status="success" />
|
<el-progress :text-inside="true" :stroke-width="20" :percentage="row.completedPercentage"
|
||||||
|
status="success" />
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="计划总量" align="center" prop="planTotal" width="100" />
|
<el-table-column label="计划总量" align="center" prop="planTotal" width="100" />
|
||||||
@ -87,35 +82,17 @@
|
|||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-button
|
<el-button type="warning" icon="Download" link size="small" v-if="scope.row.name === '光伏板'"
|
||||||
type="warning"
|
|
||||||
icon="Download"
|
|
||||||
link
|
|
||||||
size="small"
|
|
||||||
v-if="scope.row.name === '光伏板'"
|
|
||||||
@click="openDialog(scope.row, 'importTableStatus', '上传表格')"
|
@click="openDialog(scope.row, 'importTableStatus', '上传表格')"
|
||||||
v-hasPermi="['progress:progressCategory:add']"
|
v-hasPermi="['progress:progressCategory:add']">
|
||||||
>
|
|
||||||
导入表格
|
导入表格
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button
|
<el-button type="success" icon="Plus" link size="small" @click="planRef.openDialog(scope.row)"
|
||||||
type="success"
|
v-hasPermi="['progress:progressCategory:add']">
|
||||||
icon="Plus"
|
|
||||||
link
|
|
||||||
size="small"
|
|
||||||
@click="planRef.openDialog(scope.row)"
|
|
||||||
v-hasPermi="['progress:progressCategory:add']"
|
|
||||||
>
|
|
||||||
计划
|
计划
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button
|
<el-button type="primary" icon="Plus" link size="small" @click="handleDayAdd(scope.row)"
|
||||||
type="primary"
|
v-hasPermi="['progress:progressCategory:add']">
|
||||||
icon="Plus"
|
|
||||||
link
|
|
||||||
size="small"
|
|
||||||
@click="handleDayAdd(scope.row)"
|
|
||||||
v-hasPermi="['progress:progressCategory:add']"
|
|
||||||
>
|
|
||||||
日报
|
日报
|
||||||
</el-button>
|
</el-button>
|
||||||
</template>
|
</template>
|
||||||
@ -132,7 +109,8 @@
|
|||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="总进度" align="center" prop="projectId">
|
<el-table-column label="总进度" align="center" prop="projectId">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
<el-progress :text-inside="true" :stroke-width="20" :percentage="row.completedPercentage" status="success" />
|
<el-progress :text-inside="true" :stroke-width="20" :percentage="row.completedPercentage"
|
||||||
|
status="success" />
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
@ -140,7 +118,8 @@
|
|||||||
<el-table-column label="名称" align="center" prop="name" width="170">
|
<el-table-column label="名称" align="center" prop="name" width="170">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
<el-tooltip :content="row.remark" placement="top" effect="dark" v-if="row.remark">
|
<el-tooltip :content="row.remark" placement="top" effect="dark" v-if="row.remark">
|
||||||
<span class="flex items-center justify-center"><i class="iconfont icon-wenhao mr-0.5 text-3.5! text-#999"></i>{{ row.name }}</span>
|
<span class="flex items-center justify-center"><i
|
||||||
|
class="iconfont icon-wenhao mr-0.5 text-3.5! text-#999"></i>{{ row.name }}</span>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
<span v-else>{{ row.name }}</span>
|
<span v-else>{{ row.name }}</span>
|
||||||
</template>
|
</template>
|
||||||
@ -163,7 +142,8 @@
|
|||||||
<el-table-column label="总量" align="center" prop="total" width="100" />
|
<el-table-column label="总量" align="center" prop="total" width="100" />
|
||||||
<el-table-column label="总进度" align="center" prop="projectId">
|
<el-table-column label="总进度" align="center" prop="projectId">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
<el-progress :text-inside="true" :stroke-width="20" :percentage="row.completedPercentage" status="success" />
|
<el-progress :text-inside="true" :stroke-width="20" :percentage="row.completedPercentage"
|
||||||
|
status="success" />
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="计划总量" align="center" prop="planTotal" width="100" />
|
<el-table-column label="计划总量" align="center" prop="planTotal" width="100" />
|
||||||
@ -179,28 +159,17 @@
|
|||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-button
|
<el-button type="warning" icon="Download" link size="small" v-if="scope.row.name === '光伏板'"
|
||||||
type="warning"
|
|
||||||
icon="Download"
|
|
||||||
link
|
|
||||||
size="small"
|
|
||||||
v-if="scope.row.name === '光伏板'"
|
|
||||||
@click="openDialog(scope.row, 'importTableStatus', '上传表格')"
|
@click="openDialog(scope.row, 'importTableStatus', '上传表格')"
|
||||||
v-hasPermi="['progress:progressCategory:add']"
|
v-hasPermi="['progress:progressCategory:add']">
|
||||||
>
|
|
||||||
导入表格
|
导入表格
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button
|
<el-button type="success" icon="Plus" link size="small" @click="planRef.openDialog(scope.row)"
|
||||||
type="success"
|
v-hasPermi="['progress:progressCategory:add']">
|
||||||
icon="Plus"
|
|
||||||
link
|
|
||||||
size="small"
|
|
||||||
@click="planRef.openDialog(scope.row)"
|
|
||||||
v-hasPermi="['progress:progressCategory:add']"
|
|
||||||
>
|
|
||||||
计划
|
计划
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button type="primary" icon="Plus" link size="small" @click="handleDayAdd(scope.row)" v-hasPermi="['progress:progressCategory:add']">
|
<el-button type="primary" icon="Plus" link size="small" @click="handleDayAdd(scope.row)"
|
||||||
|
v-hasPermi="['progress:progressCategory:add']">
|
||||||
日报
|
日报
|
||||||
</el-button>
|
</el-button>
|
||||||
</template>
|
</template>
|
||||||
@ -211,7 +180,8 @@
|
|||||||
|
|
||||||
<!-- 导入数据对话框 -->
|
<!-- 导入数据对话框 -->
|
||||||
<el-dialog :title="dialog.title" v-model="dialog.importDataStatus" width="500px" append-to-body>
|
<el-dialog :title="dialog.title" v-model="dialog.importDataStatus" width="500px" append-to-body>
|
||||||
<file-upload class="pl-20 pt" v-model="dialog.file" :limit="20" :file-size="50" :file-type="['shp', 'shx', 'dbf']" />
|
<file-upload class="pl-20 pt" v-model="dialog.file" :limit="20" :file-size="50"
|
||||||
|
:file-type="['shp', 'shx', 'dbf']" />
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<div class="dialog-footer">
|
<div class="dialog-footer">
|
||||||
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
|
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
|
||||||
|
|||||||
@ -1,12 +1,14 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="p-2">
|
<div class="p-2">
|
||||||
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
|
<transition :enter-active-class="proxy?.animate.searchAnimate.enter"
|
||||||
|
:leave-active-class="proxy?.animate.searchAnimate.leave">
|
||||||
<div v-show="showSearch" class="mb-[10px]">
|
<div v-show="showSearch" class="mb-[10px]">
|
||||||
<el-card shadow="hover">
|
<el-card shadow="hover">
|
||||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
||||||
<el-form-item label="请选择项目：" prop="pid" label-width="100">
|
<el-form-item label="请选择项目：" prop="pid" label-width="100">
|
||||||
<el-select v-model="queryParams.projectId" placeholder="请选择" @change="handleChange" clearable>
|
<el-select v-model="queryParams.projectId" placeholder="请选择" @change="handleChange" clearable>
|
||||||
<el-option v-for="item in matrixOptions" :key="item.projectId" :label="item.name" :value="item.projectId" />
|
<el-option v-for="item in matrixOptions" :key="item.projectId" :label="item.name"
|
||||||
|
:value="item.projectId" />
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="请选择方阵：" prop="pid" label-width="100" v-if="relevancyStructure == '2'">
|
<el-form-item label="请选择方阵：" prop="pid" label-width="100" v-if="relevancyStructure == '2'">
|
||||||
@ -27,13 +29,8 @@
|
|||||||
<el-button type="primary" plain icon="Plus" @click="handleAdd()">新增</el-button>
|
<el-button type="primary" plain icon="Plus" @click="handleAdd()">新增</el-button>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="1.5">
|
<el-col :span="1.5">
|
||||||
<file-upload
|
<file-upload upload-url="/progress/progressCategory/import" v-model="file" :limit="1"
|
||||||
upload-url="/progress/progressCategory/import"
|
:file-type="['xls', 'xlsx']" :on-upload-success="handleSuccess">
|
||||||
v-model="file"
|
|
||||||
:limit="1"
|
|
||||||
:file-type="['xls', 'xlsx']"
|
|
||||||
:on-upload-success="handleSuccess"
|
|
||||||
>
|
|
||||||
<el-button type="primary" plain icon="upload">导入</el-button>
|
<el-button type="primary" plain icon="upload">导入</el-button>
|
||||||
</file-upload>
|
</file-upload>
|
||||||
</el-col>
|
</el-col>
|
||||||
@ -43,17 +40,39 @@
|
|||||||
<el-col :span="1.5">
|
<el-col :span="1.5">
|
||||||
<el-button type="info" plain icon="Sort" @click="handleToggleExpandAll">展开/折叠</el-button>
|
<el-button type="info" plain icon="Sort" @click="handleToggleExpandAll">展开/折叠</el-button>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
<el-col :span="6" :push="6">
|
||||||
|
<div class="summary-container">
|
||||||
|
<div class="summary-card owner-summary">
|
||||||
|
<div class="summary-icon">
|
||||||
|
<el-icon size="24">
|
||||||
|
<Money />
|
||||||
|
</el-icon>
|
||||||
|
</div>
|
||||||
|
<div class="summary-content">
|
||||||
|
<div class="summary-label">产值金额（业主）</div>
|
||||||
|
<div class="summary-value">{{ ownerOutputSum }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="summary-card construction-summary">
|
||||||
|
<div class="summary-icon">
|
||||||
|
<el-icon size="24">
|
||||||
|
<Wallet />
|
||||||
|
</el-icon>
|
||||||
|
</div>
|
||||||
|
<div class="summary-content">
|
||||||
|
<div class="summary-label">产值金额（分包）</div>
|
||||||
|
<div class="summary-value">{{ constructionOutputSum }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||||
|
|
||||||
</el-row>
|
</el-row>
|
||||||
</template>
|
</template>
|
||||||
<el-table
|
<el-table ref="progressCategoryTableRef" v-loading="loading" :data="progressCategoryList" row-key="id"
|
||||||
ref="progressCategoryTableRef"
|
:default-expand-all="isExpandAll" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||||
v-loading="loading"
|
max-height="550">
|
||||||
:data="progressCategoryList"
|
|
||||||
row-key="id"
|
|
||||||
:default-expand-all="isExpandAll"
|
|
||||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
|
||||||
>
|
|
||||||
<!-- <el-table-column label="父类别id" prop="parentId" /> -->
|
<!-- <el-table-column label="父类别id" prop="parentId" /> -->
|
||||||
<el-table-column label="类别名称" prop="name" width="230" />
|
<el-table-column label="类别名称" prop="name" width="230" />
|
||||||
<el-table-column label="计量方式" align="center" prop="unitType">
|
<el-table-column label="计量方式" align="center" prop="unitType">
|
||||||
@ -102,10 +121,12 @@
|
|||||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<div>
|
<div>
|
||||||
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['progress:progressCategory:edit']">
|
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
|
||||||
|
v-hasPermi="['progress:progressCategory:edit']">
|
||||||
修改
|
修改
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['progress:progressCategory:remove']">
|
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
|
||||||
|
v-hasPermi="['progress:progressCategory:remove']">
|
||||||
删除
|
删除
|
||||||
</el-button>
|
</el-button>
|
||||||
</div>
|
</div>
|
||||||
@ -119,14 +140,9 @@
|
|||||||
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
|
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
|
||||||
<el-form ref="progressCategoryFormRef" :model="form" :rules="rules" label-width="120px">
|
<el-form ref="progressCategoryFormRef" :model="form" :rules="rules" label-width="120px">
|
||||||
<el-form-item label="父类别" prop="parentId" v-if="!form.id">
|
<el-form-item label="父类别" prop="parentId" v-if="!form.id">
|
||||||
<el-tree-select
|
<el-tree-select v-model="form.parentId" :data="progressCategoryOptions"
|
||||||
v-model="form.parentId"
|
:props="{ value: 'id', label: 'name', children: 'children' }" value-key="id" placeholder="请选择父类别"
|
||||||
:data="progressCategoryOptions"
|
check-strictly />
|
||||||
:props="{ value: 'id', label: 'name', children: 'children' }"
|
|
||||||
value-key="id"
|
|
||||||
placeholder="请选择父类别"
|
|
||||||
check-strictly
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="计量方式" prop="unitType" v-if="!form.workType && form.unitType != '0'">
|
<el-form-item label="计量方式" prop="unitType" v-if="!form.workType && form.unitType != '0'">
|
||||||
<el-select v-model="form.unitType" placeholder="请选择关联数据">
|
<el-select v-model="form.unitType" placeholder="请选择关联数据">
|
||||||
@ -191,6 +207,7 @@ import {
|
|||||||
import { ProgressCategoryVO, ProgressCategoryQuery, ProgressCategoryForm } from '@/api/progress/progressCategory/types';
|
import { ProgressCategoryVO, ProgressCategoryQuery, ProgressCategoryForm } from '@/api/progress/progressCategory/types';
|
||||||
import { getTabList } from '@/api/progress/progressCategoryTemplate';
|
import { getTabList } from '@/api/progress/progressCategoryTemplate';
|
||||||
import { useUserStoreHook } from '@/store/modules/user';
|
import { useUserStoreHook } from '@/store/modules/user';
|
||||||
|
import { Money, Wallet } from '@element-plus/icons-vue';
|
||||||
|
|
||||||
const { proxy } = getCurrentInstance() as any;
|
const { proxy } = getCurrentInstance() as any;
|
||||||
const { progress_unit_type, progress_work_type } = toRefs<any>(proxy?.useDict('progress_unit_type', 'progress_work_type'));
|
const { progress_unit_type, progress_work_type } = toRefs<any>(proxy?.useDict('progress_unit_type', 'progress_work_type'));
|
||||||
@ -225,7 +242,7 @@ const dialog = reactive<DialogOption>({
|
|||||||
visible: false,
|
visible: false,
|
||||||
title: ''
|
title: ''
|
||||||
});
|
});
|
||||||
|
const tempData = ref([])
|
||||||
const initFormData: ProgressCategoryForm = {
|
const initFormData: ProgressCategoryForm = {
|
||||||
id: undefined,
|
id: undefined,
|
||||||
parentId: undefined,
|
parentId: undefined,
|
||||||
@ -291,7 +308,20 @@ const data = reactive<PageData<ProgressCategoryForm, ProgressCategoryQuery>>({
|
|||||||
|
|
||||||
const { queryParams, form, rules } = toRefs(data);
|
const { queryParams, form, rules } = toRefs(data);
|
||||||
const matrixIdList = ref([]);
|
const matrixIdList = ref([]);
|
||||||
|
const ownerOutputSum = computed(() => {
|
||||||
|
let sum = 0;
|
||||||
|
tempData.value.forEach(item => {
|
||||||
|
sum += Number(item.ownerOutputValue);
|
||||||
|
})
|
||||||
|
return proxy.formatPrice(sum);
|
||||||
|
});
|
||||||
|
const constructionOutputSum = computed(() => {
|
||||||
|
let sum = 0;
|
||||||
|
tempData.value.forEach(item => {
|
||||||
|
sum += Number(item.constructionOutputValue);
|
||||||
|
})
|
||||||
|
return proxy.formatPrice(sum);
|
||||||
|
});
|
||||||
/** 查询分项工程单价列表 */
|
/** 查询分项工程单价列表 */
|
||||||
const getList = async () => {
|
const getList = async () => {
|
||||||
if (!queryParams.value.projectId) {
|
if (!queryParams.value.projectId) {
|
||||||
@ -310,6 +340,7 @@ const getList = async () => {
|
|||||||
matrixId: item.projectId
|
matrixId: item.projectId
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
if (!matrixValue.value) matrixValue.value = matrixList[0].id;
|
if (!matrixValue.value) matrixValue.value = matrixList[0].id;
|
||||||
matrixOptions.value = matrixList;
|
matrixOptions.value = matrixList;
|
||||||
queryParams.value.projectId = matrixList[0].projectId;
|
queryParams.value.projectId = matrixList[0].projectId;
|
||||||
@ -325,6 +356,7 @@ const getList = async () => {
|
|||||||
try {
|
try {
|
||||||
const id = relevancyStructure.value == '2' ? matrixValue.value : activeTab.value;
|
const id = relevancyStructure.value == '2' ? matrixValue.value : activeTab.value;
|
||||||
const res = await listProgressCategory(id);
|
const res = await listProgressCategory(id);
|
||||||
|
tempData.value = res.data;
|
||||||
const data = proxy?.handleTree<ProgressCategoryVO>(res.data, 'id', 'parentId');
|
const data = proxy?.handleTree<ProgressCategoryVO>(res.data, 'id', 'parentId');
|
||||||
if (data) {
|
if (data) {
|
||||||
progressCategoryList.value = data;
|
progressCategoryList.value = data;
|
||||||
@ -506,3 +538,89 @@ onUnmounted(() => {
|
|||||||
listeningProject();
|
listeningProject();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.summary-container {
|
||||||
|
display: flex;
|
||||||
|
gap: 16px;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-card {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 16px 20px;
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 1px solid #e4e7ed;
|
||||||
|
background: #ffffff;
|
||||||
|
min-width: 200px;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-card:hover {
|
||||||
|
border-color: #c0c4cc;
|
||||||
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.owner-summary {
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-color: #409eff;
|
||||||
|
color: #303133;
|
||||||
|
}
|
||||||
|
|
||||||
|
.construction-summary {
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-color: #67c23a;
|
||||||
|
color: #303133;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-icon {
|
||||||
|
margin-right: 12px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: #f0f2f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.owner-summary .summary-icon {
|
||||||
|
background: #e6f7ff;
|
||||||
|
color: #409eff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.construction-summary .summary-icon {
|
||||||
|
background: #f0f9ff;
|
||||||
|
color: #67c23a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-content {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-label {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #909399;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-value {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #303133;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.summary-container {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-card {
|
||||||
|
min-width: 180px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -2,22 +2,14 @@
|
|||||||
<el-dialog v-model="dialogVisible" title="招标文件" width="500" draggable>
|
<el-dialog v-model="dialogVisible" title="招标文件" width="500" draggable>
|
||||||
<el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
|
<el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
|
||||||
<el-form-item label="招标文件" prop="name">
|
<el-form-item label="招标文件" prop="name">
|
||||||
<file-upload
|
<file-upload v-model="form.costEstimationFile" :fileSize="100" :auto-upload="false" @handleRemove="handleRemove"
|
||||||
v-model="form.costEstimationFile"
|
uploadUrl="/tender/biddingPlan/uploadBiddingDocuments" method="put" ref="fileUploadRef" :data="{
|
||||||
:fileSize="100"
|
|
||||||
:auto-upload="false"
|
|
||||||
uploadUrl="/tender/biddingPlan/uploadBiddingDocuments"
|
|
||||||
method="put"
|
|
||||||
ref="fileUploadRef"
|
|
||||||
:data="{
|
|
||||||
projectId: currentProject?.id,
|
projectId: currentProject?.id,
|
||||||
type: planType,
|
type: planType,
|
||||||
fileType: '1',
|
fileType: '1',
|
||||||
bidStatus: '0',
|
bidStatus: '0',
|
||||||
id: row.id
|
id: row.id
|
||||||
}"
|
}" showFileList />
|
||||||
showFileList
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
<template #footer>
|
<template #footer>
|
||||||
@ -45,7 +37,11 @@ const emit = defineEmits(['success']);
|
|||||||
const form = ref({
|
const form = ref({
|
||||||
costEstimationFile: ''
|
costEstimationFile: ''
|
||||||
});
|
});
|
||||||
|
const handleRemove = (file: any, fileList: any) => {
|
||||||
|
console.log(file, fileList);
|
||||||
|
console.log('handleRemove', form.value);
|
||||||
|
|
||||||
|
};
|
||||||
const open = (rows: any, type: string) => {
|
const open = (rows: any, type: string) => {
|
||||||
dialogVisible.value = true;
|
dialogVisible.value = true;
|
||||||
console.log(rows, type);
|
console.log(rows, type);
|
||||||
|
|||||||
@ -7,23 +7,15 @@
|
|||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="中标文件" prop="name">
|
<el-form-item label="中标文件" prop="name">
|
||||||
<file-upload
|
<file-upload v-model="form.costEstimationFile" :fileSize="100" :auto-upload="false"
|
||||||
v-model="form.costEstimationFile"
|
uploadUrl="/tender/biddingPlan/uploadBiddingDocuments" method="put" ref="fileUploadRef" :data="{
|
||||||
:fileSize="100"
|
|
||||||
:auto-upload="false"
|
|
||||||
uploadUrl="/tender/biddingPlan/uploadBiddingDocuments"
|
|
||||||
method="put"
|
|
||||||
ref="fileUploadRef"
|
|
||||||
:data="{
|
|
||||||
projectId: currentProject?.id,
|
projectId: currentProject?.id,
|
||||||
type: planType,
|
type: planType,
|
||||||
fileType: '0',
|
fileType: '0',
|
||||||
bidStatus: '0',
|
bidStatus: '0',
|
||||||
id: row.id,
|
id: row.id,
|
||||||
winningBidderId: form.winningBidder
|
winningBidderId: form.winningBidder
|
||||||
}"
|
}" showFileList />
|
||||||
showFileList
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
<template #footer>
|
<template #footer>
|
||||||
|
|||||||
@ -13,7 +13,8 @@
|
|||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||||
<el-button type="primary" plain :icon="Plus" @click="openDialog" v-hasPermi="['tender:biddingPlan:add']">新增</el-button>
|
<el-button type="primary" plain :icon="Plus" @click="openDialog"
|
||||||
|
v-hasPermi="['tender:biddingPlan:add']">新增</el-button>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
</el-card>
|
</el-card>
|
||||||
@ -33,9 +34,8 @@
|
|||||||
<el-table-column prop="bidd" align="center">
|
<el-table-column prop="bidd" align="center">
|
||||||
<template #header> <span style="color: red">*</span>招标文件 </template>
|
<template #header> <span style="color: red">*</span>招标文件 </template>
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-button type="primary" link v-hasPermi="['tender:biddingPlan:getAnnex']" @click="biddView(scope.row)" v-if="scope.row.annexCount > 0"
|
<el-button type="primary" link v-hasPermi="['tender:biddingPlan:getAnnex']" @click="biddView(scope.row)"
|
||||||
>查看文件({{ scope.row.annexCount }})</el-button
|
v-if="scope.row.annexCount > 0">查看文件({{ scope.row.annexCount }})</el-button>
|
||||||
>
|
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="winningBidder" align="center">
|
<el-table-column prop="winningBidder" align="center">
|
||||||
@ -47,102 +47,57 @@
|
|||||||
<el-table-column prop="bidFileName" align="center">
|
<el-table-column prop="bidFileName" align="center">
|
||||||
<template #header> <span style="color: red">*</span>中标文件 </template>
|
<template #header> <span style="color: red">*</span>中标文件 </template>
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-button type="primary" link @click="openPdf(scope.row.bidFile)">{{ scope.row.bidFileName }} </el-button>
|
<el-button type="primary" link @click="openPdf(scope.row.bidFile)">{{ scope.row.bidFileName }}
|
||||||
|
</el-button>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="plannedBiddingTime" align="center" width="250">
|
<el-table-column prop="plannedBiddingTime" align="center" width="250">
|
||||||
<template #header> <span style="color: red">*</span>计划招标时间 </template>
|
<template #header> <span style="color: red">*</span>计划招标时间 </template>
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-date-picker
|
<el-date-picker v-model="scope.row.plannedBiddingTime" @change="
|
||||||
v-model="scope.row.plannedBiddingTime"
|
(val: any) => {
|
||||||
@change="
|
changeBiddingTime(val, scope.row);
|
||||||
(val: any) => {
|
}
|
||||||
changeBiddingTime(val, scope.row);
|
" type="date" value-format="YYYY-MM-DD" placeholder="选择时间" :disabled="scope.row.bidStatus == 1"
|
||||||
}
|
v-hasPermi="['tender:biddingPlan:edit']" />
|
||||||
"
|
|
||||||
type="date"
|
|
||||||
value-format="YYYY-MM-DD"
|
|
||||||
placeholder="选择时间"
|
|
||||||
:disabled="scope.row.bidStatus == 1"
|
|
||||||
v-hasPermi="['tender:biddingPlan:edit']"
|
|
||||||
/>
|
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="contractPrice" align="center" width="200">
|
<el-table-column prop="contractPrice" align="center" width="200">
|
||||||
<template #header> <span style="color: red">*</span>合同金额 </template>
|
<template #header> <span style="color: red">*</span>合同金额 </template>
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-input-number
|
<el-input-number :model-value="scope.row.contractPrice" @change="
|
||||||
:model-value="scope.row.contractPrice"
|
(val) => {
|
||||||
@change="
|
scope.row.contractPrice = val;
|
||||||
(val) => {
|
changeContractPrice(val, scope.row);
|
||||||
scope.row.contractPrice = val;
|
}
|
||||||
changeContractPrice(val, scope.row);
|
" :precision="4" :min="0" :controls="false" :disabled="scope.row.bidStatus == 1"
|
||||||
}
|
v-hasPermi="['tender:biddingPlan:edit']" />
|
||||||
"
|
|
||||||
:precision="4"
|
|
||||||
:min="0"
|
|
||||||
:controls="false"
|
|
||||||
:disabled="scope.row.bidStatus == 1"
|
|
||||||
v-hasPermi="['tender:biddingPlan:edit']"
|
|
||||||
/>
|
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
|
|
||||||
<el-table-column prop="price" label="操作" align="center" width="400">
|
<el-table-column prop="price" label="操作" align="center" width="400">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-button
|
<el-button type="primary" link icon="FolderOpened" @click="handleSave(scope.row)"
|
||||||
type="primary"
|
v-hasPermi="['tender:biddingPlan:uploadBiddingDocuments']" :disabled="scope.row.bidStatus == 1">招标上传
|
||||||
link
|
|
||||||
icon="FolderOpened"
|
|
||||||
@click="handleSave(scope.row)"
|
|
||||||
v-hasPermi="['tender:biddingPlan:uploadBiddingDocuments']"
|
|
||||||
:disabled="scope.row.bidStatus == 1"
|
|
||||||
>招标上传
|
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button
|
<el-button type="primary" link icon="FolderOpened" @click="handleWinTheBid(scope.row)"
|
||||||
type="primary"
|
v-hasPermi="['tender:biddingPlan:uploadBiddingDocuments']" :disabled="scope.row.bidStatus == 1">中标上传
|
||||||
link
|
|
||||||
icon="FolderOpened"
|
|
||||||
@click="handleWinTheBid(scope.row)"
|
|
||||||
v-hasPermi="['tender:biddingPlan:uploadBiddingDocuments']"
|
|
||||||
:disabled="scope.row.bidStatus == 1"
|
|
||||||
>中标上传
|
|
||||||
</el-button>
|
</el-button>
|
||||||
<!-- <el-button type="primary" link icon="Edit" @click="handleSave(scope.row)" v-hasPermi="['tender:segmentedIndicatorPlanning:edit']"
|
<!-- <el-button type="primary" link icon="Edit" @click="handleSave(scope.row)" v-hasPermi="['tender:segmentedIndicatorPlanning:edit']"
|
||||||
>信息
|
>信息
|
||||||
</el-button> -->
|
</el-button> -->
|
||||||
<el-button
|
<el-button type="primary" link icon="View" @click="handleDetail(scope.row)"
|
||||||
type="primary"
|
:disabled="scope.row.bidStatus == 1" v-hasPermi="['tender:biddingPlan:getMore']">详情</el-button>
|
||||||
link
|
|
||||||
icon="View"
|
|
||||||
@click="handleDetail(scope.row)"
|
|
||||||
:disabled="scope.row.bidStatus == 1"
|
|
||||||
v-hasPermi="['tender:biddingPlan:getMore']"
|
|
||||||
>详情</el-button
|
|
||||||
>
|
|
||||||
|
|
||||||
<el-button
|
<el-button type="primary" link icon="Delete" @click="delHandle(scope.row)"
|
||||||
type="primary"
|
:disabled="scope.row.bidStatus == 1" v-hasPermi="['tender:biddingPlan:remove']">删除</el-button>
|
||||||
link
|
<el-button type="primary" link icon="Lock" @click="editStatusBtn(scope.row)"
|
||||||
icon="Delete"
|
:disabled="scope.row.bidStatus == 1" v-hasPermi="['tender:biddingPlan:editStatus']">确定</el-button>
|
||||||
@click="delHandle(scope.row)"
|
|
||||||
:disabled="scope.row.bidStatus == 1"
|
|
||||||
v-hasPermi="['tender:biddingPlan:remove']"
|
|
||||||
>删除</el-button
|
|
||||||
>
|
|
||||||
<el-button
|
|
||||||
type="primary"
|
|
||||||
link
|
|
||||||
icon="Lock"
|
|
||||||
@click="editStatusBtn(scope.row)"
|
|
||||||
:disabled="scope.row.bidStatus == 1"
|
|
||||||
v-hasPermi="['tender:biddingPlan:editStatus']"
|
|
||||||
>确定</el-button
|
|
||||||
>
|
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
|
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
|
||||||
|
v-model:limit="queryParams.pageSize" @pagination="getList" />
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
<el-dialog title="新增" v-model="dialogVisible" width="75%" draggable>
|
<el-dialog title="新增" v-model="dialogVisible" width="75%" draggable>
|
||||||
@ -164,7 +119,8 @@
|
|||||||
<el-form :model="treeForm" :inline="true">
|
<el-form :model="treeForm" :inline="true">
|
||||||
<el-form-item label="版本号" prop="versions">
|
<el-form-item label="版本号" prop="versions">
|
||||||
<el-select v-model="treeForm.versions" placeholder="选择版本号" @change="changeVersions">
|
<el-select v-model="treeForm.versions" placeholder="选择版本号" @change="changeVersions">
|
||||||
<el-option v-for="item in options" :key="item.versions" :label="item.versions" :value="item.versions" />
|
<el-option v-for="item in options" :key="item.versions" :label="item.versions"
|
||||||
|
:value="item.versions" />
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="表名" prop="sheet" v-if="planType == '2'">
|
<el-form-item label="表名" prop="sheet" v-if="planType == '2'">
|
||||||
@ -177,16 +133,8 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
</el-card>
|
</el-card>
|
||||||
<el-table
|
<el-table :data="treeData" ref="treeTableRef" v-loading="treeLoading" row-key="id" border lazy
|
||||||
:data="treeData"
|
default-expand-all @selection-change="handleSelection">
|
||||||
ref="treeTableRef"
|
|
||||||
v-loading="treeLoading"
|
|
||||||
row-key="id"
|
|
||||||
border
|
|
||||||
lazy
|
|
||||||
default-expand-all
|
|
||||||
@selection-change="handleSelection"
|
|
||||||
>
|
|
||||||
<el-table-column type="selection" width="55" />
|
<el-table-column type="selection" width="55" />
|
||||||
<el-table-column prop="num" label="编号" />
|
<el-table-column prop="num" label="编号" />
|
||||||
<el-table-column prop="name" label="工程或费用名称" />
|
<el-table-column prop="name" label="工程或费用名称" />
|
||||||
@ -200,34 +148,27 @@
|
|||||||
(scope.row.quantity ? Number(scope.row.quantity) : 0) -
|
(scope.row.quantity ? Number(scope.row.quantity) : 0) -
|
||||||
(scope.row.useQuantity ? Number(scope.row.useQuantity) : 0) -
|
(scope.row.useQuantity ? Number(scope.row.useQuantity) : 0) -
|
||||||
(scope.row.selectNum ? Number(scope.row.selectNum) : 0) ==
|
(scope.row.selectNum ? Number(scope.row.selectNum) : 0) ==
|
||||||
0
|
0
|
||||||
? activeTab == 2
|
? activeTab == 2
|
||||||
? 0
|
? 0
|
||||||
: ''
|
: ''
|
||||||
: (
|
: (
|
||||||
(scope.row.quantity ? Number(scope.row.quantity) : 0) -
|
(scope.row.quantity ? Number(scope.row.quantity) : 0) -
|
||||||
(scope.row.selectNum ? Number(scope.row.selectNum) : 0) -
|
(scope.row.selectNum ? Number(scope.row.selectNum) : 0) -
|
||||||
(scope.row.useQuantity ? Number(scope.row.useQuantity) : 0)
|
(scope.row.useQuantity ? Number(scope.row.useQuantity) : 0)
|
||||||
).toFixed(2)
|
).toFixed(2)
|
||||||
}}
|
}}
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="selectNum" label="设计量" align="center">
|
<el-table-column prop="selectNum" label="设计量" align="center">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-input-number
|
<el-input-number :model-value="scope.row.selectNum" @change="
|
||||||
:model-value="scope.row.selectNum"
|
(val) => {
|
||||||
@change="
|
scope.row.selectNum = val;
|
||||||
(val) => {
|
handleNumberChange(scope.row);
|
||||||
scope.row.selectNum = val;
|
}
|
||||||
handleNumberChange(scope.row);
|
" :precision="2" :step="1" :controls="false" :max="Math.floor(scope.row.quantity)"
|
||||||
}
|
v-if="scope.row.quantity && scope.row.quantity != 0 && scope.row.unitPrice" />
|
||||||
"
|
|
||||||
:precision="2"
|
|
||||||
:step="1"
|
|
||||||
:controls="false"
|
|
||||||
:max="Math.floor(scope.row.quantity)"
|
|
||||||
v-if="scope.row.quantity && scope.row.quantity != 0 && scope.row.unitPrice"
|
|
||||||
/>
|
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="unitPrice" label="单价" align="center">
|
<el-table-column prop="unitPrice" label="单价" align="center">
|
||||||
@ -246,9 +187,9 @@
|
|||||||
0
|
0
|
||||||
? ''
|
? ''
|
||||||
: ((scope.row.quantity ? Number(scope.row.quantity) : 0) -
|
: ((scope.row.quantity ? Number(scope.row.quantity) : 0) -
|
||||||
(scope.row.useQuantity ? Number(scope.row.useQuantity) : 0) -
|
(scope.row.useQuantity ? Number(scope.row.useQuantity) : 0) -
|
||||||
(scope.row.selectNum ? Number(scope.row.selectNum) : 0)) *
|
(scope.row.selectNum ? Number(scope.row.selectNum) : 0)) *
|
||||||
Number(scope.row.unitPrice),
|
Number(scope.row.unitPrice),
|
||||||
false
|
false
|
||||||
)
|
)
|
||||||
}}
|
}}
|
||||||
@ -287,15 +228,8 @@
|
|||||||
<el-table-column prop="price" label="操作" align="center">
|
<el-table-column prop="price" label="操作" align="center">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-button type="primary" link icon="View" @click="openPdf(scope.row.url)">查看</el-button>
|
<el-button type="primary" link icon="View" @click="openPdf(scope.row.url)">查看</el-button>
|
||||||
<el-button
|
<el-button type="primary" link icon="Delete" @click="delHandlebidd(scope.row)"
|
||||||
type="primary"
|
v-if="scope.row.bidStatus != 1" v-hasPermi="['tender:biddingPlanAnnex:remove']">删除</el-button>
|
||||||
link
|
|
||||||
icon="Delete"
|
|
||||||
@click="delHandlebidd(scope.row)"
|
|
||||||
v-if="scope.row.bidStatus != 1"
|
|
||||||
v-hasPermi="['tender:biddingPlanAnnex:remove']"
|
|
||||||
>删除</el-button
|
|
||||||
>
|
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
@ -728,6 +662,7 @@ const delHandlebidd = (row: any) => {
|
|||||||
});
|
});
|
||||||
biddView(biddViewRow.value);
|
biddView(biddViewRow.value);
|
||||||
}
|
}
|
||||||
|
getList()
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
//修改状态
|
//修改状态
|
||||||
|
|||||||
@ -13,7 +13,7 @@
|
|||||||
<el-input v-model="queryParams.nodeName" placeholder="请输入任务名称" @keyup.enter="handleQuery" />
|
<el-input v-model="queryParams.nodeName" placeholder="请输入任务名称" @keyup.enter="handleQuery" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="流程定义名称" label-width="100" prop="flowName">
|
<el-form-item label="流程定义名称" label-width="100" prop="flowName">
|
||||||
<el-input v-model="queryParams.flowName" placeholder="请输入流程定义名称" @keyup.enter="handleQuery" />
|
<el-input v-model="queryParams.flowName" placeholder="请输入流程名称" @keyup.enter="handleQuery" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||||
@ -38,8 +38,7 @@
|
|||||||
<el-table v-loading="loading" border :data="taskList" @selection-change="handleSelectionChange">
|
<el-table v-loading="loading" border :data="taskList" @selection-change="handleSelectionChange">
|
||||||
<el-table-column type="selection" width="55" align="center" />
|
<el-table-column type="selection" width="55" align="center" />
|
||||||
<el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
|
<el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
|
||||||
<el-table-column :show-overflow-tooltip="true" prop="flowName" align="center" label="流程定义名称"></el-table-column>
|
<el-table-column :show-overflow-tooltip="true" prop="flowName" align="center" label="流程名称"></el-table-column>
|
||||||
<el-table-column align="center" prop="flowCode" label="流程定义编码"></el-table-column>
|
|
||||||
<el-table-column align="center" prop="categoryName" label="流程分类"></el-table-column>
|
<el-table-column align="center" prop="categoryName" label="流程分类"></el-table-column>
|
||||||
<el-table-column align="center" prop="version" label="版本号" width="90">
|
<el-table-column align="center" prop="version" label="版本号" width="90">
|
||||||
<template #default="scope"> v{{ scope.row.version }}.0</template>
|
<template #default="scope"> v{{ scope.row.version }}.0</template>
|
||||||
|
|||||||
@ -24,8 +24,13 @@
|
|||||||
<div v-show="showSearch" class="mb-[10px]">
|
<div v-show="showSearch" class="mb-[10px]">
|
||||||
<el-card shadow="hover">
|
<el-card shadow="hover">
|
||||||
<el-form v-show="showSearch" ref="queryFormRef" :model="queryParams" :inline="true" label-width="120px">
|
<el-form v-show="showSearch" ref="queryFormRef" :model="queryParams" :inline="true" label-width="120px">
|
||||||
<el-form-item label="流程定义编码" prop="flowCode">
|
<el-form-item label="流程名称" prop="flowName">
|
||||||
<el-input v-model="queryParams.flowCode" placeholder="请输入流程定义编码" @keyup.enter="handleQuery" />
|
<el-input v-model="queryParams.flowName" placeholder="请输入流程名称" @keyup.enter="handleQuery" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="项目" prop="projectId">
|
||||||
|
<el-select v-model="queryParams.projectId" placeholder="全部" clearable filterable style="width: 150px; margin-right: 20px">
|
||||||
|
<el-option v-for="project in projects" :key="project.id" :label="project.name" :value="project.id" />
|
||||||
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||||
@ -43,11 +48,10 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<el-table v-loading="loading" border :data="processInstanceList" @selection-change="handleSelectionChange">
|
<el-table v-loading="loading" border :data="processInstanceList" @selection-change="handleSelectionChange">
|
||||||
<el-table-column type="selection" width="55" align="center" />
|
|
||||||
<el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
|
<el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
|
||||||
<el-table-column v-if="false" align="center" prop="id" label="id"></el-table-column>
|
<el-table-column v-if="false" align="center" prop="id" label="id"></el-table-column>
|
||||||
<el-table-column :show-overflow-tooltip="true" prop="flowName" align="center" label="流程定义名称"> </el-table-column>
|
<el-table-column :show-overflow-tooltip="true" prop="flowName" align="center" label="流程名称"> </el-table-column>
|
||||||
<el-table-column align="center" prop="flowCode" label="流程定义编码"></el-table-column>
|
<!-- <el-table-column align="center" prop="flowCode" label="流程定义编码"></el-table-column> -->
|
||||||
<el-table-column align="center" prop="categoryName" label="流程分类"></el-table-column>
|
<el-table-column align="center" prop="categoryName" label="流程分类"></el-table-column>
|
||||||
<el-table-column align="center" prop="version" label="版本号" width="90">
|
<el-table-column align="center" prop="version" label="版本号" width="90">
|
||||||
<template #default="scope"> v{{ scope.row.version }}.0</template>
|
<template #default="scope"> v{{ scope.row.version }}.0</template>
|
||||||
@ -68,20 +72,18 @@
|
|||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-row :gutter="10" class="mb8">
|
<el-row :gutter="10" class="mb8">
|
||||||
<el-col :span="1.5" v-if="scope.row.flowStatus === 'draft' || scope.row.flowStatus === 'cancel' || scope.row.flowStatus === 'back'">
|
<el-col :span="1.5" v-if="scope.row.flowStatus === 'draft' || scope.row.flowStatus === 'cancel' || scope.row.flowStatus === 'back'">
|
||||||
<el-button type="primary" size="small" icon="Edit" @click="handleOpen(scope.row, 'update')">编辑</el-button>
|
<el-button type="primary" link icon="Edit" @click="handleOpen(scope.row, 'update')">编辑</el-button>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="1.5" v-if="scope.row.flowStatus === 'draft' || scope.row.flowStatus === 'cancel' || scope.row.flowStatus === 'back'">
|
<el-col :span="1.5" v-if="scope.row.flowStatus === 'draft' || scope.row.flowStatus === 'cancel' || scope.row.flowStatus === 'back'">
|
||||||
<el-button type="primary" size="small" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
|
<el-button type="primary" link icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-row :gutter="10" class="mb8">
|
<el-row :gutter="10" class="mb8">
|
||||||
<el-col :span="1.5">
|
<el-col :span="1.5">
|
||||||
<el-button type="primary" size="small" icon="View" @click="handleOpen(scope.row, 'view')">查看</el-button>
|
<el-button type="primary" link icon="View" @click="handleOpen(scope.row, 'view')">查看</el-button>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="1.5" v-if="scope.row.flowStatus === 'waiting'">
|
<el-col :span="1.5" v-if="scope.row.flowStatus === 'waiting'">
|
||||||
<el-button type="primary" size="small" icon="Notification" @click="handleCancelProcessApply(scope.row.businessId)"
|
<el-button type="primary" link icon="Notification" @click="handleCancelProcessApply(scope.row.businessId)">撤销</el-button>
|
||||||
>撤销</el-button
|
|
||||||
>
|
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</template>
|
</template>
|
||||||
@ -113,7 +115,12 @@ const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|||||||
const { wf_business_status } = toRefs<any>(proxy?.useDict('wf_business_status'));
|
const { wf_business_status } = toRefs<any>(proxy?.useDict('wf_business_status'));
|
||||||
const queryFormRef = ref<ElFormInstance>();
|
const queryFormRef = ref<ElFormInstance>();
|
||||||
const categoryTreeRef = ref<ElTreeInstance>();
|
const categoryTreeRef = ref<ElTreeInstance>();
|
||||||
|
import { useUserStore } from '@/store/modules/user';
|
||||||
|
const userStore = useUserStore();
|
||||||
|
const projects = computed(() => [
|
||||||
|
{ id: '0', name: '全部项目' }, // 添加空选项
|
||||||
|
...userStore.projects
|
||||||
|
]);
|
||||||
// 遮罩层
|
// 遮罩层
|
||||||
const loading = ref(true);
|
const loading = ref(true);
|
||||||
// 选中数组
|
// 选中数组
|
||||||
@ -135,11 +142,13 @@ const categoryName = ref('');
|
|||||||
|
|
||||||
const tab = ref('running');
|
const tab = ref('running');
|
||||||
// 查询参数
|
// 查询参数
|
||||||
const queryParams = ref<FlowInstanceQuery>({
|
const queryParams = ref({
|
||||||
pageNum: 1,
|
pageNum: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
flowCode: undefined,
|
flowCode: undefined,
|
||||||
category: undefined
|
category: undefined,
|
||||||
|
projectId: '0',
|
||||||
|
flowName: undefined
|
||||||
});
|
});
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
|||||||
@ -7,11 +7,13 @@
|
|||||||
<el-form-item label="任务名称" prop="nodeName">
|
<el-form-item label="任务名称" prop="nodeName">
|
||||||
<el-input v-model="queryParams.nodeName" placeholder="请输入任务名称" @keyup.enter="handleQuery" />
|
<el-input v-model="queryParams.nodeName" placeholder="请输入任务名称" @keyup.enter="handleQuery" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="流程定义名称" label-width="100" prop="flowName">
|
<el-form-item label="流程名称" label-width="100" prop="flowName">
|
||||||
<el-input v-model="queryParams.flowName" placeholder="请输入流程定义名称" @keyup.enter="handleQuery" />
|
<el-input v-model="queryParams.flowName" placeholder="请输入流程名称" @keyup.enter="handleQuery" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="流程定义编码" label-width="100" prop="flowCode">
|
<el-form-item label="项目" prop="projectId">
|
||||||
<el-input v-model="queryParams.flowCode" placeholder="请输入流程定义编码" @keyup.enter="handleQuery" />
|
<el-select v-model="queryParams.projectId" placeholder="全部" clearable filterable style="width: 150px; margin-right: 20px">
|
||||||
|
<el-option v-for="project in projects" :key="project.id" :label="project.name" :value="project.id" />
|
||||||
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||||
@ -31,8 +33,7 @@
|
|||||||
<el-table v-loading="loading" border :data="taskList" @selection-change="handleSelectionChange">
|
<el-table v-loading="loading" border :data="taskList" @selection-change="handleSelectionChange">
|
||||||
<el-table-column type="selection" width="55" align="center" />
|
<el-table-column type="selection" width="55" align="center" />
|
||||||
<el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
|
<el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
|
||||||
<el-table-column :show-overflow-tooltip="true" prop="flowName" align="center" label="流程定义名称"></el-table-column>
|
<el-table-column :show-overflow-tooltip="true" prop="flowName" align="center" label="流程名称"></el-table-column>
|
||||||
<el-table-column align="center" prop="flowCode" label="流程定义编码"></el-table-column>
|
|
||||||
<el-table-column align="center" prop="categoryName" label="流程分类"></el-table-column>
|
<el-table-column align="center" prop="categoryName" label="流程分类"></el-table-column>
|
||||||
<el-table-column align="center" prop="nodeName" label="任务名称"></el-table-column>
|
<el-table-column align="center" prop="nodeName" label="任务名称"></el-table-column>
|
||||||
<el-table-column align="center" label="流程状态" min-width="70">
|
<el-table-column align="center" label="流程状态" min-width="70">
|
||||||
@ -43,7 +44,7 @@
|
|||||||
<el-table-column align="center" prop="updateTime" label="更新时间" width="150"></el-table-column>
|
<el-table-column align="center" prop="updateTime" label="更新时间" width="150"></el-table-column>
|
||||||
<el-table-column label="操作" align="center" width="200">
|
<el-table-column label="操作" align="center" width="200">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-button type="primary" size="small" icon="View" @click="handleView(scope.row)">查看</el-button>
|
<el-button type="primary" icon="View" @click="handleView(scope.row)">查看</el-button>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
@ -64,6 +65,12 @@ import { TaskQuery } from '@/api/workflow/task/types';
|
|||||||
import workflowCommon from '@/api/workflow/workflowCommon';
|
import workflowCommon from '@/api/workflow/workflowCommon';
|
||||||
import { RouterJumpVo } from '@/api/workflow/workflowCommon/types';
|
import { RouterJumpVo } from '@/api/workflow/workflowCommon/types';
|
||||||
//审批记录组件
|
//审批记录组件
|
||||||
|
import { useUserStore } from '@/store/modules/user';
|
||||||
|
const userStore = useUserStore();
|
||||||
|
const projects = computed(() => [
|
||||||
|
{ id: '0', name: '全部项目' }, // 添加空选项
|
||||||
|
...userStore.projects
|
||||||
|
]);
|
||||||
const queryFormRef = ref<ElFormInstance>();
|
const queryFormRef = ref<ElFormInstance>();
|
||||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||||
const { wf_business_status } = toRefs<any>(proxy?.useDict('wf_business_status'));
|
const { wf_business_status } = toRefs<any>(proxy?.useDict('wf_business_status'));
|
||||||
@ -82,8 +89,9 @@ const total = ref(0);
|
|||||||
// 模型定义表格数据
|
// 模型定义表格数据
|
||||||
const taskList = ref([]);
|
const taskList = ref([]);
|
||||||
// 查询参数
|
// 查询参数
|
||||||
const queryParams = ref<TaskQuery>({
|
const queryParams = ref({
|
||||||
pageNum: 1,
|
pageNum: 1,
|
||||||
|
projectId: '0',
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
nodeName: undefined,
|
nodeName: undefined,
|
||||||
flowName: undefined,
|
flowName: undefined,
|
||||||
|
|||||||
@ -4,19 +4,21 @@
|
|||||||
<div v-show="showSearch" class="mb-[10px]">
|
<div v-show="showSearch" class="mb-[10px]">
|
||||||
<el-card shadow="hover">
|
<el-card shadow="hover">
|
||||||
<el-form v-show="showSearch" ref="queryFormRef" :model="queryParams" :inline="true">
|
<el-form v-show="showSearch" ref="queryFormRef" :model="queryParams" :inline="true">
|
||||||
<el-form-item>
|
<!-- <el-form-item>
|
||||||
<el-badge :value="userSelectCount" :max="10" class="item">
|
<el-badge :value="userSelectCount" :max="10" class="item">
|
||||||
<el-button type="primary" @click="openUserSelect">选择申请人</el-button>
|
<el-button type="primary" @click="openUserSelect">选择申请人</el-button>
|
||||||
</el-badge>
|
</el-badge>
|
||||||
</el-form-item>
|
</el-form-item> -->
|
||||||
<el-form-item label="任务名称" prop="nodeName">
|
<el-form-item label="任务名称" prop="nodeName">
|
||||||
<el-input v-model="queryParams.nodeName" placeholder="请输入任务名称" @keyup.enter="handleQuery" />
|
<el-input v-model="queryParams.nodeName" placeholder="请输入任务名称" @keyup.enter="handleQuery" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="流程定义名称" label-width="100" prop="flowName">
|
<el-form-item label="流程名称" label-width="100" prop="flowName">
|
||||||
<el-input v-model="queryParams.flowName" placeholder="请输入流程定义名称" @keyup.enter="handleQuery" />
|
<el-input v-model="queryParams.flowName" placeholder="请输入流程名称" @keyup.enter="handleQuery" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="流程定义编码" label-width="100" prop="flowCode">
|
<el-form-item label="项目" prop="projectId">
|
||||||
<el-input v-model="queryParams.flowCode" placeholder="请输入流程定义编码" @keyup.enter="handleQuery" />
|
<el-select v-model="queryParams.projectId" placeholder="全部" clearable filterable style="width: 150px; margin-right: 20px">
|
||||||
|
<el-option v-for="project in projects" :key="project.id" :label="project.name" :value="project.id" />
|
||||||
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||||
@ -34,10 +36,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<el-table v-loading="loading" border :data="taskList" @selection-change="handleSelectionChange">
|
<el-table v-loading="loading" border :data="taskList" @selection-change="handleSelectionChange">
|
||||||
<el-table-column type="selection" width="55" align="center" />
|
|
||||||
<el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
|
<el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
|
||||||
<el-table-column align="center" prop="flowName" label="流程定义名称"></el-table-column>
|
<el-table-column align="center" prop="flowName" label="流程名称"></el-table-column>
|
||||||
<el-table-column align="center" prop="flowCode" label="流程定义编码"></el-table-column>
|
|
||||||
<el-table-column align="center" prop="categoryName" label="流程分类"></el-table-column>
|
<el-table-column align="center" prop="categoryName" label="流程分类"></el-table-column>
|
||||||
<el-table-column align="center" prop="version" label="版本号" width="90">
|
<el-table-column align="center" prop="version" label="版本号" width="90">
|
||||||
<template #default="scope"> v{{ scope.row.version }}.0</template>
|
<template #default="scope"> v{{ scope.row.version }}.0</template>
|
||||||
@ -64,7 +64,7 @@
|
|||||||
<el-table-column align="center" prop="createTime" label="创建时间" width="160"></el-table-column>
|
<el-table-column align="center" prop="createTime" label="创建时间" width="160"></el-table-column>
|
||||||
<el-table-column label="操作" align="center" width="200">
|
<el-table-column label="操作" align="center" width="200">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-button type="primary" size="small" icon="View" @click="handleView(scope.row)">查看</el-button>
|
<el-button type="primary" link icon="View" @click="handleView(scope.row)">查看</el-button>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
@ -94,7 +94,12 @@ const { wf_task_status } = toRefs<any>(proxy?.useDict('wf_task_status'));
|
|||||||
import UserSelect from '@/components/UserSelect';
|
import UserSelect from '@/components/UserSelect';
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
import { UserVO } from '@/api/system/user/types';
|
import { UserVO } from '@/api/system/user/types';
|
||||||
|
import { useUserStore } from '@/store/modules/user';
|
||||||
|
const userStore = useUserStore();
|
||||||
|
const projects = computed(() => [
|
||||||
|
{ id: '0', name: '全部项目' }, // 添加空选项
|
||||||
|
...userStore.projects
|
||||||
|
]);
|
||||||
const userSelectRef = ref<InstanceType<typeof UserSelect>>();
|
const userSelectRef = ref<InstanceType<typeof UserSelect>>();
|
||||||
// 遮罩层
|
// 遮罩层
|
||||||
const loading = ref(true);
|
const loading = ref(true);
|
||||||
@ -111,11 +116,12 @@ const total = ref(0);
|
|||||||
// 模型定义表格数据
|
// 模型定义表格数据
|
||||||
const taskList = ref([]);
|
const taskList = ref([]);
|
||||||
// 查询参数
|
// 查询参数
|
||||||
const queryParams = ref<TaskQuery>({
|
const queryParams = ref({
|
||||||
pageNum: 1,
|
pageNum: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
nodeName: undefined,
|
nodeName: undefined,
|
||||||
flowName: undefined,
|
flowName: undefined,
|
||||||
|
projectId: '0',
|
||||||
flowCode: undefined,
|
flowCode: undefined,
|
||||||
createByIds: []
|
createByIds: []
|
||||||
});
|
});
|
||||||
|
|||||||
@ -12,11 +12,13 @@
|
|||||||
<el-form-item label="任务名称" prop="nodeName">
|
<el-form-item label="任务名称" prop="nodeName">
|
||||||
<el-input v-model="queryParams.nodeName" placeholder="请输入任务名称" @keyup.enter="handleQuery" />
|
<el-input v-model="queryParams.nodeName" placeholder="请输入任务名称" @keyup.enter="handleQuery" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="流程定义名称" label-width="100" prop="flowName">
|
<el-form-item label="流程名称" label-width="100" prop="flowName">
|
||||||
<el-input v-model="queryParams.flowName" placeholder="请输入流程定义名称" @keyup.enter="handleQuery" />
|
<el-input v-model="queryParams.flowName" placeholder="请输入流程名称" @keyup.enter="handleQuery" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="流程定义编码" label-width="100" prop="flowCode">
|
<el-form-item label="项目" prop="projectId">
|
||||||
<el-input v-model="queryParams.flowCode" placeholder="请输入流程定义编码" @keyup.enter="handleQuery" />
|
<el-select v-model="queryParams.projectId" placeholder="全部" clearable filterable style="width: 150px; margin-right: 20px">
|
||||||
|
<el-option v-for="project in projects" :key="project.id" :label="project.name" :value="project.id" />
|
||||||
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||||
@ -33,10 +35,8 @@
|
|||||||
</el-row>
|
</el-row>
|
||||||
</template>
|
</template>
|
||||||
<el-table v-loading="loading" border :data="taskList" @selection-change="handleSelectionChange">
|
<el-table v-loading="loading" border :data="taskList" @selection-change="handleSelectionChange">
|
||||||
<el-table-column type="selection" width="55" align="center" />
|
|
||||||
<el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
|
<el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
|
||||||
<el-table-column :show-overflow-tooltip="true" prop="flowName" align="center" label="流程定义名称"></el-table-column>
|
<el-table-column :show-overflow-tooltip="true" prop="flowName" align="center" label="流程名称"></el-table-column>
|
||||||
<el-table-column align="center" prop="flowCode" label="流程定义编码"></el-table-column>
|
|
||||||
<el-table-column align="center" prop="categoryName" label="流程分类"></el-table-column>
|
<el-table-column align="center" prop="categoryName" label="流程分类"></el-table-column>
|
||||||
<el-table-column align="center" prop="nodeName" label="任务名称"></el-table-column>
|
<el-table-column align="center" prop="nodeName" label="任务名称"></el-table-column>
|
||||||
<el-table-column align="center" prop="createByName" label="申请人"></el-table-column>
|
<el-table-column align="center" prop="createByName" label="申请人"></el-table-column>
|
||||||
@ -60,7 +60,7 @@
|
|||||||
<el-table-column align="center" prop="createTime" label="创建时间" width="160"></el-table-column>
|
<el-table-column align="center" prop="createTime" label="创建时间" width="160"></el-table-column>
|
||||||
<el-table-column label="操作" align="center" width="200">
|
<el-table-column label="操作" align="center" width="200">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-button type="primary" size="small" icon="Edit" @click="handleOpen(scope.row)">办理</el-button>
|
<el-button type="primary" link icon="Edit" @click="handleOpen(scope.row)">办理</el-button>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
@ -88,7 +88,12 @@ const { wf_business_status } = toRefs<any>(proxy?.useDict('wf_business_status'))
|
|||||||
import UserSelect from '@/components/UserSelect';
|
import UserSelect from '@/components/UserSelect';
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
import { UserVO } from '@/api/system/user/types';
|
import { UserVO } from '@/api/system/user/types';
|
||||||
|
import { useUserStore } from '@/store/modules/user';
|
||||||
|
const userStore = useUserStore();
|
||||||
|
const projects = computed(() => [
|
||||||
|
{ id: '0', name: '全部项目' }, // 添加空选项
|
||||||
|
...userStore.projects
|
||||||
|
]);
|
||||||
const userSelectRef = ref<InstanceType<typeof UserSelect>>();
|
const userSelectRef = ref<InstanceType<typeof UserSelect>>();
|
||||||
//提交组件
|
//提交组件
|
||||||
const queryFormRef = ref<ElFormInstance>();
|
const queryFormRef = ref<ElFormInstance>();
|
||||||
@ -112,13 +117,14 @@ const selectUserIds = ref<Array<number | string>>([]);
|
|||||||
//申请人选择数量
|
//申请人选择数量
|
||||||
const userSelectCount = ref(0);
|
const userSelectCount = ref(0);
|
||||||
// 查询参数
|
// 查询参数
|
||||||
const queryParams = ref<TaskQuery>({
|
const queryParams = ref({
|
||||||
pageNum: 1,
|
pageNum: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
nodeName: undefined,
|
nodeName: undefined,
|
||||||
flowName: undefined,
|
flowName: undefined,
|
||||||
flowCode: undefined,
|
flowCode: undefined,
|
||||||
createByIds: []
|
createByIds: [],
|
||||||
|
projectId: '0'
|
||||||
});
|
});
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
getWaitingList();
|
getWaitingList();
|
||||||
|
|||||||
Reference in New Issue
Block a user