Compare commits
2 Commits
a4d97d7e56
...
26d7a1ecbf
| Author | SHA1 | Date | |
|---|---|---|---|
| 26d7a1ecbf | |||
| 7c4590afd6 |
13
.prettierrc
13
.prettierrc
@ -1,10 +1,11 @@
|
||||
{
|
||||
"printWidth": 100,
|
||||
"printWidth": 150,
|
||||
"tabWidth": 2,
|
||||
"semi": true,
|
||||
"useTabs": false,
|
||||
"semi": false,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "es5",
|
||||
"arrowParens": "avoid",
|
||||
"htmlWhitespaceSensitivity": "ignore",
|
||||
"vueIndentScriptAndStyle": false
|
||||
"trailingComma": "all",
|
||||
"bracketSpacing": true,
|
||||
"arrowParens": "always",
|
||||
"endOfLine": "lf"
|
||||
}
|
||||
BIN
packages/screen/src/assets/MaMap_img/危大工程icon@2x.png
Normal file
BIN
packages/screen/src/assets/MaMap_img/危大工程icon@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 KiB |
BIN
packages/screen/src/assets/RiskWarning_img/危大工程icon1@2x.png
Normal file
BIN
packages/screen/src/assets/RiskWarning_img/危大工程icon1@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
packages/screen/src/assets/RiskWarning_img/危大工程icon@2x.png
Normal file
BIN
packages/screen/src/assets/RiskWarning_img/危大工程icon@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
packages/screen/src/assets/RiskWarning_img/队伍icon定位@2x (1).png
Normal file
BIN
packages/screen/src/assets/RiskWarning_img/队伍icon定位@2x (1).png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
@ -25,30 +25,13 @@
|
||||
clearable
|
||||
@change="handleFilterChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in regionOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
<el-option v-for="item in regionOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<span class="filter-label">类型</span>
|
||||
<el-select
|
||||
:teleported="false"
|
||||
v-model="filterForm.type"
|
||||
placeholder="请选择"
|
||||
class="filter-select"
|
||||
clearable
|
||||
@change="handleFilterChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in typeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
<el-select :teleported="false" v-model="filterForm.type" placeholder="请选择" class="filter-select" clearable @change="handleFilterChange">
|
||||
<el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
@ -61,12 +44,7 @@
|
||||
clearable
|
||||
@change="handleFilterChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in controlMeasureOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
<el-option v-for="item in controlMeasureOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
@ -101,13 +79,13 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch, inject } from 'vue';
|
||||
import { Close } from '@element-plus/icons-vue';
|
||||
import { regionOptions, typeOptions, controlMeasureOptions } from '../component/index.js';
|
||||
import BaseDialog from '../component/baseDialog.vue';
|
||||
import { request } from '@/utils/request';
|
||||
import { formatDateTime } from '../component/index.js';
|
||||
0;
|
||||
import { ref, computed, watch, inject, onMounted, onUnmounted } from 'vue'
|
||||
import { Close } from '@element-plus/icons-vue'
|
||||
import { regionOptions, typeOptions, controlMeasureOptions } from '../component/index.js'
|
||||
import BaseDialog from '../component/baseDialog.vue'
|
||||
import { request } from '@/utils/request'
|
||||
import { formatDateTime } from '../component/index.js'
|
||||
0
|
||||
// 注入日期范围
|
||||
// const dateRange = inject('dateRange', ref([]));
|
||||
const props = defineProps({
|
||||
@ -123,25 +101,33 @@ const props = defineProps({
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:visible', 'close', 'detail', 'itemdata']);
|
||||
const emit = defineEmits(['update:visible', 'close', 'detail', 'itemdata'])
|
||||
|
||||
// 筛选表单
|
||||
const filterForm = ref({
|
||||
district: '',
|
||||
type: '',
|
||||
roadConditionType: '',
|
||||
});
|
||||
})
|
||||
watch(
|
||||
() => props.itemFilterForm,
|
||||
newVal => {
|
||||
console.log('newVal', newVal);
|
||||
filterForm.value.roadConditionType = newVal.label.substring(0, newVal.label.length - 1) || '';
|
||||
currentPage.value = 1;
|
||||
fetchData();
|
||||
}
|
||||
);
|
||||
() => props.itemFilterForm, // 监听父组件传递的筛选表单
|
||||
(newVal) => {
|
||||
console.log('newVal', newVal)
|
||||
if (newVal.label) {
|
||||
filterForm.value.roadConditionType = newVal.label.substring(0, newVal.label.length - 1) || ''
|
||||
currentPage.value = 1
|
||||
fetchData()
|
||||
} else {
|
||||
filterForm.value = {
|
||||
district: '',
|
||||
type: '',
|
||||
roadConditionType: '',
|
||||
}
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
// 影响区域选项
|
||||
// 已从 index.js 导入
|
||||
@ -153,7 +139,7 @@ watch(
|
||||
// 已从 index.js 导入
|
||||
|
||||
// 表格高度
|
||||
const tableHeight = ref(300);
|
||||
const tableHeight = ref(300)
|
||||
|
||||
// 表格列配置
|
||||
const tableColumns = ref([
|
||||
@ -172,36 +158,36 @@ const tableColumns = ref([
|
||||
slot: 'roadConditionType',
|
||||
},
|
||||
{ prop: 'operation', label: '操作', width: '', slot: 'operation' },
|
||||
]);
|
||||
])
|
||||
|
||||
// 表格数据
|
||||
const tableData = ref([]);
|
||||
const tableData = ref([])
|
||||
|
||||
// 分页
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(10);
|
||||
const total = ref(36);
|
||||
const currentPage = ref(1)
|
||||
const pageSize = ref(10)
|
||||
const total = ref(36)
|
||||
|
||||
const totalPages = computed(() => Math.ceil(total.value / pageSize.value));
|
||||
const totalPages = computed(() => Math.ceil(total.value / pageSize.value))
|
||||
|
||||
const visiblePages = computed(() => {
|
||||
const pages = [];
|
||||
const maxVisible = 5;
|
||||
let start = Math.max(1, currentPage.value - Math.floor(maxVisible / 2));
|
||||
let end = Math.min(totalPages.value, start + maxVisible - 1);
|
||||
const pages = []
|
||||
const maxVisible = 5
|
||||
let start = Math.max(1, currentPage.value - Math.floor(maxVisible / 2))
|
||||
let end = Math.min(totalPages.value, start + maxVisible - 1)
|
||||
|
||||
if (end - start + 1 < maxVisible) {
|
||||
start = Math.max(1, end - maxVisible + 1);
|
||||
start = Math.max(1, end - maxVisible + 1)
|
||||
}
|
||||
|
||||
for (let i = start; i <= end; i++) {
|
||||
pages.push(i);
|
||||
pages.push(i)
|
||||
}
|
||||
return pages;
|
||||
});
|
||||
return pages
|
||||
})
|
||||
|
||||
// 获取管控措施样式类
|
||||
const getControlClass = measure => {
|
||||
const getControlClass = (measure) => {
|
||||
const classMap = {
|
||||
全幅封闭: 'control-close',
|
||||
半幅封闭: 'control-half',
|
||||
@ -212,47 +198,47 @@ const getControlClass = measure => {
|
||||
半幅通行: 'control-half',
|
||||
限速: 'control-limit',
|
||||
告警阻拦: 'control-limit',
|
||||
};
|
||||
return classMap[measure] || '';
|
||||
};
|
||||
}
|
||||
return classMap[measure] || ''
|
||||
}
|
||||
|
||||
// 关闭对话框
|
||||
const handleClose = () => {
|
||||
emit('update:visible', false);
|
||||
emit('close');
|
||||
};
|
||||
emit('update:visible', false)
|
||||
emit('close')
|
||||
}
|
||||
|
||||
// 查看详情
|
||||
const handleDetail = item => {
|
||||
emit('detail', item);
|
||||
emit('itemdata', item);
|
||||
};
|
||||
const handleDetail = (item) => {
|
||||
emit('detail', item)
|
||||
emit('itemdata', item)
|
||||
}
|
||||
|
||||
// 分页操作
|
||||
const handleSizeChange = val => {
|
||||
pageSize.value = val;
|
||||
fetchData();
|
||||
};
|
||||
const handleSizeChange = (val) => {
|
||||
pageSize.value = val
|
||||
fetchData()
|
||||
}
|
||||
|
||||
const handleCurrentChange = val => {
|
||||
currentPage.value = val;
|
||||
fetchData();
|
||||
};
|
||||
const handleCurrentChange = (val) => {
|
||||
currentPage.value = val
|
||||
fetchData()
|
||||
}
|
||||
// 筛选条件改变时触发
|
||||
const handleFilterChange = () => {
|
||||
currentPage.value = 1;
|
||||
fetchData();
|
||||
};
|
||||
currentPage.value = 1
|
||||
fetchData()
|
||||
}
|
||||
// 获取数据
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
let params = {
|
||||
start: '',
|
||||
end: '',
|
||||
};
|
||||
}
|
||||
if (props.dateRange && props.dateRange.length === 2) {
|
||||
params.start = formatDateTime(props.dateRange[0]);
|
||||
params.end = formatDateTime(props.dateRange[1]);
|
||||
params.start = formatDateTime(props.dateRange[0])
|
||||
params.end = formatDateTime(props.dateRange[1])
|
||||
}
|
||||
|
||||
const res = await request({
|
||||
@ -268,10 +254,10 @@ const fetchData = async () => {
|
||||
roadConditionType: filterForm.value.type, // 类型
|
||||
processingMeasure: filterForm.value.roadConditionType, // 管控措施
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
if (res.code === '00000' && res.data) {
|
||||
const data = res.data;
|
||||
const data = res.data
|
||||
// 转换数据格式
|
||||
tableData.value = data.records.map((item, index) => {
|
||||
return {
|
||||
@ -287,25 +273,25 @@ const fetchData = async () => {
|
||||
roadConditionType: item.processingMeasure || '-',
|
||||
expectRecoverTime: item.expectRecoverTime || '-',
|
||||
eventStatus: item.eventStatus || '-',
|
||||
};
|
||||
});
|
||||
total.value = data.total;
|
||||
}
|
||||
})
|
||||
total.value = data.total
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取管控情况数据失败:', error);
|
||||
console.error('获取管控情况数据失败:', error)
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
watch(
|
||||
() => filterForm.value,
|
||||
newVal => {
|
||||
console.log('filterForm.value变化:', newVal);
|
||||
(newVal) => {
|
||||
console.log('filterForm.value变化:', newVal)
|
||||
if (newVal) {
|
||||
currentPage.value = 1;
|
||||
fetchData();
|
||||
currentPage.value = 1
|
||||
fetchData()
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -183,8 +183,6 @@ watch(
|
||||
if (newVal) {
|
||||
// 当弹窗打开时获取数据
|
||||
getAffectedObjectTypeId(props.item);
|
||||
console.log(basicInfo.value);
|
||||
console.log(props.item);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
@ -52,12 +52,7 @@
|
||||
clearable
|
||||
@change="handleFilterChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="option in pointLevelOptions"
|
||||
:key="option.value"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
/>
|
||||
<el-option v-for="option in pointLevelOptions" :key="option.value" :label="option.label" :value="option.value" />
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
@ -70,12 +65,7 @@
|
||||
clearable
|
||||
@change="handleFilterChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="option in regionOptions"
|
||||
:key="option.value"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
/>
|
||||
<el-option v-for="option in regionOptions" :key="option.value" :label="option.label" :value="option.value" />
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
@ -186,25 +176,25 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch, onMounted } from 'vue';
|
||||
import { Close, ArrowLeft, ArrowRight } from '@element-plus/icons-vue';
|
||||
import { request } from '@/utils/request';
|
||||
import { pointTypeOptions, pointLevelOptions, regionOptions } from '../component/index.js';
|
||||
import baseDialog from '../component/baseDialog.vue';
|
||||
import { ref, computed, watch, onMounted, nextTick } from 'vue'
|
||||
import { Close, ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
|
||||
import { request } from '@/utils/request'
|
||||
import { pointTypeOptions, pointLevelOptions, regionOptions } from '../component/index.js'
|
||||
import baseDialog from '../component/baseDialog.vue'
|
||||
|
||||
import respondedIcon from '../../../assets/xiangying/有回应@2x.png';
|
||||
import notRespondedIcon from '../../../assets/xiangying/无回应@2x.png';
|
||||
import selectedIcon from '../../../assets/xiangying/选中bg@2x.png';
|
||||
import unselectedIcon from '../../../assets/xiangying/未选中bg@2x.png';
|
||||
import respondedIcon from '../../../assets/xiangying/有回应@2x.png'
|
||||
import notRespondedIcon from '../../../assets/xiangying/无回应@2x.png'
|
||||
import selectedIcon from '../../../assets/xiangying/选中bg@2x.png'
|
||||
import unselectedIcon from '../../../assets/xiangying/未选中bg@2x.png'
|
||||
|
||||
import Icon0 from '../../../assets/xiangying/选中@2x.png';
|
||||
import Icon1 from '../../../assets/xiangying/未选中1@2x.png';
|
||||
import Icon2 from '../../../assets/xiangying/未选中2@2x.png';
|
||||
import Icon3 from '../../../assets/xiangying/未选中3@2x.png';
|
||||
import Icon4 from '../../../assets/xiangying/未选中4@2x.png';
|
||||
import Icon0 from '../../../assets/xiangying/选中@2x.png'
|
||||
import Icon1 from '../../../assets/xiangying/未选中1@2x.png'
|
||||
import Icon2 from '../../../assets/xiangying/未选中2@2x.png'
|
||||
import Icon3 from '../../../assets/xiangying/未选中3@2x.png'
|
||||
import Icon4 from '../../../assets/xiangying/未选中4@2x.png'
|
||||
|
||||
import { formatDateTime } from '../component/index.js';
|
||||
onMounted(() => {});
|
||||
import { formatDateTime } from '../component/index.js'
|
||||
onMounted(() => {})
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
@ -214,16 +204,16 @@ const props = defineProps({
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:visible', 'close', 'detail', 'itemClick']);
|
||||
const emit = defineEmits(['update:visible', 'close', 'detail', 'itemClick'])
|
||||
|
||||
// 筛选表单
|
||||
const filterForm = ref({
|
||||
pointType: '',
|
||||
pointLevel: '',
|
||||
region: '',
|
||||
});
|
||||
})
|
||||
|
||||
// 统一的表格列配置（桥梁、边坡、隧道、路段使用）
|
||||
const unifiedColumns = [
|
||||
@ -259,7 +249,7 @@ const unifiedColumns = [
|
||||
slot: 'operation',
|
||||
fixed: 'right',
|
||||
},
|
||||
];
|
||||
]
|
||||
|
||||
// 项目类型专用表格列配置
|
||||
const projectColumns = [
|
||||
@ -303,19 +293,19 @@ const projectColumns = [
|
||||
width: '',
|
||||
slot: 'cityResponsible',
|
||||
},
|
||||
];
|
||||
]
|
||||
|
||||
// 为兼容旧代码，保留变量名引用
|
||||
const bridgeColumns = unifiedColumns;
|
||||
const slopeColumns = unifiedColumns;
|
||||
const tunnelColumns = unifiedColumns;
|
||||
const roadColumns = unifiedColumns;
|
||||
const bridgeColumns = unifiedColumns
|
||||
const slopeColumns = unifiedColumns
|
||||
const tunnelColumns = unifiedColumns
|
||||
const roadColumns = unifiedColumns
|
||||
|
||||
// 当前表格列配置
|
||||
const tableColumns = ref(bridgeColumns);
|
||||
const tableColumns = ref(bridgeColumns)
|
||||
|
||||
// 表格数据
|
||||
const tableData = ref([]);
|
||||
const tableData = ref([])
|
||||
// 影响点数据
|
||||
const impactData = ref([
|
||||
{ name: '影响路段', count: 0, icon: Icon4, type: '路段' },
|
||||
@ -323,17 +313,17 @@ const impactData = ref([
|
||||
{ name: '影响隧道', count: 0, icon: Icon2, type: '隧道' },
|
||||
{ name: '影响边坡', count: 0, icon: Icon1, type: '边坡' },
|
||||
{ name: '影响项目', count: 0, icon: Icon3, type: '项目' },
|
||||
]);
|
||||
])
|
||||
// 顶部卡片数据
|
||||
const loadBarChartData = async () => {
|
||||
try {
|
||||
const res = await request({
|
||||
url: '/snow-ops-platform/weather-warning/affected-count',
|
||||
method: 'GET',
|
||||
});
|
||||
})
|
||||
|
||||
if (res.code == '00000') {
|
||||
const data = res.data;
|
||||
const data = res.data
|
||||
if (data && Array.isArray(data)) {
|
||||
// 英文转中文映射
|
||||
const nameMap = {
|
||||
@ -347,135 +337,141 @@ const loadBarChartData = async () => {
|
||||
Tunnel: '隧道',
|
||||
Slope: '边坡',
|
||||
Project: '项目',
|
||||
};
|
||||
}
|
||||
|
||||
// 转换英文name为中文
|
||||
const convertedData = data.map(item => {
|
||||
const name = nameMap[item.name] || item.name;
|
||||
return { ...item, name };
|
||||
});
|
||||
convertedData.forEach(item => {
|
||||
impactData.value.forEach(stat => {
|
||||
const convertedData = data.map((item) => {
|
||||
const name = nameMap[item.name] || item.name
|
||||
return { ...item, name }
|
||||
})
|
||||
convertedData.forEach((item) => {
|
||||
impactData.value.forEach((stat) => {
|
||||
if (stat.name.includes(item.extension)) {
|
||||
stat.count = item.count || 0;
|
||||
stat.count = item.count || 0
|
||||
}
|
||||
});
|
||||
});
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载柱状图数据失败:', error);
|
||||
console.error('加载柱状图数据失败:', error)
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const cardType = ref('0');
|
||||
const cardTypeVal = ref('路段');
|
||||
const cardType = ref('0')
|
||||
const cardTypeVal = ref('路段')
|
||||
|
||||
// 根据 cardType 获取对应的表格列配置
|
||||
const getColumnsByType = type => {
|
||||
const getColumnsByType = (type) => {
|
||||
const typeMap = {
|
||||
路段: bridgeColumns,
|
||||
桥梁: slopeColumns,
|
||||
隧道: tunnelColumns,
|
||||
边坡: roadColumns,
|
||||
项目: projectColumns,
|
||||
};
|
||||
}
|
||||
// { name: '影响路段', count: 0, icon: Icon4, type: '路段' },
|
||||
// { name: '影响桥梁', count: 0, icon: Icon0, type: '桥梁' },
|
||||
// { name: '影响隧道', count: 0, icon: Icon2, type: '隧道' },
|
||||
// { name: '影响边坡', count: 0, icon: Icon1, type: '边坡' },
|
||||
// { name: '影响项目', count: 0, icon: Icon3, type: '项目' },
|
||||
return typeMap[type] || bridgeColumns;
|
||||
};
|
||||
return typeMap[type] || bridgeColumns
|
||||
}
|
||||
|
||||
// 根据 cardType 获取对应的 API 路径
|
||||
const getApiUrlByType = type => {
|
||||
const getApiUrlByType = (type) => {
|
||||
const urlMap = {
|
||||
桥梁: '/snow-ops-platform/weather-warning/affected-object/bridge',
|
||||
边坡: '/snow-ops-platform/weather-warning/affected-object/slope',
|
||||
隧道: '/snow-ops-platform/weather-warning/affected-object/tunnel',
|
||||
项目: '/snow-ops-platform/weather-warning/affected-object/project',
|
||||
路段: '/snow-ops-platform/weather-warning/affected-object/road-section',
|
||||
};
|
||||
return urlMap[type] || '/snow-ops-platform/weather-warning/affected-object/bridge';
|
||||
};
|
||||
}
|
||||
return urlMap[type] || '/snow-ops-platform/weather-warning/affected-object/bridge'
|
||||
}
|
||||
|
||||
// 点击卡片切换
|
||||
const handleClick = (index, item) => {
|
||||
tableData.value = [];
|
||||
cardType.value = index + '';
|
||||
cardTypeVal.value = item.type;
|
||||
tableData.value = []
|
||||
cardType.value = index + ''
|
||||
cardTypeVal.value = item.type
|
||||
// 切换表格列配置
|
||||
tableColumns.value = getColumnsByType(item.type);
|
||||
tableColumns.value = getColumnsByType(item.type)
|
||||
// 重置分页并获取数据
|
||||
currentPage.value = 1;
|
||||
fetchData();
|
||||
};
|
||||
currentPage.value = 1
|
||||
fetchData()
|
||||
}
|
||||
|
||||
// 分页
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(10);
|
||||
const total = ref(0);
|
||||
const currentPage = ref(1)
|
||||
const pageSize = ref(10)
|
||||
const total = ref(0)
|
||||
|
||||
const totalPages = computed(() => Math.ceil(total.value / pageSize.value));
|
||||
const totalPages = computed(() => Math.ceil(total.value / pageSize.value))
|
||||
|
||||
const visiblePages = computed(() => {
|
||||
const pages = [];
|
||||
const maxVisible = 4;
|
||||
let start = Math.max(1, currentPage.value - Math.floor(maxVisible / 2));
|
||||
let end = Math.min(totalPages.value, start + maxVisible - 1);
|
||||
const pages = []
|
||||
const maxVisible = 4
|
||||
let start = Math.max(1, currentPage.value - Math.floor(maxVisible / 2))
|
||||
let end = Math.min(totalPages.value, start + maxVisible - 1)
|
||||
|
||||
if (end - start + 1 < maxVisible) {
|
||||
start = Math.max(1, end - maxVisible + 1);
|
||||
start = Math.max(1, end - maxVisible + 1)
|
||||
}
|
||||
|
||||
for (let i = start; i <= end; i++) {
|
||||
pages.push(i);
|
||||
pages.push(i)
|
||||
}
|
||||
return pages;
|
||||
});
|
||||
return pages
|
||||
})
|
||||
|
||||
// 关闭对话框
|
||||
const handleClose = () => {
|
||||
emit('update:visible', false);
|
||||
emit('close');
|
||||
};
|
||||
emit('update:visible', false)
|
||||
emit('close')
|
||||
}
|
||||
|
||||
// 点击遮罩关闭已由base-dialog组件处理
|
||||
|
||||
// 查询
|
||||
const handleSearch = () => {
|
||||
console.log('查询条件:', filterForm.value);
|
||||
currentPage.value = 1;
|
||||
fetchData();
|
||||
};
|
||||
console.log('查询条件:', filterForm.value)
|
||||
currentPage.value = 1
|
||||
fetchData()
|
||||
}
|
||||
|
||||
// 查看详情
|
||||
const handleDetail = item => {
|
||||
emit('detail', item);
|
||||
emit('itemClick', item);
|
||||
};
|
||||
const handleDetail = (item) => {
|
||||
emit('detail', item)
|
||||
emit('itemClick', item)
|
||||
}
|
||||
|
||||
// 分页操作
|
||||
const handleSizeChange = val => {
|
||||
pageSize.value = val;
|
||||
fetchData();
|
||||
};
|
||||
const handleSizeChange = (val) => {
|
||||
pageSize.value = val
|
||||
fetchData()
|
||||
}
|
||||
|
||||
const handleCurrentChange = val => {
|
||||
currentPage.value = val;
|
||||
fetchData();
|
||||
};
|
||||
const handleCurrentChange = (val) => {
|
||||
currentPage.value = val
|
||||
fetchData()
|
||||
}
|
||||
// 筛选条件改变时触发
|
||||
const handleFilterChange = () => {
|
||||
currentPage.value = 1;
|
||||
fetchData();
|
||||
};
|
||||
currentPage.value = 1
|
||||
fetchData()
|
||||
}
|
||||
// 获取时间参数
|
||||
|
||||
const getTimeParams = () => {
|
||||
console.log('原始时间范围:', props.handleImpactItem);
|
||||
const roadConditionType =
|
||||
regionOptions.value.find(item => item.value === filterForm.value.region)?.label || '';
|
||||
console.log('原始时间范围:', props.handleImpactItem)
|
||||
let countyName = ''
|
||||
regionOptions.value.forEach((item) => {
|
||||
if (item.label === filterForm.value.region) {
|
||||
countyName = item.label || ''
|
||||
}
|
||||
})
|
||||
|
||||
return {
|
||||
// start: `${year}-${month}-01 00:00:00`,
|
||||
// end: `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`,
|
||||
@ -483,14 +479,14 @@ const getTimeParams = () => {
|
||||
end: formatDateTime(props.handleImpactItem.dateRange?.[1] || ''),
|
||||
limit: pageSize.value,
|
||||
offset: (currentPage.value - 1) * pageSize.value,
|
||||
roadConditionType: roadConditionType || '',
|
||||
countyName: countyName || '',
|
||||
riskLevel: filterForm.value.pointLevel || '',
|
||||
};
|
||||
};
|
||||
}
|
||||
}
|
||||
// 处理数据为统一格式
|
||||
const processUnifiedData = (item, type) => {
|
||||
// 获取等级样式类
|
||||
const getLevelClass = level => {
|
||||
const getLevelClass = (level) => {
|
||||
const levelMap = {
|
||||
红色预警: 'level-red',
|
||||
橙色预警: 'level-orange',
|
||||
@ -499,37 +495,23 @@ const processUnifiedData = (item, type) => {
|
||||
高风险: 'level-red',
|
||||
中风险: 'level-orange',
|
||||
低风险: 'level-blue',
|
||||
};
|
||||
return levelMap[level] || '';
|
||||
};
|
||||
}
|
||||
return levelMap[level] || ''
|
||||
}
|
||||
|
||||
// 获取影响点等级
|
||||
const pointLevel =
|
||||
item.riskLevel || item.warningLevel || item.level || item.GL1_PDDJ || item.GL1_JSDJ || '-';
|
||||
const pointLevel = item.riskLevel || item.warningLevel || item.level || item.GL1_PDDJ || item.GL1_JSDJ || '-'
|
||||
|
||||
// 基础数据
|
||||
const baseData = {
|
||||
item,
|
||||
id: item.id,
|
||||
// 影响区域
|
||||
region:
|
||||
item.GL1_QXMC ||
|
||||
item.COUNTY ||
|
||||
item.county ||
|
||||
item.region ||
|
||||
item.ADMINISTRATIVE_REGION ||
|
||||
'-',
|
||||
region: item.GL1_QXMC || item.COUNTY || item.county || item.region || item.ADMINISTRATIVE_REGION || item.COUNTY_NAME || '-',
|
||||
// 影响点类型
|
||||
pointType: impactData.value[type].type || '-',
|
||||
// 影响点位置（根据类型取不同字段）
|
||||
pointLocation:
|
||||
item.GL1_QLMC ||
|
||||
item.NAME ||
|
||||
item.GL1_SDMC ||
|
||||
item.PROJECT_NAME ||
|
||||
item.GL1_LXBH ||
|
||||
item.name ||
|
||||
'-',
|
||||
pointLocation: item.GL1_QLMC || item.NAME || item.GL1_SDMC || item.PROJECT_NAME || item.GL1_LXBH || item.name || '-',
|
||||
// 影响点等级
|
||||
pointLevel: pointLevel,
|
||||
levelClass: getLevelClass(pointLevel),
|
||||
@ -570,7 +552,7 @@ const processUnifiedData = (item, type) => {
|
||||
},
|
||||
// 保留原始数据供详情使用
|
||||
rawData: item,
|
||||
};
|
||||
}
|
||||
|
||||
// 桥梁类型特殊处理（根据BASE_GLQL桥梁信息表字典）
|
||||
if (cardTypeVal.value === '桥梁') {
|
||||
@ -608,7 +590,7 @@ const processUnifiedData = (item, type) => {
|
||||
// name: item.GL1_QLGCS || "-",
|
||||
// phone: item.GL1_QLGCSDH || "-",
|
||||
// },
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// 隧道类型特殊处理（根据BASE_GLSD隧道信息表字典）
|
||||
@ -647,7 +629,7 @@ const processUnifiedData = (item, type) => {
|
||||
// name: item.GL1_GYDWYHGCS || "-",
|
||||
// phone: item.GL1_GYDWYHGSCSDH || "-",
|
||||
// },
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// 路段类型特殊处理（根据BASE_XJLD路线信息表字典）
|
||||
@ -655,16 +637,11 @@ const processUnifiedData = (item, type) => {
|
||||
return {
|
||||
...baseData,
|
||||
// 影响区域 - 使用区县名称
|
||||
region: item.GL1_ZDMC || '-',
|
||||
region: item.COUNTY_NAME || '-',
|
||||
// 影响点位置 - 使用路线名称+起终点桩号
|
||||
pointLocation:
|
||||
item.GL1_QDZH && item.GL1_ZDZH
|
||||
? item.GL1_LXMC +
|
||||
'(k' +
|
||||
(item.GL1_QDZH + '').replace('.', '+') +
|
||||
'至k' +
|
||||
(item.GL1_ZDZH + '').replace('.', '+') +
|
||||
')'
|
||||
? item.GL1_LXMC + '(k' + (item.GL1_QDZH + '').replace('.', '+') + '至k' + (item.GL1_ZDZH + '').replace('.', '+') + ')'
|
||||
: item.GL1_LXMC,
|
||||
// 影响点等级 - 使用风险等级
|
||||
pointLevel: item.GL1_FXDJ || '',
|
||||
@ -694,7 +671,7 @@ const processUnifiedData = (item, type) => {
|
||||
name: item.ROAD_SECTION_CHIEF_NAME || '-',
|
||||
phone: item.ROAD_SECTION_CHIEF_PHONE || '-',
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// 项目类型特殊处理（根据SQL字段映射）
|
||||
@ -737,85 +714,105 @@ const processUnifiedData = (item, type) => {
|
||||
name: item.CITY_RESPONSIBLE_PERSON || item.cityResponsiblePerson || '-',
|
||||
phone: item.CITY_RESPONSIBLE_PHONE || item.cityResponsiblePhone || '-',
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return baseData;
|
||||
};
|
||||
return baseData
|
||||
}
|
||||
|
||||
// 根据类型处理数据（统一格式）
|
||||
const processDataByType = (item, type) => {
|
||||
return processUnifiedData(item, type);
|
||||
};
|
||||
return processUnifiedData(item, type)
|
||||
}
|
||||
|
||||
// 获取数据
|
||||
const fetchData = async () => {
|
||||
console.log('获取第', currentPage.value, '页数据, 类型:', cardType.value);
|
||||
console.log('获取第', currentPage.value, '页数据, 类型:', cardType.value)
|
||||
try {
|
||||
const timeParams = getTimeParams();
|
||||
const timeParams = getTimeParams()
|
||||
|
||||
// 根据 cardType 获取对应的 API URL
|
||||
const apiUrl = getApiUrlByType(cardTypeVal.value);
|
||||
const apiUrl = getApiUrlByType(cardTypeVal.value)
|
||||
|
||||
const res = await request({
|
||||
url: apiUrl,
|
||||
method: 'GET',
|
||||
params: timeParams,
|
||||
});
|
||||
})
|
||||
// 路段存在分页功能了，需要处理返回数据
|
||||
if (cardTypeVal.value == '路段') {
|
||||
if (res.data) {
|
||||
tableData.value = res.data.map((item, index) => ({
|
||||
...processDataByType(item, cardType.value),
|
||||
id: index + 1,
|
||||
}));
|
||||
total.value = res.total || 0;
|
||||
}))
|
||||
total.value = res.total || 0
|
||||
}
|
||||
} else {
|
||||
if (res.code === '00000' && res.data) {
|
||||
// 处理返回数据
|
||||
const allData = res.data;
|
||||
total.value = allData.length || 0;
|
||||
const allData = res.data
|
||||
total.value = allData.length || 0
|
||||
|
||||
// 客户端分页：计算当前页的数据范围
|
||||
const startIndex = (currentPage.value - 1) * pageSize.value;
|
||||
const endIndex = startIndex + pageSize.value;
|
||||
const currentPageData = allData.slice(startIndex, endIndex);
|
||||
const startIndex = (currentPage.value - 1) * pageSize.value
|
||||
const endIndex = startIndex + pageSize.value
|
||||
const currentPageData = allData.slice(startIndex, endIndex)
|
||||
|
||||
tableData.value = currentPageData.map((item, index) => ({
|
||||
...processDataByType(item, cardType.value),
|
||||
id: startIndex + index + 1,
|
||||
}));
|
||||
}))
|
||||
} else {
|
||||
tableData.value = [];
|
||||
total.value = 0;
|
||||
tableData.value = []
|
||||
total.value = 0
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取影响点数据失败:', error);
|
||||
tableData.value = [];
|
||||
total.value = 0;
|
||||
console.error('获取影响点数据失败:', error)
|
||||
tableData.value = []
|
||||
total.value = 0
|
||||
}
|
||||
};
|
||||
|
||||
}
|
||||
watch(
|
||||
() => props.handleImpactItem,
|
||||
(newVal) => {
|
||||
total.value = 0
|
||||
tableData.value = []
|
||||
cardType.value = '0'
|
||||
loadBarChartData()
|
||||
console.log('影响点情况=========newVal:', newVal)
|
||||
if (newVal) {
|
||||
filterForm.value.region = newVal.countyName
|
||||
currentPage.value = 1
|
||||
fetchData()
|
||||
} else {
|
||||
filterForm.value = {
|
||||
district: '',
|
||||
type: '',
|
||||
roadConditionType: '',
|
||||
}
|
||||
}
|
||||
},
|
||||
)
|
||||
// 监听visible变化
|
||||
watch(
|
||||
() => props.visible,
|
||||
newVal => {
|
||||
if (newVal) {
|
||||
filterForm.value = {
|
||||
pointType: '',
|
||||
pointLevel: '',
|
||||
region: '',
|
||||
};
|
||||
tableData.value = [];
|
||||
cardType.value = '0';
|
||||
loadBarChartData();
|
||||
currentPage.value = 1;
|
||||
fetchData();
|
||||
}
|
||||
}
|
||||
);
|
||||
(newVal) => {
|
||||
// if (newVal) {
|
||||
// filterForm.value = {
|
||||
// pointType: '',
|
||||
// pointLevel: '',
|
||||
// region: '',
|
||||
// }
|
||||
// tableData.value = []
|
||||
// cardType.value = '0'
|
||||
// loadBarChartData()
|
||||
// currentPage.value = 1
|
||||
// fetchData()
|
||||
// }
|
||||
},
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -1,9 +1,5 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="props.visible"
|
||||
class="map-info-dialog"
|
||||
:style="{ backgroundImage: `url(${iconProject})` }"
|
||||
>
|
||||
<div v-if="props.visible" class="map-info-dialog" :style="{ backgroundImage: `url(${iconProject})` }">
|
||||
<!-- 关闭按钮 -->
|
||||
<div class="dialog-close" @click="handleClose">×</div>
|
||||
|
||||
@ -24,9 +20,9 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, defineEmits, computed } from 'vue';
|
||||
import iconProject from '../../../assets/RiskWarning_img/弹窗背景@2x.png';
|
||||
import iconTunnel from '../../../assets/RiskWarning_img/图标_media_dvr@2x.png';
|
||||
import { defineProps, defineEmits, computed } from 'vue'
|
||||
import iconProject from '../../../assets/RiskWarning_img/弹窗背景@2x.png'
|
||||
import iconTunnel from '../../../assets/RiskWarning_img/图标_media_dvr@2x.png'
|
||||
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
@ -41,13 +37,13 @@ const props = defineProps({
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:visible']);
|
||||
const emit = defineEmits(['update:visible'])
|
||||
|
||||
const handleClose = () => {
|
||||
emit('update:visible', false);
|
||||
};
|
||||
emit('update:visible', false)
|
||||
}
|
||||
|
||||
// 根据类型和数据显示不同的标题和内容
|
||||
const dialogTitle = computed(() => {
|
||||
@ -58,13 +54,14 @@ const dialogTitle = computed(() => {
|
||||
road: '路段信息',
|
||||
emergency: '抢险队伍',
|
||||
slope: '边坡信息',
|
||||
};
|
||||
return titleMap[props.type] || '详细信息';
|
||||
});
|
||||
engineering: '危大工程信息',
|
||||
}
|
||||
return titleMap[props.type] || '详细信息'
|
||||
})
|
||||
|
||||
const dialogItems = computed(() => {
|
||||
const data = props.data;
|
||||
const type = props.type;
|
||||
const data = props.data
|
||||
const type = props.type
|
||||
|
||||
switch (type) {
|
||||
case 'project':
|
||||
@ -94,7 +91,7 @@ const dialogItems = computed(() => {
|
||||
{ label: '吹哨人', value: data.WHISTLEBLOWER_NAME || '-' },
|
||||
{ label: '吹哨人电话', value: data.WHISTLEBLOWER_PHONE || '-' },
|
||||
{ label: '备注', value: data.REMARKS || '-' },
|
||||
];
|
||||
]
|
||||
case 'tunnel':
|
||||
return [
|
||||
{
|
||||
@ -150,7 +147,7 @@ const dialogItems = computed(() => {
|
||||
label: '评定等级',
|
||||
value: data.GL1_PDDJ || '-',
|
||||
},
|
||||
];
|
||||
]
|
||||
case 'bridge':
|
||||
return [
|
||||
{
|
||||
@ -198,7 +195,7 @@ const dialogItems = computed(() => {
|
||||
label: '技术状况',
|
||||
value: data.GL1_JSZKPJDJ || '-',
|
||||
},
|
||||
];
|
||||
]
|
||||
case 'road':
|
||||
return [
|
||||
{
|
||||
@ -229,7 +226,7 @@ const dialogItems = computed(() => {
|
||||
label: '照片',
|
||||
value: data.photos || data.photos || '-',
|
||||
},
|
||||
];
|
||||
]
|
||||
case 'emergency':
|
||||
return [
|
||||
{ label: '队伍名称', value: data.gl1Yjllmc || '-' },
|
||||
@ -239,7 +236,7 @@ const dialogItems = computed(() => {
|
||||
{ label: '地址', value: data.gl1Xxdz || '-' },
|
||||
{ label: '物资装备', value: data.materialsAndEquipments || '-' },
|
||||
{ label: '照片', value: data.photos || data.photos || '-' },
|
||||
];
|
||||
]
|
||||
case 'slope':
|
||||
return [
|
||||
{ label: '边坡坡长(km)', value: data.NAME || data.name || '-' },
|
||||
@ -250,15 +247,25 @@ const dialogItems = computed(() => {
|
||||
{ label: '监测设施设置', value: data.COUNTY || data.county || '-' },
|
||||
{ label: '起点桩号', value: data.photos || data.photos || [] },
|
||||
{ label: '止点桩号', value: data.photos || data.photos || [] },
|
||||
];
|
||||
]
|
||||
case 'engineering':
|
||||
return [
|
||||
{ label: '项目名称', value: data.projectName || '-' },
|
||||
{ label: '所属区县', value: data.districtName || '-' },
|
||||
{ label: '技术等级', value: data.techLevel || '-' },
|
||||
{ label: '等级', value: data.projectLevel || '-' },
|
||||
{ label: '当前状态', value: data.currentStatus || '-' },
|
||||
{ label: '预估/实际动工年月', value: data.startDate && data.endDate ? data.startDate + '至' + data.endDate : '-' },
|
||||
{ label: '质量安全监督责任人及联系方式', value: data.supervisorInfo || '-' },
|
||||
]
|
||||
|
||||
default:
|
||||
return [
|
||||
{ label: '名称', value: data.NAME || data.name || '-' },
|
||||
{ label: '所属区县', value: data.COUNTY || data.county || '-' },
|
||||
];
|
||||
]
|
||||
}
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -59,6 +59,7 @@ import bridgeIconIcon from '../../assets/RiskWarning_img/桥梁icon@2x.png';
|
||||
import roadIconIcon from '../../assets/RiskWarning_img/线路路段icon@2x.png';
|
||||
import teamIconIcon from '../../assets/RiskWarning_img/队伍icon@2x.png';
|
||||
import hazardIconIconIcon from '../../assets/RiskWarning_img/隐患点icon@2x.png';
|
||||
import engineeringIconIconIcon from '../../assets/RiskWarning_img/危大工程icon@2x.png';
|
||||
|
||||
import warningIconIcon1 from '../../assets/RiskWarning_img/风险预警icon1@2x.png';
|
||||
import tunnelIconIcon1 from '../../assets/RiskWarning_img/隧道icon1@2x.png';
|
||||
@ -67,6 +68,7 @@ import bridgeIconIcon1 from '../../assets/RiskWarning_img/桥梁icon1@2x.png';
|
||||
import roadIconIcon1 from '../../assets/RiskWarning_img/线路路段icon1@2x.png';
|
||||
import teamIconIcon1 from '../../assets/RiskWarning_img/队伍icon1@2x.png';
|
||||
import hazardIconIcon from '../../assets/RiskWarning_img/隐患点icon1@2x.png';
|
||||
import engineeringIconIcon from '../../assets/RiskWarning_img/危大工程icon1@2x.png';
|
||||
|
||||
import hazardIconIcon1 from '../../assets/MaMap_img/一般路内隐患点@2x.png';
|
||||
import hazardIconIcon2 from '../../assets/MaMap_img/一般路外隐患点@2x.png';
|
||||
@ -140,6 +142,13 @@ const menuItems = [
|
||||
icon: teamIconIcon,
|
||||
icon1: teamIconIcon1,
|
||||
},
|
||||
{
|
||||
label: '危大工程',
|
||||
icon: 'icon-hazard',
|
||||
iconClass: 'hazard',
|
||||
icon: engineeringIconIconIcon,
|
||||
icon1: engineeringIconIcon,
|
||||
},
|
||||
];
|
||||
|
||||
// 涉灾隐患点弹窗相关
|
||||
|
||||
@ -42,6 +42,7 @@ import bridgeIcon from '../../../assets/MaMap_img/桥梁icon@2x.png';
|
||||
import tunnelIcon from '../../../assets/MaMap_img/蓝色@2x1.png';
|
||||
import tunnelIcon2 from '../../../assets/MaMap_img/隧洞icon@2x.png';
|
||||
import rescueTeamIcon from '../../../assets/MaMap_img/队伍icon@2x.png';
|
||||
import engineeringIconIcon from '../../../assets/MaMap_img/危大工程icon@2x.png';
|
||||
|
||||
import hazardIconIcon1 from '../../../assets/MaMap_img/一般路内隐患点@2x.png';
|
||||
import hazardIconIcon2 from '../../../assets/MaMap_img/一般路外隐患点@2x.png';
|
||||
@ -89,11 +90,9 @@ const props = defineProps({
|
||||
watch(
|
||||
() => props.roadItem,
|
||||
async (newVal, oldVal) => {
|
||||
if (newVal !== oldVal) {
|
||||
await getAffectedRoadSectionData(false);
|
||||
}
|
||||
getAffectedRoadSectionData(false);
|
||||
},
|
||||
{ immediate: true }
|
||||
{ immediate: false }
|
||||
);
|
||||
// 定义 emits
|
||||
const emit = defineEmits([
|
||||
@ -351,15 +350,18 @@ const getAffectedCountyData = async () => {
|
||||
params: timeParams,
|
||||
});
|
||||
console.log('受影响对象数据:', res);
|
||||
clearProjectMarkers();
|
||||
if (res.code === '00000' && res.data) {
|
||||
// 统计各区县预警数量
|
||||
const warningStats = countWarningsByCounty(res.data);
|
||||
console.log('区县预警统计:', warningStats);
|
||||
affectedCountyData.value = warningStats;
|
||||
|
||||
getAffectedProjectData(true);
|
||||
getAffectedTunnelData(true);
|
||||
getAffectedBridgeData(true);
|
||||
getAffectedProjectData(true); // 获取受影响项目数据
|
||||
getAffectedTunnelData(true); // 获取受影响隧道数据
|
||||
getAffectedBridgeData(true); // 获取受影响桥梁数据
|
||||
getDangerProjectData(true); // 获取危大工程数据
|
||||
// 获取受影响路段数据
|
||||
for (let index = 0; index < 5; index++) {
|
||||
console.log(index);
|
||||
if (index == 0) {
|
||||
@ -380,13 +382,51 @@ const getAffectedCountyData = async () => {
|
||||
|
||||
// getEmergencyForceData();
|
||||
|
||||
loadMapData();
|
||||
loadMapData(); // 加载地图数据
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取受影响对象数据失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 通用数据过滤方法 - 根据区县筛选数据并设置坐标
|
||||
* @param {Array} dataList - 原始数据列表
|
||||
* @param {boolean} flag - 是否只筛选受影响区县的数据
|
||||
* @param {Object} options - 配置选项
|
||||
* @param {string} options.countyField - 区县字段名
|
||||
* @param {string} options.countyMatchField - 匹配区县时使用的字段名（如与countyField不同）
|
||||
* @param {Function} options.coordinateParser - 坐标解析函数，接收item返回[lng, lat]
|
||||
* @returns {Array} 过滤后的数据
|
||||
*/
|
||||
const filterDataByCounty = (dataList, flag, options) => {
|
||||
const { countyField = 'COUNTY', countyMatchField, coordinateParser } = options;
|
||||
const matchField = countyMatchField || countyField;
|
||||
const filteredData = [];
|
||||
|
||||
dataList.forEach(item => {
|
||||
// 区县名称处理：江北/渝北 -> 两江新区
|
||||
const countyValue = item[countyField];
|
||||
if (countyValue && (countyValue.includes('江北') || countyValue.includes('渝北'))) {
|
||||
item[countyField] = '两江新区';
|
||||
}
|
||||
|
||||
// 根据受影响区县列表进行过滤
|
||||
affectedCountyData.value.sortedList.forEach(j => {
|
||||
const matchValue = item[matchField];
|
||||
if (flag && matchValue && j.name && matchValue.includes(j.name)) {
|
||||
item.COORDINATE_POINT = coordinateParser(item);
|
||||
filteredData.push(item);
|
||||
} else if (!flag) {
|
||||
item.COORDINATE_POINT = coordinateParser(item);
|
||||
filteredData.push(item);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
return filteredData;
|
||||
};
|
||||
|
||||
const affectedBridgeData = ref([]);
|
||||
// 获取受影响桥梁数据
|
||||
const getAffectedBridgeData = async flag => {
|
||||
@ -398,24 +438,16 @@ const getAffectedBridgeData = async flag => {
|
||||
params: timeParams,
|
||||
});
|
||||
if (res.data) {
|
||||
res.data.forEach(item => {
|
||||
if (item.COUNTY && (item.COUNTY.includes('江北') || item.COUNTY.includes('渝北'))) {
|
||||
item.COUNTY = '两江新区';
|
||||
}
|
||||
affectedCountyData.value.sortedList.forEach(j => {
|
||||
// 判断是否是影响区域
|
||||
if (flag && item.GL1_QXMC && j.name && item.GL1_QXMC.includes(j.name)) {
|
||||
item.COORDINATE_POINT = [item.GL1_QLJD, item.GL1_QLWD];
|
||||
affectedBridgeData.value.push(item);
|
||||
} else if (!flag) {
|
||||
item.COORDINATE_POINT = [item.GL1_QLJD, item.GL1_QLWD];
|
||||
affectedBridgeData.value.push(item);
|
||||
}
|
||||
});
|
||||
// 使用通用过滤方法处理数据
|
||||
const filteredData = filterDataByCounty(res.data, flag, {
|
||||
countyField: 'COUNTY',
|
||||
countyMatchField: 'GL1_QXMC',
|
||||
coordinateParser: item => [item.GL1_QLJD, item.GL1_QLWD],
|
||||
});
|
||||
affectedBridgeData.value = filteredData;
|
||||
console.log('受影响桥梁数据:', affectedBridgeData.value);
|
||||
addProjectMarkers(affectedBridgeData.value, bridgeIcon, 'bridge');
|
||||
}
|
||||
console.log('受影响桥梁数据:', affectedBridgeData.value);
|
||||
addProjectMarkers(affectedBridgeData.value, bridgeIcon, 'bridge');
|
||||
} catch (error) {
|
||||
console.error('获取受影响桥梁数据失败:', error);
|
||||
return [];
|
||||
@ -433,21 +465,13 @@ const getAffectedTunnelData = async flag => {
|
||||
params: timeParams,
|
||||
});
|
||||
if (res.code === '00000' && res.data) {
|
||||
res.data.forEach(item => {
|
||||
if (item.COUNTY && (item.COUNTY.includes('江北') || item.COUNTY.includes('渝北'))) {
|
||||
item.COUNTY = '两江新区';
|
||||
}
|
||||
|
||||
affectedCountyData.value.sortedList.forEach(j => {
|
||||
if (flag && j.name && item.GL1_QXMC && item.GL1_QXMC.includes(j.name)) {
|
||||
item.COORDINATE_POINT = [Number(item.GL1_SDJD2), Number(item.GL1_SDWD2)];
|
||||
tunnelInfoDialogRef.value.push(item);
|
||||
} else if (!flag) {
|
||||
item.COORDINATE_POINT = [Number(item.GL1_SDJD2), Number(item.GL1_SDWD2)];
|
||||
tunnelInfoDialogRef.value.push(item);
|
||||
}
|
||||
});
|
||||
// 使用通用过滤方法处理数据
|
||||
const filteredData = filterDataByCounty(res.data, flag, {
|
||||
countyField: 'COUNTY',
|
||||
countyMatchField: 'GL1_QXMC',
|
||||
coordinateParser: item => [Number(item.GL1_SDJD2), Number(item.GL1_SDWD2)],
|
||||
});
|
||||
tunnelInfoDialogRef.value = filteredData;
|
||||
console.log('受影响隧道数据:', tunnelInfoDialogRef.value);
|
||||
addProjectMarkers(tunnelInfoDialogRef.value, tunnelIcon2, 'tunnel');
|
||||
}
|
||||
@ -471,48 +495,30 @@ const getAffectedProjectData = async flag => {
|
||||
console.log('受影响项目数据:', res);
|
||||
if (res.code === '00000' && res.data) {
|
||||
console.log('项目数据条数:', res.data.length);
|
||||
// 解析坐标数据
|
||||
const parsedData = res.data.map(item => {
|
||||
if (item.COUNTY && (item.COUNTY.includes('江北') || item.COUNTY.includes('渝北'))) {
|
||||
item.COUNTY = '两江新区';
|
||||
// 预处理：解析坐标格式
|
||||
const preprocessedData = res.data.map(item => {
|
||||
const newItem = { ...item };
|
||||
if (item.COORDINATE_POINT) {
|
||||
console.log('原始坐标:', item.COORDINATE_POINT);
|
||||
newItem.COORDINATE_POINT_PARSED = item.COORDINATE_POINT.substring(
|
||||
6,
|
||||
item.COORDINATE_POINT.length - 1
|
||||
)
|
||||
.split(' ')
|
||||
.reverse();
|
||||
console.log('解析后坐标:', newItem.COORDINATE_POINT_PARSED);
|
||||
}
|
||||
|
||||
affectedCountyData.value.sortedList.forEach(j => {
|
||||
const newItem = { ...item };
|
||||
// 判断 flag = true 是页面第一次进入
|
||||
if (
|
||||
flag &&
|
||||
item.COORDINATE_POINT &&
|
||||
j.name &&
|
||||
item.COUNTY &&
|
||||
item.COUNTY.includes(j.name)
|
||||
) {
|
||||
console.log('原始坐标:', item.COORDINATE_POINT);
|
||||
newItem.COORDINATE_POINT = item.COORDINATE_POINT.substring(
|
||||
6,
|
||||
item.COORDINATE_POINT.length - 1
|
||||
)
|
||||
.split(' ')
|
||||
.reverse();
|
||||
console.log('解析后坐标:', newItem.COORDINATE_POINT);
|
||||
} else if (!flag && item.COORDINATE_POINT) {
|
||||
console.log('原始坐标:', item.COORDINATE_POINT);
|
||||
newItem.COORDINATE_POINT = item.COORDINATE_POINT.substring(
|
||||
6,
|
||||
item.COORDINATE_POINT.length - 1
|
||||
)
|
||||
.split(' ')
|
||||
.reverse();
|
||||
console.log('解析后坐标:', newItem.COORDINATE_POINT);
|
||||
}
|
||||
return newItem;
|
||||
});
|
||||
return newItem;
|
||||
});
|
||||
|
||||
affectedProjectData.value = parsedData;
|
||||
// 使用通用过滤方法处理数据
|
||||
const filteredData = filterDataByCounty(preprocessedData, flag, {
|
||||
countyField: 'COUNTY',
|
||||
coordinateParser: item => item.COORDINATE_POINT_PARSED || [],
|
||||
});
|
||||
affectedProjectData.value = filteredData;
|
||||
// 在地图上添加项目标记
|
||||
console.log('开始添加项目标记...');
|
||||
addProjectMarkers(parsedData, projectIcon, 'project');
|
||||
addProjectMarkers(filteredData, projectIcon, 'project');
|
||||
} else {
|
||||
console.warn('没有获取到项目数据或返回码错误:', res);
|
||||
}
|
||||
@ -557,21 +563,15 @@ const getAffectedRoadSectionData = async flag => {
|
||||
},
|
||||
});
|
||||
console.log('受影响路段数据:', res);
|
||||
|
||||
if (res.code === '00000' && res.data) {
|
||||
res.data.forEach(item => {
|
||||
if (item.COUNTY && (item.COUNTY.includes('江北') || item.COUNTY.includes('渝北'))) {
|
||||
item.COUNTY = '两江新区';
|
||||
}
|
||||
affectedCountyData.value.sortedList.forEach(j => {
|
||||
if (flag && item.GL1_QXMC && j.name && item.GL1_QXMC.includes(j.name)) {
|
||||
// item.COORDINATE_POINT = JSON.parse(item.STARTPOINT);
|
||||
item.COORDINATE_POINT = [item.GL1_LON, item.GL1_LAT];
|
||||
} else if (!flag) {
|
||||
item.COORDINATE_POINT = [item.GL1_LON, item.GL1_LAT];
|
||||
}
|
||||
});
|
||||
// 使用通用过滤方法处理数据
|
||||
const filteredData = filterDataByCounty(res.data, flag, {
|
||||
countyField: 'COUNTY',
|
||||
countyMatchField: 'GL1_QXMC',
|
||||
coordinateParser: item => [item.GL1_LON, item.GL1_LAT],
|
||||
});
|
||||
affectedRoadSectionData.value = res.data;
|
||||
affectedRoadSectionData.value = filteredData;
|
||||
// 在地图上添加项目标记
|
||||
console.log('受影响路段数据:', affectedRoadSectionData.value);
|
||||
|
||||
@ -648,6 +648,37 @@ const getEmergencyForceData = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
const dangerProjectData = ref([]);
|
||||
// 获取危大工程数据
|
||||
const getDangerProjectData = async flag => {
|
||||
try {
|
||||
const res = await request({
|
||||
url: '/snow-ops-platform/dangerProjectInfo/listAll',
|
||||
method: 'GET',
|
||||
});
|
||||
console.log('危大工程数据:', res);
|
||||
if (res.code === '00000' && res.data) {
|
||||
// 使用通用过滤方法处理数据
|
||||
const filteredData = filterDataByCounty(res.data, flag, {
|
||||
countyField: 'districtName',
|
||||
coordinateParser: item => [item.longitude, item.latitude],
|
||||
});
|
||||
dangerProjectData.value = filteredData;
|
||||
console.log('过滤后危大工程数据:', filteredData);
|
||||
|
||||
// 在地图上添加危大工程标记
|
||||
console.log('开始添加危大工程标记...', filteredData);
|
||||
addProjectMarkers(filteredData, engineeringIconIcon, 'engineering');
|
||||
} else {
|
||||
console.warn('没有获取到危大工程数据或返回码错误:', res);
|
||||
}
|
||||
return res.data || [];
|
||||
} catch (error) {
|
||||
console.error('获取危大工程数据失败:', error);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
// 风险点数据
|
||||
const riskPointData = ref([]);
|
||||
// 风险点统计数据
|
||||
@ -1223,7 +1254,7 @@ const initMap = geoJsonData => {
|
||||
iconAnchor: [40, 15],
|
||||
});
|
||||
|
||||
const marker = window.L.marker(centroid, {
|
||||
const marker = window.L.marker(centroid, {
|
||||
icon: label,
|
||||
zIndexOffset: 500, // 提升标签层级
|
||||
});
|
||||
@ -1304,6 +1335,9 @@ watch(
|
||||
case '队伍':
|
||||
await getEmergencyForceData();
|
||||
break;
|
||||
case '危大工程':
|
||||
await getDangerProjectData(false);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
@ -1333,6 +1367,8 @@ watch(
|
||||
async (newVal, oldVal) => {
|
||||
console.log('dateRange 变化:', newVal, oldVal);
|
||||
// 先重新加载受影响区县数据
|
||||
clearProjectMarkers(); // 清除项目标记
|
||||
|
||||
await getAffectedCountyData();
|
||||
},
|
||||
{ deep: true }
|
||||
|
||||
@ -31,6 +31,7 @@
|
||||
<left
|
||||
:dateRange="getdateRange"
|
||||
@warningClick="handleWarningClick"
|
||||
@closeImpactItem="handleImpactItem = {}"
|
||||
@openImpactDetail="openDialog('impactPoint')"
|
||||
@openWarningInfo="openDialog('warningInfo')"
|
||||
@dispatchDateRange="handleDispatchDateRange"
|
||||
|
||||
@ -203,6 +203,7 @@ const emit = defineEmits([
|
||||
'dispatchDateRange',
|
||||
'openOfflineHelp',
|
||||
'openImageInspection',
|
||||
'closeImpactItem',
|
||||
]);
|
||||
|
||||
// 点击统计项
|
||||
@ -233,6 +234,7 @@ const handleWarningCardClick = item => {
|
||||
// 点击影响点明细
|
||||
const handleImpactDetailClick = () => {
|
||||
emit('openImpactDetail');
|
||||
emit('closeImpactItem', {});
|
||||
};
|
||||
|
||||
// 点击调度清单卡片
|
||||
|
||||
@ -71,7 +71,7 @@
|
||||
<!-- 巡查公路里程 -->
|
||||
<div class="patrol-section clickable">
|
||||
<div class="patrol-header display jc_sb ai_center">
|
||||
<div @click="handlePatrolClick" style="cursor: pointer;">
|
||||
<div @click="handlePatrolClick" style="cursor: pointer">
|
||||
<span class="patrol-title">巡查公路里程</span>
|
||||
<span class="patrol-mileage ml_10">{{ roadInspectionMileage }}km</span>
|
||||
</div>
|
||||
@ -80,7 +80,7 @@
|
||||
<span class="patrol-mileage ml_10">0处</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="patrol-grid" style="cursor: pointer;" @click="handlePatrolSituationClick">
|
||||
<div class="patrol-grid" style="cursor: pointer" @click="handlePatrolSituationClick">
|
||||
<div v-for="(item, index) in patrolData" :key="index" class="patrol-item">
|
||||
<div class="patrol-value">{{ item.value }}</div>
|
||||
<div class="patrol-label">{{ item.label }}</div>
|
||||
@ -546,7 +546,7 @@ const handleControlClick = item => {
|
||||
// 点击阻断情况
|
||||
const handleBlockClick = () => {
|
||||
emit('openClearanceSituation');
|
||||
emit('update:dateRange', dateRange.value);
|
||||
emit('update:filterForm', {});
|
||||
};
|
||||
|
||||
// 点击巡查公路里程
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user