|
|
@@ -0,0 +1,495 @@
|
|
|
+<template>
|
|
|
+ <div class="person_box">
|
|
|
+ <dv-border-box-1>
|
|
|
+ <div class="box_monitoring">
|
|
|
+ <div class="flex_spection box_tion_zx">
|
|
|
+ <div class="line_blue">
|
|
|
+ <div class="blue_dot"></div>
|
|
|
+ </div>
|
|
|
+ <div class="monit_title">在线</div>
|
|
|
+ <span class="monit_num">83</span>
|
|
|
+ </div>
|
|
|
+ <div class="camera">
|
|
|
+ <div class="entry-box">
|
|
|
+ <div class="entry-box-item">
|
|
|
+ <div class="item-center-line"></div>
|
|
|
+ <div class="item-center-pie"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="img_camera">
|
|
|
+ <div ref="chartDistrict" style="width: 100%;height: 100%;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex_spection box_tion_lx">
|
|
|
+ <div class="line_green">
|
|
|
+ <div class="green_dot"></div>
|
|
|
+ </div>
|
|
|
+ <div class="monit_title">离线</div>
|
|
|
+ <span class="monit_num">23</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </dv-border-box-1>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import * as echarts from 'echarts'
|
|
|
+defineProps({
|
|
|
+ title: {
|
|
|
+ type: String,
|
|
|
+ default: '暂无数据'
|
|
|
+ }
|
|
|
+})
|
|
|
+const chartDistrict = ref(null);
|
|
|
+let chartDom = null;
|
|
|
+const initAccess = () => {
|
|
|
+ chartDom = echarts.init(chartDistrict.value);
|
|
|
+ let option = {
|
|
|
+ graphic: {
|
|
|
+ elements: [
|
|
|
+ {
|
|
|
+ zlevel: 101,
|
|
|
+ type: 'rect',
|
|
|
+ left: 'center',
|
|
|
+ top: 396,
|
|
|
+ shape: {
|
|
|
+ x: 0, // 矩形的 x 坐标
|
|
|
+ y: 0, // 矩形的 y 坐标
|
|
|
+ width: 28, // 矩形的宽度
|
|
|
+ height: 3, // 矩形的高度
|
|
|
+ },
|
|
|
+ style: {
|
|
|
+ fill: '#005AFF', // 设置背景颜色为半透明白色
|
|
|
+ stroke: 'none',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ zlevel: 101,
|
|
|
+ type: 'text',
|
|
|
+ left: 'center',
|
|
|
+ top: 410,
|
|
|
+ style: {
|
|
|
+ text: '完成率',
|
|
|
+ textAlign: 'center',
|
|
|
+ fill: '#75AFFC',
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ title: {
|
|
|
+ show: false,
|
|
|
+ offsetCenter: [0, '60%'],
|
|
|
+ padding: [5, 10],
|
|
|
+ fontSize: 12,
|
|
|
+ color: '#E9F7FF',
|
|
|
+ },
|
|
|
+ zlevel: 100,
|
|
|
+ name: '外部',
|
|
|
+ type: 'gauge',
|
|
|
+ radius: '100%',
|
|
|
+ center: ['50%', '50%'],
|
|
|
+ itemStyle: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: '#030C1D',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.5,
|
|
|
+ color: '#005AFF',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: '#005AFF',
|
|
|
+ },
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ progress: {
|
|
|
+ show: true,
|
|
|
+ width: 13,
|
|
|
+ roundCap: false,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ width: 2,
|
|
|
+ type: 'dashed',
|
|
|
+ color: [[1, '#a3b3d0']],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ sartAngle: 225,
|
|
|
+ endAngle: -45,
|
|
|
+ clockwise: true,
|
|
|
+ min: 0,
|
|
|
+ max: 100,
|
|
|
+ splitNumber: 10,
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: {
|
|
|
+ color: '#75AFFC',
|
|
|
+ fontSize: 20,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ pointer: {
|
|
|
+ show: false,
|
|
|
+ icon: 'triangle',
|
|
|
+ width: '40%', //指针的宽度
|
|
|
+ length: '170%', //指针长度，按照半圆半径的百分比
|
|
|
+ },
|
|
|
+ detail: {
|
|
|
+ valueAnimation: true,
|
|
|
+ // width: '60%',
|
|
|
+ // lineHeight: 1,
|
|
|
+ // borderRadius: 8,
|
|
|
+ offsetCenter: [0, '-3%'],
|
|
|
+ fontSize: 24,
|
|
|
+ color: '#E9F7FF',
|
|
|
+ textStyle: {
|
|
|
+ fontFamily: 'MyFont2',
|
|
|
+ },
|
|
|
+ formatter: function (val) {
|
|
|
+ let str = val + '{a|%}'
|
|
|
+ return str
|
|
|
+ },
|
|
|
+ rich: {
|
|
|
+ a: {
|
|
|
+ color: '#E9F7FF',
|
|
|
+ fontSize: 19,
|
|
|
+ padding: [6, 0, 0, 0],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ offsetCenter: [0, 10],
|
|
|
+ markPoint: {
|
|
|
+ symbol: 'circle',
|
|
|
+ symbolSize: 80,
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ x: 'center',
|
|
|
+ y: '50%',
|
|
|
+ itemStyle: {
|
|
|
+ color: ' rgba(23,39,90,0.54)', // 指针颜色，默认(auto)取数值所在的区间的颜色
|
|
|
+ borderWidth: 1, // 描边线宽,默认 0。为 0 时无描边。
|
|
|
+ borderType: 'solid', // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
|
|
|
+ borderColor: '#3375E8', // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
|
|
|
+ shadowBlur: 5, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
|
|
+ shadowColor: '#08398b',
|
|
|
+ opacity: 1,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ name: '完成率',
|
|
|
+ value: 82,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '内部刻度',
|
|
|
+ type: 'gauge',
|
|
|
+ backgroundColor: '#071d3f',
|
|
|
+ center: ['50%', '50%'],
|
|
|
+ itemStyle: {
|
|
|
+ shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
|
|
+ shadowColor: '#08398b',
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: '#0548c3',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: '#005afe',
|
|
|
+ },
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ progress: {
|
|
|
+ show: true,
|
|
|
+ width: 2,
|
|
|
+ },
|
|
|
+ radius: '78%',
|
|
|
+ axisTick: {
|
|
|
+ //一个一个的小刻度
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ //周围刻度线的数字
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ detail: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ pointer: {
|
|
|
+ icon: 'triangle',
|
|
|
+ width: '60%', //指针的宽度
|
|
|
+ length: '70%', //指针长度，按照半圆半径的百分比
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ name: '',
|
|
|
+ value: 82,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '内部圆圈',
|
|
|
+ type: 'gauge',
|
|
|
+ center: ['50%', '50%'],
|
|
|
+ itemStyle: {
|
|
|
+ shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
|
|
+ shadowColor: '#08398b',
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: '#061d3e',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.5,
|
|
|
+ color: '#073b97',
|
|
|
+ },
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ progress: {
|
|
|
+ show: true,
|
|
|
+ width: 2,
|
|
|
+ },
|
|
|
+ radius: '55%',
|
|
|
+ axisTick: {
|
|
|
+ //一个一个的小刻度
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ //周围刻度线的数字
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ detail: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ pointer: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ name: '',
|
|
|
+ value: 100,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '遮罩',
|
|
|
+ tooltip: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ type: 'pie',
|
|
|
+ radius: '36%',
|
|
|
+ center: ['50%', '50%'], // 默认全局居中
|
|
|
+ hoverAnimation: false,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#071d3f',
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ color: '#071d3f',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ normal: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ animation: false,
|
|
|
+ data: [1.9],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ chartDom.setOption(option)
|
|
|
+};
|
|
|
+// 生命周期
|
|
|
+onMounted(() => {
|
|
|
+ initAccess()
|
|
|
+});
|
|
|
+// 窗口自适应
|
|
|
+window.addEventListener('resize', () => {
|
|
|
+ chartDom?.resize();
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.person_box {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ // padding: 0px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.box_monitoring {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 100%;
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.line_blue {
|
|
|
+ position: relative;
|
|
|
+ height: 5px;
|
|
|
+ width: 70%;
|
|
|
+ background-color: rgba(5, 125, 230, .5);
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.blue_dot {
|
|
|
+ position: absolute;
|
|
|
+ left: 5px;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 20px;
|
|
|
+ border-left: 5px solid #000;
|
|
|
+ border-right: 5px solid #000;
|
|
|
+ background-color: rgba(5, 125, 230, 1);
|
|
|
+}
|
|
|
+
|
|
|
+.line_green {
|
|
|
+ position: relative;
|
|
|
+ height: 5px;
|
|
|
+ width: 70%;
|
|
|
+ background-color: rgba(5, 227, 227, .5);
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.green_dot {
|
|
|
+ position: absolute;
|
|
|
+ left: 5px;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 20px;
|
|
|
+ border-left: 5px solid #000;
|
|
|
+ border-right: 5px solid #000;
|
|
|
+ background-color: rgba(5, 227, 227, 1);
|
|
|
+}
|
|
|
+
|
|
|
+.img_camera {
|
|
|
+ position: absolute;
|
|
|
+ width: 120px;
|
|
|
+ height: 120px;
|
|
|
+ top: calc(50% - 60px);
|
|
|
+ left: calc(50% - 60px);
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 1px solid rgb(15, 39, 66);
|
|
|
+ box-shadow: inset 0px 0px 20px 2px rgb(78, 207, 220);
|
|
|
+}
|
|
|
+
|
|
|
+.flex_spection {
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.camera {
|
|
|
+ width: 190px;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .entry-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: fill;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .entry-box-item {
|
|
|
+ width: 100%;
|
|
|
+ height: 180px;
|
|
|
+ color: #fff;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ background: radial-gradient(circle,
|
|
|
+ rgba(51, 149, 233, 0) 100px,
|
|
|
+ rgba(51, 149, 233, 0) 100px);
|
|
|
+
|
|
|
+ .item-center-line {
|
|
|
+ width: 180px;
|
|
|
+ height: 180px;
|
|
|
+ background-color: transparent;
|
|
|
+ border-top: 3px solid rgb(22, 110, 191);
|
|
|
+ border-bottom: 3px solid rgb(22, 110, 191);
|
|
|
+ border-radius: 50%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: absolute;
|
|
|
+ top: calc(50% - 90px);
|
|
|
+ left: calc(50% - 90px);
|
|
|
+ animation: rotate 8s infinite linear;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-center-pie {
|
|
|
+ width: 150px;
|
|
|
+ height: 150px;
|
|
|
+ background-color: transparent;
|
|
|
+ border-top: 2px solid rgb(22, 110, 191);
|
|
|
+ border-bottom: 2px solid rgb(22, 110, 191);
|
|
|
+ border-radius: 50%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: absolute;
|
|
|
+ top: calc(50% - 75px);
|
|
|
+ left: calc(50% - 75px);
|
|
|
+ animation: rotate1 8s infinite linear;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 定义中间球体顺时针转动 */
|
|
|
+@keyframes rotate {
|
|
|
+ from {
|
|
|
+ transform: rotate(0deg);
|
|
|
+ }
|
|
|
+
|
|
|
+ to {
|
|
|
+ transform: rotate(360deg);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 定义中间圆逆时针转动 */
|
|
|
+@keyframes rotate1 {
|
|
|
+ from {
|
|
|
+ transform: rotate(0deg);
|
|
|
+ }
|
|
|
+
|
|
|
+ to {
|
|
|
+ transform: rotate(-360deg);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.monit_title {
|
|
|
+ font-size: 16px;
|
|
|
+ background-image: -webkit-linear-gradient(bottom, rgb(120, 173, 221), rgb(229, 232, 236));
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ padding: 6px 0px;
|
|
|
+}
|
|
|
+
|
|
|
+.monit_num {
|
|
|
+ font-size: 30px;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+</style>
|
AaronBruin