修改页面假数据文字

This commit is contained in:
fanjia 2026-05-11 17:52:31 +08:00
parent 6182de8b95
commit f60c84c9b8
9 changed files with 298 additions and 395 deletions

View File

@ -1,55 +1,24 @@
<template>
<div class="disaster-analysis">
<div class="disaster-analysis__row">
<DataField
label="灾害类型"
:value="disasterInfo.type"
:icon="DataFieldIcon1"
/>
<DataField
label="损坏方量"
:value="disasterInfo.volume"
:unit="disasterInfo.volumeUnit"
:icon="DataFieldIcon2"
/>
<DataField label="灾害类型" :value="disasterInfo.type" :icon="DataFieldIcon1" />
<DataField label="损坏方量" :value="disasterInfo.volume" :unit="disasterInfo.volumeUnit" :icon="DataFieldIcon2" />
</div>
<div class="disaster-analysis__row">
<DataField
label="滑坡体长度"
:value="disasterInfo.length"
:unit="disasterInfo.lengthUnit"
:icon="DataFieldIcon3"
/>
<DataField
label="滑坡体宽度"
:value="disasterInfo.width"
:unit="disasterInfo.widthUnit"
:icon="DataFieldIcon4"
/>
<DataField label="滑坡体长度" :value="disasterInfo.length" :unit="disasterInfo.lengthUnit" :icon="DataFieldIcon3" />
<DataField label="滑坡体宽度" :value="disasterInfo.width" :unit="disasterInfo.widthUnit" :icon="DataFieldIcon4" />
</div>
<div class="disaster-analysis__row">
<DataField
label="人员伤亡"
:value="disasterInfo.casualties"
unit="人"
color-type="success"
:icon="DataFieldIcon5"
/>
<DataField
label="车辆损坏"
:value="disasterInfo.vehicles"
unit="台"
color-type="success"
:icon="DataFieldIcon6"
/>
<DataField label="人员伤亡" :value="disasterInfo.casualties" unit="人" color-type="success" :icon="DataFieldIcon5" />
<DataField label="车辆损坏" :value="disasterInfo.vehicles" unit="台" color-type="success" :icon="DataFieldIcon6" />
</div>
</div>
</template>
<script setup>
import { inject } from 'vue'
import { inject, ref } from 'vue'
import DataField from '../shared/DataField.vue'
import DataFieldIcon1 from '../../assets/images/DataField/icon-1.png'
@ -59,7 +28,18 @@ import DataFieldIcon4 from '../../assets/images/DataField/icon-4.png'
import DataFieldIcon5 from '../../assets/images/DataField/icon-5.png'
import DataFieldIcon6 from '../../assets/images/DataField/icon-6.png'
const { disasterInfo } = inject('disasterData')
// const { disasterInfo } = inject('disasterData')
const disasterInfo = ref({
type: '边坡垮塌',
volume: '1220m³',
length: '33',
width: '15m',
volumeUnit: '',
lengthUnit: 'm',
widthUnit: '',
casualties: '0',
vehicles: '0',
})
</script>
<style scoped lang="scss">

View File

@ -1,17 +1,17 @@
<template>
<div class="map-viewer">
<!-- Cesium 地图容器 -->
<MapViewport />
<!-- <MapViewport /> -->
<!-- 地图控制工具 - 使用 Teleport 传送到更高层级 -->
<!-- 延迟渲染确保目标元素已存在 -->
<Teleport to="#sa-controls" v-if="isMounted">
<!-- <Teleport to="#sa-controls" v-if="isMounted">
<MapControls
:active-tool-key="activeToolKey"
@tool-change="handleToolChange"
@device-watch="handleDeviceWatch"
/>
</Teleport>
</Teleport> -->
</div>
</template>

View File

