提交 20ab448d authored 作者: kxjia's avatar kxjia

完善问题整改页面

上级 f0a3acc8
......@@ -134,7 +134,7 @@
// }
treeValue.value = [result.result];
onLoadTriggleChange(result.result[0]);
onLoadTriggleChange(result.result ? result.result[0] : null);
}
}
......@@ -318,4 +318,4 @@
}
</script>
<style lang="less"></style>
<style lang="less"></style>
\ No newline at end of file
......@@ -41,8 +41,10 @@ export const getSysInfotest = (params) => defHttp.get({ url: Api.sysInfotest, pa
* 列表接口
* @param params
*/
export const getBaseInfoList = (params) =>
defHttp.get({url: Api.getBaseInfoList, params});
export const getBaseInfoList = (params) => {
return defHttp.get({url: Api.getBaseInfoList, params});
}
//底部折线图用到的方法
export const getPageChartData = () => defHttp.get({ url: Api.getPageChartData });
......
<template>
<div class="page-container">
<!-- 机构概况和科技概况 -->
<!-- 风险评估 -->
<!-- <div class="problem">
<div class="line-title">问题整改</div>
<div class="problemPie">
<pieCharts />
</div>
</div>
-->
<div class="monitor">
<div class="line-title">风险监测</div>
<div class="monitorLine">
<LineCharts />
</div>
</div> -->
<DetailModal @register="registerDetail" />
</div>
</template>
<script lang="ts" setup>
// Removed unused imports and fixed incorrect import for draggable
import { ref, watch, defineProps, unref } from 'vue';
import { BasicModal, useModalInner, useModal } from '/@/components/Modal';
import { FunnelChart } from 'echarts/charts';
import draggable from 'vuedraggable';
import * as echarts from 'echarts/core';
import { useECharts } from '/@/hooks/web/useECharts';
import LineCharts from './LineCharts.vue';
import pieCharts from './pieCharts.vue';
import OrgInfo from './OrgInfo.vue';
import { useRouter } from 'vue-router';
import { BellOutlined, ClockCircleOutlined, CaretRightOutlined, LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';
import DetailModal from '/@/views/monitor/mynews/DetailModal.vue';
import {
getMyTask,
getBaseInfoList,
metricRiskLevelSta,
getPageChartData,
getMtricDataByMtrcNo,
problemStat,
getNoticeList,
updateMyTask,
getPageStatProblemLevel,
} from './api.ts';
const bigAddr = import.meta.env.VITE_APP_BIG_SCREEN_ADDR;
const router = useRouter();
const emit = defineEmits(['detail']);
let isBlank = ref(false);
const loading = ref(true);
const lineMultiData = ref<{ name: string; type: ''; value: string }[]>([]);
echarts.use([FunnelChart]);
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions: setLineOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
const chartRefProblem = ref<HTMLDivElement | null>(null);
const { setOptions: setOptionsProblem } = useECharts(chartRefProblem as Ref<HTMLDivElement>);
const props = defineProps({
data: { require: true, type: Object },
width: {
type: String as PropType<string>,
default: '100%',
},
height: {
type: String as PropType<string>,
default: '70vh',
},
loading: {
type: Boolean,
default: false,
},
});
const [registerDetail, { openModal: openDetailModal }] = useModal();
function showDetailModal(record) {
openDetailModal(true, { record: unref(record), isUpdate: true });
}
let levelNameObj = {
'0001': '不严重',
'0002': '较严重',
'0003': '严重',
'0004': '非常严重',
};
//通知公告
const noticeList = ref([]);
getNoticeList({ column: 'createTime', order: 'desc', pageNo: 1, pageSize: 5 }).then((res) => {
if (res && res.length > 0) {
noticeList.value = res;
}
});
const myTaskDatas = ref([]);
getMyTask({}).then((res) => {
if (res && res.length > 0) {
myTaskDatas.value = res;
}
});
const jcdatat = ref<{ name: string; value: Number }[]>([]);
getPageStatProblemLevel().then((rep) => {
for (let key in levelNameObj) {
let item = rep.find((item) => item.riskLevel === key);
if (item) {
jcdatat.value.push({
name: levelNameObj[key],
value: Number(item.cnt),
});
} else {
jcdatat.value.push({
name: levelNameObj[key],
value: 0,
});
}
}
setPie(jcdatat);
});
//风险评估饼图
function setPie(jcdatat) {
watch(
() => props.loading,
() => {
if (props.loading) {
return;
}
setLineOptions({
tooltip: {
trigger: 'item',
formatter: '{b} : {c} ({d}%)',
},
legend: {
bottom: '-5',
left: 'center',
},
calculable: true,
series: [
{
color: ['green', 'yellow', 'Orange', 'red'],
//color: ['#1890ff', '#08d4c3', '#ffd007', '#4162f0'],
name: '风险监测',
type: 'pie',
radius: ['40%', '75%'],
avoidLabelOverlap: true,
// minShowLabelAngle: 50,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2,
},
label: {
formatter: '{b} \n\n',
padding: [0, -55],
alignTo: 'labelLine',
fontSize: 16,
},
labelLine: {
length: 20, // 引导线起点到文字的距离
length2: 40, // 引导线终点到饼图边缘的距离
// smooth: true, // 弯曲程度
lineStyle: {
color: '#808080',
},
},
emphasis: {
label: {
show: true,
fontSize: '18',
fontWeight: 'bold',
},
},
data: jcdatat,
},
],
});
},
{ immediate: true }
);
}
function goNoticePage() {
router.push({ path: '/system/notice' });
}
function goTaskPage() {
router.push({ path: '/my/myTaskList' });
}
async function goMyTask(item) {
item['sta'] = 1;
await updateMyTask(item);
router.push({ path: item.linkAddr, query: { targetId: item.targetId } });
}
// 拖拽模块顺序
const moduleList = ref([
{ name: '风险评估', key: 'risk' },
{ name: '问题整改', key: 'problem' },
{ name: '风险监测', key: 'monitor' },
]);
</script>
<style scoped>
:deep(.slick-slide) {
text-align: center;
background: #ffffff;
overflow: hidden;
}
:deep(.slick-slide h3) {
color: #1789f5;
}
:deep(.slick-arrow.custom-slick-arrow) {
width: 60px;
height: 60px;
font-size: 60px;
color: #f2f8fb;
background-color: #fff;
transition: ease all 0.3s;
opacity: 1;
z-index: 1;
}
:deep(.slick-arrow.custom-slick-arrow:before) {
display: none;
}
:deep(.slick-arrow.custom-slick-arrow:hover) {
color: #808080;
opacity: 0.5;
}
.page-container {
display: flex;
flex-direction: column;
background-color: #fff;
padding: 0px auto;
margin: 0px auto;
width: 100%;
height: calc(80vh - 10px);
}
.card-container {
display: flex;
flex: 1;
padding: 0 200px;
background-color: #fff;
}
.top-container {
margin: 25px 0;
height: 300px;
line-height: 40px;
background-color: #fff;
border: 1px dotted #7d7d7d;
}
.tab-container {
flex: 1;
background-color: #fff;
margin-bottom: 5px;
}
.blank {
text-align: center;
font-size: 20px;
line-height: 300px;
}
.leftbox {
width: 50%;
}
.rightbox {
width: 50%;
}
.topbox {
padding: 0 30px;
text-align: left;
color: #808080;
}
.toptitle {
font-size: 30px;
font-weight: 200;
padding: 25px 0;
border-bottom: 1px solid;
}
.todolist {
padding: 0px 10px;
font-size: 18px;
color: #757575;
}
.infolist {
padding: 20px;
font-size: 18px;
color: #757575;
}
.ellipsis {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.institution {
background-color: #fff;
}
.line-title {
text-align: center;
font-size: 30px;
color: #808080;
width: 30%;
margin: 30px auto;
position: relative;
}
.line-title:before {
content: '';
position: absolute;
width: 25%; /*横线长度 */
height: 1px;
top: 50%;
background: #1789f5;
left: 0;
}
.line-title:after {
content: '';
position: absolute;
width: 25%;
height: 1px;
top: 50%;
background: #1789f5;
right: 0%;
}
.ins-detail {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
color: #808080;
padding: 0 300px;
}
.ins-item {
width: calc(90% / 4);
padding: 30px;
text-align: center;
}
.ins-item:nth-of-type(4n + 0) {
margin-right: 0;
}
.icon {
width: 120px;
height: 120px;
margin: 0 auto;
border-radius: 50%;
background-color: #f2f8fb;
background-repeat: no-repeat;
background-position: center;
}
.number {
font-family: 'PlayfairDisplay';
font-size: 40px;
}
.unit {
font-size: 20px;
}
.unit-title {
margin-top: 5px;
font-size: 20px;
font-weight: 500;
}
.risk {
background-color: #fff;
color: #808080;
}
.riskbox {
display: flex;
padding: 0 100px 0 300px;
background-color: #f1f2f5;
}
.risk-data {
width: 60%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 100px 0;
}
.risk-num {
width: calc(90% / 2);
padding: 20px 0 30px 0;
margin-bottom: 30px;
border: 3px dotted #1789f5;
text-align: center;
}
.rnum {
font-size: 60px;
font-family: 'PlayfairDisplay';
}
.runit {
font-size: 20px;
}
.pie {
padding: 50px 30px;
}
.problemPie {
margin: 0 auto;
padding: 50px 200px;
text-align: center;
background-color: #f1f2f5;
}
.monitor {
background-color: #fff;
color: #808080;
}
.monitorLine {
background-color: #fff;
padding: 0 200px;
}
.float-button {
position: fixed; /* 固定定位 */
top: 120px; /* 距离顶部 120px */
right: 20px; /* 距离右侧 20px */
width: 55px; /* 按钮宽度 */
height: 55px; /* 按钮高度 */
border: none; /* 去掉边框 */
border-radius: 50%; /* 圆形按钮 */
background-color: #fff; /* 背景颜色 */
color: #1890ff; /* 文字颜色 */
font-size: 14px; /* 文字大小 */
cursor: pointer; /* 鼠标指针样式 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影 */
transition: background-color 0.3s, transform 0.3s; /* 添加过渡效果 */
}
/* 鼠标悬停效果 */
.float-button:hover {
color: rgba(59, 130, 246, 0.5);
transform: scale(1.1); /* 按钮放大 */
}
/* 按钮点击效果 */
.float-button:active {
transform: scale(0.9); /* 按钮缩小 */
}
/* 新增拖拽相关样式 */
.drag-container {
display: flex;
flex-direction: column;
gap: 20px;
margin: 20px 0;
}
.drag-item {
position: relative;
border: 1px solid #eee;
border-radius: 8px;
transition: transform 0.3s ease;
background: white;
}
.drag-handle {
position: absolute;
top: 10px;
right: 10px;
padding: 5px 10px;
cursor: move;
color: #999;
font-size: 18px;
z-index: 10;
}
.drag-item:hover {
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* 调整模块间距 */
.risk,
.problem,
.monitor {
margin: 15px 0;
}
</style>
......@@ -46,7 +46,7 @@
</div>
</div>
<!-- 机构概况和科技概况 -->
<OrgInfo />
<OrgInfo/>
<!-- 风险评估 -->
<div class="risk">
......@@ -73,9 +73,7 @@
<div class="monitorLine">
<LineCharts />
</div>
</div> -->
</div>
<DetailModal @register="registerDetail" />
......
......@@ -7,15 +7,21 @@ export const columns: BasicColumn[] = [
title: '问题编号',
align: 'center',
dataIndex: 'problemNo',
resizable: true,
ifShow: true,
width: 100,
sorter: true,
},
{
title: '项目分类',
align: 'center',
dataIndex: 'projectCategory',
resizable: true,
width: 120,
width: 100,
sorter: true,
customRender: ({ text }) => {
return render.renderDict(text, 'project_category');
},
},
{
title: '问题来源',
......@@ -28,22 +34,28 @@ export const columns: BasicColumn[] = [
title: '所属领域',
align: 'center',
dataIndex: 'domain',
width: 120,
width: 150,
resizable: true,
customRender: ({ text }) => {
return render.renderDict(text, 'rate_domain');
},
sorter: true,
},
{
title: '问题描述',
align: 'center',
dataIndex: 'problemDes',
resizable: true,
ifShow: false,
ifShow: true,
},
{
title: '严重程度',
title: '风险等级',
align: 'center',
dataIndex: 'severity',
dataIndex: 'riskLevel',
width: 100,
resizable: true,
customRender: ({ text }) => {
return render.renderDict(text, 'severity');
return render.renderDict(text, 'risk_level');
},
},
{
......@@ -51,9 +63,11 @@ export const columns: BasicColumn[] = [
align: 'center',
dataIndex: 'bpmStatus',
width: 100,
resizable: true,
customRender: ({ text }) => {
return render.renderDict(text, 'bpm_status');
},
sorter: true,
},
];
//查询数据
......@@ -104,7 +118,11 @@ export const formSchema: FormSchema[] = [
label: '问题编号',
field: 'problemNo',
component: 'Input',
// required: true,
required: true,
componentProps: {
showCount: true,
maxlength: 10,
},
},
{
label: '项目分类',
......@@ -113,19 +131,27 @@ export const formSchema: FormSchema[] = [
componentProps: {
dictCode: 'project_category',
},
// required: true,
required: true,
},
{
label: '问题发现方',
field: 'findUserId',
field: 'findUser',
component: 'Input',
// required: true,
required: true,
componentProps: {
showCount: true,
maxlength: 32,
},
},
{
label: '问题来源',
field: 'problemSource',
component: 'Input',
// required: true,
required: true,
componentProps: {
showCount: true,
maxlength: 64,
},
},
{
label: '所属领域',
......@@ -134,35 +160,35 @@ export const formSchema: FormSchema[] = [
componentProps: {
dictCode: 'rate_domain',
},
// required: true,
required: true,
},
{
label: '严重程度',
field: 'severity',
component: 'JSearchSelect',
// required: true,
required: true,
componentProps: {
dict: 'severity',
},
colProps: { lg: 24 },
},
{
label: '风险等级',
field: 'riskLevel',
component: 'JSearchSelect',
// required: true,
required: true,
componentProps: {
dict: 'risk_level',
},
colProps: { lg: 24 },
},
{
label: '问题描述',
field: 'problemDes',
component: 'InputTextArea',
// required: true,
required: true,
componentProps: {
rows: 3,
rows: 4,
showCount: true,
maxlength: 3000,
},
},
{
......@@ -187,7 +213,7 @@ export const planFormSchema: FormSchema[] = [
componentProps: {
rows: 3,
},
// required: true,
required: true,
},
{
label: '整改方案',
......
......@@ -12,7 +12,7 @@
<!--插槽:table标题-->
<template #tableTitle>
<a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
<a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出1</a-button>
<a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
<j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>
<a-dropdown v-if="selectedRowKeys.length > 0">
<template #overlay>
......@@ -104,7 +104,7 @@
params['bpmStatus'] = tabStatusMap[activeTab.value];
},
actionColumn: {
width: 400,
width: 200,
fixed: 'right',
},
},
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论