renkang/xj-screen
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update 看板接口对接 增加路由依赖

Browse Source
This commit is contained in:
zk
2023-12-06 16:19:47 +08:00
parent 458009709e
commit 80baa0c7c6
14 changed files with 9540 additions and 28525 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/chinaMap/chinaHooks.ts
+41 -109
View File
@@ -1,10 +1,11 @@
import { getAllList } from '/@/components/chinaMap/chinaMapApi.ts';
import { getAllList, getAmbulanceList } from '/@/components/chinaMap/chinaMapApi.ts';
export enum TabType {
all = '', //所有资源
youTianYiYuan = '1', //油田医院
heZuoYiYuan = '2', //合作医院
yiLiaoDian = '3', //医疗点
jiuHuChe = '4', //救护车
}
export const tabList = [
@@ -22,6 +23,7 @@ export const tabList = [
},
{
name: '救护车',
type: TabType.jiuHuChe,
},
{
name: '合作医院',
@@ -38,14 +40,50 @@ export const tabList = [
},
];
export function mapApiSwitch(type: string, params: any) {
// 直升机位置数据
export const aircraft = [
{
category: 3,
lat: 108.861377,
lon: 34.35965,
img: WebRoot + '/webpage/com/jeecg/show/img/helicopter.gif',
name: '直升机',
},
{
category: 3,
lat: 106.267358,
lon: 38.520079,
img: WebRoot + '/webpage/com/jeecg/show/img/helicopter.gif',
name: '直升机',
},
{
category: 3,
lat: 109.505282,
lon: 36.579381,
img: WebRoot + '/webpage/com/jeecg/show/img/helicopter.gif',
name: '直升机',
},
{
category: 3,
lat: 107.638372,
lon: 35.734218,
img: WebRoot + '/webpage/com/jeecg/show/img/helicopter.gif',
name: '直升机',
},
];
export function mapApiSwitch(type, params: any) {
const basicParams = {
lat: 34, //纬度34
lon: 108, //经度
};
if ([TabType.all, TabType.yiLiaoDian, TabType.heZuoYiYuan].includes(type)) {
// 全部 油田 医疗点 合作医院
if ([TabType.all, TabType.youTianYiYuan, TabType.yiLiaoDian, TabType.heZuoYiYuan].includes(type)) {
return getAllList({ ...basicParams, ...params });
}
if ([TabType.jiuHuChe].includes(type)) {
return getAmbulanceList({});
}
}
export const mapIcon1 = new URL('/@/assets/img/mapIcon1.png', import.meta.url).href;
@@ -61,7 +99,6 @@ export const legend3 = new URL('/@/assets/img/legend3.png', import.meta.url).hre
export const legend4 = new URL('/@/assets/img/legend4.png', import.meta.url).href;
export const legend5 = new URL('/@/assets/img/legend5.png', import.meta.url).href;
export const legend6 = new URL('/@/assets/img/legend6.png', import.meta.url).href;
export const mapIcons = [mapIcon1, mapIcon2, mapIcon3, mapIcon4, mapIcon5, mapIcon6];
export const legendList = [
{ img: legend1, text: '油田医院' },
@@ -71,111 +108,6 @@ export const legendList = [
{ img: legend5, text: '地方医院' },
{ img: legend6, text: '直升机' },
];
const bgImg = new URL('/@/assets/images/china-textur.jpg', import.meta.url).href;
export function createChartOption({ icons }) {
return {
tooltip: {
show: false,
// formatter: (params) => {
// console.log('params', params);
// if (!params?.data?.id) {
// return '';
// }
// return `<div style="color:red;width:300px"> ${params.name}</div>
// <div>id: ${params?.data?.id}</div>`;
// },
},
geo: [
{
map: 'china',
zlevel: 3,
aspectScale: 0.8, //长宽比
zoom: 1.1,
// roam: true,
// draggable: true,
top: '60',
left: 'center',
itemStyle: {
areaColor: '#173a58',
shadowColor: '#173a58',
shadowOffsetX: 0,
shadowOffsetY: 5,
borderWidth: 6, //外部边框
borderColor: '#6ccffe',
},
},
{
map: 'china',
zlevel: 2,
aspectScale: 0.8, //长宽比
zoom: 1.1,
// roam: true,
// draggable: true,
top: '60',
left: 'center',
itemStyle: {
areaColor: '#1e2c38',
shadowColor: '#1e2c38',
shadowOffsetX: 0,
shadowOffsetY: 10,
borderWidth: 6, //外部边框
borderColor: '#384d61',
},
},
],
series: [
{
map: 'china', // 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
name: '中国地图',
type: 'map',
selected: {}, // 默认所有省份都是未选中状态
selectedMode: 'single', // 选中模式为单选
zlevel: 9,
zoom: 1.1,
aspectScale: 0.8, //长宽比
// roam: true,
// draggable: true,
hoverAnimation: false,
silent: false,
top: '60',
left: 'center',
label: {
show: true,
padding: [0, 10],
height: 31,
lineHeight: 31,
textStyle: {
color: '#fff',
fontSize: 13,
marginLeft: 5,
},
},
itemStyle: {
// 给地图添加背景图片
areaColor: {
type: 'pattern',
image: bgImg,
repeat: 'no-repeat',
},
borderColor: '#359de5',
borderWidth: 2, //内部边框,
},
// 鼠标悬浮
emphasis: {
label: {
color: '#fff',
},
itemStyle: {
// areaColor: '#008CFF',
areaColor: '#002e64',
},
},
},
...icons.value,
],
};
}
/**
* @description 秒转小时
src/components/chinaMap/chinaMap.vue
+18 -97
View File
@@ -2,7 +2,7 @@
<div class="center-map">
<div class="china-map-box">
<div class="tab-list">
<div v-for="(item, i) in list" :class="[currentIndex == i ? 'active' : '']" class="tab" @click="changeTab(i)">
<div v-for="(item, i) in list" :class="[currentIndex == i ? 'active' : '']" class="tab" @click="changeTab(item, i)">
{{ item.name }}
</div>
</div>
@@ -36,7 +36,7 @@
<div v-show="!routeList.length" class="empty-data"> 暂无数据</div>
</div>
</div>
<div class="china-map-container"></div>
<div class="mapContainer" id="mapContainer"></div>
<div v-show="false" id="container"></div>
<div v-show="false" id="panel"></div>
<div class="map-legend">
@@ -59,11 +59,9 @@
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import mapJson from '/@/components/chinaMap/json/c.json';
import { tabList, mapIcons, legendList, getTimeStr, getKmStr, createChartOption, mapApiSwitch } from '/@/components/chinaMap/chinaHooks';
import { message } from 'ant-design-vue';
import { getAllList } from '/@/components/chinaMap/chinaMapApi';
import { Map } from '/@/assets/mapUtils/map';
import { tabList, legendList, getTimeStr, getKmStr, mapApiSwitch } from '/@/components/chinaMap/chinaHooks';
const formState = ref({
start: '西安北站',
@@ -71,105 +69,28 @@
});
const list = ref(tabList);
const currentIndex = ref(0);
const icons = ref([
{
type: 'scatter',
zlevel: 100,
coordinateSystem: 'geo',
//自定义图片的 位置（lng, lat）
data: [{ name: '西安', value: ['108.88', '34.40'], id: 'xian' }],
//自定义图片的 大小
symbolSize: [25, 63],
//自定义图片的 路径
// symbol: 'image://https://img2.baidu.com/it/u=1568770988,2090980470&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=567', // 图片 URL
symbol: 'image://' + mapIcons[0], // 图片 URL
},
]);
function changeTab(i: number) {
let x = Math.random() + 5 - Math.floor(Math.random() * 10) - i + Math.random() * 3.5;
let y = Math.floor(Math.random() * 10) - 5 + Math.random() + i + Math.random() * 5;
const o = {
type: 'scatter',
zlevel: 100,
coordinateSystem: 'geo',
//自定义图片的 位置（lng, lat）
data: [{ name: '太原', value: [112.55 + Math.random() + x, 37.98 + Math.random() + y], id: 'taiyuan' }],
//自定义图片的 大小
symbolSize: [25, 63],
symbol: 'image://' + mapIcons[Math.floor(Math.random() * 6)], // 图片 URL
};
icons.value = [];
icons.value.push(o);
// icons.value.push(line);
function changeTab(item, i: number) {
currentIndex.value = i;
let myChart = echarts.init(document.querySelector('.china-map-container'));
initMap(myChart);
getMapData(item.type, { type: item.type });
}
async function getMapData(params) {
const data = await mapApiSwitch(params.type, {});
console.log('--->data', data);
async function getMapData(type, params = {}) {
const { code, result } = await mapApiSwitch(type, params);
if (code == 200 && Array.isArray(result) && result.length > 0) {
Map.createOverlay(result);
}
console.log('--->data', result);
}
onMounted(() => {
console.log('reload');
let myChart = echarts.init(document.querySelector('.china-map-container'));
echarts.registerMap('china', mapJson);
initMap(myChart);
getMapData({ type: tabList[0].type });
initMap();
getMapData(tabList[0].type);
});
function initMap(myChart) {
let option = createChartOption({ icons });
myChart.setOption(option);
// 关闭之前的点击事件
myChart.off('click');
myChart.on('click', function (res) {
mapClick(res, myChart);
});
myChart.getZr().on('click', (params) => {
if (params.target) {
// alert('画布非空白区');
} else {
// alert('画布空白区');
myChart.dispatchAction({
// 如果绑定了 geo 图层（指定了geoIndex），则是 geoUnSelect 事件
type: 'unselect',
// 指定 series 的索引
seriesIndex: 0,
// 指定要取消选中数据的索引, 如果要取消全部选中，则把所有数据的下标数组作为 dataIndex 即可
dataIndex: new Array(101).fill(null).map((_, i) => i), // 0 代表取消选中 data 中第1项的选中，依此类推
});
myChart.dispatchAction({
// 如果绑定了 geo 图层（指定了geoIndex），则是 geoUnSelect 事件
type: 'geoUnSelect',
// 指定 series 的索引
seriesIndex: 0,
// 指定要取消选中数据的索引, 如果要取消全部选中，则把所有数据的下标数组作为 dataIndex 即可
dataIndex: new Array(101).fill(null).map((_, i) => i), // 0 代表取消选中 data 中第1项的选中，依此类推
});
}
});
window.addEventListener('resize', () => {
myChart.resize();
});
}
function mapClick(res, myChart) {
if (res.componentType !== 'series') {
myChart.setOption({
series: [{ selected: {} }], // 取消所有省份的选中状态
});
}
console.log('res', res);
if ('scatter' === res.componentSubType) {
// alert(`点击了 ${res.name} 图标`);
}
if ('map' === res.componentSubType) {
// alert(`点击了 ${res.name} 地图`);
}
function initMap() {
Map.initMap({ el: 'mapContainer' });
}
const routeList = ref([]);
@@ -412,9 +333,9 @@
}
}
.china-map-container {
.mapContainer {
flex: 1;
margin: 10px;
margin: 10px 0;
//border: 1px solid red;
}
src/components/chinaMap/chinaMapApi.ts
+4 -2
View File
@@ -1,9 +1,11 @@
import {get} from '/@/api/request.ts';
import { get } from '/@/api/request.ts';
export enum Api {
allList = '/health-emergency/emergency/tblAmbulanceGps/getAllList',
getAmbulanceList = '/health-emergency/emergency/tblAmbulanceGps/getAmbulanceList',
}
// 获取所有资源
export const getAllList = (params) => get(Api.allList, params);
//获取救护车GPS信息
//获取救护车GPS信息
export const getAmbulanceList = (params) => get(Api.getAmbulanceList, params);
src/components/chinaMap/json/c.json
-25642
View File
File diff suppressed because it is too large Load Diff
src/components/chinaMap/json/china.ts
-1
View File
File diff suppressed because one or more lines are too long
src/components/chinaMap/json/new.json
-27243
View File
File diff suppressed because it is too large Load Diff