Compare commits

..

No commits in common. "26d7a1ecbf316a958e62794b67553c7cf34e360c" and "a4d97d7e562070643fd535fdd87d5396fc92a97b" have entirely different histories.

16 changed files with 405 additions and 442 deletions

View File

@ -1,11 +1,10 @@
{
"printWidth": 150,
"printWidth": 100,
"tabWidth": 2,
"useTabs": false,
"semi": false,
"semi": true,
"singleQuote": true,
"trailingComma": "all",
"bracketSpacing": true,
"arrowParens": "always",
"endOfLine": "lf"
"trailingComma": "es5",
"arrowParens": "avoid",
"htmlWhitespaceSensitivity": "ignore",
"vueIndentScriptAndStyle": false
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.7 KiB

View File

@ -25,13 +25,30 @@
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">
@ -44,7 +61,12 @@
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>
@ -79,13 +101,13 @@
</template>
<script setup>
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
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;
//
// const dateRange = inject('dateRange', ref([]));
const props = defineProps({
@ -101,33 +123,25 @@ 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)
if (newVal.label) {
filterForm.value.roadConditionType = newVal.label.substring(0, newVal.label.length - 1) || ''
currentPage.value = 1
fetchData()
} else {
filterForm.value = {
district: '',
type: '',
roadConditionType: '',
() => props.itemFilterForm,
newVal => {
console.log('newVal', newVal);
filterForm.value.roadConditionType = newVal.label.substring(0, newVal.label.length - 1) || '';
currentPage.value = 1;
fetchData();
}
}
},
)
);
//
// index.js
@ -139,7 +153,7 @@ watch(
// index.js
//
const tableHeight = ref(300)
const tableHeight = ref(300);
//
const tableColumns = ref([
@ -158,36 +172,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',
@ -198,47 +212,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({
@ -254,10 +268,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 {
@ -273,25 +287,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>

View File

@ -183,6 +183,8 @@ watch(
if (newVal) {
//
getAffectedObjectTypeId(props.item);
console.log(basicInfo.value);
console.log(props.item);
}
}
);

View File

@ -52,7 +52,12 @@
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">
@ -65,7 +70,12 @@
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">
@ -176,25 +186,25 @@
</template>
<script setup>
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 { 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 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,
@ -204,16 +214,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 = [
@ -249,7 +259,7 @@ const unifiedColumns = [
slot: 'operation',
fixed: 'right',
},
]
];
//
const projectColumns = [
@ -293,19 +303,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: '路段' },
@ -313,17 +323,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 = {
@ -337,141 +347,135 @@ 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)
let countyName = ''
regionOptions.value.forEach((item) => {
if (item.label === filterForm.value.region) {
countyName = item.label || ''
}
})
console.log('原始时间范围:', props.handleImpactItem);
const roadConditionType =
regionOptions.value.find(item => item.value === filterForm.value.region)?.label || '';
return {
// start: `${year}-${month}-01 00:00:00`,
// end: `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`,
@ -479,14 +483,14 @@ const getTimeParams = () => {
end: formatDateTime(props.handleImpactItem.dateRange?.[1] || ''),
limit: pageSize.value,
offset: (currentPage.value - 1) * pageSize.value,
countyName: countyName || '',
roadConditionType: roadConditionType || '',
riskLevel: filterForm.value.pointLevel || '',
}
}
};
};
//
const processUnifiedData = (item, type) => {
//
const getLevelClass = (level) => {
const getLevelClass = level => {
const levelMap = {
红色预警: 'level-red',
橙色预警: 'level-orange',
@ -495,23 +499,37 @@ 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 || item.COUNTY_NAME || '-',
region:
item.GL1_QXMC ||
item.COUNTY ||
item.county ||
item.region ||
item.ADMINISTRATIVE_REGION ||
'-',
//
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),
@ -552,7 +570,7 @@ const processUnifiedData = (item, type) => {
},
// 使
rawData: item,
}
};
// BASE_GLQL
if (cardTypeVal.value === '桥梁') {
@ -590,7 +608,7 @@ const processUnifiedData = (item, type) => {
// name: item.GL1_QLGCS || "-",
// phone: item.GL1_QLGCSDH || "-",
// },
}
};
}
// BASE_GLSD
@ -629,7 +647,7 @@ const processUnifiedData = (item, type) => {
// name: item.GL1_GYDWYHGCS || "-",
// phone: item.GL1_GYDWYHGSCSDH || "-",
// },
}
};
}
// BASE_XJLD线
@ -637,11 +655,16 @@ const processUnifiedData = (item, type) => {
return {
...baseData,
// - 使
region: item.COUNTY_NAME || '-',
region: item.GL1_ZDMC || '-',
// - 使线+
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 || '',
@ -671,7 +694,7 @@ const processUnifiedData = (item, type) => {
name: item.ROAD_SECTION_CHIEF_NAME || '-',
phone: item.ROAD_SECTION_CHIEF_PHONE || '-',
},
}
};
}
// SQL
@ -714,105 +737,85 @@ 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>

