|
|
@@ -0,0 +1,837 @@
|
|
|
+<template>
|
|
|
+ <div class="inspection">
|
|
|
+ <div class="left_spection">
|
|
|
+ <div class="facility_entry">
|
|
|
+ <HeadlineTag value="按设备统计"></HeadlineTag>
|
|
|
+ <div class="box_arch">
|
|
|
+ <div ref="chartFacility" style="width: 100%;height: 100%;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex_spection">
|
|
|
+ <HeadlineTag value="报警列表"></HeadlineTag>
|
|
|
+ <div class="box_arch_point">
|
|
|
+ <div class="point_box" style="margin-top: 10px;">
|
|
|
+ <el-input v-model="input" placeholder="按报警名称搜索" />
|
|
|
+ </div>
|
|
|
+ <div style="height: calc(100% - 160px);">
|
|
|
+ <Empty></Empty>
|
|
|
+ </div>
|
|
|
+ <div class="center_in">
|
|
|
+ <pagination :total="total" v-model:page="queryParams.pageNum"
|
|
|
+ v-model:limit="queryParams.pageSize" layout="total, prev, pager, next"
|
|
|
+ @pagination="getList" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right_spection">
|
|
|
+ <div class="operation_spection">
|
|
|
+ <HeadlineTag value="24小时告警数量趋势"></HeadlineTag>
|
|
|
+ <div class="entry">
|
|
|
+ <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="left_water">
|
|
|
+ <span class="water_span_title">75</span>
|
|
|
+ <div class="tile_fx">事件风险</div>
|
|
|
+ </div>
|
|
|
+ <div class="right_water">
|
|
|
+ <span class="water_span_title">83</span>
|
|
|
+ <div class="tile_fx">告警风险</div>
|
|
|
+ </div>
|
|
|
+ <div class="box_water_drop">
|
|
|
+ <div ref="chartWater" style="width: 140px;height: 140px;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex_spection">
|
|
|
+ <HeadlineTag value="24小时告警数量趋势"></HeadlineTag>
|
|
|
+ <div class="box_arch">
|
|
|
+ <div ref="chartRouting" style="width: 100%;height: 100%;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex_spection">
|
|
|
+ <HeadlineTag value="实时巡检"></HeadlineTag>
|
|
|
+ <div class="box_arch">
|
|
|
+ <dv-scroll-board :config="config" style="width:100%;height:calc(100% - 10px);margin-top: 10px;" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import HeadlineTag from '@/components/HeadlineTag'
|
|
|
+import Empty from '@/components/Empty'
|
|
|
+import * as echarts from 'echarts'
|
|
|
+import 'echarts-liquidfill';
|
|
|
+const total = ref(0);
|
|
|
+const queryParams = ref({
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+});
|
|
|
+const input = ref('')
|
|
|
+const config = ref({
|
|
|
+ headerBGC: '#10285c',
|
|
|
+ oddRowBGC: '#10285c7f',
|
|
|
+ evenRowBGC: '#10285c00',
|
|
|
+ header: ['名称', '位置', '列3'],
|
|
|
+ data: [
|
|
|
+ ['行1列1', '行1列2', '行1列3'],
|
|
|
+ ['行2列1', '行2列2', '行2列3'],
|
|
|
+ ['行3列1', '行3列2', '行3列3'],
|
|
|
+ ['行4列1', '行4列2', '行4列3'],
|
|
|
+ ['行5列1', '行5列2', '行5列3'],
|
|
|
+ ['行6列1', '行6列2', '行6列3'],
|
|
|
+ ['行7列1', '行7列2', '行7列3'],
|
|
|
+ ['行8列1', '行8列2', '行8列3'],
|
|
|
+ ['行9列1', '行9列2', '行9列3'],
|
|
|
+ ['行10列1', '行10列2', '行10列3']
|
|
|
+ ]
|
|
|
+})
|
|
|
+
|
|
|
+/** 查询列表 */
|
|
|
+function getList() {
|
|
|
+};
|
|
|
+const chartRouting = ref(null);
|
|
|
+let chartInstance = null;
|
|
|
+// 初始化图表
|
|
|
+const initChart = () => {
|
|
|
+ chartInstance = echarts.init(chartRouting.value);
|
|
|
+ chartInstance.setOption({
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ lineStyle: {
|
|
|
+ color: {
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(0, 255, 233,0)',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.5,
|
|
|
+ color: 'rgba(255, 255, 255,1)',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(0, 255, 233,0)',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ global: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: '5%',
|
|
|
+ left: '5%',
|
|
|
+ right: '5%',
|
|
|
+ bottom: '5%',
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ splitArea: {
|
|
|
+ // show: true,
|
|
|
+ color: '#f00',
|
|
|
+ lineStyle: {
|
|
|
+ color: '#f00',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 12,
|
|
|
+ color: 'rgba(255,255,255,1)',
|
|
|
+ },
|
|
|
+ formatter: function (params) {
|
|
|
+ return '2021.11.' + params;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ boundaryGap: false,
|
|
|
+ data: [
|
|
|
+ '1',
|
|
|
+ '2',
|
|
|
+ '3',
|
|
|
+ '4',
|
|
|
+ '5',
|
|
|
+ '6',
|
|
|
+ '7',
|
|
|
+ '8',
|
|
|
+ '9',
|
|
|
+ '10',
|
|
|
+ '11',
|
|
|
+ '12',
|
|
|
+ '13',
|
|
|
+ '14',
|
|
|
+ '15',
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ min: 0,
|
|
|
+ // max: 140,
|
|
|
+ splitNumber: 4,
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: ['#fff'],
|
|
|
+ opacity: 0.06,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 12,
|
|
|
+ color: 'rgba(255,255,255,1)',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '注册总量',
|
|
|
+ type: 'line',
|
|
|
+ smooth: true, //是否平滑
|
|
|
+ showAllSymbol: true,
|
|
|
+ // symbol: 'image://./static/images/guang-circle.png',
|
|
|
+ symbol: 'circle',
|
|
|
+ symbolSize: 10,
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#FFBC0D',
|
|
|
+ shadowColor: 'rgba(0, 0, 0, 0)',
|
|
|
+ shadowBlur: 0,
|
|
|
+ shadowOffsetY: 5,
|
|
|
+ shadowOffsetX: 5,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: false,//圆点上方数值
|
|
|
+ position: 'top',
|
|
|
+ textStyle: {
|
|
|
+ color: 'rgb(218 255 232)',
|
|
|
+ fontSize: 16,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color: '#FFBC0D',
|
|
|
+ borderColor: 'rgb(108,78,0)',
|
|
|
+ borderWidth: 1,
|
|
|
+ shadowColor: 'rgba(0, 0, 0, 0)',
|
|
|
+ shadowBlur: 0,
|
|
|
+ shadowOffsetY: 2,
|
|
|
+ shadowOffsetX: 2,
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ color: {
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(255,188,13, 0.4)',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(255,188,13, 0)',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ global: false, // 缺省为 false
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ 30,
|
|
|
+ 32,
|
|
|
+ 32,
|
|
|
+ 32,
|
|
|
+ 32,
|
|
|
+ 38,
|
|
|
+ 32,
|
|
|
+ 33,
|
|
|
+ 36,
|
|
|
+ 32,
|
|
|
+ 32,
|
|
|
+ 32,
|
|
|
+ 34,
|
|
|
+ 32,
|
|
|
+ 32,
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ });
|
|
|
+};
|
|
|
+const chartWater = ref(null);
|
|
|
+let chartInstanceWater = null;
|
|
|
+const initWaterDrop = () => {
|
|
|
+ var value = 0.45;
|
|
|
+ chartInstanceWater = echarts.init(chartWater.value);
|
|
|
+ chartInstanceWater.setOption({
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'liquidFill', //水位图
|
|
|
+ radius: '100%', //显示比例
|
|
|
+ center: ['50%', '50%'], //中心点
|
|
|
+ amplitude: 20, //水波振幅
|
|
|
+ data: [value, value], // data个数代表波浪数
|
|
|
+ color: [
|
|
|
+ {
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: '#446bf5',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: '#2ca3e2',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ globalCoord: false,
|
|
|
+ },
|
|
|
+ ], //波浪颜色
|
|
|
+ backgroundStyle: {
|
|
|
+ borderWidth: 1, //外边框
|
|
|
+ color: 'RGBA(51, 66, 127, 0.7)',
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ //标签设置
|
|
|
+ position: ['50%', '45%'],
|
|
|
+ formatter: '50%', //显示文本,
|
|
|
+ textStyle: {
|
|
|
+ fontSize: '30px', //文本字号,
|
|
|
+ color: '#fff',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ outline: {
|
|
|
+ borderDistance: 0,
|
|
|
+ itemStyle: {
|
|
|
+ borderWidth: 2,
|
|
|
+ borderColor: '#112165',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ });
|
|
|
+}
|
|
|
+const chartFacility = ref(null);
|
|
|
+let chartInstanceFacility = null;
|
|
|
+const initFacility = () => {
|
|
|
+ let nameList = [
|
|
|
+ '超危报警',
|
|
|
+ '高危报警',
|
|
|
+ '中危报警',
|
|
|
+ '低危报警',
|
|
|
+ '设备预警',
|
|
|
+ ];
|
|
|
+ let valueList = [612.5, 548.7, 300.2, 300, 400];
|
|
|
+ let colorList = ['#FB6A66', '#FFC949', '#867DFF', '#06CA70', '#008AFF'];
|
|
|
+ let totalNum = 1000; // 数据总数
|
|
|
+ let emue = ['red', 'yellow', 'purple', 'green', 'blue'];
|
|
|
+ var category = nameList.map((item, index) => {
|
|
|
+ return {
|
|
|
+ value: valueList[index],
|
|
|
+ itemStyle: {
|
|
|
+ color: colorList[index],
|
|
|
+ },
|
|
|
+ };
|
|
|
+ });
|
|
|
+ var totalList = [];
|
|
|
+ var totalBorderList = [];
|
|
|
+ nameList.map((item, index) => {
|
|
|
+ totalList.push({
|
|
|
+ value: totalNum,
|
|
|
+ itemStyle: {
|
|
|
+ color: colorList[index],
|
|
|
+ },
|
|
|
+ });
|
|
|
+ totalBorderList.push({
|
|
|
+ value: totalNum,
|
|
|
+ itemStyle: {
|
|
|
+ borderColor: colorList[index],
|
|
|
+ color: 'transparent',
|
|
|
+ },
|
|
|
+ });
|
|
|
+ });
|
|
|
+ var datas = [];
|
|
|
+ category.forEach((value) => {
|
|
|
+ datas.push(value.value);
|
|
|
+ });
|
|
|
+ chartInstanceFacility = echarts.init(chartFacility.value);
|
|
|
+ chartInstanceFacility.setOption({
|
|
|
+ xAxis: {
|
|
|
+ max: totalNum,
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '5%',
|
|
|
+ top: '5%', // 设置条形图的边距
|
|
|
+ right: '15%',
|
|
|
+ bottom: '0%',
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ inverse: false,
|
|
|
+ data: nameList,
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: 16,
|
|
|
+ barGap: '20%',
|
|
|
+ silent: true,
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ formatter: (item) => {
|
|
|
+ return `{${emue[item['dataIndex']]}|${item['name']}}`;
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ color: '#008AFF',
|
|
|
+ fontSize: 14,
|
|
|
+ },
|
|
|
+ position: [0, '-25px'],
|
|
|
+ show: true,
|
|
|
+ rich: {
|
|
|
+ green: {
|
|
|
+ color: '#06CA70',
|
|
|
+ },
|
|
|
+ blue: {
|
|
|
+ color: '#008AFF',
|
|
|
+ },
|
|
|
+ purple: {
|
|
|
+ color: '#867DFF',
|
|
|
+ },
|
|
|
+ red: {
|
|
|
+ color: '#FB6A66',
|
|
|
+ },
|
|
|
+ yellow: {
|
|
|
+ color: '#FFC949',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: category,
|
|
|
+ z: 1,
|
|
|
+ animationEasing: 'elasticOut',
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ // 分隔
|
|
|
+ type: 'pictorialBar',
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#020b3f',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ symbolRepeat: 'fixed',
|
|
|
+ symbolMargin: 1,
|
|
|
+ symbol: 'rect',
|
|
|
+ symbolClip: false,
|
|
|
+ symbolSize: [1, 17],
|
|
|
+ symbolPosition: 'start',
|
|
|
+ symbolOffset: [3, -2],
|
|
|
+ symbolBoundingData: totalNum,
|
|
|
+ data: [totalNum, totalNum, totalNum, totalNum, totalNum],
|
|
|
+ z: 2,
|
|
|
+ animationEasing: 'elasticOut',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ // label
|
|
|
+ type: 'pictorialBar',
|
|
|
+ symbolBoundingData: totalNum,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: 'none',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ formatter: (params) => {
|
|
|
+ var text;
|
|
|
+ text = `{${emue[params['dataIndex']]}|${((params['data'] * 100) / totalNum).toFixed(2)}%}`;
|
|
|
+ return text;
|
|
|
+ },
|
|
|
+ rich: {
|
|
|
+ green: {
|
|
|
+ color: '#06CA70',
|
|
|
+ },
|
|
|
+ blue: {
|
|
|
+ color: '#008AFF',
|
|
|
+ },
|
|
|
+ purple: {
|
|
|
+ color: '#867DFF',
|
|
|
+ },
|
|
|
+ red: {
|
|
|
+ color: '#FB6A66',
|
|
|
+ },
|
|
|
+ yellow: {
|
|
|
+ color: '#FFC949',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ position: 'right',
|
|
|
+ offset: [0, -3],
|
|
|
+ distance: 10, // 向右偏移位置
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: datas,
|
|
|
+ z: 0,
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ name: '外框',
|
|
|
+ type: 'bar',
|
|
|
+ barGap: '-130%', // 设置外框粗细
|
|
|
+ data: totalBorderList,
|
|
|
+ barWidth: 26,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ // barBorderRadius: [5, 5, 5, 5],
|
|
|
+ borderWidth: 1, // 边框宽度
|
|
|
+ },
|
|
|
+ },
|
|
|
+ z: 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'scatter',
|
|
|
+ name: '条形',
|
|
|
+ symbol: 'roundRect',
|
|
|
+ symbolSize: [4, 12],
|
|
|
+ symbolOffset: [3, -3],
|
|
|
+ symbolKeepAspect: true,
|
|
|
+ data: totalList,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+// 生命周期
|
|
|
+onMounted(() => {
|
|
|
+ initChart()
|
|
|
+ initWaterDrop()
|
|
|
+ initFacility()
|
|
|
+});
|
|
|
+// 窗口自适应
|
|
|
+window.addEventListener('resize', () => {
|
|
|
+ chartInstance?.resize();
|
|
|
+ chartInstanceWater?.resize();
|
|
|
+ chartInstanceFacility?.resize();
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.inspection {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ padding-top: 45px;
|
|
|
+ height: 100vh;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.left_spection {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ width: 25%;
|
|
|
+ // height: calc(100% - 45px);
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding-left: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.right_spection {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ width: 25%;
|
|
|
+ // height: calc(100% - 45px);
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.box_arch_point {
|
|
|
+ height: calc(100% - 40px);
|
|
|
+}
|
|
|
+
|
|
|
+.operation_spection {
|
|
|
+ position: relative;
|
|
|
+ height: 250px;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.facility_entry {
|
|
|
+ position: relative;
|
|
|
+ height: 400px;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.flex_spection {
|
|
|
+ flex: 1;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.box_arch {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: calc(100% - 40px);
|
|
|
+}
|
|
|
+
|
|
|
+.image_tubbiness {
|
|
|
+ position: relative;
|
|
|
+ flex: none;
|
|
|
+ width: 200px;
|
|
|
+ height: 100%;
|
|
|
+ background: url("@/assets/images/tubbiness.png");
|
|
|
+ background-size: 80% 80%;
|
|
|
+ background-position: center center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+
|
|
|
+ .work_num {
|
|
|
+ position: absolute;
|
|
|
+ top: 60px;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ text-align: center;
|
|
|
+ color: rgb(84, 218, 250);
|
|
|
+ font-size: 20px;
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
+ color: rgb(158, 174, 195);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .work_title {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 36px;
|
|
|
+ left: 0px;
|
|
|
+ right: 0px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.right_content {
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-evenly;
|
|
|
+
|
|
|
+ .work_week {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 22px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ span {
|
|
|
+ padding-right: 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: rgb(214, 218, 222);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.color_line_xj {
|
|
|
+ width: 6px;
|
|
|
+ height: 6px;
|
|
|
+ margin-right: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.entry {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 45px);
|
|
|
+ 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(47, 207, 218, 0.3),
|
|
|
+ rgba(51, 149, 233, 0) 100px,
|
|
|
+ rgba(51, 149, 233, 0) 100px,
|
|
|
+ rgba(51, 149, 233, 0) 12px,
|
|
|
+ rgba(51, 149, 233, 0.1) 12px,
|
|
|
+ rgba(51, 149, 233, 0.1) 40px);
|
|
|
+
|
|
|
+ .item-center-line {
|
|
|
+ width: 170px;
|
|
|
+ height: 170px;
|
|
|
+ background-color: transparent;
|
|
|
+ border-top: 0.5px solid #80bff7;
|
|
|
+ border-bottom: 0.5px solid #80bff7;
|
|
|
+ border-radius: 50%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: absolute;
|
|
|
+ top: calc(50% - 85px);
|
|
|
+ left: calc(50% - 85px);
|
|
|
+ animation: rotate 8s infinite linear;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-center-pie {
|
|
|
+ width: 150px;
|
|
|
+ height: 150px;
|
|
|
+ background-color: transparent;
|
|
|
+ border-top: 0.5px solid #80bff7;
|
|
|
+ border-bottom: 0.5px solid #80bff7;
|
|
|
+ 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);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.box_water_drop {
|
|
|
+ position: absolute;
|
|
|
+ top: calc(50% - 70px);
|
|
|
+ left: calc(50% - 70px);
|
|
|
+}
|
|
|
+
|
|
|
+.left_water {
|
|
|
+ position: absolute;
|
|
|
+ left: 10px;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ padding-left: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+.right_water {
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ padding-right: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+.water_span_title {
|
|
|
+ padding-bottom: 5px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+.tile_fx {
|
|
|
+ color: rgb(148, 189, 229);
|
|
|
+ font-size: 15px;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.point_box :deep(.el-input__wrapper) {
|
|
|
+ background-color: transparent !important;
|
|
|
+ box-shadow: 0 0 0 1px rgb(58, 86, 117) inset !important;
|
|
|
+}
|
|
|
+
|
|
|
+.point_box :deep(.el-input__wrapper.is-focus) {
|
|
|
+ box-shadow: 0 0 0 1px #409EFF inset !important;
|
|
|
+}
|
|
|
+
|
|
|
+.point_box :deep(.el-input__inner) {
|
|
|
+ color: #ffffff !important;
|
|
|
+}
|
|
|
+</style>
|
YangJian0701