提交修改

src/api/user.ts

@@ -7,6 +7,13 @@ export function getAddInfo() {
 		method: 'get',
 	});
 }
+export function getDeviceInfo() {
+	return request({
+		baseURL: 'http://39.108.191.53:8089', 
+		url: '/api/v1/device?page=1&limit=20',
+		method: 'get',
+	});
+}
 //  export function list(params: any) {
 //  return request({
 // eslint-disable-next-line no-irregular-whitespace

src/views/HealthLayout/area.vue

@@ -0,0 +1,179 @@
+<template>
+  <el-collapse v-model="activeNames" style="width: 100%;display: flex;border: none;" accordion>
+  <div class="area">
+    <div v-for="(item, i) in mockData" :key="i">
+      <div class="title">{{ item.area }}</div>
+      <el-collapse-item v-for="(val, j) in item.list" :key="j" :name="val.city">
+        <template #title>
+          <div class="content-left">{{val.city}}</div>
+          <div class="content" style="margin-left: 0;">{{val.city}}基地</div>
+        </template>
+        <!-- <div class="content-left">{{val.city}}</div> -->
+        <div class="content" v-for="(city, k) in val.list" :key="k">{{city.name}}</div>
+      </el-collapse-item>
+    </div>
+  </div>
+  <div class="area">
+    <div v-for="(item, i) in mockData2" :key="i">
+      <div class="title">{{ item.area }}</div>
+      <el-collapse-item v-for="(val, j) in item.list" :key="j" :name="val.city">
+        <template #title>
+          <div class="content-left">{{val.city}}</div>
+          <div class="content" style="margin-left: 0;">{{val.city}}基地</div>
+        </template>
+        <!-- <div class="content-left">{{val.city}}</div> -->
+        <div class="content" v-for="(city, k) in val.list" :key="k">{{city.name}}</div>
+      </el-collapse-item>
+    </div>
+  </div>
+  </el-collapse>
+</template>
+<script setup lang="ts" name="area">
+import { ref } from 'vue'
+
+const activeNames = ref(['广州'])
+// 模拟数据
+let mockData = [
+{ area: '华南区域', list: [
+    {city: '广州', list: [{name: '白云健康中心', value: 245223},{name: '海珠健康中心', value: 245223},{name: '天河健康中心', value: 245223},
+      {name: '增城健康中心', value: 245223},{name: '番禺健康中心', value: 245223},{name: '花都健康中心', value: 245223},
+    ]},
+    {city: '佛山', list: [{name: '顺德健康中心', value: 245223},{name: '禅城健康中心', value: 245223},]},
+    {city: '深圳', list: [{name: '福田健康中心', value: 245223},{name: '罗湖健康中心', value: 245223},{name: '南山健康中心', value: 245223},
+      {name: '盐田健康中心', value: 245223},{name: '保安健康中心', value: 245223},{name: '龙岗健康中心', value: 245223},
+    ]},
+    {city: '珠海', list: [{name: '香洲健康中心', value: 245223},{name: '斗门健康中心', value: 245223},{name: '金湾健康中心', value: 245223},]},
+    {city: '东莞', list: [{name: '东城健康中心', value: 245223},{name: '南城健康中心', value: 245223},{name: '万江健康中心', value: 245223},
+      {name: '莞城健康中心', value: 245223},{name: '松山湖健康中心', value: 245223},{name: '寮步健康中心', value: 245223},
+      {name: '常平健康中心', value: 245223},{name: '樟木头健康中心', value: 245223},{name: '虎门健康中心', value: 245223},
+    ]},
+    {city: '河源', list: [{name: '河源健康中心', value: 245223},]},
+    {city: '肇庆', list: [{name: '肇庆健康中心', value: 245223},]},
+    {city: '汕头', list: [{name: '汕头健康中心', value: 245223},]},
+    {city: '梅州', list: [{name: '梅州健康中心', value: 245223},]},
+    {city: '韶关', list: [{name: '韶关健康中心', value: 245223},]},
+    {city: '南宁', list: [{name: '南宁健康中心', value: 245223},]},
+    {city: '三亚', list: [{name: '海棠健康中心', value: 245223},{name: '吉阳健康中心', value: 245223},{name: '天涯健康中心', value: 245223},
+      {name: '崖州健康中心', value: 245223},
+    ]},
+    {city: '海口', list: [{name: '海口健康中心', value: 245223},]},
+    {city: '香港', list: [{name: '湾仔健康中心', value: 245223},{name: '九龙健康中心', value: 245223},]},
+    {city: '澳门', list: [{name: '澳门健康中心', value: 245223},]},
+  ]},
+  { area: '东北区域', list: [
+    {city: '沈阳', list: [{name: '铁西健康中心', value: 245223},{name: '辽中健康中心', value: 245223},]},
+    {city: '长春', list: [{name: '长春健康中心', value: 245223},]},
+    {city: '哈尔滨', list: [{name: '哈尔滨健康中心', value: 245223},]},
+  ]},
+  { area: '西北区域', list: [
+    {city: '西安', list: [{name: '西安健康中心', value: 245223}]},
+  ]},
+  { area: '华北区域', list: [
+    {city: '北京', list: [{name: '东城健康中心', value: 245223},{name: '西城健康中心', value: 245223},{name: '朝阳健康中心', value: 245223},{name: '海淀健康中心', value: 245223},
+      {name: '通州健康中心', value: 245223},{name: '大兴健康中心', value: 245223},{name: '丰台健康中心', value: 245223},
+    ]},
+    {city: '天津', list: [{name: '和平健康中心', value: 245223},{name: '河东健康中心', value: 245223},{name: '河西健康中心', value: 245223},]},
+    {city: '呼和浩特', list: [{name: '呼和浩特健康中心', value: 245223}]},
+    {city: '石家庄', list: [{name: '石家庄健康中心', value: 245223},]},
+  ]},
+];
+let mockData2 = [
+  { area: '华中区域', list: [
+    {city: '武汉', list: [{name: '武昌健康中心', value: 245223},{name: '汉口健康中心', value: 245223},{name: '汉阳健康中心', value: 245223},]},
+    {city: '长沙', list: [{name: '雨花健康中心', value: 245223},{name: '芙蓉健康中心', value: 245223},]},
+    {city: '郑州', list: [{name: '郑州健康中心', value: 245223},]},
+  ]},
+  { area: '西南区域', list: [
+    {city: '成都', list: [{name: '景江健康中心', value: 245223},{name: '成华健康中心', value: 245223},]},
+    {city: '重庆', list: [{name: '重庆健康中心', value: 245223},]},
+    {city: '昆明', list: [{name: '昆明健康中心', value: 245223},]},
+    {city: '贵阳', list: [{name: '贵阳健康中心', value: 245223},]},
+  ]},
+  { area: '华东区域', list: [
+    {city: '上海', list: [{name: '黄埔健康中心', value: 245223},{name: '徐汇健康中心', value: 245223},{name: '静安健康中心', value: 245223},
+      {name: '普陀健康中心', value: 245223},{name: '宝山健康中心', value: 245223},{name: '浦东健康中心', value: 245223},
+    ]},
+    {city: '苏州', list: [{name: '姑苏健康中心', value: 245223},{name: '吴中健康中心', value: 245223},]},
+    {city: '杭州', list: [{name: '余杭健康中心', value: 245223},{name: '西湖健康中心', value: 245223},]},
+    {city: '南昌', list: [{name: '南昌健康中心', value: 245223},]},
+    {city: '厦门', list: [{name: '厦门健康中心', value: 245223},]},
+    {city: '宁波', list: [{name: '宁波健康中心', value: 245223},]},
+    {city: '合肥', list: [{name: '合肥健康中心', value: 245223},]},
+    {city: '南京', list: [{name: '玄武健康中心', value: 245223},{name: '秦淮健康中心', value: 245223},{name: '建业健康中心', value: 245223},]},
+    {city: '青岛', list: [{name: '青岛健康中心', value: 245223},]},
+    {city: '福州', list: [{name: '福州健康中心', value: 245223},]},
+    {city: '温州', list: [{name: '温州健康中心', value: 245223},]},
+    {city: '济南', list: [{name: '济南健康中心', value: 245223},]},
+    {city: '无锡', list: [{name: '无锡健康中心', value: 245223},]},
+    {city: '泉州', list: [{name: '泉州健康中心', value: 245223},]},
+    {city: '南通', list: [{name: '通州健康中心', value: 245223},]},
+  ]},
+]
+</script>
+
+<style lang="scss">
+.HealthLayout-box {
+.el-collapse-item__header {
+  border-bottom: none;
+  height: 38px;
+  line-height: 38px;
+  background-color: transparent;
+}
+.el-collapse-item__wrap {
+  border-bottom: none;
+  background-color: transparent;
+}
+}
+</style>
+<style scoped lang="scss">
+$color: rgb(211, 130, 50);
+.area {
+  width: 49%;
+  color: #fff;
+  margin-left: 30px;
+  line-height: 1.5;
+  
+}
+.title {
+  font-size: 22px;
+  color: #fff;
+  border-bottom: 1px solid $color;
+  position: relative;
+  margin-bottom: 10px;
+  margin-top: 30px;
+  &:first-child {
+    margin-top: 0;
+  }
+  &::after {
+    display: block;
+    content: '';
+    position: absolute;
+    right: -2px;
+    bottom: -3.5px;
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: $color;
+  }
+}
+.content-left {
+  width: 80px;
+}
+.content {
+  margin-left: 80px;
+  padding-left: 14px;
+  position: relative;
+  &::after {
+    display: block;
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: $color;
+  }
+}
+</style>

