Browse Source

提交修改

master
肖正 4 months ago
parent
commit
cd107603c1
  1. 7
      src/api/user.ts
  2. BIN
      src/assets/home/bg.jpg
  3. BIN
      src/assets/home/leftline.png
  4. BIN
      src/assets/home/lines1.png
  5. BIN
      src/assets/home/lines2.png
  6. BIN
      src/assets/home/lines3.png
  7. BIN
      src/assets/home/pulefttop.png
  8. BIN
      src/assets/home/rightline.png
  9. 179
      src/views/HealthLayout/area.vue
  10. 1
      src/views/HealthLayout/china.js
  11. 40
      src/views/HealthLayout/cityPostion.js
  12. 270
      src/views/HealthLayout/index.vue
  13. 16
      src/views/home/index.vue
  14. 34
      src/views/home/user.vue
  15. 5
      src/views/laboratory/laboratory.vue
  16. 186
      src/views/system/monitor/index.vue
  17. 1433
      src/views/system/monitor/mockData.json

7
src/api/user.ts

@ -7,6 +7,13 @@ export function getAddInfo() {
method: 'get', 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) { // export function list(params: any) {
// return request({ // return request({
// eslint-disable-next-line no-irregular-whitespace // eslint-disable-next-line no-irregular-whitespace

BIN
src/assets/home/bg.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 444 KiB

BIN
src/assets/home/leftline.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

BIN
src/assets/home/lines1.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 399 KiB

BIN
src/assets/home/lines2.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 108 KiB

BIN
src/assets/home/lines3.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

BIN
src/assets/home/pulefttop.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

BIN
src/assets/home/rightline.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

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

1
src/views/HealthLayout/china.js

File diff suppressed because one or more lines are too long

40
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);
}

270
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',
},
//
// zz
// 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>

16
src/views/home/index.vue

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

34
src/views/home/user.vue

@ -20,23 +20,23 @@ const state = reactive({
}); });
// //
const city = 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([]) // -citynamecityName const cityName = reactive([]) // -citynamecityName
const cityValue = reactive([]) // -cityvaluecityValue\ const cityValue = reactive([]) // -cityvaluecityValue\

5
src/views/laboratory/laboratory.vue

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

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

1433
src/views/system/monitor/mockData.json

File diff suppressed because it is too large
Loading…
Cancel
Save