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-11-27 10:38:51 +08:00
parent 29cd60a2f2
commit 6a2d442c79
19 changed files with 53948 additions and 202408 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.eslintrc.js
+5 -3
View File
@@ -1,6 +1,7 @@
// @ts-check // @ts-check
const { defineConfig } = require('eslint-define-config'); import {defineConfig} from 'eslint-define-config'
module.exports = defineConfig({ // const {defineConfig} = require('eslint-define-config');
export default {
root: true, root: true,
env: { env: {
browser: true, browser: true,
@@ -25,6 +26,7 @@ module.exports = defineConfig({
'plugin:jest/recommended', 'plugin:jest/recommended',
], ],
rules: { rules: {
'prettier/prettier': 'error',
'vue/script-setup-uses-vars': 'error', 'vue/script-setup-uses-vars': 'error',
'@typescript-eslint/ban-ts-ignore': 'off', '@typescript-eslint/ban-ts-ignore': 'off',
'@typescript-eslint/explicit-function-return-type': 'off', '@typescript-eslint/explicit-function-return-type': 'off',
@@ -75,4 +77,4 @@ module.exports = defineConfig({
}, },
], ],
}, },
}); }
index.html
+8 -1
View File
@@ -4,7 +4,14 @@
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<link rel="icon" type="image/svg+xml" href="/vite.svg"/> <link rel="icon" type="image/svg+xml" href="/vite.svg"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Vite + Vue + TS</title> <title>应急就医服务中心</title>
<!-- 全局配置 -->
<script>
window._CONFIG = {};
window._AMapSecurityConfig = {
securityJsCode: "1b3b86585c863d22db1e7f7636a9e495",
}
</script>
</head> </head>
<style> <style>
html, body, #app { html, body, #app {
package.json
+1
View File
@@ -14,6 +14,7 @@
"path": "^0.12.7", "path": "^0.12.7",
"prettier": "^3.1.0", "prettier": "^3.1.0",
"vue": "^3.3.4", "vue": "^3.3.4",
"@amap/amap-jsapi-loader": "^1.0.1",
"vue-seamless-scroll": "^1.1.23", "vue-seamless-scroll": "^1.1.23",
"vue3-seamless-scroll": "^2.0.1" "vue3-seamless-scroll": "^2.0.1"
}, },
prettier.config.js
+1 -1
View File
@@ -1,4 +1,4 @@
module.exports = { export default {
printWidth: 150, printWidth: 150,
tabWidth: 4, tabWidth: 4,
useTabs: false, useTabs: false,
src/App.vue
+3 -5
View File
@@ -1,11 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import index from './views/index.vue' import index from './views/index.vue';
</script> </script>
<template> <template>
<index /> <index />
</template> </template>
<style lang="less" src="./assets/less/index.less"> <style lang="less" src="./assets/less/index.less"></style>
</style> <style lang="less" scoped></style>
<style lang="less" scoped>
</style>
src/assets/less/index.less
+4 -4
View File
@@ -10,7 +10,7 @@
} }
.select { .select {
color: #45A2FF; color: #45a2ff;
position: relative; position: relative;
&:after { &:after {
@@ -21,13 +21,13 @@
left: 8px; left: 8px;
bottom: -14px; bottom: -14px;
height: 8px; height: 8px;
background: url("../images/light.png") no-repeat; background: url('../images/light.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
} }
.unSelect { .unSelect {
color: #A3A4A4; color: #a3a4a4;
} }
} }
*::-webkit-scrollbar { *::-webkit-scrollbar {
@@ -47,5 +47,5 @@
height: 6px; height: 6px;
border-radius: 25px; border-radius: 25px;
background-clip: padding-box; background-clip: padding-box;
background-color: rgba(0, 0, 0, 0.30); background-color: rgba(0, 0, 0, 0.3);
} }
src/components/body-d-left/oneL.vue
+19 -12
View File
@@ -3,7 +3,13 @@
<public-title title="服务详情数据" /> <public-title title="服务详情数据" />
<div class="inner"> <div class="inner">
<div class="type-time"> <div class="type-time">
<span :class="selectIndex===index?'select':'unSelect'" v-for="(item,index) in typeTime" :key="index" @click="handleSelect(index)">{{item.name}}</span> <span
:class="selectIndex === index ? 'select' : 'unSelect'"
v-for="(item, index) in typeTime"
:key="index"
@click="handleSelect(index)"
>{{ item.name }}</span
>
</div> </div>
<div class="server-container"> <div class="server-container">
<div class="server-item" v-for="(item, index) in dataLists" :key="index"> <div class="server-item" v-for="(item, index) in dataLists" :key="index">
@@ -16,12 +22,13 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref } from 'vue';
import PublicTitle from "../publicTitle.vue"; import PublicTitle from '../publicTitle.vue';
const typeTime = ref([ const typeTime = ref([
{ {
name: '全部', name: '全部',
value: 'all', value: 'all',
},{ },
{
name: '本年', name: '本年',
value: 'year', value: 'year',
}, },
@@ -32,27 +39,27 @@ const typeTime = ref([
{ {
name: '本周', name: '本周',
value: 'week', value: 'week',
} },
]) ]);
const dataLists = ref([ const dataLists = ref([
{ {
title: '最新呼入电话', title: '最新呼入电话',
iphone:'18394578789' iphone: '18394578789',
}, },
{ {
title: '最新呼入电话', title: '最新呼入电话',
iphone:'18394578789' iphone: '18394578789',
}, },
{ {
title: '最新呼入电话', title: '最新呼入电话',
iphone:'18394578789' iphone: '18394578789',
}, },
{ {
title: '最新呼入电话', title: '最新呼入电话',
iphone:'18394578789' iphone: '18394578789',
}, },
]) ]);
const selectIndex = ref(0) const selectIndex = ref(0);
function handleSelect(index: number) { function handleSelect(index: number) {
selectIndex.value = index; selectIndex.value = index;
@@ -62,7 +69,7 @@ function handleSelect(index:number){
.inner { .inner {
height: calc(100% - 40px); height: calc(100% - 40px);
.server-container { .server-container {
color: #A3A4A4; color: #a3a4a4;
padding-top: 4%; padding-top: 4%;
height: 88%; height: 88%;
display: grid; display: grid;
src/components/body-d-left/threeL.vue
+22 -11
View File
@@ -3,7 +3,13 @@
<public-title title="体检数据" /> <public-title title="体检数据" />
<div class="inner"> <div class="inner">
<div class="type-time"> <div class="type-time">
<span :class="selectIndex===index?'select':'unSelect'" v-for="(item,index) in typeTime" :key="index" @click="handleSelect(index)">{{item.name}}</span> <span
:class="selectIndex === index ? 'select' : 'unSelect'"
v-for="(item, index) in typeTime"
:key="index"
@click="handleSelect(index)"
>{{ item.name }}</span
>
</div> </div>
<div class="physical-container"> <div class="physical-container">
<div class="physical-item"> <div class="physical-item">
@@ -36,12 +42,13 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref } from 'vue';
import PublicTitle from "../publicTitle.vue"; import PublicTitle from '../publicTitle.vue';
const typeTime = ref([ const typeTime = ref([
{ {
name: '全部', name: '全部',
value: 'all', value: 'all',
},{ },
{
name: '本年', name: '本年',
value: 'year', value: 'year',
}, },
@@ -52,10 +59,10 @@ const typeTime = ref([
{ {
name: '本周', name: '本周',
value: 'week', value: 'week',
} },
]) ]);
const physical = ref(); const physical = ref();
const selectIndex = ref(0) const selectIndex = ref(0);
function handleSelect(index: number) { function handleSelect(index: number) {
selectIndex.value = index; selectIndex.value = index;
} }
@@ -73,7 +80,7 @@ function handleSelect(index:number){
.physical-item { .physical-item {
width: 33%; width: 33%;
height: 46%; height: 46%;
color: #FFFFFF; color: #ffffff;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
span:nth-child(1) { span:nth-child(1) {
@@ -85,12 +92,16 @@ function handleSelect(index:number){
font-size: 22px; font-size: 22px;
} }
} }
.physical-item:nth-child(1),.physical-item:nth-child(2),.physical-item:nth-child(3){ .physical-item:nth-child(1),
background: url("../../assets/images/physical-top.png") no-repeat; .physical-item:nth-child(2),
.physical-item:nth-child(3) {
background: url('../../assets/images/physical-top.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
.physical-item:nth-child(4),.physical-item:nth-child(5),.physical-item:nth-child(6){ .physical-item:nth-child(4),
background: url("../../assets/images/physical-bottom.png") no-repeat; .physical-item:nth-child(5),
.physical-item:nth-child(6) {
background: url('../../assets/images/physical-bottom.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
} }
src/components/body-d-left/twoL.vue
+28 -24
View File
@@ -4,7 +4,13 @@
<div class="inner"> <div class="inner">
<div class=""> <div class="">
<div class="type-time"> <div class="type-time">
<span :class="selectIndex===index?'select':'unSelect'" v-for="(item,index) in typeTime" :key="index" @click="handleSelect(index)">{{item.name}}</span> <span
:class="selectIndex === index ? 'select' : 'unSelect'"
v-for="(item, index) in typeTime"
:key="index"
@click="handleSelect(index)"
>{{ item.name }}</span
>
</div> </div>
<div>全部数据</div> <div>全部数据</div>
</div> </div>
@@ -14,33 +20,34 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from 'vue'; import { ref, onMounted } from 'vue';
import PublicTitle from "../publicTitle.vue"; import PublicTitle from '../publicTitle.vue';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
const typeTime = ref([ const typeTime = ref([
{ {
name: '男', name: '男',
value: 'man', value: 'man',
},{ },
{
name: '女', name: '女',
value: 'women', value: 'women',
}, },
]) ]);
const selectIndex = ref(0) const selectIndex = ref(0);
const chiefChart = ref<HTMLElement>() const chiefChart = ref<HTMLElement>();
onMounted(() => { onMounted(() => {
let xdata = ['创伤类', '心血管', '心神类', '呼吸类', '消化类', '肿瘤类', '其他']; let xdata = ['创伤类', '心血管', '心神类', '呼吸类', '消化类', '肿瘤类', '其他'];
let ydata = [120, 200, 150, 80, 70, 110, 130]; let ydata = [120, 200, 150, 80, 70, 110, 130];
initChart(xdata,ydata) initChart(xdata, ydata);
}) });
function initChart(xData, ydata) { function initChart(xData, ydata) {
let myChart = echarts.init(chiefChart.value) let myChart = echarts.init(chiefChart.value);
let options = { let options = {
grid: { grid: {
top: '10%', top: '10%',
left: '8%', left: '8%',
right: '8%', right: '8%',
bottom: '20%' bottom: '20%',
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
@@ -60,9 +67,9 @@ function initChart(xData,ydata){
show: true, show: true,
lineStyle: { lineStyle: {
type: 'dashed', type: 'dashed',
color:'rgba(217, 231, 255, 0.2)' color: 'rgba(217, 231, 255, 0.2)',
} },
} },
}, },
series: [ series: [
{ {
@@ -70,18 +77,15 @@ function initChart(xData,ydata){
type: 'bar', type: 'bar',
barWidth: '20%', barWidth: '20%',
itemStyle: { itemStyle: {
color:new echarts.graphic.LinearGradient( color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
0, 0, 0, 1,
[
{ offset: 0, color: '#008CFF' }, { offset: 0, color: '#008CFF' },
{ offset: 1, color: '#33CBFE' } { offset: 1, color: '#33CBFE' },
] ]),
) },
} },
} ],
] };
} myChart.setOption(options);
myChart.setOption(options)
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
myChart.resize(); myChart.resize();
}); });
src/components/body-d-right/oneR.vue
+7 -7
View File
@@ -22,9 +22,9 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref } from 'vue';
import PublicTitle from "../publicTitle.vue"; import PublicTitle from '../publicTitle.vue';
import Dialog from '../dialog/Dialog.vue'; import Dialog from '../dialog/Dialog.vue';
import { Vue3SeamlessScroll } from "vue3-seamless-scroll"; import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
const policeLists = ref([ const policeLists = ref([
{ {
name: '陈天宇', name: '陈天宇',
@@ -55,15 +55,15 @@
name: '陈天宇', name: '陈天宇',
abnormal: '压力异常(82)', abnormal: '压力异常(82)',
time: '2023-8-25', time: '2023-8-25',
} },
]) ]);
const open = ref<boolean>(false); const open = ref<boolean>(false);
function handleDialog() { function handleDialog() {
open.value = true open.value = true;
} }
function handleClose() { function handleClose() {
open.value = false open.value = false;
} }
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@@ -94,7 +94,7 @@
display: inline-block; display: inline-block;
width: 18px; width: 18px;
height: 18px; height: 18px;
background: url("../../assets/images/terminal.png") no-repeat; background: url('../../assets/images/terminal.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
} }
src/components/body-d-right/threeR.vue
+2 -6
View File
@@ -1,18 +1,14 @@
<template> <template>
<div> <div>
<public-title title="基层医疗点远程会诊" /> <public-title title="基层医疗点远程会诊" />
<div class="inner"> <div class="inner"> </div>
</div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import PublicTitle from '../publicTitle.vue';
import PublicTitle from "../publicTitle.vue";
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.inner { .inner {
height: calc(100% - 40px); height: calc(100% - 40px);
} }
</style> </style>
src/components/body-d-right/twoR.vue
+13 -13
View File
@@ -7,16 +7,16 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from 'vue'; import { ref, onMounted } from 'vue';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import PublicTitle from "../publicTitle.vue"; import PublicTitle from '../publicTitle.vue';
const healthChart = ref<HTMLElement>() const healthChart = ref<HTMLElement>();
onMounted(() => { onMounted(() => {
let xdata = ['创伤类', '心血管', '心神类', '呼吸类', '消化类', '肿瘤类', '其他']; let xdata = ['创伤类', '心血管', '心神类', '呼吸类', '消化类', '肿瘤类', '其他'];
let ydata = [120, 200, 150, 80, 70, 110, 130]; let ydata = [120, 200, 150, 80, 70, 110, 130];
initChart(xdata,ydata) initChart(xdata, ydata);
}) });
function initChart(xData, ydata) { function initChart(xData, ydata) {
let myChart = echarts.init(healthChart.value) let myChart = echarts.init(healthChart.value);
let options = { let options = {
title: { title: {
text: '总人数\n', text: '总人数\n',
@@ -34,7 +34,7 @@ function initChart(xData,ydata){
}, },
color: ['#0098FA', '#0CD9B5', '#3B72AD'], color: ['#0098FA', '#0CD9B5', '#3B72AD'],
tooltip: { tooltip: {
trigger: 'item' trigger: 'item',
}, },
legend: { legend: {
bottom: '0', bottom: '0',
@@ -55,20 +55,20 @@ function initChart(xData,ydata){
position: 'inner', position: 'inner',
formatter: '{d}%', formatter: '{d}%',
color: '#ffffff', color: '#ffffff',
fontSize:16 fontSize: 16,
}, },
labelLine: { labelLine: {
show: false show: false,
}, },
data: [ data: [
{ value: 1048, name: '高危人数' }, { value: 1048, name: '高危人数' },
{ value: 735, name: '中危人数' }, { value: 735, name: '中危人数' },
{ value: 580, name: '可控人数' }, { value: 580, name: '可控人数' },
] ],
} },
] ],
} };
myChart.setOption(options) myChart.setOption(options);
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
myChart.resize(); myChart.resize();
}); });
src/components/chinaMap/chinaHooks.ts
+45
View File
@@ -0,0 +1,45 @@
export const tabList = [
{
name: '所有资源',
},
{
name: '油田医院',
},
{
name: '医疗点',
},
{
name: '救护车',
},
{
name: '合作医院',
},
{
name: '地方医院',
},
{
name: '直升机',
},
{
name: '急救路线',
}
]
export const mapIcon1 = new URL('/@/assets/img/mapIcon1.png', import.meta.url).href
export const mapIcon2 = new URL('/@/assets/img/mapIcon2.png', import.meta.url).href
export const mapIcon3 = new URL('/@/assets/img/mapIcon3.png', import.meta.url).href
export const mapIcon4 = new URL('/@/assets/img/mapIcon4.png', import.meta.url).href
export const mapIcon5 = new URL('/@/assets/img/mapIcon5.png', import.meta.url).href
export const mapIcon6 = new URL('/@/assets/img/mapIcon6.png', import.meta.url).href
export const legend1 = new URL('/@/assets/img/legend1.png', import.meta.url).href
export const legend2 = new URL('/@/assets/img/legend2.png', import.meta.url).href
export const legend3 = new URL('/@/assets/img/legend3.png', import.meta.url).href
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: '油田医院'}, {img: legend2, text: '医疗点'}, {
img: legend3,
text: '救护车'
}, {img: legend4, text: '合作医院'}, {img: legend5, text: '地方医院'}, {img: legend6, text: '直升机'}]
src/components/chinaMap/chinaMap.vue
+72 -140
View File
@@ -7,18 +7,12 @@
</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" layout="inline">
:model="formState" <a-form-item class="form-item-self" label="起点">
layout="inline" <a-input v-model:value="formState.user"></a-input>
>
<a-form-item class="form-item-self" label="起点"
>
<a-input v-model:value="formState.user">
</a-input>
</a-form-item> </a-form-item>
<a-form-item class="form-item-self" label="终点"> <a-form-item class="form-item-self" label="终点">
<a-input v-model:value="formState.password"> <a-input v-model:value="formState.password"></a-input>
</a-input>
</a-form-item> </a-form-item>
<a-form-item> <a-form-item>
<a-button class="reset-btn">清空</a-button> <a-button class="reset-btn">清空</a-button>
@@ -27,9 +21,7 @@
</a-form> </a-form>
<div class="line-container"> <div class="line-container">
<div class="has-data"> <div class="has-data">
<div class="line-title"> <div class="line-title"> 全程2小时37分钟(172.15公里)</div>
全程2小时37分钟(172.15公里)
</div>
<div class="line-content"> <div class="line-content">
<div class="start">起点</div> <div class="start">起点</div>
<div class="line-body"> <div class="line-body">
@@ -60,16 +52,14 @@
<div class="end">终点</div> <div class="end">终点</div>
</div> </div>
</div> </div>
<div v-show="false" class="empty-data"> <div v-show="false" class="empty-data"> 暂无数据</div>
暂无数据
</div>
</div> </div>
</div> </div>
<div class="china-map-container"></div> <div class="china-map-container"></div>
<div class="map-legend"> <div class="map-legend">
<div v-for="(item, i) in legendList" :key="i" class="legend-item"> <div v-for="(item, i) in legendList" :key="i" class="legend-item">
<div><img :src="item.img" alt="" class="legend-img"> {{ item.text }}</div> <div><img :src="item.img" alt="" class="legend-img" /> {{ item.text }}</div>
</div> </div>
</div> </div>
</div> </div>
@@ -86,165 +76,111 @@
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {onMounted, ref} from 'vue' import { onMounted, ref } from 'vue';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import mapJson from '/@/components/chinaMap/json/c' import mapJson from '/@/components/chinaMap/json/c';
import { tabList, mapIcons, legendList } from './chinaHooks.ts';
// import bgImg from '/@/assets/images/china-textur.png' const bgImg = new URL('/@/assets/images/china-textur.jpg', import.meta.url).href;
const bgImg = new URL('/@/assets/images/china-textur.jpg', import.meta.url).href
const mapIcon1 = new URL('/@/assets/img/mapIcon1.png', import.meta.url).href
const mapIcon2 = new URL('/@/assets/img/mapIcon2.png', import.meta.url).href
const mapIcon3 = new URL('/@/assets/img/mapIcon3.png', import.meta.url).href
const mapIcon4 = new URL('/@/assets/img/mapIcon4.png', import.meta.url).href
const mapIcon5 = new URL('/@/assets/img/mapIcon5.png', import.meta.url).href
const mapIcon6 = new URL('/@/assets/img/mapIcon6.png', import.meta.url).href
const legend1 = new URL('/@/assets/img/legend1.png', import.meta.url).href
const legend2 = new URL('/@/assets/img/legend2.png', import.meta.url).href
const legend3 = new URL('/@/assets/img/legend3.png', import.meta.url).href
const legend4 = new URL('/@/assets/img/legend4.png', import.meta.url).href
const legend5 = new URL('/@/assets/img/legend5.png', import.meta.url).href
const legend6 = new URL('/@/assets/img/legend6.png', import.meta.url).href
const mapIcons = [mapIcon1, mapIcon2, mapIcon3, mapIcon4, mapIcon5, mapIcon6]
const legendList = [{img: legend1, text: '油田医院'}, {img: legend2, text: '医疗点'}, {
img: legend3,
text: '救护车'
}, {img: legend4, text: '合作医院'}, {img: legend5, text: '地方医院'}, {img: legend6, text: '直升机'}]
const formState = ref({ const formState = ref({
user: '', user: '',
password: "", password: '',
}); });
const list = ref([ const list = ref(tabList);
{
name: '所有资源',
isChecked: true
},
{
name: '油田医院',
isChecked: false
},
{
name: '医疗点',
isChecked: false
},
{
name: '救护车',
isChecked: false
},
{
name: '合作医院',
isChecked: false
},
{
name: '地方医院',
isChecked: false
},
{
name: '直升机',
isChecked: false
},
{
name: '急救路线',
isChecked: false
}
])
const currentIndex = ref(0); const currentIndex = ref(0);
const icons = ref([{ const icons = ref([
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: [25, 63], symbolSize: [25, 63],
//自定义图片的 路径 //自定义图片的 路径
// 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
symbol: 'image://' + mapIcon1, // 图片 URL symbol: 'image://' + mapIcons[0], // 图片 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: [25, 63], symbolSize: [25, 63],
symbol: 'image://' + mapIcon2, // 图片 URL symbol: 'image://' + mapIcons[1], // 图片 URL
}]) },
]);
function changeTab(i) { function changeTab(i) {
let x = Math.random() + 3 - Math.random() - i; let x = Math.random() + 3 - Math.random() - i;
let y = Math.random() - 2 + Math.random() + i let y = Math.random() - 2 + Math.random() + i;
const o = { const o = {
type: "scatter", type: 'scatter',
zlevel: 100, zlevel: 100,
coordinateSystem: "geo", coordinateSystem: 'geo',
//自定义图片的 位置（lng, lat） //自定义图片的 位置（lng, lat）
data: [{ name: '太原', value: [112.55 + Math.random() + x, 37.98 + Math.random() + y], id: 'taiyuan' }], data: [{ name: '太原', value: [112.55 + Math.random() + x, 37.98 + Math.random() + y], id: 'taiyuan' }],
//自定义图片的 大小 //自定义图片的 大小
symbolSize: [25, 63], symbolSize: [25, 63],
symbol: 'image://' + mapIcons[Math.floor(Math.random() * 6)], // 图片 URL symbol: 'image://' + mapIcons[Math.floor(Math.random() * 6)], // 图片 URL
} };
icons.value = [] icons.value = [];
icons.value.push(o) icons.value.push(o);
currentIndex.value = i currentIndex.value = i;
list.value = list.value.map(item => {
item.isChecked = false
return item
})
let myChart = echarts.init(document.querySelector('.china-map-container')); let myChart = echarts.init(document.querySelector('.china-map-container'));
initMap(myChart) initMap(myChart);
} }
onMounted(() => { onMounted(() => {
console.log('reload') console.log('reload');
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);
initMap(myChart); initMap(myChart);
}) });
function initMap(myChart) { function initMap(myChart) {
let option = { let option = {
tooltip: { tooltip: {
show: false, show: false,
formatter: "{b0}: {c0}" formatter: '{b0}: {c0}',
}, },
geo: [ geo: [
{ {
map: 'china', map: 'china',
zlevel: 3, zlevel: 3,
aspectScale: .8, //长宽比 aspectScale: 0.8, //长宽比
zoom: 1.1, zoom: 1.1,
roam: false, roam: false,
top: '60', top: '60',
left: 'center', left: 'center',
itemStyle: { itemStyle: {
areaColor: "#173a58", areaColor: '#173a58',
shadowColor: "#173a58", shadowColor: '#173a58',
shadowOffsetX: 0, shadowOffsetX: 0,
shadowOffsetY: 5, shadowOffsetY: 5,
borderWidth: 6, //外部边框 borderWidth: 6, //外部边框
borderColor: "#6ccffe", borderColor: '#6ccffe',
} },
}, },
{ {
map: 'china', map: 'china',
zlevel: 2, zlevel: 2,
aspectScale: .8, //长宽比 aspectScale: 0.8, //长宽比
zoom: 1.1, zoom: 1.1,
roam: false, roam: false,
top: '60', top: '60',
left: 'center', left: 'center',
itemStyle: { itemStyle: {
areaColor: "#1e2c38", areaColor: '#1e2c38',
shadowColor: "#1e2c38", shadowColor: '#1e2c38',
shadowOffsetX: 0, shadowOffsetX: 0,
shadowOffsetY: 10, shadowOffsetY: 10,
borderWidth: 6, //外部边框 borderWidth: 6, //外部边框
borderColor: "#384d61", borderColor: '#384d61',
} },
}, },
], ],
series: [ series: [
@@ -254,7 +190,7 @@ function initMap(myChart) {
type: 'map', type: 'map',
zlevel: 9, zlevel: 9,
zoom: 1.1, zoom: 1.1,
aspectScale: .8, //长宽比 aspectScale: 0.8, //长宽比
hoverAnimation: false, hoverAnimation: false,
silent: false, silent: false,
top: '60', top: '60',
@@ -265,9 +201,9 @@ function initMap(myChart) {
height: 31, height: 31,
lineHeight: 31, lineHeight: 31,
textStyle: { textStyle: {
color: "#fff", color: '#fff',
fontSize: 13, fontSize: 13,
marginLeft: 5 marginLeft: 5,
}, },
}, },
itemStyle: { itemStyle: {
@@ -275,13 +211,13 @@ function initMap(myChart) {
areaColor: { areaColor: {
type: 'pattern', type: 'pattern',
image: bgImg, image: bgImg,
repeat: 'no-repeat' repeat: 'no-repeat',
}, },
borderColor: "#359de5", borderColor: '#359de5',
borderWidth: 2, //内部边框 borderWidth: 2, //内部边框
}, },
}, },
...icons.value ...icons.value,
], ],
}; };
// myChart.value.clear() // myChart.value.clear()
@@ -295,8 +231,8 @@ function initMap(myChart) {
} }
}); });
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
myChart.resize() myChart.resize();
}) });
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@@ -325,15 +261,15 @@ function initMap(myChart) {
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%;
} }
} }
@@ -346,7 +282,7 @@ function initMap(myChart) {
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: absolute; position: absolute;
top: 40px; top: 40px;
@@ -355,15 +291,15 @@ function initMap(myChart) {
: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;
} }
} }
@@ -371,19 +307,19 @@ function initMap(myChart) {
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 {
@@ -395,9 +331,9 @@ function initMap(myChart) {
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;
@@ -423,7 +359,7 @@ function initMap(myChart) {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 50%; border-radius: 50%;
background: #1478F5; background: #1478f5;
} }
} }
@@ -441,7 +377,7 @@ function initMap(myChart) {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 50%; border-radius: 50%;
background: #1478F5; background: #1478f5;
} }
} }
@@ -461,9 +397,7 @@ function initMap(myChart) {
flex: 1; flex: 1;
} }
} }
} }
} }
.china-map-container { .china-map-container {
@@ -503,12 +437,12 @@ function initMap(myChart) {
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 {
@@ -524,5 +458,3 @@ function initMap(myChart) {
} }
} }
</style> </style>
src/components/chinaMap/json/c.json
+24270 -96964
View File
File diff suppressed because it is too large Load Diff
src/components/chinaMap/json/new.json
+25429 -101205
View File
File diff suppressed because it is too large Load Diff
src/components/dialog/Dialog.vue
+17 -18
View File
@@ -1,11 +1,5 @@
<template> <template>
<a-modal <a-modal v-model:visible="props.openVis" :title="props.title" :width="props.width" :maskClosable="true" @cancel="handleCancel">
v-model:visible="props.openVis"
:title="props.title"
:width="props.width"
:maskClosable="true"
@cancel="handleCancel"
>
<slot name="container"></slot> <slot name="container"></slot>
<template #footer></template> <template #footer></template>
</a-modal> </a-modal>
@@ -13,20 +7,20 @@
<script setup lang="ts"> <script setup lang="ts">
import { defineProps, defineEmits } from 'vue'; import { defineProps, defineEmits } from 'vue';
const emit = defineEmits(['close']) const emit = defineEmits(['close']);
const props = defineProps({ const props = defineProps({
width: { width: {
type: String type: String,
}, },
openVis: { openVis: {
type:Boolean type: Boolean,
}, },
title: { title: {
type:String type: String,
} },
}) });
function handleCancel() { function handleCancel() {
emit('close') emit('close');
} }
</script> </script>
@@ -36,7 +30,12 @@
background: linear-gradient(270deg, rgba(106, 112, 124, 0.4) 0%, rgba(106, 112, 124, 0) 70%, rgba(106, 112, 124, 0) 100%); background: linear-gradient(270deg, rgba(106, 112, 124, 0.4) 0%, rgba(106, 112, 124, 0) 70%, rgba(106, 112, 124, 0) 100%);
opacity: 1; opacity: 1;
border: 1px solid; border: 1px solid;
border-image: linear-gradient(270deg, rgba(217.0000022649765, 231.00000143051147, 255, 0.5), rgba(217.0000022649765, 231.00000143051147, 255, 0)) 1 1; border-image: linear-gradient(
270deg,
rgba(217.0000022649765, 231.00000143051147, 255, 0.5),
rgba(217.0000022649765, 231.00000143051147, 255, 0)
)
1 1;
&:before { &:before {
position: absolute; position: absolute;
content: ''; content: '';
@@ -44,13 +43,14 @@
height: 100%; height: 100%;
top: 0; top: 0;
left: 0; left: 0;
background-color: #45A2FF; background-color: #45a2ff;
} }
} }
.ant-modal-title { .ant-modal-title {
color: #ffffff !important; color: #ffffff !important;
} }
.ant-modal-header,.ant-modal-content{ .ant-modal-header,
.ant-modal-content {
background-color: transparent !important; background-color: transparent !important;
} }
.ant-modal-body { .ant-modal-body {
@@ -59,5 +59,4 @@
:deep(.anticon) { :deep(.anticon) {
color: #999999; color: #999999;
} }
</style> </style>
src/components/publicTitle.vue
+16 -11
View File
@@ -3,7 +3,7 @@
<span>{{ props.title }}</span> <span>{{ props.title }}</span>
<div> <div>
<span v-if="isShowMore" style="font-size: 14px; font-weight: 100; cursor: pointer; margin-right: 3px" @click="clickMore">更多&gt;</span> <span v-if="isShowMore" style="font-size: 14px; font-weight: 100; cursor: pointer; margin-right: 3px" @click="clickMore">更多&gt;</span>
<img src="../assets/img/point.png" alt=""> <img src="../assets/img/point.png" alt="" />
</div> </div>
</div> </div>
</template> </template>
@@ -11,16 +11,16 @@
const props = defineProps({ const props = defineProps({
title: { title: {
type: String, type: String,
default: () => '' default: () => '',
}, },
isShowMore: { isShowMore: {
type: Boolean, type: Boolean,
default: () => false default: () => false,
} },
}) });
const emit = defineEmits(['clickMore']) const emit = defineEmits(['clickMore']);
function clickMore() { function clickMore() {
emit('clickMore') emit('clickMore');
} }
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@@ -32,9 +32,14 @@ function clickMore() {
line-height: 40px; line-height: 40px;
background: linear-gradient(90deg, rgba(106, 112, 124, 0.4) 0%, rgba(106, 112, 124, 0) 70%, rgba(106, 112, 124, 0) 100%); background: linear-gradient(90deg, rgba(106, 112, 124, 0.4) 0%, rgba(106, 112, 124, 0) 70%, rgba(106, 112, 124, 0) 100%);
opacity: 1; opacity: 1;
border-top: 1px solid #6A707C; border-top: 1px solid #6a707c;
border-bottom: 1px solid #6A707C; border-bottom: 1px solid #6a707c;
border-image: linear-gradient(90deg, rgba(217.0000022649765, 231.00000143051147, 255, 0.5), rgba(217.0000022649765, 231.00000143051147, 255, 0)) 1 1; border-image: linear-gradient(
90deg,
rgba(217.0000022649765, 231.00000143051147, 255, 0.5),
rgba(217.0000022649765, 231.00000143051147, 255, 0)
)
1 1;
color: #ffffff; color: #ffffff;
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
@@ -48,7 +53,7 @@ function clickMore() {
height: 100%; height: 100%;
top: 0; top: 0;
left: 0; left: 0;
background-color: #45A2FF; background-color: #45a2ff;
} }
} }
</style> </style>
src/views/index.vue
+33 -30
View File
@@ -4,12 +4,8 @@
<div class="title-d-left"> <div class="title-d-left">
{{ dayTimeO }} {{ dayTimeO }}
</div> </div>
<div class="title-d-middle"> <div class="title-d-middle"> 应急就医服务中心 </div>
应急就医服务中心 <div class="title-d-right"> 累计运行时间：{{ dayTimeT }} </div>
</div>
<div class="title-d-right">
累计运行时间：{{dayTimeT}}
</div>
</div> </div>
<div class="body-d"> <div class="body-d">
<div class="body-d-left"> <div class="body-d-left">
@@ -30,15 +26,15 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import {ref} from "vue"; import { ref } from 'vue';
import OneL from "../components/body-d-left/oneL.vue"; import OneL from '../components/body-d-left/oneL.vue';
import TwoL from "../components/body-d-left/twoL.vue"; import TwoL from '../components/body-d-left/twoL.vue';
import ThreeL from "../components/body-d-left/threeL.vue"; import ThreeL from '../components/body-d-left/threeL.vue';
import OneR from "../components/body-d-right/oneR.vue"; import OneR from '../components/body-d-right/oneR.vue';
import TwoR from "../components/body-d-right/twoR.vue"; import TwoR from '../components/body-d-right/twoR.vue';
import ThreeR from "../components/body-d-right/threeR.vue"; import ThreeR from '../components/body-d-right/threeR.vue';
import ChinaMap from '../components/chinaMap/chinaMap.vue' import ChinaMap from '../components/chinaMap/chinaMap.vue';
import * as dayjs from "dayjs"; import * as dayjs from 'dayjs';
const dayTimeO = ref(); const dayTimeO = ref();
const dayTimeT = ref(); const dayTimeT = ref();
@@ -46,22 +42,27 @@ function init() {
getTime(); getTime();
setInterval(() => { setInterval(() => {
getTime(); getTime();
}, 1000) }, 1000);
} }
function getTime() { function getTime() {
dayTimeO.value = dayjs().format('YYYY年MM月DD日 HH时mm分ss秒') dayTimeO.value = dayjs().format('YYYY年MM月DD日 HH时mm分ss秒');
dayTimeT.value = dayjs().diff(dayjs('2020-01-01'), 'day')+'天' dayTimeT.value =
+getZero(dayjs().diff(dayjs(dayjs().format('YYYY-MM-DD')+' 00:00:00'), 'hours'))+'时' dayjs().diff(dayjs('2020-01-01'), 'day') +
+getZero(dayjs().diff(dayjs(dayjs().format('YYYY-MM-DD HH')+':00:00'), 'minutes'))+'分' '天' +
+getZero(dayjs().diff(dayjs(dayjs().format('YYYY-MM-DD HH:mm')+':00'), 'seconds'))+'秒'; getZero(dayjs().diff(dayjs(dayjs().format('YYYY-MM-DD') + ' 00:00:00'), 'hours')) +
'时' +
getZero(dayjs().diff(dayjs(dayjs().format('YYYY-MM-DD HH') + ':00:00'), 'minutes')) +
'分' +
getZero(dayjs().diff(dayjs(dayjs().format('YYYY-MM-DD HH:mm') + ':00'), 'seconds')) +
'秒';
} }
function getZero(num: any) { function getZero(num: any) {
if (num < 10) { if (num < 10) {
return '0' + num; return '0' + num;
} }
return num return num;
} }
init(); init();
@@ -70,7 +71,7 @@ init();
.outer { .outer {
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
background: url("../assets/images/bg.png") no-repeat; background: url('../assets/images/bg.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
@@ -79,17 +80,18 @@ init();
line-height: 80px; line-height: 80px;
display: flex; display: flex;
padding-bottom: 9px; padding-bottom: 9px;
background: url("../assets/images/top-title.png") no-repeat; background: url('../assets/images/top-title.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
.title-d-left, .title-d-middle, .title-d-right { .title-d-left,
.title-d-middle,
.title-d-right {
font-size: 27px; font-size: 27px;
color: #ffffff; color: #ffffff;
line-height: 60px; line-height: 60px;
text-align: center; text-align: center;
} }
> :nth-child(1) { > :nth-child(1) {
width: 29%; width: 29%;
} }
@@ -122,12 +124,13 @@ init();
width: 25%; width: 25%;
} }
.body-d-left, .body-d-right { .body-d-left,
.body-d-right {
text-align: center; text-align: center;
} }
.body-d-left, .body-d-right { .body-d-left,
.body-d-right {
> :nth-child(n) { > :nth-child(n) {
width: 100%; width: 100%;
height: calc(100% / 3); height: calc(100% / 3);
@@ -142,7 +145,7 @@ init();
.bottom-d { .bottom-d {
height: 40px; height: 40px;
background: url("../assets/images/bottom-b.png") no-repeat; background: url('../assets/images/bottom-b.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
</style> </style>