src/views/HealthLayout/cityPostion.js

@@ -0,0 +1,40 @@
+const positionArr = [
+	{ name: '北京', value: ['116.3979471', '39.9081726'] },
+	{ name: '上海', value: ['121.4692688', '31.2381763'] },
+	{ name: '天津', value: ['117.2523808', '39.1038561'] },
+	{ name: '重庆', value: ['106.548425', '29.5549144'] },
+	{ name: '河北', value: ['114.4897766', '38.0451279'] },
+	{ name: '山西', value: ['112.5223053', '37.8357424'] },
+	{ name: '辽宁', value: ['123.4116821', '41.7966156'] },
+	{ name: '吉林', value: ['125.3154297', '43.8925629'] },
+	{ name: '黑龙江', value: ['126.6433411', '45.7414932'] },
+	{ name: '浙江', value: ['120.1592484', '30.265995'] },
+	{ name: '福建', value: ['119.2978134', '26.0785904'] },
+	{ name: '山东', value: ['117.0056', '36.6670723'] },
+	{ name: '河南', value: ['113.6500473', '34.7570343'] },
+	{ name: '湖北', value: ['114.2919388', '30.5675144'] },
+	{ name: '湖南', value: ['112.9812698', '28.2008247'] },
+	{ name: '广东', value: ['113.2614288', '23.1189117'] },
+	{ name: '海南', value: ['110.3465118', '20.0317936'] },
+	{ name: '四川', value: ['104.0817566', '30.6610565'] },
+	{ name: '贵州', value: ['106.7113724', '26.5768738'] },
+	{ name: '云南', value: ['102.704567', '25.0438442'] },
+	{ name: '江西', value: ['115.8999176', '28.6759911'] },
+	{ name: '陕西', value: ['108.949028', '34.2616844'] },
+	{ name: '青海', value: ['101.7874527', '36.6094475'] },
+	{ name: '甘肃', value: ['103.7500534', '36.0680389'] },
+	{ name: '广西', value: ['108.3117676', '22.8065434'] },
+	{ name: '新疆', value: ['87.6061172', '43.7909393'] },
+	{ name: '内蒙古', value: ['111.6632996', '40.8209419'] },
+	{ name: '西藏', value: ['91.1320496', '29.657589'] },
+	{ name: '宁夏', value: ['106.2719421', '38.4680099'] },
+	{ name: '台湾', value: ['120.9581316', '23.8516062'] },
+	{ name: '香港', value: ['114.139452', '22.391577'] },
+	{ name: '澳门', value: ['113.5678411', '22.167654'] },
+	{ name: '安徽', value: ['117.2757034', '31.8632545'] },
+	{ name: '江苏', value: ['118.7727814', '32.0476151'] },
+];
+
+export function getCityPositionByName(name) {
+	return positionArr.find((item) => item.name === name);
+}

