Niko
/
sy-water-data-board-ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix: 更换数据

feature-v1.0.0
ruancuihong 1 month ago
parent
38f61a0cdc 086237925a
commit
ffb7cc2f54
7 changed files with 437 additions and 134 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      src/views/Main/InspectionCard/index.vue
  2. 35
      src/views/Main/MonitoringCard/index.vue
  3. 143
      src/views/Main/ProjectCountCard/index.vue
  4. 31
      src/views/Main/SafetyAppraise/index.vue
  5. 76
      src/views/Main/SafetyOverviewCard/index.vue
  6. 229
      src/views/RegionSelect/data.json
  7. 43
      src/views/RegionSelect/index.vue

14
src/views/Main/InspectionCard/index.vue
View File

@ -37,7 +37,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { reactive, onMounted } from "vue"; import { reactive, onMounted, onBeforeUnmount } from "vue";
import { getlStatisticChart } from "@/api/safety/index"; import { getlStatisticChart } from "@/api/safety/index";
defineOptions({ defineOptions({
name: "InspectionCard", name: "InspectionCard",
@ -48,11 +48,11 @@ const chartData = reactive<any>({
BYGJ_YCL: 0, BYGJ_YCL: 0,
BYGJ_DCL: 0, BYGJ_DCL: 0,
}); });
onMounted(() => { const queryData = (adcd: string = "") => {
getlStatisticChart({ getlStatisticChart({
endTime: "", endTime: "",
startTime: "", startTime: "",
adcd: "", adcd: adcd,
group: "K3", group: "K3",
}).then((res: any) => { }).then((res: any) => {
const series = res?.data?.data?.yaxis?.[0]?.series; const series = res?.data?.data?.yaxis?.[0]?.series;
@ -72,6 +72,14 @@ onMounted(() => {
} }
}); });
}); });
};
onMounted(() => {
queryData();
window.$bus.$on("inspection-card-query-data", queryData);
});
onBeforeUnmount(() => {
window.$bus.$off("inspection-card-query-data");
}); });
</script> </script>

35
src/views/Main/MonitoringCard/index.vue
View File

@ -7,7 +7,9 @@
</div> </div>
<div class="right"> <div class="right">
<div class="name">测报设施建设</div> <div class="name">测报设施建设</div>
<div class="count">{{ chartData.cz + chartData.cd + chartData.yx || 0 }}</div> <div class="count">
{{ chartData.cz + chartData.cd + chartData.yx || 0 }}
</div>
</div> </div>
</div> </div>
<div class="cart-item-row"> <div class="cart-item-row">
@ -30,29 +32,29 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { reactive, onMounted } from 'vue'; import { reactive, onMounted, onBeforeUnmount } from "vue";
import { getlStatisticChart } from '@/api/safety/index'; import { getlStatisticChart } from "@/api/safety/index";
defineOptions({ defineOptions({
name: 'MonitoringCard' name: "MonitoringCard",
}); });
const chartData = reactive<any>({ const chartData = reactive<any>({
syq: 0, syq: 0,
dbaq: 0 dbaq: 0,
}); });
onMounted(() => { const queryData = (adcd: string = "") => {
getlStatisticChart({ getlStatisticChart({
endTime: '', endTime: "",
startTime: '', startTime: "",
adcd: '', adcd: adcd,
group: 'K2' group: "K2",
}).then((res: any) => { }).then((res: any) => {
const series = res?.data?.data?.yaxis?.[0]?.series; const series = res?.data?.data?.yaxis?.[0]?.series;
if (!series) return; if (!series) return;
series.forEach((item: any) => { series.forEach((item: any) => {
if (item.code === 'YZT_CONSTRUCT_SYQ_SUM') { if (item.code === "YZT_CONSTRUCT_SYQ_SUM") {
chartData.syq = +(+item.sum).toFixed(0); chartData.syq = +(+item.sum).toFixed(0);
} }
if (item.code === 'YZT_CONSTRUCT_DBAQ_SUM') { if (item.code === "YZT_CONSTRUCT_DBAQ_SUM") {
chartData.dbaq = +(+item.sum).toFixed(0); chartData.dbaq = +(+item.sum).toFixed(0);
} }
if (item.code === 'YZT_SWGCJCCZ_SUM') { if (item.code === 'YZT_SWGCJCCZ_SUM') {
@ -66,6 +68,13 @@ onMounted(() => {
} }
}); });
}); });
};
onMounted(() => {
queryData();
window.$bus.$on("monitoring-card-query-data", queryData);
});
onBeforeUnmount(() => {
window.$bus.$off("monitoring-card-query-data");
}); });
</script> </script>
@ -138,7 +147,7 @@ onMounted(() => {
line-height: 40px; line-height: 40px;
letter-spacing: 0em; letter-spacing: 0em;
font-variation-settings: 'opsz' auto; font-variation-settings: "opsz" auto;
color: #36b29e; color: #36b29e;
} }
} }

