弹窗拖动+过鱼设施-过鱼总量-弹框添加
This commit is contained in:
王兴凯
parent
9473a87a1d
commit
5465ef72d6
@ -12,7 +12,7 @@ VITE_APP_BASE_API = '/dev-api'
|
||||
# VITE_APP_BASE_URL = 'http://172.16.21.142:8093'
|
||||
# VITE_APP_BASE_URL = 'http://172.16.21.142:8096'
|
||||
# 汤伟
|
||||
VITE_APP_BASE_URL = 'http://10.84.121.127:8093'
|
||||
VITE_APP_BASE_URL = 'http://10.84.111.235:8093'
|
||||
# 李林
|
||||
# VITE_APP_BASE_URL = 'http://10.84.121.43:8093'
|
||||
# VITE_APP_BASE_URL = 'http://192.168.1.162:8093'
|
||||
|
||||
@ -177,7 +177,84 @@
|
||||
</a-select>
|
||||
</a-form-item-rest>
|
||||
</div>
|
||||
<!-- 基地电站下拉框 -->
|
||||
|
||||
<div
|
||||
class="flex gap-[10px]"
|
||||
v-else-if="item.type === 'jidiData'"
|
||||
>
|
||||
<a-form-item-rest>
|
||||
<!-- 基地下拉框 -->
|
||||
<a-select
|
||||
:value="formData[item.name]"
|
||||
placeholder="请选择"
|
||||
@change="val => dataDimensionDataChange(val, item.name)"
|
||||
show-search
|
||||
allow-clear
|
||||
:loading="shuJuTianBaoStore.baseLoading"
|
||||
:filter-option="filterOption"
|
||||
style="width: 135px"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="opt in shuJuTianBaoStore.baseOption"
|
||||
:key="opt.baseid"
|
||||
:value="opt.baseid"
|
||||
:label="opt.basename"
|
||||
>
|
||||
{{ opt.basename }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
<!-- 电站下拉框 -->
|
||||
<a-select
|
||||
v-if="props.zhujianfujian == 'fu'"
|
||||
:value="formData.rstcd"
|
||||
placeholder="请选择电站"
|
||||
@change="stcdIdChange"
|
||||
show-search
|
||||
allow-clear
|
||||
:loading="shuJuTianBaoStore.engLoading"
|
||||
:filter-option="filterOption"
|
||||
style="width: 135px"
|
||||
:dropdown-style="{
|
||||
maxHeight: '400px',
|
||||
overflow: 'auto',
|
||||
minWidth: '300px'
|
||||
}"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="opt in shuJuTianBaoStore.engOption"
|
||||
:key="opt.stcd"
|
||||
:value="opt.stcd"
|
||||
:label="opt.ennm"
|
||||
:title="opt.ennm + ',' + opt.reachcdName"
|
||||
:reachcdName="opt.reachcdName"
|
||||
>
|
||||
{{ opt.ennm }},{{ opt.reachcdName }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
<!-- 电站下拉框 -->
|
||||
<a-select
|
||||
v-if="props.zhujianfujian == 'zhu'"
|
||||
:value="formData.stcd"
|
||||
placeholder="请选择电站"
|
||||
@change="stcdIdChange"
|
||||
show-search
|
||||
allow-clear
|
||||
:loading="shuJuTianBaoStore.engLoading"
|
||||
:filter-option="filterOption"
|
||||
style="width: 135px"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="opt in shuJuTianBaoStore.engOption"
|
||||
:key="opt.stcd"
|
||||
:value="opt.stcd"
|
||||
:label="opt.ennm"
|
||||
>
|
||||
{{ opt.ennm }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item-rest>
|
||||
</div>
|
||||
<!-- 下拉选择 -->
|
||||
<!-- <div v-else-if="item.type === 'Select'">
|
||||
<div v-for="i in item.options"> {{ i[item.values?.name] }} {{ i[item.values?.value] }}</div>
|
||||
@ -362,9 +439,13 @@ const initForm = () => {
|
||||
validSearchList.value.forEach(item => {
|
||||
if (item.type == 'waterStation') {
|
||||
// 下拉菜单
|
||||
// shuJuTianBaoStore.getBaseOption();
|
||||
shuJuTianBaoStore.getBaseOption();
|
||||
shuJuTianBaoStore.getSelectForOption();
|
||||
shuJuTianBaoStore.getEngOption(formData.rvcd);
|
||||
shuJuTianBaoStore.getEngOption(formData.rvcd,'rvcd');
|
||||
}
|
||||
if (item.type == 'jidiData') {
|
||||
shuJuTianBaoStore.getBaseOption();
|
||||
shuJuTianBaoStore.getEngOption(formData[item.name] || 'all','baseId');
|
||||
}
|
||||
if (item.fieldProps?.required) {
|
||||
rules[item.name] = [
|
||||
@ -387,19 +468,19 @@ const triggerManualValuesChange = (changedKey: string, newValue: any) => {
|
||||
emit('valuesChange', changedValues, { ...formData });
|
||||
};
|
||||
|
||||
// const dataDimensionDataChange = (value: any) => {
|
||||
// formData.baseId = value;
|
||||
// formData.rstcd = "";
|
||||
// shuJuTianBaoStore.getEngOption(formData.baseId);
|
||||
|
||||
// // 【关键修改】手动触发 valuesChange，因为 a-form-item-rest 阻断了自动监听
|
||||
// triggerManualValuesChange("baseId", formData.baseId);
|
||||
// };
|
||||
const dataDimensionDataChange = (value: any, fieldName: string = 'baseId') => {
|
||||
formData[fieldName] = value;
|
||||
formData.rstcd = "";
|
||||
shuJuTianBaoStore.getEngOption(value,'baseId');
|
||||
triggerManualValuesChange('baseId', formData.baseId);
|
||||
// 一次性触发所有变更通知，避免多次调用
|
||||
// emit('valuesChange', { [fieldName]: value, rstcd: "" }, { ...formData });
|
||||
};
|
||||
|
||||
const lyChange = (value: any) => {
|
||||
formData.rvcd = value;
|
||||
formData.rstcd = '';
|
||||
shuJuTianBaoStore.getEngOption(formData.rvcd);
|
||||
shuJuTianBaoStore.getEngOption(formData.rvcd,'rvcd');
|
||||
|
||||
// 【关键修改】手动触发 valuesChange，因为 a-form-item-rest 阻断了自动监听
|
||||
triggerManualValuesChange('rvcd', formData.rvcd);
|
||||
@ -408,12 +489,12 @@ const lyChange = (value: any) => {
|
||||
const stcdIdChange = (value: any) => {
|
||||
if (props.zhujianfujian == 'fu') {
|
||||
formData.rstcd = value;
|
||||
shuJuTianBaoStore.getFpssOption(formData.rvcd, value);
|
||||
shuJuTianBaoStore.getFpssOption(formData.baseId, value);
|
||||
// 【关键修改】手动触发 valuesChange
|
||||
triggerManualValuesChange('rstcd', formData.rstcd);
|
||||
} else {
|
||||
formData.stcd = value;
|
||||
shuJuTianBaoStore.getFpssOption(formData.rvcd, value);
|
||||
shuJuTianBaoStore.getFpssOption(formData.baseId, value);
|
||||
// 【关键修改】手动触发 valuesChange
|
||||
triggerManualValuesChange('stcd', formData.stcd);
|
||||
}
|
||||
|
||||
282
frontend/src/components/FishResource/FishResourceSearch.vue
Normal file
282
frontend/src/components/FishResource/FishResourceSearch.vue
Normal file
@ -0,0 +1,282 @@
|
||||
<template>
|
||||
<div class="approval-search">
|
||||
<BasicSearch
|
||||
ref="basicSearchRef"
|
||||
:searchList="searchList"
|
||||
:initial-values="initSearchData"
|
||||
:zhujianfujian="'fu'"
|
||||
@reset="handleResetWrapper"
|
||||
@finish="onSearchFinish"
|
||||
@values-change="onValuesChange"
|
||||
><template #jcdt>
|
||||
<a-date-picker
|
||||
class="w-[120px]"
|
||||
v-model:value="jcdt.min"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
placeholder="起始时间"
|
||||
:showToday="false"
|
||||
>
|
||||
<template #renderExtraFooter>
|
||||
<div class="flex items-center flex-wrap px-2">
|
||||
<span
|
||||
v-for="item in DateSetting.RangeButton.days1"
|
||||
:key="item"
|
||||
@click="handleRangeClick(item)"
|
||||
>
|
||||
<a class="text-[#1890ff] mr-1"> {{ item.label }}</a>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</a-date-picker>
|
||||
至
|
||||
<a-form-item-rest>
|
||||
<a-date-picker
|
||||
class="w-[120px]"
|
||||
v-model:value="jcdt.max"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
:disabledDate="disabledEndDate"
|
||||
placeholder="结束时间"
|
||||
:showToday="false"
|
||||
>
|
||||
<template #renderExtraFooter>
|
||||
<div class="flex items-center flex-wrap px-2">
|
||||
<span
|
||||
v-for="item in DateSetting.RangeButton.days1"
|
||||
:key="item"
|
||||
@click="handleRangeClick(item)"
|
||||
>
|
||||
<a class="text-[#1890ff] mr-1"> {{ item.label }}</a>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</a-date-picker>
|
||||
</a-form-item-rest>
|
||||
</template>
|
||||
<template #actions>
|
||||
<a-button :loading="exportLoading" @click="exportBtn">导出</a-button>
|
||||
</template>
|
||||
</BasicSearch>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import dayjs from 'dayjs';
|
||||
import BasicSearch from '@/components/BasicSearch/index.vue';
|
||||
import { DateSetting } from '@/utils/enumeration';
|
||||
import { useTimeScale } from '@/store/composables/useTimeScale';
|
||||
import { getFishReleaseMonitorSectionList } from '@/api/DataQueryMenuModule';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'export-btn'): void;
|
||||
(e: 'reset', values: any): void;
|
||||
(e: 'search-finish', values: any): void;
|
||||
}>();
|
||||
|
||||
const basicSearchRef = ref<any>();
|
||||
const btnLoading = ref<boolean>(false);
|
||||
|
||||
const props = defineProps<{
|
||||
exportLoading?: boolean;
|
||||
modalData: any;
|
||||
}>();
|
||||
const initSearchData = {
|
||||
baseId: props.modalData.baseid ?? 'all',
|
||||
rstcd: null,
|
||||
stcd: '',
|
||||
mway: '1'
|
||||
};
|
||||
|
||||
const searchData = ref<any>({ ...initSearchData });
|
||||
|
||||
const {
|
||||
jcdt,
|
||||
currentTimeScale,
|
||||
handleRangeClick,
|
||||
disabledEndDate,
|
||||
handleSearchFinish,
|
||||
handleValuesChange,
|
||||
init,
|
||||
setDefaultTimeRange
|
||||
} = useTimeScale({
|
||||
defaultTimeScale: initSearchData.timeScale,
|
||||
onSearchFinish: values => emit('search-finish', values),
|
||||
onReset: () => emit('reset', initSearchData)
|
||||
});
|
||||
const crossSectionListLoading = ref<any>(false);
|
||||
const crossSectionList = ref<any>([]);
|
||||
|
||||
const searchList: any = computed(() => [
|
||||
// {
|
||||
// type: 'waterStation',
|
||||
// name: 'rvcd',
|
||||
// label: '流域',
|
||||
// placeholder: '请输入流域名称',
|
||||
// fieldProps: {
|
||||
// allowClear: true
|
||||
// },
|
||||
// options: []
|
||||
// },
|
||||
{
|
||||
type: 'jidiData',
|
||||
name: 'baseId',
|
||||
label: '水电基地',
|
||||
placeholder: '请输入水电基地名称',
|
||||
fieldProps: {
|
||||
allowClear: true
|
||||
},
|
||||
options: []
|
||||
},
|
||||
{
|
||||
type: 'Select',
|
||||
name: 'stcd',
|
||||
label: '过鱼设施名称',
|
||||
width: 200,
|
||||
placeholder: '请选择过鱼设施名称',
|
||||
fieldProps: {
|
||||
allowClear: true
|
||||
},
|
||||
loading: crossSectionListLoading.value,
|
||||
options: crossSectionList.value.map(item => ({
|
||||
label: item.stnm,
|
||||
value: item.stcd
|
||||
}))
|
||||
},
|
||||
{
|
||||
type: 'Radio',
|
||||
name: 'mway',
|
||||
label: '数据类型',
|
||||
width: 140,
|
||||
options: [
|
||||
{
|
||||
label: '人工',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: '自动',
|
||||
value: '2'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'custom',
|
||||
name: 'jcdt',
|
||||
label: '时间',
|
||||
fieldProps: {
|
||||
allowClear: false
|
||||
}
|
||||
}
|
||||
]);
|
||||
|
||||
const onSearchFinish = (values: any) => {
|
||||
handleSearchFinish(values);
|
||||
};
|
||||
|
||||
const exportBtn = () => {
|
||||
emit('export-btn');
|
||||
};
|
||||
const initCrossSectionList = params => {
|
||||
const filters = [];
|
||||
if (params) {
|
||||
if (params.baseId != '' && params.baseId != 'all') {
|
||||
filters.push({
|
||||
field: 'baseId',
|
||||
operator: 'contains',
|
||||
dataType: 'string',
|
||||
value: params.baseId
|
||||
});
|
||||
}
|
||||
if (params.rstcd != '' && params.rstcd != null) {
|
||||
filters.push({
|
||||
field: 'rstcd',
|
||||
operator: 'contains',
|
||||
dataType: 'string',
|
||||
value: params.rstcd
|
||||
});
|
||||
}
|
||||
}
|
||||
crossSectionListLoading.value = true;
|
||||
getFishReleaseMonitorSectionList({
|
||||
filter: {
|
||||
logic: 'and',
|
||||
filters: filters
|
||||
},
|
||||
select: ['stcd', 'stnm', 'wtDeviceType', 'dtinType', 'mway']
|
||||
}).then(res => {
|
||||
if (res.data?.data) {
|
||||
crossSectionList.value = res.data?.data;
|
||||
}
|
||||
crossSectionListLoading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
const onValuesChange = (changedValues: any, allValues: any) => {
|
||||
// 当基地或断面变化时，清空过鱼设施选中并重新请求列表
|
||||
if ('baseId' in changedValues || 'rstcd' in changedValues) {
|
||||
allValues.stcd = null;
|
||||
if (basicSearchRef.value?.formData) {
|
||||
basicSearchRef.value.formData.stcd = null;
|
||||
}
|
||||
initCrossSectionList(allValues);
|
||||
}
|
||||
|
||||
handleValuesChange(changedValues, allValues);
|
||||
searchData.value = { ...searchData.value, ...allValues };
|
||||
};
|
||||
|
||||
const handleResetWrapper = () => {
|
||||
// 手动重置内部状态，避免触发两次请求
|
||||
currentTimeScale.value = initSearchData.timeScale;
|
||||
const now = dayjs();
|
||||
if (props.modalData.year) {
|
||||
jcdt.value = {
|
||||
min: `${props.modalData.year}-01-01 00:00:00`,
|
||||
max: `${props.modalData.year}-12-31 23:59:59`
|
||||
};
|
||||
} else {
|
||||
jcdt.value = {
|
||||
min: `${now
|
||||
.subtract(5, 'year')
|
||||
.startOf('year')
|
||||
.format('YYYY-MM-DD')} 00:00:00`,
|
||||
max: `${now.endOf('year').format('YYYY-MM-DD')} 23:59:59`
|
||||
};
|
||||
}
|
||||
|
||||
setDefaultTimeRange(initSearchData.timeScale);
|
||||
// 触发搜索，使用当前状态而非 initSearchData
|
||||
handleSearchFinish({
|
||||
...initSearchData
|
||||
});
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
btnLoading,
|
||||
searchData
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
init();
|
||||
// 设置默认年份：前一年到当前年
|
||||
const now = dayjs();
|
||||
if (props.modalData.year) {
|
||||
jcdt.value = {
|
||||
min: `${props.modalData.year}-01-01 00:00:00`,
|
||||
max: `${props.modalData.year}-12-31 23:59:59`
|
||||
};
|
||||
} else {
|
||||
jcdt.value = {
|
||||
min: `${now.subtract(5, 'year').format('YYYY-MM-DD')} 00:00:00`,
|
||||
max: `${now.format('YYYY-MM-DD')} 23:59:59`
|
||||
};
|
||||
}
|
||||
|
||||
initCrossSectionList();
|
||||
// 使用 handleSearchFinish 确保包含 jcdt 等完整参数
|
||||
handleSearchFinish({ ...initSearchData });
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss"></style>
|
||||
554
frontend/src/components/FishResource/index.vue
Normal file
554
frontend/src/components/FishResource/index.vue
Normal file
@ -0,0 +1,554 @@
|
||||
<template>
|
||||
<div class="w-full h-full flex flex-col" style="height:calc(60vh)">
|
||||
<!-- 搜索组件 -->
|
||||
<FishDataSearch
|
||||
@export-btn="exportBtn"
|
||||
@search-finish="onSearchFinish"
|
||||
@reset="onReset"
|
||||
:exportLoading="exportLoading"
|
||||
:modalData = "props.modalData"
|
||||
ref="searchRef"
|
||||
/>
|
||||
<!-- 表格组件 -->
|
||||
<BasicTable
|
||||
ref="tableRef"
|
||||
:scrollX="tableScrollX"
|
||||
:scrollY="tableScrollY"
|
||||
:columns="tableColumns"
|
||||
:list-url="getFishReleaseMonitorList"
|
||||
:searchParams="{
|
||||
sort: sort
|
||||
}"
|
||||
>
|
||||
</BasicTable>
|
||||
|
||||
<!-- 图片预览弹框 -->
|
||||
<a-modal
|
||||
v-model:open="imagePreviewVisible"
|
||||
title="图片预览"
|
||||
:footer="null"
|
||||
width="800px"
|
||||
>
|
||||
<div style="text-align: center">
|
||||
<img :src="previewImageUrl" style="width: 100%; height: 600px" />
|
||||
</div>
|
||||
</a-modal>
|
||||
|
||||
<!-- 视频预览弹框 -->
|
||||
<a-modal
|
||||
v-model:open="videoPreviewVisible"
|
||||
title="视频预览"
|
||||
:footer="null"
|
||||
width="800px"
|
||||
>
|
||||
<div style="text-align: center">
|
||||
<video
|
||||
:src="previewVideoUrl"
|
||||
controls
|
||||
style="width: 100%; height: 600px"
|
||||
></video>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, nextTick, h } from 'vue';
|
||||
import dayjs from 'dayjs';
|
||||
import { Button } from 'ant-design-vue';
|
||||
import FishDataSearch from './FishResourceSearch.vue';
|
||||
import BasicTable from '@/components/BasicTable/index.vue';
|
||||
import { getFishReleaseMonitorList } from '@/api/DataQueryMenuModule';
|
||||
import { calcTableScrollY } from '@/utils/index';
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
const props = defineProps<{
|
||||
modalData?: any;
|
||||
}>();
|
||||
const sort = ref<any>([
|
||||
{
|
||||
field: 'baseStepSort',
|
||||
dir: 'asc'
|
||||
},
|
||||
{
|
||||
field: 'rvcdStepSort',
|
||||
dir: 'asc'
|
||||
},
|
||||
{
|
||||
field: 'rstcdStepSort',
|
||||
dir: 'asc'
|
||||
},
|
||||
{
|
||||
field: 'ttpwr',
|
||||
dir: 'asc'
|
||||
},
|
||||
{
|
||||
field: 'tm',
|
||||
dir: 'desc'
|
||||
}
|
||||
]);
|
||||
const tableRef = ref();
|
||||
const searchRef = ref();
|
||||
const tableScrollY = ref<string | number>(0);
|
||||
const currentSearchParams = ref<any>({});
|
||||
const exportLoading = ref(false);
|
||||
|
||||
// 图片预览
|
||||
const imagePreviewVisible = ref(false);
|
||||
const previewImageUrl = ref('');
|
||||
// 视频预览
|
||||
const videoPreviewVisible = ref(false);
|
||||
const previewVideoUrl = ref('');
|
||||
useDraggable(imagePreviewVisible, { boundary: true, resetOnOpen: true });
|
||||
useDraggable(videoPreviewVisible, { boundary: true, resetOnOpen: true });
|
||||
const openImagePreview = (url: string) => {
|
||||
previewImageUrl.value = import.meta.env.VITE_APP_ATTACHMENT_URL + '/?' + url;
|
||||
imagePreviewVisible.value = true;
|
||||
};
|
||||
|
||||
const openVideoPreview = (url: string) => {
|
||||
previewVideoUrl.value = import.meta.env.VITE_APP_ATTACHMENT_URL + '/?' + url;
|
||||
videoPreviewVisible.value = true;
|
||||
};
|
||||
|
||||
const tableScrollX = computed(() =>
|
||||
Math.max(
|
||||
tableColumns.value.reduce(
|
||||
(sum: number, col: any) => sum + (col.width || 180),
|
||||
0
|
||||
),
|
||||
600
|
||||
)
|
||||
);
|
||||
|
||||
// 人工列
|
||||
const columnsManual: any[] = [
|
||||
{
|
||||
key: 'stnm',
|
||||
title: '电站名称',
|
||||
dataIndex: 'stnm',
|
||||
visible: true,
|
||||
width: 200,
|
||||
sort: true,
|
||||
merge: true
|
||||
},
|
||||
{
|
||||
key: 'baseName',
|
||||
title: '所属基地',
|
||||
dataIndex: 'baseName',
|
||||
sort: true,
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
key: 'stnm',
|
||||
title: '过鱼设施名称',
|
||||
dataIndex: 'stnm',
|
||||
sort: true,
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
key: 'strdt',
|
||||
title: '开始时间',
|
||||
dataIndex: 'strdt',
|
||||
sort: true,
|
||||
width: 100,
|
||||
customRender: ({ text }) => dayjs(text).format('YYYY-MM-DD') || '-'
|
||||
},
|
||||
{
|
||||
key: 'enddt',
|
||||
title: '结束时间',
|
||||
dataIndex: 'enddt',
|
||||
sort: true,
|
||||
width: 100,
|
||||
customRender: ({ text }) => dayjs(text).format('YYYY-MM-DD') || '-'
|
||||
},
|
||||
{
|
||||
key: 'tm',
|
||||
title: '填报时间',
|
||||
dataIndex: 'tm',
|
||||
sort: true,
|
||||
width: 160
|
||||
},
|
||||
{
|
||||
key: 'ftp',
|
||||
title: '鱼种类',
|
||||
dataIndex: 'ftp',
|
||||
sort: true,
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
key: 'fcnt',
|
||||
title: '过鱼数量(尾)',
|
||||
dataIndex: 'fcnt',
|
||||
sort: true,
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
key: 'directionName',
|
||||
title: '鱼游向',
|
||||
dataIndex: 'directionName',
|
||||
sort: true,
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
key: 'fsz',
|
||||
title: '鱼类规格',
|
||||
dataIndex: 'fsz',
|
||||
sort: true,
|
||||
width: 160
|
||||
},
|
||||
{
|
||||
key: 'firstimgurl',
|
||||
title: '图片',
|
||||
dataIndex: 'firstimgurl',
|
||||
align: 'center',
|
||||
width: 110,
|
||||
customRender: ({ text }: any) => {
|
||||
const hasValidUrl =
|
||||
text &&
|
||||
text !== '-' &&
|
||||
text.trim() !== '' &&
|
||||
text !== 'null' &&
|
||||
text !== 'undefined';
|
||||
return h(
|
||||
Button,
|
||||
{
|
||||
type: 'link',
|
||||
disabled: !hasValidUrl,
|
||||
style: {
|
||||
color: !hasValidUrl ? '#ccc' : '#1890ff',
|
||||
cursor: !hasValidUrl ? 'not-allowed' : 'pointer'
|
||||
},
|
||||
onClick: () => {
|
||||
if (hasValidUrl) {
|
||||
openImagePreview(text);
|
||||
}
|
||||
}
|
||||
},
|
||||
() => '查看图片'
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'videourl',
|
||||
title: '视频',
|
||||
dataIndex: 'videourl',
|
||||
align: 'center',
|
||||
width: 110,
|
||||
customRender: ({ text }: any) => {
|
||||
const hasValidUrl =
|
||||
text &&
|
||||
text !== '-' &&
|
||||
text.trim() !== '' &&
|
||||
text !== 'null' &&
|
||||
text !== 'undefined';
|
||||
return h(
|
||||
Button,
|
||||
{
|
||||
type: 'link',
|
||||
disabled: !hasValidUrl,
|
||||
style: {
|
||||
color: !hasValidUrl ? '#ccc' : '#1890ff',
|
||||
cursor: !hasValidUrl ? 'not-allowed' : 'pointer'
|
||||
},
|
||||
onClick: () => {
|
||||
if (hasValidUrl) {
|
||||
openVideoPreview(text);
|
||||
}
|
||||
}
|
||||
},
|
||||
() => '查看视频'
|
||||
);
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
// 自动列
|
||||
const columnsAuto: any[] = [
|
||||
{
|
||||
key: 'stnm',
|
||||
title: '电站名称',
|
||||
dataIndex: 'stnm',
|
||||
visible: true,
|
||||
width: 200,
|
||||
sort: true,
|
||||
merge: true
|
||||
},
|
||||
{
|
||||
key: 'baseName',
|
||||
title: '所属基地',
|
||||
dataIndex: 'baseName',
|
||||
sort: true,
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
key: 'stnm',
|
||||
title: '过鱼设施名称',
|
||||
dataIndex: 'stnm',
|
||||
sort: true,
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
key: 'tm',
|
||||
title: '时间',
|
||||
dataIndex: 'tm',
|
||||
sort: true,
|
||||
width: 160
|
||||
},
|
||||
{
|
||||
key: 'ftp',
|
||||
title: '鱼种类',
|
||||
dataIndex: 'ftp',
|
||||
sort: true,
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
key: 'length',
|
||||
title: '鱼长度(cm)',
|
||||
dataIndex: 'length',
|
||||
sort: true,
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
key: 'width',
|
||||
title: '鱼宽度(cm)',
|
||||
dataIndex: 'width',
|
||||
sort: true,
|
||||
width: 120,
|
||||
customRender: ({ text }: any) => {
|
||||
const num = parseFloat(text);
|
||||
return isNaN(num) ? '-' : num.toFixed(2);
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'fishspeed',
|
||||
title: '鱼速度(m/s)',
|
||||
dataIndex: 'fishspeed',
|
||||
sort: true,
|
||||
width: 80,
|
||||
customRender: ({ text }: any) => {
|
||||
const num = parseFloat(text);
|
||||
return isNaN(num) ? '-' : num.toFixed(2);
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'directionName',
|
||||
title: '鱼游向',
|
||||
dataIndex: 'directionName',
|
||||
sort: true,
|
||||
width: 160
|
||||
},
|
||||
{
|
||||
key: 'temperature',
|
||||
title: '水温(℃)',
|
||||
dataIndex: 'temperature',
|
||||
sort: true,
|
||||
width: 160,
|
||||
customRender: ({ text }: any) => {
|
||||
const num = parseFloat(text);
|
||||
return isNaN(num) ? '-' : num.toFixed(1);
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'speed',
|
||||
title: '流速(m/s)',
|
||||
dataIndex: 'speed',
|
||||
sort: true,
|
||||
width: 160,
|
||||
customRender: ({ text }: any) => {
|
||||
const num = parseFloat(text);
|
||||
return isNaN(num) ? '-' : num.toFixed(2);
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'fcnt',
|
||||
title: '过鱼数量(尾)',
|
||||
dataIndex: 'fcnt',
|
||||
sort: true,
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
key: 'channelno',
|
||||
title: '过鱼通道',
|
||||
dataIndex: 'channelno',
|
||||
sort: true,
|
||||
width: 140
|
||||
},
|
||||
{
|
||||
key: 'firstimgurl',
|
||||
title: '轮廓图',
|
||||
dataIndex: 'firstimgurl',
|
||||
align: 'center',
|
||||
width: 110,
|
||||
customRender: ({ text }: any) => {
|
||||
const hasValidUrl =
|
||||
text &&
|
||||
text !== '-' &&
|
||||
text.trim() !== '' &&
|
||||
text !== 'null' &&
|
||||
text !== 'undefined';
|
||||
return h(
|
||||
Button,
|
||||
{
|
||||
type: 'link',
|
||||
disabled: !hasValidUrl,
|
||||
style: {
|
||||
color: !hasValidUrl ? '#ccc' : '#1890ff',
|
||||
cursor: !hasValidUrl ? 'not-allowed' : 'pointer'
|
||||
},
|
||||
onClick: () => {
|
||||
if (hasValidUrl) {
|
||||
openImagePreview(text);
|
||||
}
|
||||
}
|
||||
},
|
||||
() => '查看图片'
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'videourl',
|
||||
title: '短视频',
|
||||
dataIndex: 'videourl',
|
||||
align: 'center',
|
||||
width: 110,
|
||||
customRender: ({ text }: any) => {
|
||||
const hasValidUrl =
|
||||
text &&
|
||||
text !== '-' &&
|
||||
text.trim() !== '' &&
|
||||
text !== 'null' &&
|
||||
text !== 'undefined';
|
||||
return h(
|
||||
Button,
|
||||
{
|
||||
type: 'link',
|
||||
disabled: !hasValidUrl,
|
||||
style: {
|
||||
color: !hasValidUrl ? '#ccc' : '#1890ff',
|
||||
cursor: !hasValidUrl ? 'not-allowed' : 'pointer'
|
||||
},
|
||||
onClick: () => {
|
||||
if (hasValidUrl) {
|
||||
openVideoPreview(text);
|
||||
}
|
||||
}
|
||||
},
|
||||
() => '查看视频'
|
||||
);
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
// 根据数据类型动态切换列
|
||||
const tableColumns = computed(() => {
|
||||
const mway = currentSearchParams.value.mway;
|
||||
return mway === '2' ? columnsAuto : columnsManual;
|
||||
});
|
||||
|
||||
const onSearchFinish = async (values: any) => {
|
||||
currentSearchParams.value = values;
|
||||
// 等待 prop 更新后再调用 getList
|
||||
await nextTick();
|
||||
initTable(values);
|
||||
};
|
||||
|
||||
const onReset = async (values: any) => {
|
||||
currentSearchParams.value = values;
|
||||
await nextTick();
|
||||
initTable(values);
|
||||
};
|
||||
|
||||
const exportBtn = () => {
|
||||
if (exportLoading.value) return;
|
||||
|
||||
exportLoading.value = true;
|
||||
searchRef.value.btnLoading = true;
|
||||
|
||||
tableRef.value
|
||||
.exportTable({
|
||||
fileName: `过鱼监测数据_${dayjs().format('YYYY-MM-DD HH-mm-ss')}`
|
||||
})
|
||||
.finally(() => {
|
||||
exportLoading.value = false;
|
||||
searchRef.value.btnLoading = false;
|
||||
});
|
||||
};
|
||||
|
||||
const initTable = (values: any) => {
|
||||
console.log(values);
|
||||
const filters = [
|
||||
values.baseId && values.baseId !== 'all'
|
||||
? {
|
||||
field: 'baseId',
|
||||
operator: 'contains',
|
||||
dataType: 'string',
|
||||
value: values.baseId
|
||||
}
|
||||
: null,
|
||||
values.rstcd
|
||||
? {
|
||||
field: 'rstcd',
|
||||
operator: 'eq',
|
||||
dataType: 'string',
|
||||
value: values.rstcd
|
||||
}
|
||||
: null,
|
||||
values.mway
|
||||
? {
|
||||
field: 'mway',
|
||||
operator: 'eq',
|
||||
dataType: 'string',
|
||||
value: values.mway
|
||||
}
|
||||
: null
|
||||
].filter(Boolean); // 移除空项
|
||||
if (values.stcd) {
|
||||
filters.push({
|
||||
logic: 'or',
|
||||
filters: [
|
||||
{
|
||||
field: 'stcd',
|
||||
operator: 'eq',
|
||||
dataType: 'string',
|
||||
value: values.stcd
|
||||
},
|
||||
{
|
||||
field: 'stcode',
|
||||
operator: 'eq',
|
||||
dataType: 'string',
|
||||
value: values.stcd
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
if (values.jcdt) {
|
||||
filters.push(
|
||||
{
|
||||
field: 'tm',
|
||||
operator: 'gte',
|
||||
dataType: 'date',
|
||||
value: dayjs(values.jcdt.min).format('YYYY-MM-DD HH:mm:ss')
|
||||
},
|
||||
{
|
||||
field: 'tm',
|
||||
operator: 'lte',
|
||||
dataType: 'date',
|
||||
value: dayjs(values.jcdt.max).format('YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
const params = {
|
||||
logic: 'and',
|
||||
filters
|
||||
};
|
||||
tableRef.value.getList(params);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
tableScrollY.value = calcTableScrollY();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@ -245,6 +245,7 @@ import { useModelStore } from '@/store/modules/model';
|
||||
import videoCover from '@/assets/images/videFm.jpg';
|
||||
import MediaViewer from './MediaViewer.vue';
|
||||
import AttachmentPreview from './AttachmentPreview.vue';
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
|
||||
const modelStore = useModelStore();
|
||||
|
||||
@ -875,7 +876,8 @@ const notRunningMediaViewerRef = ref();
|
||||
// 附件预览弹窗
|
||||
const attachmentModalVisible = ref(false);
|
||||
const currentAttachmentFid = ref('');
|
||||
|
||||
useDraggable(detailModalVisible, { boundary: true, resetOnOpen: true });
|
||||
useDraggable(attachmentModalVisible, { boundary: true, resetOnOpen: true });
|
||||
// 查看附件
|
||||
const handleViewAttachment = (record: any) => {
|
||||
if (!record.fid) {
|
||||
|
||||
@ -152,7 +152,7 @@ import { getStcdDetail } from '@/api/mapModal';
|
||||
const baseUrl = import.meta.env.VITE_APP_ATTACHMENT_URL;
|
||||
const modelStore = useModelStore();
|
||||
const hasLoaded = ref(false); // 标记是否已经请求过
|
||||
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
const props = defineProps({
|
||||
url: {
|
||||
type: String,
|
||||
@ -168,6 +168,7 @@ const isLogo = ref(false);
|
||||
const loading = ref(false);
|
||||
const data2: any = ref({});
|
||||
const tabledata = ref([]);
|
||||
useDraggable(visible, { boundary: true, resetOnOpen: true });
|
||||
const columnsConfig = ref([
|
||||
{
|
||||
type: 'ENG',
|
||||
|
||||
@ -56,6 +56,7 @@ import { getMonitorDataFpq, getMonitorDataOnline } from '@/api/mapModal';
|
||||
import { useModelStore } from '@/store/modules/model';
|
||||
import { DateSetting } from '@/utils/enumeration';
|
||||
import dayjs from 'dayjs';
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
|
||||
const loading = ref(false);
|
||||
const modelStore = useModelStore();
|
||||
@ -72,7 +73,8 @@ const previewImageUrl = ref('');
|
||||
// 视频预览
|
||||
const videoPreviewVisible = ref(false);
|
||||
const previewVideoUrl = ref('');
|
||||
|
||||
useDraggable(imagePreviewVisible, { boundary: true, resetOnOpen: true });
|
||||
useDraggable(videoPreviewVisible, { boundary: true, resetOnOpen: true });
|
||||
const openImagePreview = (url: string) => {
|
||||
previewImageUrl.value = import.meta.env.VITE_APP_ATTACHMENT_URL + '/?' + url;
|
||||
imagePreviewVisible.value = true;
|
||||
|
||||
@ -102,6 +102,7 @@ import { getDictItemsByCode } from '@/api/dict';
|
||||
import { getFishDictoryDropdown } from '@/api/select';
|
||||
import { useModelStore } from '@/store/modules/model';
|
||||
import dayjs from 'dayjs';
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
|
||||
const loading = ref(false);
|
||||
const modelStore = useModelStore();
|
||||
@ -125,7 +126,8 @@ const previewImageUrl = ref('');
|
||||
// 视频预览
|
||||
const videoPreviewVisible = ref(false);
|
||||
const currentVideoUrl = ref('');
|
||||
|
||||
useDraggable(imagePreviewVisible, { boundary: true, resetOnOpen: true });
|
||||
useDraggable(videoPreviewVisible, { boundary: true, resetOnOpen: true });
|
||||
// 鱼类搜索过滤
|
||||
const filterFtpOption = (input: string, option: any) => {
|
||||
console.log('filterOption', input, option);
|
||||
|
||||
@ -79,6 +79,7 @@ import { queryPostUrlList } from '@/api/mapModal';
|
||||
import { useModelStore } from '@/store/modules/model';
|
||||
import BasicTable from '@/components/BasicTable/index.vue';
|
||||
import { DateSetting } from '@/utils/enumeration';
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
|
||||
const modelStore = useModelStore();
|
||||
|
||||
@ -102,7 +103,7 @@ let chartInstance: echarts.ECharts | null = null;
|
||||
const videoModalVisible = ref(false);
|
||||
const videoModalTitle = ref('');
|
||||
const currentVideoUrl = ref('');
|
||||
|
||||
useDraggable(videoModalVisible, { boundary: true, resetOnOpen: true });
|
||||
const tabsList = [{ name: '流量监测', key: 'flowMeasure' }];
|
||||
const activeTabKey = ref('flowMeasure');
|
||||
|
||||
|
||||
@ -110,6 +110,7 @@ import {
|
||||
type OperationFilterField,
|
||||
type OperationTableItem
|
||||
} from './operationConfig';
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
|
||||
const props = defineProps({
|
||||
isActive: { type: Boolean, default: false }
|
||||
@ -141,6 +142,7 @@ const loadYear = ref(false);
|
||||
const loadFtp = ref(false);
|
||||
const tableRef = ref();
|
||||
const attachmentModalVisible = ref(false);
|
||||
useDraggable(attachmentModalVisible, { boundary: true, resetOnOpen: true });
|
||||
const currentAttachmentFid = ref('');
|
||||
const fieldOptionsMap = reactive<Record<string, OperationFilterOption[]>>({});
|
||||
const selectLoadingMap = reactive<Record<string, boolean>>({});
|
||||
|
||||
@ -28,7 +28,7 @@ import * as echarts from 'echarts';
|
||||
import { getVmsstbprptKendoList } from '@/api/home';
|
||||
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
|
||||
import ShuiDianKaiFQKTwoLayer from '@/modules/shuidianhuangjingjieruMod/TwoLayer/ShuiDianKaiFQKTwoLayer.vue';
|
||||
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
defineOptions({
|
||||
name: 'developStatusChart'
|
||||
});
|
||||
@ -41,7 +41,7 @@ const dataLoading = ref(false);
|
||||
|
||||
const modalVisible = ref(false);
|
||||
const modalProps = ref<any>({});
|
||||
|
||||
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
|
||||
function openModal(props: any) {
|
||||
modalProps.value = props;
|
||||
modalVisible.value = true;
|
||||
|
||||
@ -60,7 +60,7 @@ import { ref, watch } from 'vue';
|
||||
import { getVmsstbprptKendoList } from '@/api/home';
|
||||
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
|
||||
import HuanJingSJJRQK from '@/modules/shuidianhuangjingjieruMod/TwoLayer/HuanJingSJJRQK.vue';
|
||||
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
defineOptions({
|
||||
name: 'EngEnvironmentData'
|
||||
});
|
||||
@ -72,7 +72,7 @@ const data = ref<Record<string, number>>({ one: 0, two: 0, three: 0 });
|
||||
|
||||
const modalVisible = ref(false);
|
||||
const modalProps = ref<any>({});
|
||||
|
||||
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
|
||||
function openModal(props: any) {
|
||||
modalProps.value = props;
|
||||
modalVisible.value = true;
|
||||
|
||||
@ -63,6 +63,7 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
|
||||
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
|
||||
import { vpcGetKendoListCust } from '@/api/zxdzw';
|
||||
import ArtsDetail from '@/components/carouselIntroduce/ArtsDetail.vue';
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
|
||||
// 定义组件名（便于调试和递归）
|
||||
defineOptions({
|
||||
@ -83,7 +84,7 @@ const baseid = ref('');
|
||||
// 弹框控制
|
||||
const modalVisible = ref(false);
|
||||
const currentItem = ref<any>(null);
|
||||
|
||||
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
|
||||
// 加载状态
|
||||
const loading = ref(false);
|
||||
|
||||
|
||||
@ -109,6 +109,7 @@ import isSameOrAfter from 'dayjs/plugin/isSameOrAfter'
|
||||
import BasicTable from '@/components/BasicTable/index.vue'
|
||||
import { wqGetKendoList } from '@/api/sz'
|
||||
import HJMZDTwoLays from "./HJMZDTwoLays.vue"
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
|
||||
// 注册 dayjs 插件
|
||||
dayjs.extend(isSameOrAfter)
|
||||
@ -155,7 +156,7 @@ const detailModalVisible = ref(false)
|
||||
const detailData = ref<any>({})
|
||||
const mapModalVisible = ref(false)
|
||||
const mapModalData = ref<any>({})
|
||||
|
||||
useDraggable(detailModalVisible, { boundary: true, resetOnOpen: true });
|
||||
// 排序配置
|
||||
const sortConfig = computed(() => [
|
||||
{ field: 'rstcdStepSort', dir: 'asc' },
|
||||
|
||||
@ -36,6 +36,8 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
|
||||
import { wqGetKendoListCust } from '@/api/sz'
|
||||
import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
|
||||
import EnvironmentalQualityTwoLayers from "./TwoLayers/EnvironmentalQualityTwoLayers.vue"
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
|
||||
// 定义组件名（便于调试和递归）
|
||||
defineOptions({
|
||||
name: 'EnvironmentalQuality'
|
||||
@ -774,7 +776,7 @@ onUnmounted(() => {
|
||||
// 弹框相关状态
|
||||
const modalVisible = ref(false);
|
||||
const clickedBarData = ref<{ name: string; current: number | null; lastYear: number | null; selectedId?: string } | null>(null);
|
||||
|
||||
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
@ -1,6 +1,10 @@
|
||||
<!-- SidePanelItem.vue -->
|
||||
<template>
|
||||
<SidePanelItem :title="title" :datetimePicker="datetimePicker" @update-values="handlePanelChange1">
|
||||
<SidePanelItem
|
||||
:title="title"
|
||||
:datetimePicker="datetimePicker"
|
||||
@update-values="handlePanelChange1"
|
||||
>
|
||||
<!-- 加载状态 -->
|
||||
<div v-if="loading" class="loading-container">
|
||||
<a-spin tip="加载中..." />
|
||||
@ -12,12 +16,24 @@
|
||||
</div>
|
||||
|
||||
<!-- 正常显示图表 -->
|
||||
<div v-else class="container" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
|
||||
<div
|
||||
v-else
|
||||
class="container"
|
||||
@mouseenter="handleMouseEnter"
|
||||
@mouseleave="handleMouseLeave"
|
||||
>
|
||||
<!-- 跑马灯轨道容器 -->
|
||||
<div class="carousel-track" :class="{ 'no-transition': isTransitioning }"
|
||||
:style="{ transform: `translateX(-${currentIndex * 100}%)` }">
|
||||
<div
|
||||
class="carousel-track"
|
||||
:class="{ 'no-transition': isTransitioning }"
|
||||
:style="{ transform: `translateX(-${currentIndex * 100}%)` }"
|
||||
>
|
||||
<!-- 遍历所有图表项（包含克隆项） -->
|
||||
<div v-for="(item, index) in renderChartData" :key="index" class="carousel-item">
|
||||
<div
|
||||
v-for="(item, index) in renderChartData"
|
||||
:key="index"
|
||||
class="carousel-item"
|
||||
>
|
||||
<div class="pie-chart-container">
|
||||
<!-- 图表区域 -->
|
||||
<div :ref="el => setChartRef(el, index)" class="chart"></div>
|
||||
@ -31,45 +47,12 @@
|
||||
<!-- 详情弹框 -->
|
||||
<a-modal
|
||||
v-model:open="modalVisible"
|
||||
:title="modalTitle"
|
||||
:title="'过鱼监测数据'"
|
||||
width="1650px"
|
||||
:footer="null"
|
||||
@cancel="handleModalClose"
|
||||
>
|
||||
<div class="modal-content">
|
||||
<a-descriptions bordered :column="2" size="small">
|
||||
<a-descriptions-item label="年份">
|
||||
{{ modalData.year }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="流域/设施">
|
||||
{{ modalData.basinName }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="鱼类总数">
|
||||
<span style="color: #1890ff; font-weight: bold;">
|
||||
{{ modalData.totalCount }} {{ getUnit() }}
|
||||
</span>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="">
|
||||
{{ modalData.baseid }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
|
||||
<a-divider orientation="left">鱼类分布详情</a-divider>
|
||||
|
||||
<a-table
|
||||
:columns="fishColumns"
|
||||
:data-source="modalData.fishList"
|
||||
:pagination="false"
|
||||
size="small"
|
||||
:scroll="{ y: 300 }"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'percentage'">
|
||||
{{ record.percentage }}%
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
<FishResource v-if="modalVisible" :modalData = "modalData" />
|
||||
</a-modal>
|
||||
</SidePanelItem>
|
||||
</template>
|
||||
@ -80,8 +63,10 @@ import * as echarts from 'echarts';
|
||||
import type { ECharts } from 'echarts';
|
||||
import SidePanelItem from '@/components/SidePanelItem/index.vue';
|
||||
import { yearGetYearFpStatistics } from '@/api/gyss';
|
||||
import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
|
||||
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
|
||||
import type { ColumnsType } from 'ant-design-vue/es/table/Table';
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
import FishResource from '@/components/FishResource/index.vue';
|
||||
|
||||
// API 数据类型定义
|
||||
interface FpFtpStatisticsVo {
|
||||
@ -108,10 +93,11 @@ const JidiSelectEventStore = useJidiSelectEventStore();
|
||||
const baseid = ref('');
|
||||
|
||||
const props = defineProps({
|
||||
title: { // 标题
|
||||
title: {
|
||||
// 标题
|
||||
type: String,
|
||||
default: '过鱼总量'
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
const datetimePicker = ref({
|
||||
@ -134,7 +120,7 @@ const currentYear = ref<string>(''); // 当前选中的年份
|
||||
interface ChartDataItem {
|
||||
title: string;
|
||||
baseid?: string; // 流域ID（用于标识该图表所属的流域）
|
||||
data: Array<{ name: string; value: number; baseId?: string }>; // 扩展数据项，支持存储流域ID
|
||||
data: Array<{ name: string; value: number; baseId?: string; ftp?: string }>;
|
||||
}
|
||||
|
||||
// 原始图表数据（多组数据用于跑马灯）
|
||||
@ -151,13 +137,16 @@ let timer: any = null;
|
||||
|
||||
// 弹框相关状态
|
||||
const modalVisible = ref(false);
|
||||
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
|
||||
const modalTitle = ref('');
|
||||
const modalData = ref<{
|
||||
year: string;
|
||||
basinName: string;
|
||||
baseid?: string; // 添加流域ID
|
||||
baseid?: string;
|
||||
totalCount: number;
|
||||
fishTypes: number;
|
||||
fishName?: string;
|
||||
ftp?: string;
|
||||
fishList: Array<{
|
||||
name: string;
|
||||
value: number;
|
||||
@ -169,6 +158,8 @@ const modalData = ref<{
|
||||
baseid: '',
|
||||
totalCount: 0,
|
||||
fishTypes: 0,
|
||||
fishName: '',
|
||||
ftp: '',
|
||||
fishList: []
|
||||
});
|
||||
|
||||
@ -351,12 +342,12 @@ const updateChart = (index: number) => {
|
||||
textStyle: {
|
||||
fontSize: 24,
|
||||
fontWeight: 'bold',
|
||||
color: '#333',
|
||||
color: '#333'
|
||||
},
|
||||
subtextStyle: {
|
||||
fontSize: 12,
|
||||
color: '#999',
|
||||
align: 'center',
|
||||
align: 'center'
|
||||
}
|
||||
}
|
||||
],
|
||||
@ -377,7 +368,8 @@ const updateChart = (index: number) => {
|
||||
const found = chartData.data.find(item => item.name === name);
|
||||
const value = found ? found.value : '-';
|
||||
const maxLength = 7;
|
||||
const truncatedName = name.length > maxLength ? name.substring(0, maxLength) + '...' : name;
|
||||
const truncatedName =
|
||||
name.length > maxLength ? name.substring(0, maxLength) + '...' : name;
|
||||
return `${truncatedName} ${value}${unit}`;
|
||||
},
|
||||
textStyle: {
|
||||
@ -538,13 +530,17 @@ onUnmounted(() => {
|
||||
/**
|
||||
* 构建单一流域的图表数据
|
||||
*/
|
||||
const buildSingleBasinChartData = (basin: BasinData, year: string): ChartDataItem => {
|
||||
const buildSingleBasinChartData = (
|
||||
basin: BasinData,
|
||||
year: string
|
||||
): ChartDataItem => {
|
||||
return {
|
||||
title: `${basin.baseName}`,
|
||||
baseid: basin.baseId, // 保存流域ID
|
||||
data: basin.fpFtpStatitcsVos.map((fish: FpFtpStatisticsVo) => ({
|
||||
name: fish.fishName,
|
||||
value: fish.fcnt
|
||||
value: fish.fcnt,
|
||||
ftp: fish.ftp
|
||||
}))
|
||||
};
|
||||
};
|
||||
@ -552,12 +548,17 @@ const buildSingleBasinChartData = (basin: BasinData, year: string): ChartDataIte
|
||||
/**
|
||||
* 构建全部流域的图表数据（包含流域对比图和各流域鱼类分布图）
|
||||
*/
|
||||
const buildAllBasinsChartData = (apiData: BasinData[], year: string): ChartDataItem[] => {
|
||||
const buildAllBasinsChartData = (
|
||||
apiData: BasinData[],
|
||||
year: string
|
||||
): ChartDataItem[] => {
|
||||
const charts: ChartDataItem[] = [];
|
||||
|
||||
// 1️⃣ 第一张：各流域总量对比图（使用 fpCount）
|
||||
const basinComparisonData = apiData
|
||||
.filter(basin => basin.fpFtpStatitcsVos && basin.fpFtpStatitcsVos.length > 0)
|
||||
.filter(
|
||||
basin => basin.fpFtpStatitcsVos && basin.fpFtpStatitcsVos.length > 0
|
||||
)
|
||||
.map(basin => ({
|
||||
name: basin.baseName,
|
||||
value: basin.fpCount,
|
||||
@ -613,7 +614,8 @@ const rebuildCharts = async () => {
|
||||
*/
|
||||
const controlCarousel = () => {
|
||||
// 判断是否需要停止跑马灯
|
||||
const shouldStop = baseid.value !== 'all' || originalChartData.value.length <= 1;
|
||||
const shouldStop =
|
||||
baseid.value !== 'all' || originalChartData.value.length <= 1;
|
||||
|
||||
if (shouldStop) {
|
||||
stopAutoPlay(); // 停止轮播，但不重置 currentIndex
|
||||
@ -636,12 +638,21 @@ const updateChartByBaseid = () => {
|
||||
|
||||
if (baseid.value === 'all') {
|
||||
// === 全部流域模式 ===
|
||||
originalChartData.value = buildAllBasinsChartData(cachedApiData.value, currentYear.value);
|
||||
originalChartData.value = buildAllBasinsChartData(
|
||||
cachedApiData.value,
|
||||
currentYear.value
|
||||
);
|
||||
} else {
|
||||
// === 单一流域模式 ===
|
||||
const targetBasin = cachedApiData.value.find(item => item.baseId === baseid.value);
|
||||
const targetBasin = cachedApiData.value.find(
|
||||
item => item.baseId === baseid.value
|
||||
);
|
||||
|
||||
if (!targetBasin || !targetBasin.fpFtpStatitcsVos || targetBasin.fpFtpStatitcsVos.length === 0) {
|
||||
if (
|
||||
!targetBasin ||
|
||||
!targetBasin.fpFtpStatitcsVos ||
|
||||
targetBasin.fpFtpStatitcsVos.length === 0
|
||||
) {
|
||||
hasData.value = false;
|
||||
originalChartData.value = [];
|
||||
renderChartData.value = []; // 清空渲染数据
|
||||
@ -649,7 +660,9 @@ const updateChartByBaseid = () => {
|
||||
return;
|
||||
}
|
||||
|
||||
originalChartData.value = [buildSingleBasinChartData(targetBasin, currentYear.value)];
|
||||
originalChartData.value = [
|
||||
buildSingleBasinChartData(targetBasin, currentYear.value)
|
||||
];
|
||||
}
|
||||
|
||||
// 先构建渲染数据
|
||||
@ -720,7 +733,6 @@ const getechartsdata = async (yearOne: string) => {
|
||||
currentYear.value = yearOne;
|
||||
// 根据 baseid 更新显示
|
||||
updateChartByBaseid();
|
||||
|
||||
} catch (error) {
|
||||
console.error('获取过鱼统计数据失败:', error);
|
||||
hasData.value = false;
|
||||
@ -755,40 +767,43 @@ const handlePanelChange1 = (data: any) => {
|
||||
* @param params ECharts 点击事件参数（可选）
|
||||
*/
|
||||
const handleChartClick = (item: ChartDataItem, index: number, params?: any) => {
|
||||
// 计算总数量和百分比
|
||||
const totalCount = getTotalAmount(item.data);
|
||||
const fishList = item.data.map(fish => ({
|
||||
name: fish.name,
|
||||
value: fish.value,
|
||||
percentage: totalCount > 0 ? ((fish.value / totalCount) * 100).toFixed(2) : '0.00'
|
||||
percentage:
|
||||
totalCount > 0 ? ((fish.value / totalCount) * 100).toFixed(2) : '0.00'
|
||||
}));
|
||||
|
||||
// 确定流域ID
|
||||
let clickedBaseId: string | undefined;
|
||||
let fishName = '';
|
||||
let ftp = '';
|
||||
|
||||
if (params && params.data && params.data.baseId) {
|
||||
// 情况1：总量对比图，点击了某个流域的数据项
|
||||
clickedBaseId = params.data.baseId;
|
||||
} else if (item.baseid && item.baseid !== 'all') {
|
||||
// 情况2：单一流域图，使用图表整体的 baseid
|
||||
clickedBaseId = item.baseid;
|
||||
} else {
|
||||
// 情况3：总量图表但未获取到具体数据项的 baseId（理论上不应该发生）
|
||||
clickedBaseId = item.baseid;
|
||||
}
|
||||
|
||||
// 设置弹框数据
|
||||
if (item.baseid !== 'all' && params && params.data) {
|
||||
fishName = params.data.name || '';
|
||||
ftp = params.data.ftp || '';
|
||||
}
|
||||
|
||||
modalTitle.value = `${item.title} - 详情`;
|
||||
modalData.value = {
|
||||
year: currentYear.value || '-',
|
||||
basinName: params?.name || item.title, // 优先使用被点击的数据项名称
|
||||
baseid: clickedBaseId, // 保存正确的流域ID
|
||||
basinName: params?.name || item.title,
|
||||
baseid: clickedBaseId,
|
||||
totalCount: totalCount,
|
||||
fishTypes: item.data.length,
|
||||
fishName,
|
||||
ftp,
|
||||
fishList: fishList
|
||||
};
|
||||
|
||||
// 打开弹框
|
||||
modalVisible.value = true;
|
||||
};
|
||||
|
||||
@ -801,7 +816,7 @@ const handleModalClose = () => {
|
||||
|
||||
watch(
|
||||
() => JidiSelectEventStore.selectedItem,
|
||||
(newVal) => {
|
||||
newVal => {
|
||||
if (newVal && newVal.wbsCode) {
|
||||
baseid.value = newVal.wbsCode;
|
||||
|
||||
@ -813,7 +828,6 @@ watch(
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -32,6 +32,7 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
|
||||
import { vpcGetKendoListCust } from '@/api/zxdzw';
|
||||
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
|
||||
import ZhiWuYuanDetailTable from './ZhiWuYuanDetailTable.vue';
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
|
||||
// 定义组件名（便于调试和递归）
|
||||
defineOptions({
|
||||
@ -50,7 +51,7 @@ const loading = ref(false);
|
||||
// 弹窗状态
|
||||
const modalVisible = ref(false);
|
||||
const modalJidi = ref('all');
|
||||
|
||||
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
|
||||
// 基地选项（用于弹窗中的下拉）
|
||||
const jidiOptions = ref<any[]>([]);
|
||||
|
||||
|
||||
@ -54,6 +54,7 @@ import Yanchengyulei from './TwoLayers/Yanchengyulei.vue';
|
||||
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
|
||||
import { wbsbGetKendoList, getDftYear, fishChanges2 } from '@/api/stdc';
|
||||
import moment from 'moment';
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
|
||||
defineOptions({
|
||||
name: 'alongFishMod'
|
||||
@ -108,7 +109,7 @@ const modalHbrvcd = ref('');
|
||||
const modalStateName = ref('');
|
||||
const modalSectionName = ref('');
|
||||
const modalStcd = ref('');
|
||||
|
||||
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
|
||||
// ==================== 图表相关 ====================
|
||||
|
||||
/**
|
||||
|
||||
@ -53,6 +53,8 @@ import { getVmsstbprpt, inOutOneGetKendoListCust } from '@/api/sw';
|
||||
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
|
||||
import churukushuiwen from './churukushuiwen.vue';
|
||||
import { MapClass } from '@/components/gis/map.class';
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
|
||||
// ==================== 组件基础配置 ====================
|
||||
// 定义组件名(便于调试和递归)
|
||||
defineOptions({
|
||||
@ -96,7 +98,7 @@ const modalVisible = ref(false); // 弹框显示状态
|
||||
const clickDataInfo = ref<any>(null); // 点击的数据点信息
|
||||
const stationName = ref(''); // 站点名称
|
||||
// ==================== 数据处理函数 ====================
|
||||
|
||||
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
|
||||
/**
|
||||
* 转换图表数据格式
|
||||
* 将后端返回的扁平数据结构转换为ECharts所需的双线数据格式
|
||||
|
||||
@ -53,7 +53,7 @@
|
||||
</SidePanelItem>
|
||||
|
||||
<!-- 设施详情弹框 -->
|
||||
<a-modal v-model:open="modalVisible" :title="'设施详情'" width="1536px" :footer="null">
|
||||
<a-modal v-model:open="modalVisibleone" :title="'设施详情'" width="1536px" :footer="null">
|
||||
<div v-if="currentItem" class="detail-container">
|
||||
<ArtsDetail :dataSource="currentItem" :index="getCurrentRealIndex()" />
|
||||
</div>
|
||||
@ -66,6 +66,7 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
|
||||
import ArtsDetail from '@/components/carouselIntroduce/ArtsDetail.vue';
|
||||
import { getMsstbprptKendoList } from '@/api/home';
|
||||
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
|
||||
// 定义组件名（便于调试和递归）
|
||||
defineOptions({
|
||||
@ -84,9 +85,9 @@ interface MediaItem {
|
||||
}
|
||||
|
||||
// 弹框控制
|
||||
const modalVisible = ref(false);
|
||||
const modalVisibleone = ref(false);
|
||||
const currentItem = ref<any>(null);
|
||||
|
||||
useDraggable(modalVisibleone, { boundary: true, resetOnOpen: true });
|
||||
// 加载状态
|
||||
const loading = ref(false);
|
||||
|
||||
@ -217,7 +218,7 @@ const handleItemClick = () => {
|
||||
description: item.description || '',
|
||||
title: item.title || ''
|
||||
}));
|
||||
modalVisible.value = true;
|
||||
modalVisibleone.value = true;
|
||||
};
|
||||
|
||||
// 处理下拉选择变化
|
||||
|
||||
@ -36,6 +36,8 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
|
||||
import { dwInfoGetKendoListCust } from "@/api/sw";
|
||||
import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
|
||||
import DiwenshuijianhuansheshileixingzuchengjijieruqingkuangTwoLayers from "./TwoLayers/diwenshuijianhuansheshileixingzuchengjijieruqingkuangTwoLayers.vue"
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
|
||||
const JidiSelectEventStore = useJidiSelectEventStore();
|
||||
// 定义组件名（便于调试和递归）
|
||||
defineOptions({
|
||||
@ -73,7 +75,7 @@ const baseid = ref('')
|
||||
const modalVisible = ref(false);
|
||||
const selectedItem: any = ref<DataString | null>(null);
|
||||
const twoLayersRef = ref();
|
||||
|
||||
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
|
||||
|
||||
const getListData = async () => {
|
||||
loading.value = true;
|
||||
|
||||
@ -68,6 +68,8 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
|
||||
import { fishDicGetKendoList, wbsbGetKendoList } from '@/api/yldc';
|
||||
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
|
||||
import ArtsDetail from '@/components/carouselIntroduce/ArtsDetail.vue';
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
|
||||
// 定义组件名（便于调试和递归）
|
||||
defineOptions({
|
||||
name: 'zengZhiZhanJieShaoMod'
|
||||
@ -87,7 +89,7 @@ let rvcd = ref('');
|
||||
// 弹框控制
|
||||
const modalVisible = ref(false);
|
||||
const currentItem = ref<any>(null);
|
||||
|
||||
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
|
||||
// 加载状态
|
||||
const loading = ref(false);
|
||||
|
||||
|
||||
@ -62,6 +62,8 @@ import { ref, onMounted, onUnmounted, computed } from 'vue';
|
||||
import SidePanelItem from '@/components/SidePanelItem/index.vue';
|
||||
import { msstbprptGetKendoList } from '@/api/yldc';
|
||||
import ArtsDetail from '@/components/carouselIntroduce/ArtsDetail.vue';
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
|
||||
// 定义组件名（便于调试和递归）
|
||||
defineOptions({
|
||||
name: 'zengZhiZhanJieShaoMod'
|
||||
@ -79,7 +81,7 @@ const baseUrl = import.meta.env.VITE_APP_ATTACHMENT_URL;
|
||||
// 弹框控制
|
||||
const modalVisible = ref(false);
|
||||
const currentItem = ref<any>(null);
|
||||
|
||||
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
|
||||
// 加载状态
|
||||
const loading = ref(false);
|
||||
|
||||
|
||||
@ -36,6 +36,8 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
|
||||
import { vmsstbprptGetKendoList } from '@/api/gyss'
|
||||
import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
|
||||
import FPVDDetailMD from './components/FPVDDetailMD.vue'
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
|
||||
// 定义组件名（便于调试和递归）
|
||||
defineOptions({
|
||||
name: 'guoyusheshijiansheqingkuang'
|
||||
@ -81,6 +83,7 @@ const loading = ref(false);
|
||||
const modalVisible = ref(false);
|
||||
const selectedFacility = ref<any>(null);
|
||||
const title = ref('');
|
||||
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
|
||||
// 处理卡片点击事件
|
||||
const handleCardClick = (facility: any) => {
|
||||
selectedFacility.value = facility;
|
||||
|
||||
@ -3,25 +3,49 @@
|
||||
<SidePanelItem title="过鱼设施">
|
||||
<a-spin :spinning="loading" tip="加载中...">
|
||||
<div class="facility-grid">
|
||||
<div v-for="facility in facilities" :key="facility.name" class="facility-card"
|
||||
@click="handleFacilityClick(facility)">
|
||||
<div style="width: 60px;height: 62px;display: flex;align-items: center;justify-content: center;">
|
||||
<div
|
||||
v-for="facility in facilities"
|
||||
:key="facility.name"
|
||||
class="facility-card"
|
||||
@click="handleFacilityClick(facility)"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
width: 60px;
|
||||
height: 62px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
"
|
||||
>
|
||||
<div class="facility-icon">
|
||||
<i style="color: #fff;" :class="facility.icon" type="icon-shengtailiuliang2"></i>
|
||||
<i
|
||||
style="color: #fff"
|
||||
:class="facility.icon"
|
||||
type="icon-shengtailiuliang2"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="facility-info">
|
||||
<div class="facility-name">{{ facility.name }}</div>
|
||||
<div style="font-size: 16px;"> <span class="facility-count">{{ facility.count
|
||||
}}</span><span>座</span></div>
|
||||
<div style="font-size: 16px">
|
||||
<span class="facility-count">{{ facility.count }}</span
|
||||
><span>座</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-spin>
|
||||
</SidePanelItem>
|
||||
<!-- 弹框 -->
|
||||
<a-modal v-model:open="modalVisible" :title="'过鱼设施'" :footer="null" width="1536px" @cancel="handleCloseModal">
|
||||
<a-modal
|
||||
v-model:open="modalVisible"
|
||||
:title="'过鱼设施'"
|
||||
:footer="null"
|
||||
width="1536px"
|
||||
@cancel="handleCloseModal"
|
||||
>
|
||||
<ModalPage v-if="currentFacility" :data="currentFacility" :jdId="'all'" />
|
||||
</a-modal>
|
||||
</template>
|
||||
@ -29,9 +53,11 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
|
||||
import SidePanelItem from '@/components/SidePanelItem/index.vue';
|
||||
import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
|
||||
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
|
||||
import { buildGetKendoListCust } from '@/api/gyss';
|
||||
import ModalPage from './ModalPage/index.vue'
|
||||
import ModalPage from './ModalPage/index.vue';
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
|
||||
// 定义组件名（便于调试和递归）
|
||||
defineOptions({
|
||||
name: 'qixidibaohugongzuokaizhanQK'
|
||||
@ -64,23 +90,23 @@ const facilities = ref([
|
||||
count: 0,
|
||||
icon: 'icon iconfont icon-map-gyssQita',
|
||||
key: 'FP_5'
|
||||
},
|
||||
|
||||
}
|
||||
]);
|
||||
const baseid = ref('')
|
||||
const baseid = ref('');
|
||||
// 弹框相关状态
|
||||
const modalVisible = ref(false);
|
||||
const currentFacility = ref<any>(null);
|
||||
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
|
||||
//获取页面数据
|
||||
const getData = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
let params = {
|
||||
"filter": {
|
||||
"logic": "and",
|
||||
"filters": []
|
||||
}
|
||||
filter: {
|
||||
logic: 'and',
|
||||
filters: []
|
||||
}
|
||||
};
|
||||
const res = await buildGetKendoListCust(params); //适配监控-VD
|
||||
let data = res?.data?.data || res?.data || [];
|
||||
|
||||
@ -91,15 +117,21 @@ const getData = async () => {
|
||||
|
||||
// 遍历接口返回的所有数据
|
||||
data.forEach(item => {
|
||||
const matchedFacility = facilities.value.find(facility => facility.key === item.sttpCode);
|
||||
const matchedFacility = facilities.value.find(
|
||||
facility => facility.key === item.sttpCode
|
||||
);
|
||||
if (matchedFacility) {
|
||||
// 如果在facilities中找到对应的key，累加到该设施
|
||||
matchedFacility.count += Number(item.built) + Number(item.building) || 0;
|
||||
matchedFacility.count +=
|
||||
Number(item.built) + Number(item.building) || 0;
|
||||
} else {
|
||||
// 如果没有找到对应的key，累加到FP_5（其他）
|
||||
const otherFacility = facilities.value.find(facility => facility.key === 'FP_5');
|
||||
const otherFacility = facilities.value.find(
|
||||
facility => facility.key === 'FP_5'
|
||||
);
|
||||
if (otherFacility) {
|
||||
otherFacility.count += Number(item.built) + Number(item.building) || 0;
|
||||
otherFacility.count +=
|
||||
Number(item.built) + Number(item.building) || 0;
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -108,13 +140,11 @@ const getData = async () => {
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
// 点击处理函数
|
||||
const handleFacilityClick = (facility: any) => {
|
||||
currentFacility.value = facility;
|
||||
modalVisible.value = true;
|
||||
|
||||
|
||||
};
|
||||
// 关闭弹框
|
||||
const handleCloseModal = () => {
|
||||
@ -124,22 +154,19 @@ const handleCloseModal = () => {
|
||||
|
||||
watch(
|
||||
() => JidiSelectEventStore.selectedItem,
|
||||
(newVal) => {
|
||||
newVal => {
|
||||
baseid.value = newVal.wbsCode;
|
||||
getData()
|
||||
getData();
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
// 页面加载时执行
|
||||
onMounted(() => {
|
||||
// 延迟初始化，确保容器已渲染
|
||||
|
||||
});
|
||||
|
||||
// 组件卸载时清理
|
||||
onUnmounted(() => {
|
||||
|
||||
});
|
||||
onUnmounted(() => {});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -148,7 +175,9 @@ onUnmounted(() => {
|
||||
flex-flow: wrap;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
|
||||
Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji,
|
||||
Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
|
||||
}
|
||||
|
||||
.facility-card {
|
||||
|
||||
@ -3,13 +3,25 @@
|
||||
<SidePanelItem title="过鱼设施介绍">
|
||||
<!-- Loading 和空状态容器 -->
|
||||
<a-spin :spinning="loading" class="carousel-container-wrapper">
|
||||
<div v-if="hasData" class="container" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
|
||||
<div
|
||||
v-if="hasData"
|
||||
class="container"
|
||||
@mouseenter="handleMouseEnter"
|
||||
@mouseleave="handleMouseLeave"
|
||||
>
|
||||
<!-- 跑马灯轨道容器 -->
|
||||
<div class="carousel-track" :class="{ 'no-transition': isTransitioning }"
|
||||
:style="{ transform: `translateX(-${currentIndex * 100}%)` }">
|
||||
<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)">
|
||||
<div
|
||||
v-for="(item, index) in renderMediaData"
|
||||
:key="index"
|
||||
class="carousel-item"
|
||||
@click="handleItemClick(originalMediaData)"
|
||||
>
|
||||
<!-- 图片 -->
|
||||
<img :src="item.url" :alt="item.stnm" loading="lazy" />
|
||||
<!-- 说明文字（随媒体项移动） -->
|
||||
@ -19,36 +31,50 @@
|
||||
|
||||
<!-- 面板指示器（固定在底部右侧） -->
|
||||
<div class="pagination-dots-fixed">
|
||||
<span v-for="(dot, index) in originalMediaData" :key="index" class="dot"
|
||||
:class="{ active: currentRealIndex === index }" @click="goToSlide(index)"></span>
|
||||
<span
|
||||
v-for="(dot, index) in originalMediaData"
|
||||
:key="index"
|
||||
class="dot"
|
||||
:class="{ active: currentRealIndex === index }"
|
||||
@click="goToSlide(index)"
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 暂无数据状态 -->
|
||||
|
||||
<!-- 独立的文字说明区域（随跑马灯切换而变化） -->
|
||||
<div v-if="hasData" class="description-text" @click="handleItemClick(originalMediaData)">
|
||||
<div
|
||||
v-if="hasData"
|
||||
class="description-text"
|
||||
@click="handleItemClick(originalMediaData)"
|
||||
>
|
||||
{{ currentDescription }}
|
||||
</div>
|
||||
<a-empty v-else description="暂无数据" :image="simpleImage" />
|
||||
</a-spin>
|
||||
</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' :index="getCurrentRealIndex()" />
|
||||
<ArtsDetail :dataSource="currentItem" :index="getCurrentRealIndex()" />
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, onUnmounted, computed, watch } from 'vue';
|
||||
import SidePanelItem from '@/components/SidePanelItem/index.vue';
|
||||
import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
|
||||
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
|
||||
import { fpVmsstbprptGetKendoList } from '@/api/gyss';
|
||||
import ArtsDetail from '@/components/carouselIntroduce/ArtsDetail.vue';
|
||||
import { Empty } from 'ant-design-vue';
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
|
||||
// ==================== 类型定义 ====================
|
||||
interface MediaItem {
|
||||
@ -79,6 +105,7 @@ const baseUrl = import.meta.env.VITE_APP_ATTACHMENT_URL;
|
||||
// 弹框控制
|
||||
const modalVisible = ref(false);
|
||||
const currentItem = ref<any>(null);
|
||||
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
|
||||
// ==================== 数据状态 ====================
|
||||
// 加载状态
|
||||
const loading = ref(false);
|
||||
@ -247,12 +274,14 @@ const getCarouselData = async () => {
|
||||
operator: 'isnotnull',
|
||||
dataType: 'string'
|
||||
},
|
||||
baseid.value !== 'all' ? {
|
||||
baseid.value !== 'all'
|
||||
? {
|
||||
field: 'baseId',
|
||||
operator: 'eq',
|
||||
dataType: 'string',
|
||||
value: baseid.value
|
||||
} : null
|
||||
}
|
||||
: null
|
||||
].filter(Boolean)
|
||||
},
|
||||
select: ['introduce', 'logo', 'stnm', 'precis'],
|
||||
@ -298,7 +327,7 @@ onUnmounted(() => {
|
||||
// ==================== 监听器 ====================
|
||||
watch(
|
||||
() => JidiSelectEventStore.selectedItem,
|
||||
(newVal) => {
|
||||
newVal => {
|
||||
if (newVal?.wbsCode) {
|
||||
baseid.value = newVal.wbsCode;
|
||||
} else {
|
||||
@ -391,7 +420,7 @@ const handleItemClick = (item: any) => {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background-color: #D8D8D8;
|
||||
background-color: #d8d8d8;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
|
||||
@ -49,6 +49,7 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
|
||||
import { environmentalProtectionConstruction } from '@/api/home';
|
||||
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
|
||||
import HuanbaoModTwoLayers from './TwoLayers/HuanbaoModTwoLayers.vue';
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
|
||||
// 定义组件名（便于调试和递归）
|
||||
defineOptions({
|
||||
@ -82,7 +83,7 @@ const modalRes = ref({
|
||||
bldstt: '',
|
||||
hydrodtin: '1'
|
||||
});
|
||||
|
||||
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
|
||||
// 获取数据
|
||||
const getData = async () => {
|
||||
if (!baseid.value) return;
|
||||
|
||||
@ -68,6 +68,7 @@ import svg_liuliangjiancezhan from '@/assets/svg/liuliangjiancezhan.svg';
|
||||
import svg_shuizhijiancezhan from '@/assets/svg/shuizhijiancezhan.svg';
|
||||
import svg_zengzhizhanshuizhizhan from '@/assets/svg/zengzhizhanshuizhizhan.svg';
|
||||
import svg_qixidi from '@/assets/svg/qixidi.svg';
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
|
||||
defineOptions({
|
||||
name: 'huanbaoMod'
|
||||
@ -103,7 +104,7 @@ const baseid = ref('');
|
||||
// 弹框相关状态
|
||||
const modalVisible = ref(false);
|
||||
const currentFacility = ref<IFacility | null>(null);
|
||||
|
||||
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
|
||||
const fetchData = () => {
|
||||
let params = {
|
||||
filter: {
|
||||
|
||||
@ -316,7 +316,8 @@ import { postIdUrl } from '@/api/mapModal';
|
||||
import dayjs from 'dayjs';
|
||||
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
|
||||
import videoCover from '@/assets/images/videFm.jpg';
|
||||
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
;
|
||||
const baseUrl = import.meta.env.VITE_APP_ATTACHMENT_URL;
|
||||
|
||||
// ==================== Props ====================
|
||||
@ -397,7 +398,7 @@ const calendarValue = ref(searchData.value.month);
|
||||
const detailModalVisible = ref(false);
|
||||
const detailActiveKey = ref('2');
|
||||
const detailDate = ref('');
|
||||
|
||||
useDraggable(detailModalVisible, { boundary: true, resetOnOpen: true })
|
||||
// 日历状态映射（运行/未运行）
|
||||
const calendarStatusMap: Record<
|
||||
string,
|
||||
|
||||
@ -51,6 +51,7 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
|
||||
import AISPTK from './AISPTK.vue';
|
||||
import { getAiGyssList } from '@/api/zngj';
|
||||
import dayjs from 'dayjs';
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
|
||||
// 定义组件名（便于调试和递归）
|
||||
defineOptions({
|
||||
@ -65,7 +66,7 @@ const panelDetail = ref<any>({});
|
||||
// ==================== 弹框状态 ====================
|
||||
const modalVisible = ref(false);
|
||||
const currentAction = ref('AI_5006');
|
||||
|
||||
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
|
||||
const lyName = computed(() => baseid.value === '02' ? '升鱼斗运行' : '升鱼机运行');
|
||||
|
||||
// ==================== 日期选择器配置 ====================
|
||||
|
||||
@ -40,6 +40,7 @@ import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
|
||||
import SidePanelItem from "@/components/SidePanelItem/index.vue";
|
||||
import { getStllGaojingList } from '@/api/zngj';
|
||||
import ModeGaoJing from './ModeGaoJing.vue';
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
|
||||
// 定义组件名（便于调试和递归）
|
||||
defineOptions({
|
||||
@ -51,7 +52,7 @@ const baseid = ref('');
|
||||
const dataLoading = ref(false);
|
||||
const isModalOpen = ref(false);
|
||||
const currentWarnState = ref('');
|
||||
|
||||
useDraggable(isModalOpen, { boundary: true, resetOnOpen: true });
|
||||
const data = ref([
|
||||
{
|
||||
name:'正常',
|
||||
|
||||
@ -38,6 +38,7 @@ import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
|
||||
import SidePanelItem from "@/components/SidePanelItem/index.vue";
|
||||
import { getShuizhiGaojingList } from '@/api/zngj';
|
||||
import ModeGaoJing from './ModeGaoJing.vue';
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
|
||||
defineOptions({
|
||||
name: "shuizhijianceshuju",
|
||||
@ -51,7 +52,7 @@ const defaultValue = ref<string>('0');
|
||||
// 弹框状态
|
||||
const modalVisible = ref(false);
|
||||
const currentWarnState = ref('');
|
||||
|
||||
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
|
||||
const handleCardClick = (warnState: string) => {
|
||||
currentWarnState.value = warnState;
|
||||
modalVisible.value = true;
|
||||
|
||||
@ -68,6 +68,7 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
|
||||
import LsstjkTk from './LsstjkTk.vue';
|
||||
import { wbsbGetKendoList, getEvnmAutoMonitor } from '@/api/stdc';
|
||||
import moment from 'moment';
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
|
||||
// 定义组件名
|
||||
defineOptions({
|
||||
@ -81,7 +82,7 @@ const dataLoading = ref(false);
|
||||
// ==================== 弹框状态 ====================
|
||||
const modalVisible = ref(false);
|
||||
const currentOrderIndex = ref('16');
|
||||
|
||||
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
|
||||
// ==================== 响应式变量定义 ====================
|
||||
// 选择器配置
|
||||
const select = ref({
|
||||
|
||||
@ -70,6 +70,7 @@ import dayjs from 'dayjs';
|
||||
import { ZoomInOutlined } from '@ant-design/icons-vue';
|
||||
import type { Dayjs } from 'dayjs';
|
||||
import MonthlyAverage from '../monthlyAverage.vue';
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
|
||||
defineOptions({
|
||||
name: 'MonthlyAverageMaxModal'
|
||||
@ -101,7 +102,7 @@ const detailModalData = ref<any>(null);
|
||||
// 选择器相关 - 内部状态管理
|
||||
const selectValue = ref('');
|
||||
const selectOptions = ref<any[]>([]);
|
||||
|
||||
useDraggable(detailModalVisible, { boundary: true, resetOnOpen: true });
|
||||
// 树形选择器展开状态管理
|
||||
const treeExpandedKeys = ref<string[]>([])
|
||||
const nodeMap = new Map<string, { node: any; parentKey: string | null }>()
|
||||
|
||||
@ -41,6 +41,7 @@ import dayjs from 'dayjs'
|
||||
import {
|
||||
ZoomInOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
|
||||
defineOptions({
|
||||
name: 'monthlyAvgWaterTemCompareHistory'
|
||||
@ -68,7 +69,8 @@ const stationName = ref('');
|
||||
|
||||
// 图表放大展示弹框状态
|
||||
const zoomModalVisible = ref(false);
|
||||
|
||||
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
|
||||
useDraggable(zoomModalVisible, { boundary: true, resetOnOpen: true });
|
||||
// 选择器配置
|
||||
const select = ref({
|
||||
show: true,
|
||||
|
||||
@ -3,36 +3,66 @@
|
||||
<SidePanelItem title="栖息地保护工作开展情况">
|
||||
<a-spin :spinning="loading" tip="加载中...">
|
||||
<div class="facility-grid">
|
||||
<div v-for="facility in facilities" :key="facility.name" class="facility-card"
|
||||
@click="handleFacilityClick(facility)">
|
||||
<div style="width: 60px;height: 62px;display: flex;align-items: center;justify-content: center;">
|
||||
<div
|
||||
v-for="facility in facilities"
|
||||
:key="facility.name"
|
||||
class="facility-card"
|
||||
@click="handleFacilityClick(facility)"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
width: 60px;
|
||||
height: 62px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
"
|
||||
>
|
||||
<div class="facility-icon">
|
||||
<i style="color: #fff;" :class="facility.icon" type="icon-shengtailiuliang2"></i>
|
||||
<i
|
||||
style="color: #fff"
|
||||
:class="facility.icon"
|
||||
type="icon-shengtailiuliang2"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="facility-info">
|
||||
<div class="facility-name">{{ facility.name }}</div>
|
||||
<div style="font-size: 16px;"> <span class="facility-count">{{ facility.count
|
||||
}}</span><span>个</span></div>
|
||||
<div style="font-size: 16px">
|
||||
<span class="facility-count">{{ facility.count }}</span
|
||||
><span>个</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-spin>
|
||||
</SidePanelItem>
|
||||
<!-- 弹框 -->
|
||||
<a-modal v-model:open="modalVisible" :title="'栖息地保护工作开展情况'" :footer="null" width="1536px" @cancel="handleCloseModal">
|
||||
<QixidiheduanjianceqingkuangEJ v-if="currentFacility" :activeKey="currentFacility.sttpCode" :tabs="facilities"
|
||||
:baseId="baseid" />
|
||||
<a-modal
|
||||
v-model:open="modalVisible"
|
||||
:title="'栖息地保护工作开展情况'"
|
||||
:footer="null"
|
||||
width="1536px"
|
||||
@cancel="handleCloseModal"
|
||||
>
|
||||
<QixidiheduanjianceqingkuangEJ
|
||||
v-if="currentFacility"
|
||||
:activeKey="currentFacility.sttpCode"
|
||||
:tabs="facilities"
|
||||
:baseId="baseid"
|
||||
/>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
|
||||
import SidePanelItem from '@/components/SidePanelItem/index.vue';
|
||||
import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
|
||||
import { fhGetKendoListCust } from '@/api/qxd'
|
||||
import QixidiheduanjianceqingkuangEJ from "./qixidiheduanjianceqingkuangEJ/index.vue"
|
||||
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
|
||||
import { fhGetKendoListCust } from '@/api/qxd';
|
||||
import QixidiheduanjianceqingkuangEJ from './qixidiheduanjianceqingkuangEJ/index.vue';
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
|
||||
// 定义组件名（便于调试和递归）
|
||||
defineOptions({
|
||||
name: 'qixidibaohugongzuokaizhanQK'
|
||||
@ -65,43 +95,47 @@ const facilities = ref([
|
||||
count: 0,
|
||||
icon: 'icon iconfont icon-shipinjiankongshebei',
|
||||
sttpCode: 'VD'
|
||||
},
|
||||
|
||||
}
|
||||
]);
|
||||
const baseid = ref('')
|
||||
const baseid = ref('');
|
||||
// 弹框相关状态
|
||||
const modalVisible = ref(false);
|
||||
const currentFacility = ref<any>(null);
|
||||
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
|
||||
//获取页面数据
|
||||
const getData = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
let params = {
|
||||
"filter": {
|
||||
"logic": "and",
|
||||
"filters": [
|
||||
baseid.value != 'all' ? {
|
||||
"field": "baseId",
|
||||
"operator": "eq",
|
||||
"dataType": "string",
|
||||
"value": baseid.value
|
||||
} : null
|
||||
filter: {
|
||||
logic: 'and',
|
||||
filters: [
|
||||
baseid.value != 'all'
|
||||
? {
|
||||
field: 'baseId',
|
||||
operator: 'eq',
|
||||
dataType: 'string',
|
||||
value: baseid.value
|
||||
}
|
||||
: null
|
||||
].filter(Boolean)
|
||||
},
|
||||
"group": [
|
||||
group: [
|
||||
{
|
||||
"dir": "asc",
|
||||
"field": "sttpCode"
|
||||
dir: 'asc',
|
||||
field: 'sttpCode'
|
||||
}
|
||||
],
|
||||
"groupResultFlat": true
|
||||
}
|
||||
groupResultFlat: true
|
||||
};
|
||||
const res = await fhGetKendoListCust(params); //适配监控-VD
|
||||
let data = res?.data?.data || res?.data || [];
|
||||
|
||||
// 根据接口返回的数据更新 facilities 的 count
|
||||
facilities.value.forEach(facility => {
|
||||
const matchedItem = data.find(item => item.sttpCode === facility.sttpCode);
|
||||
const matchedItem = data.find(
|
||||
item => item.sttpCode === facility.sttpCode
|
||||
);
|
||||
if (matchedItem) {
|
||||
facility.count = matchedItem.count_sttpCode || 0;
|
||||
} else {
|
||||
@ -113,13 +147,11 @@ const getData = async () => {
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
// 点击处理函数
|
||||
const handleFacilityClick = (facility: any) => {
|
||||
currentFacility.value = facility;
|
||||
modalVisible.value = true;
|
||||
|
||||
|
||||
};
|
||||
// 关闭弹框
|
||||
const handleCloseModal = () => {
|
||||
@ -129,22 +161,19 @@ const handleCloseModal = () => {
|
||||
|
||||
watch(
|
||||
() => JidiSelectEventStore.selectedItem,
|
||||
(newVal) => {
|
||||
newVal => {
|
||||
baseid.value = newVal.wbsCode;
|
||||
getData()
|
||||
getData();
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
// 页面加载时执行
|
||||
onMounted(() => {
|
||||
// 延迟初始化，确保容器已渲染
|
||||
|
||||
});
|
||||
|
||||
// 组件卸载时清理
|
||||
onUnmounted(() => {
|
||||
|
||||
});
|
||||
onUnmounted(() => {});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -153,7 +182,9 @@ onUnmounted(() => {
|
||||
flex-flow: wrap;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
|
||||
Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji,
|
||||
Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
|
||||
}
|
||||
|
||||
.facility-card {
|
||||
|
||||
@ -57,6 +57,8 @@ import type { ECharts } from 'echarts';
|
||||
import { msstbprptGetKendoList } from '@/api/stll';
|
||||
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
|
||||
import STLLXFFS from './TwoLayer/STLLXFFS.vue';
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
|
||||
// 定义组件名（便于调试和递归）
|
||||
defineOptions({
|
||||
name: 'xieFangFangShi'
|
||||
@ -78,7 +80,7 @@ const apiRawData = ref<any[]>([]); // 保存原始 API 数据
|
||||
const modalVisible = ref(false);
|
||||
const modalTitle = ref('');
|
||||
const selectedData = ref<any>(null);
|
||||
|
||||
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
|
||||
// 颜色配置（根据图片配色）
|
||||
const colors = [
|
||||
'#9556a4', // 基荷发电 - 紫色
|
||||
|
||||
@ -38,6 +38,8 @@ import type { ECharts } from 'echarts';
|
||||
import { vmsstbprptGetKendoList } from '@/api/stll';
|
||||
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
|
||||
import FBQKTwolayer from './TwoLayer/FenBuQingKuangTwoLayer.vue';
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
|
||||
// 定义组件名
|
||||
defineOptions({
|
||||
name: 'XieFangFenBu'
|
||||
@ -59,7 +61,7 @@ const wbsCode = ref('');
|
||||
const modalVisible = ref(false);
|
||||
const selectData = ref(''); // 选中的设施类型名称
|
||||
const jidiName = ref(''); // 选中的基地名称
|
||||
|
||||
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
|
||||
// 设施类型配置
|
||||
const typeName = [
|
||||
{ label: '生态放流孔', eqtp: 'EQ_1' },
|
||||
|
||||
@ -105,6 +105,8 @@ import { useMapViewStore } from '@/modules/map/stores/map-view.store';
|
||||
import STLLXFFS from './TwoLayer/ShengTaiLiuLiangDaBQKTwoLayer.vue';
|
||||
import ModalYkzhbzdjcgz from './TwoLayer/ModalYkzhbzdjcgz.vue';
|
||||
import HuanbaoZDJCGZKZ from '@/modules/huanbaozdjcgzkzQK/index.vue';
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
|
||||
// 定义组件名（便于调试和递归）
|
||||
defineOptions({
|
||||
name: 'shengtaidabiaoMod'
|
||||
@ -149,7 +151,8 @@ const modalVisible = ref(false);
|
||||
const modalTitle = ref('');
|
||||
const selectedItem = ref<any>(null);
|
||||
const huanbaoModalVisible = ref(false);
|
||||
|
||||
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
|
||||
useDraggable(huanbaoModalVisible, { boundary: true, resetOnOpen: true });
|
||||
// 处理电站数量点击事件
|
||||
const handleStationClick = () => {
|
||||
huanbaoModalVisible.value = true;
|
||||
|
||||
@ -67,6 +67,8 @@ import { eqqecRateCount, evnmAutoMonitorGetKendoListCust } from '@/api/stll';
|
||||
import ModalYkzhbzdjcgz from '../shengtaidabiaoMod/TwoLayer/ModalYkzhbzdjcgz.vue';
|
||||
import STLLXFFS from './TwoLayer/STLLXFFS.vue'
|
||||
import { useMapViewStore } from '@/modules/map/stores/map-view.store';
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
|
||||
// 定义组件名（便于调试和递归）
|
||||
defineOptions({
|
||||
name: 'shengtaidabiaoMod'
|
||||
@ -604,6 +606,8 @@ watch(
|
||||
const detailModalVisible = ref(false);
|
||||
const detailModalTitle = ref('');
|
||||
const detailData = ref<any[]>([]);
|
||||
useDraggable(huanbaoModalVisible, { boundary: true, resetOnOpen: true });
|
||||
useDraggable(detailModalVisible, { boundary: true, resetOnOpen: true });
|
||||
const detailColumns = ref([
|
||||
{
|
||||
title: mode.value === 'top' ? '基地名称' : '调节性能',
|
||||
|
||||
@ -68,6 +68,8 @@ import { eqqecRateCount, evnmAutoMonitorGetKendoListCust } from '@/api/stll';
|
||||
import ModalYkzhbzdjcgz from '../shengtaidabiaoMod/TwoLayer/ModalYkzhbzdjcgz.vue';
|
||||
import STLLXFFS from './TwoLayer/STLLXFFS.vue'
|
||||
import { useMapViewStore } from '@/modules/map/stores/map-view.store';
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
|
||||
// 定义组件名（便于调试和递归）
|
||||
defineOptions({
|
||||
name: 'shengtaidabiaoMod'
|
||||
@ -97,6 +99,7 @@ const huanbaoModalVisible = ref(false);
|
||||
const handleStationClick = () => {
|
||||
huanbaoModalVisible.value = true;
|
||||
};
|
||||
|
||||
// 加载数据
|
||||
const loadData = async () => {
|
||||
spinning.value = true;
|
||||
@ -633,6 +636,8 @@ const detailColumns = ref([
|
||||
watch(mode, () => {
|
||||
loadData();
|
||||
});
|
||||
useDraggable(huanbaoModalVisible, { boundary: true, resetOnOpen: true });
|
||||
useDraggable(detailModalVisible, { boundary: true, resetOnOpen: true });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -62,6 +62,8 @@ 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';
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
|
||||
// 定义组件名（便于调试和递归）
|
||||
defineOptions({
|
||||
name: 'diwenshuijianhuansheshileixingzuchengjijieruqingkuang'
|
||||
@ -96,6 +98,7 @@ const isTransitioning = ref(false);
|
||||
// 弹框控制
|
||||
const modalVisible = ref(false);
|
||||
const currentItem = ref<any>(null);
|
||||
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
|
||||
// 初始化渲染数组（克隆首尾项）
|
||||
const initRenderData = () => {
|
||||
const length = originalMediaData.value.length;
|
||||
|
||||
@ -43,6 +43,7 @@ import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
|
||||
import YaerAverage from './TwoLayers/yaerAverage.vue';
|
||||
|
||||
import { MapClass } from '@/components/gis/map.class';
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
|
||||
const JidiSelectEventStore = useJidiSelectEventStore();
|
||||
// 水温年内分布数据（响应式）
|
||||
@ -52,7 +53,7 @@ const showemit = ref(true);
|
||||
// 弹框相关状态
|
||||
const modalVisible = ref(false);
|
||||
const currentData = ref<any>({});
|
||||
|
||||
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
|
||||
const chartRef = ref<HTMLElement | null>(null);
|
||||
let chartInstance: echarts.ECharts | null = null;
|
||||
// 选择器配置
|
||||
|
||||
@ -27,6 +27,7 @@ import { ref, watch } from 'vue';
|
||||
import { getVmsstbprptKendoList } from '@/api/home';
|
||||
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
|
||||
import ShuiDianKaiFQKTwoLayer from './TwoLayer/ShuiDianKaiFQKTwoLayer.vue';
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
|
||||
defineOptions({
|
||||
name: 'DataTable'
|
||||
@ -43,7 +44,7 @@ const tableData = ref<any[]>([]);
|
||||
|
||||
const modalVisible = ref(false);
|
||||
const modalProps = ref<any>({});
|
||||
|
||||
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
|
||||
const openDialog = (record: any) => {
|
||||
const currentJidiInfo = JidiSelectEventStore.selectedItem;
|
||||
const isAll = currentJidiInfo?.wbsCode === 'all';
|
||||
|
||||
@ -68,6 +68,7 @@ import SsstdcgkTk from './SsstdcgkTk.vue';
|
||||
import { wbsbGetKendoList, getDftYear, getWeFisht } from '@/api/stdc';
|
||||
import moment from 'moment';
|
||||
import { Label } from 'cesium';
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
|
||||
// 定义组件名
|
||||
defineOptions({
|
||||
@ -80,7 +81,7 @@ const dataLoading = ref(false);
|
||||
|
||||
// ==================== 弹框状态 ====================
|
||||
const modalVisible = ref(false);
|
||||
|
||||
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
|
||||
// ==================== 响应式变量定义 ====================
|
||||
// 选择器配置
|
||||
const select = ref({
|
||||
|
||||
@ -40,6 +40,8 @@ import SidePanelItem from "@/components/SidePanelItem/index.vue";
|
||||
import { getKendoListCust, baseEvnmAutoMonitorGetKendoListCust } from "@/api/sw";
|
||||
import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
|
||||
import ShuiwenjiancegongzuoEJ from "./shuiwenjiancegongzuoEJ.vue"
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
|
||||
const JidiSelectEventStore = useJidiSelectEventStore();
|
||||
// 定义组件名（便于调试和递归）
|
||||
defineOptions({
|
||||
@ -68,7 +70,7 @@ const loading = ref(false);
|
||||
// 弹框相关状态
|
||||
const modalVisible = ref(false);
|
||||
const currentFacility = ref<any>(null);
|
||||
|
||||
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
|
||||
// 点击处理函数
|
||||
const handleFacilityClick = (facility: any) => {
|
||||
// console.log(facility);
|
||||
|
||||
@ -33,6 +33,8 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
|
||||
import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
|
||||
import { msstbprptGetKendoList } from '@/api/sz'
|
||||
import ShuiwenjiancegongzuoEJ from "./shuiwenjiancegongzuoEJ.vue"
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
|
||||
// 定义组件名（便于调试和递归）
|
||||
defineOptions({
|
||||
name: 'shuizhijiancegongzuoQK'
|
||||
@ -74,7 +76,7 @@ const modalVisible = ref(false);
|
||||
const currentFacility = ref<any>(null);
|
||||
const baseid = ref("")
|
||||
|
||||
|
||||
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
|
||||
//获取水质监测工作开展情况数据
|
||||
const getDataList = async () => {
|
||||
loading.value = true;
|
||||
|
||||
@ -460,9 +460,7 @@ const getSelectConfig = async () => {
|
||||
return indexA - indexB;
|
||||
});
|
||||
select.value.options = filterSelectOptions(dataMapNameArr);
|
||||
if (baseid.value === 'all') {
|
||||
select.value.value = 'SJLY1U';
|
||||
} else if (filterSelectOptions(dataMapNameArr)[0]?.children) {
|
||||
if (filterSelectOptions(dataMapNameArr)[0]?.children) {
|
||||
select.value.value =
|
||||
filterSelectOptions(dataMapNameArr)[0]?.children[0]?.value;
|
||||
} else if (filterSelectOptions(dataMapNameArr)[0]?.value) {
|
||||
|
||||
@ -396,6 +396,7 @@ import { postIdUrl } from '@/api/mapModal';
|
||||
import dayjs from 'dayjs';
|
||||
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
|
||||
import videoCover from '@/assets/images/videFm.jpg';
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
|
||||
const baseUrl = import.meta.env.VITE_APP_ATTACHMENT_URL;
|
||||
|
||||
@ -489,7 +490,7 @@ const detailType = ref('');
|
||||
const detailDataType = computed(() => detailActiveKey.value);
|
||||
const qingpiaoModalVisible = ref(false);
|
||||
const qingpiaoFids = ref<string[]>([]);
|
||||
|
||||
useDraggable(detailModalVisible, { boundary: true, resetOnOpen: true });
|
||||
// 日历状态映射（与React端一致）
|
||||
const calendarStatusMap: Record<
|
||||
string,
|
||||
|
||||
@ -50,6 +50,7 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
|
||||
import AISBTK from './AISBTK.vue';
|
||||
import { getAisbdbyxList } from '@/api/zngj';
|
||||
import dayjs from 'dayjs';
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
|
||||
// 定义组件名（便于调试和递归）
|
||||
defineOptions({
|
||||
@ -104,7 +105,7 @@ const handleCardClick = (tabIdx: string) => {
|
||||
const handleModalClose = () => {
|
||||
modalVisible.value = false;
|
||||
};
|
||||
|
||||
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
|
||||
// ==================== 获取卡片统计数据 ====================
|
||||
const getCardData = async () => {
|
||||
if (!datetimePicker.value.value || !baseid.value) return;
|
||||
|
||||
@ -50,6 +50,8 @@ import {
|
||||
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
|
||||
import { MapClass } from '@/components/gis/map.class';
|
||||
import ZengZhiZhanQingKuangTwoLayers from './TwoLayers/ZengZhiZhanQingKuangTwoLayers.vue';
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
|
||||
const JidiSelectEventStore = useJidiSelectEventStore();
|
||||
|
||||
const baseid = ref('');
|
||||
@ -65,7 +67,7 @@ let chartInstance: ECharts | null = null;
|
||||
// 弹窗控制
|
||||
const dialogVisible = ref(false);
|
||||
const dialogData = ref<any>(null);
|
||||
|
||||
useDraggable(dialogVisible, { boundary: true, resetOnOpen: true });
|
||||
// 当前选中的站点选项
|
||||
const selectedOption = computed(() => {
|
||||
return select.value.options.find(
|
||||
|
||||
@ -63,6 +63,8 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
|
||||
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
|
||||
import { msstbprptGetKendoList } from '@/api/zzfl';
|
||||
import ArtsDetail from '@/components/carouselIntroduce/ArtsDetail.vue';
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
|
||||
// 定义组件名（便于调试和递归）
|
||||
defineOptions({
|
||||
name: 'zengZhiZhanJieShaoMod'
|
||||
@ -103,7 +105,7 @@ const isHovering = ref(false);
|
||||
|
||||
// 是否正在切换动画中（用于禁用transition）
|
||||
const isTransitioning = ref(false);
|
||||
|
||||
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
|
||||
// 初始化渲染数组（克隆首尾项）
|
||||
const initRenderData = () => {
|
||||
const length = originalMediaData.value.length;
|
||||
|
||||
@ -60,6 +60,8 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
|
||||
import { overviewGetKendoListCust } from '@/api/zzfl';
|
||||
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
|
||||
import WholeValuedStationOverviewDetail from "./WholeValuedStationOverviewDetail/index.vue"
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
|
||||
// 定义组件名（便于调试和递归）
|
||||
defineOptions({
|
||||
name: 'zengzhizhanjiansheyunxing'
|
||||
@ -68,6 +70,7 @@ const JidiSelectEventStore = useJidiSelectEventStore();
|
||||
const baseid = ref('');
|
||||
const loading = ref(false);
|
||||
const dialogVisible = ref(false);
|
||||
useDraggable(dialogVisible, { boundary: true, resetOnOpen: true });
|
||||
const dialogTitle = ref('增殖站概况');
|
||||
const datetimePicker = ref({
|
||||
show: true,
|
||||
|
||||
@ -27,6 +27,7 @@ export const useShuJuTianBaoStore = defineStore('shuJuTianBao', () => {
|
||||
try {
|
||||
baseLoading.value = true;
|
||||
const res = await getBaseDropdown({});
|
||||
// debugger
|
||||
if (res.data && Array.isArray(res.data)) {
|
||||
const list = [...res.data];
|
||||
// 直接赋值给 ref，触发响应式更新
|
||||
@ -58,10 +59,15 @@ export const useShuJuTianBaoStore = defineStore('shuJuTianBao', () => {
|
||||
}
|
||||
};
|
||||
// 获取电站列表
|
||||
const getEngOption = async (rvcd: string) => {
|
||||
const getEngOption = async (rvcd: string, type: string) => {
|
||||
try {
|
||||
engLoading.value = true;
|
||||
const param = rvcd === 'all' ? {} : { reachcd: rvcd };
|
||||
let param:any
|
||||
if (type == 'baseId') {
|
||||
param = rvcd === 'all' ? {} : { baseId: rvcd };
|
||||
} else {
|
||||
param = rvcd === 'all' ? {} : { reachcd: rvcd };
|
||||
}
|
||||
const res = await getEngInfoDropdown(param);
|
||||
if (res.data && Array.isArray(res.data)) {
|
||||
// 直接赋值给 ref
|
||||
|
||||
@ -26,21 +26,23 @@ export function useDraggable(
|
||||
let cleanup: (() => void) | null = null;
|
||||
|
||||
const initDrag = (): (() => void) | null => {
|
||||
const modalContent = document.querySelector(
|
||||
modalSelector
|
||||
) as HTMLElement | null;
|
||||
const dragHandle = document.querySelector(handle) as HTMLElement | null;
|
||||
if (!modalContent || !dragHandle) return null;
|
||||
|
||||
// 重置位置到居中
|
||||
if (resetOnOpen) {
|
||||
modalContent.style.position = '';
|
||||
modalContent.style.left = '';
|
||||
modalContent.style.top = '';
|
||||
modalContent.style.margin = '';
|
||||
modalContent.style.transform = '';
|
||||
const modalContents = document.querySelectorAll(
|
||||
modalSelector
|
||||
) as NodeListOf<HTMLElement>;
|
||||
modalContents.forEach(content => {
|
||||
if (content.offsetParent !== null) {
|
||||
content.style.position = '';
|
||||
content.style.left = '';
|
||||
content.style.top = '';
|
||||
content.style.margin = '';
|
||||
content.style.transform = '';
|
||||
content.style.width = '';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
let currentModalContent: HTMLElement | null = null;
|
||||
let isDragging = false;
|
||||
let startX = 0;
|
||||
let startY = 0;
|
||||
@ -56,19 +58,30 @@ export function useDraggable(
|
||||
};
|
||||
|
||||
const onPointerDown = (e: MouseEvent | TouchEvent) => {
|
||||
const target = e.target instanceof HTMLElement ? e.target : null;
|
||||
const dragHandle = target?.closest(handle) as HTMLElement | null;
|
||||
|
||||
if (!dragHandle) return;
|
||||
|
||||
const modalContent = dragHandle.closest(
|
||||
modalSelector
|
||||
) as HTMLElement | null;
|
||||
if (!modalContent) return;
|
||||
|
||||
if (
|
||||
e.target instanceof HTMLElement &&
|
||||
(e.target.closest('.ant-modal-close') ||
|
||||
e.target.closest('button') ||
|
||||
e.target.closest('input') ||
|
||||
e.target.closest('select') ||
|
||||
e.target.closest('textarea') ||
|
||||
e.target.closest('a'))
|
||||
target.closest('.ant-modal-close') ||
|
||||
target.closest('button') ||
|
||||
target.closest('input') ||
|
||||
target.closest('select') ||
|
||||
target.closest('textarea') ||
|
||||
target.closest('a')
|
||||
)
|
||||
return;
|
||||
|
||||
e.preventDefault();
|
||||
isDragging = true;
|
||||
currentModalContent = modalContent;
|
||||
|
||||
const rect = modalContent.getBoundingClientRect();
|
||||
startLeft = rect.left;
|
||||
startTop = rect.top;
|
||||
@ -76,7 +89,6 @@ export function useDraggable(
|
||||
startX = pos.clientX - startLeft;
|
||||
startY = pos.clientY - startTop;
|
||||
|
||||
// --- 新增：固定宽度 ---
|
||||
const currentWidth = modalContent.offsetWidth;
|
||||
modalContent.style.width = currentWidth + 'px';
|
||||
|
||||
@ -91,46 +103,63 @@ export function useDraggable(
|
||||
document.addEventListener('touchmove', onPointerMove, { passive: false });
|
||||
document.addEventListener('touchend', onPointerUp);
|
||||
};
|
||||
|
||||
const onPointerMove = (e: MouseEvent | TouchEvent) => {
|
||||
if (!isDragging) return;
|
||||
if (!isDragging || !currentModalContent) return;
|
||||
e.preventDefault();
|
||||
const pos = getPointerPos(e);
|
||||
let newLeft = pos.clientX - startX;
|
||||
let newTop = pos.clientY - startY;
|
||||
|
||||
if (boundary) {
|
||||
const maxX = window.innerWidth - modalContent.offsetWidth;
|
||||
const maxY = window.innerHeight - modalContent.offsetHeight;
|
||||
const maxX = window.innerWidth - currentModalContent.offsetWidth;
|
||||
const maxY = window.innerHeight - currentModalContent.offsetHeight;
|
||||
newLeft = Math.max(0, Math.min(newLeft, maxX));
|
||||
newTop = Math.max(0, Math.min(newTop, maxY));
|
||||
}
|
||||
|
||||
modalContent.style.left = `${newLeft}px`;
|
||||
modalContent.style.top = `${newTop}px`;
|
||||
currentModalContent.style.left = `${newLeft}px`;
|
||||
currentModalContent.style.top = `${newTop}px`;
|
||||
};
|
||||
|
||||
const onPointerUp = () => {
|
||||
if (!currentModalContent) return;
|
||||
isDragging = false;
|
||||
modalContent.style.userSelect = '';
|
||||
modalContent.style.webkitUserSelect = '';
|
||||
currentModalContent.style.userSelect = '';
|
||||
currentModalContent.style.webkitUserSelect = '';
|
||||
document.removeEventListener('mousemove', onPointerMove);
|
||||
document.removeEventListener('mouseup', onPointerUp);
|
||||
document.removeEventListener('touchmove', onPointerMove);
|
||||
document.removeEventListener('touchend', onPointerUp);
|
||||
currentModalContent = null;
|
||||
};
|
||||
|
||||
dragHandle.addEventListener('mousedown', onPointerDown);
|
||||
dragHandle.addEventListener('touchstart', onPointerDown, {
|
||||
document.addEventListener('mousedown', onPointerDown);
|
||||
document.addEventListener('touchstart', onPointerDown, {
|
||||
passive: false
|
||||
});
|
||||
|
||||
return () => {
|
||||
dragHandle.removeEventListener('mousedown', onPointerDown);
|
||||
dragHandle.removeEventListener('touchstart', onPointerDown);
|
||||
document.removeEventListener('mousedown', onPointerDown);
|
||||
document.removeEventListener('touchstart', onPointerDown);
|
||||
document.removeEventListener('mousemove', onPointerMove);
|
||||
document.removeEventListener('mouseup', onPointerUp);
|
||||
document.removeEventListener('touchmove', onPointerMove);
|
||||
document.removeEventListener('touchend', onPointerUp);
|
||||
|
||||
const modalContents = document.querySelectorAll(
|
||||
modalSelector
|
||||
) as NodeListOf<HTMLElement>;
|
||||
modalContents.forEach(content => {
|
||||
content.style.position = '';
|
||||
content.style.left = '';
|
||||
content.style.top = '';
|
||||
content.style.margin = '';
|
||||
content.style.transform = '';
|
||||
content.style.width = '';
|
||||
content.style.userSelect = '';
|
||||
content.style.webkitUserSelect = '';
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@ -40,6 +40,7 @@
|
||||
import { ref } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { deletePowerInfo } from '@/api/DataQueryMenuModule';
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
@ -72,7 +73,8 @@ const open = (record: any, callback: Function) => {
|
||||
dataSourceVisible.value = true;
|
||||
onSuccess.value = callback;
|
||||
};
|
||||
|
||||
useDraggable(dataSourceVisible, { boundary: true, resetOnOpen: true });
|
||||
useDraggable(confirmVisible, { boundary: true, resetOnOpen: true });
|
||||
// 修改依据确认
|
||||
const handleDataSourceConfirm = () => {
|
||||
dataSourceVisible.value = false;
|
||||
|
||||
@ -58,6 +58,7 @@ import FishDataSearch from './FishDataSearch.vue';
|
||||
import BasicTable from '@/components/BasicTable/index.vue';
|
||||
import { getFishReleaseMonitorList } from '@/api/DataQueryMenuModule';
|
||||
import { calcTableScrollY } from '@/utils/index';
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
|
||||
const sort = ref<any>([
|
||||
{
|
||||
@ -93,7 +94,8 @@ const previewImageUrl = ref('');
|
||||
// 视频预览
|
||||
const videoPreviewVisible = ref(false);
|
||||
const previewVideoUrl = ref('');
|
||||
|
||||
useDraggable(imagePreviewVisible, { boundary: true, resetOnOpen: true });
|
||||
useDraggable(videoPreviewVisible, { boundary: true, resetOnOpen: true });
|
||||
const openImagePreview = (url: string) => {
|
||||
previewImageUrl.value = import.meta.env.VITE_APP_ATTACHMENT_URL + '/?' + url;
|
||||
imagePreviewVisible.value = true;
|
||||
|
||||
@ -279,6 +279,7 @@ import {
|
||||
import { message } from 'ant-design-vue';
|
||||
import router from '@/router';
|
||||
import { encrypt } from '@/utils/rsaEncrypt';
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
|
||||
// 注册表单数据
|
||||
const registerData = reactive({
|
||||
@ -510,7 +511,7 @@ const registerRules = {
|
||||
const loading = ref(false);
|
||||
const activeTab = ref('register');
|
||||
const modalVisible = ref(false);
|
||||
|
||||
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
|
||||
// 初始化加载集团列表
|
||||
const loadGroupList = async () => {
|
||||
try {
|
||||
|
||||
@ -7,12 +7,13 @@ import SSSTDCQK from '@/modules/shuiShengShengTaiDiaoCha/index.vue'; // 水生
|
||||
import AlongFishMod from '@/modules/alongFishMod/index.vue'; //沿程鱼类变化情况
|
||||
import SSSTDCDB from './shuiShengShengTaiDiaoCha/SSSTDCDB.vue';
|
||||
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
|
||||
const JidiSelectEventStore = useJidiSelectEventStore();
|
||||
const modalVisible = ref(false);
|
||||
|
||||
const currentItem = computed(() => JidiSelectEventStore.selectedItem);
|
||||
|
||||
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
|
||||
const handleOpenModal = () => {
|
||||
modalVisible.value = true;
|
||||
};
|
||||
|
||||
@ -226,6 +226,7 @@ import {
|
||||
import { Tag } from 'ant-design-vue'; // 确保导入 Tag
|
||||
import { getDictItemsByCode } from '@/api/dict';
|
||||
import { calcTableScrollY } from '@/utils/index';
|
||||
import { useDraggable } from '@/utils/drag';
|
||||
|
||||
const baseUrl = import.meta.env.VITE_APP_ATTACHMENT_URL;
|
||||
const baseUrlApi = import.meta.env.VITE_APP_BASE_API_URL;
|
||||
@ -324,7 +325,7 @@ const baseColumnsConfig: ColumnConfig[] = [
|
||||
// --- 状态定义 ---
|
||||
const visible = ref(false); // 导入预览 Modal
|
||||
const editModalRef = ref<any>(null);
|
||||
|
||||
useDraggable(visible, { boundary: true, resetOnOpen: true });
|
||||
// 编辑相关状态
|
||||
const editModalVisible = ref(false);
|
||||
const isView = ref(false);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user