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

Merge branch 'feature-v1.0.0' of ssh://gitlab.datameta.com:2224/project/water/data-board-2025 into feature-v1.0.0

feature-v1.0.0
chenhaojie 1 month ago
parent
a672b9331b 176b2fbc26
commit
9fb2b8d2f2
12 changed files with 794 additions and 223 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. 372
      public/api/sy-map-admin/water/regionTree.json
  2. 58
      src/api/project/index.ts
  3. 1
      src/components.d.ts
  4. 31
      src/theme/select.scss
  5. 138
      src/views/Main/DailyPatrolCard/index.vue
  6. 16
      src/views/Main/Map/components/LayerSwitch.vue
  7. 5
      src/views/Main/Map/components/Legend.vue
  8. 46
      src/views/Main/MapSearch/index.vue
  9. 7
      src/views/Main/ProjectCountCard/index.vue
  10. 301
      src/views/Main/RiskInspectionCard/index.vue
  11. 9
      src/views/Main/index.vue
  12. 33
      src/views/RegionSelect/index.vue

372
public/api/sy-map-admin/water/regionTree.json
View File

@ -0,0 +1,372 @@
{
"code": 200,
"msg": "操作成功",
"data": [
{
"code": "440000",
"parentCode": "0",
"name": "广东省",
"orderNum": 1,
"id": "d3ad5e5dbec83e9aabbd8b2ce704672a",
"url": "/geoserver/ows",
"serviceIndex": "shuyuan:xzqconfig_gd_sheng",
"field": "adcode",
"children": [
{
"code": "441900",
"parentCode": "440000",
"name": "东莞市",
"orderNum": 1,
"id": "c45f712c4e19998c9cf2de86a4e613cc",
"url": "/geoserver/ows",
"serviceIndex": "shuyuan:xzqconfig_gd_shi",
"field": "adcode",
"children": []
},
{
"code": "441800",
"parentCode": "440000",
"name": "清远市",
"orderNum": 1,
"id": "adb67f26d0a71067887ae7eceed5dc29",
"url": "/geoserver/ows",
"serviceIndex": "shuyuan:xzqconfig_gd_shi",
"field": "adcode",
"children": []
},
{
"code": "441700",
"parentCode": "440000",
"name": "阳江市",
"orderNum": 1,
"id": "e7031b69c7968313dfcda737b55f8145",
"url": "/geoserver/ows",
"serviceIndex": "shuyuan:xzqconfig_gd_shi",
"field": "adcode",
"children": []
},
{
"code": "441600",
"parentCode": "440000",
"name": "河源市",
"orderNum": 1,
"id": "73e70da62880174426ad0fa9aef41a8a",
"url": "/geoserver/ows",
"serviceIndex": "shuyuan:xzqconfig_gd_shi",
"field": "adcode",
"children": []
},
{
"code": "441500",
"parentCode": "440000",
"name": "汕尾市",
"orderNum": 1,
"id": "213b3eed7077e90ef956a66b0160e67b",
"url": "/geoserver/ows",
"serviceIndex": "shuyuan:xzqconfig_gd_shi",
"field": "adcode",
"children": []
},
{
"code": "441400",
"parentCode": "440000",
"name": "梅州市",
"orderNum": 1,
"id": "8754d3d581487a5cbfff23b257f6b485",
"url": "/geoserver/ows",
"serviceIndex": "shuyuan:xzqconfig_gd_shi",
"field": "adcode",
"children": []
},
{
"code": "441300",
"parentCode": "440000",
"name": "惠州市",
"orderNum": 1,
"id": "b785b55f1365872f3a569bd393df8f49",
"url": "/geoserver/ows",
"serviceIndex": "shuyuan:xzqconfig_gd_shi",
"field": "adcode",
"children": []
},
{
"code": "442000",
"parentCode": "440000",
"name": "中山市",
"orderNum": 1,
"id": "25d2e55dac65de1dde00e30ea0d4d8d9",
"url": "/geoserver/ows",
"serviceIndex": "shuyuan:xzqconfig_gd_shi",
"field": "adcode",
"children": []
},
{
"code": "441200",
"parentCode": "440000",
"name": "肇庆市",
"orderNum": 1,
"id": "ccb3b0f6b36da5e396c94c7646285f15",
"url": "/geoserver/ows",
"serviceIndex": "shuyuan:xzqconfig_gd_shi",
"field": "adcode",
"children": []
},
{
"code": "440900",
"parentCode": "440000",
"name": "茂名市",
"orderNum": 1,
"id": "3c8de8ff830a11d8fb3f595a8ffbe042",
"url": "/geoserver/ows",
"serviceIndex": "shuyuan:xzqconfig_gd_shi",
"field": "adcode",
"children": []
},
{
"code": "440800",
"parentCode": "440000",
"name": "湛江市",
"orderNum": 1,
"id": "19a316be41e20d38dc4c08112298f3ea",
"url": "/geoserver/ows",
"serviceIndex": "shuyuan:xzqconfig_gd_shi",
"field": "adcode",
"children": []
},
{
"code": "440700",
"parentCode": "440000",
"name": "江门市",
"orderNum": 1,
"id": "1c89b772da65045df5b31485628dad14",
"url": "/geoserver/ows",
"serviceIndex": "shuyuan:xzqconfig_gd_shi",
"field": "adcode",
"children": []
},
{
"code": "440600",
"parentCode": "440000",
"name": "佛山市",
"orderNum": 1,
"id": "ad2555b457fd807d72e82a2991d107c3",
"url": "/geoserver/ows",
"serviceIndex": "shuyuan:xzqconfig_gd_shi",
"field": "adcode",
"children": []
},
{
"code": "440500",
"parentCode": "440000",
"name": "汕头市",
"orderNum": 1,
"id": "b05a7b1d1ad376f10d10e2a0435a67c3",
"url": "/geoserver/ows",
"serviceIndex": "shuyuan:xzqconfig_gd_shi",
"field": "adcode",
"children": []
},
{
"code": "440400",
"parentCode": "440000",
"name": "珠海市",
"orderNum": 1,
"id": "4eef3fbbb0cd7638fa40b7fcc57b4b92",
"url": "/geoserver/ows",
"serviceIndex": "shuyuan:xzqconfig_gd_shi",
"field": "adcode",
"children": []
},
{
"code": "445200",
"parentCode": "440000",
"name": "揭阳市",
"orderNum": 1,
"id": "3dff46756700d3e3db2349891cb54493",
"url": "/geoserver/ows",
"serviceIndex": "shuyuan:xzqconfig_gd_shi",
"field": "adcode",
"children": []
},
{
"code": "440300",
"parentCode": "440000",
"name": "深圳市",
"orderNum": 1,
"id": "fb56831063f1051787a1e9e22e2e4234",
"url": "/geoserver/ows",
"serviceIndex": "shuyuan:xzqconfig_gd_shi",
"field": "adcode",
"children": []
},
{
"code": "445100",
"parentCode": "440000",
"name": "潮州市",
"orderNum": 1,
"id": "3e7e5a5fad638f89c0830435397dbadc",
"url": "/geoserver/ows",
"serviceIndex": "shuyuan:xzqconfig_gd_shi",
"field": "adcode",
"children": []
},
{
"code": "440200",
"parentCode": "440000",
"name": "韶关市",
"orderNum": 1,
"id": "c5a42e1868770edddd9ebf9f740b4300",
"url": "/geoserver/ows",
"serviceIndex": "shuyuan:xzqconfig_gd_shi",
"field": "adcode",
"children": []
},
{
"code": "440100",
"parentCode": "440000",
"name": "广州市",
"orderNum": 1,
"id": "29946f1b893b208c6124699a935c4612",
"url": "/geoserver/ows",
"serviceIndex": "shuyuan:xzqconfig_gd_shi",
"field": "adcode",
"children": [
{
"code": "440118",
"parentCode": "440100",
"name": "增城区",
"orderNum": 1,
"id": "ded8f077dabe4dc63c774ad58a5c2a10",
"url": "/geoserver/ows",
"serviceIndex": "shuyuan:xzqconfig_gz_qu",
"field": "adcode",
"children": []
},
{
"code": "440117",
"parentCode": "440100",
"name": "从化区",
"orderNum": 1,
"id": "86c2e947c41b0638de835edde04c2c5d",
"url": "/geoserver/ows",
"serviceIndex": "shuyuan:xzqconfig_gz_qu",
"field": "adcode",
"children": []
},
{
"code": "440115",
"parentCode": "440100",
"name": "南沙区",
"orderNum": 1,
"id": "36138ff7f7ebbc7f89cf0027606ec243",
"url": "/geoserver/ows",
"serviceIndex": "shuyuan:xzqconfig_gz_qu",
"field": "adcode",
"children": []
},
{
"code": "440114",
"parentCode": "440100",
"name": "花都区",
"orderNum": 1,
"id": "1a857a710ae8629e200e9d120b450d3d",
"url": "/geoserver/ows",
"serviceIndex": "shuyuan:xzqconfig_gz_qu",
"field": "adcode",
"children": []
},
{
"code": "440113",
"parentCode": "440100",
"name": "番禺区",
"orderNum": 1,
"id": "b7802e0cf9884629c539ae1ca82e001a",
"url": "/geoserver/ows",
"serviceIndex": "shuyuan:xzqconfig_gz_qu",
"field": "adcode",
"children": []
},
{
"code": "440112",
"parentCode": "440100",
"name": "黄埔区",
"orderNum": 1,
"id": "0c26e7524f46b2e03af7e8de9e8454c0",
"url": "/geoserver/ows",
"serviceIndex": "shuyuan:xzqconfig_gz_qu",
"field": "adcode",
"children": []
},
{
"code": "440111",
"parentCode": "440100",
"name": "白云区",
"orderNum": 1,
"id": "4eb36dfdc0c8f02b8e5069d0f546ecbd",
"url": "/geoserver/ows",
"serviceIndex": "shuyuan:xzqconfig_gz_qu",
"field": "adcode",
"children": []
},
{
"code": "440106",
"parentCode": "440100",
"name": "天河区",
"orderNum": 1,
"id": "4068f7d91a3e4b8b0c54ae596a9657ff",
"url": "/geoserver/ows",
"serviceIndex": "shuyuan:xzqconfig_gz_qu",
"field": "adcode",
"children": []
},
{
"code": "440105",
"parentCode": "440100",
"name": "海珠区",
"orderNum": 1,
"id": "39224ef8724828db2a397a387bdf61fc",
"url": "/geoserver/ows",
"serviceIndex": "shuyuan:xzqconfig_gz_qu",
"field": "adcode",
"children": []
},
{
"code": "440104",
"parentCode": "440100",
"name": "越秀区",
"orderNum": 1,
"id": "159dccc4b1ae55111bd571a86634c16b",
"url": "/geoserver/ows",
"serviceIndex": "shuyuan:xzqconfig_gz_qu",
"field": "adcode",
"children": []
},
{
"code": "440103",
"parentCode": "440100",
"name": "荔湾区",
"orderNum": 1,
"id": "118759109037d200b15874736e708d71",
"url": "/geoserver/ows",
"serviceIndex": "shuyuan:xzqconfig_gz_qu",
"field": "adcode",
"children": []
}
]
},
{
"code": "445300",
"parentCode": "440000",
"name": "云浮市",
"orderNum": 1,
"id": "9c2d0666c2dd18437fd4bba9d04c6ba5",
"url": "/geoserver/ows",
"serviceIndex": "shuyuan:xzqconfig_gd_shi",
"field": "adcode",
"children": []
}
]
}
],
"success": true
}

