From eafc031e3e6e48778d22b5455358273714944012 Mon Sep 17 00:00:00 2001
From: Your Name <123456>
Date: 星期一, 05 九月 2022 09:53:16 +0800
Subject: [PATCH] Merge branch 'master' of https://sinanoaq.cn:8888/r/gtqt
---
src/views/riskWarningSys/warningBigScreen/components/danger.vue | 269 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 269 insertions(+), 0 deletions(-)
diff --git a/src/views/riskWarningSys/warningBigScreen/components/danger.vue b/src/views/riskWarningSys/warningBigScreen/components/danger.vue
new file mode 100644
index 0000000..96bdd13
--- /dev/null
+++ b/src/views/riskWarningSys/warningBigScreen/components/danger.vue
@@ -0,0 +1,269 @@
+<template>
+ <div class="charts-cont">
+<!-- <el-select v-model="selected" class="choose" size="small">-->
+<!-- <el-option label="月度" value="1"/>-->
+<!-- <el-option label="年度" value="2"/>-->
+<!-- </el-select>-->
+ <div class="choose">
+ <div :class="cur===1?'act':''" @click="changeTab(1)">企业</div>
+ <div :class="cur===2?'act':''" @click="changeTab(2)">部门</div>
+ </div>
+ <div v-show="cur===1" class="month" :id="dangerMonth"></div>
+ <div v-show="cur===2" class="year" :id="dangerYear"></div>
+ </div>
+</template>
+
+<script lang="ts">
+ import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted, nextTick } 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 {
+ cur: number
+ }
+ export default defineComponent({
+ name: 'danger',
+ components: {},
+ props:{
+ size: Number
+ },
+ setup(props) {
+ const userInfo = useUserInfo()
+ const { userInfos } = storeToRefs(userInfo);
+ const dangerMonth = ref("eChartFix" + Date.now() + Math.random())
+ const dangerYear = ref("eChartFix" + Date.now() + Math.random())
+ const state = reactive<stateType>({
+ cur: 1
+ })
+
+ const changeTab =(i)=>{
+ state.cur = i
+ nextTick(()=>{
+ initdangerByYear()
+ })
+ }
+ type EChartsOption = echarts.EChartsOption
+ // 隐患整改情况
+ const initdangerByMonth =()=>{
+ let dom = document.getElementById(dangerMonth.value);
+ let myChart = echarts.init(dom);
+
+ let option: EChartsOption;
+
+ option = {
+ tooltip: {
+ trigger: 'item'
+ },
+ color: ['#FAC858','#EE6666'],
+ legend: {
+ top: '8%',
+ left: 'center',
+ itemWidth: fontSize(10),
+ itemHeight: fontSize(8),
+ textStyle:{
+ color: '#fff',
+ fontSize: fontSize(11)
+ }
+ },
+ series: [
+ {
+ type: 'pie',
+ radius: '65%',
+ avoidLabelOverlap: true,
+ label: {
+ show: true,
+ position: 'inside',
+ fontSize: fontSize(12),
+ color: '#ffffff',
+ textBorderWidth: 0,
+ width: 30,
+ overflow: 'break'
+ },
+ labelLine: {
+ show: true,
+ length: 10,
+ length2: 10
+ },
+ emphasis: {
+ label: {
+ show: true,
+ fontSize: fontSize(22),
+ fontWeight: 'bold'
+ }
+ },
+ data: [
+ { value: 235, name: '一般隐患' },
+ { value: 1048, name: '重大隐患' }
+ ],
+ center: ['50%','55%']
+ }
+ ]
+ };
+
+ option && myChart.setOption(option);
+
+ window.addEventListener("resize",function (){
+ myChart.resize();
+ });
+ }
+ // 隐患整改情况
+ const initdangerByYear =()=>{
+ let dom = document.getElementById(dangerYear.value);
+ let myChart = echarts.init(dom);
+
+ let option: EChartsOption;
+
+ option = {
+ tooltip: {
+ trigger: 'item'
+ },
+ color: ['#FAC858','#EE6666'],
+ legend: {
+ top: '8%',
+ left: 'center',
+ itemWidth: fontSize(10),
+ itemHeight: fontSize(8),
+ textStyle:{
+ color: '#fff',
+ fontSize: fontSize(11)
+ }
+ },
+ series: [
+ {
+ name: 'Access From',
+ type: 'pie',
+ radius: '65%',
+ avoidLabelOverlap: true,
+ label: {
+ show: true,
+ position: 'inside',
+ fontSize: fontSize(12),
+ color: '#ffffff',
+ textBorderWidth: 0,
+ width: 30,
+ overflow: 'break'
+ },
+ labelLine: {
+ show: true,
+ length: 10,
+ length2: 10
+ },
+ emphasis: {
+ label: {
+ show: true,
+ fontSize: fontSize(22),
+ fontWeight: 'bold'
+ }
+ },
+ data: [
+ { value: 35, name: '一般隐患' },
+ { value: 1048, name: '重大隐患' }
+ ],
+ center: ['50%','55%']
+ }
+ ]
+ };
+
+ 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(() => {
+ initdangerByMonth();
+ });
+
+ return {
+ dangerMonth,
+ dangerYear,
+ Search,
+ fontSize,
+ changeTab,
+ ...toRefs(state)
+ };
+ },
+ });
+</script>
+
+<style scoped lang="scss">
+ .charts-cont{
+ width: 100%;
+ height: 100%;
+ padding: 2% 2% 0;
+ position: relative;
+
+ .choose{
+ position: absolute;
+ right: 5%;
+ bottom: 20px;
+ z-index: 999;
+ display: flex;
+ align-items: center;
+ font-size: 0.75rem;
+ justify-content: space-between;
+
+ div{
+ padding: 2px 6px;
+ box-sizing: border-box;
+ color: rgba(17,254,238,.4);
+ border: 1px solid rgba(17,254,238,.4);
+ border-radius: 2px;
+ cursor: pointer;
+ }
+ div:hover{
+ color: #11FEEE;
+ border: 1px solid #11FEEE;
+ }
+ .act{
+ color: #11FEEE;
+ border: 1px solid #11FEEE;
+ }
+ }
+ .month{
+ width: 100%;
+ height: 100%;
+ }
+ .year{
+ 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