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
|
||||
# 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'
|
||||
# 朱银
|
||||
|
||||
@ -11,3 +11,34 @@ export const keyIndex = () => {
|
||||
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>
|
||||
<div class="upload-file">
|
||||
<el-upload
|
||||
ref="fileUploadRef"
|
||||
multiple
|
||||
:action="realUploadUrl"
|
||||
:before-upload="handleBeforeUpload"
|
||||
:file-list="fileList"
|
||||
: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"
|
||||
>
|
||||
<el-upload ref="fileUploadRef" multiple :action="realUploadUrl" :before-upload="handleBeforeUpload"
|
||||
:file-list="fileList" :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>
|
||||
<div>
|
||||
<!-- 上传按钮 -->
|
||||
@ -42,20 +24,10 @@
|
||||
的文件
|
||||
</div>
|
||||
<!-- 文件列表 -->
|
||||
<transition-group
|
||||
v-if="!isConstruction && !isImportInfo"
|
||||
class="upload-file-list el-upload-list el-upload-list--text"
|
||||
name="el-fade-in-linear"
|
||||
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"
|
||||
>
|
||||
<transition-group v-if="!isConstruction && !isImportInfo"
|
||||
class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" 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">
|
||||
<span class="el-icon-document"> {{ getFileName(file.name) }} </span>
|
||||
</el-link>
|
||||
@ -305,8 +277,6 @@ const handleChange = (file: any, filelist: any) => {
|
||||
|
||||
// 删除文件
|
||||
const handleRemove = (file: any, fileList: any) => {
|
||||
console.log(11);
|
||||
|
||||
emit('handleRemove', file, fileList);
|
||||
};
|
||||
|
||||
|
||||
@ -1,34 +1,6 @@
|
||||
<template>
|
||||
<div class="p-2">
|
||||
<el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="变更单" name="1"
|
||||
><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-tab-pane>
|
||||
<el-tab-pane label="外部联系单" name="0"
|
||||
><el-card shadow="never">
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
@ -40,15 +12,8 @@
|
||||
</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>
|
||||
<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">
|
||||
@ -109,14 +74,11 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
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 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 中获取项目列表和当前选中的项目
|
||||
|
||||
@ -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-input v-model="queryParams.documentName" placeholder="请输入资料名称" clearable @keyup.enter="handleQuery" />
|
||||
</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-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>
|
||||
@ -154,14 +161,14 @@
|
||||
<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>
|
||||
</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-option :value="item.userId" v-for="item in userCoryList" :key="item.userId" :label="item.nickName + '-' + item.phonenumber" />
|
||||
</el-select>
|
||||
</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>
|
||||
<span style="font-size: 12px; color: #999999">注意:请上传pdf格式文件</span>
|
||||
<div style="display: flex; justify-content: flex-end">
|
||||
@ -360,7 +367,8 @@ const data = reactive({
|
||||
designSubitemId: undefined,
|
||||
volumeNumber: undefined,
|
||||
documentName: undefined,
|
||||
params: {}
|
||||
params: {},
|
||||
isUpload: '2'
|
||||
},
|
||||
rules: {
|
||||
design: [{ required: true, message: '主键ID不能为空', trigger: 'blur' }],
|
||||
@ -585,7 +593,6 @@ const handleUploadSuccess = async (flieList: any, res: any) => {
|
||||
};
|
||||
/** 审核蓝图按钮操作 */
|
||||
const handleAuditLantu = async (row) => {
|
||||
proxy.$tab.closePage(proxy.$route);
|
||||
proxy.$router.push({
|
||||
path: `/approval/volumeCatalog/blueprintEdit`,
|
||||
query: {
|
||||
@ -596,7 +603,6 @@ const handleAuditLantu = async (row) => {
|
||||
};
|
||||
/** 查看蓝图按钮操作 */
|
||||
const handleAuditViewLantu = async (row) => {
|
||||
proxy.$tab.closePage(proxy.$route);
|
||||
proxy.$router.push({
|
||||
path: `/approval/volumeCatalog/blueprintEdit`,
|
||||
query: {
|
||||
|
||||
@ -1,275 +1,328 @@
|
||||
<template>
|
||||
<div class="centerPage">
|
||||
<div class="topPage">
|
||||
<div id="earth" style="width: 100%;height: 100%;"></div>
|
||||
<div class="centerPage_map">
|
||||
<div ref="mapRef" class="map-container" style="width: 100%; height: 100%" />
|
||||
</div>
|
||||
<div class="endPage" :class="{ 'slide-out-down': isHide }">
|
||||
<Title title="AI安全巡检">
|
||||
<img src="@/assets/projectLarge/robot.svg" alt="" height="20px" width="20px">
|
||||
<div class="centerPage_bottom">
|
||||
<Title title="风险预警">
|
||||
<img src="@/assets/projectLarge/robot.svg" alt="" height="20px" width="20px" />
|
||||
</Title>
|
||||
<div class="swiper" v-if="inspectionList.length">
|
||||
<div class="arrow" :class="{ 'canUse': canLeft }" @click="swiperClick('left')">
|
||||
<el-icon size="16" :color="canLeft ? 'rgba(29, 214, 255, 1)' : 'rgba(29, 214, 255, 0.3)'">
|
||||
<ArrowLeft />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="swiper_content" ref="swiperContent">
|
||||
<div class="swiper_item" v-for="(item, i) in inspectionList" :key="i">
|
||||
<img :src="item.picture" alt="安全巡检" class="swiper_img">
|
||||
<div class="swiper_date">{{ item.createTime.slice(5) }}</div>
|
||||
<div class="swiper_tip">{{ item.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="arrow" :class="{ 'canUse': canRight }" @click="swiperClick('right')">
|
||||
<el-icon size="16" :color="canRight ? 'rgba(29, 214, 255, 1)' : 'rgba(29, 214, 255, 0.3)'">
|
||||
<ArrowRight />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="centerPage_bottom_table">
|
||||
<el-table v-loading="loading" :data="tableData" show-overflow-tooltip>
|
||||
<el-table-column label="时间" align="center" prop="date" />
|
||||
<el-table-column label="类型" align="center" prop="riskType">
|
||||
<template #default="scope">
|
||||
{{ safety_inspection_type[scope.row.riskType] }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="报警内容" align="center" prop="alarmContent" />
|
||||
<el-table-column label="危险等级" align="center" prop="dangerLevel" />
|
||||
<el-table-column label="来源" align="center" prop="source" />
|
||||
<el-table-column label="警告等级" align="center" prop="alarmLevel">
|
||||
<template #default="scope">
|
||||
{{ risk_level_type[scope.row.alarmLevel] }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, toRefs, getCurrentInstance } from "vue"
|
||||
import Title from './title.vue'
|
||||
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
|
||||
import { getScreenSafetyInspection } from '@/api/projectScreen'
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { violation_level_type } = toRefs(proxy?.useDict('violation_level_type'));
|
||||
|
||||
const props = defineProps({
|
||||
isHide: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
projectId: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
})
|
||||
|
||||
const inspectionList = ref([{
|
||||
id: "",
|
||||
label: "",
|
||||
picture: "",
|
||||
createTime: ""
|
||||
}])
|
||||
const swiperContent = ref()
|
||||
const swiperItemWidth = ref(100)
|
||||
const canLeft = ref(false)
|
||||
const canRight = ref(true)
|
||||
|
||||
const swiperClick = (direction) => {
|
||||
if (!swiperContent.value) return
|
||||
|
||||
if (direction === 'right') {
|
||||
if (swiperContent.value.scrollLeft >= swiperContent.value.scrollWidth - swiperContent.value.clientWidth) {
|
||||
canRight.value = false
|
||||
canLeft.value = true
|
||||
return
|
||||
}
|
||||
swiperContent.value.scrollLeft += swiperItemWidth.value
|
||||
<script setup lang="ts">
|
||||
import * as echarts from 'echarts';
|
||||
import china from '@/assets/china.json';
|
||||
import RevenueContractCard from './RevenueContractCard.vue';
|
||||
import bottomboxconpoent from './bottomboxconpoent.vue';
|
||||
import { totalAmount, projectGis } from '@/api/largeScreen/index'; // 导入projectGis接口
|
||||
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
|
||||
import Title from './title.vue';
|
||||
import { earlyWarning } from '@/api/outputApi';
|
||||
import { useDict } from '@/utils/dict';
|
||||
import { getDicts } from '@/api/system/dict/data';
|
||||
// 地图相关变量
|
||||
const mapRef = ref<HTMLDivElement | null>(null);
|
||||
let myChart: any = null;
|
||||
const projectData = ref<any[]>([]); // 存储项目地理信息数据
|
||||
const loading = ref(false);
|
||||
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 {
|
||||
if (swiperContent.value.scrollLeft <= 0) {
|
||||
canLeft.value = false
|
||||
canRight.value = true
|
||||
return
|
||||
console.error('项目地理数据请求失败：', response.msg);
|
||||
}
|
||||
swiperContent.value.scrollLeft -= swiperItemWidth.value
|
||||
} 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;
|
||||
}
|
||||
};
|
||||
|
||||
// 地图resize处理
|
||||
const handleResize = () => {
|
||||
if (myChart) myChart.resize();
|
||||
};
|
||||
|
||||
// 初始化地图（修改为使用接口数据）
|
||||
const initEcharts = () => {
|
||||
if (!mapRef.value || projectData.value.length === 0) {
|
||||
console.error('未找到地图容器或项目数据');
|
||||
return;
|
||||
}
|
||||
|
||||
// 更新箭头状态
|
||||
canLeft.value = swiperContent.value.scrollLeft > 0
|
||||
canRight.value = swiperContent.value.scrollLeft < swiperContent.value.scrollWidth - swiperContent.value.clientWidth
|
||||
}
|
||||
echarts.registerMap('china', china as any);
|
||||
|
||||
const getInspectionList = async () => {
|
||||
const res = await getScreenSafetyInspection(props.projectId)
|
||||
const { code, data } = res
|
||||
if (code === 200) {
|
||||
data.map(item => {
|
||||
item.label = violation_level_type.value.find((i) => i.value === item.violationType)?.label
|
||||
})
|
||||
inspectionList.value = data
|
||||
// 从接口数据生成散点数据
|
||||
const scatterData = projectData.value.map((item) => ({
|
||||
name: item.projectName,
|
||||
value: [parseFloat(item.lng), parseFloat(item.lat)], // 转换为数值类型
|
||||
shortName: item.shortName,
|
||||
projectSite: item.projectSite,
|
||||
symbol: 'diamond',
|
||||
itemStyle: { color: '#0166d6' },
|
||||
symbolSize: [20, 20],
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b}', // 显示项目名称
|
||||
position: 'top',
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
backgroundColor: 'rgba(3, 26, 52, 0.7)',
|
||||
padding: [3, 6],
|
||||
borderRadius: 3
|
||||
}
|
||||
}));
|
||||
|
||||
myChart = echarts.init(mapRef.value, null, {
|
||||
renderer: 'canvas',
|
||||
useDirtyRect: false
|
||||
});
|
||||
|
||||
const option: any = {
|
||||
roam: true, // 允许缩放和平移
|
||||
geo: {
|
||||
type: 'map',
|
||||
map: 'china',
|
||||
zoom: 2, // 调整初始缩放级别
|
||||
center: [108.95, 34.27], // 中国中心位置经纬度
|
||||
label: { show: false, color: '#fff' },
|
||||
itemStyle: {
|
||||
areaColor: '#031a34',
|
||||
borderColor: '#1e3a6e',
|
||||
borderWidth: 1
|
||||
}
|
||||
// 创建地球
|
||||
const createEarth = () => {
|
||||
window.YJ.on({
|
||||
ws: true,
|
||||
// host: getIP(), //资源所在服务器地址
|
||||
// username: this.loginForm.username, //用户名 可以不登录（不填写用户名），不登录时无法加载服务端的数据
|
||||
// password: md5pass, //密码 生成方式：md5(用户名_密码)
|
||||
}).then((res) => {
|
||||
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
|
||||
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>
|
||||
`;
|
||||
}
|
||||
}
|
||||
loadBaseMap(earth.viewer)
|
||||
YJ.Global.CesiumContainer(window.Earth1, {
|
||||
compass: false, //罗盘
|
||||
});
|
||||
// YJ.Global.flyTo(earth, view);
|
||||
// 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('卫星图数据来源')
|
||||
});
|
||||
if (params.seriesType === 'map') {
|
||||
// console.log(params, 111111);
|
||||
return `
|
||||
<div style="font-weight: bold;">${params.name}</div>
|
||||
|
||||
// 添加图层到视图
|
||||
const layer = viewer.imageryLayers.addImageryProvider(imageryProvider);
|
||||
`;
|
||||
}
|
||||
}
|
||||
},
|
||||
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(() => {
|
||||
getInspectionList()
|
||||
createEarth()
|
||||
if (swiperContent.value && swiperContent.value.children.length > 0) {
|
||||
swiperItemWidth.value = swiperContent.value.children[0].clientWidth + 20
|
||||
}
|
||||
})
|
||||
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>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.centerPage {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.topPage,
|
||||
.endPage {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding: 15px 0;
|
||||
border: 1px solid rgba(230, 247, 255, 0.1);
|
||||
// justify-content: space-between;
|
||||
padding: 0 10px 10px 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.topPage {
|
||||
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 {
|
||||
.centerPage_map {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
padding: 20px 20px 10px 20px;
|
||||
|
||||
.swiper_content {
|
||||
height: 65vh;
|
||||
}
|
||||
.centerPage_bottom {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
overflow-x: auto;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper_item {
|
||||
position: relative;
|
||||
height: 25vh;
|
||||
border: 1px solid rgba(29, 214, 255, 0.1);
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
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;
|
||||
.centerPage_bottom_table {
|
||||
width: 100%;
|
||||
padding: 5px 0;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: rgba(230, 247, 255, 1);
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
:deep(.el-table, .el-table__expanded-cell) {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
: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;
|
||||
place-items: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(29, 214, 255, 0.3);
|
||||
color: skyblue;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&.canUse {
|
||||
border: 1px solid rgba(29, 214, 255, 1);
|
||||
// 滚动条优化
|
||||
.centerPage_bottom_table::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
&:hover:not(.canUse) {
|
||||
opacity: 0.7;
|
||||
.centerPage_bottom_table::-webkit-scrollbar-thumb {
|
||||
background-color: #0ff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.centerPage_bottom_table::-webkit-scrollbar-track {
|
||||
background-color: rgba(0, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -18,43 +18,73 @@
|
||||
|
||||
<div class="endPage">
|
||||
<Title style="font-size: 22px" title="人员情况" />
|
||||
<div class="map">
|
||||
<div class="project_attendance_chart">
|
||||
<Title style="font-size: 22px" title="各项目人员出勤率" />
|
||||
<div class="chart_content" ref="attendanceChartRef"></div>
|
||||
<!-- 人员总览区域 -->
|
||||
<div class="people_overview">
|
||||
<div class="people_overview_content">
|
||||
<div class="people_image">
|
||||
<!-- 本地图片占位，后续可替换为实际图片路径 -->
|
||||
<img src="@/assets/images/man.png" alt="人员总览" class="placeholder_image" />
|
||||
</div>
|
||||
<div class="attendance_tag">
|
||||
<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 class="people_stats">
|
||||
<div class="stat_item">
|
||||
<div class="stat_label">出勤人数</div>
|
||||
<div class="stat_value">{{ attendanceCount }}</div>
|
||||
</div>
|
||||
<div class="stat_item">
|
||||
<div class="stat_label">出勤率</div>
|
||||
<div class="stat_rate">{{ attendanceRate }}%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tag_item">
|
||||
<img src="@/assets/projectLarge/people.svg" alt="" />
|
||||
<div class="tag_title">在岗人</div>
|
||||
<div class="tag_info">
|
||||
{{ peopleCount }}
|
||||
<span style="font-size: 14px">人</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tag_item">
|
||||
<img src="@/assets/projectLarge/people.svg" alt="" />
|
||||
<div class="tag_title">出勤率</div>
|
||||
<div class="tag_info">
|
||||
{{ attendanceRate }}
|
||||
<span style="font-size: 14px">%</span>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
@ -62,7 +92,7 @@
|
||||
import { ref } from 'vue';
|
||||
import Title from './title.vue';
|
||||
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 * as echarts from 'echarts';
|
||||
|
||||
@ -114,9 +144,14 @@ const newDetail = ref({
|
||||
const newId = ref('');
|
||||
const attendanceCount = 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 constructionPersonnelCount = ref(0);
|
||||
const managersCount = ref(0);
|
||||
const subcontractorsCount = ref(0);
|
||||
|
||||
// 项目出勤率数据
|
||||
const projectAttendanceData = ref([
|
||||
{ name: 'A项目', value: 62 },
|
||||
@ -129,6 +164,11 @@ const projectAttendanceData = ref([
|
||||
let attendanceChart = 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 { data, code } = res;
|
||||
if (code === 200) {
|
||||
attendanceCount.value = data.attendanceCount;
|
||||
attendanceRate.value = data.attendanceRate;
|
||||
peopleCount.value = data.peopleCount;
|
||||
totalPeopleCount.value = data.peopleCount;
|
||||
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 = () => {
|
||||
if (!attendanceChartRef.value) {
|
||||
console.warn('attendanceChartRef不存在');
|
||||
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);
|
||||
|
||||
const option = {
|
||||
@ -191,13 +422,45 @@ const initAttendanceChart = () => {
|
||||
grid: {
|
||||
top: 40,
|
||||
right: 30,
|
||||
bottom: 40,
|
||||
bottom: 60, // 增加底部空间以确保标签完全显示
|
||||
left: 30,
|
||||
containLabel: true,
|
||||
backgroundColor: 'rgba(10, 24, 45, 0.1)',
|
||||
borderColor: 'rgba(29, 214, 255, 0.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: {
|
||||
type: 'category',
|
||||
data: projectAttendanceData.value.map((item) => item.name),
|
||||
@ -209,9 +472,18 @@ const initAttendanceChart = () => {
|
||||
axisLabel: {
|
||||
color: '#e6f7ff',
|
||||
fontSize: 14,
|
||||
interval: 0,
|
||||
interval: 0, // 强制显示所有标签
|
||||
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: {
|
||||
show: true,
|
||||
@ -321,6 +593,19 @@ const initAttendanceChart = () => {
|
||||
|
||||
attendanceChart.setOption(option);
|
||||
|
||||
// 添加鼠标悬浮事件监听
|
||||
if (attendanceChartRef.value) {
|
||||
// 鼠标进入图表区域时停止滚动
|
||||
attendanceChartRef.value.addEventListener('mouseenter', () => {
|
||||
stopScroll();
|
||||
});
|
||||
|
||||
// 鼠标离开图表区域时重新开始滚动
|
||||
attendanceChartRef.value.addEventListener('mouseleave', () => {
|
||||
startScroll();
|
||||
});
|
||||
}
|
||||
|
||||
// 添加窗口大小变化时的图表更新
|
||||
const handleResize = () => {
|
||||
if (attendanceChart) {
|
||||
@ -333,6 +618,12 @@ const initAttendanceChart = () => {
|
||||
// 清理函数
|
||||
onUnmounted(() => {
|
||||
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);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
onMounted(async () => {
|
||||
// nextTick(() => {
|
||||
// initMapChart();
|
||||
// });
|
||||
getPeopleData();
|
||||
getKeyIndexData();
|
||||
getProjectAttendanceCount(); // 获取人员总览数据
|
||||
getPeopleCategoryData();
|
||||
|
||||
// 初始化项目出勤率柱状图
|
||||
setTimeout(() => {
|
||||
// 先等待获取项目出勤率数据
|
||||
await getProjectAttendanceStats(); // 获取项目出勤率图表数据
|
||||
|
||||
// 再初始化图表
|
||||
initAttendanceChart();
|
||||
}, 100);
|
||||
|
||||
// 图表初始化后自动开始滚动
|
||||
startScroll();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
@ -370,6 +667,9 @@ onUnmounted(() => {
|
||||
attendanceChart.dispose();
|
||||
attendanceChart = null;
|
||||
}
|
||||
|
||||
// 清理滚动计时器
|
||||
stopScroll();
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -383,37 +683,59 @@ onUnmounted(() => {
|
||||
.endPage {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 15px 0;
|
||||
height: 250;
|
||||
border: 1px solid rgba(29, 214, 255, 0.1);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.endPage {
|
||||
height: auto;
|
||||
flex: 1;
|
||||
margin-top: 23px;
|
||||
min-height: 550px;
|
||||
}
|
||||
|
||||
.project_attendance_chart {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 15px 0;
|
||||
border: 1px solid rgba(29, 214, 255, 0.1);
|
||||
box-sizing: border-box;
|
||||
margin-top: 15px;
|
||||
padding-bottom: 10px;
|
||||
|
||||
.chart_title {
|
||||
font-size: 16px;
|
||||
color: #e6f7ff;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 5px;
|
||||
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 {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
height: 320px; /* 增加高度以容纳滚动条 */
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -422,20 +744,20 @@ onUnmounted(() => {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 15px;
|
||||
margin-top: 15px;
|
||||
padding: 0 15px;
|
||||
gap: 10px;
|
||||
margin-bottom: 8px;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.indicator-card {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
height: 80px;
|
||||
background: rgba(10, 24, 45, 0.7);
|
||||
border: 1px solid rgba(29, 214, 255, 0.2);
|
||||
border-radius: 4px;
|
||||
padding: 15px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -488,53 +810,151 @@ onUnmounted(() => {
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.map {
|
||||
margin-top: 15px;
|
||||
/* 人员总览样式 */
|
||||
.people_overview {
|
||||
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);
|
||||
}
|
||||
|
||||
.attendance_tag {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 30px;
|
||||
margin-top: 15px;
|
||||
.people_overview_title {
|
||||
font-size: 16px;
|
||||
color: #e6f7ff;
|
||||
margin-bottom: 5px;
|
||||
border-bottom: 1px solid rgba(29, 214, 255, 0.1);
|
||||
}
|
||||
|
||||
.tag_item {
|
||||
width: 28%;
|
||||
.people_overview_content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.people_image {
|
||||
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;
|
||||
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 {
|
||||
.stat_label {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: rgba(230, 247, 255, 1);
|
||||
}
|
||||
}
|
||||
color: #8ab2ff;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.attendance_list {
|
||||
padding: 0px 30px;
|
||||
font-size: 14px;
|
||||
|
||||
.attendance_item {
|
||||
display: grid;
|
||||
grid-template-columns: 3fr 2fr 2fr 3fr;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.stat_value {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: #e6f7ff;
|
||||
text-shadow: 0px 1.24px 6.21px rgba(0, 190, 247, 0.5);
|
||||
}
|
||||
|
||||
.subfont {
|
||||
color: rgba(138, 149, 165, 1);
|
||||
.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>
|
||||
|
||||
@ -1,51 +1,54 @@
|
||||
export let pieOption = {
|
||||
// 定义中心文字
|
||||
graphic: [
|
||||
{
|
||||
type: 'text',
|
||||
left: 'center',
|
||||
top: '40%',
|
||||
style: {
|
||||
// 需要从接口替换
|
||||
text: '70%',
|
||||
fontSize: 24,
|
||||
fontWeight: 'bold',
|
||||
fill: '#fff'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
left: 'center',
|
||||
top: '50%',
|
||||
style: {
|
||||
text: '总进度',
|
||||
fontSize: 14,
|
||||
fill: '#fff'
|
||||
}
|
||||
},
|
||||
// {
|
||||
// type: 'text',
|
||||
// left: 'center',
|
||||
// top: '40%',
|
||||
// style: {
|
||||
// // 需要从接口替换
|
||||
// text: '70%',
|
||||
// fontSize: 24,
|
||||
// fontWeight: 'bold',
|
||||
// fill: '#fff'
|
||||
// }
|
||||
// }
|
||||
// {
|
||||
// type: 'text',
|
||||
// left: 'center',
|
||||
// top: '50%',
|
||||
// style: {
|
||||
// text: '111',
|
||||
// fontSize: 14,
|
||||
// fill: '#fff'
|
||||
// }
|
||||
// }
|
||||
],
|
||||
legend: {
|
||||
show: true,
|
||||
type: 'plain',
|
||||
bottom: 20,
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
// legend: {
|
||||
// show: true,
|
||||
// type: 'plain',
|
||||
// bottom: 20,
|
||||
// itemWidth: 12,
|
||||
// itemHeight: 12,
|
||||
// textStyle: {
|
||||
// color: '#fff'
|
||||
// }
|
||||
// },
|
||||
series: {
|
||||
type: 'pie',
|
||||
data: [],
|
||||
radius: [50, 80],
|
||||
center: ['50%', '45%'],
|
||||
itemStyle: {
|
||||
borderColor: '#fff',
|
||||
borderWidth: 1
|
||||
},
|
||||
// itemStyle: {
|
||||
// borderColor: '#fff',
|
||||
// borderWidth: 1
|
||||
// },
|
||||
label: {
|
||||
alignTo: 'edge',
|
||||
formatter: '{name|{b}}\n{percent|{c} %}',
|
||||
formatter: function (params) {
|
||||
// 只显示前三个数据项
|
||||
return `{name|${params.data.name}}\n{percent|${params.data.completionRate}MW}`;
|
||||
},
|
||||
minMargin: 10,
|
||||
edgeDistance: 20,
|
||||
lineHeight: 15,
|
||||
@ -62,7 +65,7 @@ export let pieOption = {
|
||||
},
|
||||
legend: {
|
||||
top: 'bottom'
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -72,16 +75,39 @@ export let barOption = {
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
// 调整文字与图标间距
|
||||
data: ['计划流转面积', '已流转面积'],
|
||||
data: ['计划产值', '实际产值'],
|
||||
top: 0,
|
||||
right: 20,
|
||||
right: 10,
|
||||
bottom: 10,
|
||||
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: {
|
||||
type: 'category',
|
||||
data: ['地块1', '地块2', '地块3', '地块4', '地块5', '地块6'],
|
||||
data: [],
|
||||
|
||||
axisLabel: {
|
||||
color: '#fff'
|
||||
},
|
||||
@ -93,34 +119,71 @@ export let barOption = {
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
name: '单位：m²',
|
||||
name: '单位：亿元',
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
formatter: '{value}'
|
||||
},
|
||||
splitLine: {
|
||||
show: false // 不显示分割线
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
bottom: 0, // 距离容器底部的距离
|
||||
containLabel: true // 确保坐标轴标签不被裁剪
|
||||
left: '12%',
|
||||
top: '15%', // 顶部留一点空间给 legend
|
||||
bottom: '8%',
|
||||
right: '2%'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '计划流转面积',
|
||||
name: '计划产值',
|
||||
type: 'bar',
|
||||
data: [],
|
||||
barWidth: '20%',
|
||||
barWidth: '10',
|
||||
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
|
||||
},
|
||||
{
|
||||
name: '已流转面积',
|
||||
offset: 1,
|
||||
color: 'rgba(255, 209, 92, 1)' // 顶部透明度1
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '实际产值',
|
||||
type: 'bar',
|
||||
data: [],
|
||||
barWidth: '20%',
|
||||
barWidth: '10',
|
||||
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: {
|
||||
map: 'ch',
|
||||
roam: true,
|
||||
aspectScale: Math.cos((47 * Math.PI) / 180),
|
||||
aspectScale: Math.cos((47 * Math.PI) / 180)
|
||||
},
|
||||
series: [
|
||||
{
|
||||
@ -147,7 +210,7 @@ export let mapOption = {
|
||||
{ name: 'i', value: [9.085994375000002, 47.55395822835779] },
|
||||
{ name: 'j', value: [8.653968125000002, 47.47709530818285] },
|
||||
{ name: 'k', value: [8.203158125000002, 47.44506909144329] }
|
||||
],
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
@ -1,13 +1,60 @@
|
||||
<template>
|
||||
<div class="leftPage">
|
||||
<div class="topPage">
|
||||
<Title title="项目概况" />
|
||||
<div class="content" v-html="generalize"></div>
|
||||
<Title title="项目进度分析" />
|
||||
<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 class="endPage">
|
||||
<Title title="形象进度" />
|
||||
</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 class="projectItem">
|
||||
<div class="chart_container">
|
||||
<div ref="pieChartRef" class="echart" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="output">
|
||||
<Title title="实际产值与预期产值对比" />
|
||||
<div class="chart_container">
|
||||
<div ref="lineChartRef" class="echart" />
|
||||
</div>
|
||||
</div>
|
||||
@ -15,69 +62,40 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, nextTick } from "vue"
|
||||
import Title from './title.vue'
|
||||
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
|
||||
import Title from './title.vue';
|
||||
import * as echarts from 'echarts';
|
||||
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({
|
||||
projectId: {
|
||||
type: String,
|
||||
default: 0
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
const generalize = ref()
|
||||
const generalize = ref();
|
||||
// 饼图相关
|
||||
const pieChartRef = ref<HTMLDivElement | null>(null);
|
||||
let pieChart: any = null;
|
||||
const totalPercent = ref(0)
|
||||
const totalPercent = ref(0);
|
||||
// 折线图相关
|
||||
const lineChartRef = ref<HTMLDivElement | null>(null);
|
||||
let lineChart: any = null;
|
||||
// 土地数据 折线图
|
||||
const designAreaData = ref([])
|
||||
const transferAreaData = ref([])
|
||||
// 饼图数据
|
||||
const pieData = [
|
||||
{ label: 'areaPercentage', name: '厂区', value: 0 },
|
||||
{ label: 'roadPercentage', name: '道路', value: 0 },
|
||||
{ label: 'collectorLinePercentage', name: '集电线路', value: 0 },
|
||||
{ label: 'exportLinePercentage', 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 designAreaData = ref([]);
|
||||
const transferAreaData = ref([]);
|
||||
const barNames = ref([]);
|
||||
// // 饼图数据
|
||||
// const pieData = [
|
||||
// { label: 'areaPercentage', name: '厂区', value: 0 },
|
||||
// { label: 'roadPercentage', name: '道路', value: 0 },
|
||||
// { label: 'collectorLinePercentage', name: '集电线路', value: 0 },
|
||||
// { label: 'exportLinePercentage', name: '送出线路', value: 0 },
|
||||
// { label: 'substationPercentage', name: '升压站', value: 0 },
|
||||
// { label: 'boxTransformerPercentage', name: '箱变', value: 0 }
|
||||
// ];
|
||||
|
||||
// 响应窗口大小变化
|
||||
const handleResize = () => {
|
||||
@ -85,50 +103,126 @@ const handleResize = () => {
|
||||
if (lineChart) lineChart.resize();
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取项目土地统计数据
|
||||
*/
|
||||
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))
|
||||
const processedDataList = ref([]);
|
||||
//获取数据
|
||||
const getData = async () => {
|
||||
const res = await projectProgress();
|
||||
if (res.code == 200) {
|
||||
capacityData.value = res.data;
|
||||
// processedDataList.value = res.data.projectProgressDetailList;
|
||||
let totalCapacity = 0;
|
||||
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();
|
||||
}
|
||||
};
|
||||
// 初始化柱状图图
|
||||
const initLineChart = () => {
|
||||
if (!lineChartRef.value) {
|
||||
console.error('未找到柱状图容器元素');
|
||||
return;
|
||||
}
|
||||
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 getScreenImgProcessData = async () => {
|
||||
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()
|
||||
}
|
||||
}
|
||||
// /**
|
||||
// * 获取项目形象进度数据
|
||||
// */
|
||||
// const getScreenImgProcessData = async () => {
|
||||
// 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();
|
||||
// }
|
||||
// };
|
||||
|
||||
/**
|
||||
* 获取项目概况数据
|
||||
*/
|
||||
const getScreenGeneralizeData = async () => {
|
||||
const res = await getScreenGeneralize(props.projectId);
|
||||
const { data, code } = res
|
||||
if (code === 200) {
|
||||
generalize.value = data
|
||||
}
|
||||
}
|
||||
// /**
|
||||
// * 获取项目概况数据
|
||||
// */
|
||||
// const getScreenGeneralizeData = async () => {
|
||||
// const res = await getScreenGeneralize(props.projectId);
|
||||
// const { data, code } = res;
|
||||
// if (code === 200) {
|
||||
// generalize.value = data;
|
||||
// }
|
||||
// };
|
||||
|
||||
// 组件挂载时初始化图表
|
||||
onMounted(() => {
|
||||
getScreenLandData()
|
||||
getScreenImgProcessData()
|
||||
getScreenGeneralizeData()
|
||||
// getScreenLandData();
|
||||
// getScreenImgProcessData();
|
||||
// getScreenGeneralizeData();
|
||||
getData();
|
||||
getOutputData();
|
||||
nextTick(() => {
|
||||
initPieChart();
|
||||
window.addEventListener('resize', handleResize);
|
||||
@ -155,67 +249,144 @@ onUnmounted(() => {
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
.topPage,
|
||||
.endPage {
|
||||
.topPage {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 15px 0;
|
||||
padding: 15px 0 0 0;
|
||||
border: 1px solid rgba(29, 214, 255, 0.1);
|
||||
box-sizing: border-box;
|
||||
height: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
.endPage {
|
||||
flex: 1;
|
||||
margin-top: 23px;
|
||||
// .content {
|
||||
// height: 100px;
|
||||
// margin: 0 15px;
|
||||
// padding: 0 10px;
|
||||
// margin-top: 15px;
|
||||
// box-sizing: border-box;
|
||||
// overflow-y: auto;
|
||||
|
||||
.chart_container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
// &::-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;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
padding: 15px 5px 5px 5px;
|
||||
.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 {
|
||||
height: 48%;
|
||||
height: 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 {
|
||||
height: 100px;
|
||||
margin: 0 15px;
|
||||
padding: 0 10px;
|
||||
margin-top: 15px;
|
||||
box-sizing: border-box;
|
||||
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;
|
||||
.chart_container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.echart {
|
||||
height: 90%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.subfont {
|
||||
color: rgba(138, 149, 165, 1);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -82,11 +82,18 @@
|
||||
</el-row>
|
||||
</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 label="手续办理清单" align="left" prop="formalitiesName">
|
||||
<template #default="scope">
|
||||
<span style="white-space: nowrap">{{ scope.row.formalitiesName }}</span>
|
||||
{{ scope.row.formalitiesName }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="计划开始时间" align="center" prop="planTheStartTime" width="180">
|
||||
@ -109,12 +116,12 @@
|
||||
<el-table-column label="手续材料" align="center" prop="formalitiesUrl" width="180">
|
||||
<template #default="scope">
|
||||
<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
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<div style="width: 5px">
|
||||
<el-badge v-if="scope.row.fileCount" :value="scope.row.fileCount" class="item" type="danger"> </el-badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,12 +1,14 @@
|
||||
<template>
|
||||
<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]">
|
||||
<el-card shadow="hover">
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
||||
<el-form-item label="请选择项目：" prop="pid" label-width="100">
|
||||
<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-form-item>
|
||||
<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-tab-pane :label="item.name" v-for="item in tabList" :key="item.id" :name="item.id"></el-tab-pane>
|
||||
<el-card shadow="never">
|
||||
<el-table
|
||||
ref="progressCategoryTableRef"
|
||||
v-loading="loading"
|
||||
:data="progressCategoryList"
|
||||
row-key="id"
|
||||
:default-expand-all="isExpandAll"
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||
v-if="isExpand"
|
||||
border
|
||||
>
|
||||
<el-table ref="progressCategoryTableRef" v-loading="loading" :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">
|
||||
<template #header>
|
||||
<el-icon
|
||||
class="cursor-pointer text-4! transform-rotate-z--90 transition-all-300"
|
||||
<el-icon class="cursor-pointer text-4! transform-rotate-z--90 transition-all-300"
|
||||
:class="!isExpandAll ? 'transform-rotate-z--90' : 'transform-rotate-z-90'"
|
||||
@click="handleToggleExpandAll"
|
||||
><Expand
|
||||
/></el-icon>
|
||||
@click="handleToggleExpandAll">
|
||||
<Expand />
|
||||
</el-icon>
|
||||
</template>
|
||||
<template #default="scope">
|
||||
<el-card class="pl-25" shadow="hover">
|
||||
@ -46,9 +40,8 @@
|
||||
<el-table-column label="名称" align="center" prop="name" width="170">
|
||||
<template #default="{ row }">
|
||||
<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>
|
||||
<span v-else>{{ row.name }}</span>
|
||||
</template>
|
||||
@ -60,7 +53,8 @@
|
||||
</el-table-column>
|
||||
<el-table-column label="是否延期" align="center" prop="isDelay" width="100">
|
||||
<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>
|
||||
</el-table-column>
|
||||
<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="projectId">
|
||||
<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>
|
||||
</el-table-column>
|
||||
<el-table-column label="计划总量" align="center" prop="planTotal" width="100" />
|
||||
@ -87,35 +82,17 @@
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
type="warning"
|
||||
icon="Download"
|
||||
link
|
||||
size="small"
|
||||
v-if="scope.row.name === '光伏板'"
|
||||
<el-button type="warning" icon="Download" link size="small" v-if="scope.row.name === '光伏板'"
|
||||
@click="openDialog(scope.row, 'importTableStatus', '上传表格')"
|
||||
v-hasPermi="['progress:progressCategory:add']"
|
||||
>
|
||||
v-hasPermi="['progress:progressCategory:add']">
|
||||
导入表格
|
||||
</el-button>
|
||||
<el-button
|
||||
type="success"
|
||||
icon="Plus"
|
||||
link
|
||||
size="small"
|
||||
@click="planRef.openDialog(scope.row)"
|
||||
v-hasPermi="['progress:progressCategory:add']"
|
||||
>
|
||||
<el-button type="success" icon="Plus" link size="small" @click="planRef.openDialog(scope.row)"
|
||||
v-hasPermi="['progress:progressCategory:add']">
|
||||
计划
|
||||
</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>
|
||||
</template>
|
||||
@ -132,7 +109,8 @@
|
||||
</el-table-column>
|
||||
<el-table-column label="总进度" align="center" prop="projectId">
|
||||
<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>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@ -140,7 +118,8 @@
|
||||
<el-table-column label="名称" align="center" prop="name" width="170">
|
||||
<template #default="{ row }">
|
||||
<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>
|
||||
<span v-else>{{ row.name }}</span>
|
||||
</template>
|
||||
@ -163,7 +142,8 @@
|
||||
<el-table-column label="总量" align="center" prop="total" width="100" />
|
||||
<el-table-column label="总进度" align="center" prop="projectId">
|
||||
<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>
|
||||
</el-table-column>
|
||||
<el-table-column label="计划总量" align="center" prop="planTotal" width="100" />
|
||||
@ -179,28 +159,17 @@
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
type="warning"
|
||||
icon="Download"
|
||||
link
|
||||
size="small"
|
||||
v-if="scope.row.name === '光伏板'"
|
||||
<el-button type="warning" icon="Download" link size="small" v-if="scope.row.name === '光伏板'"
|
||||
@click="openDialog(scope.row, 'importTableStatus', '上传表格')"
|
||||
v-hasPermi="['progress:progressCategory:add']"
|
||||
>
|
||||
v-hasPermi="['progress:progressCategory:add']">
|
||||
导入表格
|
||||
</el-button>
|
||||
<el-button
|
||||
type="success"
|
||||
icon="Plus"
|
||||
link
|
||||
size="small"
|
||||
@click="planRef.openDialog(scope.row)"
|
||||
v-hasPermi="['progress:progressCategory:add']"
|
||||
>
|
||||
<el-button type="success" icon="Plus" link size="small" @click="planRef.openDialog(scope.row)"
|
||||
v-hasPermi="['progress:progressCategory:add']">
|
||||
计划
|
||||
</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>
|
||||
</template>
|
||||
@ -211,7 +180,8 @@
|
||||
|
||||
<!-- 导入数据对话框 -->
|
||||
<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>
|
||||
<div class="dialog-footer">
|
||||
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
|
||||
|
||||
@ -1,12 +1,14 @@
|
||||
<template>
|
||||
<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]">
|
||||
<el-card shadow="hover">
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
||||
<el-form-item label="请选择项目：" prop="pid" label-width="100">
|
||||
<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-form-item>
|
||||
<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-col>
|
||||
<el-col :span="1.5">
|
||||
<file-upload
|
||||
upload-url="/progress/progressCategory/import"
|
||||
v-model="file"
|
||||
:limit="1"
|
||||
:file-type="['xls', 'xlsx']"
|
||||
:on-upload-success="handleSuccess"
|
||||
>
|
||||
<file-upload upload-url="/progress/progressCategory/import" v-model="file" :limit="1"
|
||||
:file-type="['xls', 'xlsx']" :on-upload-success="handleSuccess">
|
||||
<el-button type="primary" plain icon="upload">导入</el-button>
|
||||
</file-upload>
|
||||
</el-col>
|
||||
@ -43,17 +40,39 @@
|
||||
<el-col :span="1.5">
|
||||
<el-button type="info" plain icon="Sort" @click="handleToggleExpandAll">展开/折叠</el-button>
|
||||
</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>
|
||||
|
||||
</el-row>
|
||||
</template>
|
||||
<el-table
|
||||
ref="progressCategoryTableRef"
|
||||
v-loading="loading"
|
||||
:data="progressCategoryList"
|
||||
row-key="id"
|
||||
:default-expand-all="isExpandAll"
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||
>
|
||||
<el-table ref="progressCategoryTableRef" v-loading="loading" :data="progressCategoryList" row-key="id"
|
||||
:default-expand-all="isExpandAll" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||
max-height="550">
|
||||
<!-- <el-table-column label="父类别id" prop="parentId" /> -->
|
||||
<el-table-column label="类别名称" prop="name" width="230" />
|
||||
<el-table-column label="计量方式" align="center" prop="unitType">
|
||||
@ -102,10 +121,12 @@
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<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 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>
|
||||
</div>
|
||||
@ -119,14 +140,9 @@
|
||||
<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-item label="父类别" prop="parentId" v-if="!form.id">
|
||||
<el-tree-select
|
||||
v-model="form.parentId"
|
||||
:data="progressCategoryOptions"
|
||||
:props="{ value: 'id', label: 'name', children: 'children' }"
|
||||
value-key="id"
|
||||
placeholder="请选择父类别"
|
||||
check-strictly
|
||||
/>
|
||||
<el-tree-select v-model="form.parentId" :data="progressCategoryOptions"
|
||||
:props="{ value: 'id', label: 'name', children: 'children' }" value-key="id" placeholder="请选择父类别"
|
||||
check-strictly />
|
||||
</el-form-item>
|
||||
<el-form-item label="计量方式" prop="unitType" v-if="!form.workType && form.unitType != '0'">
|
||||
<el-select v-model="form.unitType" placeholder="请选择关联数据">
|
||||
@ -191,6 +207,7 @@ import {
|
||||
import { ProgressCategoryVO, ProgressCategoryQuery, ProgressCategoryForm } from '@/api/progress/progressCategory/types';
|
||||
import { getTabList } from '@/api/progress/progressCategoryTemplate';
|
||||
import { useUserStoreHook } from '@/store/modules/user';
|
||||
import { Money, Wallet } from '@element-plus/icons-vue';
|
||||
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
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,
|
||||
title: ''
|
||||
});
|
||||
|
||||
const tempData = ref([])
|
||||
const initFormData: ProgressCategoryForm = {
|
||||
id: undefined,
|
||||
parentId: undefined,
|
||||
@ -291,7 +308,20 @@ const data = reactive<PageData<ProgressCategoryForm, ProgressCategoryQuery>>({
|
||||
|
||||
const { queryParams, form, rules } = toRefs(data);
|
||||
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 () => {
|
||||
if (!queryParams.value.projectId) {
|
||||
@ -310,6 +340,7 @@ const getList = async () => {
|
||||
matrixId: item.projectId
|
||||
};
|
||||
});
|
||||
|
||||
if (!matrixValue.value) matrixValue.value = matrixList[0].id;
|
||||
matrixOptions.value = matrixList;
|
||||
queryParams.value.projectId = matrixList[0].projectId;
|
||||
@ -325,6 +356,7 @@ const getList = async () => {
|
||||
try {
|
||||
const id = relevancyStructure.value == '2' ? matrixValue.value : activeTab.value;
|
||||
const res = await listProgressCategory(id);
|
||||
tempData.value = res.data;
|
||||
const data = proxy?.handleTree<ProgressCategoryVO>(res.data, 'id', 'parentId');
|
||||
if (data) {
|
||||
progressCategoryList.value = data;
|
||||
@ -506,3 +538,89 @@ onUnmounted(() => {
|
||||
listeningProject();
|
||||
});
|
||||
</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-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
|
||||
<el-form-item label="招标文件" prop="name">
|
||||
<file-upload
|
||||
v-model="form.costEstimationFile"
|
||||
:fileSize="100"
|
||||
:auto-upload="false"
|
||||
uploadUrl="/tender/biddingPlan/uploadBiddingDocuments"
|
||||
method="put"
|
||||
ref="fileUploadRef"
|
||||
:data="{
|
||||
<file-upload v-model="form.costEstimationFile" :fileSize="100" :auto-upload="false" @handleRemove="handleRemove"
|
||||
uploadUrl="/tender/biddingPlan/uploadBiddingDocuments" method="put" ref="fileUploadRef" :data="{
|
||||
projectId: currentProject?.id,
|
||||
type: planType,
|
||||
fileType: '1',
|
||||
bidStatus: '0',
|
||||
id: row.id
|
||||
}"
|
||||
showFileList
|
||||
/>
|
||||
}" showFileList />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
@ -45,7 +37,11 @@ const emit = defineEmits(['success']);
|
||||
const form = ref({
|
||||
costEstimationFile: ''
|
||||
});
|
||||
const handleRemove = (file: any, fileList: any) => {
|
||||
console.log(file, fileList);
|
||||
console.log('handleRemove', form.value);
|
||||
|
||||
};
|
||||
const open = (rows: any, type: string) => {
|
||||
dialogVisible.value = true;
|
||||
console.log(rows, type);
|
||||
|
||||
@ -7,23 +7,15 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="中标文件" prop="name">
|
||||
<file-upload
|
||||
v-model="form.costEstimationFile"
|
||||
:fileSize="100"
|
||||
:auto-upload="false"
|
||||
uploadUrl="/tender/biddingPlan/uploadBiddingDocuments"
|
||||
method="put"
|
||||
ref="fileUploadRef"
|
||||
:data="{
|
||||
<file-upload v-model="form.costEstimationFile" :fileSize="100" :auto-upload="false"
|
||||
uploadUrl="/tender/biddingPlan/uploadBiddingDocuments" method="put" ref="fileUploadRef" :data="{
|
||||
projectId: currentProject?.id,
|
||||
type: planType,
|
||||
fileType: '0',
|
||||
bidStatus: '0',
|
||||
id: row.id,
|
||||
winningBidderId: form.winningBidder
|
||||
}"
|
||||
showFileList
|
||||
/>
|
||||
}" showFileList />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
|
||||
@ -13,7 +13,8 @@
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</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>
|
||||
</el-card>
|
||||
@ -33,9 +34,8 @@
|
||||
<el-table-column prop="bidd" align="center">
|
||||
<template #header> <span style="color: red">*</span>招标文件 </template>
|
||||
<template #default="scope">
|
||||
<el-button type="primary" link v-hasPermi="['tender:biddingPlan:getAnnex']" @click="biddView(scope.row)" v-if="scope.row.annexCount > 0"
|
||||
>查看文件({{ scope.row.annexCount }})</el-button
|
||||
>
|
||||
<el-button type="primary" link v-hasPermi="['tender:biddingPlan:getAnnex']" @click="biddView(scope.row)"
|
||||
v-if="scope.row.annexCount > 0">查看文件({{ scope.row.annexCount }})</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="winningBidder" align="center">
|
||||
@ -47,102 +47,57 @@
|
||||
<el-table-column prop="bidFileName" align="center">
|
||||
<template #header> <span style="color: red">*</span>中标文件 </template>
|
||||
<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>
|
||||
</el-table-column>
|
||||
<el-table-column prop="plannedBiddingTime" align="center" width="250">
|
||||
<template #header> <span style="color: red">*</span>计划招标时间 </template>
|
||||
<template #default="scope">
|
||||
<el-date-picker
|
||||
v-model="scope.row.plannedBiddingTime"
|
||||
@change="
|
||||
<el-date-picker v-model="scope.row.plannedBiddingTime" @change="
|
||||
(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>
|
||||
</el-table-column>
|
||||
<el-table-column prop="contractPrice" align="center" width="200">
|
||||
<template #header> <span style="color: red">*</span>合同金额 </template>
|
||||
<template #default="scope">
|
||||
<el-input-number
|
||||
:model-value="scope.row.contractPrice"
|
||||
@change="
|
||||
<el-input-number :model-value="scope.row.contractPrice" @change="
|
||||
(val) => {
|
||||
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>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="price" label="操作" align="center" width="400">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
type="primary"
|
||||
link
|
||||
icon="FolderOpened"
|
||||
@click="handleSave(scope.row)"
|
||||
v-hasPermi="['tender:biddingPlan:uploadBiddingDocuments']"
|
||||
:disabled="scope.row.bidStatus == 1"
|
||||
>招标上传
|
||||
<el-button type="primary" link icon="FolderOpened" @click="handleSave(scope.row)"
|
||||
v-hasPermi="['tender:biddingPlan:uploadBiddingDocuments']" :disabled="scope.row.bidStatus == 1">招标上传
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
link
|
||||
icon="FolderOpened"
|
||||
@click="handleWinTheBid(scope.row)"
|
||||
v-hasPermi="['tender:biddingPlan:uploadBiddingDocuments']"
|
||||
:disabled="scope.row.bidStatus == 1"
|
||||
>中标上传
|
||||
<el-button type="primary" link icon="FolderOpened" @click="handleWinTheBid(scope.row)"
|
||||
v-hasPermi="['tender:biddingPlan:uploadBiddingDocuments']" :disabled="scope.row.bidStatus == 1">中标上传
|
||||
</el-button>
|
||||
<!-- <el-button type="primary" link icon="Edit" @click="handleSave(scope.row)" v-hasPermi="['tender:segmentedIndicatorPlanning:edit']"
|
||||
>信息
|
||||
</el-button> -->
|
||||
<el-button
|
||||
type="primary"
|
||||
link
|
||||
icon="View"
|
||||
@click="handleDetail(scope.row)"
|
||||
:disabled="scope.row.bidStatus == 1"
|
||||
v-hasPermi="['tender:biddingPlan:getMore']"
|
||||
>详情</el-button
|
||||
>
|
||||
<el-button type="primary" link icon="View" @click="handleDetail(scope.row)"
|
||||
:disabled="scope.row.bidStatus == 1" v-hasPermi="['tender:biddingPlan:getMore']">详情</el-button>
|
||||
|
||||
<el-button
|
||||
type="primary"
|
||||
link
|
||||
icon="Delete"
|
||||
@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
|
||||
>
|
||||
<el-button type="primary" link icon="Delete" @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>
|
||||
</el-table-column>
|
||||
</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-tabs>
|
||||
<el-dialog title="新增" v-model="dialogVisible" width="75%" draggable>
|
||||
@ -164,7 +119,8 @@
|
||||
<el-form :model="treeForm" :inline="true">
|
||||
<el-form-item label="版本号" prop="versions">
|
||||
<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-form-item>
|
||||
<el-form-item label="表名" prop="sheet" v-if="planType == '2'">
|
||||
@ -177,16 +133,8 @@
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-table
|
||||
:data="treeData"
|
||||
ref="treeTableRef"
|
||||
v-loading="treeLoading"
|
||||
row-key="id"
|
||||
border
|
||||
lazy
|
||||
default-expand-all
|
||||
@selection-change="handleSelection"
|
||||
>
|
||||
<el-table :data="treeData" 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 prop="num" label="编号" />
|
||||
<el-table-column prop="name" label="工程或费用名称" />
|
||||
@ -214,20 +162,13 @@
|
||||
</el-table-column>
|
||||
<el-table-column prop="selectNum" label="设计量" align="center">
|
||||
<template #default="scope">
|
||||
<el-input-number
|
||||
:model-value="scope.row.selectNum"
|
||||
@change="
|
||||
<el-input-number :model-value="scope.row.selectNum" @change="
|
||||
(val) => {
|
||||
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>
|
||||
</el-table-column>
|
||||
<el-table-column prop="unitPrice" label="单价" align="center">
|
||||
@ -287,15 +228,8 @@
|
||||
<el-table-column prop="price" label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" link icon="View" @click="openPdf(scope.row.url)">查看</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
link
|
||||
icon="Delete"
|
||||
@click="delHandlebidd(scope.row)"
|
||||
v-if="scope.row.bidStatus != 1"
|
||||
v-hasPermi="['tender:biddingPlanAnnex:remove']"
|
||||
>删除</el-button
|
||||
>
|
||||
<el-button type="primary" link icon="Delete" @click="delHandlebidd(scope.row)"
|
||||
v-if="scope.row.bidStatus != 1" v-hasPermi="['tender:biddingPlanAnnex:remove']">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@ -728,6 +662,7 @@ const delHandlebidd = (row: any) => {
|
||||
});
|
||||
biddView(biddViewRow.value);
|
||||
}
|
||||
getList()
|
||||
});
|
||||
};
|
||||
//修改状态
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
<el-input v-model="queryParams.nodeName" placeholder="请输入任务名称" @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<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-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-column type="selection" width="55" align="center" />
|
||||
<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 align="center" prop="flowCode" 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="categoryName" label="流程分类"></el-table-column>
|
||||
<el-table-column align="center" prop="version" label="版本号" width="90">
|
||||
<template #default="scope"> v{{ scope.row.version }}.0</template>
|
||||
|
||||
@ -24,8 +24,13 @@
|
||||
<div v-show="showSearch" class="mb-[10px]">
|
||||
<el-card shadow="hover">
|
||||
<el-form v-show="showSearch" ref="queryFormRef" :model="queryParams" :inline="true" label-width="120px">
|
||||
<el-form-item label="流程定义编码" prop="flowCode">
|
||||
<el-input v-model="queryParams.flowCode" placeholder="请输入流程定义编码" @keyup.enter="handleQuery" />
|
||||
<el-form-item label="流程名称" prop="flowName">
|
||||
<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-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
@ -43,11 +48,10 @@
|
||||
</template>
|
||||
|
||||
<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 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 align="center" prop="flowCode" 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="version" label="版本号" width="90">
|
||||
<template #default="scope"> v{{ scope.row.version }}.0</template>
|
||||
@ -68,20 +72,18 @@
|
||||
<template #default="scope">
|
||||
<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-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 :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-row>
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<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 :span="1.5" v-if="scope.row.flowStatus === 'waiting'">
|
||||
<el-button type="primary" size="small" icon="Notification" @click="handleCancelProcessApply(scope.row.businessId)"
|
||||
>撤销</el-button
|
||||
>
|
||||
<el-button type="primary" link icon="Notification" @click="handleCancelProcessApply(scope.row.businessId)">撤销</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
@ -113,7 +115,12 @@ const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { wf_business_status } = toRefs<any>(proxy?.useDict('wf_business_status'));
|
||||
const queryFormRef = ref<ElFormInstance>();
|
||||
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);
|
||||
// 选中数组
|
||||
@ -135,11 +142,13 @@ const categoryName = ref('');
|
||||
|
||||
const tab = ref('running');
|
||||
// 查询参数
|
||||
const queryParams = ref<FlowInstanceQuery>({
|
||||
const queryParams = ref({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
flowCode: undefined,
|
||||
category: undefined
|
||||
category: undefined,
|
||||
projectId: '0',
|
||||
flowName: undefined
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
@ -7,11 +7,13 @@
|
||||
<el-form-item label="任务名称" prop="nodeName">
|
||||
<el-input v-model="queryParams.nodeName" placeholder="请输入任务名称" @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="流程定义名称" label-width="100" prop="flowName">
|
||||
<el-input v-model="queryParams.flowName" placeholder="请输入流程定义名称" @keyup.enter="handleQuery" />
|
||||
<el-form-item label="流程名称" label-width="100" prop="flowName">
|
||||
<el-input v-model="queryParams.flowName" placeholder="请输入流程名称" @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="流程定义编码" label-width="100" prop="flowCode">
|
||||
<el-input v-model="queryParams.flowCode" placeholder="请输入流程定义编码" @keyup.enter="handleQuery" />
|
||||
<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-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-column type="selection" width="55" align="center" />
|
||||
<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 align="center" prop="flowCode" 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="categoryName" label="流程分类"></el-table-column>
|
||||
<el-table-column align="center" prop="nodeName" label="任务名称"></el-table-column>
|
||||
<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 label="操作" align="center" width="200">
|
||||
<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>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@ -64,6 +65,12 @@ import { TaskQuery } from '@/api/workflow/task/types';
|
||||
import workflowCommon from '@/api/workflow/workflowCommon';
|
||||
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 { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { wf_business_status } = toRefs<any>(proxy?.useDict('wf_business_status'));
|
||||
@ -82,8 +89,9 @@ const total = ref(0);
|
||||
// 模型定义表格数据
|
||||
const taskList = ref([]);
|
||||
// 查询参数
|
||||
const queryParams = ref<TaskQuery>({
|
||||
const queryParams = ref({
|
||||
pageNum: 1,
|
||||
projectId: '0',
|
||||
pageSize: 10,
|
||||
nodeName: undefined,
|
||||
flowName: undefined,
|
||||
|
||||
@ -4,19 +4,21 @@
|
||||
<div v-show="showSearch" class="mb-[10px]">
|
||||
<el-card shadow="hover">
|
||||
<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-button type="primary" @click="openUserSelect">选择申请人</el-button>
|
||||
</el-badge>
|
||||
</el-form-item>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="任务名称" prop="nodeName">
|
||||
<el-input v-model="queryParams.nodeName" placeholder="请输入任务名称" @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="流程定义名称" label-width="100" prop="flowName">
|
||||
<el-input v-model="queryParams.flowName" placeholder="请输入流程定义名称" @keyup.enter="handleQuery" />
|
||||
<el-form-item label="流程名称" label-width="100" prop="flowName">
|
||||
<el-input v-model="queryParams.flowName" placeholder="请输入流程名称" @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="流程定义编码" label-width="100" prop="flowCode">
|
||||
<el-input v-model="queryParams.flowCode" placeholder="请输入流程定义编码" @keyup.enter="handleQuery" />
|
||||
<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-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
@ -34,10 +36,8 @@
|
||||
</template>
|
||||
|
||||
<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" prop="flowName" label="流程定义名称"></el-table-column>
|
||||
<el-table-column align="center" prop="flowCode" label="流程定义编码"></el-table-column>
|
||||
<el-table-column align="center" prop="flowName" 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">
|
||||
<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 label="操作" align="center" width="200">
|
||||
<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>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@ -94,7 +94,12 @@ const { wf_task_status } = toRefs<any>(proxy?.useDict('wf_task_status'));
|
||||
import UserSelect from '@/components/UserSelect';
|
||||
import { ref } from 'vue';
|
||||
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 loading = ref(true);
|
||||
@ -111,11 +116,12 @@ const total = ref(0);
|
||||
// 模型定义表格数据
|
||||
const taskList = ref([]);
|
||||
// 查询参数
|
||||
const queryParams = ref<TaskQuery>({
|
||||
const queryParams = ref({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
nodeName: undefined,
|
||||
flowName: undefined,
|
||||
projectId: '0',
|
||||
flowCode: undefined,
|
||||
createByIds: []
|
||||
});
|
||||
|
||||
@ -12,11 +12,13 @@
|
||||
<el-form-item label="任务名称" prop="nodeName">
|
||||
<el-input v-model="queryParams.nodeName" placeholder="请输入任务名称" @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="流程定义名称" label-width="100" prop="flowName">
|
||||
<el-input v-model="queryParams.flowName" placeholder="请输入流程定义名称" @keyup.enter="handleQuery" />
|
||||
<el-form-item label="流程名称" label-width="100" prop="flowName">
|
||||
<el-input v-model="queryParams.flowName" placeholder="请输入流程名称" @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="流程定义编码" label-width="100" prop="flowCode">
|
||||
<el-input v-model="queryParams.flowCode" placeholder="请输入流程定义编码" @keyup.enter="handleQuery" />
|
||||
<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-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
@ -33,10 +35,8 @@
|
||||
</el-row>
|
||||
</template>
|
||||
<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 :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 :show-overflow-tooltip="true" prop="flowName" align="center" 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="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 label="操作" align="center" width="200">
|
||||
<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>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@ -88,7 +88,12 @@ const { wf_business_status } = toRefs<any>(proxy?.useDict('wf_business_status'))
|
||||
import UserSelect from '@/components/UserSelect';
|
||||
import { ref } from 'vue';
|
||||
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 queryFormRef = ref<ElFormInstance>();
|
||||
@ -112,13 +117,14 @@ const selectUserIds = ref<Array<number | string>>([]);
|
||||
//申请人选择数量
|
||||
const userSelectCount = ref(0);
|
||||
// 查询参数
|
||||
const queryParams = ref<TaskQuery>({
|
||||
const queryParams = ref({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
nodeName: undefined,
|
||||
flowName: undefined,
|
||||
flowCode: undefined,
|
||||
createByIds: []
|
||||
createByIds: [],
|
||||
projectId: '0'
|
||||
});
|
||||
onMounted(() => {
|
||||
getWaitingList();
|
||||
|
||||
Reference in New Issue
Block a user