<template>
|
<div class="charts-cont">
|
<div class="educate" :id="educate">
|
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted} 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 {riskWarningApi} from "/@/api/riskWarning";
|
|
|
interface stateType {
|
educateData: []
|
}
|
export default defineComponent({
|
name: 'educate',
|
components: {},
|
props:{
|
size: Number
|
},
|
setup(props,context) {
|
const userInfo = useUserInfo()
|
const { userInfos } = storeToRefs(userInfo);
|
const educate = ref("eChartEdu" + Date.now() + Math.random())
|
const state = reactive<stateType>({
|
educateData: []
|
})
|
|
const getTrainInfo = async () => {
|
let res = await riskWarningApi().getTrainInfo();
|
if (res.data.code === '200') {
|
state.educateData = res.data.data
|
initEducate(state.educateData)
|
context.emit('getData',state.educateData)
|
} else {
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
}
|
|
|
type EChartsOption = echarts.EChartsOption
|
// 隐患整改情况
|
const initEducate =(data)=>{
|
let dom = document.getElementById(educate.value);
|
let myChart = echarts.init(dom);
|
|
let option: EChartsOption;
|
|
option = {
|
color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
|
legend: {
|
left: 'center',
|
itemWidth: fontSize(10),
|
itemHeight: fontSize(8),
|
textStyle:{
|
color: 'auto',
|
fontSize: fontSize(11)
|
}
|
},
|
radar: [
|
{
|
indicator: data.map(i=>{
|
const {name} = i
|
return {name}
|
}),
|
center: ['50%', '50%'],
|
radius: fontSize(65),
|
startAngle: 90,
|
splitNumber: 4,
|
shape: 'circle',
|
axisName: {
|
formatter: '{value}',
|
color: '#428BD4',
|
fontSize: fontSize(9),
|
width: 10,
|
overflow: 'break'
|
},
|
splitArea: {
|
areaStyle: {
|
color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
|
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
shadowBlur: 10
|
}
|
},
|
axisLine: {
|
lineStyle: {
|
color: 'rgba(211, 253, 250, 0.8)'
|
}
|
},
|
splitLine: {
|
lineStyle: {
|
color: 'rgba(211, 253, 250, 0.8)'
|
}
|
}
|
}
|
],
|
series: [
|
{
|
type: 'radar',
|
emphasis: {
|
lineStyle: {
|
width: 4
|
}
|
},
|
data: [
|
{
|
value: data.map(i=>i.count),
|
}
|
]
|
},
|
]
|
};
|
|
option && myChart.setOption(option);
|
window.addEventListener("resize",function (){
|
myChart.resize();
|
});
|
}
|
function fontSize(val){
|
let nowClientWidth = document.documentElement.clientWidth;
|
return val * (nowClientWidth/1920) * Number(props.size);
|
}
|
|
// 页面载入时执行方法
|
onMounted(() => {
|
getTrainInfo()
|
});
|
|
return {
|
educate,
|
Search,
|
fontSize,
|
...toRefs(state)
|
};
|
},
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.charts-cont{
|
width: 100%;
|
height: 100%;
|
position: relative;
|
|
.educate{
|
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>
|
