修改大屏

package.json

@@ -13,10 +13,11 @@
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
     "@vueuse/core": "^10.7.2",
+    "@vueuse/integrations": "^10.9.0",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "5.1.10",
-    "@vueuse/integrations": "^10.9.0",
     "axios": "^1.6.7",
+    "echarts": "^5.5.0",
     "element-plus": "^2.5.6",
     "lodash-es": "^4.17.21",
     "moment": "^2.30.1",

src/views/hatch/index.vue

@@ -1,6 +1,6 @@
 <template>
   <myMain>
-    <div id="index" class="main">
+    <div class="main">
       <el-row>
         <el-col :span="24" class="animate__animated animate__backInRight" v-loading="loading">
           <div class="head">
@@ -10,7 +10,7 @@
           <div class="center">
             <ul class="clearfix">
               <li>
-                <div class="boxall" style="height: calc(40% - 0.15rem)">
+                <div class="boxall">
                   <div class="titleall">模块标题</div>
                   <div class="list">
                     <div class="list_1" v-for="i in listOne" :key="i.value">
@@ -22,7 +22,83 @@
                 </div>
               </li>
               <li>
-                <div class="boxall" style="height: calc(40% - 0.15rem)">
+                <div class="barnav">
+                  <div class="top">
+                    <div class="list" v-for="i in listTwo" :key="i.value">
+                      <div class="value">{{ i.value }}</div>
+                    </div>
+                  </div>
+                  <div class="top">
+                    <div class="list" v-for="i in listTwo" :key="i.value">
+                      <div class="label">{{ i.label }}</div>
+                    </div>
+                  </div>
+                </div>
+                <div class="mapbox">
+                  <map1 class="map"></map1>
+                </div>
+              </li>
+              <li>
+                <div class="boxall">
+                  <div class="titleall">模块标题</div>
+                  <div class="list">
+                    <div class="list_1" v-for="i in listOne" :key="i.value">
+                      <h2>{{ i.value }}</h2>
+                      <span>{{ i.label }}</span>
+                    </div>
+                  </div>
+                  <div class="boxfoot"></div>
+                </div>
+              </li>
+            </ul>
+            <ul class="clearfix">
+              <li>
+                <div class="boxall">
+                  <div class="titleall">模块标题</div>
+                  <div class="titleall">模块标题</div>
+                  <div class="titleall">模块标题</div>
+                  <div class="list thr">
+                    <div class="list_1" v-for="i in listThr" :key="i.value">
+                      <h2>{{ i.value }}</h2>
+                      <span>{{ i.label }}</span>
+                    </div>
+                  </div>
+                  <div class="boxfoot"></div>
+                </div>
+              </li>
+              <li></li>
+              <li>
+                <div class="boxall">
+                  <div class="titleall">模块标题</div>
+                  <div class="titleall">模块标题</div>
+                  <div class="titleall">模块标题</div>
+                  <div class="list thr">
+                    <div class="list_1" v-for="i in listThr" :key="i.value">
+                      <h2>{{ i.value }}</h2>
+                      <span>{{ i.label }}</span>
+                    </div>
+                  </div>
+                  <div class="boxfoot"></div>
+                </div>
+              </li>
+            </ul>
+            <ul class="clearfix">
+              <li style="width: 50%">
+                <div class="boxall">
+                  <div class="titleall">模块标题</div>
+                  <div class="titleall">模块标题</div>
+                  <div class="list">
+                    <div class="list_1" v-for="i in listOne" :key="i.value">
+                      <h2>{{ i.value }}</h2>
+                      <span>{{ i.label }}</span>
+                    </div>
+                  </div>
+                  <div class="boxfoot"></div>
+                </div>
+              </li>
+              <li style="width: 50%">
+                <div class="boxall">
+                  <div class="titleall">模块标题</div>
                   <div class="titleall">模块标题</div>
                   <div class="list">
                     <div class="list_1" v-for="i in listOne" :key="i.value">
@@ -34,18 +110,19 @@
                 </div>
               </li>
             </ul>
-            <!-- <Decoration5 style="width: 300px; height: 40px" />" -->
           </div>
-          <div class="bottom">下</div>
         </el-col>
       </el-row>
+      <div class="copyright">
+        版权所有：Copyright©2007-2024 吉林省华欣数字科技股份有限公司 │ 吉ICP备14005689号
+      </div>
     </div>
   </myMain>
 </template>
 
 <script setup>
-// import { Decoration5 } from '@dataview/datav-vue3'
 import myMain from './dataV/myMain.vue'
+import map1 from './path/map.vue'
 // 加载中
 const loading = ref(false)
 // 时间
