update：更新格式化配置

.eslintrc.js

@@ -1,6 +1,7 @@
 // @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,
     env: {
         browser: true,
@@ -25,6 +26,7 @@ module.exports = defineConfig({
         'plugin:jest/recommended',
     ],
     rules: {
+        'prettier/prettier': 'error',
         'vue/script-setup-uses-vars': 'error',
         '@typescript-eslint/ban-ts-ignore': 'off',
         '@typescript-eslint/explicit-function-return-type': 'off',
@@ -75,4 +77,4 @@ module.exports = defineConfig({
             },
         ],
     },
-});
+}

index.html

@@ -4,7 +4,14 @@
     <meta charset="UTF-8"/>
     <link rel="icon" type="image/svg+xml" href="/vite.svg"/>
     <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>
 <style>
     html, body, #app {

package.json

@@ -14,6 +14,7 @@
     "path": "^0.12.7",
     "prettier": "^3.1.0",
     "vue": "^3.3.4",
+    "@amap/amap-jsapi-loader": "^1.0.1",
     "vue-seamless-scroll": "^1.1.23",
     "vue3-seamless-scroll": "^2.0.1"
   },

prettier.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
     printWidth: 150,
     tabWidth: 4,
     useTabs: false,

src/App.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
-import index from './views/index.vue'
+    import index from './views/index.vue';
 </script>
 
 <template>
-    <index/>
+    <index />
 </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

@@ -10,7 +10,7 @@
     }
 
     .select {
-    color: #45A2FF;
+        color: #45a2ff;
         position: relative;
 
         &:after {
@@ -21,13 +21,13 @@
             left: 8px;
             bottom: -14px;
             height: 8px;
-      background: url("../images/light.png") no-repeat;
+            background: url('../images/light.png') no-repeat;
             background-size: 100% 100%;
         }
     }
 
     .unSelect {
-    color: #A3A4A4;
+        color: #a3a4a4;
     }
 }
 *::-webkit-scrollbar {
@@ -47,5 +47,5 @@
     height: 6px;
     border-radius: 25px;
     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

@@ -1,88 +1,95 @@
 <template>
     <div>
-        <public-title title="服务详情数据"/>
+        <public-title title="服务详情数据" />
         <div class="inner">
             <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 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">
-              <span>{{item.title}}</span>
+                    <span>{{ item.title }}</span>
-              <span>{{item.iphone}}</span>
+                    <span>{{ item.iphone }}</span>
                 </div>
             </div>
         </div>
     </div>
 </template>
 <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:'本年',
-      value:'year',
         },
         {
-      name:'本月',
+            name: '本年',
-      value:'month',
+            value: 'year',
         },
         {
-      name:'本周',
+            name: '本月',
-      value:'week',
+            value: 'month',
-    }
-  ])
-const dataLists = ref([
-  {
-    title:'最新呼入电话',
-    iphone:'18394578789'
         },
         {
-    title:'最新呼入电话',
+            name: '本周',
-    iphone:'18394578789'
+            value: 'week',
+        },
+    ]);
+    const dataLists = ref([
+        {
+            title: '最新呼入电话',
+            iphone: '18394578789',
         },
         {
-    title:'最新呼入电话',
+            title: '最新呼入电话',
-    iphone:'18394578789'
+            iphone: '18394578789',
         },
         {
-    title:'最新呼入电话',
+            title: '最新呼入电话',
-    iphone:'18394578789'
+            iphone: '18394578789',
         },
-])
+        {
-const selectIndex = ref(0)
+            title: '最新呼入电话',
+            iphone: '18394578789',
+        },
+    ]);
+    const selectIndex = ref(0);
 
-function handleSelect(index:number){
+    function handleSelect(index: number) {
         selectIndex.value = index;
-}
+    }
 </script>
 <style scoped lang="less">