@ -3,22 +3,14 @@
<!-- 1. 现场指挥部 -->
<section class="plan-section">
<div class="section-header">
<img
src="../../assets/images/modal/弹窗title.png"
alt=""
class="title-icon"
/>
<img src="../../assets/images/modal/弹窗title.png" alt="" class="title-icon" />
<h3 class="section-title">现场指挥部</h3>
</div>
<div class="section-body">
<div class="form-grid">
<div class="form-item">
<label>指挥长</label>
<el-select
v-model="formData.commander"
class="custom-select"
popper-class="custom-dropdown"
>
<el-select v-model="formData.commander" class="custom-select" popper-class="custom-dropdown">
<el-option label="陈前" value="陈前" />
<el-option label="王军" value="王军" />
<el-option label="李明" value="李明" />
@ -27,11 +19,7 @@
</div>
<div class="form-item">
<label>副指挥长</label>
<el-select
v-model="formData.viceCommander"
class="custom-select"
popper-class="custom-dropdown"
>
<el-select v-model="formData.viceCommander" class="custom-select" popper-class="custom-dropdown">
<el-option label="樵继川" value="樵继川" />
<el-option label="刘勇" value="刘勇" />
<el-option label="陈强" value="陈强" />
@ -45,66 +33,37 @@
<!-- 2. 多路协同处置三级指挥中心 -->
<section class="plan-section">
<div class="section-header">
<img
src="../../assets/images/modal/弹窗title.png"
alt=""
class="title-icon"
/>
<img src="../../assets/images/modal/弹窗title.png" alt="" class="title-icon" />
<h3 class="section-title">多路协同处置三级指挥中心</h3>
</div>
<div class="section-body">
<div class="form-grid grid-2x2">
<div class="form-item">
<label>交通管控</label>
<el-select
v-model="formData.trafficControl"
class="custom-select"
popper-class="custom-dropdown"
>
<el-option
label="忠县交通巡逻警察大队"
value="忠县交通巡逻警察大队"
/>
<el-option
label="公安交警、交通执法队"
value="公安交警、交通执法队"
/>
<el-select v-model="formData.trafficControl" class="custom-select" popper-class="custom-dropdown">
<el-option label="忠县交通巡逻警察大队" value="忠县交通巡逻警察大队" />
<el-option label="公安交警、交通执法队" value="公安交警、交通执法队" />
<el-option label="交通管理局" value="交通管理局" />
</el-select>
</div>
<div class="form-item">
<label>交通信息发布</label>
<el-select
v-model="formData.infoRelease"
class="custom-select"
popper-class="custom-dropdown"
>
<el-select v-model="formData.infoRelease" class="custom-select" popper-class="custom-dropdown">
<el-option label="融媒体中心" value="融媒体中心" />
<el-option label="新闻中心" value="新闻中心" />
</el-select>
</div>
<div class="form-item">
<label>人车调拨</label>
<el-select
v-model="formData.vehicleDispatch"
class="custom-select"
popper-class="custom-dropdown"
>
<el-option
label="忠县交通运输综合执法支队"
value="忠县交通运输综合执法支队"
/>
<el-select v-model="formData.vehicleDispatch" class="custom-select" popper-class="custom-dropdown">
<el-option label="忠县交通运输综合执法支队" value="忠县交通运输综合执法支队" />
<el-option label="xxx消防队" value="xxx消防队" />
<el-option label="应急救援队" value="应急救援队" />
</el-select>
</div>
<div class="form-item">
<label>人员救援</label>
<el-select
v-model="formData.personnelRescue"
class="custom-select"
popper-class="custom-dropdown"
>
<el-select v-model="formData.personnelRescue" class="custom-select" popper-class="custom-dropdown">
<el-option label="忠县人民医院" value="忠县人民医院" />
<el-option label="xx医院" value="xx医院" />
<el-option label="中心医院" value="中心医院" />
@ -117,37 +76,22 @@
<!-- 3. 公路抢通方案 -->
<section class="plan-section">
<div class="section-header">
<img
src="../../assets/images/modal/弹窗title.png"
alt=""
class="title-icon"
/>
<img src="../../assets/images/modal/弹窗title.png" alt="" class="title-icon" />
<h3 class="section-title">公路抢通方案</h3>
</div>
<div class="section-body">
<div class="form-grid grid-2-cols">
<div class="form-item">
<label>抢通方式</label>
<el-select
v-model="formData.clearanceMethod"
class="custom-select"
popper-class="custom-dropdown"
>
<el-option
label="两端对接抢通,必要时开辟工作面"
value="两端对接抢通,必要时开辟工作面"
/>
<el-select v-model="formData.clearanceMethod" class="custom-select" popper-class="custom-dropdown">
<el-option label="两端对接抢通,必要时开辟工作面" value="两端对接抢通,必要时开辟工作面" />
<el-option label="单端推进抢通" value="单端推进抢通" />
<el-option label="多点同时作业" value="多点同时作业" />
</el-select>
</div>
<div class="form-item">
<label>预计抢通时间</label>
<el-select
v-model="formData.estimatedTime"
class="custom-select"
popper-class="custom-dropdown"
>
<el-select v-model="formData.estimatedTime" class="custom-select" popper-class="custom-dropdown">
<el-option label="6小时" value="6小时" />
<el-option label="8小时" value="8小时" />
<el-option label="12小时" value="12小时" />
@ -158,12 +102,7 @@
<div class="plan-steps">
<div v-for="step in clearanceSteps" :key="step.id" class="step-item">
<label class="step-label">{{ step.number }}{{ step.title }}</label>
<el-input
v-model="step.content"
type="textarea"
:autosize="{ minRows: 2, maxRows: 4 }"
class="step-content-input"
/>
<el-input v-model="step.content" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" class="step-content-input" />
</div>
</div>
</div>
@ -172,11 +111,7 @@
<!-- 4. 所需力量 -->
<section class="plan-section">
<div class="section-header">
<img
src="../../assets/images/modal/弹窗title.png"
alt=""
class="title-icon"
/>
<img src="../../assets/images/modal/弹窗title.png" alt="" class="title-icon" />
<h3 class="section-title">所需力量</h3>
</div>
<div class="section-body">
@ -201,11 +136,7 @@
<!-- 5. 力量调派方案 -->
<section class="plan-section">
<div class="section-header">
<img
src="../../assets/images/modal/弹窗title.png"
alt=""
class="title-icon"
/>
<img src="../../assets/images/modal/弹窗title.png" alt="" class="title-icon" />
<h3 class="section-title">力量调派方案</h3>
<button class="add-btn" @click="handleAddPlan">
<span class="add-icon">+</span>
@ -214,28 +145,14 @@
</div>
<div class="section-body">
<div class="dispatch-plans">
<div
v-for="plan in dispatchPlans"
:key="plan.id"
class="dispatch-card"
>
<button
class="close-btn"
@click="handleDeletePlan(plan.id)"
title="删除"
>
×
</button>
<div v-for="plan in dispatchPlans" :key="plan.id" class="dispatch-card">
<button class="close-btn" @click="handleDeletePlan(plan.id)" title="删除">×</button>
<h4 class="plan-name">
<span class="plan-icon"></span>
基地{{ plan.id }}{{ plan.stationName || "xxxxx名称" }}
基地{{ plan.id }}{{ plan.stationName || 'xxxxx名称' }}
</h4>
<div class="resource-grid">
<div
v-for="(resource, index) in plan.resources"
:key="index"
class="resource-item"
>
<div v-for="(resource, index) in plan.resources" :key="index" class="resource-item">
<span class="resource-label">{{ resource.label }}</span>
<span class="resource-value">{{ resource.value }}</span>
</div>
@ -248,27 +165,18 @@
<!-- 5. 后续处治 -->
<section class="plan-section">
<div class="section-header">
<img
src="../../assets/images/modal/弹窗title.png"
alt=""
class="title-icon"
/>
<img src="../../assets/images/modal/弹窗title.png" alt="" class="title-icon" />
<h3 class="section-title">后续处治</h3>
</div>
<div class="section-body">
<el-input
v-model="followUpText"
type="textarea"
:autosize="{ minRows: 3, maxRows: 6 }"
class="follow-up-textarea"
/>
<el-input v-model="followUpText" type="textarea" :autosize="{ minRows: 3, maxRows: 6 }" class="follow-up-textarea" />
</div>
</section>
</div>
</template>
<script setup>
import { ref, reactive, computed, watch } from "vue";
import { ref, reactive, computed, watch } from 'vue'
/**
* Props 定义
@ -278,26 +186,36 @@ const props = defineProps({
type: Array,
default: () => [],
},
});
})
/**
* 可用站点列表从快速匹配传入
*/
const availableStations = computed(() => props.stations);
const availableStations = computed(() => props.stations)
/**
* 表单数据
*/
// const formData = reactive({
// commander: "",
// viceCommander: "",
// trafficControl: "",
// infoRelease: "",
// vehicleDispatch: "",
// personnelRescue: "",
// clearanceMethod: "",
// estimatedTime: "6",
// });
const formData = reactive({
commander: "陈前",
viceCommander: "樵继川",
trafficControl: "忠县交通巡逻警察大队",
infoRelease: "融媒体中心",
vehicleDispatch: "忠县交通运输综合执法支队",
personnelRescue: "忠县人民医院",
clearanceMethod: "两端对接抢通,必要时开辟工作面",
estimatedTime: "6小时",
});
commander: '陈前',
viceCommander: '樵继川',
trafficControl: '黔江区交通管理支队',
infoRelease: '区融媒体中心',
vehicleDispatch: '区交通综合执法支队',
personnelRescue: '区卫健委',
clearanceMethod: '单向抢通,必要时联系酉阳交通部门协助抢通',
estimatedTime: '15小时',
})
/**
* 公路抢通方案步骤
@ -305,61 +223,68 @@ const formData = reactive({
const clearanceSteps = reactive([
{
id: 1,
number: "①",
title: "评估封控",
content:
"对现场进行封闭,落实告警阻拦措施;对灾毁周边稳定性进行评估,划定作业区与危险区,设立观察哨,全程监控边坡状态。",
number: '①',
title: '评估封控',
content: '对现场进行封闭,落实告警阻拦措施;对灾毁周边稳定性进行评估,划定作业区与危险区,设立观察哨,全程监控边坡状态。',
},
{
id: 2,
number: "②",
title: "边坡排险",
content:
"在确保安全的前提下,使用长臂挖掘机或人工在安全绳保护下对坡面上已松动、悬空的岩石和土体进行清除,注意下方暂停作业。",
number: '②',
title: '边坡排险',
content: '在确保安全的前提下,使用长臂挖掘机或人工在安全绳保护下对坡面上已松动、悬空的岩石和土体进行清除,注意下方暂停作业。',
},
{
id: 3,
number: "③",
title: "梯形清方",
number: '③',
title: '梯形清方',
content:
'挖掘机在最前方、负责将塌方体挖松,装载机将土石料装入渣土车,渣土车编队运输,将废料运至指定弃渣场。确保挖掘机、装载机、渣土车数量匹配,形成高效的"挖一装一运"循环。',
},
{
id: 4,
number: "④",
title: "开辟工作面",
number: '④',
title: '开辟工作面',
content:
"根据抢通和救援要求,利用挖掘机、装载机或无人设备开辟新的工作面,增加作业效率。",
// "",
'根据抢通的时间要求,增加大型土石方设备,提升作业效率,或增加装备从对向同时清理,',
},
{
id: 5,
number: "⑤",
title: "交通疏导",
number: '⑤',
title: '交通疏导',
content:
"清理出足够疏散车辆的临时性通道,临时通道边缘用锥桶或沙袋进行警示和防护,在现场指挥下,放行积压车辆。",
// "",
'清理出足够疏散车辆的临时性通道,临时通道边缘用锥桶或沙袋进行警示和防护,在现场指挥下,放行积压车辆。',
},
{
id: 6,
number: "⑥",
title: "全断面抢通",
content: "将剩余塌方体彻底清理,恢复路面原状。",
number: '⑥',
title: '全断面抢通',
content: '将剩余塌方体彻底清理,恢复路面原状。',
},
]);
])
/**
* 所需力量数据
*/
const requiredResources = ref([
{ label: "挖掘设备", value: "2台" },
{ label: "装载机", value: "2台" },
{ label: "运渣设备", value: "6台" },
{ label: "运输设备", value: "2台" },
{ label: "人员", value: "20人" },
{
label: "物资",
value: "标志标牌10块、锥桶50件铁锹10把雪糕筒100件麻袋、砂石料等若干",
},
]);
{ label: '长臂挖掘机', value: '1台' },
{ label: '履带挖掘机', value: '2台' },
{ label: '装载机', value: '2台' },
{ label: '运渣车辆', value: '6台' },
{ label: '运输车辆', value: '2台' },
{ label: '人员', value: '20人' },
{ label: '物资', value: '标志标牌10块、锥桶50件铁锹10把雪糕筒100件麻袋、砂石料等若干' },
// { label: "", value: "2" },
// { label: "", value: "2" },
// { label: "", value: "6" },
// { label: "", value: "2" },
// { label: "", value: "20" },
// {
// label: "",
// value: "105010100",
// },
])
/**
* 力量调派预案
@ -367,46 +292,44 @@ const requiredResources = ref([
const dispatchPlans = ref([
{
id: 1,
stationName: "", // stations
stationName: '', // stations
resources: [
{ label: "轮式挖掘机", value: "1台" },
{ label: "平板拖车", value: "1台" },
{ label: "自卸货车", value: "4台" },
{ label: "工程车", value: "1台" },
{ label: "装载机", value: "1台" },
{ label: "人员", value: "15人" },
{ label: "锥桶", value: "30件" },
{ label: "铁锹", value: "10件" },
{ label: "雪糕筒", value: "50件" },
{ label: "标志标牌", value: "5块" },
{ label: "麻袋、砂石袋等", value: "若干" },
{ label: '轮式挖掘机', value: '1台' },
{ label: '平板拖车', value: '1台' },
{ label: '自卸货车', value: '4台' },
{ label: '工程车', value: '1台' },
{ label: '装载机', value: '1台' },
{ label: '人员', value: '15人' },
{ label: '锥桶', value: '30件' },
{ label: '铁锹', value: '10件' },
{ label: '雪糕筒', value: '50件' },
{ label: '标志标牌', value: '5块' },
{ label: '麻袋、砂石袋等', value: '若干' },
],
},
{
id: 2,
stationName: "",
stationName: '',
resources: [
{ label: "轮式挖掘机", value: "1台" },
{ label: "平板拖车", value: "1台" },
{ label: "自卸货车", value: "4台" },
{ label: "工程车", value: "1台" },
{ label: "装载机", value: "1台" },
{ label: "人员", value: "5人" },
{ label: "锥桶", value: "20件" },
{ label: "铁锹", value: "0件" },
{ label: "雪糕筒", value: "50件" },
{ label: "标志标牌", value: "5块" },
{ label: "麻袋、砂石袋等", value: "若干" },
{ label: '轮式挖掘机', value: '1台' },
{ label: '平板拖车', value: '1台' },
{ label: '自卸货车', value: '4台' },
{ label: '工程车', value: '1台' },
{ label: '装载机', value: '1台' },
{ label: '人员', value: '5人' },
{ label: '锥桶', value: '20件' },
{ label: '铁锹', value: '0件' },
{ label: '雪糕筒', value: '50件' },
{ label: '标志标牌', value: '5块' },
{ label: '麻袋、砂石袋等', value: '若干' },
],
},
]);
])
/**
* 后续处治文本
*/
const followUpText = ref(
"将该处作为重大涉灾隐患点,设置“注意落石、观察通行”等标志,进行提级管控,进行边坡治理或设置监测预警设备。"
);
const followUpText = ref('将该处作为重大涉灾隐患点,设置“注意落石、观察通行”等标志,进行提级管控,进行边坡治理或设置监测预警设备。')
/**
* 根据站点索引获取站点名称
@ -415,19 +338,19 @@ const followUpText = ref(
*/
const getStationNameByIndex = (index) => {
if (availableStations.value && availableStations.value.length > index) {
return availableStations.value[index].name;
return availableStations.value[index].name
}
return ''
}
return "";
};
/**
* 自动为所有基地分配站点名称
*/
const assignStationNames = () => {
dispatchPlans.value.forEach((plan, index) => {
plan.stationName = getStationNameByIndex(index);
});
};
plan.stationName = getStationNameByIndex(index)
})
}
/**
* 监听站点数据变化自动分配站点名称
@ -435,65 +358,65 @@ const assignStationNames = () => {
watch(
() => props.stations,
(newStations) => {
console.log("[EmergencyPlanContent] 站点数据变化检测:", newStations);
console.log('[EmergencyPlanContent] 站点数据变化检测:', newStations)
if (newStations && newStations.length > 0) {
assignStationNames();
console.log("[EmergencyPlanContent] 站点数据更新,自动分配站点名称");
console.log("[EmergencyPlanContent] 当前基地列表:", dispatchPlans.value);
assignStationNames()
console.log('[EmergencyPlanContent] 站点数据更新,自动分配站点名称')
console.log('[EmergencyPlanContent] 当前基地列表:', dispatchPlans.value)
} else {
console.log("[EmergencyPlanContent] 站点数据为空或未定义");
console.log('[EmergencyPlanContent] 站点数据为空或未定义')
}
},
{ immediate: true, deep: true }
);
{ immediate: true, deep: true },
)
/**
* 处理新增预案按钮点击
*/
const handleAddPlan = () => {
//
return;
console.log("[EmergencyPlanContent] 点击新增预案");
const newId = Math.max(...dispatchPlans.value.map((p) => p.id)) + 1;
const newIndex = dispatchPlans.value.length;
return
console.log('[EmergencyPlanContent] 点击新增预案')
const newId = Math.max(...dispatchPlans.value.map((p) => p.id)) + 1
const newIndex = dispatchPlans.value.length
dispatchPlans.value.push({
id: newId,
stationName: getStationNameByIndex(newIndex),
resources: [
{ label: "轮式挖掘机", value: "1台" },
{ label: "平板拖车", value: "1台" },
{ label: "自卸货车", value: "4台" },
{ label: "工程车", value: "1台" },
{ label: "装载机", value: "15台" },
{ label: "人员", value: "5人" },
{ label: "锥桶", value: "30件" },
{ label: "铁锹", value: "10件" },
{ label: "雪糕筒", value: "50件" },
{ label: "标志标牌", value: "5块" },
{ label: "麻袋、砂石袋等", value: "若干" },
{ label: '轮式挖掘机', value: '1台' },
{ label: '平板拖车', value: '1台' },
{ label: '自卸货车', value: '4台' },
{ label: '工程车', value: '1台' },
{ label: '装载机', value: '15台' },
{ label: '人员', value: '5人' },
{ label: '锥桶', value: '30件' },
{ label: '铁锹', value: '10件' },
{ label: '雪糕筒', value: '50件' },
{ label: '标志标牌', value: '5块' },
{ label: '麻袋、砂石袋等', value: '若干' },
],
});
};
})
}
/**
* 处理删除预案
*/
const handleDeletePlan = (id) => {
//
return;
console.log("[EmergencyPlanContent] 删除预案", id);
const index = dispatchPlans.value.findIndex((p) => p.id === id);
return
console.log('[EmergencyPlanContent] 删除预案', id)
const index = dispatchPlans.value.findIndex((p) => p.id === id)
if (index > -1) {
dispatchPlans.value.splice(index, 1);
dispatchPlans.value.splice(index, 1)
//
assignStationNames();
assignStationNames()
}
}
};
</script>
<style scoped lang="scss">
@use "@/styles/mixins.scss" as *;
@use '@/styles/mixins.scss' as *;
.emergency-plan-content {
padding: 0;
@ -898,7 +821,7 @@ const handleDeletePlan = (id) => {
line-height: 19px;
font-family: SourceHanSansCN-Medium, sans-serif;
font-weight: 500;
color: #4FECFF;
color: #4fecff;
}
}
}