143
src/views/Main/ProjectCountCard/index.vue
View File

@ -6,14 +6,14 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, onBeforeUnmount, ref } from 'vue'; import { onMounted, onBeforeUnmount, ref } from "vue";
import * as echarts from 'echarts'; import * as echarts from "echarts";
import { useChartStore } from '@/store/modules/chart'; import { useChartStore } from "@/store/modules/chart";
const chartStore = useChartStore(); const chartStore = useChartStore();
defineOptions({ defineOptions({
name: 'ProjectCountCard' name: "ProjectCountCard",
}); });
const chartRef = ref(); const chartRef = ref();
let chart: echarts.ECharts | undefined; let chart: echarts.ECharts | undefined;
@ -22,13 +22,14 @@ const handleResize = () => {
}; };
const projectCount = ref(0); const projectCount = ref(0);
const projectData: any = ref([]); const projectData: any = ref([]);
const getChartData = async () => { const getChartData = async (adcd: string = "") => {
projectCount.value = 0; projectCount.value = 0;
// projectData.value = []; // projectData.value = [];
const pramas = { const pramas = {
endTime: '', adcd,
startTime: '', endTime: "",
group: 'K1' startTime: "",
group: "K1",
}; };
const data: any = await chartStore.initStatisticChart(pramas) const data: any = await chartStore.initStatisticChart(pramas)
@ -40,9 +41,9 @@ const getChartData = async () => {
// projectData.value.rws = +(+item.sum).toFixed(0); // projectData.value.rws = +(+item.sum).toFixed(0);
// } // }
projectData.value.push({ projectData.value.push({
name: item.name || '', name: item.name || "",
value: Number(item.sum)?.toFixed(0) || 0, value: Number(item.sum)?.toFixed(0) || 0,
unit: item.unit || '' unit: item.unit || "",
}); });
projectCount.value += Number(item.sum || 0); projectCount.value += Number(item.sum || 0);
}); });
@ -50,20 +51,20 @@ const getChartData = async () => {
// 默认数据 // 默认数据
projectData.value = [ projectData.value = [
{ {
name: '水库', name: "水库",
value: 0, value: 0,
unit: '座' unit: "座",
}, },
{ {
name: '水闸', name: "水闸",
value: 0, value: 0,
unit: '座' unit: "座",
}, },
{ {
name: '堤防', name: "堤防",
value: 0, value: 0,
unit: '段' unit: "段",
} },
]; ];
} }
await initChart(); await initChart();
@ -77,16 +78,16 @@ const initChart = () => {
// Chart options // Chart options
const option = { const option = {
tooltip: { tooltip: {
trigger: 'item', trigger: "item",
formatter: '{a} <br/>{b}: {c}' formatter: "{a} <br/>{b}: {c}",
}, },
legend: { legend: {
type: 'scroll', type: "scroll",
orient: 'vertical', orient: "vertical",
height: '95%', height: "95%",
right: '8%', right: "8%",
top: '20%', top: "20%",
icon: 'circle', //设置为圆，删除则为矩形 icon: "circle", //设置为圆，删除则为矩形
itemWidth: 10, itemWidth: 10,
itemHeight: 10, itemHeight: 10,
itemGap: 16, itemGap: 16,
@ -95,7 +96,13 @@ const initChart = () => {
for (var i = 0; i < legendName.length; i++) { for (var i = 0; i < legendName.length; i++) {
if (name == projectData.value[i].name) { if (name == projectData.value[i].name) {
return ( return (
'{name|' + name + '}{rate|' + projectData.value[i].value + '}{unit|' + projectData.value[i].unit + '}' "{name|" +
name +
"}{rate|" +
projectData.value[i].value +
"}{unit|" +
projectData.value[i].unit +
"}"
); );
} }
} }
@ -108,48 +115,48 @@ const initChart = () => {
height: 24, height: 24,
width: 60, width: 60,
padding: [0, 0, 0, 5], padding: [0, 0, 0, 5],
color: 'rgba(0, 0, 0, 0.55)' color: "rgba(0, 0, 0, 0.55)",
}, },
rate: { rate: {
fontSize: 18, fontSize: 18,
fontWeight: 'bold', fontWeight: "bold",
fontFamily: 'Microsoft YaHei', fontFamily: "Microsoft YaHei",
height: 24, height: 24,
padding: [48, 0, 0, -60], padding: [48, 0, 0, -60],
color: 'rgba(0, 0, 0, 0.9)' color: "rgba(0, 0, 0, 0.9)",
}, },
unit: { unit: {
fontSize: 16, fontSize: 16,
fontWeight: 'bold', fontWeight: "bold",
fontFamily: 'Microsoft YaHei', fontFamily: "Microsoft YaHei",
height: 24, height: 24,
padding: [48, 0, 0, 9], padding: [48, 0, 0, 9],
// align: 'right', // align: 'right',
color: 'rgba(0, 0, 0, 0.9)' color: "rgba(0, 0, 0, 0.9)",
} },
} },
} },
}, },
series: [ series: [
{ {
name: '工程数量', name: "工程数量",
type: 'pie', type: "pie",
roseType: 'area', roseType: "area",
radius: ['40%', '70%'], radius: ["40%", "70%"],
center: ['30%', '55%'], center: ["30%", "55%"],
startAngle: 270, startAngle: 270,
clockwise: false, // Set to counter-clockwise to match design clockwise: false, // Set to counter-clockwise to match design
z: 10, z: 10,
itemStyle: { itemStyle: {
borderRadius: 0, borderRadius: 0,
borderWidth: 0, borderWidth: 0,
borderColor: '#fff' borderColor: "#fff",
}, },
label: { label: {
show: false show: false,
}, },
color: ['#4293F4', '#30DFBA', '#FF755B', '#FFF03B', '#FFF03B'], color: ["#4293F4", "#30DFBA", "#FF755B", "#FFF03B", "#FFF03B"],
data: projectData.value data: projectData.value,
// [ // [
// { // {
// value: reservoirCount, // value: reservoirCount,
@ -169,40 +176,42 @@ const initChart = () => {
// ] // ]
}, },
{ {
name: '总数', name: "总数",
type: 'pie', type: "pie",
radius: ['0', '30%'], radius: ["0", "30%"],
center: ['30%', '55%'], center: ["30%", "55%"],
z: 0, z: 0,
itemStyle: { itemStyle: {
color: 'transparent', color: "transparent",
borderWidth: 0, borderWidth: 0,
borderColor: '#eee' borderColor: "#eee",
}, },
label: { label: {
position: 'center', position: "center",
formatter: function () { formatter: function () {
return ['{total|' + projectCount.value + '}', '{label|总数}'].join('\n'); return ["{total|" + projectCount.value + "}", "{label|总数}"].join(
"\n"
);
}, },
rich: { rich: {
total: { total: {
color: '#000', color: "#000",
fontSize: 28, fontSize: 28,
fontWeight: 'bold', fontWeight: "bold",
fontFamily: 'DIN', fontFamily: "DIN",
lineHeight: 34 lineHeight: 34,
}, },
label: { label: {
color: 'rgba(0, 0, 0, 0.6)', color: "rgba(0, 0, 0, 0.6)",
fontSize: 14, fontSize: 14,
lineHeight: 18, lineHeight: 18,
fontFamily: 'Source Han Sans' fontFamily: "Source Han Sans",
} },
} },
}, },
data: [{ value: 1, name: '总数', tooltip: { show: false } }] data: [{ value: 1, name: "总数", tooltip: { show: false } }],
} },
] ],
}; };
// Set options and render chart // Set options and render chart
@ -210,11 +219,13 @@ const initChart = () => {
}; };
onMounted(() => { onMounted(() => {
getChartData(); getChartData();
window.addEventListener('resize', handleResize); window.addEventListener("resize", handleResize);
window.$bus.$on("project-count-card-query-data", getChartData);
}); });
onBeforeUnmount(() => { onBeforeUnmount(() => {
chart?.dispose(); chart?.dispose();
window.removeEventListener('resize', handleResize); window.removeEventListener("resize", handleResize);
window.$bus.$off("project-count-card-query-data");
}); });
</script> </script>