-.inner {
+    .inner {
         height: calc(100% - 40px);
-    .server-container{
+        .server-container {
-      color: #A3A4A4;
+            color: #a3a4a4;
             padding-top: 4%;
             height: 88%;
             display: grid;
             align-items: start;
-      .server-item{
+            .server-item {
                 font-size: 18px;
-        span{
+                span {
                     display: inline-block;
                     width: 50%;
                     font-weight: bold;
                 }
-        span:nth-child(1){
+                span:nth-child(1) {
                     text-align: left;
                     padding-left: 5%;
                 }
-        span:nth-child(2){
+                span:nth-child(2) {
                     text-align: right;
                     padding-right: 6%;
                 }
             }
         }
-}
+    }
 </style>

src/components/body-d-left/threeL.vue

@@ -1,9 +1,15 @@
 <template>
     <div>
-        <public-title title="体检数据"/>
+        <public-title title="体检数据" />
         <div class="inner">
             <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 class="physical-container">
                 <div class="physical-item">
@@ -35,64 +41,69 @@
     </div>
 </template>
 <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:'本年',
-    value:'year',
         },
         {
-    name:'本月',
+            name: '本年',
-    value:'month',
+            value: 'year',
         },
         {
-    name:'本周',
+            name: '本月',
-    value:'week',
+            value: 'month',
-  }
+        },
-])
+        {
-const physical = ref();
+            name: '本周',
-const selectIndex = ref(0)
+            value: 'week',
-function handleSelect(index:number){
+        },
+    ]);
+    const physical = ref();
+    const selectIndex = ref(0);
+    function handleSelect(index: number) {
         selectIndex.value = index;
-}
+    }
 </script>
 <style scoped lang="less">
-.inner {
+    .inner {
         height: calc(100% - 40px);
-    .physical-container{
+        .physical-container {
             width: 96%;
             height: 92%;
             padding-top: 2%;
             display: flex;
             flex-wrap: wrap;
             align-content: space-around;
-      .physical-item{
+            .physical-item {
                 width: 33%;
                 height: 46%;
-        color: #FFFFFF;
+                color: #ffffff;
                 display: flex;
                 flex-direction: column;
-        span:nth-child(1){
+                span:nth-child(1) {
                     font-size: 28px;
                     font-weight: bold;
                 }
-        span:nth-child(2){
+                span:nth-child(2) {
                     padding-top: 6%;
                     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%;
             }
-      .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%;
             }
         }
-}
+    }
 </style>

src/components/body-d-left/twoL.vue

@@ -1,10 +1,16 @@
 <template>
     <div>
-        <public-title title="主诉分类"/>
+        <public-title title="主诉分类" />
         <div class="inner">
             <div class="">
                 <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>
@@ -13,87 +19,85 @@
     </div>
 </template>
 <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:'女',
-    value:'women',
         },
-])
+        {
-const selectIndex = ref(0)
+            name: '女',
-const chiefChart = ref<HTMLElement>()
+            value: 'women',
-onMounted(()=>{
+        },
-  let xdata = ['创伤类', '心血管', '心神类', '呼吸类' , '消化类', '肿瘤类', '其他'];
+    ]);
+    const selectIndex = ref(0);
+    const chiefChart = ref<HTMLElement>();
+    onMounted(() => {
+        let xdata = ['创伤类', '心血管', '心神类', '呼吸类', '消化类', '肿瘤类', '其他'];
         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 = {
-    grid:{
+            grid: {
                 top: '10%',
-      left:'8%',
+                left: '8%',
-      right:'8%',
+                right: '8%',
-      bottom: '20%'
+                bottom: '20%',
             },
             xAxis: {
                 type: 'category',
                 data: xData,
                 axisLabel: {
                     color: '#FFFFFF',
-        fontSize:16,
+                    fontSize: 16,
                 },
             },
             yAxis: {
                 type: 'value',
                 axisLabel: {
                     color: '#FFFFFF',
-        fontSize:16,
+                    fontSize: 16,
                 },
                 splitLine: {
                     show: true,
-        lineStyle:{
+                    lineStyle: {
-          type:'dashed',
+                        type: 'dashed',
-          color:'rgba(217, 231, 255, 0.2)'
+                        color: 'rgba(217, 231, 255, 0.2)',
-        }
+                    },
-      }
+                },
             },
             series: [
                 {
-        data:ydata ,
+                    data: ydata,
                     type: 'bar',
                     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: 1, color: '#33CBFE' }
+                            { offset: 1, color: '#33CBFE' },
-              ]
+                        ]),
-          )
+                    },
-        }
+                },
-      }
+            ],
-    ]
+        };
-  }
+        myChart.setOption(options);
-  myChart.setOption(options)
         window.addEventListener('resize', () => {
             myChart.resize();
         });