View File

@ -329,18 +329,18 @@ const previewPhoto = (index) => {
//
const handleVideo = (item, type) => {
console.log('视频通话:', item)
let textType = ''
if (props.title.includes('涉灾隐患点')) {
textType = '涉灾隐患点'
} else if (props.title.includes('路段')) {
textType = '路段'
}
// let textType = ''
// if (props.title.includes('')) {
// textType = ''
// } else if (props.title.includes('')) {
// textType = ''
// }
let videoParams = {
...item,
id: hazardData.value.id,
type: type,
role: getRolefn(type),
textType: textType,
textType: "risk-point",
}
openVideoConference(videoParams)
// emit('video', {
@ -352,18 +352,18 @@ const handleVideo = (item, type) => {
//
const handleVoice = (item, type) => {
console.log('语音通话:', item)
let textType = ''
if (props.title.includes('涉灾隐患点')) {
textType = '涉灾隐患点'
} else if (props.title.includes('路段')) {
textType = '路段'
}
// let textType = ''
// if (props.title.includes('')) {
// textType = ''
// } else if (props.title.includes('')) {
// textType = ''
// }
let voiceParams = {
...item,
id: hazardData.value.id,
type: type,
role: getRolefn(type),
textType: textType,
textType: "risk-point",
}
openVoiceConference(voiceParams)
// emit('voice', {
@ -375,18 +375,18 @@ const handleVoice = (item, type) => {
//
const handleCall = (item, type) => {
console.log('拨打电话:', item)
let textType = ''
if (props.title.includes('涉灾隐患点')) {
textType = '涉灾隐患点'
} else if (props.title.includes('路段')) {
textType = '路段'
}
// let textType = ''
// if (props.title.includes('')) {
// textType = ''
// } else if (props.title.includes('')) {
// textType = ''
// }
emit('call', {
...item,
id: hazardData.value.id,
type: type,
role: getRolefn(type),
textType: textType,
textType: "risk-point",
})
}
const getRolefn = (item) => {

View File

@ -189,7 +189,7 @@ const handleView = (item) => {
type: '护路员',
role: '路长',
text: '拨打视频电话',
textType: '农村公路',
textType: 'road-captain',
})
}
@ -201,7 +201,7 @@ const handleVoice = (item) => {
type: '',
role: '路长',
text: '拨打语音电话',
textType: '农村公路',
textType: 'road-captain',
})
}
@ -213,7 +213,7 @@ const handleCall = (item) => {
type: '护路员',
role: '路长',
text: '拨打电话',
textType: '农村公路',
textType: 'road-captain',
})
}