58
src/api/project/index.ts
View File

@ -1,33 +1,40 @@
import axios from 'axios'; import axios from "axios";
import { request } from '../axios'; import { request } from "../axios";
const url = '/sy-map-admin'; const url = "/sy-map-admin";
export const getProjectList = async (params: any) => { export const getProjectList = async (params: any) => {
const res = await request({ const res = await request({
url: url + '/water/project.json', url: url + "/water/project.json",
method: 'get', method: "get",
params params,
}); });
return res; return res;
}; };
export const getLayerTree = async (params: any) => { export const getLayerTree = async (params: any) => {
return await request({ return await request({
url: url + '/water/layerTree.json', url: url + "/water/layerTree.json",
method: 'get', method: "get",
params params,
}); });
}; };
// 默认视点 // 默认视点
export const getDefaultViewPoint = async () => { export const getDefaultViewPoint = async () => {
return await request({ return await request({
url: url + '/water/defaultViewPoint.json', url: url + "/water/defaultViewPoint.json",
method: 'get' method: "get",
});
};
// 行政区划树
export const getRegionTree = async () => {
return await request({
url: url + "/water/regionTree.json",
method: "get",
}); });
}; };
export const getLayerStyle = async (id: string) => { export const getLayerStyle = async (id: string) => {
return await request({ return await request({
url: url + '/layer/style/' + id, url: url + "/layer/style/" + id,
method: 'get' method: "get",
}); });
}; };
@ -35,26 +42,26 @@ export const getLayerStyle = async (id: string) => {
export const getFirstScene = async () => { export const getFirstScene = async () => {
return request({ return request({
url: `/map/scene/sceneList`, url: `/map/scene/sceneList`,
method: 'post', method: "post",
data: { data: {
pageNum: 1, pageNum: 1,
pageSize: 1, pageSize: 1,
data: { data: {
id: '', id: "",
name: '' name: "",
}, },
params: { params: {
order: 'asc', order: "asc",
orderBy: 'pub_date' orderBy: "pub_date",
} },
} },
}); });
}; };
export const getLayerData = async (sceneId: string) => { export const getLayerData = async (sceneId: string) => {
return request({ return request({
url: `/map/scene/getLayerTree/${sceneId}`, url: `/map/scene/getLayerTree/${sceneId}`,
method: 'get' method: "get",
}); });
}; };
@ -68,10 +75,13 @@ export const getLayerLegend = async (url: string) => {
* @param code 图层的查询编码 * @param code 图层的查询编码
* @returns * @returns
*/ */
export const identifyLayerInfo = async (type: string | number, code: string | number) => { export const identifyLayerInfo = async (
type: string | number,
code: string | number
) => {
return request({ return request({
url: `/run/api/object/info/${type}/${code}`, url: `/run/api/object/info/${type}/${code}`,
method: 'get' method: "get",
}); });
}; };
@ -79,6 +89,6 @@ export const identifyLayerInfo = async (type: string | number, code: string | nu
export function getSceneConfig(sceneId: string | number) { export function getSceneConfig(sceneId: string | number) {
return request({ return request({
url: `/map/scene/config/findConfigBySceneId/${sceneId}`, url: `/map/scene/config/findConfigBySceneId/${sceneId}`,
method: 'get' method: "get",
}); });
} }

1
src/components.d.ts
View File

@ -15,6 +15,7 @@ declare module 'vue' {
ElSelect: typeof import('element-plus/es')['ElSelect'] ElSelect: typeof import('element-plus/es')['ElSelect']
ElTooltip: typeof import('element-plus/es')['ElTooltip'] ElTooltip: typeof import('element-plus/es')['ElTooltip']
ElTree: typeof import('element-plus/es')['ElTree'] ElTree: typeof import('element-plus/es')['ElTree']
ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
Form: typeof import('./components/Form/index.vue')['default'] Form: typeof import('./components/Form/index.vue')['default']
InputNumber: typeof import('./components/Input/input-number.vue')['default'] InputNumber: typeof import('./components/Input/input-number.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink'] RouterLink: typeof import('vue-router')['RouterLink']

31
src/theme/select.scss
View File

@ -1,24 +1,25 @@
.sy-select__popper.sy-popper { .sy-select__popper.sy-popper {
border: 1px solid rgba(10, 204, 204, 0.32) !important; border: 1px solid rgba(255, 255, 255, 0.8) !important;
box-shadow: none; box-shadow: none;
background: rgba(0, 37, 88, 0.6) !important; background: rgba(255, 255, 255, 0.8) !important;
} }
.sy-select-dropdown__list { .sy-select-dropdown__list {
background: rgba(0, 37, 88, 0.6); background: rgba(255, 255, 255, 0.8);
box-shadow: none; box-shadow: none;
margin: 6px !important; margin: 6px !important;
backdrop-filter: blur(10px);
} }
.sy-select-dropdown__item { .sy-select-dropdown__item {
background: transparent !important; background: transparent !important;
color: rgba(255, 255, 255, 0.7) !important; color: rgba(0, 0, 0, 0.9) !important;
&:hover { &:hover {
color: var(--sy-main-font-color); color: var(--sy-main-font-color);
} }
} }
.sy-select { .sy-select {
height: 42px; height: 42px;
line-height: 42px; line-height: 42px;
} }
.sy-select .sy-input__wrapper { .sy-select .sy-input__wrapper {
line-height: 42px; line-height: 42px;
} }

138
src/views/Main/DailyPatrolCard/index.vue
View File

@ -14,10 +14,10 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue"; import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from "echarts"; import * as echarts from 'echarts';
defineOptions({ defineOptions({
name: "DailyPatrolCard", name: 'DailyPatrolCard'
}); });
let chart: echarts.ECharts | undefined; let chart: echarts.ECharts | undefined;
const chartRef = ref(); const chartRef = ref();
@ -26,7 +26,7 @@ const handleResize = () => {
}; };
onMounted(() => { onMounted(() => {
chart = echarts.init(chartRef.value); chart = echarts.init(chartRef.value);
const pieName = ["一般", "重大", "较大", "紧急"]; const pieName = ['一般', '重大', '较大', '紧急'];
const pieValue = [545, 21, 300, 64]; const pieValue = [545, 21, 300, 64];
let count: any = 0; let count: any = 0;
@ -34,26 +34,26 @@ onMounted(() => {
for (var i = 0; i < pieName.length; i++) { for (var i = 0; i < pieName.length; i++) {
pieData.push({ pieData.push({
name: pieName[i], name: pieName[i],
value: pieValue[i], value: pieValue[i]
}); });
count += pieValue[i]; count += pieValue[i];
} }
const legendStyle = { const legendStyle = {
type: "scroll", type: 'scroll',
// orient: 'vertical', // orient: 'vertical',
// height: '95%', // height: '95%',
width: "50%", width: '50%',
left: "50%", left: '50%',
textAlign: "left", textAlign: 'left',
align: "left", align: 'left',
icon: "circle", //设置为圆，删除则为矩形 icon: 'circle', //设置为圆，删除则为矩形
itemWidth: 10, itemWidth: 10,
itemHeight: 10, itemHeight: 10,
itemGap: 44, // 44 itemGap: 44, // 44
formatter: function (name: any) { formatter: function (name: any) {
for (var i = 0; i < pieName.length; i++) { for (var i = 0; i < pieName.length; i++) {
if (name == pieData[i].name) { if (name == pieData[i].name) {
return "{name|" + name + "}{rate|" + pieValue[i] + "}"; return '{name|' + name + '}{rate|' + pieValue[i] + '}';
} }
} }
}, },
@ -65,94 +65,106 @@ onMounted(() => {
width: 60, width: 60,
height: 24, height: 24,
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,
width: 30, width: 30,
padding: [60, 0, 0, -60], padding: [60, 0, 0, -60],
color: "rgba(0, 0, 0, 0.9)", color: 'rgba(0, 0, 0, 0.9)'
}, }
}, }
}, }
}; };
// Chart options // Chart options
const option = { const option = {
tooltip: { tooltip: {
trigger: "item", trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)", // formatter: '{a} <br/>{b}: {c} ({d}%)'
}, },
title: { color: ['#4293F4', '#FFDD77', '#FF9A23', '#F26161'],
text: count,
subtext: "待处理问题",
x: "10%",
y: "34%",
align: "center",
textStyle: {
color: "rgba(0, 0, 0, 0.9)",
fontSize: 32,
lineHeight: 32, // 39
fontWeight: "bold",
fontFamily: "DIN",
},
subtextStyle: {
color: "rgba(0, 0, 0, 0.6)",
fontSize: 14,
fontWeight: 500,
lineHeight: 2, // 24
padding: [-20, 0, 0, 0],
fontFamily: "PingFang SC",
},
},
color: ["#4293F4", "#FFDD77", "#FF9A23", "#F26161"],
legend: [ legend: [
{ {
top: "15%", top: '15%',
// 显示前两个 // 显示前两个
data: pieName.slice(0, 2), data: pieName.slice(0, 2),
...legendStyle, ...legendStyle
}, },
{ {
top: "55%", top: '55%',
// 显示前两个 // 显示前两个
data: pieName.slice(2, 4), data: pieName.slice(2, 4),
...legendStyle, ...legendStyle
}, }
], ],
series: [ series: [
{ {
name: "问题类型", // name: '问题类型',
type: "pie", type: 'pie',
radius: ["75%", "95%"], radius: ['52%', '70%'],
center: ["20%", "50%"], center: ['20%', '50%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { label: {
show: false, show: false
}, },
emphasis: { emphasis: {
label: { label: {
show: false, show: false
}, }
}, },
labelLine: { labelLine: {
show: false, show: false
}, },
data: pieData, data: pieData
}, },
], {
name: '待处理问题',
type: 'pie',
radius: ['0', '30%'],
center: ['20%', '50%'],
z: 0,
itemStyle: {
color: 'transparent',
borderWidth: 0,
borderColor: '#eee'
},
label: {
position: 'center',
formatter: function () {
return ['{total|' + count + '}', '{label|待处理问题}'].join('\n');
},
rich: {
total: {
color: '#000',
fontSize: 28,
fontWeight: 'bold',
fontFamily: 'DIN',
lineHeight: 34
},
label: {
color: 'rgba(0, 0, 0, 0.6)',
fontSize: 14,
lineHeight: 18,
fontFamily: 'Source Han Sans'
}
}
},
data: [{ value: 1, name: '', tooltip: { show: false} }]
}
]
}; };
// Set options and render chart // Set options and render chart
chart.setOption(option); chart.setOption(option);
window.addEventListener("resize", handleResize); window.addEventListener('resize', handleResize);
}); });
onBeforeUnmount(() => { onBeforeUnmount(() => {
chart?.dispose(); chart?.dispose();
window.removeEventListener("resize", handleResize); window.removeEventListener('resize', handleResize);
}); });
</script> </script>
@ -182,7 +194,7 @@ onBeforeUnmount(() => {
line-height: 22px; line-height: 22px;
letter-spacing: 0px; letter-spacing: 0px;
font-variation-settings: "opsz" auto; font-variation-settings: 'opsz' auto;
color: rgba(0, 0, 0, 0.55); color: rgba(0, 0, 0, 0.55);
span { span {
font-family: DIN; font-family: DIN;
@ -191,7 +203,7 @@ onBeforeUnmount(() => {
line-height: 22px; line-height: 22px;
letter-spacing: 0px; letter-spacing: 0px;
font-variation-settings: "opsz" auto; font-variation-settings: 'opsz' auto;
color: #28ce8e; color: #28ce8e;
} }
} }

16
src/views/Main/Map/components/LayerSwitch.vue
View File

@ -14,7 +14,7 @@
<el-tooltip <el-tooltip
effect="dark" effect="dark"
:content="is3DScene ? '三维模式' : '二维模式'" :content="is3DScene ? '三维模式' : '二维模式'"
placement="right" placement="bottom"
> >
<img <img
class="icon" class="icon"
@ -37,7 +37,7 @@ defineOptions({
}); });
let is3DScene = ref(true); let is3DScene = ref(true);
let showTreeBox = ref(false); let showTreeBox = ref(false);
const emits = defineEmits(["layerTreeChange"]); const emits = defineEmits(["layerTreeChange", "showChange"]);
function handleChangeMode() { function handleChangeMode() {
is3DScene.value = !is3DScene.value; is3DScene.value = !is3DScene.value;
const mapSceneType = !is3DScene.value ? 2 : 3; const mapSceneType = !is3DScene.value ? 2 : 3;
@ -69,14 +69,18 @@ function layerTreeChange() {
.layer-switch { .layer-switch {
display: flex; display: flex;
width: 100%; width: 100%;
height: 37px; height: 36px;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.btn { .btn {
padding: 8px 12px; display: flex;
align-items: center;
justify-content: center;
padding: 10px 12px;
cursor: pointer;
.icon { .icon {
width: 17px; width: 16px;
height: 17px; height: 16px;
} }
} }
.slider-line { .slider-line {

5
src/views/Main/Map/components/Legend.vue
View File

@ -79,7 +79,8 @@ onMounted(() => {
padding: 12px 0 12px 12px; padding: 12px 0 12px 12px;
overflow-y: auto; overflow-y: auto;
border-radius: 4px; border-radius: 4px;
background-color: #fff; background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
overflow: hidden; overflow: hidden;
} }
.legend-comp { .legend-comp {
@ -98,7 +99,7 @@ onMounted(() => {
.icon { .icon {
width: 20px; width: 20px;
height: 20px; height: 20px;
margin-right: 4px; margin-right: 10px;
} }
} }
</style> </style>

46
src/views/Main/MapSearch/index.vue
View File

@ -0,0 +1,46 @@
<template>
<div class="map-search">
<span class="map-search-icon">
<iconpark-icon name="search" size="16" fill="#fff"></iconpark-icon>
</span>
<el-input
class="map-search-input"
placeholder="输入水库名称、水库编码"
></el-input>
</div>
</template>
<script setup lang="ts">
import {} from "element-plus/";
defineOptions({
name: "MapSearch",
});
</script>
<style scoped lang="less">
.map-search {
display: flex;
align-items: center;
justify-content: flex-start;
height: 36px;
border-radius: 4px;
overflow: hidden;
.map-search-icon {
background: #36b29e;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
}
:deep(.map-search-input) {
width: 204px;
background: rgba(255, 255, 255, 0.8);
color: rgba(0, 0, 0, 0.9);
::-webkit-input-placeholder {
color: rgba(0, 0, 0, 0.4);
}
}
}
</style>

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

@ -69,12 +69,13 @@ onMounted(() => {
fontSize: 16, fontSize: 16,
fontWeight: 400, fontWeight: 400,
height: 24, height: 24,
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: 500, fontWeight: 'bold',
fontFamily: 'Microsoft YaHei', fontFamily: 'Microsoft YaHei',
height: 24, height: 24,
padding: [48, 0, 0, -60], padding: [48, 0, 0, -60],
@ -82,7 +83,7 @@ onMounted(() => {
}, },
unit: { unit: {
fontSize: 16, fontSize: 16,
fontWeight: 500, fontWeight: 'bold',
fontFamily: 'Microsoft YaHei', fontFamily: 'Microsoft YaHei',
height: 24, height: 24,
padding: [48, 0, 0, 9], padding: [48, 0, 0, 9],
@ -160,7 +161,7 @@ onMounted(() => {
} }
} }
}, },
data: [{ value: 1, name: '总数' }] data: [{ value: 1, name: '总数', tooltip: { show: false} }]
} }
] ]
}; };

301
src/views/Main/RiskInspectionCard/index.vue
View File

@ -15,12 +15,12 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue"; import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from "echarts"; import * as echarts from 'echarts';
import "echarts-liquidfill"; import 'echarts-liquidfill';
import "echarts-liquidfill/src/liquidFill.js"; import 'echarts-liquidfill/src/liquidFill.js';
defineOptions({ defineOptions({
name: "RiskInspectionCard", name: 'RiskInspectionCard'
}); });
const problemEchartRef = ref(); const problemEchartRef = ref();
const questEchartRef = ref(); const questEchartRef = ref();
@ -33,144 +33,147 @@ const handleResize = () => {
onMounted(() => { onMounted(() => {
leftChart = echarts.init(problemEchartRef.value); leftChart = echarts.init(problemEchartRef.value);
const color = ["#FFBC37", "#429BF4"]; const color = ['#FFBC37', '#429BF4'];
const dataStyle = { const dataStyle = {
normal: { normal: {
label: { label: {
show: false, show: false
}, },
labelLine: { labelLine: {
show: false, show: false
}, },
shadowBlur: 40, shadowBlur: 40,
borderWidth: 10, borderWidth: 10,
shadowColor: "rgba(0, 0, 0, 0)", //边框阴影 shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
}, }
}; };
const placeHolderStyle = { const placeHolderStyle = {
normal: { normal: {
color: "rgba(255, 255, 255, 0.4)", color: 'rgba(255, 255, 255, 0.4)',
label: { label: {
show: false, show: false
}, },
labelLine: { labelLine: {
show: false, show: false
}, }
}, },
emphasis: { emphasis: {
color: "rgba(255, 255, 255, 0.4)", color: 'rgba(255, 255, 255, 0.4)'
}, },
tooltip: { tooltip: {
show: false, show: false
}, }
}; };
const legendName = ["数量", "问题数"]; const legendName = ['数量', '问题数'];
const pieValue = [98, 56]; const pieValue = [98, 56];
var pieData: any = []; var pieData: any = [];
for (var i = 0; i < legendName.length; i++) { for (var i = 0; i < legendName.length; i++) {
pieData.push({ pieData.push({
name: legendName[i], name: legendName[i],
value: pieValue[i], value: pieValue[i]
}); });
} }
const leftCenterValue = ['50%', '37%']
// Chart options for the left side (nested pie) // Chart options for the left side (nested pie)
const leftOption = { const leftOption = {
tooltip: { tooltip: {
trigger: "item", trigger: 'item',
formatter: "{b}: {c}", formatter: '{b}: {c}'
}, },
color: ["#FFBC37", "#FFBC37"], color: ['#FFBC37', '#FFBC37'],
title: { title: {
text: pieValue[0], text: pieValue[0],
subtext: "工程总数", subtext: '工程总数',
x: "center", x: 'center',
y: "20%", y: '20%',
textStyle: { textStyle: {
color: "rgba(0, 0, 0, 0.9)", color: 'rgba(0, 0, 0, 0.9)',
fontSize: 32, fontSize: 32,
lineHeight: 32, // 39 lineHeight: 32, // 39
fontWeight: "bold", fontWeight: 'bold',
fontFamily: "DIN", fontFamily: 'DIN'
}, },
subtextStyle: { subtextStyle: {
color: "rgba(0, 0, 0, 0.6)", color: 'rgba(0, 0, 0, 0.6)',
fontSize: 14, fontSize: 14,
fontWeight: 500, fontWeight: 500,
lineHeight: 2, // 24 lineHeight: 2, // 24
padding: [-20, 0, 0, 0], padding: [-20, 0, 0, 0],
fontFamily: "PingFang SC", fontFamily: 'PingFang SC'
}, }
}, },
legend: { legend: {
show: true, show: true,
// orient: 'vertical', // orient: 'vertical',
// x: '50%', // x: '50%',
icon: "circle", icon: 'circle',
top: "bottom", top: 'bottom',
itemGap: 10, // 16 itemGap: 16, // 16
itemWidth: 8, itemWidth: 8,
itemHeight: 8, itemHeight: 8,
width: "100%", width: '100%',
textStyle: { textStyle: {
rich: { rich: {
name: { name: {
fontSize: 14, fontSize: 14,
height: 25, height: 25,
width: 40,
padding: [0, 8, 0, 5], padding: [0, 8, 0, 5],
color: "rgba(0, 0, 0, 0.55)", color: 'rgba(0, 0, 0, 0.55)'
}, },
rate: { rate: {
fontSize: 16, fontSize: 16,
fontWeight: 500, fontWeight: 'bold',
height: 35, height: 35,
color: "rgba(0, 0, 0, 0.9)", padding: [50, 8, 0, -45],
}, color: 'rgba(0, 0, 0, 0.9)'
}, }
}
}, },
data: legendName, data: legendName,
formatter: function (name: any) { formatter: function (name: any) {
for (var i = 0; i < legendName.length; i++) { for (var i = 0; i < legendName.length; i++) {
if (name == pieData[i].name) { if (name == pieData[i].name) {
return "{name|" + name + "}{rate|" + pieValue[i] + "}"; return '{name|' + name + '}{rate|' + pieValue[i] + '}';
} }
} }
}, }
}, },
series: [ series: [
{ {
name: "数量", name: '数量',
type: "pie", type: 'pie',
clockWise: false, clockWise: false,
radius: ["74%", "82%"], radius: ['70%', '78%'],
center: ["50%", "40%"], center: leftCenterValue,
itemStyle: dataStyle, itemStyle: dataStyle,
hoverAnimation: false, hoverAnimation: false,
label: { label: {
borderRadius: "10", borderRadius: '10'
}, },
color: color[0], color: color[0],
data: [ data: [
{ {
// 灰色部分数据 // 灰色部分数据
value: pieValue[1], value: pieValue[1],
name: "", name: '',
tooltip: { tooltip: {
show: false, show: false
}, },
itemStyle: placeHolderStyle, itemStyle: placeHolderStyle
}, },
{ {
value: pieValue[0], value: pieValue[0],
name: "数量", name: '数量'
}, }
], ]
}, },
{ {
name: "问题数", name: '问题数',
type: "pie", type: 'pie',
radius: ["54%", "62%"], radius: ['56%', '64%'],
center: ["50%", "40%"], center: leftCenterValue,
clockWise: false, clockWise: false,
itemStyle: dataStyle, itemStyle: dataStyle,
hoverAnimation: false, hoverAnimation: false,
@ -179,123 +182,207 @@ onMounted(() => {
{ {
// 灰色部分数据 // 灰色部分数据
value: pieValue[0], value: pieValue[0],
name: "", name: '',
tooltip: { tooltip: {
show: false, show: false
}, },
itemStyle: placeHolderStyle, itemStyle: placeHolderStyle
}, },
{ {
value: pieValue[1], value: pieValue[1],
name: "问题数", name: '问题数'
}, }
], ]
}, }
], ]
}; };
// Set options and render left chart // Set options and render left chart
leftChart.setOption(leftOption); leftChart.setOption(leftOption);
rightChart = echarts.init(questEchartRef.value); rightChart = echarts.init(questEchartRef.value);
const li_qu_legend = ['任务数', '已完成'];
const taskNum = 98;
const accomplishNum = 30;
const li_qu_data = [
{
name: li_qu_legend[0],
value: taskNum
},
{
name: li_qu_legend[1],
value: accomplishNum
}
];
// 占比率
const li_qu_count: any = accomplishNum / taskNum;
const titleStyle = {
fontSize: 32,
fontWeight: 'bold',
color: 'rgba(0, 0, 0, 0.9)',
textAlign: 'center',
textShadowBlur: '0',
textShadowOffsetX: 0,
textShadowOffsetY: 1
};
const centerValue = ['50%', '37%']
// Chart options for the right side (liquidFill) // Chart options for the right side (liquidFill)
const rightOption = { const rightOption = {
title: [
{
text: (li_qu_count * 100).toFixed(1) + '%',
subtext: '占比：',
x: 'center',
y: 'center',
subtextStyle: {
color: 'rgba(0, 0, 0, 0.6)',
fontSize: 14,
fontWeight: 'bold',
align: 'center',
lineHeight: 16 // 20
},
left: '50%',
top: '25%',
textAlign: 'center',
textStyle: titleStyle
}
],
legend: {
icon: 'circle',
bottom: '2%',
itemGap: 16,
itemWidth: 8,
itemHeight: 8,
itemStyle: {
borderWidth: 2, // 4
borderColor: '#3AFFDE'
},
textStyle: {
rich: {
name: {
fontSize: 14,
height: 25,
width: 40,
padding: [0, 8, 0, 5],
color: 'rgba(0, 0, 0, 0.55)'
},
rate: {
fontSize: 16,
fontWeight: 'bold',
height: 35,
padding: [50, 8, 0, -45],
color: 'rgba(0, 0, 0, 0.9)'
}
}
},
data: li_qu_legend,
formatter: function (name: any) {
for (var i = 0; i < li_qu_legend.length; i++) {
if (name == li_qu_data[i].name) {
return '{name|' + name + '}{rate|' + li_qu_data[i].value + '}';
}
}
}
},
series: [ series: [
{ {
type: "liquidFill", type: 'liquidFill',
radius: "30%", radius: '70%',
z: 4, z: 4,
center: ["50%", "50%"], center: centerValue,
amplitude: 5, amplitude: 5,
data: [0.5], data: [0.5],
itemStyle: { itemStyle: {
normal: { normal: {
color: "#28CE8E", color: '#28CE8E',
label: { label: {
show: false, show: false
}, }
}, }
}, },
backgroundStyle: { backgroundStyle: {
borderWidth: 0, borderWidth: 0,
color: "transparent", color: 'transparent'
}, },
label: { label: {
normal: { normal: {
formatter: "", formatter: ''
}, }
}, },
outline: { outline: {
show: true, show: false,
itemStyle: { itemStyle: {
borderWidth: 0, borderWidth: 0
}, },
borderDistance: 0, borderDistance: 0
}, }
}, },
{ {
name: legendName[0], name: li_qu_legend[0],
type: "pie", type: 'pie',
z: 1, z: 1,
radius: ["0%", "31%"], radius: ['0%', '72%'],
center: ["50%", "50%"], center: centerValue,
hoverAnimation: false, hoverAnimation: false,
itemStyle: { itemStyle: {
normal: { normal: {
label: { label: {
show: false, show: false
}, }
}, }
}, },
color: ['#fff'],
data: [ data: [
{ {
value: 1, value: 1,
itemStyle: { itemStyle: {
normal: { normal: {
color: "rgba(255, 255, 255, 1)", color: 'rgba(255, 255, 255, 1)'
}, }
}, }
}, }
], ]
}, },
{ {
name: legendName[1], name: li_qu_legend[1],
type: "pie", type: 'pie',
z: 1, z: 1,
radius: ["0%", "31%"], radius: ['0%', '72%'],
center: ["50%", "50%"], center: centerValue,
hoverAnimation: false, hoverAnimation: false,
itemStyle: { itemStyle: {
normal: { normal: {
label: { label: {
show: false, show: false
}, }
}, }
}, },
color: ['#fff'],
data: [ data: [
{ {
value: 0, value: 0,
itemStyle: { itemStyle: {
normal: { normal: {
color: "rgba(255, 255, 255, 1)", color: 'rgba(255, 255, 255, 1)'
}, }
}, }
}, }
], ]
}, }
], ]
}; };
// Set options and render right chart // Set options and render right chart
rightChart.setOption(rightOption); rightChart.setOption(rightOption);
window.addEventListener("resize", handleResize); window.addEventListener('resize', handleResize);
}); });
onBeforeUnmount(() => { onBeforeUnmount(() => {
leftChart?.dispose(); leftChart?.dispose();
rightChart?.dispose(); rightChart?.dispose();
window.removeEventListener("resize", handleResize); window.removeEventListener('resize', handleResize);
}); });
</script> </script>

9
src/views/Main/index.vue
View File

@ -10,6 +10,7 @@
<RightPanel> <RightPanel>
<div class="right-panel-left"> <div class="right-panel-left">
<div class="top"> <div class="top">
<MapSearch />
<MapLayerSwitch @showChange="layerTreeChange"></MapLayerSwitch> <MapLayerSwitch @showChange="layerTreeChange"></MapLayerSwitch>
</div> </div>
<div class="bottom"> <div class="bottom">
@ -39,6 +40,7 @@ import MapLayerSwitch from "./Map/components/LayerSwitch.vue";
import LayerTree from "./Map/components/LayerTree.vue"; import LayerTree from "./Map/components/LayerTree.vue";
import Map from "./Map/index.vue"; import Map from "./Map/index.vue";
import RegionSelect from "../RegionSelect/index.vue"; import RegionSelect from "../RegionSelect/index.vue";
import MapSearch from "./MapSearch/index.vue";
import { onBeforeUnmount, onMounted, ref } from "vue"; import { onBeforeUnmount, onMounted, ref } from "vue";
defineOptions({ defineOptions({
name: "main", name: "main",
@ -82,5 +84,12 @@ onBeforeUnmount(() => {
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
align-items: flex-end; align-items: flex-end;
.top {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 12px;
}
} }
</style> </style>

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

@ -1,16 +1,43 @@
<template> <template>
<div class="region-select"> <div class="region-select">
<span class="title">行政区划</span> <span class="title">行政区划</span>
<el-select size="small" class="sy-region-select"> <el-tree-select
<el-option label="广东省" value="1"></el-option> v-model="regionValue"
</el-select> :data="regionTree"
filterable
style="width: 194px"
size="small"
class="sy-region-select"
check-strictly
render-after-expand
:props="treeSelectProps"
node-key="id"
@change="changeRegion"
/>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { getAreasData } from "@/api/safety";
import { onMounted, ref } from "vue";
defineOptions({ defineOptions({
name: "RegionSelect", name: "RegionSelect",
}); });
const regionValue = ref("");
const regionTree = ref([]);
const treeSelectProps = {
label: "name",
children: "children",
};
const changeRegion = (val: any) => {
console.log("🚀 ~ changeRegion ~ val:", val);
// regionValue.value = val;
};
onMounted(() => {
getAreasData().then((res: any) => {
regionTree.value = res ?? [];
});
});
</script> </script>
<style scoped lang="less"> <style scoped lang="less">

Write Preview
Loading…
Cancel
Save