本地接口对接
This commit is contained in:
王兴凯
parent
a43b35b5a8
commit
17e688e8ef
@ -1,7 +1,7 @@
|
||||
import request from '@/utils/request';
|
||||
export function getKendoListCust(data: any) {
|
||||
return request({
|
||||
url: '/api/wmp-env-server/sw/alongList/qgc/GetKendoListCust',
|
||||
url: '/wt/alongList/qgc/GetKendoListCust',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
@ -9,7 +9,7 @@ export function getKendoListCust(data: any) {
|
||||
//获取水温下拉框
|
||||
export function wbsbGetKendoList(data: any) {
|
||||
return request({
|
||||
url: '/api/dec-lygk-base-server/base/wbsb/GetKendoList',
|
||||
url: '/wt/wbsb/GetKendoList',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
@ -21,7 +21,7 @@ export function wbsbGetKendoList(data: any) {
|
||||
*/
|
||||
export function getChuiXiangShuiWenTreeStcd(data: any) {
|
||||
return request({
|
||||
url: '/api/wmp-env-server/base/sdrvwts/default/treeStcd',
|
||||
url: '/wt/sdrvwts/default/treeStcd',
|
||||
method: 'post',
|
||||
data,
|
||||
});
|
||||
@ -34,7 +34,7 @@ export function getChuiXiangShuiWenTreeStcd(data: any) {
|
||||
*/
|
||||
export function getCxswList(data: any) {
|
||||
return request({
|
||||
url: '/api/wmp-env-server/sw/dzCxList/GetKendoListCust',
|
||||
url: '/wt/dzCxList/GetKendoListCust',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
@ -42,7 +42,7 @@ export function getCxswList(data: any) {
|
||||
//获取出入库水温下拉选则树
|
||||
export function getVmsstbprpt(data: any) {
|
||||
return request({
|
||||
url: '/api/dec-lygk-base-server/base/vmsstbprpt/GetKendoList',
|
||||
url: '/wt/vmsstbprpt/GetKendoList',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
@ -51,7 +51,7 @@ export function getVmsstbprpt(data: any) {
|
||||
//
|
||||
export function inOutOneGetKendoListCust(data: any) {
|
||||
return request({
|
||||
url: '/api/wmp-env-server/sw/inOutOne/GetKendoListCust',
|
||||
url: '/wt/inOutOne/GetKendoListCust',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
@ -59,7 +59,7 @@ export function inOutOneGetKendoListCust(data: any) {
|
||||
//水温监测工作开展情况
|
||||
export function baseEvnmAutoMonitorGetKendoListCust(data: any) {
|
||||
return request({
|
||||
url: '/api/dec-lygk-base-server/base/evnmAutoMonitor/GetKendoListCust',
|
||||
url: '/wt/evnmAutoMonitor/GetKendoListCust',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
@ -67,7 +67,7 @@ export function baseEvnmAutoMonitorGetKendoListCust(data: any) {
|
||||
////水温监测工作开展情况弹框
|
||||
export function vmsstbprptGetKendoList(data: any) {
|
||||
return request({
|
||||
url: '/api/dec-lygk-base-server/base/vmsstbprpt/GetKendoList',
|
||||
url: '/wt/vmsstbprpt/GetKendoList',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
@ -75,7 +75,7 @@ export function vmsstbprptGetKendoList(data: any) {
|
||||
//出入库水温打开弹框api/wmp-env-server/sw/inOutOne/details
|
||||
export function inOutOneDetails(data: any) {
|
||||
return request({
|
||||
url: '/api/wmp-env-server/sw/inOutOne/details',
|
||||
url: '/wt/inOutOne/details',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
@ -83,7 +83,7 @@ export function inOutOneDetails(data: any) {
|
||||
//鱼类适宜性分析 - select
|
||||
export function infoGetKendoListCust(data: any) {
|
||||
return request({
|
||||
url: '/api/wmp-env-server/sw/wtrv/fish/info/GetKendoListCust',
|
||||
url: '/wt/wtrv/fish/info/GetKendoListCust',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
@ -91,7 +91,7 @@ export function infoGetKendoListCust(data: any) {
|
||||
//鱼类适宜性分析-图表和table
|
||||
export function fishGetKendoListCust(data: any) {
|
||||
return request({
|
||||
url: '/api/wmp-env-server/sw/wtrv/fish/GetKendoListCust',
|
||||
url: '/wt/wtrv/fish/GetKendoListCust',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
@ -99,7 +99,7 @@ export function fishGetKendoListCust(data: any) {
|
||||
//月平均水温历史对比
|
||||
export function avgMonGetKendoListCust(data: any) {
|
||||
return request({
|
||||
url: '/api/wmp-env-server/sw/monthList/avgMon/GetKendoListCust',
|
||||
url: '/wt/monthList/avgMon/GetKendoListCust',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
@ -107,7 +107,7 @@ export function avgMonGetKendoListCust(data: any) {
|
||||
//水温年内分布
|
||||
export function yearListGetKendoListCust(data: any) {
|
||||
return request({
|
||||
url: '/api/wmp-env-server/sw/yearList/GetKendoListCust',
|
||||
url: '/wt/yearList/GetKendoListCust',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
@ -115,7 +115,7 @@ export function yearListGetKendoListCust(data: any) {
|
||||
//设施类型介绍
|
||||
export function sttpbGetKendoList(data: any) {
|
||||
return request({
|
||||
url: '/api/dec-lygk-base-server/base/sttpb/GetKendoList',
|
||||
url: '/wt/sttpb/GetKendoList',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
@ -123,7 +123,7 @@ export function sttpbGetKendoList(data: any) {
|
||||
//设施类型及接入情况
|
||||
export function dwInfoGetKendoListCust(data: any) {
|
||||
return request({
|
||||
url: '/api/dec-lygk-base-server/base/dwInfo/GetKendoListCust',
|
||||
url: '/wt/dwInfo/GetKendoListCust',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
@ -131,7 +131,7 @@ export function dwInfoGetKendoListCust(data: any) {
|
||||
//月均水温对比，图表，表格 /api/wmp-env-server/sw/monthDetail/Det/GetKendoListCust
|
||||
export function DetGetKendoListCust(data: any) {
|
||||
return request({
|
||||
url: '/api/wmp-env-server/sw/monthDetail/Det/GetKendoListCust',
|
||||
url: '/wt/monthDetail/Det/GetKendoListCust',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
@ -139,7 +139,7 @@ export function DetGetKendoListCust(data: any) {
|
||||
//水温年内分布
|
||||
export function yearDetailGetKendoListCust(data: any) {
|
||||
return request({
|
||||
url: '/api/wmp-env-server/sw/yearDetail/GetKendoListCust',
|
||||
url: '/wt/yearDetail/GetKendoListCust',
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
@ -147,7 +147,7 @@ export function yearDetailGetKendoListCust(data: any) {
|
||||
//获取建设状态
|
||||
export function dictgetRemoteDictValue(data: any) {
|
||||
return request({
|
||||
url: '/api/dec-modules-usm-springcloud-starter/usm/v1/dict/getRemoteDictValue',
|
||||
url: '/wt/usm/v1/dict/getRemoteDictValue',
|
||||
method: 'get',
|
||||
params: data
|
||||
});
|
||||
|
||||
@ -42,7 +42,7 @@
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<div v-if="isLogo">
|
||||
<div v-if="isLogo" class="img_box_one">
|
||||
<div class="img_box">
|
||||
<div class="img_box_img">
|
||||
<a-image style="width: 100%;" :src="baseUrl + '/?' + data2.msStbprpT.logo" />
|
||||
@ -184,7 +184,7 @@ const getData = async () => {
|
||||
if (res.success) {
|
||||
let data = res.data
|
||||
data2.value = data
|
||||
// debugger
|
||||
|
||||
let columns = [];
|
||||
columns = columnsConfig.value.find((item) => item.type == modelStore.params.sttp)
|
||||
.columns;
|
||||
@ -252,7 +252,7 @@ const getData = async () => {
|
||||
} else {
|
||||
isLogo.value = false
|
||||
}
|
||||
// debugger
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@ -277,7 +277,10 @@ onMounted(() => {
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.img_box_one{
|
||||
width: 40%;
|
||||
// height: 80%;
|
||||
}
|
||||
.img_box {
|
||||
// width: 20%;
|
||||
padding: 12px;
|
||||
|
||||
@ -24,7 +24,16 @@
|
||||
<div class="echarts" ref="chartRef"></div>
|
||||
<div class="table">
|
||||
<BasicTable ref="tableRef" :scrollY="460" :columns="columns" :list-url="fishGetKendoListCust"
|
||||
:search-params="{}" :transform-data="customTransform" />
|
||||
:search-params="{}" :transform-data="customTransform">
|
||||
<!-- 同期对比列的自定义渲染 -->
|
||||
<template #contrast="{ record }">
|
||||
<span v-if="record.wt && record.beforeWt"
|
||||
:style="{ color: (record.wt - record.beforeWt) > 0 ? 'rgb(255, 85, 0)' : 'rgb(135, 208, 104)' }">
|
||||
{{ (record.wt - record.beforeWt) > 0 ? '+' : '' }}{{ (record.wt - record.beforeWt).toFixed(2) }}
|
||||
</span>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -65,14 +74,7 @@ const columns = [
|
||||
title: '同期对比',
|
||||
dataIndex: 'contrast',
|
||||
width: 120,
|
||||
customRender: ({ record }: any) => {
|
||||
if (record.wt && record.beforeWt) {
|
||||
const diff = (record.wt - record.beforeWt).toFixed(2);
|
||||
const diffNum = record.wt - record.beforeWt;
|
||||
return (diffNum > 0) ? `+${diff}` : diff;
|
||||
}
|
||||
return '-';
|
||||
}
|
||||
slots: { customRender: 'contrast' }
|
||||
},
|
||||
{
|
||||
title: '适宜产卵鱼',
|
||||
@ -146,7 +148,8 @@ const getSelectOption = async () => {
|
||||
pretemp: item.pretemp,
|
||||
}
|
||||
})
|
||||
selectValue.value = data.map(item => item.id)
|
||||
// 根据数据长度智能选择ID：2个及以上取前2个，少于2个取第1个
|
||||
selectValue.value = data.length >= 2 ? data.slice(0, 2).map(item => item.id) : (data.length > 0 ? [data[0].id] : [])
|
||||
}
|
||||
//echarts 数据获取
|
||||
const getEchartsData = async () => {
|
||||
@ -240,9 +243,9 @@ const processChartData = (rawData: any[]) => {
|
||||
|
||||
// 过滤掉 wt 或 beforeWt 为 null 的记录
|
||||
const filtered = rawData.filter(item =>
|
||||
item.wt !== null && item.wt !== undefined &&
|
||||
item.beforeWt !== null && item.beforeWt !== undefined
|
||||
item.wt !== null && item.wt !== undefined
|
||||
);
|
||||
// && item.beforeWt !== null && item.beforeWt !== undefined
|
||||
|
||||
// 按 dt 升序排序
|
||||
return filtered.sort((a, b) =>
|
||||
@ -430,7 +433,7 @@ const getChartOption = computed(() => {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
interval: Math.ceil(xAxisData.length / 7),
|
||||
interval: xAxisData.length > 7 ? Math.floor((xAxisData.length - 1) / 7) : 0,
|
||||
fontSize: 12,
|
||||
rotate: 0,
|
||||
margin: 10
|
||||
|
||||
@ -8,7 +8,8 @@
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-track" :style="trackStyle">
|
||||
<div v-for="(item, index) in originalMediaData" :key="index" class="carousel-item">
|
||||
<img :src="item.image" :alt="item.title" />
|
||||
<a-image :src="item.url" />
|
||||
<!-- <img :src="item.url" :alt="item.title" /> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -24,12 +25,14 @@
|
||||
</div>
|
||||
<div style="width: 100%;display: flex;justify-content: center;">
|
||||
<div class="card_button">
|
||||
<LeftOutlined @click="prevSlide" />
|
||||
<LeftOutlined @click="prevSlide" :class="{ 'disabled': currentIndex === 0 }"
|
||||
:style="{ cursor: currentIndex === 0 ? 'not-allowed' : 'pointer' }" />
|
||||
<div class="pagination-dots">
|
||||
<span v-for="(item, index) in originalMediaData" :key="index" class="dot-item"
|
||||
:class="{ 'active': currentIndex === index }" @click="jumpToSlide(index)" />
|
||||
</div>
|
||||
<RightOutlined @click="nextSlide" />
|
||||
<RightOutlined @click="nextSlide" :class="{ 'disabled': currentIndex === originalMediaData.length - 1 }"
|
||||
:style="{ cursor: currentIndex === originalMediaData.length - 1 ? 'not-allowed' : 'pointer' }" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -47,14 +50,15 @@ const props = defineProps<{
|
||||
dataSource: Array<{
|
||||
title: string;
|
||||
description: string;
|
||||
image: string;
|
||||
url: string;
|
||||
}>;
|
||||
index:any
|
||||
}>();
|
||||
|
||||
interface MediaItem {
|
||||
title: string;
|
||||
description: string;
|
||||
image: string;
|
||||
url: string;
|
||||
}
|
||||
|
||||
const originalMediaData = ref<MediaItem[]>([]);
|
||||
@ -66,11 +70,21 @@ const initOriginalData = () => {
|
||||
originalMediaData.value = props.dataSource.map(item => ({
|
||||
title: item.title,
|
||||
description: item.description,
|
||||
image: item.image
|
||||
url: item.url
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
// 根据 index prop 设置当前索引
|
||||
const setCurrentIndexFromProps = () => {
|
||||
if (props.index !== undefined && props.index !== null && originalMediaData.value.length > 0) {
|
||||
const validIndex = Math.max(0, Math.min(props.index, originalMediaData.value.length - 1));
|
||||
currentIndex.value = validIndex;
|
||||
} else {
|
||||
currentIndex.value = 0;
|
||||
}
|
||||
};
|
||||
|
||||
// 计算轨道样式 - 完全按照 React 版本的逻辑
|
||||
const trackStyle = computed(() => {
|
||||
return {
|
||||
@ -104,16 +118,21 @@ const currentDescription = computed(() => {
|
||||
|
||||
// 页面加载时执行
|
||||
onMounted(() => {
|
||||
console.log('ArtsDetail mounted - props.index:', props.index, 'props.dataSource.length:', props.dataSource?.length);
|
||||
initOriginalData();
|
||||
setCurrentIndexFromProps();
|
||||
console.log('After setCurrentIndexFromProps - currentIndex.value:', currentIndex.value);
|
||||
});
|
||||
|
||||
// 监听 dataSource 变化
|
||||
// 只监听 dataSource 变化，不监听 index 变化
|
||||
watch(
|
||||
() => props.dataSource,
|
||||
(newData) => {
|
||||
if (newData && newData.length > 0) {
|
||||
currentIndex.value = 0;
|
||||
// 数据更新时重新初始化
|
||||
initOriginalData();
|
||||
// 重置索引为 0 或根据当前 props.index 设置
|
||||
setCurrentIndexFromProps();
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
@ -255,14 +274,14 @@ watch(
|
||||
color: #6c8cf7;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover:not([disabled]) {
|
||||
&:hover:not(.disabled) {
|
||||
color: #4a6fd4;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
&.disabled {
|
||||
color: #d9d9d9;
|
||||
cursor: not-allowed;
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -644,8 +644,6 @@ const handleModalClose = () => {
|
||||
* @param data - 包含moreSelect(下拉框值)和datetime(日期范围)的对象
|
||||
*/
|
||||
const handlePanelChange1 = (data: any) => {
|
||||
// console.log('当前所有控件状态:', data);
|
||||
// debugger
|
||||
// TODO: 后续可扩展联动逻辑
|
||||
if (data.moreSelect) {
|
||||
paramsOne.value.value = data.moreSelect;
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
|
||||
<a-form-item>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleSearch">查询</a-button>
|
||||
<a-button type="primary" @click="handleSearchOne">查询</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
@ -73,6 +73,7 @@ import { message } from 'ant-design-vue'
|
||||
import BasicTable from '@/components/BasicTable/index.vue'
|
||||
// import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent'
|
||||
import { dictgetRemoteDictValue, dwInfoGetKendoListCust, vmsstbprptGetKendoList } from '@/api/sw'
|
||||
import { getDictItemsByCode } from "@/api/dict";
|
||||
import { useModelStore } from "@/store/modules/model";
|
||||
|
||||
const modelStore = useModelStore();
|
||||
@ -166,7 +167,20 @@ const columns = [
|
||||
title: '接入日期',
|
||||
dataIndex: 'dtinTm',
|
||||
key: 'dtinTm',
|
||||
width: 120
|
||||
width: 120,
|
||||
customRender: ({ record }: any) => {
|
||||
const date = record.dtinTm
|
||||
if (!date) return '-'
|
||||
// 如果已经是 YYYY-MM-DD 格式，直接返回
|
||||
if (typeof date === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(date)) {
|
||||
return date
|
||||
}
|
||||
// 如果是完整时间戳，截取日期部分
|
||||
if (typeof date === 'string' && date.includes(' ')) {
|
||||
return date.split(' ')[0]
|
||||
}
|
||||
return date
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '建设状态',
|
||||
@ -178,13 +192,39 @@ const columns = [
|
||||
title: '开工日期',
|
||||
dataIndex: 'ststdt',
|
||||
key: 'ststdt',
|
||||
width: 120
|
||||
width: 120,
|
||||
customRender: ({ record }: any) => {
|
||||
const date = record.ststdt
|
||||
if (!date) return '-'
|
||||
// 如果已经是 YYYY-MM-DD 格式，直接返回
|
||||
if (typeof date === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(date)) {
|
||||
return date
|
||||
}
|
||||
// 如果是完整时间戳，截取日期部分
|
||||
if (typeof date === 'string' && date.includes(' ')) {
|
||||
return date.split(' ')[0]
|
||||
}
|
||||
return date
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '建成日期',
|
||||
dataIndex: 'jcdt',
|
||||
key: 'jcdt',
|
||||
width: 120
|
||||
width: 120,
|
||||
customRender: ({ record }: any) => {
|
||||
const date = record.jcdt
|
||||
if (!date) return '-'
|
||||
// 如果已经是 YYYY-MM-DD 格式，直接返回
|
||||
if (typeof date === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(date)) {
|
||||
return date
|
||||
}
|
||||
// 如果是完整时间戳，截取日期部分
|
||||
if (typeof date === 'string' && date.includes(' ')) {
|
||||
return date.split(' ')[0]
|
||||
}
|
||||
return date
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '所在河段',
|
||||
@ -283,12 +323,13 @@ const fetchBuildStateList = async () => {
|
||||
try {
|
||||
buildStateLoading.value = true
|
||||
// TODO: 调用API获取建设状态字典数据
|
||||
const res = await dictgetRemoteDictValue({ dictCode: 'BLDSTT3T' })
|
||||
//getDictItemsByCode({ dictCode: "caoType" })
|
||||
const res = await getDictItemsByCode({ dictCode: 'BLDSTT3T' })
|
||||
buildStateList.value = res.data.map((item: any) => ({
|
||||
label: item.dictMeaning,
|
||||
value: item.dictValue
|
||||
label: item.dictName,
|
||||
value: item.itemCode
|
||||
}))
|
||||
buildStateList.value.push({ label: '全部', value: '' })
|
||||
buildStateList.value.unshift({ label: '全部', value: '' })
|
||||
// 临时模拟数据（实际使用时删除）
|
||||
// buildStateList.value = [
|
||||
// { label: '全部', value: '' },
|
||||
@ -306,8 +347,8 @@ const fetchBuildStateList = async () => {
|
||||
// 基地变化处理
|
||||
const handleBaseChange = async () => {
|
||||
formState.stnm = ''
|
||||
await fetchFacilityStats()
|
||||
handleSearch()
|
||||
// await fetchFacilityStats()
|
||||
// handleSearch()
|
||||
}
|
||||
|
||||
// Tab切换处理
|
||||
@ -318,7 +359,10 @@ const handleTabChange = (key: string) => {
|
||||
handleSearch()
|
||||
})
|
||||
}
|
||||
|
||||
const handleSearchOne = async () => {
|
||||
await fetchFacilityStats()
|
||||
handleSearch()
|
||||
}
|
||||
// 搜索处理
|
||||
const handleSearch = () => {
|
||||
|
||||
@ -339,7 +383,7 @@ const handleSearch = () => {
|
||||
"field": "baseId",
|
||||
"operator": "eq",
|
||||
"dataType": "string",
|
||||
"value": "01"
|
||||
"value": formState.dataDimensionVal
|
||||
} : null,
|
||||
formState.hydrodtin ? {
|
||||
"field": "dtin",
|
||||
@ -429,8 +473,8 @@ const handleViewDetail = (record: any, type: string) => {
|
||||
watch(
|
||||
() => [formState.dataDimensionVal, formState.hydrodtin, formState.bldstt],
|
||||
async () => {
|
||||
await fetchFacilityStats()
|
||||
handleSearch()
|
||||
// await fetchFacilityStats()
|
||||
// handleSearch()
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
@ -38,7 +38,6 @@ const initText = () => {
|
||||
getBaseWbsb(params).then((res) => {
|
||||
console.log(res);
|
||||
title_text.value = res.data.data[0].introduce;
|
||||
// debugger
|
||||
});
|
||||
};
|
||||
const title_text = ref("");
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -4,6 +4,9 @@
|
||||
@update-values="handlePanelChange1">
|
||||
<a-spin :spinning="loading" tip="加载中...">
|
||||
<div v-show="!loading && showemit" class="water-temp-compare-chart" ref="chartRef"></div>
|
||||
<div v-show="!loading && showemit" class="water_bottom" @click="handleChartZoomIn">
|
||||
<ZoomInOutlined />图表放大展示
|
||||
</div>
|
||||
<div v-show="!loading && !showemit" class="water-temp-compare-chart">
|
||||
<a-empty description="暂无数据" />
|
||||
</div>
|
||||
@ -11,24 +14,19 @@
|
||||
</SidePanelItem>
|
||||
|
||||
<!-- 数据点详情弹框 -->
|
||||
<a-modal
|
||||
v-model:open="modalVisible"
|
||||
:title="'月均水温对比'"
|
||||
width="1536px"
|
||||
:footer="null"
|
||||
@cancel="handleModalClose"
|
||||
>
|
||||
<a-modal v-model:open="modalVisible" :title="'月均水温对比'" width="1536px" :footer="null" @cancel="handleModalClose">
|
||||
|
||||
<div v-if="modalData" class="modal-content">
|
||||
<MonthlyAverage
|
||||
:tm="modalData.date ? moment(modalData.date).format('YYYY-MM') + '-01 00:00:00' : moment().format('YYYY-MM') + '-01 23:59:59'"
|
||||
:dataDimensionVal="modalData.baseid"
|
||||
:rvcd='modalData.rvcd'
|
||||
:stcd="modalData.stcd"
|
||||
:jdList="jiDiList"
|
||||
/>
|
||||
:dataDimensionVal="modalData.baseid" :rvcd='modalData.rvcd' :stcd="modalData.stcd" :jdList="jiDiList" />
|
||||
</div>
|
||||
</a-modal>
|
||||
|
||||
<!-- 图表放大展示弹框 -->
|
||||
<a-modal v-model:open="zoomModalVisible" title="月平均水温历史对比" width="1536px" :footer="null" @cancel="handleZoomModalClose">
|
||||
<MonthlyAverageMaxModal v-model="searchParams" :visible="zoomModalVisible" />
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -38,7 +36,11 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
|
||||
import { wbsbGetKendoList, avgMonGetKendoListCust } from "@/api/sw";
|
||||
import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
|
||||
import MonthlyAverage from './monthlyAverage.vue'
|
||||
import MonthlyAverageMaxModal from './TwoLayers/monthlyAverageMaxModal.vue'
|
||||
import moment from 'moment'
|
||||
import {
|
||||
ZoomInOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
defineOptions({
|
||||
name: 'monthlyAvgWaterTemCompareHistory'
|
||||
@ -47,7 +49,10 @@ defineOptions({
|
||||
const JidiSelectEventStore = useJidiSelectEventStore();
|
||||
const chartRef = ref<HTMLElement | null>(null)
|
||||
let chartInstance: echarts.ECharts | null = null
|
||||
|
||||
const searchParams = ref({
|
||||
selectValue: '',
|
||||
dateValue: '' // 可以是 string 或 Dayjs 对象
|
||||
});
|
||||
const unit = '°C'
|
||||
const baseid: any = ref(null);
|
||||
const loading = ref(false);
|
||||
@ -58,6 +63,9 @@ const modalVisible = ref(false);
|
||||
const modalData = ref<any>(null);
|
||||
const stationName = ref('');
|
||||
|
||||
// 图表放大展示弹框状态
|
||||
const zoomModalVisible = ref(false);
|
||||
|
||||
// 基地列表
|
||||
const jiDiList: any = ref([
|
||||
{
|
||||
@ -342,7 +350,6 @@ const getEchartsData = async () => {
|
||||
let res = await avgMonGetKendoListCust(params)
|
||||
console.log('接口返回数据:', res)
|
||||
let data = res?.data?.data || res?.data || []
|
||||
|
||||
if (data.length === 0) {
|
||||
showemit.value = false
|
||||
return
|
||||
@ -617,13 +624,27 @@ const handleModalClose = () => {
|
||||
stationName.value = '';
|
||||
};
|
||||
|
||||
// 图表放大展示 - 打开弹框
|
||||
const handleChartZoomIn = () => {
|
||||
zoomModalVisible.value = true;
|
||||
};
|
||||
|
||||
// 图表放大展示 - 关闭弹框
|
||||
const handleZoomModalClose = () => {
|
||||
zoomModalVisible.value = false;
|
||||
};
|
||||
|
||||
//监听子组件的数据变化
|
||||
const handlePanelChange1 = (data) => {
|
||||
console.log('当前所有控件状态:', data);
|
||||
|
||||
// 当选择器或日期变化时，重新加载图表数据
|
||||
if (data.moreSelect || data.datetime) {
|
||||
select.value.value = data.moreSelect
|
||||
datetimePicker.value.value = data.datetime
|
||||
getEchartsData()
|
||||
searchParams.value.selectValue = data.moreSelect
|
||||
searchParams.value.dateValue = data.datetime
|
||||
}
|
||||
}
|
||||
|
||||
@ -664,8 +685,17 @@ onBeforeUnmount(() => {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.water_bottom {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
color: #2f6b96;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
:deep(.ant-spin-nested-loading) {
|
||||
height: 260px !important;
|
||||
height: 280px !important;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
|
||||
@ -794,11 +794,11 @@ defineExpose({
|
||||
<style scoped lang="scss">
|
||||
.monthly-average-container {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
/* padding: 16px; */
|
||||
|
||||
.search-form {
|
||||
margin-bottom: 16px;
|
||||
padding: 16px;
|
||||
/* padding: 16px; */
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
}
|
||||
@ -808,7 +808,7 @@ defineExpose({
|
||||
height: 600px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 16px;
|
||||
/* padding: 16px; */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@ -816,7 +816,7 @@ defineExpose({
|
||||
flex: 7;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 16px;
|
||||
/* padding: 16px; */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
@ -1,43 +1,45 @@
|
||||
<!-- SidePanelItem.vue -->
|
||||
<template>
|
||||
<SidePanelItem title="设施类型介绍">
|
||||
<a-spin :spinning="loading">
|
||||
<div v-if="carouselData.length > 0" class="carousel-wrapper">
|
||||
<a-carousel v-model:current="currentIndex" autoplay class="tech-carousel" :dot-style="{ bottom: '0px' }">
|
||||
<!-- -->
|
||||
<div v-for="(item, index) in carouselData" :key="index" class="carousel-item">
|
||||
<div class="image-container" @click="handleItemClick(carouselData)">
|
||||
<img :src="item.image" :alt="item.title" class="carousel-image" />
|
||||
<div class="container" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
|
||||
<!-- 跑马灯轨道容器 -->
|
||||
<div class="carousel-track" :class="{ 'no-transition': isTransitioning }"
|
||||
:style="{ transform: `translateX(-${currentIndex * 100}%)` }">
|
||||
<!-- 遍历所有媒体项（包含克隆项） -->
|
||||
<div v-for="(item, index) in renderMediaData" :key="index" class="carousel-item"
|
||||
@click="handleItemClick(originalMediaData)">
|
||||
<!-- 图片 -->
|
||||
<img v-if="item.url" :src="item.url" alt="" />
|
||||
<!-- 说明文字（随媒体项移动） -->
|
||||
<!-- <div class="text">{{ item.text }}</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</a-carousel>
|
||||
<!-- 文字描述区域 -->
|
||||
<div v-if="carouselData[currentIndex]" class="description-container" @click="handleItemClick(carouselData)">
|
||||
<p class="item-description">{{ carouselData[currentIndex].description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else style="width: 100%;height: 300px;display: flex; align-items: center; justify-content: center;">
|
||||
<a-empty description="暂无数据" />
|
||||
</div>
|
||||
</a-spin>
|
||||
</SidePanelItem>
|
||||
|
||||
<!-- 面板指示器（固定在底部右侧） -->
|
||||
<div class="pagination-dots-fixed">
|
||||
<span v-for="(dot, index) in originalMediaData" :key="index" class="dot"
|
||||
:class="{ active: getCurrentRealIndex() === index }" @click="goToSlide(index)"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 独立的文字说明区域（随跑马灯切换而变化） -->
|
||||
<div class="description-text" @click="handleItemClick(originalMediaData)">
|
||||
{{ currentDescription }}
|
||||
</div>
|
||||
|
||||
</SidePanelItem>
|
||||
<!-- 设施详情弹框 -->
|
||||
<a-modal
|
||||
v-model:open="modalVisible"
|
||||
:title="'设施类型介绍'"
|
||||
width="1536px"
|
||||
:footer="null"
|
||||
>
|
||||
<a-modal v-model:open="modalVisible" :title="'设施类型介绍'" width="1536px" :footer="null">
|
||||
<!-- 你在这里编写弹框内容 -->
|
||||
<div v-if="currentItem">
|
||||
<ArtsDetail :dataSource='currentItem' />
|
||||
<ArtsDetail :dataSource='currentItem' :index="getCurrentRealIndex()" />
|
||||
</div>
|
||||
</a-modal>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ref, onMounted, onUnmounted, computed } from 'vue';
|
||||
import SidePanelItem from '@/components/SidePanelItem/index.vue';
|
||||
import ArtsDetail from '@/components/carouselIntroduce/ArtsDetail.vue';
|
||||
import { sttpbGetKendoList } from "@/api/sw";
|
||||
@ -46,21 +48,106 @@ defineOptions({
|
||||
name: 'diwenshuijianhuansheshileixingzuchengjijieruqingkuang'
|
||||
});
|
||||
|
||||
// 当前轮播索引
|
||||
const currentIndex = ref(0);
|
||||
// 媒体类型定义
|
||||
interface MediaItem {
|
||||
type: 'image' | 'video';
|
||||
url: string;
|
||||
text: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
// 加载状态
|
||||
const loading = ref(false);
|
||||
// 原始媒体数据（3条测试数据）
|
||||
const originalMediaData = ref<MediaItem[]>([
|
||||
|
||||
// 轮播图数据
|
||||
const carouselData = ref<any[]>([]);
|
||||
]);
|
||||
|
||||
// 克隆首尾项后的渲染数组（用于无缝循环）
|
||||
// 结构：[最后一项克隆, 原始数据..., 第一项克隆]
|
||||
const renderMediaData = ref<MediaItem[]>([]);
|
||||
|
||||
// 当前显示索引（指向renderMediaData）
|
||||
const currentIndex = ref(1); // 从1开始，跳过克隆的首项
|
||||
|
||||
// 定时器引用
|
||||
let timer: any = null;
|
||||
|
||||
// 鼠标悬停状态
|
||||
const isHovering = ref(false);
|
||||
|
||||
// 是否正在切换动画中（用于禁用transition）
|
||||
const isTransitioning = ref(false);
|
||||
// 弹框控制
|
||||
const modalVisible = ref(false);
|
||||
const currentItem = ref<any>(null);
|
||||
// 初始化渲染数组（克隆首尾项）
|
||||
const initRenderData = () => {
|
||||
const length = originalMediaData.value.length;
|
||||
if (length === 0) return;
|
||||
|
||||
renderMediaData.value = [
|
||||
originalMediaData.value[length - 1], // 克隆最后一项
|
||||
...originalMediaData.value, // 原始数据
|
||||
originalMediaData.value[0] // 克隆第一项
|
||||
];
|
||||
};
|
||||
|
||||
// 启动自动轮播
|
||||
const startAutoPlay = () => {
|
||||
if (timer) clearInterval(timer);
|
||||
timer = setInterval(() => {
|
||||
if (!isHovering.value && !isTransitioning.value) {
|
||||
nextSlide();
|
||||
}
|
||||
}, 4000);
|
||||
};
|
||||
|
||||
// 切换到下一张
|
||||
const nextSlide = () => {
|
||||
currentIndex.value++;
|
||||
|
||||
// 延迟检查是否需要无缝跳转
|
||||
setTimeout(() => {
|
||||
checkSeamlessJump();
|
||||
}, 500); // 与transition时间一致
|
||||
};
|
||||
|
||||
// 检查是否需要无缝跳转（克隆项处理）
|
||||
const checkSeamlessJump = () => {
|
||||
const realLength = originalMediaData.value.length;
|
||||
|
||||
// 如果到达克隆的最后一项（索引 = realLength + 1）
|
||||
if (currentIndex.value >= realLength + 1) {
|
||||
// 1. 禁用过渡动画，实现瞬间跳转
|
||||
isTransitioning.value = true;
|
||||
|
||||
// 2. 瞬间跳转到真实的第二项（索引1），用户看不到跳变
|
||||
currentIndex.value = 1;
|
||||
|
||||
// 3. 等待两帧后恢复过渡动画（确保DOM已更新）
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
isTransitioning.value = false;
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 处理鼠标进入
|
||||
const handleMouseEnter = () => {
|
||||
isHovering.value = true;
|
||||
};
|
||||
|
||||
// 处理鼠标离开
|
||||
const handleMouseLeave = () => {
|
||||
isHovering.value = false;
|
||||
};
|
||||
|
||||
// 计算当前显示的描述文字
|
||||
const currentDescription = computed(() => {
|
||||
const realIndex = getCurrentRealIndex();
|
||||
return originalMediaData.value[realIndex]?.description || '';
|
||||
});
|
||||
const getListData = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const params = {
|
||||
"filter": {
|
||||
@ -90,118 +177,156 @@ const getListData = async () => {
|
||||
|
||||
// 将接口返回的数据转换为轮播图格式
|
||||
const baseUrl = import.meta.env.VITE_APP_PREVIEW_URL;
|
||||
carouselData.value = data.map((item: any) => ({
|
||||
title: item.sttpName,
|
||||
originalMediaData.value = data.map((item: any) => ({
|
||||
text: item.sttpName,
|
||||
description: item.introduce,
|
||||
image: item.logo ? `${baseUrl}/?${item.logo}` : ''
|
||||
url: item.logo ? `${baseUrl}/?${item.logo}` : ''
|
||||
}));
|
||||
console.log(originalMediaData.value);
|
||||
} catch (error) {
|
||||
console.error('获取设施类型数据失败:', error);
|
||||
carouselData.value = [];
|
||||
|
||||
originalMediaData.value = [];
|
||||
} finally {
|
||||
loading.value = false;
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
// 处理项目点击事件
|
||||
const handleItemClick = (item: any) => {
|
||||
console.log('轮播图项目被点击:', item);
|
||||
console.log('轮播图项目被点击:', item,getCurrentRealIndex());
|
||||
currentItem.value = item;
|
||||
modalVisible.value = true;
|
||||
};
|
||||
|
||||
// 页面加载时执行的逻辑
|
||||
onMounted(() => {
|
||||
// 可以在这里加载实际的图片数据
|
||||
getListData()
|
||||
// 页面加载时执行
|
||||
onMounted(async () => {
|
||||
// 先获取数据
|
||||
await getListData();
|
||||
// 数据加载完成后初始化渲染数组
|
||||
initRenderData();
|
||||
// 最后启动自动轮播
|
||||
startAutoPlay();
|
||||
});
|
||||
|
||||
// 组件卸载时清理
|
||||
onUnmounted(() => {
|
||||
if (timer) clearInterval(timer);
|
||||
});
|
||||
|
||||
// 获取当前真实的索引（排除克隆项的影响）
|
||||
const getCurrentRealIndex = () => {
|
||||
const realLength = originalMediaData.value.length;
|
||||
let realIndex = currentIndex.value - 1; // 减去克隆的首项偏移
|
||||
|
||||
// 处理边界情况（无缝循环时的克隆项）
|
||||
if (realIndex < 0) realIndex = realLength - 1;
|
||||
if (realIndex >= realLength) realIndex = 0;
|
||||
|
||||
return realIndex;
|
||||
};
|
||||
|
||||
// 跳转到指定幻灯片
|
||||
const goToSlide = (targetIndex: number) => {
|
||||
if (isTransitioning.value) return;
|
||||
|
||||
// 计算目标索引（考虑克隆项偏移）
|
||||
currentIndex.value = targetIndex + 1;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.carousel-wrapper {
|
||||
width: 414px;
|
||||
|
||||
:deep(.slick-slide) {
|
||||
|
||||
text-align: center;
|
||||
height: 250px;
|
||||
line-height: 160px;
|
||||
background: #364d79;
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
|
||||
.image-container {
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
height: 228px;
|
||||
// border: 1px solid #7fd6ff;
|
||||
// border-radius: 5px;
|
||||
position: relative;
|
||||
overflow: hidden; // 隐藏超出容器的内容
|
||||
|
||||
.carousel-image {
|
||||
// 跑马灯轨道
|
||||
.carousel-track {
|
||||
display: flex; // 横向排列所有媒体项
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
transition: transform 0.5s ease-in-out; // 0.5秒平滑过渡
|
||||
|
||||
// 禁用过渡动画（用于无缝跳转）
|
||||
&.no-transition {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
:deep() {
|
||||
.ant-carousel .slick-dots li {
|
||||
width: 5px !important;
|
||||
height: 5px !important;
|
||||
border-radius: 50% !important;
|
||||
background-color: #888e95;
|
||||
// 单个媒体项
|
||||
.carousel-item {
|
||||
min-width: 100%; // 每个项目占满容器宽度
|
||||
height: 100%;
|
||||
position: relative;
|
||||
flex-shrink: 0; // 防止被压缩
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
.ant-carousel .slick-dots li button {
|
||||
width: 5px !important;
|
||||
height: 5px !important;
|
||||
border-radius: 50% !important;
|
||||
background-color: #888e95;
|
||||
}
|
||||
|
||||
.ant-carousel .slick-dots li.slick-active {
|
||||
background-color: #005293 !important;
|
||||
}
|
||||
|
||||
.ant-carousel .slick-dots li.slick-active button {
|
||||
background-color: #005293 !important;
|
||||
}
|
||||
|
||||
.ant-carousel .slick-dots li :hover {
|
||||
width: 5px !important;
|
||||
height: 5px !important;
|
||||
border-radius: 50% !important;
|
||||
background-color: #ffffffcc;
|
||||
|
||||
}
|
||||
|
||||
.ant-carousel .slick-dots li button :hover {
|
||||
width: 5px !important;
|
||||
height: 5px !important;
|
||||
border-radius: 50% !important;
|
||||
background-color: #ffffffcc;
|
||||
}
|
||||
}
|
||||
|
||||
.description-container {
|
||||
height: 44px;
|
||||
img,
|
||||
video {
|
||||
width: 100%;
|
||||
margin-top: 6px;
|
||||
height: 100%;
|
||||
object-fit: cover; // 保持比例填充
|
||||
}
|
||||
|
||||
.text {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
color: #fff;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 固定的面板指示器
|
||||
.pagination-dots-fixed {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
z-index: 10; // 确保在文字上方
|
||||
|
||||
.dot {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background-color: #D8D8D8;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
&.active {
|
||||
background-color: #005293;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 独立的文字说明区域
|
||||
.description-text {
|
||||
// padding: 8px 12px;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
// min-height: 40px;
|
||||
transition: all 0.3s ease;
|
||||
margin-bottom: 20px;
|
||||
cursor: pointer;
|
||||
|
||||
// 多行文本溢出省略
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
text-indent: 0em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
}
|
||||
:deep(.ant-spin-nested-loading) {
|
||||
height: 300px !important;
|
||||
word-break: break-word;
|
||||
}
|
||||
</style>
|
||||
@ -303,11 +303,12 @@ watch(
|
||||
// 如果基地发生变化，需要重新获取断面列表
|
||||
if (newDataDimensionVal !== oldDataDimensionVal && newDataDimensionVal) {
|
||||
await fetchDmData()
|
||||
}
|
||||
|
||||
// 请求数据
|
||||
handleSearch()
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
@ -370,10 +371,12 @@ defineExpose({
|
||||
}
|
||||
}
|
||||
}
|
||||
.text_hocer{
|
||||
|
||||
.text_hocer {
|
||||
color: #2f6b98;
|
||||
}
|
||||
.text_hocer:hover{
|
||||
|
||||
.text_hocer:hover {
|
||||
color: #40a9ff;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -152,7 +152,7 @@ const getColorByCodeAndType = (_code: string[], _typeKey: string[]) => {
|
||||
|
||||
// 处理图表数据点点击事件
|
||||
const handleChartClick = (params: any) => {
|
||||
if (!params || !params.dataIndex) return
|
||||
if (!params || !String(params.dataIndex)) return
|
||||
|
||||
// 获取点击的数据点索引
|
||||
const dataIndex = params.dataIndex
|
||||
@ -269,7 +269,6 @@ const getselectData = async () => {
|
||||
select.value.options = [...dataMapNameArr, ...otherArr]
|
||||
|
||||
|
||||
// debugger
|
||||
// if (baseid.value == 'all') {
|
||||
// select.value.value = '008640202300001021'
|
||||
// }
|
||||
@ -286,7 +285,11 @@ const getselectData = async () => {
|
||||
//水温年内分布
|
||||
const getshuiwenList = async () => {
|
||||
if (loading.value) return; // 防止重复请求
|
||||
|
||||
if (!select.value.value) {
|
||||
showemit.value = false
|
||||
waterTempData.value = []
|
||||
return;
|
||||
}
|
||||
loading.value = true;
|
||||
|
||||
const params = {
|
||||
@ -387,7 +390,8 @@ const getChartOption = () => {
|
||||
params.forEach((item: any) => {
|
||||
result += `<div style="display: flex; align-items: center; margin: 4px 0;">`;
|
||||
result += `<span style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: ${item.color}; margin-right: 8px;"></span>`;
|
||||
result += `<span>${item.seriesName} ${item.value}${unit}</span>`;
|
||||
const displayValue = item.value !== null && item.value !== undefined ? item.value : '-';
|
||||
result += `<span>${item.seriesName} ${displayValue}${unit}</span>`;
|
||||
result += `</div>`;
|
||||
});
|
||||
return result;
|
||||
@ -556,11 +560,10 @@ const handleResize = () => {
|
||||
onMounted(() => {
|
||||
// 初始化图表
|
||||
initChart()
|
||||
|
||||
// 加载初始数据
|
||||
if (select.value.value) {
|
||||
getshuiwenList()
|
||||
}
|
||||
// if (select.value.value) {
|
||||
// getshuiwenList()
|
||||
// }
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
@ -577,6 +580,8 @@ const handlePanelChange1 = (data) => {
|
||||
// 当选择器或日期变化时，重新加载图表数据
|
||||
if (data.moreSelect || data.datetime) {
|
||||
select.value.value = data.moreSelect
|
||||
datetimePicker.value.value = data.datetime
|
||||
// debugger
|
||||
getshuiwenList()
|
||||
}
|
||||
}
|
||||
|
||||
@ -51,7 +51,7 @@
|
||||
|
||||
<!-- 操作 -->
|
||||
<template v-else-if="column.key === 'action'">
|
||||
<a @click="handleViewDetail(record)" class="text_hocer" >查看详情</a>
|
||||
<a @click="handleViewDetail(record)" class="text_hocer">查看详情</a>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
@ -79,6 +79,7 @@ const pagination = ref({
|
||||
current: 1,
|
||||
pageSize: 20,
|
||||
total: 0,
|
||||
size: 'small',
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
showTotal: (total: number) => `共 ${total} 条`,
|
||||
@ -322,7 +323,6 @@ const fetchData = async () => {
|
||||
// 数据处理
|
||||
let total = res.data.total
|
||||
let records = res?.data?.data || res?.data
|
||||
// debugger
|
||||
// if (Array.isArray(res?.data?.data)) {
|
||||
// records = res.data.data
|
||||
// total = res.data.data.length
|
||||
@ -539,10 +539,12 @@ onMounted(() => {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.text_hocer{
|
||||
|
||||
.text_hocer {
|
||||
color: #2f6b98;
|
||||
}
|
||||
.text_hocer:hover{
|
||||
|
||||
.text_hocer:hover {
|
||||
color: #40a9ff;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -410,7 +410,6 @@ const init = async () => {
|
||||
//获取选择器配置参数
|
||||
const getSelectConfig = async () => {
|
||||
loading.value = true;
|
||||
|
||||
try {
|
||||
let obj: any = {}
|
||||
if (baseid.value === 'all') {
|
||||
@ -473,7 +472,6 @@ const getSelectConfig = async () => {
|
||||
}
|
||||
return { label: item.wbsName, value: item.wbsCode, baseId: objId, baseName: jiDiListMap[objId] }
|
||||
})
|
||||
// debugger
|
||||
let dataMapNameArr: any = []
|
||||
|
||||
Object.keys(dataMapNameMap).forEach((item: any) => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user