View File

@ -1,7 +1,8 @@
<template>
<!-- :title="`${props.allCountyData.name}建设项目责任人详情`" -->
<base-dialog
:visible="props.visible"
:title="`${props.allCountyData.name}建设项目责任人详情`"
:title="`建设项目责任人详情`"
:table-data="tableData"
:table-columns="tableColumns"
:table-height="350"
@ -35,19 +36,9 @@
</template>
<script setup>
import { ref, watch } from 'vue';
import baseDialog from '../component/baseDialog.vue';
import {
Close,
VideoCamera,
Microphone,
Phone,
ArrowLeft,
ArrowRight,
User,
OfficeBuilding,
MapLocation,
} from '@element-plus/icons-vue';
import { ref, watch } from 'vue'
import baseDialog from '../component/baseDialog.vue'
import { Close, VideoCamera, Microphone, Phone, ArrowLeft, ArrowRight, User, OfficeBuilding, MapLocation } from '@element-plus/icons-vue'
const props = defineProps({
visible: {
@ -58,9 +49,9 @@ const props = defineProps({
type: Object,
default: () => {},
},
});
})
const emit = defineEmits(['update:visible', 'close']);
const emit = defineEmits(['update:visible', 'close'])
//
const tableColumns = ref([
@ -74,7 +65,7 @@ const tableColumns = ref([
{ prop: 'districtUnit', label: '区县级包保责任人', width: '' },
{ prop: 'cityUnit', label: '市级包保责任人', width: '' },
{ prop: 'dispatch', label: '调度', width: '', slot: 'dispatch' },
]);
])
//
const tableData = ref([
@ -133,58 +124,58 @@ const tableData = ref([
districtUnit: '梁九\n12100121000',
cityUnit: '宋十\n12000120000',
},
]);
])
const total = ref(36);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(36)
const currentPage = ref(1)
const pageSize = ref(10)
//
const handleClose = () => {
emit('update:visible', false);
emit('close');
};
emit('update:visible', false)
emit('close')
}
//
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 fetchData = () => {
console.log('获取第', currentPage.value, '页数据');
console.log('获取第', currentPage.value, '页数据')
// API
};
}
//
const handleView = item => {
console.log('查看视频:', item);
};
const handleView = (item) => {
console.log('查看视频:', item)
}
const handleVoice = item => {
console.log('语音通话:', item);
};
const handleVoice = (item) => {
console.log('语音通话:', item)
}
const handleCall = item => {
console.log('拨打电话:', item);
};
const handleCall = (item) => {
console.log('拨打电话:', item)
}
// visible
watch(
() => props.visible,
newVal => {
(newVal) => {
if (newVal) {
currentPage.value = 1;
fetchData();
currentPage.value = 1
fetchData()
}
}
);
},
)
</script>
<style lang="scss" scoped>

