<template>
|
<div class="container">
|
<div class="header-content">
|
<div class="logo">
|
<img src="../../../assets/warningScreen/logo_dark.png" alt="" />
|
</div>
|
<div class="title">风险预警预报平台</div>
|
<div class="title-right">
|
<!-- <img src="themeStyle.skinIcon" class="qiehuan" @click="changeTheme" />-->
|
<span class="datetime">{{currentTime}}</span>
|
<div class="btns">
|
<div class="fullbtn" @click="onScreenfullClick">
|
<div class="toFull">
|
<i class="iconfont" :title="isScreenfull ? $t('message.user.title6') : $t('message.user.title5')" :class="!isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i>
|
</div>
|
<div>全屏</div>
|
</div>
|
<div class="backBtn" @click="goBack()">
|
<img src="../../../assets/loginPage/back-icon.png"/>
|
<div>退出</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="main-content">
|
<div class="main-left">
|
<div class="left-top">
|
|
</div>
|
<div class="left-mid">
|
|
</div>
|
<div class="left-bottom">
|
|
</div>
|
</div>
|
<div class="main-middle">
|
<div class="mid-top">
|
|
</div>
|
<div class="mid-bottom">
|
<div class="mid-bot-l">
|
|
</div>
|
<div class="mid-bot-m">
|
|
</div>
|
<div class="mid-bot-r">
|
|
</div>
|
</div>
|
</div>
|
<div class="main-right">
|
<div class="right-top">
|
|
</div>
|
<div class="right-mid">
|
|
</div>
|
<div class="right-bottom">
|
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import screenfull from 'screenfull';
|
import { toRefs, reactive, ref, onMounted } from 'vue';
|
import { ElTable } from 'element-plus';
|
import { FormInstance, FormRules, ElMessage } from 'element-plus';
|
import { safetyRiskEventApi } from '/@/api/doublePreventSystem/safetyRiskEvent/index.ts';
|
import { useRouter } from 'vue-router';
|
import {hiddenReportApi} from "/@/api/doublePreventSystem/report";
|
import { productionDeviceApi } from '/@/api/doublePreventSystem/productionDevice/index.ts';
|
import * as echarts from 'echarts/core';
|
import {TooltipComponent, TooltipComponentOption, LegendComponent, LegendComponentOption} from 'echarts/components';
|
import {PieChart, PieSeriesOption} from 'echarts/charts';
|
import {LabelLayout} from 'echarts/features';
|
import {CanvasRenderer} from 'echarts/renderers';
|
echarts.use([TooltipComponent, LegendComponent, PieChart, CanvasRenderer, LabelLayout]);
|
// 定义接口来定义对象的类型
|
interface stateType {
|
isScreenfull: boolean;
|
currentTime: string
|
}
|
export default {
|
name: 'warningScreen',
|
components: {},
|
setup() {
|
const router = useRouter();
|
const state = reactive<stateType>({
|
isScreenfull: false,
|
currentTime: ''
|
});
|
|
// 页面载入时执行方法
|
onMounted(() => {
|
setInterval(() => {
|
state.currentTime = new Date().toLocaleString();
|
console.log(state.currentTime)
|
}, 1000);
|
});
|
|
// 全屏
|
const onScreenfullClick = () => {
|
if (!screenfull.isEnabled) {
|
ElMessage.warning('暂不不支持全屏');
|
return false;
|
}
|
screenfull.toggle();
|
screenfull.on('change', () => {
|
if (screenfull.isFullscreen) {
|
state.isScreenfull = true;
|
} else {
|
state.isScreenfull = false;
|
}
|
});
|
};
|
|
// 返回上一页
|
const goBack = () => {
|
window.history.go(-1);
|
};
|
|
// 隐患状态列表
|
// const getDeviceRecord = async () => {
|
// const data = { pageSize: state.pageSize, pageIndex: state.pageIndex};
|
// let res = await productionDeviceApi().getProductionDeviceList(data)
|
// if (res.data.code === '200'){
|
// state.deviceData = res.data.data
|
// } else {
|
// ElMessage({
|
// type: 'warning',
|
// message: res.data.msg
|
// });
|
// }
|
// };
|
|
// 隐患整改情况
|
// const initRiskFix =()=>{
|
// var dom = document.getElementById('riskFix');
|
// var myChart = echarts.init(dom, null, {
|
// renderer: 'canvas',
|
// useDirtyRect: false
|
// });
|
// var app = {};
|
//
|
// var option;
|
//
|
// option = {
|
// tooltip: {
|
// trigger: 'item'
|
// },
|
// legend: {
|
// bottom: '5%',
|
// left: 'center'
|
// },
|
// series: [
|
// {
|
// name: 'Access From',
|
// type: 'pie',
|
// radius: ['35%', '60%'],
|
// avoidLabelOverlap: false,
|
// itemStyle: {
|
// borderRadius: 6,
|
// borderColor: '#fff',
|
// borderWidth: 2
|
// },
|
// label: {
|
// alignTo: 'labelLine',
|
// formatter: '{name|{b}}\n{value|{c}}',
|
// minMargin: 5,
|
// edgeDistance: 5,
|
// lineHeight: 15,
|
// rich: {
|
// name: {
|
// fontSize: 14,
|
// color: '#666'
|
// }
|
// }
|
// },
|
// labelLine: {
|
// length: 15,
|
// maxSurfaceAngle: 80
|
// },
|
// emphasis: {
|
// label: {
|
// show: true,
|
// fontSize: '40',
|
// fontWeight: 'bold'
|
// }
|
// },
|
// data: [
|
// { value: 1048, name: '整改中' },
|
// { value: 735, name: '待验收' },
|
// { value: 580, name: '延期整改' },
|
// { value: 484, name: '超期未整改' },
|
// { value: 300, name: '已验收' }
|
// ],
|
// center: ['50%','40%']
|
// }
|
// ]
|
// };
|
//
|
// if (option && typeof option === 'object') {
|
// myChart.setOption(option);
|
// }
|
//
|
// window.addEventListener('resize', myChart.resize);
|
// }
|
|
return {
|
router,
|
onScreenfullClick,
|
goBack,
|
...toRefs(state)
|
};
|
}
|
};
|
</script>
|
|
<style scoped lang="scss">
|
$homeNavLengh: 8;
|
|
@media screen and (min-width: 1366px) {
|
|
}
|
|
@media screen and (min-width: 1024px) and (max-width: 1366px){
|
|
}
|
|
@media screen and (max-width: 1024px) {
|
|
}
|
.container {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
background: url('../../../assets/warningScreen/riskprocast.jpg') no-repeat center;
|
background-size: 100% 100%;
|
color: #11FEEE;
|
|
.header-content {
|
width: 100%;
|
height: 80px;
|
padding: 0 20px;
|
font-size: 20px;
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
z-index: 9;
|
|
.logo {
|
width: 27%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
img {
|
height: 35px;
|
width: 128px;
|
}
|
}
|
.title {
|
width: 46%;
|
font-size: 26px;
|
font-weight: bolder;
|
line-height: 80px;
|
text-align: center;
|
letter-spacing: 2px;
|
}
|
|
.title-right {
|
width: 27%;
|
height: 90px;
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
font-size: 15px;
|
padding-left: 30px;
|
|
.datetime {
|
color: #11FEEE;
|
}
|
.btns{
|
display: flex;
|
align-items: center;
|
|
&>div{
|
display: flex;
|
align-items: center;
|
align-items: center;
|
font-size: 15px;
|
margin-right: 20px;
|
|
img{
|
width: 16px;
|
height: auto;
|
}
|
div{
|
margin-left: 6px;
|
}
|
}
|
}
|
}
|
}
|
.main-content{
|
width: 100%;
|
height: 100%;
|
padding: 20px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
|
.main-left{
|
width: calc(25% - 10px);
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
align-items: flex-start;
|
|
.left-top{
|
width: 100%;
|
height: calc((100%/3) - (40px/3));
|
}
|
.left-mid{
|
width: 100%;
|
height: calc((100%/3) - (40px/3));
|
}
|
.left-bottom{
|
width: 100%;
|
height: calc((100%/3) - (40px/3));
|
}
|
}
|
.main-middle{
|
width: calc(50% - 20px);
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
align-items: flex-start;
|
|
.mid-top{
|
width: 100%;
|
height: calc((200%/3) - (80px/3) + 20px);
|
}
|
|
.mid-bottom{
|
display: flex;
|
width: 100%;
|
height: calc(100% - (200%/3) + (80px/3) - 40px);
|
justify-content: space-between;
|
|
&>div {
|
position: relative;
|
width: calc((100% - 40px)/3);
|
border-radius: 8px;
|
overflow: hidden;
|
|
.chart-tit {
|
position: absolute;
|
left: 20px;
|
top: 20px;
|
font-weight: 700;
|
z-index: 3;
|
}
|
}
|
}
|
}
|
.main-right{
|
width: calc(25% - 10px);
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
align-items: flex-start;
|
|
.right-top{
|
width: 100%;
|
height: calc((100%/3) - (40px/3));
|
}
|
.right-mid{
|
width: 100%;
|
height: calc((100%/3) - (40px/3));
|
}
|
.right-bottom{
|
width: 100%;
|
height: calc((100%/3) - (40px/3));
|
}
|
}
|
}
|
}
|
.el-input {
|
width: 100% !important;
|
}
|
.el-date-editor::v-deep {
|
width: 100%;
|
}
|
.el-select {
|
width: 100%;
|
}
|
</style>
|