src/views/HealthLayout/index.vue

@@ -0,0 +1,270 @@
+<template>
+  <div class="HealthLayout-box">
+    <h1 class="title">博工未来健康产业生态体系实体布局图</h1>
+    <el-row ref="mapBox" :style="{height: height+'px'}" style="margin-left: 30px;overflow: hidden;">
+      <el-col :span="8" class="area-box">
+        <Area />
+      </el-col>
+      <el-col :span="16" style="position: relative;">
+        <div class="linebox">
+          <img class="line1" src="/@/assets/home/lines1.png">
+          <img class="line2" src="/@/assets/home/lines2.png">
+          <img class="line3" src="/@/assets/home/lines3.png">
+        </div>
+        <div id='mapDom' style="height: 100%;"></div>
+      </el-col>
+    </el-row>
+    
+  </div>
+</template>
+
+<script lang="ts" setup name="HealthLayout">
+import { onMounted, reactive, computed, ref, onBeforeUnmount } from 'vue';
+import { ElMessage } from 'element-plus';
+import './china';
+const mapBox = ref(null);
+let height = ref(0);
+import * as echarts from 'echarts';
+import Area from './area.vue';
+import { getCityPositionByName } from './cityPostion'
+import {  useRouter } from 'vue-router';
+const router = useRouter();
+// 模拟10条数据
+let mockData = [
+  { name: '北京', value: 500 },
+  { name: '天津', value: 200 },
+  { name: '河南', value: 300 },
+  { name: '广西', value: 300 },
+  { name: '广东', value: 300 },
+  { name: '河北', value: 300 },
+];
+const state = reactive({
+	loading: false,
+  angle: 0,
+  height: 0,
+	editUserTitle: '',
+});
+onMounted(async () => {
+  height.value = window.innerHeight - 200;
+  setTimeout(() => {
+    init();
+  }, 100)
+});
+
+const init = async () => {
+  let data = mockData.map(i => {
+    let cityPosition = getCityPositionByName(i.name).value
+    return {
+      name: i.name,
+      value: cityPosition.concat(i.value),
+    }
+  })
+
+  let initMap = echarts.init(document.querySelector('#mapDom'))
+  initMap.on('click', mapClick);
+  initMap.setOption({
+    backgroundColor: 'transparent', // 设置背景色透明
+    // 必须设置
+    tooltip: {
+      show: false,
+    },
+    // 地图阴影配置
+    geo: {
+      map: 'china',
+      // 这里必须定义，不然后面series里面不生效
+      tooltip: {
+        show: false,
+      },
+      label: {
+        show: false,
+      },
+      zoom: 1.23,
+      silent: true, // 不响应鼠标时间
+      show: true,
+      roam: false, // 地图缩放和平移
+      aspectScale: 0.75, // scale 地图的长宽比
+      itemStyle: {
+        borderColor: '#0FA3F0',
+        borderWidth: 1,
+        areaColor: '#070f71',
+        shadowColor: 'rgba(1,34,73,0.48)',
+        shadowBlur: 10,
+        shadowOffsetX: -10,
+        shadowOffsetY: 10,
+      },
+      select: {
+        disabled: true,
+      },
+      emphasis: {
+        disabled: true,
+        areaColor: '#00F1FF',
+      },
+      // 地图区域的多边形 图形样式 阴影效果
+      // z值小的图形会被z值大的图形覆盖
+      // top: '10%',
+      left: 'center',
+      // 去除南海诸岛阴影 series map里面没有此属性
+      regions: [{
+        name: '南海诸岛',
+        selected: false,
+        emphasis: {
+          disabled: true,
+        },
+        itemStyle: {
+          areaColor: '#00000000',
+          borderColor: '#00000000',
+        },
+      }],
+      z: 1,
+    },
+    series: [
+      // 地图配置
+      {
+        type: 'map',
+        map: 'china',
+        zoom: 1.2,
+        tooltip: {
+          show: false,
+        },
+        label: {
+          show: true, // 显示省份名称
+          color: '#ffffff',
+          align: 'center',
+        },
+        // top: '10%',
+        left: 'center',
+        aspectScale: 0.75,
+        // roam: false, // 地图缩放和平移
+        itemStyle: {
+          borderColor: '#3ad6ff', // 省分界线颜色  阴影效果的
+          borderWidth: 1,
+          areaColor: '#17348b',
+          opacity: 1,
+        },
+        // 去除选中状态
+        select: {
+          disabled: true,
+        },
+        // 控制鼠标悬浮上去的效果
+        emphasis: { // 聚焦后颜色
+          disabled: false, // 开启高亮
+          label: {
+            align: 'center',
+            color: '#ffffff',
+          },
+          itemStyle: {
+            color: '#ffffff',
+            areaColor: '#0075f4',// 阴影效果 鼠标移动上去的颜色
+          },
+        },
+        z: 2,
+        data: data,
+      },
+      {
+        type: 'scatter',
+        coordinateSystem: 'geo',
+        symbol: 'pin',
+        symbolSize: [50, 50],
+        label: {
+          show: true,
+          color: '#fff',
+          formatter(value) {
+            return value.data.value[2]
+          },
+        },
+        itemStyle: {
+          color: '#e30707', //标志颜色
+        },
+        z: 2,
+        data: data,
+      },
+    ],
+  })
+}
+const mapClick = (item) => {
+  // console.log(88888, item);
+  router.push({name: 'home', query: {name: item.name}});
+}
+</script>
+<style>
+.HealthLayout-box .el-card__body {
+ height: 100%;
+}
+</style>
+<style scoped lang="scss">
+$color: rgb(211, 130, 50);
+.area-box {
+  height: 100%;
+  overflow-y: auto;
+  padding-right: 10px;
+  &::-webkit-scrollbar {
+    display: none; /* Chrome Safari */
+  }
+}
+.HealthLayout-box:before,
+.HealthLayout-box::after {
+  display: block;
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    pointer-events: none;
+    z-index: 10;
+}
+.HealthLayout-box {
+  background: url(/@/assets/home/bg.jpg) center center;
+  background-size: 100% 100%;
+  &::before {
+    background: url(/@/assets/home/leftline.png) no-repeat left center;
+    left: 0;
+  }
+  &::after {
+    background: url(/@/assets/home/rightline.png) no-repeat right center;
+    right: 0;
+  }
+}
+.title {
+  text-align: center;
+  font-size: 40px;
+  margin-top: 30px;
+  color: #fff;
+}
+@keyframes scales1{0%{transform:rotate(0)}
+  100%{transform:rotate(360deg)}
+  }
+  @keyframes scales2{0%{transform:rotate(0)}
+  100%{transform:rotate(-360deg)}
+  }
+.linebox {
+    position: absolute;
+    width: 80%;
+    height: 80%;
+    padding-top: 10%;
+    margin-left: 10%;
+    //padding-top: 250px;
+    transform: scale(1, .7);
+    opacity: .5;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    img {
+      position: absolute;
+      width: 100%;
+      max-width: unset;
+    }
+  
+  .line1 {
+    animation: scales2 60s linear infinite;
+    margin-left: -3px;
+    margin-top: -7px;
+  }
+  .line2 {
+    animation: scales1 15s linear infinite;
+  }
+  .line3 {
+    animation: scales2 20s linear infinite;
+    opacity: 1;
+}
+}
+</style>