View File

@ -1,5 +1,9 @@
<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>
@ -20,9 +24,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: {
@ -37,13 +41,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(() => {
@ -54,14 +58,13 @@ const dialogTitle = computed(() => {
road: '路段信息',
emergency: '抢险队伍',
slope: '边坡信息',
engineering: '危大工程信息',
}
return titleMap[props.type] || '详细信息'
})
};
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':
@ -91,7 +94,7 @@ const dialogItems = computed(() => {
{ label: '吹哨人', value: data.WHISTLEBLOWER_NAME || '-' },
{ label: '吹哨人电话', value: data.WHISTLEBLOWER_PHONE || '-' },
{ label: '备注', value: data.REMARKS || '-' },
]
];
case 'tunnel':
return [
{
@ -147,7 +150,7 @@ const dialogItems = computed(() => {
label: '评定等级',
value: data.GL1_PDDJ || '-',
},
]
];
case 'bridge':
return [
{
@ -195,7 +198,7 @@ const dialogItems = computed(() => {
label: '技术状况',
value: data.GL1_JSZKPJDJ || '-',
},
]
];
case 'road':
return [
{
@ -226,7 +229,7 @@ const dialogItems = computed(() => {
label: '照片',
value: data.photos || data.photos || '-',
},
]
];
case 'emergency':
return [
{ label: '队伍名称', value: data.gl1Yjllmc || '-' },
@ -236,7 +239,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 || '-' },
@ -247,25 +250,15 @@ 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>

View File

@ -59,7 +59,6 @@ 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';
@ -68,7 +67,6 @@ 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';
@ -142,13 +140,6 @@ const menuItems = [
icon: teamIconIcon,
icon1: teamIconIcon1,
},
{
label: '危大工程',
icon: 'icon-hazard',
iconClass: 'hazard',
icon: engineeringIconIconIcon,
icon1: engineeringIconIcon,
},
];
//

View File

@ -42,7 +42,6 @@ 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';
@ -90,9 +89,11 @@ const props = defineProps({
watch(
() => props.roadItem,
async (newVal, oldVal) => {
getAffectedRoadSectionData(false);
if (newVal !== oldVal) {
await getAffectedRoadSectionData(false);
}
},
{ immediate: false }
{ immediate: true }
);
// emits
const emit = defineEmits([
@ -350,18 +351,15 @@ 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); //
getDangerProjectData(true); //
//
getAffectedProjectData(true);
getAffectedTunnelData(true);
getAffectedBridgeData(true);
for (let index = 0; index < 5; index++) {
console.log(index);
if (index == 0) {
@ -382,51 +380,13 @@ 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 => {
@ -438,16 +398,24 @@ const getAffectedBridgeData = async flag => {
params: timeParams,
});
if (res.data) {
// 使
const filteredData = filterDataByCounty(res.data, flag, {
countyField: 'COUNTY',
countyMatchField: 'GL1_QXMC',
coordinateParser: item => [item.GL1_QLJD, item.GL1_QLWD],
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);
}
});
affectedBridgeData.value = filteredData;
});
}
console.log('受影响桥梁数据:', affectedBridgeData.value);
addProjectMarkers(affectedBridgeData.value, bridgeIcon, 'bridge');
}
} catch (error) {
console.error('获取受影响桥梁数据失败:', error);
return [];
@ -465,13 +433,21 @@ const getAffectedTunnelData = async flag => {
params: timeParams,
});
if (res.code === '00000' && res.data) {
// 使
const filteredData = filterDataByCounty(res.data, flag, {
countyField: 'COUNTY',
countyMatchField: 'GL1_QXMC',
coordinateParser: item => [Number(item.GL1_SDJD2), Number(item.GL1_SDWD2)],
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);
}
});
});
tunnelInfoDialogRef.value = filteredData;
console.log('受影响隧道数据:', tunnelInfoDialogRef.value);
addProjectMarkers(tunnelInfoDialogRef.value, tunnelIcon2, 'tunnel');
}
@ -495,30 +471,48 @@ const getAffectedProjectData = async flag => {
console.log('受影响项目数据:', res);
if (res.code === '00000' && res.data) {
console.log('项目数据条数:', res.data.length);
//
const preprocessedData = res.data.map(item => {
//
const parsedData = res.data.map(item => {
if (item.COUNTY && (item.COUNTY.includes('江北') || item.COUNTY.includes('渝北'))) {
item.COUNTY = '两江新区';
}
affectedCountyData.value.sortedList.forEach(j => {
const newItem = { ...item };
if (item.COORDINATE_POINT) {
// flag = true
if (
flag &&
item.COORDINATE_POINT &&
j.name &&
item.COUNTY &&
item.COUNTY.includes(j.name)
) {
console.log('原始坐标:', item.COORDINATE_POINT);
newItem.COORDINATE_POINT_PARSED = item.COORDINATE_POINT.substring(
newItem.COORDINATE_POINT = item.COORDINATE_POINT.substring(
6,
item.COORDINATE_POINT.length - 1
)
.split(' ')
.reverse();
console.log('解析后坐标:', newItem.COORDINATE_POINT_PARSED);
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;
});
// 使
const filteredData = filterDataByCounty(preprocessedData, flag, {
countyField: 'COUNTY',
coordinateParser: item => item.COORDINATE_POINT_PARSED || [],
});
affectedProjectData.value = filteredData;
affectedProjectData.value = parsedData;
//
console.log('开始添加项目标记...');
addProjectMarkers(filteredData, projectIcon, 'project');
addProjectMarkers(parsedData, projectIcon, 'project');
} else {
console.warn('没有获取到项目数据或返回码错误:', res);
}
@ -563,15 +557,21 @@ const getAffectedRoadSectionData = async flag => {
},
});
console.log('受影响路段数据:', res);
if (res.code === '00000' && res.data) {
// 使
const filteredData = filterDataByCounty(res.data, flag, {
countyField: 'COUNTY',
countyMatchField: 'GL1_QXMC',
coordinateParser: item => [item.GL1_LON, item.GL1_LAT],
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];
}
});
affectedRoadSectionData.value = filteredData;
});
affectedRoadSectionData.value = res.data;
//
console.log('受影响路段数据:', affectedRoadSectionData.value);
@ -648,37 +648,6 @@ 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([]);
//
@ -1335,9 +1304,6 @@ watch(
case '队伍':
await getEmergencyForceData();
break;
case '危大工程':
await getDangerProjectData(false);
break;
default:
break;
}
@ -1367,8 +1333,6 @@ watch(
async (newVal, oldVal) => {
console.log('dateRange 变化:', newVal, oldVal);
//
clearProjectMarkers(); //
await getAffectedCountyData();
},
{ deep: true }

View File

@ -31,7 +31,6 @@
<left
:dateRange="getdateRange"
@warningClick="handleWarningClick"
@closeImpactItem="handleImpactItem = {}"
@openImpactDetail="openDialog('impactPoint')"
@openWarningInfo="openDialog('warningInfo')"
@dispatchDateRange="handleDispatchDateRange"

View File

@ -203,7 +203,6 @@ const emit = defineEmits([
'dispatchDateRange',
'openOfflineHelp',
'openImageInspection',
'closeImpactItem',
]);
//
@ -234,7 +233,6 @@ const handleWarningCardClick = item => {
//
const handleImpactDetailClick = () => {
emit('openImpactDetail');
emit('closeImpactItem', {});
};
//

View File

@ -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:filterForm', {});
emit('update:dateRange', dateRange.value);
};
//