View File

@ -1,7 +1,8 @@
<template>
<!-- :title="props.allCountyData.name + '建设项目责任人明细'" -->
<base-dialog
:visible="props.visible"
:title="props.allCountyData.name + '建设项目责任人明细'"
title="建设项目责任人明细"
:table-data="tableData"
:table-columns="tableColumns"
:table-height="400"
@ -22,8 +23,8 @@
</template>
<script setup>
import { ref, computed, watch } from 'vue';
import baseDialog from '../component/baseDialog.vue';
import { ref, computed, watch } from 'vue'
import baseDialog from '../component/baseDialog.vue'
const props = defineProps({
visible: {
@ -42,9 +43,9 @@ const props = defineProps({
name: '',
}),
},
});
})
const emit = defineEmits(['update:visible', 'close', 'detail']);
const emit = defineEmits(['update:visible', 'close', 'detail'])
//
const tableColumns = ref([
@ -58,7 +59,7 @@ const tableColumns = ref([
{ prop: 'districtLevel', label: '区县级包保责任人', width: '' },
{ prop: 'cityLevel', label: '市级包保责任人', width: '' },
{ prop: 'operation', label: '操作', width: '60px', slot: 'operation' },
]);
])
//
const tableData = ref([
@ -84,72 +85,72 @@ const tableData = ref([
districtLevel: 2,
cityLevel: 2,
},
]);
])
//
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 = 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 handleDetail = item => {
emit('detail', item);
};
const handleDetail = (item) => {
emit('detail', item)
}
//
const handleSizeChange = size => {
pageSize.value = size;
currentPage.value = 1;
fetchData();
};
const handleSizeChange = (size) => {
pageSize.value = size
currentPage.value = 1
fetchData()
}
const handleCurrentChange = page => {
currentPage.value = page;
fetchData();
};
const handleCurrentChange = (page) => {
currentPage.value = page
fetchData()
}
//
const fetchData = () => {
console.log('获取第', currentPage.value, '页数据');
console.log('获取第', currentPage.value, '页数据')
// API
};
}
// visible
watch(
() => props.visible,
newVal => {
(newVal) => {
if (newVal) {
currentPage.value = 1;
fetchData();
currentPage.value = 1
fetchData()
}
}
);
},
)
</script>
<style lang="scss" scoped>