src/views/home/index.vue

@@ -19,7 +19,7 @@
 		<el-row :gutter="15" class="home-card-two mb15">
 			<el-col :xs="24" :sm="13" :md="13" :lg="13" :xl="12">
 				<div class="home-card-item" style="height: 400px;">
-					<div class="home-card-item-title">社区生命数据存储分析</div>
+					<div class="home-card-item-title">松山湖基地 社区生命数据存储分析</div>
 					<userChart />
 					<!-- <el-row style="height: 100%">
 						<el-col :span="8">
@@ -178,7 +178,10 @@
 							</el-button-group>
 						</el-form-item> -->
 					</el-form>
-					<el-table :data="state.tableData" style="width: 100%;height: 200px" :border="true" size="small">
+					<el-table :data="state.tableData" style="width: 100%;height: 200px" :border="true" ref="scrollTable"
+					@mouseenter.native="autoScroll(true)"
+					@mouseleave.native="autoScroll"
+					size="small">
 						<el-table-column prop="date" label="时间" />
 						<el-table-column prop="name" label="事件" />
 						<el-table-column prop="text" label="描述" />
@@ -384,7 +387,7 @@ const changeImg =  () => {
 // 页面加载时
 onMounted(() => {
 	initEchartsResize();
-	getAddUser();
+	// getAddUser();
 });
 // 由于页面缓存原因，keep-alive
 onActivated(() => {
@@ -447,8 +450,11 @@ $homeNavLengh: 8;
     .el-carousel__item.is-animating {
         transition: transform 1s ease-in-out;
     }
+		
 .home-container {
 	overflow: hidden;
+	background: url(/@/assets/home/bg.jpg) center center;
+  background-size: 100% 100%;
 	.home-card-one,
 	.home-card-two,
 	.home-card-three {
@@ -459,7 +465,7 @@ $homeNavLengh: 8;
 			transition: all ease 0.3s;
 			padding: 20px;
 			overflow: hidden;
-			background: var(--el-color-white);
+			//background: var(--el-color-white);
 			color: var(--el-text-color-primary);
 			border: 1px solid var(--next-border-color-light);
 			&:hover {
@@ -560,7 +566,7 @@ $homeNavLengh: 8;
 						color: var(--el-text-color-primary);
 						display: flex;
 						border-radius: 5px;
-						background: var(--next-bg-color);
+						//background: var(--next-bg-color);
 						cursor: pointer;
 						transition: all 0.3s ease;
 						&:hover {

src/views/home/user.vue

@@ -20,23 +20,23 @@ const state = reactive({
 });
 // 数据
 const city = reactive([
-    { value: 35835, name: '松山湖' },
+    { value: 35835, name: '一号机' },
-    { value: 12335, name: '惠州' },
+    { value: 12335, name: '二号机' },
-    { value: 14835, name: '广州' },
+    { value: 14835, name: '三号机' },
-    { value: 11935, name: '佛山' },
+    { value: 11935, name: '四号机' },
-    { value: 7335, name: '河源' },
+    { value: 7335, name: '五号机' },
-    { value: 8933, name: '深州' },
+    { value: 8933, name: '六号机' },
-    { value: 14275, name: '南昌' },
+    { value: 14275, name: '七号机' },
-    { value: 16635, name: '长沙' },
+    { value: 16635, name: '八号机' },
-    { value: 13510, name: '武汉' },
+    { value: 13510, name: '九号机' },
-    { value: 6474, name: '岳阳' },
+    { value: 6474, name: '十号机' },
-    { value: 17374, name: '衡水' },
+    { value: 17374, name: '十一号机' },
-    { value: 5374, name: '襄阳' },
+    { value: 5374, name: '十二号机' },
-    { value: 18774, name: '深圳' },
+    { value: 18774, name: '十三号机' },
-    { value: 6974, name: '肇庆' },
+    { value: 6974, name: '十四号机' },
-    { value: 13474, name: '湛江' },
+    { value: 13474, name: '十五号机' },
-    { value: 15235, name: '重庆' },
+    { value: 15235, name: '十六号机' },
-    { value: 13280, name: '杭州' }
+    { value: 13280, name: '十七号机' }
 ])
 const cityName = reactive([])  // 城市-通过遍历将city的name放到cityName中
 const cityValue = reactive([]) // 值-通过遍历将city的value放到cityValue中\

src/views/laboratory/laboratory.vue

@@ -116,11 +116,6 @@ import { ElMessage } from 'element-plus';
     const width = ref(800);
     const height = ref(600);
     const svg = ref(null);
-    const deviceMsg = ref([
-      {name: 'M9_001', value: [
-        {name: '温度',}
-      ]}
-    ]);
     const originalPoints1 = [
       { x: 200, y: 2700 },
       { x: 1500, y: 2700 },

src/views/system/monitor/index.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="monitor-box">
+    <h1 class="title">博工项目实时监控</h1>
+    <el-row ref="mapBox" :style="{height: height+'px'}" style="margin-left: 30px;overflow: hidden;">
+      <el-col :span="8" class="area-box">
+        <div class="content" :class="currentTarget==k?'active':''"
+        @click="currentTarget=k"
+         v-for="(city, k) in state.deviceList" :key="k">{{city.device_title}}</div>
+      </el-col>
+      <el-col :span="16" style="position: relative;">
+        <!-- <div class="linebox">
+          <img class="line1" src="/@/assets/home/lines1.png">
+          <img class="line2" src="/@/assets/home/lines2.png">
+          <img class="line3" src="/@/assets/home/lines3.png">
+        </div> -->
+        <div class="pulefttop">
+          <h2 class="tith2">{{state.deviceList[currentTarget]?.device_title}}</h2>
+          <iframe :src="`https://open.ys7.com/ezopen/h5/iframe?bSupporDoubleClickFull=0&url=ezopen://open.ys7.com/${state.deviceList[currentTarget]?.live_sn}/1.hd.live&autoplay=1&audio=1&accessToken=at.7vy7t758d879vfm31k8rlh0eawfz4gvm-8ojld67hnz-1jvykt4-fnf2b3dzp&templete=0&id=ezplayer&decoderVersion=`" frameborder="0"></iframe>
+        </div>
+      </el-col>
+    </el-row>
+    
+  </div>
+</template>
+
+<script lang="ts" setup name="monitor">
+import { onMounted, reactive, computed, ref, onBeforeUnmount } from 'vue';
+// import { ElMessage } from 'element-plus';
+const mapBox = ref(null);
+let height = ref(0);
+let currentTarget = ref(0);
+import * as echarts from 'echarts';
+import deviceMsg from './mockData.json'
+import {  useRouter } from 'vue-router';
+const router = useRouter();
+// 模拟10条数据
+let mockData = [
+  { name: '北京', value: 500 },
+  { name: '天津', value: 200 },
+  { name: '河南', value: 300 },
+  { name: '广西', value: 300 },
+  { name: '广东', value: 300 },
+  { name: '河北', value: 300 },
+];
+const state = reactive({
+	loading: false,
+  angle: 0,
+  height: 0,
+  deviceList: [],
+	editUserTitle: '',
+});
+onMounted(async () => {
+  height.value = window.innerHeight - 200;
+  state.deviceList = deviceMsg.deviceList;
+  console.log(8888, state.deviceList)
+});
+
+const init = async () => {
+}
+const mapClick = (item) => {
+  // console.log(88888, item);
+  router.push({name: 'home', query: {name: item.name}});
+}
+</script>
+<style>
+.monitor-box .el-card__body {
+ height: 100%;
+}
+</style>
+<style scoped lang="scss">
+$color: rgb(211, 130, 50);
+.area-box {
+  height: 100%;
+  overflow-y: auto;
+  padding-right: 10px;
+  color: #fff;
+  &::-webkit-scrollbar {
+    display: none; /* Chrome Safari */
+  }
+}
+.monitor-box:before,
+.monitor-box::after {
+  display: block;
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    pointer-events: none;
+    z-index: 10;
+}
+.monitor-box {
+  background: url(/@/assets/home/bg.jpg) center center;
+  background-size: 100% 100%;
+  &::before {
+    background: url(/@/assets/home/leftline.png) no-repeat left center;
+    left: 0;
+  }
+  &::after {
+    background: url(/@/assets/home/rightline.png) no-repeat right center;
+    right: 0;
+  }
+}
+.title {
+  text-align: center;
+  font-size: 30px;
+  color: #fff;
+}
+.linebox {
+    position: absolute;
+    width: 80%;
+    height: 80%;
+    padding-top: 10%;
+    margin-left: 10%;
+    //padding-top: 250px;
+    transform: scale(1, .7);
+    opacity: .5;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    img {
+      position: absolute;
+      width: 100%;
+      max-width: unset;
+    }
+  
+  .line1 {
+    animation: scales2 60s linear infinite;
+    margin-left: -3px;
+    margin-top: -7px;
+  }
+  .line2 {
+    animation: scales1 15s linear infinite;
+  }
+  .line3 {
+    animation: scales2 20s linear infinite;
+    opacity: 1;
+}
+}
+.content {
+  margin-left: 40px;
+  padding-left: 24px;
+  position: relative;
+  height: 30px;
+  line-height: 30px;
+  cursor: pointer;
+  max-width: 300px;
+  &.active {
+    background-color: var(--next-bg-color);
+  }
+  &::after {
+    display: block;
+    content: '';
+    position: absolute;
+    left: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: $color;
+  }
+}
+.pulefttop {
+    background: url(/@/assets/home/pulefttop.png);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-position: top center;
+    margin-top: 20px;
+    width: 90%;
+    height: 100%;
+    iframe {
+      width: 98%;
+      height: 86%;
+      margin: 1px 0 0 10px;
+    }
+}
+.tith2 {
+  color: #fff;
+    font-weight: normal;
+    letter-spacing: 2px;
+    font-weight: normal;
+    overflow: hidden;
+    padding: 2% 0 0 5%;
+}
+</style>