-}
+    }
 </script>
 <style scoped lang="less">
-.inner {
+    .inner {
         height: calc(100% - 40px);
-    .line-chart{
+        .line-chart {
             margin: 0 auto;
             width: 96%;
             height: 80%;
         }
-}
+    }
 </style>

src/components/body-d-right/oneR.vue

@@ -1,13 +1,13 @@
 <template>
     <div class="terminal-container">
-    <public-title title="健康终端报警" :isShowMore="true" @clickMore="handleDialog"/>
+        <public-title title="健康终端报警" :isShowMore="true" @clickMore="handleDialog" />
         <div class="inner">
             <vue3-seamless-scroll :list="policeLists" class="scroll" :hover="true" :limitScrollNum="7">
                 <div class="item" v-for="(item, index) in policeLists" :key="index">
-          <span>{{item.name}}</span>
+                    <span>{{ item.name }}</span>
-          <span>{{item.abnormal}}</span>
+                    <span>{{ item.abnormal }}</span>
                     <div class="time-icon">
-            <span>{{item.time}}</span>
+                        <span>{{ item.time }}</span>
                         <span class="terminal-icon"></span>
                     </div>
                 </div>
@@ -22,9 +22,9 @@
 </template>
 <script setup lang="ts">
     import { ref } from 'vue';
-  import PublicTitle from "../publicTitle.vue";
+    import PublicTitle from '../publicTitle.vue';
     import Dialog from '../dialog/Dialog.vue';
-  import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
+    import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
     const policeLists = ref([
         {
             name: '陈天宇',
@@ -55,15 +55,15 @@
             name: '陈天宇',
             abnormal: '压力异常(82)',
             time: '2023-8-25',
-    }
+        },
-  ])
+    ]);
     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>
 <style scoped lang="less">
@@ -81,8 +81,8 @@
                 align-items: center;
                 justify-content: space-between;
                 padding: 18px 0;
-      span{
+                span {
-        color:#ffffff;
+                    color: #ffffff;
                     font-size: 16px;
                 }
                 .time-icon {
@@ -94,10 +94,10 @@
                     display: inline-block;
                     width: 18px;
                     height: 18px;
-        background: url("../../assets/images/terminal.png") no-repeat;
+                    background: url('../../assets/images/terminal.png') no-repeat;
                     background-size: 100% 100%;
                 }
             }
         }
-}
+    }
 </style>

src/components/body-d-right/threeR.vue

@@ -1,18 +1,14 @@
 <template>
     <div>
-        <public-title title="基层医疗点远程会诊"/>
+        <public-title title="基层医疗点远程会诊" />
-        <div class="inner">
+        <div class="inner"> </div>
-
-        </div>
     </div>
 </template>
 <script setup lang="ts">
-
+    import PublicTitle from '../publicTitle.vue';
-import PublicTitle from "../publicTitle.vue";
 </script>
 <style scoped lang="less">
-.inner {
+    .inner {
         height: calc(100% - 40px);
-
+    }
-}
 </style>

src/components/body-d-right/twoR.vue

@@ -1,30 +1,30 @@
 <template>
     <div>
-        <public-title title="长庆油田大病人数"/>
+        <public-title title="长庆油田大病人数" />
         <div class="inner" ref="healthChart"></div>
     </div>
 </template>
 <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];
