feat 监控大屏、安全检测
This commit is contained in:
duanliang
64
package-lock.json
generated
64
package-lock.json
generated
@@ -12,11 +12,13 @@
|
||||
"axios": "^1.7.9",
|
||||
"echarts": "^5.5.1",
|
||||
"element-plus": "^2.9.0",
|
||||
"flv.js": "^1.6.2",
|
||||
"pinia": "^2.2.6",
|
||||
"vue": "^3.5.13",
|
||||
"vue-countup-v3": "^1.4.2",
|
||||
"vue-echarts": "^7.0.3",
|
||||
"vue-router": "^4.4.5"
|
||||
"vue-router": "^4.4.5",
|
||||
"vue3-video-play": "^1.3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.2.1",
|
||||
@@ -467,7 +469,6 @@
|
||||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
<<<<<<< HEAD
|
||||
"node_modules/@ctrl/tinycolor": {
|
||||
"version": "3.6.1",
|
||||
"resolved": "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
|
||||
@@ -484,8 +485,6 @@
|
||||
"vue": "^3.2.0"
|
||||
}
|
||||
},
|
||||
=======
|
||||
>>>>>>> 897d91a9c6208a60428d9db9f9bd4745e1233705
|
||||
"node_modules/@esbuild/win32-x64": {
|
||||
"version": "0.24.0",
|
||||
"resolved": "https://registry.npmmirror.com/@esbuild/win32-x64/-/win32-x64-0.24.0.tgz",
|
||||
@@ -502,7 +501,6 @@
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
<<<<<<< HEAD
|
||||
"node_modules/@floating-ui/core": {
|
||||
"version": "1.6.8",
|
||||
"resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-1.6.8.tgz",
|
||||
@@ -525,8 +523,6 @@
|
||||
"resolved": "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.2.8.tgz",
|
||||
"integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig=="
|
||||
},
|
||||
=======
|
||||
>>>>>>> 897d91a9c6208a60428d9db9f9bd4745e1233705
|
||||
"node_modules/@jiaminghi/color": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmmirror.com/@jiaminghi/color/-/color-1.1.3.tgz",
|
||||
@@ -700,7 +696,6 @@
|
||||
"integrity": "sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==",
|
||||
"dev": true
|
||||
},
|
||||
<<<<<<< HEAD
|
||||
"node_modules/@popperjs/core": {
|
||||
"name": "@sxzz/popperjs-es",
|
||||
"version": "2.11.7",
|
||||
@@ -711,8 +706,6 @@
|
||||
"url": "https://opencollective.com/popperjs"
|
||||
}
|
||||
},
|
||||
=======
|
||||
>>>>>>> 897d91a9c6208a60428d9db9f9bd4745e1233705
|
||||
"node_modules/@rollup/pluginutils": {
|
||||
"version": "5.1.3",
|
||||
"resolved": "https://registry.npmmirror.com/@rollup/pluginutils/-/pluginutils-5.1.3.tgz",
|
||||
@@ -1770,6 +1763,12 @@
|
||||
"dev": true,
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/es6-promise": {
|
||||
"version": "4.2.8",
|
||||
"resolved": "https://registry.npmmirror.com/es6-promise/-/es6-promise-4.2.8.tgz",
|
||||
"integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/esbuild": {
|
||||
"version": "0.24.0",
|
||||
"resolved": "https://registry.npmmirror.com/esbuild/-/esbuild-0.24.0.tgz",
|
||||
@@ -2001,6 +2000,16 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/flv.js": {
|
||||
"version": "1.6.2",
|
||||
"resolved": "https://registry.npmmirror.com/flv.js/-/flv.js-1.6.2.tgz",
|
||||
"integrity": "sha512-xre4gUbX1MPtgQRKj2pxJENp/RnaHaxYvy3YToVVCrSmAWUu85b9mug6pTXF6zakUjNP2lFWZ1rkSX7gxhB/2A==",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"es6-promise": "^4.2.8",
|
||||
"webworkify-webpack": "^2.1.5"
|
||||
}
|
||||
},
|
||||
"node_modules/follow-redirects": {
|
||||
"version": "1.15.9",
|
||||
"resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.9.tgz",
|
||||
@@ -2116,6 +2125,12 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/hls.js": {
|
||||
"version": "1.5.17",
|
||||
"resolved": "https://registry.npmmirror.com/hls.js/-/hls.js-1.5.17.tgz",
|
||||
"integrity": "sha512-wA66nnYFvQa1o4DO/BFgLNRKnBTVXpNeldGRBJ2Y0SvFtdwvFKCbqa9zhHoZLoxHhZ+jYsj3aIBkWQQCPNOhMw==",
|
||||
"license": "Apache-2.0"
|
||||
},
|
||||
"node_modules/hookable": {
|
||||
"version": "5.5.3",
|
||||
"resolved": "https://registry.npmmirror.com/hookable/-/hookable-5.5.3.tgz",
|
||||
@@ -3369,6 +3384,15 @@
|
||||
"url": "https://opencollective.com/webpack"
|
||||
}
|
||||
},
|
||||
"node_modules/throttle-debounce": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
|
||||
"integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/tinyglobby": {
|
||||
"version": "0.2.10",
|
||||
"resolved": "https://registry.npmmirror.com/tinyglobby/-/tinyglobby-0.2.10.tgz",
|
||||
@@ -3823,10 +3847,7 @@
|
||||
"version": "1.4.2",
|
||||
"resolved": "https://registry.npmmirror.com/vue-countup-v3/-/vue-countup-v3-1.4.2.tgz",
|
||||
"integrity": "sha512-nRC65jBcdgwybxqztgd/WaK8ZN5T9ECPyiCFGYFMewCsvqdRVo1CtpT7JREcPNF837Fgu/izTSFiuzrIGD6w0A==",
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
"license": "MIT",
|
||||
>>>>>>> 897d91a9c6208a60428d9db9f9bd4745e1233705
|
||||
"dependencies": {
|
||||
"countup.js": "^2.6.2"
|
||||
},
|
||||
@@ -3891,6 +3912,17 @@
|
||||
"vue": "^3.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vue3-video-play": {
|
||||
"version": "1.3.2",
|
||||
"resolved": "https://registry.npmmirror.com/vue3-video-play/-/vue3-video-play-1.3.2.tgz",
|
||||
"integrity": "sha512-eEwCJ0NIkfVQgTj0I3Kf9b1E/04Qne8mQQiE8r77BocblHsZ2T6af3q8l8Zzs/OvjlpQAQvkN/ACVUOJC3RSXg==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"hls.js": "^1.0.10",
|
||||
"throttle-debounce": "^3.0.1",
|
||||
"vue": "^3.2.2"
|
||||
}
|
||||
},
|
||||
"node_modules/watchpack": {
|
||||
"version": "2.4.2",
|
||||
"resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.2.tgz",
|
||||
@@ -3987,6 +4019,12 @@
|
||||
"url": "https://opencollective.com/webpack"
|
||||
}
|
||||
},
|
||||
"node_modules/webworkify-webpack": {
|
||||
"version": "2.1.5",
|
||||
"resolved": "https://registry.npmmirror.com/webworkify-webpack/-/webworkify-webpack-2.1.5.tgz",
|
||||
"integrity": "sha512-2akF8FIyUvbiBBdD+RoHpoTbHMQF2HwjcxfDvgztAX5YwbZNyrtfUMgvfgFVsgDhDPVTlkbb5vyasqDHfIDPQw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/which": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/which/-/which-2.0.2.tgz",
|
||||
|
||||
@@ -13,11 +13,13 @@
|
||||
"axios": "^1.7.9",
|
||||
"echarts": "^5.5.1",
|
||||
"element-plus": "^2.9.0",
|
||||
"flv.js": "^1.6.2",
|
||||
"pinia": "^2.2.6",
|
||||
"vue": "^3.5.13",
|
||||
"vue-countup-v3": "^1.4.2",
|
||||
"vue-echarts": "^7.0.3",
|
||||
"vue-router": "^4.4.5"
|
||||
"vue-router": "^4.4.5",
|
||||
"vue3-video-play": "^1.3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.2.1",
|
||||
|
||||
BIN
src/assets/images/map-img-1.jpg
Normal file
BIN
src/assets/images/map-img-1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 691 KiB |
BIN
src/assets/images/one-video-bg.png
Normal file
BIN
src/assets/images/one-video-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
src/assets/images/v-item-bg-1.png
Normal file
BIN
src/assets/images/v-item-bg-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
69
src/components/Map/marker.vue
Normal file
69
src/components/Map/marker.vue
Normal file
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<div id="container" class="map" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
// fetchData()
|
||||
var map = new BMapGL.Map('container')
|
||||
map.centerAndZoom(new BMapGL.Point(109.643452, 31.028006), 16)
|
||||
// map.enableScrollWheelZoom(true)
|
||||
// map.setMapType(BMAP_SATELLITE_MAP)
|
||||
|
||||
// 绘制自定义marker图标
|
||||
var myIcon = new BMapGL.Icon("t.png", new BMapGL.Size(42, 59));
|
||||
|
||||
const markersData = [
|
||||
{ lng: 109.643452, lat: 31.028006 },
|
||||
|
||||
];
|
||||
// 循环创建标记并添加到地图上
|
||||
markersData.forEach((item) => {
|
||||
const point = new BMapGL.Point(item.lng, item.lat);
|
||||
const marker = new BMapGL.Marker(point,{
|
||||
icon: myIcon
|
||||
});
|
||||
// 创建图文信息窗口
|
||||
var sContent = `<div style="background:red;">111111</div>`;
|
||||
var infoWindow = new BMapGL.InfoWindow(sContent);
|
||||
// marker添加点击事件
|
||||
marker.addEventListener('click', function () {
|
||||
this.openInfoWindow(infoWindow);
|
||||
// 图片加载完毕重绘infoWindow
|
||||
document.getElementById('imgDemo').onload = function () {
|
||||
infoWindow.redraw(); // 防止在网速较慢时生成的信息框高度比图片总高度小，导致图片部分被隐藏
|
||||
};
|
||||
});
|
||||
map.addOverlay(marker);
|
||||
});
|
||||
|
||||
|
||||
})
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
:deep(.BMap_bubble_pop){
|
||||
|
||||
|
||||
|
||||
}
|
||||
:deep(.BMap_cpyCtrl) {
|
||||
display: none;
|
||||
}
|
||||
:deep(.anchorBL) {
|
||||
display: none;
|
||||
}
|
||||
// ::v-deep {
|
||||
// .BMap_cpyCtrl {
|
||||
// display: none;
|
||||
// }
|
||||
// .anchorBL {
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
BIN
src/components/Map/t-ico-1.png
Normal file
BIN
src/components/Map/t-ico-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
@@ -4,9 +4,11 @@ import App from './App.vue'
|
||||
import router from './router'
|
||||
import '@/styles/reset.css'
|
||||
import '@/styles/common.scss'
|
||||
|
||||
import vue3videoPlay from 'vue3-video-play' // 引入组件
|
||||
import 'vue3-video-play/dist/style.css' // 引入css
|
||||
const app = createApp(App)
|
||||
|
||||
app.use(vue3videoPlay)
|
||||
app.use(createPinia())
|
||||
app.use(router)
|
||||
|
||||
|
||||
@@ -12,6 +12,11 @@ const router = createRouter({
|
||||
path: '/monitor',
|
||||
name: 'monitor',
|
||||
component: () => import('../views/monitor/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/testing',
|
||||
name: 'testing',
|
||||
component: () => import('../views/testing/index.vue')
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<<<<<<< HEAD
|
||||
<div class="box-3">
|
||||
<div class="header">
|
||||
<div class="flex">
|
||||
@@ -244,132 +243,3 @@
|
||||
}
|
||||
}
|
||||
</style>
|
||||
=======
|
||||
<!-- 内容 -->
|
||||
<div class="box-3-content">
|
||||
<!-- header -->
|
||||
<div class="header">
|
||||
<div class="li-1">
|
||||
今年总游客数
|
||||
<div class="li-num">
|
||||
<span>6</span>
|
||||
<span>6</span>
|
||||
<span>6</span>
|
||||
<span>6</span>
|
||||
<span>6</span>
|
||||
<span>6</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="li-1">
|
||||
全县区总游客人数
|
||||
<div class="li-num">
|
||||
<span>6</span>
|
||||
<span>6</span>
|
||||
<span>6</span>
|
||||
<span>6</span>
|
||||
<span>6</span>
|
||||
<span>6</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="li-1">
|
||||
全在园人数
|
||||
<div class="li-num">
|
||||
<span>6</span>
|
||||
<span>6</span>
|
||||
<span>6</span>
|
||||
<span>6</span>
|
||||
<span>6</span>
|
||||
<span>6</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="li-1 li-2">
|
||||
景区安全度 <span class="color1">安全</span>
|
||||
</div>
|
||||
<div class="li-1 li-2">
|
||||
景区游玩舒适度 <span class="color1">舒适</span>
|
||||
</div>
|
||||
<div class="li-1 li-2">
|
||||
景区接待情况 <span class="color2">排队</span>
|
||||
</div>
|
||||
<div class="li-1 li-2">
|
||||
交通拥挤度 <span class="color1">舒适</span>
|
||||
</div>
|
||||
<div class="li-1 li-2">
|
||||
停车场负荷度 <span class="color1">超负荷</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- section -->
|
||||
<div class="section">
|
||||
|
||||
</div>
|
||||
<!-- footer -->
|
||||
<div class="footer">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.box-3-content{
|
||||
// margin-top:200px;
|
||||
.header{
|
||||
margin:0 auto;
|
||||
width:vw(1618);
|
||||
height:vh(128);
|
||||
background-image: url('/src/assets/images/header-top-bg.png');
|
||||
background-size: contain;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.li-2{
|
||||
text-align: center;
|
||||
span{
|
||||
display: block;
|
||||
font-size:vw(28);
|
||||
font-weight: bold;
|
||||
margin-top:vw(10);
|
||||
text-align: center;
|
||||
}
|
||||
.color1{
|
||||
color:#02F9FA;
|
||||
}
|
||||
.color2{
|
||||
color:#FF4400;
|
||||
}
|
||||
.color3{
|
||||
color:#E21B1B;
|
||||
}
|
||||
}
|
||||
.li-1{
|
||||
font-weight: 400;
|
||||
font-size: vw(16);
|
||||
color: rgba(255,255,255,0.9);
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
margin-right:vw(10);
|
||||
.li-num{
|
||||
margin-top:vh(10);
|
||||
span{
|
||||
display: inline-block;
|
||||
margin:vw(2);
|
||||
width: vw(40);
|
||||
height: vh(40);
|
||||
line-height: vh(40);
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size:vw(28);
|
||||
background: linear-gradient( 180deg, #00B7FF 0%, #0033FF 100%);
|
||||
border-radius: vw(4);
|
||||
border: 1px solid;
|
||||
border-image: linear-gradient(180deg, rgba(55, 216, 252, 0), rgba(131, 226, 255, 1)) 1 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
>>>>>>> 897d91a9c6208a60428d9db9f9bd4745e1233705
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<main class="wrapper">
|
||||
<!-- <box1 /> -->
|
||||
<box1 />
|
||||
<div class="header">
|
||||
<ul class="nav-left">
|
||||
<li class="nav-left-item">安全</li>
|
||||
@@ -15,8 +15,8 @@
|
||||
<li class="nav-right-item">酒店</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- <box2 />
|
||||
<box3 /> -->
|
||||
<box2 />
|
||||
<box3 />
|
||||
<box4 />
|
||||
</main>
|
||||
</template>
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
:key="index"
|
||||
>
|
||||
<p class="item-title">三峡之巅-最新异常名称</p>
|
||||
<img class="item-img" src="@/assets/images/img-1.png" alt="" />
|
||||
<!-- <img class="item-img" src="@/assets/images/img-1.png" alt="" /> -->
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -61,7 +61,6 @@
|
||||
<div class="box">
|
||||
<div class="title-3"><span>异常告警</span></div>
|
||||
<div class="pt-20">
|
||||
<!-- <Line :width="370" :height="180" id="line" /> -->
|
||||
<v-chart class="line-chart" :option="optionLine" autoresize />
|
||||
</div>
|
||||
</div>
|
||||
@@ -151,14 +150,14 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from 'echarts/core';
|
||||
import * as echarts from 'echarts'
|
||||
import countup from 'vue-countup-v3'
|
||||
import gauge from './gauge.vue'
|
||||
import { use } from 'echarts/core';
|
||||
import { CanvasRenderer } from 'echarts/renderers';
|
||||
import { GaugeChart } from 'echarts/charts';
|
||||
import { PieChart } from 'echarts/charts';
|
||||
import { LineChart } from 'echarts/charts';
|
||||
import { fitChartSize } from '@/utils/dataUtil'
|
||||
import {
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
@@ -186,20 +185,23 @@
|
||||
legend: {
|
||||
type: 'scroll',
|
||||
orient: 'vertical',
|
||||
right: 0,
|
||||
right: -10,
|
||||
top: 0,
|
||||
bottom: 20,
|
||||
itemWidth:5,
|
||||
itemHeight:5,
|
||||
textStyle:{
|
||||
fontSize:fitChartSize(12),
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
left:-70,
|
||||
top:-30,
|
||||
// width:200,
|
||||
// height:200,
|
||||
left:-25,
|
||||
top:-20,
|
||||
width:fitChartSize(230),
|
||||
height:fitChartSize(230),
|
||||
radius: ['40%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
padAngle: 5,
|
||||
@@ -213,7 +215,7 @@
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 10,
|
||||
fontSize: fitChartSize(10),
|
||||
fontWeight: 'bold',
|
||||
color:'#fff'
|
||||
}
|
||||
@@ -242,38 +244,38 @@
|
||||
left:'4%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
nameLocation: 'middle',
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
fontSize:10,
|
||||
interval: 0, // 显示所有标签
|
||||
rotate: 0, // 旋转标签45度
|
||||
},
|
||||
data: ['10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00'],
|
||||
axisTisk:{
|
||||
show: true,
|
||||
// 设置刻度长度
|
||||
length: 1,
|
||||
lineStyle: {
|
||||
type: 'dashed' ,// 设置为虚线
|
||||
width:0,
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#0096FF' // 设置横线颜色
|
||||
}
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
nameLocation: 'middle',
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
fontSize:fitChartSize(10),
|
||||
interval: 0, // 显示所有标签
|
||||
rotate: 0, // 旋转标签45度
|
||||
},
|
||||
data: ['10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00'],
|
||||
axisTisk:{
|
||||
show: true,
|
||||
// 设置刻度长度
|
||||
length: 1,
|
||||
lineStyle: {
|
||||
type: 'dashed' ,// 设置为虚线
|
||||
width:0,
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#0096FF' // 设置横线颜色
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min:0,
|
||||
max:45,
|
||||
interval:15,
|
||||
axisLabel: {
|
||||
fontSize: 12 ,// 设置Y轴刻度字体大小
|
||||
fontSize: fitChartSize(12) ,// 设置Y轴刻度字体大小
|
||||
color: 'rgba(255,255,255,0.9)',
|
||||
},
|
||||
splitLine:{
|
||||
@@ -448,6 +450,7 @@
|
||||
}
|
||||
.item1,.item2{
|
||||
background-image: url('/src/assets/images/four-t-1.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.item3{
|
||||
background-image: url('/src/assets/images/four-t-2.png');
|
||||
@@ -528,15 +531,15 @@
|
||||
}
|
||||
.core {
|
||||
background-image: url('@/assets/images/m-t-1.png');
|
||||
background-size: contain;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.queue {
|
||||
background-image: url('@/assets/images/m-t-2.png');
|
||||
background-size: contain;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.congestion {
|
||||
background-image: url('@/assets/images/m-t-2.png');
|
||||
background-size: contain;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.box {
|
||||
width: vw(384);
|
||||
|
||||
@@ -21,12 +21,68 @@
|
||||
</div>
|
||||
<!-- 视频 -->
|
||||
<div class="video-box">
|
||||
<div class="v-item" v-for="item in 15"></div>
|
||||
<div v-if="videoLog == 1" class="v-item " :class="index==0?'v-error-bg':''" v-for="(item,index) in 15">
|
||||
<block @click="handleItemVideo">
|
||||
<vue3VideoPlay v-bind="options"/>
|
||||
</block>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="video-live flex" v-if="videoLog==2">
|
||||
<div class="video-lt">
|
||||
<vue3VideoPlay v-bind="options"/>
|
||||
</div>
|
||||
<div class="video-rt">
|
||||
<div class="title">
|
||||
<span>最近联系</span>
|
||||
</div>
|
||||
<div class="rt-v-box">
|
||||
<div class="rt-video v-error-bg" v-for="item in 8">
|
||||
<vue3VideoPlay v-bind="options"/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { fitChartSize } from '@/utils/dataUtil'
|
||||
const options = reactive({
|
||||
src: "http://192.168.1.60:8080/live/340200000013200000011_34020000001320000001/hls.m3u8", //视频源
|
||||
type: 'm3u8', //视频类型
|
||||
width:"100%",
|
||||
height:"100%",
|
||||
color: "#409eff", //主题色
|
||||
title: "", //视频名称
|
||||
muted: false, //静音
|
||||
webFullScreen: false,
|
||||
speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
|
||||
autoPlay: true, //自动播放
|
||||
loop: false, //循环播放
|
||||
mirror: false, //镜像画面
|
||||
ligthOff: false, //关灯模式
|
||||
volume: 0.3, //默认音量大小
|
||||
control: true, //是否显示控制
|
||||
controlBtns: [
|
||||
// "audioTrack",
|
||||
// "quality",
|
||||
// "speedRate",
|
||||
// "volume",
|
||||
"setting",
|
||||
"pip",
|
||||
"pageFullScreen",
|
||||
"fullScreen",
|
||||
], //显示所有按钮,
|
||||
});
|
||||
const videoLog = ref(1)
|
||||
const handleItemVideo = ()=>{
|
||||
console.log('单击视频')
|
||||
videoLog.value = 2
|
||||
}
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@@ -44,6 +100,66 @@
|
||||
flex-wrap: wrap;
|
||||
padding-top:0;
|
||||
margin-left:vw(20);
|
||||
.video-live{
|
||||
justify-content: space-between;
|
||||
.video-lt{
|
||||
width:vw(1655);
|
||||
height:vh(950);
|
||||
background-image: url('/src/assets/images/one-video-bg.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.video-rt{
|
||||
width:vw(400);
|
||||
height:vh(950);
|
||||
background: radial-gradient( to bottom 70% at 99% 50%, #0A4190 0%, rgba(0,77,136,0.6) 100%);
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
border: 1px solid;
|
||||
opacity: 0.4;
|
||||
border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(0, 90, 153, 0)) 1 1;
|
||||
margin-left:vw(10);
|
||||
padding:vw(20);
|
||||
.rt-v-box{
|
||||
overflow-y: auto;
|
||||
height:100%;
|
||||
}
|
||||
.title{
|
||||
background-image: url('/src/assets/images/nav-l-t-bg.png');
|
||||
background-size: 100% 100%;
|
||||
margin-bottom:vh(10);
|
||||
position:relative;
|
||||
left:vw(-20);
|
||||
span{
|
||||
margin-left:vw(30);
|
||||
font-weight: 800;
|
||||
font-size: vw(15);
|
||||
line-height: vh(26);
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
|
||||
background: linear-gradient(90deg, #FFFFFF 0%, #5CB5FF 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
}
|
||||
.rt-video{
|
||||
width:100%;
|
||||
height:vh(300);
|
||||
background-image: url('/src/assets/images/v-item-bg.png');
|
||||
background-size: 100% 100%;
|
||||
padding:vw(20);
|
||||
box-sizing: border-box;
|
||||
margin-bottom:vh(2);
|
||||
}
|
||||
.v-error-bg{
|
||||
background-image: url('/src/assets/images/v-item-bg-1.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.v-item{
|
||||
width:vw(400);
|
||||
height:vh(300);
|
||||
@@ -53,9 +169,13 @@
|
||||
margin-right:vw(4);
|
||||
margin-bottom:vh(4);
|
||||
}
|
||||
.v-error-bg{
|
||||
background-image: url('/src/assets/images/v-item-bg-1.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.left-nav{
|
||||
margin-left:vw(20);
|
||||
margin-left:vw(10);
|
||||
// margin-top:vh(35);
|
||||
width:vw(250);
|
||||
.bom-box{
|
||||
|
||||
@@ -146,11 +146,14 @@
|
||||
text-transform: none;
|
||||
flex-wrap: wrap;
|
||||
.icon{
|
||||
|
||||
display: block;
|
||||
margin:vh(20) auto;
|
||||
width:vw(86);
|
||||
height:vh(104);
|
||||
img{
|
||||
width:vw(86);
|
||||
height:vh(104);
|
||||
}
|
||||
}
|
||||
}
|
||||
.title{
|
||||
|
||||
@@ -65,13 +65,14 @@
|
||||
<script setup>
|
||||
import * as echarts from 'echarts/core';
|
||||
import countup from 'vue-countup-v3'
|
||||
import gauge from './gauge.vue'
|
||||
|
||||
import { use } from 'echarts/core';
|
||||
import { CanvasRenderer } from 'echarts/renderers';
|
||||
import { GaugeChart } from 'echarts/charts';
|
||||
import { PieChart } from 'echarts/charts';
|
||||
import { LineChart } from 'echarts/charts';
|
||||
import { BarChart } from 'echarts/charts';
|
||||
import { fitChartSize } from '@/utils/dataUtil'
|
||||
import {
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
@@ -127,7 +128,7 @@
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 10,
|
||||
fontSize: fitChartSize(10),
|
||||
fontWeight: 'bold',
|
||||
color:'#fff'
|
||||
}
|
||||
@@ -187,7 +188,7 @@
|
||||
max:45,
|
||||
interval:15,
|
||||
axisLabel: {
|
||||
fontSize: 12 ,// 设置Y轴刻度字体大小
|
||||
fontSize: fitChartSize(12) ,// 设置Y轴刻度字体大小
|
||||
color: 'rgba(255,255,255,0.9)',
|
||||
},
|
||||
splitLine:{
|
||||
@@ -266,7 +267,7 @@
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
axisLabel: {
|
||||
fontSize:10,
|
||||
fontSize:fitChartSize(10),
|
||||
interval: 0, // 显示所有标签
|
||||
rotate: 0, // 旋转标签45度
|
||||
},
|
||||
@@ -295,7 +296,7 @@
|
||||
interval:15,
|
||||
|
||||
axisLabel: {
|
||||
fontSize: 12 ,// 设置Y轴刻度字体大小
|
||||
fontSize: fitChartSize(12) ,// 设置Y轴刻度字体大小
|
||||
color: 'rgba(255,255,255,0.9)',
|
||||
offset:10,
|
||||
},
|
||||
|
||||
@@ -1,109 +0,0 @@
|
||||
<template>
|
||||
<div class="gauge" :id="id" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from 'echarts'
|
||||
import { fitChartSize } from '@/utils/dataUtil'
|
||||
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: String,
|
||||
default: () => ''
|
||||
}
|
||||
})
|
||||
|
||||
let gaugeChart = null
|
||||
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
const init = () => {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
gaugeChart = echarts.init(document.getElementById(props.id))
|
||||
gaugeChart.setOption({
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
min: 0,
|
||||
max: 100,
|
||||
radius: '100%',
|
||||
splitNumber: 10,
|
||||
center: ['50%', '60%'],
|
||||
itemStyle: {
|
||||
color: '#58D9F9',
|
||||
shadowColor: 'rgba(0,138,255,0.45)',
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 2,
|
||||
shadowOffsetY: 2
|
||||
},
|
||||
progress: {
|
||||
show: true,
|
||||
roundCap: true,
|
||||
width: fitChartSize(6)
|
||||
},
|
||||
pointer: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
roundCap: true,
|
||||
lineStyle: {
|
||||
width: fitChartSize(6)
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
detail: {
|
||||
width: '100%',
|
||||
lineHeight: 20,
|
||||
height: 20,
|
||||
offsetCenter: [0, '20%'],
|
||||
valueAnimation: true,
|
||||
formatter: function (value) {
|
||||
return '{value|' + value.toFixed(0) + '}{unit|%}'
|
||||
},
|
||||
rich: {
|
||||
value: {
|
||||
fontSize: fitChartSize(12),
|
||||
fontWeight: 'bolder',
|
||||
color: '#02F9FA'
|
||||
},
|
||||
unit: {
|
||||
fontSize: fitChartSize(12),
|
||||
color: '#02F9FA'
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 80
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
})
|
||||
window.addEventListener('resize', resize)
|
||||
}
|
||||
const resize = () => {
|
||||
if (gaugeChart) {
|
||||
gaugeChart.dispose()
|
||||
init()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.gauge {
|
||||
width: vw(70);
|
||||
height: vh(50);
|
||||
}
|
||||
</style>
|
||||
@@ -1,8 +1,7 @@
|
||||
<template>
|
||||
<main class="wrapper">
|
||||
<box1 />
|
||||
<box5/>
|
||||
<!-- <box2 /> -->
|
||||
<box2 />
|
||||
<box3 />
|
||||
<div class="header">
|
||||
<ul class="nav-left">
|
||||
@@ -13,10 +12,10 @@
|
||||
</ul>
|
||||
<div class="title">监控大屏</div>
|
||||
<ul class="nav-right">
|
||||
<li class="nav-right-item">停车</li>
|
||||
<li class="nav-right-item">工单</li>
|
||||
<li class="nav-right-item">舆情</li>
|
||||
<li class="nav-right-item">酒店</li>
|
||||
<li class="nav-right-item">路段1</li>
|
||||
<li class="nav-right-item">路段</li>
|
||||
<li class="nav-right-item">路段</li>
|
||||
<li class="nav-right-item">路段</li>
|
||||
</ul>
|
||||
</div>
|
||||
<box4 />
|
||||
|
||||
94
src/views/testing/components/box-1.vue
Normal file
94
src/views/testing/components/box-1.vue
Normal file
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<div class="box-1">
|
||||
<div class="title">核心景区视频</div>
|
||||
<ul class="list">
|
||||
<li
|
||||
class="item"
|
||||
:style="{ backgroundImage: `url(${index == 0 ? item1 : item2})` }"
|
||||
v-for="(item, index) in 10"
|
||||
:key="index"
|
||||
>
|
||||
<p class="item-title">三峡之巅-最新异常名称</p>
|
||||
<!-- <img class="item-img" src="@/assets/images/img-1.png" alt="" /> -->
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import item1 from '@/assets/images/item-1.png'
|
||||
import item2 from '@/assets/images/item-2.png'
|
||||
|
||||
console.log(item1, 'item1')
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box-1 {
|
||||
margin: vh(10);
|
||||
width: vw(326);
|
||||
border-radius: vw(2);
|
||||
background-image: url('@/assets/images/bg-1.png');
|
||||
background-size: 100% 100%;
|
||||
|
||||
.title {
|
||||
width: vw(260);
|
||||
height: vh(26);
|
||||
text-align: center;
|
||||
line-height: vh(26);
|
||||
margin-left: vw(32.5);
|
||||
font-size: vw(16);
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
background-image: url('@/assets/images/title-1.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.list {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: vh(1026);
|
||||
padding: vw(8);
|
||||
/* 滚动条整体样式 */
|
||||
&::-webkit-scrollbar {
|
||||
width: vw(0); /* 滚动条的宽度 */
|
||||
}
|
||||
|
||||
/* 滚动条轨道 */
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #f1f1f1; /* 轨道的背景色 */
|
||||
}
|
||||
|
||||
/* 滚动条滑块 */
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #888; /* 滑块的背景色 */
|
||||
border-radius: 5px; /* 滑块的圆角 */
|
||||
}
|
||||
|
||||
/* 当鼠标悬停在滚动条上时滑块的样式 */
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background: #555; /* 滑块的背景色 */
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-bottom: vh(13);
|
||||
background-size: 100% 100%;
|
||||
&-title {
|
||||
margin-bottom: vh(6);
|
||||
margin-left: vw(45);
|
||||
color: #fff;
|
||||
font-size: vw(16);
|
||||
height: vh(24);
|
||||
line-height: vh(24);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
&-img {
|
||||
width: 100%;
|
||||
height: vh(164);
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
629
src/views/testing/components/box-2.vue
Normal file
629
src/views/testing/components/box-2.vue
Normal file
@@ -0,0 +1,629 @@
|
||||
<template>
|
||||
<div class="box-2">
|
||||
<div class="header">
|
||||
<div class="title"> 交通信息 </div>
|
||||
</div>
|
||||
<div class="flex pt-20 p-box">
|
||||
<div class="item core">
|
||||
<span class="title-1">全县景区数</span>
|
||||
<div class="flex align-end color1"> <countup endVal="895" /><span class="unit"></span></div>
|
||||
</div>
|
||||
<div class="item queue">
|
||||
<span class="title-1">核心景区数</span>
|
||||
<div class="flex align-end color2"> <countup endVal="895" /><span class="unit"></span></div>
|
||||
</div>
|
||||
<div class="item congestion">
|
||||
<span class="title-1">低感景区总数</span>
|
||||
<div class="flex align-end color3"> <countup endVal="895" /><span class="unit"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header">
|
||||
<div class="title"> 景区信息 </div>
|
||||
</div>
|
||||
<div class="flex-four">
|
||||
<div class="item item1">
|
||||
<div class="box1">
|
||||
核心路段监控点位
|
||||
<div class="item-num color1"> <countup endVal="895" /><span class="unit"></span></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="item item2">
|
||||
<div class="box1">
|
||||
核心景区分析点位
|
||||
<div class="item-num color1"> <countup endVal="895" /><span class="unit"></span></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="item item3">
|
||||
<div class="box1">
|
||||
异常点位
|
||||
<div class="item-num color2"> <countup endVal="895" /><span class="unit"></span></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="item item4">
|
||||
<div class="box1">
|
||||
异常告警
|
||||
<div class="item-num color3"> <countup endVal="895" /><span class="unit"></span></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="item item5">
|
||||
<div class="box1">
|
||||
已处理
|
||||
<div class="item-num color4"> <countup endVal="895" /><span class="unit"></span></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex pt-20 p-box">
|
||||
<div class="box">
|
||||
<div class="title-3"><span>异常告警</span></div>
|
||||
<div class="pt-20">
|
||||
<!-- <Line :width="370" :height="180" id="line" /> -->
|
||||
<v-chart class="line-chart" :option="optionLine" autoresize />
|
||||
</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="title-3"><span>异常告警占比</span></div>
|
||||
<div class="pt-20 h-flex">
|
||||
<div class="left">
|
||||
<v-chart class="chart" :option="option1" autoresize />
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="li li-1"><span class="rk-img" >1</span> 核心监控1</div>
|
||||
<div class="li li-2"><span class="rk-img" >1</span>核心监控1</div>
|
||||
<div class="li li-3"><span class="rk-img" >1</span>核心监控1</div>
|
||||
<div class="li"><span class="rk-img" >1</span>核心监控1</div>
|
||||
<div class="li"><span class="rk-img" >1</span>核心监控1</div>
|
||||
<div class="li"><span class="rk-img" >1</span>核心监控</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header">
|
||||
<div class="title"> 景区信息 </div>
|
||||
</div>
|
||||
<div class="flex-four">
|
||||
<div class="item item1">
|
||||
<div class="box1">
|
||||
核心路段监控点位
|
||||
<div class="item-num color1"> <countup endVal="895" /><span class="unit"></span></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="item item2">
|
||||
<div class="box1">
|
||||
核心景区分析点位
|
||||
<div class="item-num color1"> <countup endVal="895" /><span class="unit"></span></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="item item3">
|
||||
<div class="box1">
|
||||
异常点位
|
||||
<div class="item-num color2"> <countup endVal="895" /><span class="unit"></span></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="item item4">
|
||||
<div class="box1">
|
||||
异常告警
|
||||
<div class="item-num color3"> <countup endVal="895" /><span class="unit"></span></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="item item5">
|
||||
<div class="box1">
|
||||
已处理
|
||||
<div class="item-num color4"> <countup endVal="895" /><span class="unit"></span></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex pt-20 p-box">
|
||||
<div class="box">
|
||||
<div class="title-3"><span>异常告警</span></div>
|
||||
<div class="pt-20">
|
||||
<!-- <Line :width="370" :height="180" id="line" /> -->
|
||||
<v-chart class="line-chart" :option="optionLine" autoresize />
|
||||
</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="title-3"><span>异常告警占比</span></div>
|
||||
<div class="pt-20 h-flex">
|
||||
<div class="left">
|
||||
<v-chart class="chart" :option="option1" autoresize />
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="li li-1"><span class="rk-img" >1</span> 核心监控1</div>
|
||||
<div class="li li-2"><span class="rk-img" >1</span>核心监控1</div>
|
||||
<div class="li li-3"><span class="rk-img" >1</span>核心监控1</div>
|
||||
<div class="li"><span class="rk-img" >1</span>核心监控1</div>
|
||||
<div class="li"><span class="rk-img" >1</span>核心监控1</div>
|
||||
<div class="li"><span class="rk-img" >1</span>核心监控</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from 'echarts'
|
||||
import countup from 'vue-countup-v3'
|
||||
import { use } from 'echarts/core';
|
||||
import { CanvasRenderer } from 'echarts/renderers';
|
||||
import { GaugeChart } from 'echarts/charts';
|
||||
import { PieChart } from 'echarts/charts';
|
||||
import { LineChart } from 'echarts/charts';
|
||||
import { fitChartSize } from '@/utils/dataUtil'
|
||||
import {
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
} from 'echarts/components';
|
||||
import VChart, { THEME_KEY } from 'vue-echarts';
|
||||
import { ref, provide } from 'vue';
|
||||
|
||||
use([
|
||||
LineChart,
|
||||
GaugeChart,
|
||||
CanvasRenderer,
|
||||
PieChart,
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
]);
|
||||
|
||||
provide(THEME_KEY, 'dark');
|
||||
const option1 = ref({
|
||||
backgroundColor:'transparent',
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
type: 'scroll',
|
||||
orient: 'vertical',
|
||||
right: -10,
|
||||
top: 0,
|
||||
bottom: 20,
|
||||
itemWidth:5,
|
||||
itemHeight:5,
|
||||
textStyle:{
|
||||
fontSize:fitChartSize(12),
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
left:-25,
|
||||
top:-20,
|
||||
width:fitChartSize(230),
|
||||
height:fitChartSize(230),
|
||||
radius: ['40%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
padAngle: 5,
|
||||
itemStyle: {
|
||||
borderRadius: 2
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: fitChartSize(10),
|
||||
fontWeight: 'bold',
|
||||
color:'#fff'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: true
|
||||
},
|
||||
data: [
|
||||
{ value: 200, name: '异常状况1' },
|
||||
{ value: 500, name: '异常状况2' },
|
||||
{ value: 234, name: '异常状况3' },
|
||||
{ value: 135, name: '异常状况4' },
|
||||
{ value: 100, name: '异常状况5' },
|
||||
{ value: 777, name: '异常状况6' },
|
||||
{ value: 777, name: '其他' },
|
||||
]
|
||||
|
||||
},
|
||||
],
|
||||
});
|
||||
const optionLine = ref({
|
||||
backgroundColor:'transparent',
|
||||
grid:{
|
||||
top:'50',
|
||||
bottom:'20',
|
||||
left:'4%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
nameLocation: 'middle',
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
fontSize:fitChartSize(10),
|
||||
interval: 0, // 显示所有标签
|
||||
rotate: 0, // 旋转标签45度
|
||||
},
|
||||
data: ['10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00'],
|
||||
axisTisk:{
|
||||
show: true,
|
||||
// 设置刻度长度
|
||||
length: 1,
|
||||
lineStyle: {
|
||||
type: 'dashed' ,// 设置为虚线
|
||||
width:0,
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#0096FF' // 设置横线颜色
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min:0,
|
||||
max:45,
|
||||
interval:15,
|
||||
axisLabel: {
|
||||
fontSize: fitChartSize(12) ,// 设置Y轴刻度字体大小
|
||||
color: 'rgba(255,255,255,0.9)',
|
||||
},
|
||||
splitLine:{
|
||||
show:true,
|
||||
lineStyle:{
|
||||
type:'dashed',
|
||||
color:'#00D0FF'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
data: [0, 23, 30, 24, 40, 30, 45,26],
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
label:{
|
||||
show:false,//隐藏坐标点
|
||||
},
|
||||
itemStyle:{
|
||||
color:'transparent'
|
||||
},
|
||||
markLine:{
|
||||
symbol:['none','none'],
|
||||
label:{show:false}
|
||||
},
|
||||
|
||||
lineStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#7DE7FF'
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: '#02F9FA'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#009DFF'
|
||||
},
|
||||
]),
|
||||
width:3,
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
})
|
||||
onMounted(() => {})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.line-chart{
|
||||
width:100%;
|
||||
height:vh(200);
|
||||
}
|
||||
.box-2 {
|
||||
margin-top: vh(120);
|
||||
width: vw(800);
|
||||
height: vh(950);
|
||||
padding: vw(8);
|
||||
box-sizing: border-box;
|
||||
// background-image: url('@/assets/images/bg-2.png');
|
||||
background-size: 100% 100%;
|
||||
.p-box{
|
||||
padding-top:vh(10);
|
||||
justify-content: space-between;
|
||||
}
|
||||
.h-flex{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.left{
|
||||
flex:1;
|
||||
width:vw(260);
|
||||
}
|
||||
.right{
|
||||
margin-left:vw(20);
|
||||
width:vw(120);
|
||||
.li{
|
||||
position: relative;
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: #FFFFFF;
|
||||
line-height: 16px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
position: relative;
|
||||
padding-left:vw(30);
|
||||
padding:0 vw(10);
|
||||
padding-left:vw(15);
|
||||
background: linear-gradient( 90deg, #1B5EC7 0%, rgba(27,94,199,0) 100%);
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
height:vh(24);
|
||||
line-height:vh(24);
|
||||
margin-bottom:vh(8);
|
||||
// opacity: 0.4;
|
||||
.rk-img{
|
||||
position: absolute;
|
||||
width:vw(24);
|
||||
height:vh(24);
|
||||
line-height:vh(24);
|
||||
left:vw(-12);
|
||||
top:50%;
|
||||
display: block;
|
||||
background-image: url('/src/assets/images/rk-4.png');
|
||||
background-size: 100% 100%;
|
||||
transform: translateY(-50%);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.li-1{
|
||||
background: linear-gradient( 90deg, #FFC10B 0%, rgba(255,209,44,0) 100%);
|
||||
.rk-img{
|
||||
background-image: url('/src/assets/images/rk-1.png');
|
||||
}
|
||||
}
|
||||
.li-2{
|
||||
background: linear-gradient( 90deg, #919191 0%, rgba(175,175,175,0) 100%);
|
||||
.rk-img{
|
||||
background-image: url('/src/assets/images/rk-2.png');
|
||||
}
|
||||
}
|
||||
.li-3{
|
||||
background: linear-gradient( 90deg, #919191 0%, rgba(175,175,175,0) 100%);
|
||||
.rk-img{
|
||||
background-image: url('/src/assets/images/rk-3.png');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.flex-four{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.item{
|
||||
|
||||
margin:vw(10);
|
||||
width:vw(142);
|
||||
height:vh(106);
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: rgba(255,255,255,0.9);
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding:0;
|
||||
margin-top:0;
|
||||
.box1{
|
||||
width:vw(142);
|
||||
}
|
||||
.item-num{
|
||||
margin-top:vh(10);
|
||||
}
|
||||
.color1{
|
||||
color: #02F9FA;
|
||||
}
|
||||
.color2{
|
||||
color: #F15A25;
|
||||
}
|
||||
.color3{
|
||||
color: #E21B1B;
|
||||
}
|
||||
.color4{
|
||||
color: #12B5FD;
|
||||
}
|
||||
|
||||
}
|
||||
.item1,.item2{
|
||||
background-image: url('/src/assets/images/four-t-1.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.item3{
|
||||
background-image: url('/src/assets/images/four-t-2.png');
|
||||
}
|
||||
.item4{
|
||||
background-image: url('/src/assets/images/four-t-3.png');
|
||||
}
|
||||
.item5{
|
||||
background-image: url('/src/assets/images/four-t-4.png');
|
||||
}
|
||||
}
|
||||
.header {
|
||||
position: relative;
|
||||
.title {
|
||||
margin: vh(5) auto;
|
||||
width: vw(468);
|
||||
height: vh(32);
|
||||
font-weight: 800;
|
||||
font-size: vw(16);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-image: url('@/assets/images/title-4.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.more {
|
||||
position: absolute;
|
||||
top: vh(0);
|
||||
right: vw(20);
|
||||
cursor: pointer;
|
||||
width: vw(60);
|
||||
height: vh(24);
|
||||
background-image: url('@/assets/images/more.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
padding-left: vw(100);
|
||||
width:vw(230);
|
||||
height: vh(70);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-size: 100% 100%;
|
||||
.align-end{
|
||||
margin-top:vh(10);
|
||||
}
|
||||
.color1{
|
||||
color: #12B5FD;
|
||||
}
|
||||
.color2{
|
||||
color: #02F9FA;
|
||||
}
|
||||
.color3{
|
||||
color: #F15A25;
|
||||
}
|
||||
|
||||
}
|
||||
.title-1 {
|
||||
position: absolute;
|
||||
top: vh(10);
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
.countup-wrap {
|
||||
|
||||
font-size: vw(28);
|
||||
font-weight: bold;
|
||||
}
|
||||
.unit {
|
||||
color: #02f9fa;
|
||||
font-size: vw(14);
|
||||
margin-bottom: vh(4);
|
||||
}
|
||||
.core {
|
||||
background-image: url('@/assets/images/m-t-1.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.queue {
|
||||
background-image: url('@/assets/images/m-t-2.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.congestion {
|
||||
background-image: url('@/assets/images/m-t-2.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.box {
|
||||
width: vw(384);
|
||||
// height: vh(360);
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
&:nth-child(1) {
|
||||
margin-right: vw(10);
|
||||
}
|
||||
.title-2 {
|
||||
width: vw(253);
|
||||
height: vh(28);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-image: url('@/assets/images/title-5.png');
|
||||
background-size: 100% 100%;
|
||||
& > span {
|
||||
padding-left: vw(22);
|
||||
font-weight: bold;
|
||||
font-size: vw(15);
|
||||
background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
|
||||
color: transparent; /* 兼容其他浏览器 */
|
||||
}
|
||||
}
|
||||
.statistic {
|
||||
display: flex;
|
||||
margin-top: vh(12);
|
||||
width: 100%;
|
||||
height: vh(88);
|
||||
background-image: url('@/assets/images/bg-4.png');
|
||||
background-size: 100% 100%;
|
||||
&-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
&-title {
|
||||
font-size: vw(14);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
&-value {
|
||||
margin-top: vh(10);
|
||||
font-weight: bold;
|
||||
font-size: vw(24);
|
||||
color: #02f9fa;
|
||||
}
|
||||
.count {
|
||||
font-weight: bold;
|
||||
font-size: vw(28);
|
||||
color: #ff4400 !important;
|
||||
}
|
||||
.prefix,
|
||||
.suffix {
|
||||
color: #ff4400;
|
||||
font-size: vw(12);
|
||||
}
|
||||
}
|
||||
.title-3 {
|
||||
position: relative;
|
||||
width: vw(344);
|
||||
height: vh(12);
|
||||
margin-top: vh(20);
|
||||
background-image: url('@/assets/images/title-6.png');
|
||||
background-size: 100% 100%;
|
||||
|
||||
& > span {
|
||||
position: absolute;
|
||||
bottom: vh(4);
|
||||
left: vw(20);
|
||||
font-size: vw(15);
|
||||
font-weight: bold;
|
||||
background-image: linear-gradient(to bottom, #ffffff 0%, #0096ff 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
|
||||
color: transparent; /* 兼容其他浏览器 */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
158
src/views/testing/components/box-3.vue
Normal file
158
src/views/testing/components/box-3.vue
Normal file
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<!-- 视频 -->
|
||||
<div class="box-3-content">
|
||||
|
||||
<div class="left-nav">
|
||||
<div class="top-box">
|
||||
<!-- <div class="title">监控切换</div> -->
|
||||
<div class="ul">
|
||||
<div class="li active">异常告警</div>
|
||||
<div class="li">景区入口</div>
|
||||
<div class="li">核心路段</div>
|
||||
<div class="li">公共交通</div>
|
||||
<div class="li">广场</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bom-box">
|
||||
<div class="title">
|
||||
<span>检索</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 视频 -->
|
||||
<div class="video-box">
|
||||
<div class="v-item" v-for="item in 15">
|
||||
<!-- 视频 -->
|
||||
<vue3VideoPlay
|
||||
v-bind="options"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { fitChartSize } from '@/utils/dataUtil'
|
||||
const options = reactive({
|
||||
src: "http://192.168.1.60:8080/live/340200000013200000011_34020000001320000001/hls.m3u8", //视频源
|
||||
type: 'm3u8', //视频类型
|
||||
width:"100%",
|
||||
height:"100%",
|
||||
color: "#409eff", //主题色
|
||||
title: "", //视频名称
|
||||
muted: false, //静音
|
||||
webFullScreen: false,
|
||||
speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
|
||||
autoPlay: true, //自动播放
|
||||
loop: false, //循环播放
|
||||
mirror: false, //镜像画面
|
||||
ligthOff: false, //关灯模式
|
||||
volume: 0.3, //默认音量大小
|
||||
control: true, //是否显示控制
|
||||
controlBtns: [
|
||||
// "audioTrack",
|
||||
// "quality",
|
||||
// "speedRate",
|
||||
// "volume",
|
||||
"setting",
|
||||
"pip",
|
||||
"pageFullScreen",
|
||||
"fullScreen",
|
||||
], //显示所有按钮,
|
||||
});
|
||||
|
||||
// webscoket连接
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.box-3-content{
|
||||
width:vw(2353);
|
||||
height:vh(964);
|
||||
// background-image: url('/src/assets/images/monotir-bg-1.png');
|
||||
background-size: 100% 100%;
|
||||
margin-top: vh(120);
|
||||
display: flex;
|
||||
.video-box{
|
||||
flex:1;
|
||||
// padding:vh(40) vw(20);
|
||||
display:flex;
|
||||
flex-wrap: wrap;
|
||||
padding-top:0;
|
||||
margin-left:vw(20);
|
||||
.v-item{
|
||||
width:vw(400);
|
||||
height:vh(300);
|
||||
background-image: url('/src/assets/images/v-item-bg.png');
|
||||
background-size: 100% 100%;
|
||||
padding:vw(20);
|
||||
margin-right:vw(4);
|
||||
margin-bottom:vh(4);
|
||||
}
|
||||
}
|
||||
.left-nav{
|
||||
margin-left:vw(20);
|
||||
// margin-top:vh(35);
|
||||
width:vw(250);
|
||||
.bom-box{
|
||||
margin-top:vh(20);
|
||||
.title{
|
||||
background-image: url('/src/assets/images/nav-l-t-bg.png');
|
||||
background-size: 100% 100%;
|
||||
|
||||
span{
|
||||
margin-left:vw(30);
|
||||
font-weight: 800;
|
||||
font-size: vw(15);
|
||||
line-height: vh(26);
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
|
||||
background: linear-gradient(90deg, #FFFFFF 0%, #5CB5FF 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.top-box{
|
||||
text-align: left;
|
||||
font-weight: 400;
|
||||
font-size: vw(18);
|
||||
color: rgba(255,255,255,0.7);
|
||||
line-height: 21px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
.title{
|
||||
font-weight: 600;
|
||||
font-size: vw(15);
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
height:vh(35);
|
||||
line-height: vh(34);
|
||||
padding-left:vw(20);
|
||||
// background: linear-gradient(90deg, #FFFFFF 0%, #75C1FF 100%);
|
||||
}
|
||||
.ul{
|
||||
.li{
|
||||
background: url('/src/assets/images/m-nav-bg-1.png');
|
||||
background-size: 100% 100%;
|
||||
width:vw(250);
|
||||
height:vh(58);
|
||||
line-height:vh(58);
|
||||
text-align: center;
|
||||
margin-bottom:vh(15);
|
||||
}
|
||||
.active{
|
||||
background: url('/src/assets/images/m-nav-bg-2.png');
|
||||
background-size: 100% 100%;
|
||||
// width:vw(178);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
177
src/views/testing/components/box-4.vue
Normal file
177
src/views/testing/components/box-4.vue
Normal file
@@ -0,0 +1,177 @@
|
||||
<template>
|
||||
<div class="box-4-content">
|
||||
<div class="top-box">
|
||||
<div class="title">融合通信</div>
|
||||
<div class="icon-box flex">
|
||||
<div class="icon">
|
||||
<img src="/src/assets/images/r-icon-1.png" alt="" />
|
||||
白帝城
|
||||
</div>
|
||||
<div class="icon"><img src="/src/assets/images/r-icon-2.png" alt="" />三峡之颠</div>
|
||||
<div class="icon"><img src="/src/assets/images/r-icon-3.png" alt="" />龙桥河</div>
|
||||
<div class="icon"><img src="/src/assets/images/r-icon-4.png" alt="" />消防队</div>
|
||||
<div class="icon"><img src="/src/assets/images/r-icon-5.png" alt="" />文旅城</div>
|
||||
<div class="icon"><img src="/src/assets/images/r-icon-6.png" alt="" />交通城</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bom-box">
|
||||
<div class="title">
|
||||
<span>最近联系</span>
|
||||
</div>
|
||||
<table class="table">
|
||||
<tr class="tr-th">
|
||||
<th>人员姓名</th>
|
||||
<th>部门</th>
|
||||
<th>职位</th>
|
||||
<th>时间</th>
|
||||
</tr>
|
||||
<tr class="tr-td">
|
||||
<td>January</td>
|
||||
<td>$100</td>
|
||||
<td>January</td>
|
||||
<td>$100</td>
|
||||
</tr>
|
||||
<tr class="tr-td">
|
||||
<td>February</td>
|
||||
<td>$80</td>
|
||||
<td>February</td>
|
||||
<td>$80</td>
|
||||
</tr>
|
||||
<tr class="tr-td">
|
||||
<td>February</td>
|
||||
<td>$80</td>
|
||||
<td>February</td>
|
||||
<td>$80</td>
|
||||
</tr>
|
||||
<tr class="tr-td">
|
||||
<td>February</td>
|
||||
<td>$80</td>
|
||||
<td>February</td>
|
||||
<td>$80</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box-4-content{
|
||||
width:vw(317);
|
||||
height:vh(1062);
|
||||
background-image: url('/src/assets/images/rt-bg.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-top:vh(10);
|
||||
margin-left:vw(10);
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
.bom-box{
|
||||
.table{
|
||||
width:100%;
|
||||
margin-top:vh(5);
|
||||
.tr-th{
|
||||
background: linear-gradient( 180deg, rgba(0,99,255,0) 0%, #0063FF 100%);
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
// border: 1px solid;
|
||||
border-image: linear-gradient(180deg, rgba(0, 150, 255, 0), rgba(0, 150, 255, 1)) 1 1;
|
||||
font-weight: 400;
|
||||
font-size: vw(12);
|
||||
color: #0096FF;
|
||||
line-height: vh(14);
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
|
||||
th{
|
||||
padding:vw(5);
|
||||
}
|
||||
|
||||
}
|
||||
.tr-td{
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: #F1F7FF;
|
||||
line-height: vh(16);
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
|
||||
td{
|
||||
padding:vh(5) vw(10)
|
||||
}
|
||||
}
|
||||
.tr-td:nth-child(odd){
|
||||
background: linear-gradient( 90deg, rgba(0,150,255,0) 0%, rgba(0,150,255,0.22) 100%);
|
||||
}
|
||||
}
|
||||
.title{
|
||||
background-image: url('/src/assets/images/nav-l-t-bg.png');
|
||||
background-size: 100% 100%;
|
||||
|
||||
span{
|
||||
margin-left:vw(30);
|
||||
font-weight: 800;
|
||||
font-size: vw(15);
|
||||
line-height: vh(26);
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
|
||||
background: linear-gradient(90deg, #FFFFFF 0%, #5CB5FF 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.top-box{
|
||||
width:100%;
|
||||
height:vh(500);
|
||||
.icon-box{
|
||||
justify-content: center;
|
||||
font-family: Inter, Inter;
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: #FFFFFF;
|
||||
line-height: vh(16);
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
flex-wrap: wrap;
|
||||
.icon{
|
||||
display: block;
|
||||
margin:vh(20) auto;
|
||||
width:vw(86);
|
||||
height:vh(104);
|
||||
img{
|
||||
width:vw(86);
|
||||
height:vh(104);
|
||||
}
|
||||
}
|
||||
}
|
||||
.title{
|
||||
font-weight: 800;
|
||||
font-size: vw(16);
|
||||
line-height: vh(26);
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
|
||||
background: linear-gradient(90deg, #FFFFFF 0%, #5CB5FF 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: transparent;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
514
src/views/testing/components/box-5.vue
Normal file
514
src/views/testing/components/box-5.vue
Normal file
@@ -0,0 +1,514 @@
|
||||
<template>
|
||||
<!-- 安全检测 -->
|
||||
<div class="box-detection">
|
||||
<!-- 地图 -->
|
||||
<div class="detection-top">
|
||||
<!-- <img class="map-img" src="@/assets/images/map-img-1.jpg" alt="" /> -->
|
||||
|
||||
<Map />
|
||||
</div>
|
||||
<div class="detection-bom flex">
|
||||
<!-- 数据 -->
|
||||
<div class="d-left">
|
||||
<div class="t-title">
|
||||
<span>监控点位统计</span>
|
||||
</div>
|
||||
<div class="t-census flex">
|
||||
<img class="t-icon" src="@/assets/images/t-ico-0.png" alt="" />
|
||||
<div class="item">
|
||||
监控点位 <div class="color1"><countup endVal="895" /></div>
|
||||
</div>
|
||||
<div class="item">
|
||||
核心点位 <div class="color1"><countup endVal="895" /></div>
|
||||
</div>
|
||||
<div class="item">
|
||||
拥堵次数 <div class="color2"><countup endVal="895" /></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="title-3"><span>异常告警占比</span></div>
|
||||
<div class="pt-20 h-flex">
|
||||
<div class="left">
|
||||
<v-chart class="chart" :option="optionBar" autoresize />
|
||||
<!-- <v-chart class="chart" :option="option1" autoresize /> -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-right">
|
||||
<div class="t-title">
|
||||
<span>交通信息</span>
|
||||
</div>
|
||||
<div class="t-census flex">
|
||||
<img class="t-icon" src="@/assets/images/t-ico-1.png" alt="" />
|
||||
<div class="item">
|
||||
监控点位 <div class="color1"><countup endVal="895" /></div>
|
||||
</div>
|
||||
<div class="item">
|
||||
核心点位 <div class="color1"><countup endVal="895" /></div>
|
||||
</div>
|
||||
<div class="item">
|
||||
拥堵次数 <div class="color1"><countup endVal="895" /></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="title-3"><span>异常告警占比</span></div>
|
||||
<div class="pt-20 h-flex">
|
||||
<div class="left">
|
||||
<v-chart class="line-chart" :option="optionLine" autoresize />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from 'echarts'
|
||||
import countup from 'vue-countup-v3'
|
||||
import { fitChartSize } from '@/utils/dataUtil'
|
||||
import Map from '@/components/Map/marker.vue'
|
||||
import VChart, { THEME_KEY } from 'vue-echarts';
|
||||
import { ref, provide } from 'vue';
|
||||
|
||||
provide(THEME_KEY, 'dark');
|
||||
const option1 = ref({
|
||||
backgroundColor:'transparent',
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
type: 'scroll',
|
||||
orient: 'vertical',
|
||||
right: 30,
|
||||
top: 30,
|
||||
bottom: 20,
|
||||
itemWidth:5,
|
||||
itemHeight:5,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
left:-100,
|
||||
top:-30,
|
||||
// width:200,
|
||||
// height:200,
|
||||
radius: ['40%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
padAngle: 5,
|
||||
itemStyle: {
|
||||
borderRadius: 2
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: fitChartSize(10),
|
||||
fontWeight: 'bold',
|
||||
color:'#fff'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: true
|
||||
},
|
||||
data: [
|
||||
{ value: 200, name: '异常状况1' },
|
||||
{ value: 500, name: '异常状况2' },
|
||||
{ value: 234, name: '异常状况3' },
|
||||
{ value: 135, name: '异常状况4' },
|
||||
{ value: 100, name: '异常状况5' },
|
||||
{ value: 777, name: '异常状况6' },
|
||||
{ value: 777, name: '其他' },
|
||||
]
|
||||
|
||||
},
|
||||
],
|
||||
});
|
||||
const optionLine = ref({
|
||||
backgroundColor:'transparent',
|
||||
grid:{
|
||||
top:'50',
|
||||
bottom:'50',
|
||||
left:'4%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
nameLocation: 'middle',
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
fontSize:10,
|
||||
interval: 0, // 显示所有标签
|
||||
rotate: 0, // 旋转标签45度
|
||||
},
|
||||
data: ['10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00'],
|
||||
axisTisk:{
|
||||
show: true,
|
||||
// 设置刻度长度
|
||||
length: 1,
|
||||
lineStyle: {
|
||||
type: 'dashed' ,// 设置为虚线
|
||||
width:0,
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#0096FF' // 设置横线颜色
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min:0,
|
||||
max:45,
|
||||
interval:15,
|
||||
axisLabel: {
|
||||
fontSize: fitChartSize(12) ,// 设置Y轴刻度字体大小
|
||||
color: 'rgba(255,255,255,0.9)',
|
||||
},
|
||||
splitLine:{
|
||||
show:true,
|
||||
lineStyle:{
|
||||
type:'dashed',
|
||||
color:'#00D0FF'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
data: [0, 23, 30, 24, 40, 30, 45,26],
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
label:{
|
||||
show:false,//隐藏坐标点
|
||||
},
|
||||
itemStyle:{
|
||||
color:'transparent'
|
||||
},
|
||||
markLine:{
|
||||
symbol:['none','none'],
|
||||
label:{show:false}
|
||||
},
|
||||
|
||||
lineStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#7DE7FF'
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: '#02F9FA'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#009DFF'
|
||||
},
|
||||
]),
|
||||
width:3,
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
})
|
||||
const optionBar = ref({
|
||||
backgroundColor:'transparent',
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
// type: 'scroll',
|
||||
// orient: 'vertical',
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 20,
|
||||
itemWidth:5,
|
||||
itemHeight:5,
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '20%',
|
||||
containLabel: true,
|
||||
show:false,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
nameLocation: 'middle',
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
axisLabel: {
|
||||
fontSize:fitChartSize(10),
|
||||
interval: 0, // 显示所有标签
|
||||
rotate: 0, // 旋转标签45度
|
||||
},
|
||||
minorTisk:{
|
||||
show:false,
|
||||
},
|
||||
data: ['10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00'],
|
||||
axisTisk:{
|
||||
alignWithLabel: true,
|
||||
show: false,
|
||||
// 设置刻度长度
|
||||
length: 0,
|
||||
lineStyle: {
|
||||
type: 'dashed' ,// 设置为虚线
|
||||
width:0,
|
||||
}
|
||||
},
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
|
||||
type: 'value',
|
||||
min:0,
|
||||
max:45,
|
||||
interval:15,
|
||||
|
||||
axisLabel: {
|
||||
fontSize: fitChartSize(12) ,// 设置Y轴刻度字体大小
|
||||
color: 'rgba(255,255,255,0.9)',
|
||||
offset:10,
|
||||
},
|
||||
splitLine:{
|
||||
show:false,
|
||||
lineStyle:{
|
||||
type:'dashed',
|
||||
color:'#00D0FF'
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
],
|
||||
series: [
|
||||
|
||||
{
|
||||
itemStyle: {
|
||||
// 设置柱状图颜色
|
||||
color: '#0D53FF'
|
||||
},
|
||||
name: '三峡之巅',
|
||||
type: 'bar',
|
||||
stack: 'Ad',
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [10, 0, 16, 10, 22, 11, 9,30],
|
||||
barWidth: '45%', // 设置柱体粗细，可以是百分比或者像素值
|
||||
},
|
||||
{
|
||||
name: '白帝城',
|
||||
type: 'bar',
|
||||
stack: 'Ad',
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
itemStyle: {
|
||||
// 设置柱状图颜色
|
||||
color: '#05FFB9'
|
||||
},
|
||||
data: [20, 5, 14, 14, 0, 20, 11,2]
|
||||
},
|
||||
{
|
||||
name: '龙河桥',
|
||||
type: 'bar',
|
||||
stack: 'Ad',
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
itemStyle: {
|
||||
// 设置柱状图颜色
|
||||
color: '#FFCB39'
|
||||
},
|
||||
data: [15, 20, 8, 19, 20, 5, 22,13]
|
||||
},
|
||||
|
||||
]
|
||||
})
|
||||
onMounted(() => {})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.line-chart{
|
||||
width:100%;
|
||||
height:vh(240);
|
||||
}
|
||||
.box-detection{
|
||||
margin-top: vh(120);
|
||||
width:vw(820);
|
||||
height:vh(950);
|
||||
background: linear-gradient( 321deg, #0B2F64 0%, #062B57 91%, rgba(5,40,79,0) 100%);
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
.detection-top{
|
||||
width:100%;
|
||||
height:vh(580);
|
||||
background-color: #fff;
|
||||
.map-img{
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
}
|
||||
.detection-bom{
|
||||
justify-content: space-between;
|
||||
.d-left{
|
||||
width:vw(405);
|
||||
.left{
|
||||
width:100%;
|
||||
height:vh(240);
|
||||
}
|
||||
}
|
||||
.d-right{
|
||||
width:vw(405);
|
||||
}
|
||||
.box {
|
||||
width:100%;
|
||||
padding:vw(5);
|
||||
margin-top:vh(5);
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
&:nth-child(1) {
|
||||
margin-right: vw(10);
|
||||
}
|
||||
.title-2 {
|
||||
width: vw(253);
|
||||
height: vh(28);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-image: url('@/assets/images/title-5.png');
|
||||
background-size: 100% 100%;
|
||||
& > span {
|
||||
padding-left: vw(22);
|
||||
font-weight: bold;
|
||||
font-size: vw(15);
|
||||
background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
|
||||
color: transparent; /* 兼容其他浏览器 */
|
||||
}
|
||||
}
|
||||
.statistic {
|
||||
display: flex;
|
||||
margin-top: vh(12);
|
||||
width: 100%;
|
||||
height: vh(88);
|
||||
background-image: url('@/assets/images/bg-4.png');
|
||||
background-size: 100% 100%;
|
||||
&-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
&-title {
|
||||
font-size: vw(14);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
&-value {
|
||||
margin-top: vh(10);
|
||||
font-weight: bold;
|
||||
font-size: vw(24);
|
||||
color: #02f9fa;
|
||||
}
|
||||
.count {
|
||||
font-weight: bold;
|
||||
font-size: vw(28);
|
||||
color: #ff4400 !important;
|
||||
}
|
||||
.prefix,
|
||||
.suffix {
|
||||
color: #ff4400;
|
||||
font-size: vw(12);
|
||||
}
|
||||
}
|
||||
.title-3 {
|
||||
position: relative;
|
||||
width: vw(344);
|
||||
height: vh(12);
|
||||
margin-top: vh(20);
|
||||
background-image: url('@/assets/images/title-6.png');
|
||||
background-size: 100% 100%;
|
||||
|
||||
& > span {
|
||||
position: absolute;
|
||||
bottom: vh(4);
|
||||
left: vw(20);
|
||||
font-size: vw(15);
|
||||
font-weight: bold;
|
||||
background-image: linear-gradient(to bottom, #ffffff 0%, #0096ff 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
|
||||
color: transparent; /* 兼容其他浏览器 */
|
||||
}
|
||||
}
|
||||
}
|
||||
.t-title {
|
||||
margin: vh(10) auto;
|
||||
width: 100%;
|
||||
height: vh(32);
|
||||
font-weight: 800;
|
||||
font-size: vw(16);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-image: url('@/assets/images/title-4.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.t-census{
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-image: url('@/assets/images/i-data-bg-1.png');
|
||||
background-size: 100% 100%;
|
||||
padding:vw(10);
|
||||
.t-icon{
|
||||
width:vw(45);
|
||||
height:vh(48);
|
||||
}
|
||||
.item{
|
||||
flex:1;
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: rgba(255,255,255,0.9);
|
||||
line-height: vh(16);
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
.color1{
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
font-size: vw(24);
|
||||
color: #FFFFFF;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
.color2{
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
font-size: vw(24);
|
||||
color: #F15A25;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
98
src/views/testing/index.vue
Normal file
98
src/views/testing/index.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<main class="wrapper">
|
||||
<box1 />
|
||||
<box5/>
|
||||
<box3 />
|
||||
<div class="header">
|
||||
<ul class="nav-left">
|
||||
<li class="nav-left-item">奉节县</li>
|
||||
<li class="nav-left-item">三峡之巅</li>
|
||||
<li class="nav-left-item">白帝城</li>
|
||||
<li class="nav-left-item">龙河桥</li>
|
||||
</ul>
|
||||
<div class="title">三峡之巅-安全检测</div>
|
||||
<ul class="nav-right">
|
||||
<li class="nav-right-item">路段1</li>
|
||||
<li class="nav-right-item">路段</li>
|
||||
<li class="nav-right-item">路段</li>
|
||||
<li class="nav-right-item">路段</li>
|
||||
</ul>
|
||||
</div>
|
||||
<box4 />
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import box1 from './components/box-1.vue'
|
||||
import box4 from './components/box-4.vue'
|
||||
import box3 from './components/box-3.vue'
|
||||
import box5 from './components/box-5.vue'
|
||||
|
||||
onMounted(() => {})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wrapper {
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background-color: #0a254b;
|
||||
.header {
|
||||
position: absolute;
|
||||
left: vw(326);
|
||||
.title {
|
||||
width: vw(3133);
|
||||
height: vh(120);
|
||||
font-size: vw(48);
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
padding-top: vh(20);
|
||||
color: #fff;
|
||||
letter-spacing: vw(10);
|
||||
box-sizing: border-box;
|
||||
text-shadow: 0px 4px 7px rgba(0, 150, 255, 0.75);
|
||||
background-image: url('@/assets/images/title.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.nav-left {
|
||||
position: absolute;
|
||||
left: vw(380);
|
||||
top: vh(34);
|
||||
display: flex;
|
||||
&-item {
|
||||
cursor: pointer;
|
||||
margin-left: vh(-10);
|
||||
width: vw(210);
|
||||
height: vh(56);
|
||||
padding-top: vh(10);
|
||||
font-weight: 600;
|
||||
font-size: vw(28);
|
||||
text-align: center;
|
||||
color: rgba(208, 236, 255, 0.9);
|
||||
background-image: url('@/assets/images/title-2.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.nav-right {
|
||||
position: absolute;
|
||||
right: vw(424);
|
||||
top: vh(34);
|
||||
display: flex;
|
||||
&-item {
|
||||
cursor: pointer;
|
||||
margin-right: vh(-10);
|
||||
width: vw(210);
|
||||
height: vh(56);
|
||||
padding-top: vh(10);
|
||||
font-weight: 600;
|
||||
font-size: vw(28);
|
||||
text-align: center;
|
||||
color: rgba(208, 236, 255, 0.9);
|
||||
background-image: url('@/assets/images/title-3.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user