From eafc031e3e6e48778d22b5455358273714944012 Mon Sep 17 00:00:00 2001
From: Your Name <123456>
Date: Mon, 05 Sep 2022 09:53:16 +0800
Subject: [PATCH] Merge branch 'master' of https://sinanoaq.cn:8888/r/gtqt
---
src/views/riskWarningSys/warningBigScreen/components/educate.vue | 180 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 180 insertions(+), 0 deletions(-)
diff --git a/src/views/riskWarningSys/warningBigScreen/components/educate.vue b/src/views/riskWarningSys/warningBigScreen/components/educate.vue
new file mode 100644
index 0000000..101504a
--- /dev/null
+++ b/src/views/riskWarningSys/warningBigScreen/components/educate.vue
@@ -0,0 +1,180 @@
+<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'
+
+
+ interface stateType {
+ }
+ export default defineComponent({
+ name: 'educate',
+ components: {},
+ props:{
+ size: Number
+ },
+ setup(props) {
+ const userInfo = useUserInfo()
+ const { userInfos } = storeToRefs(userInfo);
+ const educate = ref("eChartEdu" + Date.now() + Math.random())
+ const state = reactive<stateType>({
+
+ })
+ type EChartsOption = echarts.EChartsOption
+ // 隐患整改情况
+ const initEducate =()=>{
+ let dom = document.getElementById(educate.value);
+ let myChart = echarts.init(dom);
+
+ let option: EChartsOption;
+
+ option = {
+ color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
+ legend: {
+ top: '8%',
+ left: 'center',
+ itemWidth: fontSize(10),
+ itemHeight: fontSize(8),
+ textStyle:{
+ color: '#fff',
+ fontSize: fontSize(11)
+ }
+ },
+ radar: [
+ {
+ indicator: [
+ { name: '设计培训次数' },
+ { name: '培训时间（小时）' },
+ { name: '完成比例（%）' }
+ ],
+ center: ['50%', '60%'],
+ radius: fontSize(65),
+ startAngle: 90,
+ splitNumber: 4,
+ shape: 'circle',
+ axisName: {
+ formatter: '{value}',
+ color: '#428BD4',
+ fontSize: fontSize(10),
+ width: 20,
+ 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: [100, 8, 0.4, -80, 2000],
+ name: '企业汇总'
+ },
+ {
+ value: [60, 5, 0.3, -100, 1500],
+ name: '事业部A',
+ areaStyle: {
+ color: 'rgba(255, 228, 52, 0.6)'
+ }
+ }
+ ]
+ },
+ ]
+ };
+
+ 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(() => {
+ initEducate();
+ });
+
+ 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>
--
Gitblit v1.9.2