-  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 = {
-    title:{
+            title: {
-      text:'总人数\n',
+                text: '总人数\n',
                 subtext: '1980',
                 x: 'center',
                 y: 'center',
                 textStyle: {
-        fontSize:18,
+                    fontSize: 18,
                     color: '#ffffff',
                 },
                 subtextStyle: {
@@ -32,17 +32,17 @@ function initChart(xData,ydata){
                     fontSize: 32,
                 },
             },
-    color:['#0098FA','#0CD9B5','#3B72AD'],
+            color: ['#0098FA', '#0CD9B5', '#3B72AD'],
             tooltip: {
-      trigger: 'item'
+                trigger: 'item',
             },
             legend: {
                 bottom: '0',
                 left: 'center',
                 icon: 'circle',
-      textStyle:{
+                textStyle: {
-        color:'#ffffff',
+                    color: '#ffffff',
-        fontSize:18,
+                    fontSize: 18,
                 },
             },
             series: [
@@ -54,30 +54,30 @@ function initChart(xData,ydata){
                         show: true,
                         position: 'inner',
                         formatter: '{d}%',
-          color:'#ffffff',
+                        color: '#ffffff',
-          fontSize:16
+                        fontSize: 16,
                     },
                     labelLine: {
-          show: false
+                        show: false,
                     },
                     data: [
                         { value: 1048, name: '高危人数' },
                         { value: 735, name: '中危人数' },
                         { value: 580, name: '可控人数' },
-        ]
+                    ],
-      }
+                },
-    ]
+            ],
-  }
+        };
-  myChart.setOption(options)
+        myChart.setOption(options);
         window.addEventListener('resize', () => {
             myChart.resize();
         });
-}
+    }
 </script>
 <style scoped lang="less">
-.inner {
+    .inner {
         width: 90%;
         margin: 0 auto;
         height: calc(100% - 40px);
-}
+    }
 </style>

src/components/chinaMap/chinaHooks.ts

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

@@ -2,23 +2,17 @@
     <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(i)">
                     {{ item.name }}
                 </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 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-button class="reset-btn">清空</a-button>
@@ -27,9 +21,7 @@
                 </a-form>
                 <div class="line-container">
                     <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="start">起点</div>
                             <div class="line-body">
@@ -60,16 +52,14 @@
                             <div class="end">终点</div>
                         </div>
                     </div>
-                    <div v-show="false" class="empty-data">
+                    <div v-show="false" class="empty-data"> 暂无数据</div>
-                        暂无数据
-                    </div>
                 </div>
             </div>
             <div class="china-map-container"></div>
 
             <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>
