Browse Source

feat: 行政区划

feature-v1.0.0
邱伟洋 1 month ago
parent
commit
0c4f078d15
  1. 14
      src/views/Main/InspectionCard/index.vue
  2. 13
      src/views/Main/MonitoringCard/index.vue
  3. 143
      src/views/Main/ProjectCountCard/index.vue
  4. 76
      src/views/Main/SafetyOverviewCard/index.vue
  5. 229
      src/views/RegionSelect/data.json
  6. 43
      src/views/RegionSelect/index.vue
  7. 12
      vite.config.ts

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

@ -37,7 +37,7 @@
</template>
<script setup lang="ts">
import { reactive, onMounted } from "vue";
import { reactive, onMounted, onBeforeUnmount } from "vue";
import { getlStatisticChart } from "@/api/safety/index";
defineOptions({
name: "InspectionCard",
@ -48,11 +48,11 @@ const chartData = reactive<any>({
BYGJ_YCL: 0,
BYGJ_DCL: 0,
});
onMounted(() => {
const queryData = (adcd: string = "") => {
getlStatisticChart({
endTime: "",
startTime: "",
adcd: "",
adcd: adcd,
group: "K3",
}).then((res: any) => {
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>

13
src/views/Main/MonitoringCard/index.vue

@ -24,7 +24,7 @@
</template>
<script setup lang="ts">
import { reactive, onMounted } from "vue";
import { reactive, onMounted, onBeforeUnmount } from "vue";
import { getlStatisticChart } from "@/api/safety/index";
defineOptions({
name: "MonitoringCard",
@ -33,11 +33,11 @@ const chartData = reactive<any>({
syq: 0,
dbaq: 0,
});
onMounted(() => {
const queryData = (adcd: string = "") => {
getlStatisticChart({
endTime: "",
startTime: "",
adcd: "",
adcd: adcd,
group: "K2",
}).then((res: any) => {
const series = res?.data?.data?.yaxis?.[0]?.series;
@ -51,6 +51,13 @@ onMounted(() => {
}
});
});
};
onMounted(() => {
queryData();
window.$bus.$on("monitoring-card-query-data", queryData);
});
onBeforeUnmount(() => {
window.$bus.$off("monitoring-card-query-data");
});
</script>

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

@ -6,14 +6,14 @@
</template>
<script setup lang="ts">
import { onMounted, onBeforeUnmount, ref } from 'vue';
import * as echarts from 'echarts';
import { useChartStore } from '@/store/modules/chart';
import { onMounted, onBeforeUnmount, ref } from "vue";
import * as echarts from "echarts";
import { useChartStore } from "@/store/modules/chart";
const chartStore = useChartStore();
defineOptions({
name: 'ProjectCountCard'
name: "ProjectCountCard",
});
const chartRef = ref();
let chart: echarts.ECharts | undefined;
@ -22,22 +22,23 @@ const handleResize = () => {
};
const projectCount = ref(0);
const projectData: any = ref([]);
const getChartData = async () => {
const getChartData = async (adcd: string = "") => {
projectCount.value = 0;
projectData.value = [];
const pramas = {
endTime: '',
startTime: '',
group: 'K1'
adcd,
endTime: "",
startTime: "",
group: "K1",
};
const data: any = await chartStore.initStatisticChart(pramas);
if (data?.yaxis?.length) {
let newArr = data.yaxis.flatMap((v: any) => v.series);
newArr?.forEach((item: any) => {
projectData.value.push({
name: item.name || '',
name: item.name || "",
value: Number(item.sum)?.toFixed(0) || 0,
unit: item.unit || ''
unit: item.unit || "",
});
projectCount.value += Number(item.sum || 0);
});
@ -45,20 +46,20 @@ const getChartData = async () => {
//
projectData.value = [
{
name: '水库',
name: "水库",
value: 0,
unit: '座'
unit: "座",
},
{
name: '水闸',
name: "水闸",
value: 0,
unit: '座'
unit: "座",
},
{
name: '堤防',
name: "堤防",
value: 0,
unit: '段'
}
unit: "段",
},
];
}
await initChart();
@ -72,16 +73,16 @@ const initChart = () => {
// Chart options
const option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c}'
trigger: "item",
formatter: "{a} <br/>{b}: {c}",
},
legend: {
type: 'scroll',
orient: 'vertical',
height: '95%',
right: '8%',
top: '20%',
icon: 'circle', //
type: "scroll",
orient: "vertical",
height: "95%",
right: "8%",
top: "20%",
icon: "circle", //
itemWidth: 10,
itemHeight: 10,
itemGap: 16,
@ -90,7 +91,13 @@ const initChart = () => {
for (var i = 0; i < legendName.length; i++) {
if (name == projectData.value[i].name) {
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 +
"}"
);
}
}
@ -103,48 +110,48 @@ const initChart = () => {
height: 24,
width: 60,
padding: [0, 0, 0, 5],
color: 'rgba(0, 0, 0, 0.55)'
color: "rgba(0, 0, 0, 0.55)",
},
rate: {
fontSize: 18,
fontWeight: 'bold',
fontFamily: 'Microsoft YaHei',
fontWeight: "bold",
fontFamily: "Microsoft YaHei",
height: 24,
padding: [48, 0, 0, -60],
color: 'rgba(0, 0, 0, 0.9)'
color: "rgba(0, 0, 0, 0.9)",
},
unit: {
fontSize: 16,
fontWeight: 'bold',
fontFamily: 'Microsoft YaHei',
fontWeight: "bold",
fontFamily: "Microsoft YaHei",
height: 24,
padding: [48, 0, 0, 9],
// align: 'right',
color: 'rgba(0, 0, 0, 0.9)'
}
}
}
color: "rgba(0, 0, 0, 0.9)",
},
},
},
},
series: [
{
name: '工程数量',
type: 'pie',
roseType: 'area',
radius: ['40%', '70%'],
center: ['30%', '55%'],
name: "工程数量",
type: "pie",
roseType: "area",
radius: ["40%", "70%"],
center: ["30%", "55%"],
startAngle: 270,
clockwise: false, // Set to counter-clockwise to match design
z: 10,
itemStyle: {
borderRadius: 0,
borderWidth: 0,
borderColor: '#fff'
borderColor: "#fff",
},
label: {
show: false
show: false,
},
color: ['#4293F4', '#30DFBA', '#FF755B', '#FFF03B', '#FFF03B'],
data: projectData.value
color: ["#4293F4", "#30DFBA", "#FF755B", "#FFF03B", "#FFF03B"],
data: projectData.value,
// [
// {
// value: reservoirCount,
@ -164,40 +171,42 @@ const initChart = () => {
// ]
},
{
name: '总数',
type: 'pie',
radius: ['0', '30%'],
center: ['30%', '55%'],
name: "总数",
type: "pie",
radius: ["0", "30%"],
center: ["30%", "55%"],
z: 0,
itemStyle: {
color: 'transparent',
color: "transparent",
borderWidth: 0,
borderColor: '#eee'
borderColor: "#eee",
},
label: {
position: 'center',
position: "center",
formatter: function () {
return ['{total|' + projectCount.value + '}', '{label|总数}'].join('\n');
return ["{total|" + projectCount.value + "}", "{label|总数}"].join(
"\n"
);
},
rich: {
total: {
color: '#000',
color: "#000",
fontSize: 28,
fontWeight: 'bold',
fontFamily: 'DIN',
lineHeight: 34
fontWeight: "bold",
fontFamily: "DIN",
lineHeight: 34,
},
label: {
color: 'rgba(0, 0, 0, 0.6)',
color: "rgba(0, 0, 0, 0.6)",
fontSize: 14,
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
@ -205,11 +214,13 @@ const initChart = () => {
};
onMounted(() => {
getChartData();
window.addEventListener('resize', handleResize);
window.addEventListener("resize", handleResize);
window.$bus.$on("project-count-card-query-data", getChartData);
});
onBeforeUnmount(() => {
chart?.dispose();
window.removeEventListener('resize', handleResize);
window.removeEventListener("resize", handleResize);
window.$bus.$off("project-count-card-query-data");
});
</script>

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

@ -2,7 +2,12 @@
<div class="safety-overview-card">
<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="近7日" value="2"></el-option>
<el-option label="近30日" value="3"></el-option>
@ -16,22 +21,24 @@
</template>
<script setup lang="ts">
import SafetyAppraise from '../SafetyAppraise/index.vue';
import RiskInspectionCard from '../RiskInspectionCard/index.vue';
import DailyPatrolCard from '../DailyPatrolCard/index.vue';
import dayjs from 'dayjs';
import { ref, onMounted } from 'vue';
import SafetyAppraise from "../SafetyAppraise/index.vue";
import RiskInspectionCard from "../RiskInspectionCard/index.vue";
import DailyPatrolCard from "../DailyPatrolCard/index.vue";
import dayjs from "dayjs";
import { ref, onMounted, onBeforeUnmount } from "vue";
defineOptions({
name: 'SafetyOverviewCard'
name: "SafetyOverviewCard",
});
const adcd = ref("");
const timeRange: any = ref({
startTime: '',
endTime: ''
startTime: "",
endTime: "",
adcd: "",
});
const time = ref('1')
const time = ref("1");
const timeChange = (val: any) => {
timeRange.value = getTimeRange(val);
timeRange.value = { ...getTimeRange(val), adcd: adcd.value };
};
//
const getTimeRange = (type: string) => {
@ -40,34 +47,41 @@ const getTimeRange = (type: string) => {
let endDate: dayjs.Dayjs;
switch (type) {
case '1': //
startDate = now.startOf('day');
endDate = now.endOf('day');
case "1": //
startDate = now.startOf("day");
endDate = now.endOf("day");
break;
case '2': // 7
startDate = now.subtract(6, 'day').startOf('day');
endDate = now.endOf('day');
case "2": // 7
startDate = now.subtract(6, "day").startOf("day");
endDate = now.endOf("day");
break;
case '3': // 30
startDate = now.subtract(29, 'day').startOf('day');
endDate = now.endOf('day');
case "3": // 30
startDate = now.subtract(29, "day").startOf("day");
endDate = now.endOf("day");
break;
case '4': //
startDate = now.subtract(1, 'year').startOf('day');
endDate = now.endOf('day');
case "4": //
startDate = now.subtract(1, "year").startOf("day");
endDate = now.endOf("day");
break;
default:
startDate = now.startOf('day');
endDate = now.endOf('day');
startDate = now.startOf("day");
endDate = now.endOf("day");
}
return {
startTime: startDate.format('YYYY-MM-DD HH:mm:ss'),
endTime: endDate.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"),
};
};
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>
@ -105,7 +119,7 @@ onMounted(() => {
.appraise-item {
width: 104px;
height: 119px;
background: url('@/assets/card/safety-item-bg.png') no-repeat;
background: url("@/assets/card/safety-item-bg.png") no-repeat;
display: flex;
flex-direction: column;
align-items: center;
@ -119,8 +133,8 @@ onMounted(() => {
text-align: center;
letter-spacing: 0em;
font-variation-settings: 'opsz' auto;
font-feature-settings: 'kern' on;
font-variation-settings: "opsz" auto;
font-feature-settings: "kern" on;
color: #ffffff;
}
.count {

229
src/views/RegionSelect/data.json

@ -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

@ -11,32 +11,59 @@
check-strictly
render-after-expand
:props="treeSelectProps"
node-key="id"
node-key="code"
@change="changeRegion"
/>
</div>
</template>
<script setup lang="ts">
import { getAreasData } from "@/api/safety";
// import { getAreasData } from "@/api/safety";
import { onMounted, ref } from "vue";
import * as SyCim from "sy-cesium-sdk";
import data from "./data.json";
const Cesium = SyCim.Cesium;
defineOptions({
name: "RegionSelect",
});
const regionValue = ref("");
const regionTree = ref([]);
const regionTree = ref(data);
const treeSelectProps = {
label: "name",
children: "children",
};
const changeRegion = (val: any) => {
console.log("🚀 ~ changeRegion ~ val:", val);
// regionValue.value = val;
if (!val) return;
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(() => {
getAreasData().then((res: any) => {
regionTree.value = res ?? [];
const flyTo = (item: any) => {
const bbox = item?.bbox;
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>

12
vite.config.ts

@ -84,12 +84,12 @@ export default defineConfig(({ mode }) => {
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api\/iserver/, "/iserver"),
},
"/api/run": {
// target: "http://shuili.product.dev.com:30115/",
target: "http://172.16.34.80:18082",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, "/tianhui-admin-web"),
},
// "/api/run": {
// // target: "http://shuili.product.dev.com:30115/",
// target: "http://172.16.34.80:18082",
// changeOrigin: true,
// rewrite: (path) => path.replace(/^\/api/, "/tianhui-admin-web"),
// },
"/api": {
target: "http://shuili.product.dev.com:30115", // 'http://172.16.34.59:18083'
changeOrigin: true,

Loading…
Cancel
Save