View File

@ -599,22 +599,30 @@ const handleDistrictClick = (item) => {
//
const handleCenterCardClick = (item) => {
console.log('中心卡片点击:', item)
if (item.type == '国省道调度') {
//
} else if (item.type == '农村公路调度') {
//
openDialog('responseSituation')
} else if (item.type == '建设工程调度') {
openDialog('tongnanResponsible')
//
}
//
if (chongqingMapRef.value && item.data) {
const cardData = {
title: getCardTitleByType(item.type),
dataList: item.data,
}
// if (item.type == 'second') return
chongqingMapRef.value.openCenterCard(cardData)
// if (chongqingMapRef.value && item.data) {
// const cardData = {
// title: getCardTitleByType(item.type),
// dataList: item.data,
// }
// chongqingMapRef.value.openCenterCard(cardData)
//
if (item.data.length > 0 && (item.data[0].countyName || item.data[0].name)) {
const firstCounty = item.data[0].countyName || item.data[0].name
chongqingMapRef.value.locateToDistrict(firstCounty)
}
}
// //
// if (item.data.length > 0 && (item.data[0].countyName || item.data[0].name)) {
// const firstCounty = item.data[0].countyName || item.data[0].name
// chongqingMapRef.value.locateToDistrict(firstCounty)
// }
// }
}
//

View File

@ -230,19 +230,19 @@ const handleImpactDetailClick = () => {
const handleDispatchCardClick = (item) => {
if (item.label === dispatchList.value[0].label) {
emit('showCenterCard', {
type: 'second',
type: '国省道调度',
value: item.value,
data: nationalarr.value,
})
} else if (item.label === dispatchList.value[1].label) {
emit('showCenterCard', {
type: 'third',
type: '农村公路调度',
value: item.value,
data: ruralarr.value,
})
} else if (item.label === dispatchList.value[2].label) {
emit('showCenterCard', {
type: 'first',
type: '建设工程调度',
value: item.value,
data: projectarr.value,
})