@@ -86,175 +76,121 @@
     </div>
 </template>
 <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 formState = ref({
-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({
         user: '',
-    password: "",
+        password: '',
-});
+    });
-const list = ref([
+    const list = ref(tabList);
+    const currentIndex = ref(0);
+    const icons = ref([
         {
-        name: '所有资源',
+            type: 'scatter',
-        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 icons = ref([{
-    type: "scatter",
             zlevel: 100,
-    coordinateSystem: "geo",
+            coordinateSystem: 'geo',
             //自定义图片的 位置（lng, lat）
-    data: [{name: '西安', value: ['108.88', '34.40'], id: 'xian'}],
+            data: [{ name: '西安', value: ['108.88', '34.40'], id: 'xian' }],
             //自定义图片的 大小
             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://' + mapIcon1,  // 图片 URL
+            symbol: 'image://' + mapIcons[0], // 图片 URL
-},
+        },
         {
-        type: "scatter",
+            type: 'scatter',
             zlevel: 100,
-        coordinateSystem: "geo",
+            coordinateSystem: 'geo',
             //自定义图片的 位置（lng, lat）
-        data: [{name: '太原', value: [112.55, 37.98], id: 'taiyuan'}],
+            data: [{ name: '太原', value: [112.55, 37.98], id: 'taiyuan' }],
             //自定义图片的 大小
             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 y = Math.random() - 2 + Math.random() + i
+        let y = Math.random() - 2 + Math.random() + i;
         const o = {
-        type: "scatter",
+            type: 'scatter',
             zlevel: 100,
-        coordinateSystem: "geo",
+            coordinateSystem: 'geo',
             //自定义图片的 位置（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],
             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'));
-    initMap(myChart)
+        initMap(myChart);
+    }
 
-}
+    onMounted(() => {
-
+        console.log('reload');
-onMounted(() => {
-    console.log('reload')
         let myChart = echarts.init(document.querySelector('.china-map-container'));
         echarts.registerMap('china', mapJson);
         initMap(myChart);
-})
+    });
 
-function initMap(myChart) {
+    function initMap(myChart) {
         let option = {
             tooltip: {
                 show: false,
-            formatter: "{b0}: {c0}"
+                formatter: '{b0}: {c0}',
             },
             geo: [
                 {
                     map: 'china',
                     zlevel: 3,
-                aspectScale: .8, //长宽比
+                    aspectScale: 0.8, //长宽比
                     zoom: 1.1,
                     roam: false,
                     top: '60',
                     left: 'center',
                     itemStyle: {
-                    areaColor: "#173a58",
+                        areaColor: '#173a58',
-                    shadowColor: "#173a58",
+                        shadowColor: '#173a58',
                         shadowOffsetX: 0,
                         shadowOffsetY: 5,
-                    borderWidth: 6,//外部边框
+                        borderWidth: 6, //外部边框
-                    borderColor: "#6ccffe",
+                        borderColor: '#6ccffe',
-                }
+                    },
                 },
                 {
                     map: 'china',
                     zlevel: 2,
-                aspectScale: .8, //长宽比
+                    aspectScale: 0.8, //长宽比
                     zoom: 1.1,
                     roam: false,
                     top: '60',
                     left: 'center',
                     itemStyle: {
-                    areaColor: "#1e2c38",
+                        areaColor: '#1e2c38',
-                    shadowColor: "#1e2c38",
+                        shadowColor: '#1e2c38',
                         shadowOffsetX: 0,
                         shadowOffsetY: 10,
-                    borderWidth: 6,//外部边框
+                        borderWidth: 6, //外部边框
-                    borderColor: "#384d61",
+                        borderColor: '#384d61',
-                }
+                    },
                 },
             ],
             series: [
                 {
-                map: 'china',// 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
+                    map: 'china', // 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
                     name: '中国地图',
                     type: 'map',
                     zlevel: 9,
                     zoom: 1.1,
-                aspectScale: .8, //长宽比
+                    aspectScale: 0.8, //长宽比
                     hoverAnimation: false,
                     silent: false,
                     top: '60',
@@ -265,9 +201,9 @@ function initMap(myChart) {
                         height: 31,
                         lineHeight: 31,
                         textStyle: {
-                        color: "#fff",
+                            color: '#fff',
                             fontSize: 13,
-                        marginLeft: 5
+                            marginLeft: 5,
                         },
                     },
                     itemStyle: {
@@ -275,13 +211,13 @@ function initMap(myChart) {
                         areaColor: {
                             type: 'pattern',
                             image: bgImg,
-                        repeat: 'no-repeat'
+                            repeat: 'no-repeat',
                         },
-                    borderColor: "#359de5",
+                        borderColor: '#359de5',
-                    borderWidth: 2,//内部边框
+                        borderWidth: 2, //内部边框
                     },
                 },
-            ...icons.value
+                ...icons.value,
             ],
         };
         // myChart.value.clear()
@@ -295,12 +231,12 @@ function initMap(myChart) {
             }
         });
         window.addEventListener('resize', () => {
-        myChart.resize()
+            myChart.resize();
-    })
+        });
-}
+    }
 </script>
 <style lang="less" scoped>
-.center-map {
+    .center-map {
         flex: 1;
         color: #fff;
         display: flex;
@@ -325,15 +261,15 @@ function initMap(myChart) {
                 display: flex;
                 justify-content: 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%;
                 cursor: pointer;
                 transition: all 0.3s;
                 //background-position: -5px -10px;
                 &.active {
                     color: #fff;
-                background: url("/@/assets/img/tab-active.png") no-repeat;
+                    background: url('/@/assets/img/tab-active.png') no-repeat;
                     background-size: 100%;
                 }
             }
@@ -346,7 +282,7 @@ function initMap(myChart) {
             display: flex;
             align-items: center;
             justify-content: center;
-        background: #002E64;
+            background: #002e64;
             border-radius: 6px;
             position: absolute;
             top: 40px;
@@ -355,15 +291,15 @@ function initMap(myChart) {
 
             :deep(.form-item-self) {
                 label {
-                color: #29F1FA;
+                    color: #29f1fa;
                 }
 
                 .ant-input {
                     width: 280px;
                     color: #d6d9e0;
-                background: #2A4164;
+                    background: #2a4164;
                     border-radius: 2px 2px 2px 2px;
-                border: 1px solid #1B7EF2;
+                    border: 1px solid #1b7ef2;
                 }
             }
 
@@ -371,19 +307,19 @@ function initMap(myChart) {
                 width: 64px;
                 height: 32px;
                 border-radius: 5px;
-            color: #45A2FF;
+                color: #45a2ff;
-            background: #002E64;
+                background: #002e64;
-            border: 1px solid #45A2FF;
+                border: 1px solid #45a2ff;
             }
 
             .search-btn {
                 margin-left: 10px;
                 width: 88px;
                 height: 32px;
-            color: #EFEFEF;
+                color: #efefef;
-            background: #45A2FF;
+                background: #45a2ff;
                 border-radius: 5px;
-            border-color: #45A2FF;
+                border-color: #45a2ff;
             }
 
             .line-container {
@@ -395,9 +331,9 @@ function initMap(myChart) {
                 min-height: 200px;
                 max-height: 473px;
                 overflow: auto;
-            background: #2A4164;
+                background: #2a4164;
                 border-radius: 2px;
-            border: 1px solid #1B7EF2;
+                border: 1px solid #1b7ef2;
 
                 .line-title {
                     margin-bottom: 9px;
@@ -423,7 +359,7 @@ function initMap(myChart) {
                             align-items: center;
                             justify-content: center;
                             border-radius: 50%;
-                        background: #1478F5;
+                            background: #1478f5;
                         }
                     }
 
@@ -441,7 +377,7 @@ function initMap(myChart) {
                             align-items: center;
                             justify-content: center;
                             border-radius: 50%;
-                        background: #1478F5;
+                            background: #1478f5;
                         }
                     }
 
@@ -461,9 +397,7 @@ function initMap(myChart) {
                         flex: 1;
                     }
                 }
-
             }
-
         }
 
         .china-map-container {
@@ -503,12 +437,12 @@ function initMap(myChart) {
                 width: 340px;
                 height: 80px;
                 display: flex;
-            color: #FFFFFF;
+                color: #ffffff;
                 flex-direction: column;
                 align-items: 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;
 
                 .num {
@@ -522,7 +456,5 @@ function initMap(myChart) {
                 }
             }
         }
-}
+    }
 </style>
-
-

src/components/dialog/Dialog.vue

@@ -1,11 +1,5 @@
 <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>
         <template #footer></template>
     </a-modal>
@@ -13,30 +7,35 @@
 
 <script setup lang="ts">
     import { defineProps, defineEmits } from 'vue';
-  const emit = defineEmits(['close'])
+    const emit = defineEmits(['close']);
     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>
 
 <style lang="less">
-  .ant-modal-header{
+    .ant-modal-header {
         position: relative;
-    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;
         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 {
             position: absolute;
             content: '';
@@ -44,20 +43,20 @@
             height: 100%;
             top: 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,
-    background-color: transparent!important;
+    .ant-modal-content {
+        background-color: transparent !important;
     }
-  .ant-modal-body{
+    .ant-modal-body {
-    padding: 0!important;
+        padding: 0 !important;
     }
-  :deep(.anticon){
+    :deep(.anticon) {
         color: #999999;
     }
-
 </style>

src/components/publicTitle.vue

@@ -2,29 +2,29 @@
     <div class="title-d">
         <span>{{ props.title }}</span>
         <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>
 </template>
 <script setup lang="ts">
-const props = defineProps({
+    const props = defineProps({
         title: {
             type: String,
-        default: () => ''
+            default: () => '',
         },
         isShowMore: {
             type: Boolean,
-        default: () => false
+            default: () => false,
+        },
+    });
+    const emit = defineEmits(['clickMore']);
+    function clickMore() {
+        emit('clickMore');
     }
-})
-const emit = defineEmits(['clickMore'])
-function clickMore() {
-    emit('clickMore')
-}
 </script>
 <style scoped lang="less">
-.title-d {
+    .title-d {
         padding-left: 17px;
         position: relative;
         text-align: left;
@@ -32,9 +32,14 @@ function clickMore() {
         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%);
         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;
         font-size: 20px;
         font-weight: 700;
@@ -48,7 +53,7 @@ function clickMore() {
             height: 100%;
             top: 0;
             left: 0;
-        background-color: #45A2FF;
+            background-color: #45a2ff;
+        }
     }
-}
 </style>

src/views/index.vue

@@ -2,94 +2,96 @@
     <div class="outer">
         <div class="title-d">
             <div class="title-d-left">
-                {{dayTimeO}}
+                {{ dayTimeO }}
-            </div>
-            <div class="title-d-middle">
-                应急就医服务中心
-            </div>
-            <div class="title-d-right">
-                累计运行时间：{{dayTimeT}}
             </div>
+            <div class="title-d-middle"> 应急就医服务中心 </div>
+            <div class="title-d-right"> 累计运行时间：{{ dayTimeT }} </div>
         </div>
         <div class="body-d">
             <div class="body-d-left">
-                <one-l/>
+                <one-l />
-                <two-l/>
+                <two-l />
-                <three-l/>
+                <three-l />
             </div>
             <div class="body-d-middle">
                 <china-map />
             </div>
             <div class="body-d-right">
-                <one-r/>
+                <one-r />
-                <two-r/>
+                <two-r />
-                <three-r/>
+                <three-r />
             </div>
         </div>
         <div class="bottom-d"></div>
     </div>
 </template>
 <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();
 
-function init() {
+    function init() {
         getTime();
         setInterval(() => {
             getTime();
-    }, 1000)
+        }, 1000);
-}
-
-function getTime() {
-    dayTimeO.value = dayjs().format('YYYY年MM月DD日 HH时mm分ss秒')
-    dayTimeT.value = dayjs().diff(dayjs('2020-01-01'), 'day')+'天'
-        +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) {
-    if (num < 10) {
-        return '0'+num;
     }
-    return num
-}
 
-init();
+    function getTime() {
+        dayTimeO.value = dayjs().format('YYYY年MM月DD日 HH时mm分ss秒');
+        dayTimeT.value =
+            dayjs().diff(dayjs('2020-01-01'), 'day') +
+            '天' +
+            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) {
+        if (num < 10) {
+            return '0' + num;
+        }
+        return num;
+    }
+
+    init();
 </script>
 <style lang="less" scoped>
-.outer {
+    .outer {
         height: 100%;
         box-sizing: border-box;
-    background: url("../assets/images/bg.png") no-repeat;
+        background: url('../assets/images/bg.png') no-repeat;
         background-size: 100% 100%;
-}
+    }
 
-.title-d {
+    .title-d {
         height: 80px;
         line-height: 80px;
         display: flex;
         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%;
 
-    .title-d-left, .title-d-middle, .title-d-right {
+        .title-d-left,
+        .title-d-middle,
+        .title-d-right {
             font-size: 27px;
             color: #ffffff;
             line-height: 60px;
             text-align: center;
         }
 
-
         > :nth-child(1) {
             width: 29%;
         }
@@ -103,9 +105,9 @@ init();
         > :nth-child(3) {
             width: 29%;
         }
-}
+    }
 
-.body-d {
+    .body-d {
         display: flex;
         height: calc(100% - 120px);
         padding-top: 10px;
@@ -122,27 +124,28 @@ init();
             width: 25%;
         }
 
-    .body-d-left,  .body-d-right {
+        .body-d-left,
+        .body-d-right {
             text-align: center;
         }
 
-    .body-d-left, .body-d-right {
+        .body-d-left,
-
+        .body-d-right {
             > :nth-child(n) {
                 width: 100%;
                 height: calc(100% / 3);
                 padding: 10px;
             }
         }
-	.body-d-middle{
+        .body-d-middle {
             display: flex;
             flex-direction: column;
         }
-}
+    }
 
-.bottom-d {
+    .bottom-d {
         height: 40px;
-    background: url("../assets/images/bottom-b.png") no-repeat;
+        background: url('../assets/images/bottom-b.png') no-repeat;
         background-size: 100% 100%;
-}
+    }
 </style>