<template>
|
<div class="charts-cont">
|
<!-- <div :class="selector">-->
|
<!-- <el-cascader-->
|
<!-- class="timeSe"-->
|
<!-- :teleported="false"-->
|
<!-- v-model="timeValue"-->
|
<!-- :options="optionList"-->
|
<!-- :props="riskProps"-->
|
<!-- @change="changeTime"-->
|
<!-- />-->
|
<!-- </div>-->
|
<div class="risk" :id="risk1"></div>
|
<!-- <div v-show="curValue===false" class="risk" :id="risk2"></div>-->
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted, nextTick, onBeforeUnmount, watchEffect } from 'vue';
|
import { storeToRefs } from 'pinia';
|
import { initBackEndControlRoutes } from '/@/router/backEnd';
|
import {useUserInfo} from "/@/stores/userInfo";
|
import { Session } from '/@/utils/storage';
|
import { Search } from '@element-plus/icons-vue'
|
import { ElMessage } from 'element-plus'
|
import type { FormInstance, FormRules } from 'element-plus'
|
import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
|
import * as echarts from 'echarts';
|
import '/@/theme/bigScreen.css'
|
import { useScreenTheme } from "/@/stores/screenTheme";
|
import { riskWarningApi } from '/@/api/riskWarning';
|
import {teamManageApi} from "/@/api/systemManage/basicDateManage/personShiftManage/teamManage";
|
|
|
interface stateType {
|
curValue: boolean,
|
timeValue: Array<any>,
|
optionList: Array<any>,
|
selector: string,
|
riskData: Array<any>,
|
riskProps: object,
|
departmentList: Array<any>,
|
departmentRecursionList: Array<DepartmentState>;
|
myVar: any
|
}
|
interface DepartmentState {
|
depId: number;
|
depName: string;
|
}
|
export default defineComponent({
|
name: 'risk',
|
components: {},
|
props:{
|
size: Number,
|
theme: Boolean,
|
dep: Array
|
},
|
setup(props,context) {
|
const userInfo = useUserInfo()
|
const { userInfos } = storeToRefs(userInfo);
|
const screenThemes = useScreenTheme()
|
const { screenTheme } = storeToRefs(screenThemes);
|
const risk1 = ref("eChartRisk1" + Date.now() + Math.random())
|
// const risk2 = ref("eChartRisk2" + Date.now() + Math.random())
|
const state = reactive<stateType>({
|
curValue: true,
|
timeValue: [],
|
optionList: [],
|
riskProps: {
|
expandTrigger: 'hover'
|
},
|
selector: 'select-dark',
|
riskData: [],
|
departmentList: [],
|
departmentRecursionList: [],
|
myVar: null
|
})
|
const timeForm = {
|
hour12: false,
|
year: 'numeric',
|
month: 'numeric',
|
day: '2-digit',
|
hour: '2-digit',
|
minute: '2-digit',
|
second: '2-digit'
|
};
|
const makeList = () =>{
|
for(let i=0;i<=60;i++){
|
const newObj = {
|
label: 1990 + i + '',
|
value: 1990 + i + '',
|
children: [
|
{
|
label: '年度',
|
value: 0
|
},
|
{
|
label: '一月',
|
value: 1
|
},
|
{
|
label: '二月',
|
value: 2
|
},
|
{
|
label: '三月',
|
value: 3
|
},
|
{
|
label: '四月',
|
value: 4
|
},
|
{
|
label: '五月',
|
value: 5
|
},
|
{
|
label: '六月',
|
value: 6
|
},
|
{
|
label: '七月',
|
value: 7
|
},
|
{
|
label: '八月',
|
value: 8
|
},
|
{
|
label: '九月',
|
value: 9
|
},
|
{
|
label: '十月',
|
value: 10
|
},
|
{
|
label: '十一月',
|
value: 11
|
},
|
{
|
label: '十二月',
|
value: 12
|
}
|
]
|
}
|
state.optionList.push(newObj)
|
}
|
}
|
// 获取部门列表
|
const getAllDepartment = async () => {
|
let res = await teamManageApi().getAllDepartment();
|
if (res.data.code === '200') {
|
state.departmentList = JSON.parse(JSON.stringify(res.data.data))
|
recursion(state.departmentList);
|
} else {
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
};
|
|
const recursion = (value: any) => {
|
for (let i of value) {
|
if (i.children.length !== 0) {
|
state.departmentRecursionList.push(i);
|
recursion(i.children);
|
} else {
|
state.departmentRecursionList.push(i);
|
}
|
}
|
};
|
|
const getDataByYearId = async () => {
|
let res = await riskWarningApi().getDpLine();
|
if (res.data.code === '200') {
|
state.riskData = res.data.data
|
initRisk1(state.riskData)
|
context.emit('getData',state.riskData)
|
} else {
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
}
|
|
const changeTime = (value)=>{
|
state.timeValue[0] = value[0]
|
state.timeValue[1] = value[1]
|
getDataByYearId()
|
}
|
|
|
type EChartsOption = echarts.EChartsOption
|
// 隐患整改情况
|
const initRisk1 =(data)=>{
|
let dom = document.getElementById(risk1.value);
|
let myChart = echarts.init(dom);
|
let option: EChartsOption;
|
option = {
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
// Use axis to trigger tooltip
|
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
|
}
|
},
|
color: ['#91cc75','#ee6666'],
|
grid: [
|
{
|
top: '5%',
|
right: '2%',
|
bottom: '10%'
|
}
|
],
|
xAxis: {
|
type: 'category',
|
data: data.map(i=>i.time),
|
axisLabel: {
|
color: '#fff'
|
}
|
},
|
yAxis: {
|
type: 'value',
|
splitLine:{
|
lineStyle: {
|
color: 'rgba(255,255,255,.2)'
|
}
|
}
|
},
|
series: [
|
{
|
name: '一般隐患',
|
type: 'line',
|
data: data.map(i=>i.generalDanger?i.generalDanger:0)
|
},
|
{
|
name: '重大隐患',
|
type: 'line',
|
data: data.map(i=>i.majorDanger?i.majorDanger:0)
|
},
|
]
|
};
|
option && myChart.setOption(option);
|
window.addEventListener("resize",function (){
|
myChart.resize();
|
})
|
}
|
|
const getTheme =()=>{
|
if(screenTheme.value.isDark){
|
state.selector = 'select-dark'
|
}else{
|
state.selector = 'select-light'
|
}
|
}
|
|
const getTime = () =>{
|
const curTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-');
|
const temp = curTime.split('-')
|
state.timeValue[0] = temp[0]
|
state.timeValue[1] = Number(temp[1])
|
}
|
|
watchEffect(() => {
|
if(props.theme){
|
state.selector = 'select-dark'
|
}else{
|
state.selector = 'select-light'
|
}
|
getDataByYearId()
|
})
|
|
function fontSize(val){
|
let nowClientWidth = document.documentElement.clientWidth;
|
return val * (nowClientWidth/1920) * Number(props.size);
|
}
|
|
// 页面载入时执行方法
|
onMounted(() => {
|
// initRisk1();
|
getTheme();
|
getTime();
|
makeList();
|
getAllDepartment();
|
getDataByYearId()
|
});
|
|
onBeforeUnmount(() =>{
|
clearInterval(state.myVar)
|
state.myVar = null
|
})
|
|
return {
|
risk1,
|
Search,
|
fontSize,
|
changeTime,
|
...toRefs(state)
|
};
|
},
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.charts-cont{
|
width: 100%;
|
height: 100%;
|
padding: 5% 5% 2%;
|
position: relative;
|
.select-dark{
|
position: absolute;
|
z-index: 99999;
|
top: -20px;
|
right: 3rem;
|
width: 30%;
|
height: 1.5rem;
|
margin-right: 0.8rem;
|
|
::v-deep(.el-cascader){
|
width: 100% !important;
|
line-height: 100%;
|
}
|
::v-deep(.el-popper){
|
background-color: rgba(10,31,92,1);
|
border: 1px solid rgba(17,254,238,.4);
|
color: #11FEEE;
|
z-index: 999999 !important;
|
.el-cascader-node__label{
|
color: #11FEEE;
|
}
|
.el-icon{
|
color: #11FEEE;
|
}
|
.el-cascader-node{
|
&:hover{
|
background: #0049af;
|
}
|
}
|
}
|
::v-deep(.el-cascader-menu){
|
min-width: 50px !important;
|
}
|
::v-deep(.el-popper__arrow){
|
&::before{
|
background-color: rgba(10,31,92,.6) !important;
|
border: 1px solid rgba(17,254,238,.4);
|
}
|
}
|
::v-deep(.el-input__wrapper){
|
box-shadow: none;
|
border: 1px solid rgba(17,254,238,.2);
|
background: rgba(10,31,92,.6) !important;
|
height: 1.5rem;
|
color: #11FEEE;
|
|
input{
|
font-size: 0.8rem;
|
color: #11FEEE;
|
}
|
.el-icon{
|
color: #11FEEE;
|
}
|
}
|
}
|
|
.select-light{
|
position: absolute;
|
z-index: 99999;
|
top: -20px;
|
right: 3rem;
|
width: 30%;
|
height: 20px;
|
margin-right: 0.8rem;
|
|
::v-deep(.el-cascader){
|
width: 100% !important;
|
line-height: 100%;
|
}
|
::v-deep(.el-popper){
|
background-color: rgba(255,255,255,1);
|
border: 1px solid #ccc;
|
color: #fff;
|
z-index: 999999 !important;
|
.el-cascader-node__label{
|
color: #000;
|
}
|
.el-icon{
|
color: #000;
|
}
|
.el-cascader-node{
|
&:hover{
|
background: #ccc;
|
}
|
}
|
}
|
::v-deep(.el-cascader-menu){
|
min-width: 80px !important;
|
}
|
::v-deep(.el-popper__arrow){
|
&::before{
|
background-color: rgba(255,255,255,.6) !important;
|
border: 1px solid #ccc;
|
}
|
}
|
::v-deep(.el-input__wrapper){
|
box-shadow: none;
|
border: 1px solid #ccc;
|
background: #fff !important;
|
height: 1.5rem;
|
color: #fff;
|
|
input{
|
font-size: 0.8rem;
|
color: #000;
|
}
|
.el-icon{
|
color: #000;
|
}
|
}
|
}
|
|
.risk{
|
width: 100%;
|
height: 100%;
|
}
|
}
|
.home-container {
|
height: 100%;
|
overflow: hidden;
|
position: relative;
|
.el-row{
|
margin-bottom: 20px;
|
}
|
.el-row:last-child {
|
margin-bottom: 0;
|
}
|
.el-input{
|
width: 100% !important;
|
}
|
.el-date-editor::v-deep{
|
width: 100%;
|
}
|
.el-select{
|
width: 100%;
|
}
|
.el-cascader{
|
width: 100% !important;
|
}
|
}
|
</style>
|