31
src/views/Main/SafetyAppraise/index.vue
View File

@ -9,15 +9,15 @@
<div class="name">{{ item?.name || '' }}</div> <div class="name">{{ item?.name || '' }}</div>
</div> --> </div> -->
<div class="appraise-item"> <div class="appraise-item">
<div class="count total">{{ safetyData.rws || 0 }}</div> <div class="count total">{{ safety.rws || 0 }}</div>
<div class="name">任务数</div> <div class="name">任务数</div>
</div> </div>
<div class="appraise-item"> <div class="appraise-item">
<div class="count wait">{{ safetyData.djd || 0 }}</div> <div class="count wait">{{ safety.djd || 0 }}</div>
<div class="name">待鉴定</div> <div class="name">待鉴定</div>
</div> </div>
<div class="appraise-item"> <div class="appraise-item">
<div class="count ok">{{ safetyData.yjd || 0 }}</div> <div class="count ok">{{ safety.yjd || 0 }}</div>
<div class="name">已鉴定</div> <div class="name">已鉴定</div>
</div> </div>
</div> </div>
@ -41,7 +41,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, watch, computed } from 'vue'; import { ref, onMounted, watch, computed, reactive } from 'vue';
import { useChartStore } from '@/store/modules/chart'; import { useChartStore } from '@/store/modules/chart';
const chartStore = useChartStore(); const chartStore = useChartStore();
@ -60,9 +60,14 @@ const props = defineProps({
}); });
const taskCount = ref(0); const taskCount = ref(0);
const safetyData: any = ref([]); const safetyData: any = ref([]);
const safety = reactive<any>({
rws: 0,
djd: 0,
yjd: 0
});
const okNum = computed(() => { const okNum = computed(() => {
const num = safetyData.value.find((item: any) => item.name === '任务数'); const num = safetyData.value.find((item: any) => item.name === '任务数');
return taskCount.value ? (Number(num?.value || 0) / taskCount.value) * 100 : 0; return taskCount.value ? ((Number(num?.value || 0) / taskCount.value) * 100).toFixed(2) : 0;
}); });
// const inNum = computed(() => { // const inNum = computed(() => {
// const num = safetyData.value.find((item: any) => item.name === '已完成'); // const num = safetyData.value.find((item: any) => item.name === '已完成');
@ -83,19 +88,19 @@ const getChartData = async (time: any) => {
let newArr = data.yaxis.flatMap((v: any) => v.series); let newArr = data.yaxis.flatMap((v: any) => v.series);
newArr?.forEach((item: any) => { newArr?.forEach((item: any) => {
if (item.code === 'YZT_TOUR_CHECK_RWS_SUM') { if (item.code === 'YZT_TOUR_CHECK_RWS_SUM') {
safetyData.rws = +(+item.sum).toFixed(0); safety.rws = +(+item.sum).toFixed(0);
} }
if (item.code === 'YZT_TOUR_CHECK_DJD_SUM') { if (item.code === 'YZT_TOUR_CHECK_DJD_SUM') {
safetyData.dyd = +(+item.sum).toFixed(0); safety.dyd = +(+item.sum).toFixed(0);
} }
if (item.code === 'YZT_TOUR_CHECK_YJD_SUM') { if (item.code === 'YZT_TOUR_CHECK_YJD_SUM') {
safetyData.yjd = +(+item.sum).toFixed(0); safety.yjd = +(+item.sum).toFixed(0);
} }
// safetyData.value.push({ safetyData.value.push({
// name: item.name || '', name: item.name || '',
// value: Number(item.sum)?.toFixed(0) || 0, value: Number(item.sum)?.toFixed(0) || 0,
// unit: item.unit || '' unit: item.unit || ''
// }); });
taskCount.value += Number(item.sum) || 0; taskCount.value += Number(item.sum) || 0;
}); });
} else { } else {

76
src/views/Main/SafetyOverviewCard/index.vue
View File

@ -2,7 +2,12 @@
<div class="safety-overview-card"> <div class="safety-overview-card">
<div class="sy-water-cart-title"> <div class="sy-water-cart-title">
安全监查情况 安全监查情况
<el-select v-model="time" class="sy-water-cart-title-select" size="small" @change="timeChange"> <el-select
v-model="time"
class="sy-water-cart-title-select"
size="small"
@change="timeChange"
>
<el-option label="今日" value="1"></el-option> <el-option label="今日" value="1"></el-option>
<el-option label="近7日" value="2"></el-option> <el-option label="近7日" value="2"></el-option>
<el-option label="近30日" value="3"></el-option> <el-option label="近30日" value="3"></el-option>
@ -16,22 +21,24 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import SafetyAppraise from '../SafetyAppraise/index.vue'; import SafetyAppraise from "../SafetyAppraise/index.vue";
import RiskInspectionCard from '../RiskInspectionCard/index.vue'; import RiskInspectionCard from "../RiskInspectionCard/index.vue";
import DailyPatrolCard from '../DailyPatrolCard/index.vue'; import DailyPatrolCard from "../DailyPatrolCard/index.vue";
import dayjs from 'dayjs'; import dayjs from "dayjs";
import { ref, onMounted } from 'vue'; import { ref, onMounted, onBeforeUnmount } from "vue";
defineOptions({ defineOptions({
name: 'SafetyOverviewCard' name: "SafetyOverviewCard",
}); });
const adcd = ref("");
const timeRange: any = ref({ const timeRange: any = ref({
startTime: '', startTime: "",
endTime: '' endTime: "",
adcd: "",
}); });
const time = ref('1') const time = ref("1");
const timeChange = (val: any) => { const timeChange = (val: any) => {
timeRange.value = getTimeRange(val); timeRange.value = { ...getTimeRange(val), adcd: adcd.value };
}; };
// 根据系统时间获取对应的 时间范围 // 根据系统时间获取对应的 时间范围
const getTimeRange = (type: string) => { const getTimeRange = (type: string) => {
@ -40,34 +47,41 @@ const getTimeRange = (type: string) => {
let endDate: dayjs.Dayjs; let endDate: dayjs.Dayjs;
switch (type) { switch (type) {
case '1': // 今日 case "1": // 今日
startDate = now.startOf('day'); startDate = now.startOf("day");
endDate = now.endOf('day'); endDate = now.endOf("day");
break; break;
case '2': // 近7日 case "2": // 近7日
startDate = now.subtract(6, 'day').startOf('day'); startDate = now.subtract(6, "day").startOf("day");
endDate = now.endOf('day'); endDate = now.endOf("day");
break; break;
case '3': // 近30日 case "3": // 近30日
startDate = now.subtract(29, 'day').startOf('day'); startDate = now.subtract(29, "day").startOf("day");
endDate = now.endOf('day'); endDate = now.endOf("day");
break; break;
case '4': // 近一年 case "4": // 近一年
startDate = now.subtract(1, 'year').startOf('day'); startDate = now.subtract(1, "year").startOf("day");
endDate = now.endOf('day'); endDate = now.endOf("day");
break; break;
default: default:
startDate = now.startOf('day'); startDate = now.startOf("day");
endDate = now.endOf('day'); endDate = now.endOf("day");
} }
return { return {
startTime: startDate.format('YYYY-MM-DD HH:mm:ss'), startTime: startDate.format("YYYY-MM-DD HH:mm:ss"),
endTime: endDate.format('YYYY-MM-DD HH:mm:ss') endTime: endDate.format("YYYY-MM-DD HH:mm:ss"),
}; };
}; };
onMounted(() => { onMounted(() => {
timeChange('1') timeChange("1");
window.$bus.$on("safety-overview-card-query-data", (code: string = "") => {
adcd.value = code ?? "";
timeChange(time.value);
});
});
onBeforeUnmount(() => {
window.$bus.$off("safety-overview-card-query-data");
}); });
</script> </script>
@ -105,7 +119,7 @@ onMounted(() => {
.appraise-item { .appraise-item {
width: 104px; width: 104px;
height: 119px; height: 119px;
background: url('@/assets/card/safety-item-bg.png') no-repeat; background: url("@/assets/card/safety-item-bg.png") no-repeat;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -119,8 +133,8 @@ onMounted(() => {
text-align: center; text-align: center;
letter-spacing: 0em; letter-spacing: 0em;
font-variation-settings: 'opsz' auto; font-variation-settings: "opsz" auto;
font-feature-settings: 'kern' on; font-feature-settings: "kern" on;
color: #ffffff; color: #ffffff;
} }
.count { .count {

229
src/views/RegionSelect/data.json
View File

@ -0,0 +1,229 @@
[
{
"bbox": [112.96024, 22.515129, 114.05999, 23.933001],
"name": "广州",
"center": [113.280637, 23.125178],
"centroid": [113.544372, 23.329249],
"childrenNum": 11,
"level": "city",
"code": 440100,
"filename": "440000/440100",
"fullname": "广州市"
},
{
"bbox": [112.851798, 23.887925, 114.749345, 25.516771],
"name": "韶关",
"center": [113.591544, 24.801322],
"centroid": [113.779323, 24.81941],
"childrenNum": 10,
"level": "city",
"code": 440200,
"filename": "440000/440200",
"fullname": "韶关市"
},
{
"bbox": [113.751447, 22.396362, 114.627798, 22.858504],
"name": "深圳",
"center": [114.085947, 22.547],
"centroid": [114.143142, 22.643377],
"childrenNum": 9,
"level": "city",
"code": 440300,
"filename": "440000/440300",
"fullname": "深圳市"
},
{
"bbox": [113.087152, 21.831707, 114.323623, 22.442955],
"name": "珠海",
"center": [113.553986, 22.224979],
"centroid": [113.337286, 22.160135],
"childrenNum": 3,
"level": "city",
"code": 440400,
"filename": "440000/440400",
"fullname": "珠海市"
},
{
"bbox": [116.244545, 23.039807, 117.154769, 23.645793],
"name": "汕头",
"center": [116.708463, 23.37102],
"centroid": [116.575361, 23.322231],
"childrenNum": 7,
"level": "city",
"code": 440500,
"filename": "440000/440500",
"fullname": "汕头市"
},
{
"bbox": [112.392509, 22.642248, 113.393396, 23.57343],
"name": "佛山",
"center": [113.122717, 23.028762],
"centroid": [112.949778, 23.004314],
"childrenNum": 5,
"level": "city",
"code": 440600,
"filename": "440000/440600",
"fullname": "佛山市"
},
{
"bbox": [112.004262, 21.564101, 113.262652, 22.856274],
"name": "江门",
"center": [113.094942, 22.590431],
"centroid": [112.676451, 22.284348],
"childrenNum": 7,
"level": "city",
"code": 440700,
"filename": "440000/440700",
"fullname": "江门市"
},
{
"bbox": [109.654937, 20.211718, 110.977012, 21.955387],
"name": "湛江",
"center": [110.364977, 21.274898],
"centroid": [110.109828, 21.047893],
"childrenNum": 9,
"level": "city",
"code": 440800,
"filename": "440000/440800",
"fullname": "湛江市"
},
{
"bbox": [110.326052, 21.37101, 111.683381, 22.704328],
"name": "茂名",
"center": [110.919229, 21.659751],
"centroid": [110.958736, 22.008884],
"childrenNum": 5,
"level": "city",
"code": 440900,
"filename": "440000/440900",
"fullname": "茂名市"
},
{
"bbox": [111.361963, 22.76978, 112.883296, 24.388666],
"name": "肇庆",
"center": [112.472529, 23.051546],
"centroid": [112.210411, 23.536359],
"childrenNum": 8,
"level": "city",
"code": 441200,
"filename": "440000/441200",
"fullname": "肇庆市"
},
{
"bbox": [113.816742, 22.428739, 115.425289, 23.960218],
"name": "惠州",
"center": [114.412599, 23.079404],
"centroid": [114.507032, 23.234461],
"childrenNum": 5,
"level": "city",
"code": 441300,
"filename": "440000/441300",
"fullname": "惠州市"
},
{
"bbox": [115.317153, 23.373658, 116.939418, 24.937115],
"name": "梅州",
"center": [116.117582, 24.299112],
"centroid": [116.084478, 24.201791],
"childrenNum": 8,
"level": "city",
"code": 441400,
"filename": "440000/441400",
"fullname": "梅州市"
},
{
"bbox": [114.917794, 20.582636, 116.933747, 23.471865],
"name": "汕尾",
"center": [115.364238, 22.774485],
"centroid": [115.53778, 23.004558],
"childrenNum": 4,
"level": "city",
"code": 441500,
"filename": "440000/441500",
"fullname": "汕尾市"
},
{
"bbox": [114.242004, 23.165271, 115.593048, 24.792869],
"name": "河源",
"center": [114.697802, 23.746266],
"centroid": [114.962729, 24.043541],
"childrenNum": 6,
"level": "city",
"code": 441600,
"filename": "440000/441600",
"fullname": "河源市"
},
{
"bbox": [111.283333, 21.50023, 112.370054, 22.68897],
"name": "阳江",
"center": [111.975107, 21.859222],
"centroid": [111.779569, 22.02617],
"childrenNum": 4,
"level": "city",
"code": 441700,
"filename": "440000/441700",
"fullname": "阳江市"
},
{
"bbox": [111.927472, 23.447558, 113.930319, 25.191693],
"name": "清远",
"center": [113.051227, 23.685022],
"centroid": [112.879397, 24.313361],
"childrenNum": 8,
"level": "city",
"code": 441800,
"filename": "440000/441800",
"fullname": "清远市"
},
{
"bbox": [113.522913, 22.654368, 114.26032, 23.141331],
"name": "东莞",
"center": [113.746262, 23.046237],
"centroid": [113.879966, 22.931879],
"level": "city",
"code": 441900,
"fullname": "东莞市"
},
{
"bbox": [113.157045, 22.201302, 113.692052, 22.772595],
"name": "中山",
"center": [113.382391, 22.521113],
"centroid": [113.398784, 22.517323],
"level": "city",
"code": 442000,
"fullname": "中山市"
},
{
"bbox": [116.368468, 23.426312, 117.192935, 24.232809],
"name": "潮州",
"center": [116.632301, 23.661701],
"centroid": [116.790217, 23.783155],
"childrenNum": 3,
"level": "city",
"code": 445100,
"filename": "440000/445100",
"fullname": "潮州市"
},
{
"bbox": [115.606537, 22.886208, 116.633557, 23.775534],
"name": "揭阳",
"center": [116.355733, 23.543778],
"centroid": [116.124317, 23.334057],
"childrenNum": 5,
"level": "city",
"code": 445200,
"filename": "440000/445200",
"fullname": "揭阳市"
},
{
"bbox": [111.060547, 22.36467, 112.52172, 23.325586],
"name": "云浮",
"center": [112.044439, 22.929801],
"centroid": [111.798791, 22.813664],
"childrenNum": 5,
"level": "city",
"code": 445300,
"filename": "440000/445300",
"fullname": "云浮市"
}
]

43
src/views/RegionSelect/index.vue
View File

@ -11,32 +11,59 @@
check-strictly check-strictly
render-after-expand render-after-expand
:props="treeSelectProps" :props="treeSelectProps"
node-key="id" node-key="code"
@change="changeRegion" @change="changeRegion"
/> />
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { getAreasData } from "@/api/safety"; // import { getAreasData } from "@/api/safety";
import { onMounted, ref } from "vue"; import { onMounted, ref } from "vue";
import * as SyCim from "sy-cesium-sdk";
import data from "./data.json";
const Cesium = SyCim.Cesium;
defineOptions({ defineOptions({
name: "RegionSelect", name: "RegionSelect",
}); });
const regionValue = ref(""); const regionValue = ref("");
const regionTree = ref([]); const regionTree = ref(data);
const treeSelectProps = { const treeSelectProps = {
label: "name", label: "name",
children: "children", children: "children",
}; };
const changeRegion = (val: any) => { const changeRegion = (val: any) => {
console.log("🚀 ~ changeRegion ~ val:", val); if (!val) return;
// regionValue.value = val; const item = regionTree.value.find((item: any) => item.code === val);
item && flyTo(item);
const str = String(val);
window.$bus.$emit("monitoring-card-query-data", str);
window.$bus.$emit("inspection-card-query-data", str);
window.$bus.$emit("project-count-card-query-data", str);
window.$bus.$emit("safety-overview-card-query-data", str);
}; };
onMounted(() => { const flyTo = (item: any) => {
getAreasData().then((res: any) => { const bbox = item?.bbox;
regionTree.value = res ?? []; if (!bbox) return;
const [a, b, c, d]: number[] = bbox;
const rectangle = Cesium.Rectangle.fromCartesianArray([
SyCim.Parse.parsePosition([a, b, 0]).toCartesian3(),
SyCim.Parse.parsePosition([c, d, 0]).toCartesian3(),
]);
viewer.camera.flyTo({
destination: rectangle,
orientation: {
heading: viewer.camera.heading,
pitch: viewer.camera.pitch,
roll: 0.0,
},
duration: 2,
}); });
};
onMounted(() => {
// getAreasData().then((res: any) => {
// regionTree.value = res ?? [];
// });
}); });
</script> </script>

Write Preview
Loading…
Cancel
Save