update
This commit is contained in:
zk
@@ -0,0 +1,15 @@
|
|||||||
|
|
||||||
|
*.sh
|
||||||
|
node_modules
|
||||||
|
*.md
|
||||||
|
*.woff
|
||||||
|
*.ttf
|
||||||
|
.vscode
|
||||||
|
.idea
|
||||||
|
dist
|
||||||
|
/public
|
||||||
|
/docs
|
||||||
|
.husky
|
||||||
|
.local
|
||||||
|
/bin
|
||||||
|
Dockerfile
|
||||||
@@ -0,0 +1,78 @@
|
|||||||
|
// @ts-check
|
||||||
|
const { defineConfig } = require('eslint-define-config');
|
||||||
|
module.exports = defineConfig({
|
||||||
|
root: true,
|
||||||
|
env: {
|
||||||
|
browser: true,
|
||||||
|
node: true,
|
||||||
|
es6: true,
|
||||||
|
},
|
||||||
|
parser: 'vue-eslint-parser',
|
||||||
|
parserOptions: {
|
||||||
|
parser: '@typescript-eslint/parser',
|
||||||
|
ecmaVersion: 2020,
|
||||||
|
sourceType: 'module',
|
||||||
|
jsxPragma: 'React',
|
||||||
|
ecmaFeatures: {
|
||||||
|
jsx: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
extends: [
|
||||||
|
'plugin:vue/vue3-recommended',
|
||||||
|
'plugin:@typescript-eslint/recommended',
|
||||||
|
'prettier',
|
||||||
|
'plugin:prettier/recommended',
|
||||||
|
'plugin:jest/recommended',
|
||||||
|
],
|
||||||
|
rules: {
|
||||||
|
'vue/script-setup-uses-vars': 'error',
|
||||||
|
'@typescript-eslint/ban-ts-ignore': 'off',
|
||||||
|
'@typescript-eslint/explicit-function-return-type': 'off',
|
||||||
|
'@typescript-eslint/no-explicit-any': 'off',
|
||||||
|
'@typescript-eslint/no-var-requires': 'off',
|
||||||
|
'@typescript-eslint/no-empty-function': 'off',
|
||||||
|
'vue/custom-event-name-casing': 'off',
|
||||||
|
'no-use-before-define': 'off',
|
||||||
|
'@typescript-eslint/no-use-before-define': 'off',
|
||||||
|
'@typescript-eslint/ban-ts-comment': 'off',
|
||||||
|
'@typescript-eslint/ban-types': 'off',
|
||||||
|
'@typescript-eslint/no-non-null-assertion': 'off',
|
||||||
|
'@typescript-eslint/explicit-module-boundary-types': 'off',
|
||||||
|
'@typescript-eslint/no-unused-vars': [
|
||||||
|
'error',
|
||||||
|
{
|
||||||
|
argsIgnorePattern: '^_',
|
||||||
|
varsIgnorePattern: '^_',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
'no-unused-vars': [
|
||||||
|
'error',
|
||||||
|
{
|
||||||
|
argsIgnorePattern: '^_',
|
||||||
|
varsIgnorePattern: '^_',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
'space-before-function-paren': 'off',
|
||||||
|
|
||||||
|
'vue/attributes-order': 'off',
|
||||||
|
'vue/one-component-per-file': 'off',
|
||||||
|
'vue/html-closing-bracket-newline': 'off',
|
||||||
|
'vue/max-attributes-per-line': 'off',
|
||||||
|
'vue/multiline-html-element-content-newline': 'off',
|
||||||
|
'vue/singleline-html-element-content-newline': 'off',
|
||||||
|
'vue/attribute-hyphenation': 'off',
|
||||||
|
'vue/require-default-prop': 'off',
|
||||||
|
'vue/html-self-closing': [
|
||||||
|
'error',
|
||||||
|
{
|
||||||
|
html: {
|
||||||
|
void: 'always',
|
||||||
|
normal: 'never',
|
||||||
|
component: 'always',
|
||||||
|
},
|
||||||
|
svg: 'always',
|
||||||
|
math: 'always',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
});
|
||||||
+10
-2
@@ -6,11 +6,13 @@
|
|||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"build": "vue-tsc && vite build",
|
"build": "vue-tsc && vite build",
|
||||||
"preview": "vite preview"
|
"preview": "vite preview",
|
||||||
|
"lint:prettier": "prettier --write \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\""
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"dayjs": "^1.11.10",
|
"dayjs": "^1.11.10",
|
||||||
"path": "^0.12.7",
|
"path": "^0.12.7",
|
||||||
|
"prettier": "^3.1.0",
|
||||||
"vue": "^3.3.4",
|
"vue": "^3.3.4",
|
||||||
"vue3-seamless-scroll": "^2.0.1"
|
"vue3-seamless-scroll": "^2.0.1"
|
||||||
},
|
},
|
||||||
@@ -23,6 +25,12 @@
|
|||||||
"less": "^4.2.0",
|
"less": "^4.2.0",
|
||||||
"typescript": "^5.0.2",
|
"typescript": "^5.0.2",
|
||||||
"vite": "^4.4.5",
|
"vite": "^4.4.5",
|
||||||
"vue-tsc": "^1.8.5"
|
"vue-tsc": "^1.8.5",
|
||||||
|
"eslint": "^8.51.0",
|
||||||
|
"eslint-config-prettier": "^8.10.0",
|
||||||
|
"eslint-define-config": "^1.24.1",
|
||||||
|
"eslint-plugin-jest": "^27.4.2",
|
||||||
|
"eslint-plugin-prettier": "^4.2.1",
|
||||||
|
"eslint-plugin-vue": "^9.17.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 469 B |
Binary file not shown.
|
After Width: | Height: | Size: 469 B |
@@ -3,10 +3,12 @@ import {
|
|||||||
Form,
|
Form,
|
||||||
Input,
|
Input,
|
||||||
Button,
|
Button,
|
||||||
|
Radio,
|
||||||
} from 'ant-design-vue';
|
} from 'ant-design-vue';
|
||||||
|
|
||||||
export default function registerGlobComp(app: App) {
|
export default function registerGlobComp(app: App) {
|
||||||
app.use(Button)
|
app.use(Button)
|
||||||
.use(Form)
|
.use(Form)
|
||||||
.use(Input)
|
.use(Input)
|
||||||
|
.use(Radio)
|
||||||
}
|
}
|
||||||
@@ -1,82 +1,83 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="center-map">
|
<div class="center-map">
|
||||||
<div class="china-map-box">
|
<div class="china-map-box">
|
||||||
<div class="tab-list">
|
<div class="tab-list">
|
||||||
<div v-for="(item,i) in list" :class="[item.isChecked?'active':'']" class="tab" @click="changeTab(i)">
|
<div v-for="(item,i) in list" :class="[item.isChecked?'active':'']" class="tab" @click="changeTab(i)">
|
||||||
{{ item.name }}
|
{{ item.name }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-show="currentIndex==list.length-1" class="route-navigation">
|
<div v-show="currentIndex==list.length-1" class="route-navigation">
|
||||||
<a-form
|
<a-form
|
||||||
:model="formState"
|
:model="formState"
|
||||||
layout="horizontal"
|
layout="inline"
|
||||||
>
|
>
|
||||||
<a-form-item class="form-item-self" label="起点" name="user">
|
<a-form-item class="form-item-self" label="起点"
|
||||||
<a-input v-model:value="formState.user">
|
>
|
||||||
</a-input>
|
<a-input v-model:value="formState.user">
|
||||||
</a-form-item>
|
</a-input>
|
||||||
<a-form-item class="form-item-self" label="终点" name="user">
|
</a-form-item>
|
||||||
<a-input v-model:value="formState.user">
|
<a-form-item class="form-item-self" label="终点">
|
||||||
</a-input>
|
<a-input v-model:value="formState.password">
|
||||||
</a-form-item>
|
</a-input>
|
||||||
<a-form-item>
|
</a-form-item>
|
||||||
<a-button class="reset-btn">清空</a-button>
|
<a-form-item>
|
||||||
<a-button class="search-btn">路线规划</a-button>
|
<a-button class="reset-btn">清空</a-button>
|
||||||
</a-form-item>
|
<a-button class="search-btn">路线规划</a-button>
|
||||||
</a-form>
|
</a-form-item>
|
||||||
<div class="line-container">
|
</a-form>
|
||||||
<div class="has-data">
|
<div class="line-container">
|
||||||
<div class="line-title">
|
<div class="has-data">
|
||||||
全程2小时37分钟(172.15公里)
|
<div class="line-title">
|
||||||
</div>
|
全程2小时37分钟(172.15公里)
|
||||||
<div class="line-content">
|
</div>
|
||||||
<div class="start">起点</div>
|
<div class="line-content">
|
||||||
<div class="line-body">
|
<div class="start">起点</div>
|
||||||
<div class="line"></div>
|
<div class="line-body">
|
||||||
<div class="line-desc">
|
<div class="line"></div>
|
||||||
<p>向东行驶124米左转</p>
|
<div class="line-desc">
|
||||||
<p>向西北行驶92米左转</p>
|
<p>向东行驶124米左转</p>
|
||||||
<p>向西南行驶45米右转</p>
|
<p>向西北行驶92米左转</p>
|
||||||
<p>向西北行驶50米右转</p>
|
<p>向西南行驶45米右转</p>
|
||||||
<p>沿燕庆街向东北行驶157米左转</p>
|
<p>向西北行驶50米右转</p>
|
||||||
<p>向西北行驶47米左转</p>
|
<p>沿燕庆街向东北行驶157米左转</p>
|
||||||
<p>向西行驶97米右转进入主路</p>
|
<p>向西北行驶47米左转</p>
|
||||||
<p>沿新华东路向西行驶1.1千米右转进入主路</p>
|
<p>向西行驶97米右转进入主路</p>
|
||||||
<p>沿友爱街向北行驶5.9千米右转</p>
|
<p>沿新华东路向西行驶1.1千米右转进入主路</p>
|
||||||
<p>沿417乡道向东北行驶49米右转</p>
|
<p>沿友爱街向北行驶5.9千米右转</p>
|
||||||
<p>沿417乡道向东行驶1.1千米左转</p>
|
<p>沿417乡道向东北行驶49米右转</p>
|
||||||
<p>沿417乡道向北行驶8.3千米左转</p>
|
<p>沿417乡道向东行驶1.1千米左转</p>
|
||||||
<p>向西北行驶47米左转</p>
|
<p>沿417乡道向北行驶8.3千米左转</p>
|
||||||
<p>向西行驶97米右转进入主路</p>
|
<p>向西北行驶47米左转</p>
|
||||||
<p>沿新华东路向西行驶1.1千米右转进入主路</p>
|
<p>向西行驶97米右转进入主路</p>
|
||||||
<p>沿友爱街向北行驶5.9千米右转</p>
|
<p>沿新华东路向西行驶1.1千米右转进入主路</p>
|
||||||
<p>沿417乡道向东北行驶49米右转</p>
|
<p>沿友爱街向北行驶5.9千米右转</p>
|
||||||
<p>沿417乡道向东行驶1.1千米左转</p>
|
<p>沿417乡道向东北行驶49米右转</p>
|
||||||
<p>沿417乡道向北行驶8.3千米左转</p>
|
<p>沿417乡道向东行驶1.1千米左转</p>
|
||||||
<p>向西北行驶4.9千米到达目的地</p>
|
<p>沿417乡道向北行驶8.3千米左转</p>
|
||||||
</div>
|
<p>向西北行驶4.9千米到达目的地</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="end">终点</div>
|
</div>
|
||||||
</div>
|
<div class="end">终点</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-show="false" class="empty-data">
|
</div>
|
||||||
暂无数据
|
<div v-show="false" class="empty-data">
|
||||||
</div>
|
暂无数据
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="china-map-container"></div>
|
</div>
|
||||||
</div>
|
<div class="china-map-container"></div>
|
||||||
<div class="center-footer">
|
</div>
|
||||||
<div class="count-item">
|
<div class="center-footer">
|
||||||
<div class="num">1054</div>
|
<div class="count-item">
|
||||||
<div class="text">累计受理</div>
|
<div class="num">1054</div>
|
||||||
</div>
|
<div class="text">累计受理</div>
|
||||||
<div class="count-item">
|
</div>
|
||||||
<div class="num">1054</div>
|
<div class="count-item">
|
||||||
<div class="text">累计处置</div>
|
<div class="num">1054</div>
|
||||||
</div>
|
<div class="text">累计处置</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import {onMounted, ref} from 'vue'
|
import {onMounted, ref} from 'vue'
|
||||||
@@ -84,380 +85,380 @@ import * as echarts from 'echarts';
|
|||||||
import mapJson from '/@/components/chinaMap/json/new'
|
import mapJson from '/@/components/chinaMap/json/new'
|
||||||
|
|
||||||
const formState = ref({
|
const formState = ref({
|
||||||
user: '',
|
user: '',
|
||||||
password: '',
|
password: "",
|
||||||
});
|
});
|
||||||
const list = ref([
|
const list = ref([
|
||||||
{
|
{
|
||||||
name: '所有资源',
|
name: '所有资源',
|
||||||
isChecked: true
|
isChecked: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '油田医院',
|
name: '油田医院',
|
||||||
isChecked: false
|
isChecked: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '医疗点',
|
name: '医疗点',
|
||||||
isChecked: false
|
isChecked: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '救护车',
|
name: '救护车',
|
||||||
isChecked: false
|
isChecked: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '合作医院',
|
name: '合作医院',
|
||||||
isChecked: false
|
isChecked: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '地方医院',
|
name: '地方医院',
|
||||||
isChecked: false
|
isChecked: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '直升机',
|
name: '直升机',
|
||||||
isChecked: false
|
isChecked: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '急救路线',
|
name: '急救路线',
|
||||||
isChecked: false
|
isChecked: false
|
||||||
}
|
}
|
||||||
])
|
])
|
||||||
const currentIndex = ref(7);
|
const currentIndex = ref(0);
|
||||||
|
|
||||||
function changeTab(i) {
|
function changeTab(i) {
|
||||||
list.value = list.value.map(item => {
|
list.value = list.value.map(item => {
|
||||||
item.isChecked = false
|
item.isChecked = false
|
||||||
return item
|
return item
|
||||||
})
|
})
|
||||||
currentIndex.value = i
|
currentIndex.value = i
|
||||||
list.value[i].isChecked = true
|
list.value[i].isChecked = true
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
// initMap();
|
initMap();
|
||||||
})
|
})
|
||||||
|
|
||||||
function initMap() {
|
function initMap() {
|
||||||
const bgImg = 'https://img1.baidu.com/it/u=514808758,3636401112&fm=253&fmt=auto&app=120&f=JPEG?w=1139&h=751'
|
const bgImg = 'https://img1.baidu.com/it/u=514808758,3636401112&fm=253&fmt=auto&app=120&f=JPEG?w=1139&h=751'
|
||||||
let myChart = echarts.init(document.querySelector('.china-map-container'));
|
let myChart = echarts.init(document.querySelector('.china-map-container'));
|
||||||
echarts.registerMap('china', mapJson);
|
echarts.registerMap('china', mapJson);
|
||||||
let option = {
|
let option = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
show: false,
|
show: false,
|
||||||
formatter: "{b0}: {c0}"
|
formatter: "{b0}: {c0}"
|
||||||
},
|
},
|
||||||
grid: {
|
// grid: {
|
||||||
left: 20,
|
// left: 20,
|
||||||
right: 20,
|
// right: 20,
|
||||||
top: 20,
|
// top: 20,
|
||||||
bottom: 20
|
// bottom: 20
|
||||||
},
|
// },
|
||||||
geo: [
|
geo: [
|
||||||
{
|
{
|
||||||
map: 'china',
|
map: 'china',
|
||||||
zlevel: 3,
|
zlevel: 3,
|
||||||
aspectScale: .8, //长宽比
|
aspectScale: .75, //长宽比
|
||||||
zoom: 1.1,
|
zoom: 1.5,
|
||||||
roam: false,
|
roam: false,
|
||||||
top: '80',
|
top: '165',
|
||||||
left: 'center',
|
left: 'center',
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
areaColor: "#173a58",
|
areaColor: "#173a58",
|
||||||
shadowColor: "#173a58",
|
shadowColor: "#173a58",
|
||||||
shadowOffsetX: 0,
|
shadowOffsetX: 0,
|
||||||
shadowOffsetY: 5,
|
shadowOffsetY: 5,
|
||||||
borderWidth: 4,//外部边框
|
borderWidth: 4,//外部边框
|
||||||
borderColor: "#64cafc",
|
borderColor: "#64cafc",
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
map: 'china',
|
map: 'china',
|
||||||
zlevel: 2,
|
zlevel: 2,
|
||||||
aspectScale: .8, //长宽比
|
aspectScale: .75, //长宽比
|
||||||
zoom: 1.1,
|
zoom: 1.5,
|
||||||
roam: false,
|
roam: false,
|
||||||
top: '80',
|
top: '165',
|
||||||
left: 'center',
|
left: 'center',
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
areaColor: "#1e2c38",
|
areaColor: "#1e2c38",
|
||||||
shadowColor: "#1e2c38",
|
shadowColor: "#1e2c38",
|
||||||
shadowOffsetX: 0,
|
shadowOffsetX: 0,
|
||||||
shadowOffsetY: 10,
|
shadowOffsetY: 10,
|
||||||
borderWidth: 4,//外部边框
|
borderWidth: 4,//外部边框
|
||||||
borderColor: "#384d61",
|
borderColor: "#384d61",
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
map: 'china',// 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
|
map: 'china',// 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
|
||||||
name: '中国地图',
|
name: '中国地图',
|
||||||
type: 'map',
|
type: 'map',
|
||||||
zlevel: 9,
|
zlevel: 9,
|
||||||
zoom: 1.1,
|
zoom: 1.5,
|
||||||
aspectScale: .8, //长宽比
|
aspectScale: .75, //长宽比
|
||||||
hoverAnimation: false,
|
hoverAnimation: false,
|
||||||
silent: false,
|
silent: false,
|
||||||
top: '80',
|
top: '165',
|
||||||
left: 'center',
|
left: 'center',
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
padding: [0, 10],
|
padding: [0, 10],
|
||||||
height: 31,
|
height: 31,
|
||||||
lineHeight: 31,
|
lineHeight: 31,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#ddd",
|
color: "#ddd",
|
||||||
fontSize: 13,
|
fontSize: 13,
|
||||||
fontStyle: "italic",
|
fontStyle: "italic",
|
||||||
fontWeight: "bold",
|
fontWeight: "bold",
|
||||||
marginLeft: 5
|
marginLeft: 5
|
||||||
},
|
},
|
||||||
emphasis: {
|
emphasis: {
|
||||||
// areaColor: '#2074ed',//鼠标悬浮色
|
// areaColor: '#2074ed',//鼠标悬浮色
|
||||||
areaColor: {
|
areaColor: {
|
||||||
type: 'pattern',
|
type: 'pattern',
|
||||||
image: bgImg,
|
image: bgImg,
|
||||||
repeat: 'no-repeat'
|
repeat: 'no-repeat'
|
||||||
},
|
},
|
||||||
borderWidth: 0,
|
borderWidth: 0,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
// 给地图添加背景图片
|
// 给地图添加背景图片
|
||||||
areaColor: {
|
areaColor: {
|
||||||
type: 'pattern',
|
type: 'pattern',
|
||||||
image: bgImg,
|
image: bgImg,
|
||||||
repeat: 'no-repeat'
|
repeat: 'no-repeat'
|
||||||
},
|
},
|
||||||
borderColor: "#64cafc",
|
borderColor: "#64cafc",
|
||||||
borderWidth: 1,//内部边框
|
borderWidth: 1,//内部边框
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "scatter",
|
type: "scatter",
|
||||||
zlevel: 100,
|
zlevel: 100,
|
||||||
coordinateSystem: "geo",
|
coordinateSystem: "geo",
|
||||||
//自定义图片的 位置（lng, lat）
|
//自定义图片的 位置（lng, lat）
|
||||||
data: [{name: '西安', value: ['108.88', '34.40'], id: 'xian'}],
|
data: [{name: '西安', value: ['108.88', '34.40'], id: 'xian'}],
|
||||||
//自定义图片的 大小
|
//自定义图片的 大小
|
||||||
symbolSize: [50, 50],
|
symbolSize: [50, 50],
|
||||||
//自定义图片的 路径
|
//自定义图片的 路径
|
||||||
// symbol: 'image://http://192.168.1.7:9200/src/assets/img/tree.png', // 图片 URL
|
// symbol: 'image://http://192.168.1.7:9200/src/assets/img/tree.png', // 图片 URL
|
||||||
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://https://img2.baidu.com/it/u=1568770988,2090980470&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=567', // 图片 URL
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "scatter",
|
type: "scatter",
|
||||||
zlevel: 100,
|
zlevel: 100,
|
||||||
coordinateSystem: "geo",
|
coordinateSystem: "geo",
|
||||||
//自定义图片的 位置（lng, lat）
|
//自定义图片的 位置（lng, lat）
|
||||||
data: [{name: '太原', value: [112.55, 37.98], id: 'taiyuan'}],
|
data: [{name: '太原', value: [112.55, 37.98], id: 'taiyuan'}],
|
||||||
//自定义图片的 大小
|
//自定义图片的 大小
|
||||||
symbolSize: [50, 50],
|
symbolSize: [50, 50],
|
||||||
//自定义图片的 路径
|
//自定义图片的 路径
|
||||||
// symbol: 'image://http://192.168.1.7:9200/src/assets/img/tree.png', // 图片 URL
|
// symbol: 'image://http://192.168.1.7:9200/src/assets/img/tree.png', // 图片 URL
|
||||||
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://https://img2.baidu.com/it/u=1568770988,2090980470&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=567', // 图片 URL
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
|
||||||
};
|
};
|
||||||
myChart.setOption(option);
|
myChart.setOption(option);
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.center-map {
|
.center-map {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-content: space-between;
|
align-content: space-between;
|
||||||
|
|
||||||
.china-map-box {
|
.china-map-box {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-list {
|
.tab-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
.tab {
|
.tab {
|
||||||
width: calc(100% / 8);
|
width: calc(100% / 8);
|
||||||
height: 38px;
|
height: 38px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
color: #29F1FA;
|
color: #29F1FA;
|
||||||
background: url("/@/assets/img/tab-default.png") no-repeat;
|
background: url("/@/assets/img/tab-default.png") no-repeat;
|
||||||
background-size: 100%;
|
background-size: 100%;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.3s;
|
transition: all 0.3s;
|
||||||
//background-position: -5px -10px;
|
//background-position: -5px -10px;
|
||||||
&.active {
|
&.active {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background: url("/@/assets/img/tab-active.png") no-repeat;
|
background: url("/@/assets/img/tab-active.png") no-repeat;
|
||||||
background-size: 100%;
|
background-size: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.route-navigation {
|
.route-navigation {
|
||||||
margin: 12px 0;
|
margin: 12px 0;
|
||||||
//height: 46px;
|
height: 46px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background: #002E64;
|
background: #002E64;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
position: relative;
|
position: relative;
|
||||||
transition: all 0.3s;
|
transition: all 0.3s;
|
||||||
|
|
||||||
:deep(.form-item-self) {
|
:deep(.form-item-self) {
|
||||||
label {
|
label {
|
||||||
color: #29F1FA;
|
color: #29F1FA;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-input {
|
.ant-input {
|
||||||
width: 280px;
|
width: 280px;
|
||||||
color: #d6d9e0;
|
color: #d6d9e0;
|
||||||
background: #2A4164;
|
background: #2A4164;
|
||||||
border-radius: 2px 2px 2px 2px;
|
border-radius: 2px 2px 2px 2px;
|
||||||
border: 1px solid #1B7EF2;
|
border: 1px solid #1B7EF2;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.reset-btn {
|
.reset-btn {
|
||||||
width: 64px;
|
width: 64px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
color: #45A2FF;
|
color: #45A2FF;
|
||||||
background: #002E64;
|
background: #002E64;
|
||||||
border: 1px solid #45A2FF;
|
border: 1px solid #45A2FF;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-btn {
|
.search-btn {
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
width: 88px;
|
width: 88px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
color: #EFEFEF;
|
color: #EFEFEF;
|
||||||
background: #45A2FF;
|
background: #45A2FF;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
border-color: #45A2FF;
|
border-color: #45A2FF;
|
||||||
}
|
}
|
||||||
|
|
||||||
.line-container {
|
.line-container {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
top: 54px;
|
top: 54px;
|
||||||
width: 288px;
|
width: 288px;
|
||||||
padding: 9px 18px;
|
padding: 9px 18px;
|
||||||
min-height: 200px;
|
min-height: 200px;
|
||||||
max-height: 473px;
|
max-height: 473px;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
background: #2A4164;
|
background: #2A4164;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
border: 1px solid #1B7EF2;
|
border: 1px solid #1B7EF2;
|
||||||
|
|
||||||
.line-title {
|
.line-title {
|
||||||
margin-bottom: 9px;
|
margin-bottom: 9px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: rgba(255, 255, 255, 0.8);
|
color: rgba(255, 255, 255, 0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
.line-content {
|
.line-content {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
|
||||||
.start {
|
.start {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
content: '起';
|
content: '起';
|
||||||
color: #fff;
|
color: #fff;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
margin-right: 7px;
|
margin-right: 7px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: #1478F5;
|
background: #1478F5;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.end {
|
.end {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
content: '终';
|
content: '终';
|
||||||
color: #fff;
|
color: #fff;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
margin-right: 7px;
|
margin-right: 7px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: #1478F5;
|
background: #1478F5;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.line-body {
|
.line-body {
|
||||||
display: flex;
|
display: flex;
|
||||||
//max-height: 370px;
|
//max-height: 370px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.line {
|
.line {
|
||||||
width: 1px;
|
width: 1px;
|
||||||
//max-height: 370px;
|
//max-height: 370px;
|
||||||
background-color: #1478f5;
|
background-color: #1478f5;
|
||||||
margin: 5px 19px 5px 8px;
|
margin: 5px 19px 5px 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.line-sesc {
|
.line-sesc {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.china-map-container {
|
.china-map-container {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
//border: 1px solid red;
|
//border: 1px solid red;
|
||||||
}
|
}
|
||||||
|
|
||||||
.center-footer {
|
.center-footer {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
|
|
||||||
.count-item {
|
.count-item {
|
||||||
width: 340px;
|
width: 340px;
|
||||||
height: 80px;
|
height: 80px;
|
||||||
display: flex;
|
display: flex;
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background: #00071B;
|
background: #00071B;
|
||||||
box-shadow: inset 0 0 40px 0 #1B7EF2;
|
box-shadow: inset 0 0 40px 0 #1B7EF2;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
|
||||||
.num {
|
.num {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text {
|
.text {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
+2
-1
@@ -3,6 +3,7 @@ import App from './App.vue';
|
|||||||
import './assets/less/index.less';
|
import './assets/less/index.less';
|
||||||
import('ant-design-vue/dist/antd.less');
|
import('ant-design-vue/dist/antd.less');
|
||||||
import registerGlobComp from './assets/ts/antd.ts'
|
import registerGlobComp from './assets/ts/antd.ts'
|
||||||
const app=createApp(App)
|
|
||||||
|
const app = createApp(App)
|
||||||
registerGlobComp(app);
|
registerGlobComp(app);
|
||||||
app.mount('#app')
|
app.mount('#app')
|
||||||
|
|||||||
Reference in New Issue
Block a user