@@ -56,6 +133,20 @@ const listOne = ref([
   { value: '19%', label: '华西地区' },
   { value: '1824', label: '华北地区' }
 ])
+const listTwo = ref([
+  { value: '1942', label: '字段名称' },
+  { value: '98612', label: '字段名称' },
+  { value: '2091', label: '字段名称' }
+])
+const listThr = ref([
+  { value: '1942', label: '字段名称' },
+  { value: '98612', label: '字段名称' },
+  { value: '2091', label: '字段名称' },
+  { value: '1942', label: '字段名称' },
+  { value: '98612', label: '字段名称' },
+  { value: '2091', label: '字段名称' }
+])
+
 // 请求
 onMounted(async () => {
   loading.value = true
@@ -89,12 +180,16 @@ onBeforeUnmount(() => {
 </script>
 <style scoped lang="scss">
 .main {
-  background: url('/images/bg.jpg');
+  min-height: 100%;
+  width: 100%;
+  position: relative;
+  background: url('./images/bg.jpg');
   background-size: 100% 100%;
   padding: 0px;
   margin: 0px;
   color: #222;
   font-family: '微软雅黑';
+  cursor: default; /* 将鼠标样式更改为箭头 */
   @font-face {
     font-family: electronicFont;
     src: url(./font/DS-DIGIT.TTF);
@@ -106,7 +201,7 @@ onBeforeUnmount(() => {
   .head {
     position: relative;
     height: 4.5rem;
-    background: url('/images/head_bg.png') no-repeat center center;
+    background: url('./images/head_bg.png') no-repeat center center;
     background-size: 100% 100%;
     .head_1 {
       color: #fff;
@@ -125,40 +220,45 @@ onBeforeUnmount(() => {
       font-family: electronicFont;
     }
   }
+  .clearfix {
+    display: flex;
+    padding: 0 0.5rem;
+    list-style-type: none;
+    margin: 0.5rem 0;
+  }
   .center {
     .titleall {
-      font-size: 1.2rem;
+      font-size: 1rem;
       color: #fff;
-      line-height: 1.2rem;
-      padding: 0 0 1rem 0;
+      line-height: 1rem;
+      padding: 0 0 0.8rem 0;
       border-bottom: 1px dotted rgba(255, 255, 255, 0.2);
     }
     .boxall {
       border: 1px solid rgba(25, 186, 139, 0.17);
-      padding: 1rem;
+      padding: 0.8rem;
       background: rgba(255, 255, 255, 0.04) url('./images/line.png');
       background-size: 100% auto;
       position: relative;
-      margin-bottom: 0.15rem;
       z-index: 10;
       .list {
         display: flex;
         align-items: center;
         .list_1 {
           position: relative;
-          width: 20rem;
+          width: 10rem;
           display: flex;
           flex-direction: column;
           align-items: center;
-          margin: 0 0 0.5rem 0;
           h2 {
-            margin: 1rem 0;
-            font-size: 1.9rem;
+            margin: 0.8rem 0;
+            font-size: 1.5rem;
+            font-weight: bold;
+            font-family: electronicFont;
             color: #46b8ff;
-            padding-bottom: 0.2rem;
           }
           span {
-            font-size: 1.2rem;
+            font-size: 1rem;
             color: #fff;
             opacity: 0.5;
           }
@@ -176,6 +276,19 @@ onBeforeUnmount(() => {
           width: 0;
         }
       }
+      .thr {
+        flex-wrap: wrap;
+        justify-content: center;
+        .list_1 {
+          width: 8rem;
+          h2 {
+            color: #2ad08a;
+          }
+        }
+        .list_1:nth-child(3n):before {
+          width: 0;
+        }
+      }
       .boxfoot {
         position: absolute;
         bottom: 0;
@@ -224,6 +337,79 @@ onBeforeUnmount(() => {
       border-left: 2px solid #02a6b5;
       left: 0;
     }
+    .barnav {
+      position: relative;
+      background: hsla(225, 68%, 64%, 0.1);
+      .top {
+        display: flex;
+        border: 1px solid rgba(25, 186, 139, 0.17);
+        padding: 0.3rem;
+
+        .list {
+          width: 33%;
+          text-align: center;
+          .value {
+            font-size: 2.5rem;
+            color: #ffeb7b;
+            padding: 0.5rem 0;
+            font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';
+            font-weight: bold;
+            font-family: electronicFont;
+          }
+          .label {
+            font-size: 1rem;
+            color: rgba(255, 255, 255, 0.7);
+          }
+        }
+      }
+    }
+    .barnav:before,
+    .barnav:before {
+      border-left: 2px solid #02a6b5;
+      left: 0;
+    }
+    .barnav:before {
+      position: absolute;
+      width: 0.7rem;
+      height: 0.7rem;
+      content: '';
+      border-top: 2px solid #02a6b5;
+      top: 0;
+    }
+    .barnav:after,
+    .barnav:after {
+      border-right: 2px solid #02a6b5;
+      right: 0;
+    }
+    .barnav:before,
+    .barnav:after {
+      position: absolute;
+      width: 0.7rem;
+      height: 0.7rem;
+      content: '';
+      border-top: 2px solid #02a6b5;
+      top: 0;
+    }
+    .barnav:before,
+    .barnav:after {
+      position: absolute;
+      width: 0.7rem;
+      height: 0.7rem;
+      content: '';
+      border-bottom: 2px solid #02a6b5;
+      bottom: 0;
+    }
+    .barnav:before,
+    .barnav:before {
+      border-left: 2px solid #02a6b5;
+      left: 0;
+    }
+    .map {
+      position: absolute;
+      top: 5%;
+      left: -3%;
+      width: 100%;
+    }
   }
   .center > ul > li {
     float: left;
@@ -231,5 +417,18 @@ onBeforeUnmount(() => {
     height: 100%;
     width: 30%;
   }
+  .center > ul > li:nth-child(2) {
+    width: 40%;
+    margin: 0 0.5rem;
+  }
+  .copyright {
+    position: absolute;
+    bottom: 0.5rem;
+    left: 0;
+    text-align: center;
+    color: rgba(255, 255, 255, 0.5);
+    font-size: 0.7rem;
+    width: 100%;
+  }
 }
 </style>

src/views/hatch/path/map.vue

@@ -0,0 +1,311 @@
+<template>
+  <div>
+    <div ref="chinaMap" class="chinaMap" style="height: 600px; width: 100%"></div>
+  </div>
+</template>
+<style scoped>
+.chinaMap {
+  transform: rotate3d(1, 0, 0, 35deg);
+}
+</style>
+<script setup>
+import * as echarts from 'echarts'
+import jilinJson from '../json/jilin.json'
+import { onMounted, ref } from 'vue'
+const chinaMap = ref()
+onMounted(() => {
+  drawChina()
+})
+/**************************** series start ************************************/
+//中国地理坐标图
+var chinaGeoCoordMap = {
+  长春市: [125.3245, 43.886841],
+  白城市: [122.841114, 45.619026],
+  松原市: [124.823608, 45.118243],
+  吉林市: [126.55302, 43.843577],
+  四平市: [124.370785, 43.170344],
+  辽源市: [125.145349, 42.902692],
+  白山市: [126.427839, 41.942505],
+  延边朝鲜族自治州: [129.513228, 42.904823],
+  通化市: [125.936501, 41.721177]
+}
+var chinaDatas = [
+  [
+    {
+      name: '长春市',
+      value: 0
+    }
+  ],
+  [
+    {
+      name: '延边朝鲜族自治州',
+      value: 0
+    }
+  ],
+  [
+    {
+      name: '白山市',
+      value: 0
+    }
+  ],
+  [
+    {
+      name: '白城市',
+      value: 2
+    }
+  ],
+  [
+    {
+      name: '通化市',
+      value: 1
+    }
+  ],
+  [
+    {
+      name: '辽源市',
+      value: 0
+    }
+  ],
+  [
+    {
+      name: '松原市',
+      value: 0
+    }
+  ],
+  [
+    {
+      name: '吉林市',
+      value: 1
+    }
+  ],
+  [
+    {
+      name: '四平市',
+      value: 1
+    }
+  ]
+]
+//设置投射点
+const scatterPos = [125.3245, 43.886841]
+
+var convertData = function (data) {
+  var res = []
+  for (var i = 0; i < data.length; i++) {
+    var dataItem = data[i]
+    var fromCoord = chinaGeoCoordMap[dataItem[0].name]
+    var toCoord = scatterPos
+    if (fromCoord && toCoord) {
+      res.push([
+        {
+          coord: fromCoord,
+          value: dataItem[0].value
+        },
+        {
+          coord: toCoord
+        }
+      ])
+    }
+  }
+  return res
+}
+
+var series = []
+;[['长春市', chinaDatas]].forEach(function (item, i) {
+  series.push(
+    // {
+    //   //绘制一个新地图
+    //   type: 'map',
+    //   map: 'china',
+    //   zoom: 4,
+    //   center: [125.593273, 44.290795],
+    //   z: -1,
+    //   aspectScale: 0.75, //
+    //   itemStyle: {
+    //     normal: {
+    //       areaColor: '#f00',
+    //       borderColor: '#090438',
+    //       borderWidth: '2',
+    //       shadowColor: '#090438',
+    //       shadowOffsetX: 0,
+    //       shadowOffsetY: 15
+    //     }
+    //   }
+    // },
+    //设置指向箭头信息
+    {
+      type: 'lines',
+      zlevel: 2,
+      effect: {
+        show: true,
+        period: 4, //箭头指向速度，值越小速度越快
+        trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
+        symbol: 'arrow', //箭头图标
+        symbolSize: 8 //图标大小
+      },
+      lineStyle: {
+        normal: {
+          color: '#adffd0',
+          width: 1, //尾迹线条宽度
+          opacity: 1, //尾迹线条透明度
+          curveness: 0.3 //尾迹线条曲直度
+        }
+      },
+      data: convertData(item[1])
+    },
+    // 发射点位置涟漪等效果
+    {
+      type: 'effectScatter',
+      coordinateSystem: 'geo',
+      zlevel: 2,
+      rippleEffect: {
+        //涟漪特效
+        period: 4, //动画时间，值越小速度越快
+        brushType: 'stroke', //波纹绘制方式 stroke, fill
+        scale: 4 //波纹圆环最大限制，值越大波纹越大
+      },
+      label: {
+        normal: {
+          show: true,
+          position: 'right', //显示位置
+          offset: [5, 0], //偏移设置
+          formatter: function (params) {
+            //圆环显示文字
+            return params.data.name
+          },
+          fontSize: 13
+        },
+        emphasis: {
+          show: true
+        }
+      },
+      symbol: 'circle',
+      symbolSize: function (val) {
+        return 5 + val[2] * 5 //圆环大小
+      },
+      itemStyle: {
+        normal: {
+          show: false,
+          color: '#f8f9f5'
+        }
+      },
+      data: item[1].map(function (dataItem) {
+        return {
+          name: dataItem[0].name,
+          value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
+        }
+      })
+    },
+    //被攻击点
+    {
+      type: 'effectScatter',
+      coordinateSystem: 'geo',
+      zlevel: 2,
+      rippleEffect: {
+        //涟漪相关
+        period: 2,
+        brushType: 'stroke',
+        scale: 5
+      },
+      label: {
+        normal: {
+          show: true,
+          position: 'right',
+          // offset:[5, 0],
+          color: '#0f0',
+          formatter: '{b}',
+          textStyle: {
+            color: '#fff',
+            fontSize: 12
+          }
+        },
+        emphasis: {
+          show: true,
+          color: '#f60'
+        }
+      },
+      itemStyle: {
+        normal: {
+          color: '#f00'
+        }
+      },
+      symbol: 'circle',
+      symbolSize: 10, //圆圈大小
+      data: [
+        {
+          name: item[0],
+          value: chinaGeoCoordMap[item[0]].concat([10])
+        }
+      ]
+    }
+  )
+})
+
+/****************************************************************/
+function drawChina() {
+  var myChart = echarts.init(chinaMap.value)
+  echarts.registerMap('china', jilinJson) //注册可用的地图
+  var option = {
+    tooltip: {
+      trigger: 'item',
+      backgroundColor: 'rgba(166, 200, 76, 0.82)',
+      borderColor: '#FFFFCC',
+      showDelay: 0,
+      hideDelay: 0,
+      enterable: true,
+      transitionDuration: 0,
+      extraCssText: 'z-index:100',
+      formatter: function (params, ticket, callback) {
+        //根据业务自己拓展要显示的内容
+        var res = ''
+        var name = params.name
+        var value = params.value[params.seriesIndex + 1]
+        res = "<span style='color:#fff;'>" + name + '</span><br/>数据：' + value
+        return res
+      }
+    },
+    geo: {
+      show: true,
+      center: [125.593273, 44.290795],
+      map: 'china',
+      roam: true, //是否允许缩放，拖拽
+      zoom: 4, //初始化大小
+      //缩放大小限制
+      scaleLimit: {
+        min: 0.1, //最小
+        max: 12 //最大
+      },
+      //设置中心点
+      //center: [95.97, 29.71],
+      //省份地图添加背景
+      //regions: regions,
+      itemStyle: {
+        normal: {
+          areaColor: '#4c60ff',
+          borderColor: '#002097'
+        },
+        emphasis: {
+          areaColor: '#293fff'
+        }
+      },
+      label: {
+        color: 'rgba(255,255,255,0.5)',
+        show: false
+      },
+      //高亮状态
+      emphasis: {
+        itemStyle: {
+          areaColor: '#ffc601'
+        },
+        label: {
+          show: true,
+          color: '#fff'
+        }
+      },
+      z: 10
+    },
+    //配置属性
+    series: series
+  }
+  myChart.setOption(option)
+}
+</script>