Merge branch 'master' of https://sinanoaq.cn:8888/r/gtqt
| | |
| | | }; |
| | | } |
| | | |
| | | export interface screenThemeState { |
| | | screenTheme: { |
| | | isDark: boolean |
| | | } |
| | | } |
| | | |
| | | // 布局配置 |
| | | export interface ThemeConfigState { |
| | | isDrawer: boolean; |
对比新文件 |
| | |
| | | import { defineStore } from 'pinia'; |
| | | import { screenThemeState } from './interface'; |
| | | |
| | | /** |
| | | * 路由列表 |
| | | * @methods setRoutesList 设置路由数据 |
| | | * @methods setColumnsMenuHover 设置分栏布局菜单鼠标移入 boolean |
| | | * @methods setColumnsNavHover 设置分栏布局最左侧导航鼠标移入 boolean |
| | | */ |
| | | export const useScreenTheme = defineStore('screenTheme', { |
| | | state: (): screenThemeState => ({ |
| | | screenTheme:{ |
| | | isDark: true |
| | | } |
| | | }), |
| | | actions: { |
| | | async setScreenTheme(value: any) { |
| | | this.screenTheme.isDark = value; |
| | | } |
| | | }, |
| | | }); |
| | |
| | | components: {}, |
| | | props:{ |
| | | size: Number, |
| | | dep: Number |
| | | }, |
| | | setup(props) { |
| | | const userInfo = useUserInfo() |
| | |
| | | option = { |
| | | legend: { |
| | | data: ['注意线', '警告线', '危险线', 'SPI预警指数值'], |
| | | top: '0', |
| | | left: 'center', |
| | | top: '2%', |
| | | right: '6%', |
| | | textStyle:{ |
| | | color: '#fff', |
| | | fontSize: fontSize(12) |
| | | color: '#999', |
| | | fontSize: fontSize(14) |
| | | } |
| | | }, |
| | | color: ['rgba(216,55,55)','rgba(235,194,80)','rgba(147,208,81)'], |
| | | tooltip: { |
| | | trigger: 'axis' |
| | | }, |
| | | grid: { |
| | | left: '4%', |
| | | right: '4%', |
| | | bottom: '5%', |
| | | left: '8%', |
| | | right: '8%', |
| | | bottom: '4%', |
| | | }, |
| | | xAxis: [ |
| | | { |
| | |
| | | axisLine:{ |
| | | show: true, |
| | | lineStyle:{ |
| | | color: '#fff' |
| | | color: '#999' |
| | | } |
| | | }, |
| | | splitLine:{ |
| | | show: true, |
| | | lineStyle:{ |
| | | type: 'dashed', |
| | | color: 'rgba(255,255,255,.4)' |
| | | color: '#999' |
| | | } |
| | | }, |
| | | axisLabel:{ |
| | | color: '#fff' |
| | | color: '#999', |
| | | } |
| | | } |
| | | ], |
| | |
| | | ], |
| | | series: [ |
| | | { |
| | | name: '危险线', |
| | | data: [1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000], |
| | | type: 'line', |
| | | lineStyle:{ |
| | | width: 0 |
| | | }, |
| | | areaStyle: { |
| | | color: { |
| | | x: 0, |
| | | y: 0, |
| | | x2: 0, |
| | | y2: 1, |
| | | colorStops: [ |
| | | { |
| | | offset: 0.1, |
| | | color: "rgba(216,55,55)", // 线处的颜色 |
| | | }, |
| | | { |
| | | offset: 0.9, |
| | | color: "rgba(216,55,55,.1)", // 坐标轴处的颜色 |
| | | }, |
| | | ], |
| | | } |
| | | }, |
| | | showSymbol: false, |
| | | // stack: 'Total', |
| | | smooth: true |
| | | }, |
| | | { |
| | | name: '警告线', |
| | | data: [750, 750, 750, 750, 750, 750, 750, 750, 750, 750, 750, 750], |
| | | type: 'line', |
| | | lineStyle:{ |
| | | width: 0 |
| | | }, |
| | | areaStyle: { |
| | | color: { |
| | | x: 0, |
| | | y: 0, |
| | | x2: 0, |
| | | y2: 1, |
| | | colorStops: [ |
| | | { |
| | | offset: 0.1, |
| | | color: "rgba(235,194,80)", // 线处的颜色 |
| | | }, |
| | | { |
| | | offset: 0.9, |
| | | color: "rgba(235,194,80,.1)", // 坐标轴处的颜色 |
| | | }, |
| | | ], |
| | | } |
| | | }, |
| | | showSymbol: false, |
| | | // stack: 'Total', |
| | | smooth: true |
| | | }, |
| | | { |
| | | name: '注意线', |
| | | data: [500, 500, 500, 500, 500, 500, 500,500, 500, 500, 500, 500], |
| | | type: 'line', |
| | |
| | | }, |
| | | }, |
| | | showSymbol: false, |
| | | stack: 'Total', |
| | | smooth: true |
| | | }, |
| | | { |
| | | name: '警告线', |
| | | data: [250, 250, 250, 250, 250, 250, 250,250, 250, 250, 250, 250], |
| | | type: 'line', |
| | | lineStyle:{ |
| | | width: 0 |
| | | }, |
| | | areaStyle: { |
| | | color: { |
| | | x: 0, |
| | | y: 0, |
| | | x2: 0, |
| | | y2: 1, |
| | | colorStops: [ |
| | | { |
| | | offset: 0.1, |
| | | color: "rgba(235,194,80)", // 线处的颜色 |
| | | }, |
| | | { |
| | | offset: 0.9, |
| | | color: "rgba(235,194,80,.6)", // 坐标轴处的颜色 |
| | | }, |
| | | ], |
| | | } |
| | | }, |
| | | showSymbol: false, |
| | | stack: 'Total', |
| | | smooth: true |
| | | }, |
| | | { |
| | | name: '危险线', |
| | | data: [250, 250, 250, 250, 250, 250, 250,250, 250, 250, 250, 250], |
| | | type: 'line', |
| | | lineStyle:{ |
| | | width: 0 |
| | | }, |
| | | areaStyle: { |
| | | color: { |
| | | x: 0, |
| | | y: 0, |
| | | x2: 0, |
| | | y2: 1, |
| | | colorStops: [ |
| | | { |
| | | offset: 0.1, |
| | | color: "rgba(216,55,55)", // 线处的颜色 |
| | | }, |
| | | { |
| | | offset: 0.9, |
| | | color: "rgba(216,55,55,.6)", // 坐标轴处的颜色 |
| | | }, |
| | | ], |
| | | } |
| | | }, |
| | | showSymbol: false, |
| | | stack: 'Total', |
| | | // stack: 'Total', |
| | | smooth: true |
| | | }, |
| | | { |
| | |
| | | triggerLineEvent: true, |
| | | label:{ |
| | | show: true, |
| | | color: '#fff', |
| | | color: '#23E5E5', |
| | | fontSize: fontSize(12) |
| | | }, |
| | | lineStyle:{ |
| | |
| | | .charts-cont{ |
| | | width: 100%; |
| | | height: 100%; |
| | | padding: 5%; |
| | | padding: 2%; |
| | | position: relative; |
| | | |
| | | .spi{ |
| | |
| | | <template> |
| | | <div class="charts-cont"> |
| | | <div class="choose"> |
| | | <div :class="choose" > |
| | | <div :class="cur===1?'act':''" @click="changeTab(1)">月度</div> |
| | | <div :class="cur===2?'act':''" @click="changeTab(2)">年度</div> |
| | | </div> |
| | |
| | | </template> |
| | | |
| | | <script lang="ts"> |
| | | import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted, nextTick, onUnmounted} from 'vue'; |
| | | import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted, nextTick, onUnmounted, watchEffect} from 'vue'; |
| | | import { storeToRefs } from 'pinia'; |
| | | import { initBackEndControlRoutes } from '/@/router/backEnd'; |
| | | import {useUserInfo} from "/@/stores/userInfo"; |
| | |
| | | import { workApplyApi } from '/@/api/specialWorkSystem/workApply'; |
| | | import * as echarts from "echarts"; |
| | | import '/@/theme/bigScreen.css' |
| | | |
| | | import {useScreenTheme} from "/@/stores/screenTheme" |
| | | |
| | | interface stateType { |
| | | cur: number |
| | | cur: number, |
| | | curColor: string, |
| | | choose: string |
| | | } |
| | | export default defineComponent({ |
| | | name: 'accident', |
| | | components: {}, |
| | | props:{ |
| | | size: Number |
| | | size: Number, |
| | | theme: Boolean |
| | | }, |
| | | setup(props) { |
| | | const userInfo = useUserInfo() |
| | | const { userInfos } = storeToRefs(userInfo); |
| | | const screenThemes = useScreenTheme() |
| | | const { screenTheme } = storeToRefs(screenThemes); |
| | | const accidentMonth = ref("eChartFix" + Date.now() + Math.random()) |
| | | const accidentYear = ref("eChartFix" + Date.now() + Math.random()) |
| | | const state = reactive<stateType>({ |
| | | cur: 1 |
| | | cur: 1, |
| | | curColor: '#fff', |
| | | choose: 'choose-dark' |
| | | }) |
| | | |
| | | const changeTab =(i)=>{ |
| | |
| | | itemWidth: fontSize(10), |
| | | itemHeight: fontSize(8), |
| | | textStyle:{ |
| | | color: '#fff', |
| | | color: 'auto', |
| | | fontSize: fontSize(11) |
| | | } |
| | | }, |
| | |
| | | { |
| | | name: '月度数据', |
| | | type: 'pie', |
| | | radius: ['45%', '70%'], |
| | | radius: ['50%', '80%'], |
| | | avoidLabelOverlap: false, |
| | | itemStyle: { |
| | | borderRadius: fontSize(4) |
| | | borderRadius: fontSize(2) |
| | | }, |
| | | label: { |
| | | show: false, |
| | | position: 'outer', |
| | | fontSize: fontSize(10), |
| | | color: '#ffffff', |
| | | textBorderWidth: 0, |
| | | width: fontSize(40), |
| | | overflow: 'break' |
| | |
| | | } |
| | | }, |
| | | data: [ |
| | | { value: 1048, name: '特别重大事故' }, |
| | | { value: 735, name: '重大事故' }, |
| | | { value: 580, name: '较大事故' }, |
| | | { value: 484, name: '一般事故' }, |
| | | { value: 300, name: '未遂事故' } |
| | | { value: 1, name: '特别重大事故' }, |
| | | { value: 10, name: '重大事故' }, |
| | | { value: 20, name: '较大事故' }, |
| | | { value: 33, name: '一般事故' }, |
| | | { value: 50, name: '未遂事故' } |
| | | ], |
| | | center: ['50%','60%'] |
| | | } |
| | |
| | | itemWidth: fontSize(10), |
| | | itemHeight: fontSize(8), |
| | | textStyle:{ |
| | | color: '#fff', |
| | | color: 'auto', |
| | | fontSize: fontSize(11) |
| | | } |
| | | }, |
| | |
| | | { |
| | | name: '年度数据', |
| | | type: 'pie', |
| | | radius: ['45%', '70%'], |
| | | radius: ['50%', '80%'], |
| | | avoidLabelOverlap: false, |
| | | itemStyle: { |
| | | borderRadius: fontSize(4) |
| | | borderRadius: fontSize(2) |
| | | }, |
| | | label: { |
| | | show: false, |
| | | position: 'outer', |
| | | fontSize: fontSize(10), |
| | | color: '#ffffff', |
| | | textBorderWidth: 0, |
| | | width: fontSize(40), |
| | | overflow: 'break' |
| | |
| | | } |
| | | }, |
| | | data: [ |
| | | { value: 1048, name: '特别重大事故' }, |
| | | { value: 735, name: '重大事故' }, |
| | | { value: 580, name: '较大事故' }, |
| | | { value: 484, name: '一般事故' }, |
| | | { value: 300, name: '未遂事故' } |
| | | { value: 10, name: '特别重大事故' }, |
| | | { value: 20, name: '重大事故' }, |
| | | { value: 100, name: '较大事故' }, |
| | | { value: 130, name: '一般事故' }, |
| | | { value: 150, name: '未遂事故' } |
| | | ], |
| | | center: ['50%','60%'] |
| | | } |
| | |
| | | }); |
| | | } |
| | | |
| | | |
| | | function fontSize(val){ |
| | | let nowClientWidth = document.documentElement.clientWidth; |
| | | return val * (nowClientWidth/1920) * Number(props.size); |
| | | } |
| | | const getTheme =()=>{ |
| | | if(screenTheme.value.isDark){ |
| | | state.choose = 'choose-dark' |
| | | }else{ |
| | | state.choose = 'choose-light' |
| | | } |
| | | } |
| | | |
| | | watchEffect(() => { |
| | | if(props.theme){ |
| | | state.choose = 'choose-dark' |
| | | }else{ |
| | | state.choose = 'choose-light' |
| | | } |
| | | }) |
| | | |
| | | |
| | | // 页面载入时执行方法 |
| | | onMounted(() => { |
| | | initAccidentByMonth(); |
| | | getTheme() |
| | | // initAccidentByYear(); |
| | | }); |
| | | |
| | |
| | | padding: 5%; |
| | | position: relative; |
| | | |
| | | .choose{ |
| | | .choose-dark{ |
| | | position: absolute; |
| | | right: 5%; |
| | | bottom: 20px; |
| | | right: 4%; |
| | | bottom: 4%; |
| | | z-index: 999; |
| | | display: flex; |
| | | align-items: center; |
| | |
| | | border: 1px solid #11FEEE; |
| | | } |
| | | } |
| | | .choose-light{ |
| | | position: absolute; |
| | | right: 4%; |
| | | bottom: 4%; |
| | | 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: #ccc; |
| | | border: 1px solid #ccc; |
| | | border-radius: 2px; |
| | | cursor: pointer; |
| | | } |
| | | div:hover{ |
| | | color: #333; |
| | | border: 1px solid #333; |
| | | } |
| | | .act{ |
| | | color: #333; |
| | | border: 1px solid #333; |
| | | } |
| | | } |
| | | .month{ |
| | | width: 100%; |
| | | height: 100%; |
| | |
| | | <!-- <el-option label="月度" value="1"/>--> |
| | | <!-- <el-option label="年度" value="2"/>--> |
| | | <!-- </el-select>--> |
| | | <div class="choose"> |
| | | <div :class="choose"> |
| | | <div :class="cur===1?'act':''" @click="changeTab(1)">企业</div> |
| | | <div :class="cur===2?'act':''" @click="changeTab(2)">部门</div> |
| | | </div> |
| | |
| | | </template> |
| | | |
| | | <script lang="ts"> |
| | | import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted, nextTick } from 'vue'; |
| | | import { |
| | | toRefs, |
| | | reactive, |
| | | defineComponent, |
| | | ref, |
| | | computed, |
| | | defineAsyncComponent, |
| | | onMounted, |
| | | nextTick, |
| | | watchEffect |
| | | } from 'vue'; |
| | | import { storeToRefs } from 'pinia'; |
| | | import { initBackEndControlRoutes } from '/@/router/backEnd'; |
| | | import {useUserInfo} from "/@/stores/userInfo"; |
| | |
| | | import { workApplyApi } from '/@/api/specialWorkSystem/workApply'; |
| | | import * as echarts from "echarts"; |
| | | import '/@/theme/bigScreen.css' |
| | | import {useScreenTheme} from "/@/stores/screenTheme"; |
| | | |
| | | |
| | | interface stateType { |
| | | cur: number |
| | | cur: number, |
| | | choose: string |
| | | } |
| | | export default defineComponent({ |
| | | name: 'danger', |
| | | components: {}, |
| | | props:{ |
| | | size: Number |
| | | size: Number, |
| | | theme: Boolean |
| | | }, |
| | | setup(props) { |
| | | const userInfo = useUserInfo() |
| | | const { userInfos } = storeToRefs(userInfo); |
| | | const screenThemes = useScreenTheme() |
| | | const { screenTheme } = storeToRefs(screenThemes); |
| | | const dangerMonth = ref("eChartFix" + Date.now() + Math.random()) |
| | | const dangerYear = ref("eChartFix" + Date.now() + Math.random()) |
| | | const state = reactive<stateType>({ |
| | | cur: 1 |
| | | cur: 1, |
| | | choose: 'choose-dark' |
| | | }) |
| | | |
| | | const changeTab =(i)=>{ |
| | |
| | | itemWidth: fontSize(10), |
| | | itemHeight: fontSize(8), |
| | | textStyle:{ |
| | | color: '#fff', |
| | | color: 'auto', |
| | | fontSize: fontSize(11) |
| | | } |
| | | }, |
| | |
| | | itemWidth: fontSize(10), |
| | | itemHeight: fontSize(8), |
| | | textStyle:{ |
| | | color: '#fff', |
| | | color: 'auto', |
| | | fontSize: fontSize(11) |
| | | } |
| | | }, |
| | |
| | | let nowClientWidth = document.documentElement.clientWidth; |
| | | return val * (nowClientWidth/1920) * Number(props.size); |
| | | } |
| | | |
| | | const getTheme =()=>{ |
| | | if(screenTheme.value.isDark){ |
| | | state.choose = 'choose-dark' |
| | | }else{ |
| | | state.choose = 'choose-light' |
| | | } |
| | | } |
| | | |
| | | watchEffect(() => { |
| | | if(props.theme){ |
| | | state.choose = 'choose-dark' |
| | | }else{ |
| | | state.choose = 'choose-light' |
| | | } |
| | | }) |
| | | |
| | | // 页面载入时执行方法 |
| | | onMounted(() => { |
| | | initdangerByMonth(); |
| | | getTheme() |
| | | }); |
| | | |
| | | return { |
| | |
| | | padding: 2% 2% 0; |
| | | position: relative; |
| | | |
| | | .choose{ |
| | | .choose-dark{ |
| | | position: absolute; |
| | | right: 5%; |
| | | bottom: 20px; |
| | | right: 4%; |
| | | bottom: 4%; |
| | | z-index: 999; |
| | | display: flex; |
| | | align-items: center; |
| | |
| | | border: 1px solid #11FEEE; |
| | | } |
| | | } |
| | | .choose-light{ |
| | | position: absolute; |
| | | right: 4%; |
| | | bottom: 4%; |
| | | 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: #ccc; |
| | | border: 1px solid #ccc; |
| | | border-radius: 2px; |
| | | cursor: pointer; |
| | | } |
| | | div:hover{ |
| | | color: #333; |
| | | border: 1px solid #333; |
| | | } |
| | | .act{ |
| | | color: #333; |
| | | border: 1px solid #333; |
| | | } |
| | | } |
| | | .month{ |
| | | width: 100%; |
| | | height: 100%; |
| | |
| | | itemWidth: fontSize(10), |
| | | itemHeight: fontSize(8), |
| | | textStyle:{ |
| | | color: '#fff', |
| | | color: 'auto', |
| | | fontSize: fontSize(11) |
| | | } |
| | | }, |
| | |
| | | </template> |
| | | |
| | | <script lang="ts"> |
| | | import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted} from 'vue'; |
| | | import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted, watchEffect} from 'vue'; |
| | | import { storeToRefs } from 'pinia'; |
| | | import { initBackEndControlRoutes } from '/@/router/backEnd'; |
| | | import {useUserInfo} from "/@/stores/userInfo"; |
| | |
| | | import { workApplyApi } from '/@/api/specialWorkSystem/workApply'; |
| | | import * as echarts from 'echarts'; |
| | | import '/@/theme/bigScreen.css' |
| | | |
| | | import {useScreenTheme} from "/@/stores/screenTheme" |
| | | |
| | | interface stateType { |
| | | } |
| | | export default defineComponent({ |
| | | name: 'profession', |
| | | name: 'message', |
| | | components: {}, |
| | | props:{ |
| | | size: Number |
| | | size: Number, |
| | | theme: Boolean |
| | | }, |
| | | setup(props) { |
| | | const screenThemes = useScreenTheme() |
| | | const { screenTheme } = storeToRefs(screenThemes); |
| | | const userInfo = useUserInfo() |
| | | const { userInfos } = storeToRefs(userInfo); |
| | | const pro = ref("eChartPro" + Date.now() + Math.random()) |
| | |
| | | }) |
| | | |
| | | const mouseoverHandler = (e: any) => { |
| | | console.log(e) |
| | | |
| | | } |
| | | |
| | | const clickHandler = (e: any) => { |
| | | console.log(e) |
| | | |
| | | } |
| | | |
| | | function fontSize(val){ |
| | | let nowClientWidth = document.documentElement.clientWidth; |
| | | return val * (nowClientWidth/1920) * Number(props.size); |
| | | } |
| | | watchEffect(() => { |
| | | if(props.theme){ |
| | | state.config.headerBGC = '#0049af' |
| | | state.config.oddRowBGC = 'none' |
| | | state.config.evenRowBGC = 'rgba(57,122,206,.1)' |
| | | }else{ |
| | | state.config.headerBGC = '#333' |
| | | state.config.oddRowBGC = '#888' |
| | | state.config.evenRowBGC = '#999' |
| | | } |
| | | }) |
| | | |
| | | const getTheme =()=>{ |
| | | if(screenTheme.value.isDark){ |
| | | state.config.headerBGC = '#0049af' |
| | | state.config.oddRowBGC = 'none' |
| | | state.config.evenRowBGC = 'rgba(57,122,206,.1)' |
| | | }else{ |
| | | state.config.headerBGC = '#333' |
| | | state.config.oddRowBGC = '#888' |
| | | state.config.evenRowBGC = '#999' |
| | | } |
| | | } |
| | | |
| | | // 页面载入时执行方法 |
| | | onMounted(() => { |
| | | getTheme() |
| | | }); |
| | | |
| | | return { |
| | |
| | | <template> |
| | | <div class="charts-cont"> |
| | | <!-- <div class="pro" :id="pro">--> |
| | | <div class="pro" :id="pro"> |
| | | |
| | | <!-- </div>--> |
| | | <dv-active-ring-chart :config="config" style="width:100%;height:100%" /> |
| | | </div> |
| | | <!-- <dv-active-ring-chart :config="config" style="width:100%;height:100%" />--> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | lineWidth: fontSize(25), |
| | | digitalFlopStyle: { |
| | | fontSize: 16, |
| | | fill: '#fff' |
| | | fill: '#999' |
| | | } |
| | | } |
| | | }) |
| | | // type EChartsOption = echarts.EChartsOption |
| | | // // 隐患整改情况 |
| | | // const initPro =()=>{ |
| | | // let dom = document.getElementById(pro.value); |
| | | // let myChart = echarts.init(dom); |
| | | // |
| | | // let option: EChartsOption; |
| | | // |
| | | // option = { |
| | | // tooltip: { |
| | | // trigger: 'item' |
| | | // }, |
| | | // legend: { |
| | | // top: '0', |
| | | // left: 'center', |
| | | // textStyle:{ |
| | | // color: '#fff', |
| | | // fontSize: fontSize(11) |
| | | // } |
| | | // }, |
| | | // series: [ |
| | | // { |
| | | // name: 'Access From', |
| | | // type: 'pie', |
| | | // radius: ['45%', '70%'], |
| | | // avoidLabelOverlap: false, |
| | | // itemStyle: { |
| | | // borderRadius: 4 |
| | | // }, |
| | | // label: { |
| | | // show: true, |
| | | // position: 'outer', |
| | | // 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: 1048, name: '持证人员' }, |
| | | // { value: 735, name: '非持证人员' } |
| | | // ], |
| | | // center: ['50%','55%'] |
| | | // } |
| | | // ] |
| | | // }; |
| | | // |
| | | // option && myChart.setOption(option); |
| | | // window.addEventListener("resize",function (){ |
| | | // myChart.resize(); |
| | | // }); |
| | | // } |
| | | type EChartsOption = echarts.EChartsOption |
| | | // 隐患整改情况 |
| | | const initPro =()=>{ |
| | | let dom = document.getElementById(pro.value); |
| | | let myChart = echarts.init(dom); |
| | | |
| | | let option: EChartsOption; |
| | | |
| | | option = { |
| | | tooltip: { |
| | | trigger: 'item' |
| | | }, |
| | | legend: { |
| | | top: '0', |
| | | left: 'center', |
| | | textStyle:{ |
| | | color: '#999', |
| | | fontSize: fontSize(11) |
| | | } |
| | | }, |
| | | series: [ |
| | | { |
| | | name: 'Access From', |
| | | type: 'pie', |
| | | radius: ['45%', '70%'], |
| | | avoidLabelOverlap: false, |
| | | itemStyle: { |
| | | borderRadius: 4 |
| | | }, |
| | | label: { |
| | | show: true, |
| | | position: 'outer', |
| | | fontSize: fontSize(12), |
| | | color: '#999', |
| | | textBorderWidth: 0, |
| | | width: 30, |
| | | overflow: 'break' |
| | | }, |
| | | labelLine: { |
| | | show: true, |
| | | length: 10, |
| | | length2: 10 |
| | | }, |
| | | emphasis: { |
| | | label: { |
| | | show: true, |
| | | fontSize: fontSize(22), |
| | | fontWeight: 'bold' |
| | | } |
| | | }, |
| | | data: [ |
| | | { value: 1048, name: '持证人员' }, |
| | | { value: 735, 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(() => { |
| | | initPro() |
| | | }); |
| | | |
| | | return { |
| | |
| | | itemWidth: fontSize(10), |
| | | itemHeight: fontSize(8), |
| | | textStyle:{ |
| | | color: '#fff', |
| | | color: 'auto', |
| | | fontSize: fontSize(12) |
| | | } |
| | | }, |
| | |
| | | axisLine:{ |
| | | show: true, |
| | | lineStyle:{ |
| | | color: '#fff' |
| | | color: '#999' |
| | | } |
| | | }, |
| | | axisLabel:{ |
| | | color: '#fff' |
| | | color: '#999' |
| | | } |
| | | }, |
| | | yAxis: { |
| | |
| | | } |
| | | }, |
| | | axisLabel:{ |
| | | color: '#ccc' |
| | | color: '#999' |
| | | }, |
| | | splitLine:{ |
| | | show: false |
| | |
| | | itemWidth: fontSize(10), |
| | | itemHeight: fontSize(8), |
| | | textStyle:{ |
| | | color: '#fff', |
| | | color: 'auto', |
| | | fontSize: fontSize(12) |
| | | } |
| | | }, |
| | |
| | | axisLine:{ |
| | | show: true, |
| | | lineStyle:{ |
| | | color: '#fff' |
| | | color: '#999' |
| | | } |
| | | }, |
| | | axisLabel:{ |
| | | color: '#fff' |
| | | color: '#999' |
| | | } |
| | | }, |
| | | yAxis: { |
| | |
| | | } |
| | | }, |
| | | axisLabel:{ |
| | | color: '#ccc' |
| | | color: '#999' |
| | | }, |
| | | splitLine:{ |
| | | show: false |
| | |
| | | { |
| | | name: '消防耗材', |
| | | type: 'pie', |
| | | radius: ['40%', '45%'], |
| | | radius: [fontSize(40), fontSize(50)], |
| | | data: [ |
| | | { value: 2103, name: '消防耗材'}, |
| | | { value: 2310, name: '消防耗材未使用'} |
| | |
| | | rich: { |
| | | total:{ |
| | | fontSize: fontSize(12), |
| | | color:'#fff', |
| | | color:'#999', |
| | | lineHeight: fontSize(16) |
| | | }, |
| | | active: { |
| | | fontSize: fontSize(16), |
| | | color:'#fff', |
| | | color:'#999', |
| | | }, |
| | | } |
| | | }, |
| | |
| | | { |
| | | name: '安全帽', |
| | | type: 'pie', |
| | | radius: ['40%', '45%'], |
| | | radius: [fontSize(40), fontSize(50)], |
| | | data: [ |
| | | { value: 23509, name: '安全帽'}, |
| | | { value: 34312, name: '安全帽未使用'} |
| | |
| | | rich: { |
| | | total:{ |
| | | fontSize: fontSize(12), |
| | | color:'#fff', |
| | | color:'#999', |
| | | lineHeight: fontSize(16) |
| | | }, |
| | | active: { |
| | | fontSize: fontSize(16), |
| | | color:'#fff', |
| | | color:'#999', |
| | | }, |
| | | } |
| | | }, |
| | |
| | | { |
| | | name: '防护服', |
| | | type: 'pie', |
| | | radius: ['40%', '45%'], |
| | | radius: [fontSize(40), fontSize(50)], |
| | | data: [ |
| | | { value: 12830, name: '防护服'}, |
| | | { value: 22140, name: '防护服未使用'} |
| | |
| | | rich: { |
| | | total:{ |
| | | fontSize: fontSize(12), |
| | | color:'#fff', |
| | | color:'#999', |
| | | lineHeight: fontSize(16) |
| | | }, |
| | | active: { |
| | | fontSize: fontSize(16), |
| | | color:'#fff', |
| | | color:'#999', |
| | | }, |
| | | } |
| | | }, |
| | |
| | | { |
| | | name: '劳保鞋', |
| | | type: 'pie', |
| | | radius: ['40%', '45%'], |
| | | radius: [fontSize(40), fontSize(50)], |
| | | data: [ |
| | | { value: 5492, name: '劳保鞋'}, |
| | | { value: 10842, name: '劳保鞋未使用'} |
| | |
| | | rich: { |
| | | total:{ |
| | | fontSize: fontSize(12), |
| | | color:'#fff', |
| | | color:'#999', |
| | | lineHeight: fontSize(16) |
| | | }, |
| | | active: { |
| | | fontSize: fontSize(16), |
| | | color:'#fff', |
| | | color:'#999', |
| | | }, |
| | | } |
| | | }, |
| | |
| | | { |
| | | name: '动火护具', |
| | | type: 'pie', |
| | | radius: ['40%', '45%'], |
| | | radius: [fontSize(40), fontSize(50)], |
| | | data: [ |
| | | { value: 44043, name: '动火护具'}, |
| | | { value: 68102, name: '动火护具未使用' } |
| | |
| | | rich: { |
| | | total:{ |
| | | fontSize: fontSize(12), |
| | | color:'#fff', |
| | | color:'#999', |
| | | lineHeight: fontSize(16) |
| | | }, |
| | | active: { |
| | | fontSize: fontSize(16), |
| | | color:'#fff', |
| | | color:'#999', |
| | | }, |
| | | } |
| | | }, |
| | |
| | | { |
| | | name: '急救包', |
| | | type: 'pie', |
| | | radius: ['40%', '45%'], |
| | | radius: [fontSize(40), fontSize(50)], |
| | | data: [ |
| | | { value: 8603, name: '急救包'}, |
| | | { value: 12032, name: '急救包未使用'} |
| | |
| | | rich: { |
| | | total:{ |
| | | fontSize: fontSize(12), |
| | | color:'#fff', |
| | | color:'#999', |
| | | lineHeight: fontSize(16) |
| | | }, |
| | | active: { |
| | | fontSize: fontSize(16), |
| | | color:'#fff', |
| | | color:'#999', |
| | | }, |
| | | } |
| | | }, |
| | |
| | | { |
| | | name: '人员培训资料', |
| | | type: 'pie', |
| | | radius: ['40%', '45%'], |
| | | radius: [fontSize(40), fontSize(50)], |
| | | data: [ |
| | | { value: 8960, name: '人员培训资料'}, |
| | | { value: 9890, name: '人员培训资料未使用'} |
| | |
| | | rich: { |
| | | total:{ |
| | | fontSize: fontSize(12), |
| | | color:'#fff', |
| | | color:'#999', |
| | | lineHeight: fontSize(16) |
| | | }, |
| | | active: { |
| | | fontSize: fontSize(16), |
| | | color:'#fff', |
| | | color:'#999', |
| | | }, |
| | | } |
| | | }, |
| | |
| | | { |
| | | name: '安全护具', |
| | | type: 'pie', |
| | | radius: ['40%', '45%'], |
| | | radius: [fontSize(40), fontSize(50)], |
| | | data: [ |
| | | { value: 12302, name: '安全护具'}, |
| | | { value: 20130, name: '安全护具未使用'} |
| | |
| | | rich: { |
| | | total:{ |
| | | fontSize: fontSize(12), |
| | | color:'#fff', |
| | | color:'#999', |
| | | lineHeight: fontSize(16) |
| | | }, |
| | | active: { |
| | | fontSize: fontSize(16), |
| | | color:'#fff', |
| | | color:'#999', |
| | | }, |
| | | } |
| | | }, |
| | |
| | | { |
| | | name: '高空护具', |
| | | type: 'pie', |
| | | radius: ['40%', '45%'], |
| | | radius: [fontSize(40), fontSize(50)], |
| | | data: [ |
| | | { value: 42948, name: '高空护具'}, |
| | | { value: 89342, name: '高空护具未使用'} |
| | |
| | | rich: { |
| | | total:{ |
| | | fontSize: fontSize(12), |
| | | color:'#fff', |
| | | color:'#999', |
| | | lineHeight: fontSize(16) |
| | | }, |
| | | active: { |
| | | fontSize: fontSize(16), |
| | | color:'#fff', |
| | | color:'#999', |
| | | }, |
| | | } |
| | | }, |
| | |
| | | { |
| | | name: '防尘护具', |
| | | type: 'pie', |
| | | radius: ['40%', '45%'], |
| | | radius: [fontSize(40), fontSize(50)], |
| | | data: [ |
| | | { value: 1220, name: '防尘护具'}, |
| | | { value: 5034, name: '防尘护具未使用' } |
| | |
| | | rich: { |
| | | total:{ |
| | | fontSize: fontSize(12), |
| | | color:'#fff', |
| | | color:'#999', |
| | | lineHeight: fontSize(16) |
| | | }, |
| | | active: { |
| | | fontSize: fontSize(16), |
| | | color:'#fff', |
| | | color:'#999', |
| | | }, |
| | | } |
| | | }, |
| | |
| | | .charts-cont{ |
| | | width: 100%; |
| | | height: 100%; |
| | | padding: 4% 2% 2%; |
| | | padding: 2%; |
| | | position: relative; |
| | | |
| | | .stock{ |
| | |
| | | } |
| | | }, |
| | | axisLabel:{ |
| | | color: '#ccc' |
| | | color: '#999' |
| | | }, |
| | | splitLine:{ |
| | | show: false |
| | |
| | | axisLine:{ |
| | | show: true, |
| | | lineStyle:{ |
| | | color: '#fff' |
| | | color: '#999' |
| | | } |
| | | }, |
| | | axisLabel:{ |
| | | color: '#fff' |
| | | color: '#999' |
| | | } |
| | | }, |
| | | series: [ |
| | |
| | | label:{ |
| | | show: true, |
| | | position: 'outside', |
| | | color: '#fff', |
| | | color: '#999', |
| | | fontSize: fontSize(11) |
| | | } |
| | | } |
| | |
| | | } |
| | | }, |
| | | axisLabel:{ |
| | | color: '#ccc' |
| | | color: '#999' |
| | | }, |
| | | splitLine:{ |
| | | show: false |
| | |
| | | axisLine:{ |
| | | show: true, |
| | | lineStyle:{ |
| | | color: '#fff' |
| | | color: '#999' |
| | | } |
| | | }, |
| | | axisLabel:{ |
| | | color: '#fff' |
| | | color: '#999' |
| | | } |
| | | }, |
| | | series: [ |
| | |
| | | label:{ |
| | | show: true, |
| | | position: 'outside', |
| | | color: '#fff', |
| | | color: '#999', |
| | | fontSize: fontSize(11) |
| | | } |
| | | } |
| | |
| | | } |
| | | }, |
| | | axisLabel:{ |
| | | color: '#ccc' |
| | | color: '#999' |
| | | }, |
| | | splitLine:{ |
| | | show: false |
| | |
| | | axisLine:{ |
| | | show: true, |
| | | lineStyle:{ |
| | | color: '#fff' |
| | | color: '#999' |
| | | } |
| | | }, |
| | | axisLabel:{ |
| | | color: '#fff' |
| | | color: '#999' |
| | | } |
| | | }, |
| | | series: [ |
| | |
| | | label:{ |
| | | show: true, |
| | | position: 'outside', |
| | | color: '#fff', |
| | | color: '#999', |
| | | fontSize: fontSize(11) |
| | | } |
| | | } |
| | |
| | | <template> |
| | | <div class="container"> |
| | | <div id="container" class="dark"> |
| | | <div class="header-content"> |
| | | <div class="logo"> |
| | | <img src="../../../assets/warningScreen/logo_dark.png" alt="" /> |
| | | <img v-if="screenTheme.isDark" src="../../../assets/warningScreen/logo_dark.png" alt="" /> |
| | | <img v-else="!screenTheme.isDark" src="../../../assets/warningScreen/logo_light.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="themeBtn" @click="changeTheme()"> |
| | | <img v-if="screenTheme.isDark" src="../../../assets/warningScreen/skin.png"/> |
| | | <img v-else src="../../../assets/warningScreen/skin-light.png"/> |
| | | </div> |
| | | <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"/> |
| | | <!-- <img src="../../../assets/loginPage/back-icon.png"/>--> |
| | | <el-icon><SwitchButton /></el-icon> |
| | | <div>退出</div> |
| | | </div> |
| | | </div> |
| | |
| | | <div class="main-content"> |
| | | <div class="main-left"> |
| | | <div class="left-top"> |
| | | <dv-border-box-13 backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-13> |
| | | <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13> |
| | | <div class="part-tit"> |
| | | <span>| 事故等级分布</span> |
| | | <img @click="jumpPage(1)" src="../../../assets/warningScreen/small-full.png"> |
| | | <!-- <img @click="jumpPage(1)" src="../../../assets/warningScreen/small-full.png">--> |
| | | <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(1)"/> |
| | | </div> |
| | | <div class="chart-box"> |
| | | <accident :size="1"></accident> |
| | | <accident :size="1" :theme="screenTheme.isDark"></accident> |
| | | </div> |
| | | </div> |
| | | <div class="left-mid"> |
| | | <dv-border-box-13 backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-13> |
| | | <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13> |
| | | <div class="part-tit"> |
| | | <span>| 应急演练次数</span> |
| | | <img @click="jumpPage(2)" src="../../../assets/warningScreen/small-full.png"> |
| | | <!-- <img @click="jumpPage(2)" src="../../../assets/warningScreen/small-full.png">--> |
| | | <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(2)"/> |
| | | </div> |
| | | <div class="chart-box"> |
| | | <span class="train-tip">距上次演练结束 5 天</span> |
| | |
| | | </div> |
| | | </div> |
| | | <div class="left-bottom"> |
| | | <dv-border-box-13 backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-13> |
| | | <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13> |
| | | <div class="part-tit"> |
| | | <span>| 隐患等级数量分布</span> |
| | | <div> |
| | |
| | | :value="item.value" |
| | | /> |
| | | </el-select> |
| | | <img @click="jumpPage(3)" src="../../../assets/warningScreen/small-full.png"> |
| | | <!-- <img @click="jumpPage(3)" src="../../../assets/warningScreen/small-full.png">--> |
| | | <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(3)"/> |
| | | </div> |
| | | |
| | | </div> |
| | |
| | | </div> |
| | | <div class="main-middle"> |
| | | <div class="mid-top"> |
| | | <dv-border-box-11 title="SPI数据分析" backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-11> |
| | | <dv-border-box-11 title="SPI数据分析" :backgroundColor="boxBg" :color="boxBigColor" class="box-bg"></dv-border-box-11> |
| | | <div class="part-tit" style="position: absolute;top: 12%;padding: 0 4%"> |
| | | <el-cascader |
| | | class="spiSe" |
| | |
| | | v-model="spiValue" |
| | | :options="spiOptions" |
| | | :props="props" |
| | | :show-all-levels="false" |
| | | @change="handleChange" |
| | | /> |
| | | <!-- <span>SPI数据分析</span>--> |
| | | <img @click="jumpPage(4)" src="../../../assets/warningScreen/small-full.png"> |
| | | <!-- <img @click="jumpPage(4)" src="../../../assets/warningScreen/small-full.png">--> |
| | | <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(4)"/> |
| | | </div> |
| | | <div class="chart-box"> |
| | | <spi :size="1" :dep="spiValue"></spi> |
| | | <spi :size="1"></spi> |
| | | </div> |
| | | </div> |
| | | <div class="mid-bottom"> |
| | | <div class="mid-bot-l"> |
| | | <dv-border-box-13 backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-13> |
| | | <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13> |
| | | <div class="part-tit"> |
| | | <span>| 教育培训分析</span> |
| | | <img @click="jumpPage(5)" src="../../../assets/warningScreen/small-full.png"> |
| | | <!-- <img @click="jumpPage(5)" src="../../../assets/warningScreen/small-full.png">--> |
| | | <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(5)"/> |
| | | </div> |
| | | <div class="chart-box"> |
| | | <educate :size="1"></educate> |
| | | </div> |
| | | </div> |
| | | <div class="mid-bot-m"> |
| | | <dv-border-box-13 backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-13> |
| | | <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13> |
| | | <div class="part-tit"> |
| | | <span>| 隐患等级</span> |
| | | <img @click="jumpPage(6)" src="../../../assets/warningScreen/small-full.png"> |
| | | <!-- <img @click="jumpPage(6)" src="../../../assets/warningScreen/small-full.png">--> |
| | | <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(6)"/> |
| | | </div> |
| | | <div class="chart-box"> |
| | | <danger :size="1"></danger> |
| | | <danger :size="1" :theme="screenTheme.isDark"></danger> |
| | | </div> |
| | | </div> |
| | | <div class="mid-bot-r"> |
| | | <dv-border-box-13 backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-13> |
| | | <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13> |
| | | <div class="part-tit"> |
| | | <span>| 人员专业度分布</span> |
| | | <img @click="jumpPage(7)" src="../../../assets/warningScreen/small-full.png"> |
| | | <!-- <img @click="jumpPage(7)" src="../../../assets/warningScreen/small-full.png">--> |
| | | <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(7)"/> |
| | | </div> |
| | | <div class="chart-box"> |
| | | <profession :size="1"></profession> |
| | |
| | | </div> |
| | | <div class="main-right"> |
| | | <div class="right-top"> |
| | | <dv-border-box-13 backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-13> |
| | | <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13> |
| | | <div class="part-tit"> |
| | | <span>| 预警消息报告</span> |
| | | <img @click="jumpPage(8)" src="../../../assets/warningScreen/small-full.png"> |
| | | <!-- <img @click="jumpPage(8)" src="../../../assets/warningScreen/small-full.png">--> |
| | | <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(8)"/> |
| | | </div> |
| | | <div class="chart-box"> |
| | | <message :size="1"></message> |
| | | <message :size="1" :theme="screenTheme.isDark"></message> |
| | | </div> |
| | | </div> |
| | | <div class="right-mid"> |
| | | <dv-border-box-13 backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-13> |
| | | <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13> |
| | | <div class="part-tit"> |
| | | <span>| 特殊作业实时监控</span> |
| | | <img @click="jumpPage(9)" src="../../../assets/warningScreen/small-full.png"> |
| | | <!-- <img @click="jumpPage(9)" src="../../../assets/warningScreen/small-full.png">--> |
| | | <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(9)"/> |
| | | </div> |
| | | <div class="chart-box"> |
| | | <monitor></monitor> |
| | | </div> |
| | | </div> |
| | | <div class="right-bottom"> |
| | | <dv-border-box-13 backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-13> |
| | | <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13> |
| | | <div class="part-tit"> |
| | | <span>| 风险应急物资储备</span> |
| | | <img @click="jumpPage(10)" src="../../../assets/warningScreen/small-full.png"> |
| | | <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(10)"/> |
| | | </div> |
| | | <div class="chart-box"> |
| | | <stock :size="1"></stock> |
| | |
| | | import {hiddenReportApi} from "/@/api/doublePreventSystem/report"; |
| | | import { productionDeviceApi } from '/@/api/doublePreventSystem/productionDevice/index.ts'; |
| | | import '/@/theme/bigScreen.css' |
| | | import {useScreenTheme} from "/@/stores/screenTheme" |
| | | import {storeToRefs} from "pinia"; |
| | | |
| | | // 定义接口来定义对象的类型 |
| | | interface stateType { |
| | | boxBg: string; |
| | | boxColor: Array<string>; |
| | | boxBigColor: Array<string>; |
| | | isScreenfull: boolean; |
| | | currentTime: string; |
| | | month: number; |
| | |
| | | stock: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/stock.vue')) |
| | | }, |
| | | setup() { |
| | | const screenThemes = useScreenTheme() |
| | | const { screenTheme } = storeToRefs(screenThemes); |
| | | const router = useRouter(); |
| | | const props = { |
| | | expandTrigger: 'hover', |
| | | checkStrictly: true |
| | | } |
| | | const state = reactive<stateType>({ |
| | | boxBg: 'rgba(8, 109, 209, 0.2)', |
| | | boxColor: [], |
| | | boxBigColor: [], |
| | | isScreenfull: false, |
| | | currentTime: '', |
| | | month: 0, |
| | |
| | | // 页面载入时执行方法 |
| | | onMounted(() => { |
| | | getTime() |
| | | getTheme() |
| | | }); |
| | | |
| | | const getTime =()=>{ |
| | |
| | | state.currentTime = new Date().toLocaleString(); |
| | | }, 1000); |
| | | } |
| | | |
| | | const changeTheme = () =>{ |
| | | screenTheme.value.isDark = !screenTheme.value.isDark |
| | | screenThemes.setScreenTheme(screenTheme.value.isDark) |
| | | if(screenTheme.value.isDark){ |
| | | document.getElementById('container').setAttribute( "class", 'dark' ) |
| | | state.boxBg = 'rgba(8, 109, 209, 0.2)' |
| | | state.boxColor = [] |
| | | state.boxBigColor = [] |
| | | }else{ |
| | | document.getElementById('container').setAttribute( "class", 'light' ) |
| | | state.boxBg = '#fff' |
| | | state.boxColor = ['#ccc','#333'] |
| | | state.boxBigColor = ['#666','#fff'] |
| | | } |
| | | } |
| | | |
| | | const getTheme =()=>{ |
| | | if(screenTheme.value.isDark){ |
| | | window.document.getElementById('container').setAttribute( "class", 'dark' ); |
| | | state.boxBg = 'rgba(8, 109, 209, 0.2)' |
| | | state.boxColor = [] |
| | | state.boxBigColor = [] |
| | | }else{ |
| | | window.document.getElementById('container').setAttribute( "class", 'light' ); |
| | | state.boxBg = '#fff' |
| | | state.boxColor = ['#ccc','#333'] |
| | | state.boxBigColor = ['#666','#fff'] |
| | | } |
| | | } |
| | | |
| | | // 全屏 |
| | | const onScreenfullClick = () => { |
| | | if (!screenfull.isEnabled) { |
| | |
| | | return { |
| | | router, |
| | | props, |
| | | screenTheme, |
| | | changeTheme, |
| | | onScreenfullClick, |
| | | jumpPage, |
| | | goBack, |
| | |
| | | |
| | | <style scoped lang="scss"> |
| | | $homeNavLengh: 8; |
| | | |
| | | .container { |
| | | .dark { |
| | | width: 100%; |
| | | height: 100%; |
| | | display: flex; |
| | |
| | | margin-right: 20px; |
| | | |
| | | img{ |
| | | width: 16px; |
| | | height: auto; |
| | | width: 1rem; |
| | | height: 1rem; |
| | | } |
| | | div{ |
| | | margin-left: 6px; |
| | | } |
| | | } |
| | | .fullbtn{ |
| | | .themeBtn{ |
| | | img{ |
| | | width: 1.25rem; |
| | | height: 1.25rem; |
| | | } |
| | | cursor: pointer; |
| | | } |
| | | .fullBtn{ |
| | | cursor: pointer; |
| | | } |
| | | .backBtn{ |
| | |
| | | } |
| | | .main-content{ |
| | | width: 100%; |
| | | height: 100%; |
| | | padding: 0 25px 25px; |
| | | height: calc(100vh - 72px); |
| | | padding: 0.4rem 1.5rem 2rem; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | |
| | | } |
| | | |
| | | .dv-border-box-11{ |
| | | :deep(.dv-border-svg-container){ |
| | | .dv-border-box-11-title{ |
| | | font-size: 1.5rem; |
| | | fill: #11feee !important; |
| | | } |
| | | ::v-deep(.dv-border-svg-container){ |
| | | .dv-border-box-11-title{ |
| | | font-size: 1.5rem; |
| | | fill: #11feee !important; |
| | | } |
| | | } |
| | | } |
| | | .part-tit{ |
| | |
| | | } |
| | | |
| | | img{ |
| | | width: 1.2rem; |
| | | height: 1.2rem; |
| | | cursor: pointer; |
| | | } |
| | | } |
| | | .chart-box{ |
| | | width: 100%; |
| | | height: calc(100% - 20px); |
| | | margin-top: 20px; |
| | | .train-tip{ |
| | | display: block; |
| | | font-size: 0.8rem; |
| | | margin-top: 5%; |
| | | margin-left: 2%; |
| | | color: #fff; |
| | | } |
| | | accident{ |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | |
| | | training{ |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .main-left{ |
| | | width: calc(25% - 5px); |
| | | &>div{ |
| | | width: 100%; |
| | | height: calc((100%/3) - (20px/3)); |
| | | } |
| | | } |
| | | .main-middle{ |
| | | width: calc(50% - 10px); |
| | | |
| | | .mid-top{ |
| | | width: 100%; |
| | | height: calc((200% - 40px)/3 + 10px); |
| | | } |
| | | |
| | | .mid-bottom{ |
| | | display: flex; |
| | | width: 100%; |
| | | height: calc((100%/3) - (20px/3)); |
| | | justify-content: space-between; |
| | | padding: 0; |
| | | background: none; |
| | | border-radius: 0; |
| | | |
| | | &>div { |
| | | position: relative; |
| | | width: calc((100% - 20px)/3); |
| | | border-radius: 8px; |
| | | overflow: hidden; |
| | | padding: 10px 15px; |
| | | box-sizing: border-box; |
| | | } |
| | | } |
| | | } |
| | | .main-right{ |
| | | width: calc(25% - 5px); |
| | | &>div{ |
| | | width: 100%; |
| | | height: calc((100%/3) - (20px/3)); |
| | | } |
| | | } |
| | | } |
| | | } |
| | | .light { |
| | | width: 100%; |
| | | height: 100%; |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | background: url('../../../assets/warningScreen/riskprocast-light.jpg') no-repeat center; |
| | | background-size: 100% 100%; |
| | | color: #000; |
| | | |
| | | .header-content { |
| | | width: 100%; |
| | | height: 72px; |
| | | padding: 0 20px; |
| | | font-size: 1.25rem; |
| | | 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: 2rem; |
| | | font-weight: bolder; |
| | | line-height: 72px; |
| | | text-align: center; |
| | | letter-spacing: 2px; |
| | | } |
| | | |
| | | .title-right { |
| | | width: 27%; |
| | | height: 90px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-around; |
| | | font-size: 1rem; |
| | | padding-left: 30px; |
| | | |
| | | .datetime { |
| | | color: #000; |
| | | } |
| | | .btns{ |
| | | display: flex; |
| | | align-items: center; |
| | | |
| | | &>div{ |
| | | display: flex; |
| | | align-items: center; |
| | | font-size: 1rem; |
| | | margin-right: 20px; |
| | | |
| | | img{ |
| | | width: 1rem; |
| | | height: 1rem; |
| | | } |
| | | div{ |
| | | margin-left: 6px; |
| | | } |
| | | } |
| | | .themeBtn{ |
| | | img{ |
| | | width: 1.25rem; |
| | | height: 1.25rem; |
| | | } |
| | | cursor: pointer; |
| | | } |
| | | .fullBtn{ |
| | | cursor: pointer; |
| | | } |
| | | .backBtn{ |
| | | cursor: pointer; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | .main-content{ |
| | | width: 100%; |
| | | height: calc(100vh - 72px); |
| | | padding: 0.4rem 1.5rem 2rem; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | |
| | | &>div{ |
| | | height: 100%; |
| | | display: flex; |
| | | flex-direction: column; |
| | | justify-content: space-between; |
| | | align-items: flex-start; |
| | | &>div{ |
| | | padding: 20px 15px 10px; |
| | | box-sizing: border-box; |
| | | position: relative; |
| | | .box-bg{ |
| | | position: absolute; |
| | | width: 100%; |
| | | height: 100%; |
| | | left: 0; |
| | | top: 0; |
| | | right: 0; |
| | | bottom: 0; |
| | | margin: auto; |
| | | color: #000; |
| | | font-weight: bolder; |
| | | } |
| | | |
| | | .dv-border-box-11{ |
| | | :deep(.dv-border-svg-container){ |
| | | .dv-border-box-11-title{ |
| | | font-size: 1.5rem; |
| | | fill: #000 !important; |
| | | } |
| | | } |
| | | } |
| | | .part-tit{ |
| | | position: absolute; |
| | | top: 20px; |
| | | left: 0; |
| | | height: 20px; |
| | | width: 100%; |
| | | padding: 0 15px; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | z-index: 9999; |
| | | div{ |
| | | width: 40%; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: end; |
| | | } |
| | | span{ |
| | | font-size: 1.25rem; |
| | | font-weight: bolder; |
| | | color: #000; |
| | | } |
| | | ::v-deep(.el-cascader){ |
| | | width: 25% !important; |
| | | } |
| | | ::v-deep(.el-popper){ |
| | | background-color: #fff; |
| | | border: 1px solid #ccc; |
| | | color: #000; |
| | | .el-cascader-node__label{ |
| | | color: #000; |
| | | } |
| | | .el-icon{ |
| | | color: #000; |
| | | } |
| | | .el-cascader-node{ |
| | | &:hover{ |
| | | background: #ccc; |
| | | } |
| | | } |
| | | } |
| | | ::v-deep(.el-popper__arrow){ |
| | | &::before{ |
| | | background-color: #fff !important; |
| | | border: 1px solid #ccc; |
| | | } |
| | | } |
| | | ::v-deep(.el-input__wrapper){ |
| | | width: 20%; |
| | | box-shadow: none; |
| | | border: 1px solid #ccc; |
| | | background: #fff !important; |
| | | height: 2.5rem; |
| | | color: #000; |
| | | |
| | | input{ |
| | | font-size: 1.25rem; |
| | | color: #000; |
| | | } |
| | | .el-icon{ |
| | | color: #000; |
| | | } |
| | | } |
| | | .selector{ |
| | | width: calc(100% - 1.25rem); |
| | | margin-right: 0.8rem; |
| | | |
| | | ::v-deep(.el-popper){ |
| | | background-color: rgba(255,255,255,1); |
| | | border: 1px solid #ccc; |
| | | color: #fff; |
| | | .el-select-dropdown__item{ |
| | | color: #000; |
| | | } |
| | | .el-select-dropdown__item.hover{ |
| | | background: #ccc; |
| | | } |
| | | } |
| | | ::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; |
| | | } |
| | | } |
| | | } |
| | | |
| | | img{ |
| | | width: 1.20rem; |
| | | height: 1.20rem; |
| | | cursor: pointer; |
| | |
| | | font-size: 0.8rem; |
| | | margin-top: 5%; |
| | | margin-left: 2%; |
| | | color: #333; |
| | | } |
| | | accident{ |
| | | width: 100%; |
| | |
| | | <template> |
| | | <div class="com-page"> |
| | | <div class="btns" @click="goBack()"> |
| | | 返回首页 |
| | | <div id="pageCont" class="dark-page"> |
| | | <div class="btns"> |
| | | <dv-decoration-11 :color="lineColor" @click="goBack()"> |
| | | <div color-green font-600 bg="~ dark/0"> |
| | | 返回 |
| | | </div> |
| | | </dv-decoration-11> |
| | | </div> |
| | | |
| | | <div class="tit"> |
| | | <div class="title">{{curChart===1?'事故等级分布':curChart===2?'应急演练次数':curChart===3?'年度隐患等级数量分布':curChart===4?'SPI数据分析':curChart===5?'教育培训分析':curChart===6?'隐患等级':curChart===7?'人员专业度分布':curChart===8?'预警消息报告':curChart===9?'特殊作业实时监控':'风险应急物资储备'}}</div> |
| | | </div> |
| | |
| | | <accident v-if="curChart===1" :size="2.5"></accident> |
| | | <training v-else-if="curChart===2" :size="2.5"></training> |
| | | <risk v-else-if="curChart===3" :month="month" :size="2.5"></risk> |
| | | <spi v-else-if="curChart===4" :size="2.5"></spi> |
| | | <spi v-else-if="curChart===4" :size="2"></spi> |
| | | <educate v-else-if="curChart===5" :size="2.5"></educate> |
| | | <danger v-else-if="curChart===6" :size="2.5"></danger> |
| | | <profession v-else-if="curChart===7" :size="2.5"></profession> |
| | |
| | | <stock v-else class="main-chart" :size="2"></stock> |
| | | </div> |
| | | <div class="chart-right"> |
| | | <dv-decoration-10 :color="['#11FEEE']" style="width:100%;height:5%;" /> |
| | | <dv-decoration-10 :color="lineColor" style="width:100%;height:5%;" /> |
| | | <div class="charts-des"> |
| | | <div class=""> |
| | | |
| | | <div class="des-tit"> |
| | | <div v-if="curChart===1">2022年度事故等级分布与影响一览</div> |
| | | <div v-else-if="curChart===2">应急演练概况</div> |
| | | <div v-else-if="curChart===3">隐患影响等级分布详情</div> |
| | | <div v-else-if="curChart===4">2022年度事企业SPI趋势</div> |
| | | <div v-else-if="curChart===5">教育培训情况汇总</div> |
| | | <div v-else-if="curChart===6">隐患等级分布与隐患整改率</div> |
| | | <div v-else-if="curChart===7">人员持证上岗情况</div> |
| | | <div v-else-if="curChart===8">预警消息SPI报告-2022年8月</div> |
| | | <div v-else-if="curChart===9">监控列表</div> |
| | | <div v-else>当前应急物资储备情况(总)</div> |
| | | <dv-decoration8 :color="lineColor" :reverse="true" style="width:100%;" /> |
| | | </div> |
| | | <div class="des-main"> |
| | | <div v-for="(item,index) in accidentDesc" :key="index"> |
| | | <h4><span>{{item.title}}</span>共计:<span>{{item.total}}</span>起</h4> |
| | | <h4> |
| | | 事故影响 |
| | | </h4> |
| | | <p>{{item.desc}}</p> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <dv-decoration-10 :color="['#11FEEE']" style="width:100%;height:5%;" /> |
| | | <dv-decoration-10 :color="lineColor" style="width:100%;height:5%;" /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | import {hiddenReportApi} from "/@/api/doublePreventSystem/report"; |
| | | import { productionDeviceApi } from '/@/api/doublePreventSystem/productionDevice/index.ts'; |
| | | import '/@/theme/bigScreen.css' |
| | | import {useScreenTheme} from "/@/stores/screenTheme" |
| | | import {storeToRefs} from "pinia"; |
| | | |
| | | // 定义接口来定义对象的类型 |
| | | interface stateType { |
| | | isScreenfull: boolean; |
| | | curChart: number | null; |
| | | month: number; |
| | | optionList: Array<any> |
| | | optionList: Array<any>; |
| | | lineColor: Array<string>; |
| | | accidentDesc: Array<any>; |
| | | } |
| | | export default defineComponent({ |
| | | name: 'warningPage', |
| | |
| | | stock: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/stock.vue')) |
| | | }, |
| | | setup() { |
| | | const screenThemes = useScreenTheme() |
| | | const { screenTheme } = storeToRefs(screenThemes); |
| | | const route = useRoute(); |
| | | const state = reactive<stateType>({ |
| | | isScreenfull: false, |
| | | curChart: null, |
| | | month: 0, |
| | | lineColor: ['#11FEEE'], |
| | | optionList: [ |
| | | { |
| | | label: '年度', |
| | |
| | | label: '十月', |
| | | value: 10 |
| | | } |
| | | ], |
| | | accidentDesc:[ |
| | | { |
| | | title: '特别重大事故', |
| | | total: 10, |
| | | desc: '死亡人数:0人; 重伤人数:2人; 轻伤人数:3人; 直接经济损失:180.61万元' |
| | | }, |
| | | { |
| | | title: '重大事故', |
| | | total: 20, |
| | | desc: '死亡人数:1人; 重伤人数:6人; 轻伤人数:0人; 直接经济损失:160.61万元' |
| | | }, |
| | | { |
| | | title: '较大事故', |
| | | total: 100, |
| | | desc: '死亡人数:0人; 重伤人数:0人; 轻伤人数:3人; 直接经济损失:190.61万元' |
| | | }, |
| | | { |
| | | title: '一般事故', |
| | | total: 130, |
| | | desc: '死亡人数:0人; 重伤人数:0人; 轻伤人数:0人; 直接经济损失:180.61万元' |
| | | }, |
| | | { |
| | | title: '未遂事故', |
| | | total: 150, |
| | | desc: '死亡人数:0人; 重伤人数:0人; 轻伤人数:0人; 直接经济损失:9万元' |
| | | } |
| | | ] |
| | | }); |
| | | |
| | |
| | | if (route.query.num) { |
| | | state.curChart = Number(route.query.num) |
| | | } |
| | | getTheme() |
| | | }); |
| | | |
| | | |
| | |
| | | } |
| | | }); |
| | | }; |
| | | |
| | | const getTheme =()=>{ |
| | | if(screenTheme.value.isDark){ |
| | | window.document.getElementById('pageCont').setAttribute( "class", 'dark-page' ); |
| | | state.lineColor = ['#11FEEE'] |
| | | }else{ |
| | | window.document.getElementById('pageCont').setAttribute( "class", 'light-page' ); |
| | | state.lineColor = ['#333','#ccc'] |
| | | } |
| | | } |
| | | // 返回上一页 |
| | | const goBack = () => { |
| | | window.history.go(-1); |
| | |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | .com-page{ |
| | | .dark-page{ |
| | | width: 100%; |
| | | height: 100%; |
| | | border:1px #5a5959 solid; |
| | |
| | | padding: 4%; |
| | | .btns{ |
| | | position: fixed; |
| | | width: 8%; |
| | | height: 6%; |
| | | right: 5%; |
| | | top: 20px; |
| | | top: 1.25rem; |
| | | font-size: 1.125rem; |
| | | padding: 10px 15px; |
| | | box-sizing: border-box; |
| | | border: 1px solid rgb(0, 208, 206); |
| | | border-radius: 10px; |
| | | color: rgb(17, 254, 238); |
| | | cursor: pointer; |
| | | } |
| | |
| | | height: 90%; |
| | | background: url("../../../../assets/warningScreen/pagebg-r.png") no-repeat center; |
| | | background-size: 100% 100%; |
| | | padding: 4%; |
| | | |
| | | .des-tit{ |
| | | width: 100%; |
| | | &>div{ |
| | | font-size: 1.5rem; |
| | | height: 2.2rem; |
| | | line-height: 2.2rem; |
| | | text-align: center; |
| | | font-weight: bolder; |
| | | color: #11FEEE; |
| | | } |
| | | } |
| | | .des-main{ |
| | | width: 100%; |
| | | height: calc(96% - 2.2rem); |
| | | padding: 0 2%; |
| | | overflow: auto; |
| | | color: #11FEEE; |
| | | |
| | | &::-webkit-scrollbar { width: 0; height: 0; color: transparent; } |
| | | |
| | | &>div{ |
| | | margin-bottom: 2rem; |
| | | &>h4{ |
| | | font-size: 1.25rem; |
| | | display: flex; |
| | | align-items: center; |
| | | |
| | | span{ |
| | | margin-right: 10px; |
| | | } |
| | | &:first-of-type{ |
| | | margin-bottom: 10px; |
| | | } |
| | | } |
| | | |
| | | &>p{ |
| | | font-size: 1rem; |
| | | margin-top: 10px; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | } |
| | | } |
| | | .light-page{ |
| | | width: 100%; |
| | | height: 100%; |
| | | border:1px #5a5959 solid; |
| | | background: #F0F0F0; |
| | | padding: 4%; |
| | | .btns{ |
| | | position: fixed; |
| | | width: 8%; |
| | | height: 6%; |
| | | right: 5%; |
| | | top: 1.25rem; |
| | | font-size: 1.125rem; |
| | | color: #333; |
| | | cursor: pointer; |
| | | } |
| | | .tit{ |
| | | width: 100%; |
| | | height: 122px; |
| | | background: url("../../../../assets/warningScreen/pagebg-t-light.png") no-repeat center; |
| | | background-size: 100% 100%; |
| | | |
| | | |
| | | .title{ |
| | | width: 100%; |
| | | height: 122px; |
| | | line-height: 112px; |
| | | border-radius: 8px; |
| | | margin-bottom: 20px; |
| | | font-size: 2.8rem; |
| | | color: #333; |
| | | font-weight: bolder; |
| | | text-align: center; |
| | | letter-spacing: 5px; |
| | | } |
| | | } |
| | | |
| | | .chart-cont{ |
| | | width: 100%; |
| | | padding: 20px; |
| | | height: calc(100% - 122px); |
| | | display: flex; |
| | | align-items: flex-start; |
| | | justify-content: space-between; |
| | | |
| | | .chart{ |
| | | width: calc((100% - 20px) * 0.63); |
| | | height: 100%; |
| | | padding: 3%; |
| | | background: url("../../../../assets/warningScreen/pagebg-l-light.png") no-repeat center; |
| | | background-size: 100% 100%; |
| | | position: relative; |
| | | .selector-2{ |
| | | position: absolute; |
| | | top: 5%; |
| | | right: 10%; |
| | | width: 20%; |
| | | font-size: 1.25rem; |
| | | color: #fff; |
| | | } |
| | | .selector-3{ |
| | | position: absolute; |
| | | top: 5%; |
| | | right: 10%; |
| | | width: 20%; |
| | | |
| | | ::v-deep(.el-input__wrapper){ |
| | | background: none !important; |
| | | box-shadow: none; |
| | | color: #11FEEE; |
| | | |
| | | input{ |
| | | color: #11FEEE; |
| | | } |
| | | .el-icon{ |
| | | color: #11FEEE; |
| | | } |
| | | } |
| | | } |
| | | .main-chart{ |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | } |
| | | .chart-right{ |
| | | width: calc((100% - 20px) * 0.37); |
| | | height: 100%; |
| | | .charts-des{ |
| | | height: 90%; |
| | | background: url("../../../../assets/warningScreen/pagebg-r-light.png") no-repeat center; |
| | | background-size: 100% 100%; |
| | | padding: 4%; |
| | | |
| | | .des-tit{ |
| | | width: 100%; |
| | | &>div{ |
| | | font-size: 1.5rem; |
| | | height: 2.2rem; |
| | | line-height: 2.2rem; |
| | | text-align: center; |
| | | font-weight: bolder; |
| | | color: #333; |
| | | } |
| | | } |
| | | .des-main{ |
| | | width: 100%; |
| | | height: calc(96% - 2.2rem); |
| | | padding: 0 2%; |
| | | overflow: auto; |
| | | color: #333; |
| | | |
| | | &::-webkit-scrollbar { width: 0; height: 0; color: transparent; } |
| | | |
| | | &>div{ |
| | | margin-bottom: 2rem; |
| | | &>h4{ |
| | | font-size: 1.25rem; |
| | | display: flex; |
| | | align-items: center; |
| | | |
| | | span{ |
| | | margin-right: 10px; |
| | | } |
| | | &:first-of-type{ |
| | | margin-bottom: 10px; |
| | | } |
| | | } |
| | | |
| | | &>p{ |
| | | font-size: 1rem; |
| | | margin-top: 10px; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="危害辨识" prop="hazardIdentification"> |
| | | <el-input |
| | | v-model="form.hazardIdentification" |
| | | placeholder="请输入危害辨识" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-divider border-style="dashed"/> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | |
| | | dialogImageUrl: string | null, |
| | | imgLimit: number, |
| | | casProps: {}, |
| | | casProps2: {} |
| | | casProps2: {}, |
| | | isOverSize: boolean |
| | | } |
| | | interface file { |
| | | url: string; |
| | |
| | | workLevel: 0, |
| | | workContent: '', |
| | | workLocation: '', |
| | | hazardIdentification: '', |
| | | workDetail:{ |
| | | operationDepId: null, |
| | | bcReason: '', |
| | |
| | | expStartTime: '', |
| | | expEndTime: '' |
| | | }, |
| | | isOverSize: false, |
| | | fileList: [], |
| | | imgLimit: 3, |
| | | uploadUrl: '', |
| | |
| | | workType: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | | workContent: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | | workLocation: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | | hazardIdentification: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | | workTimeLine: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | | "workDetail.operationDepId": [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | | "workDetail.bcReason": [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | |
| | | }; |
| | | |
| | | const getUploadUrl = async (rawFile: any) => { |
| | | const res = await workApplyApi().getUploadUrl(rawFile.name); |
| | | state.form.workDetail.bcPath.push(res.data.data.fileName) |
| | | state.uploadUrl = res.data.data.uploadUrl; |
| | | console.log(res.data.data.fileName,'name') |
| | | const fileSize = rawFile.size / 1024 < 500 ? '1' : '0' |
| | | if(fileSize === '0'){ |
| | | ElMessage({ |
| | | type: 'warning', |
| | | message: '文件大小不能超过500k。' |
| | | }); |
| | | state.isOverSize = true |
| | | return false |
| | | }else{ |
| | | const res = await workApplyApi().getUploadUrl(rawFile.name); |
| | | state.form.workDetail.bcPath.push(res.data.data.fileName) |
| | | state.uploadUrl = res.data.data.uploadUrl; |
| | | console.log(res.data.data.fileName,'name') |
| | | } |
| | | }; |
| | | |
| | | const upload = async (params: any) => { |
| | |
| | | |
| | | const beforeRemove = (file: {}, fileList: []) => { |
| | | const result = new Promise((resolve, reject) => { |
| | | ElMessageBox.confirm('此操作将删除该图片, 是否继续?', '提示', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning' |
| | | }) |
| | | .then(() => { |
| | | // console.log(state.workDetail.bcPath,'path') |
| | | const list = JSON.parse(JSON.stringify(state.form.workDetail.bcPath)) |
| | | fileList.map((item,index)=>{ |
| | | if(item.uid === file.uid){ |
| | | fileList.splice(index,1) |
| | | state.form.workDetail.bcPath.splice(index,1) |
| | | deletePic(list[index]) |
| | | } |
| | | if(!state.isOverSize){ |
| | | ElMessageBox.confirm('此操作将删除该图片, 是否继续?', '提示', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning' |
| | | }) |
| | | .then(() => { |
| | | // console.log(state.workDetail.bcPath,'path') |
| | | const list = JSON.parse(JSON.stringify(state.form.workDetail.bcPath)) |
| | | fileList.map((item,index)=>{ |
| | | if(item.uid === file.uid){ |
| | | fileList.splice(index,1) |
| | | state.form.workDetail.bcPath.splice(index,1) |
| | | deletePic(false,list[index]) |
| | | } |
| | | }) |
| | | // 请求删除接口 |
| | | }) |
| | | // 请求删除接口 |
| | | }) |
| | | .catch(() => { |
| | | reject(false); |
| | | }); |
| | | .catch(() => { |
| | | reject(false); |
| | | }); |
| | | }else{ |
| | | const list = JSON.parse(JSON.stringify(state.form.workDetail.bcPath)) |
| | | fileList.map((item,index)=>{ |
| | | if(item.uid === file.uid){ |
| | | fileList.splice(index,1) |
| | | state.form.workDetail.bcPath.splice(index,1) |
| | | deletePic(true,list[index]) |
| | | } |
| | | }) |
| | | state.isOverSize = false |
| | | } |
| | | }); |
| | | return result; |
| | | }; |
| | | |
| | | |
| | | // 删除图片接口 |
| | | const deletePic = async(fileName)=>{ |
| | | const deletePic = async(isOverSize:boolean,fileName:string)=>{ |
| | | console.log(fileName,'fileName') |
| | | const res = await workApplyApi().deleteFile({fileName: fileName}) |
| | | if (res.data.code === '200') { |
| | | ElMessage({ |
| | | type: 'success', |
| | | message: '删除成功!' |
| | | type: isOverSize ? 'error' : 'success', |
| | | message: isOverSize ? '上传失败':'删除成功!' |
| | | }); |
| | | } else { |
| | | ElMessage({ |
| | |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="危害辨识" prop="hazardIdentification"> |
| | | <el-input |
| | | v-model="form.hazardIdentification" |
| | | placeholder="请输入危害辨识" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-divider border-style="dashed"/> |
| | | <el-row> |
| | |
| | | workLevel: null, |
| | | workContent: '', |
| | | workLocation: '', |
| | | hazardIdentification: '', |
| | | workDetail:{ |
| | | hotMethod: '', |
| | | otherSpecialWork: [] |
| | |
| | | workLevel: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | | workContent: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | | workLocation: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | | hazardIdentification: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | | workTimeLine: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | | "workDetail.hotMethod": [{ required: true, message: '该内容不能为空', trigger: 'blur' }] |
| | | }); |
| | |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="危害辨识" prop="hazardIdentification"> |
| | | <el-input |
| | | v-model="form.hazardIdentification" |
| | | placeholder="请输入危害辨识" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-divider border-style="dashed"/> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | |
| | | dialogVisible: Boolean, |
| | | dialogImageUrl: string | null, |
| | | imgLimit: number, |
| | | casProps: {} |
| | | casProps: {}, |
| | | isOverSize: Boolean |
| | | } |
| | | interface file { |
| | | url: string; |
| | |
| | | workLevel: 0, |
| | | workContent: '', |
| | | workLocation: '', |
| | | hazardIdentification: '', |
| | | workDetail:{ |
| | | operationDepId: null, |
| | | gbScope: '', |
| | |
| | | expStartTime: '', |
| | | expEndTime: '' |
| | | }, |
| | | isOverSize: false, |
| | | fileList: [], |
| | | imgLimit: 3, |
| | | uploadUrl: '', |
| | |
| | | workType: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | | workContent: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | | workLocation: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | | hazardIdentification: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | | workTimeLine: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | | "workDetail.operationDepId": [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | | "workDetail.gbScope": [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | |
| | | }; |
| | | |
| | | const getUploadUrl = async (rawFile: any) => { |
| | | const res = await workApplyApi().getUploadUrl(rawFile.name); |
| | | state.form.workDetail.gbPath.push(res.data.data.fileName) |
| | | state.uploadUrl = res.data.data.uploadUrl; |
| | | console.log(res.data.data.fileName,'name') |
| | | const fileSize = rawFile.size / 1024 < 500 ? '1' : '0' |
| | | if(fileSize === '0'){ |
| | | ElMessage({ |
| | | type: 'warning', |
| | | message: '文件大小不能超过500k。' |
| | | }); |
| | | state.isOverSize = true |
| | | return false |
| | | }else{ |
| | | const res = await workApplyApi().getUploadUrl(rawFile.name); |
| | | state.form.workDetail.gbPath.push(res.data.data.fileName) |
| | | state.uploadUrl = res.data.data.uploadUrl; |
| | | } |
| | | }; |
| | | |
| | | const upload = async (params: any) => { |
| | |
| | | |
| | | const beforeRemove = (file: {}, fileList: []) => { |
| | | const result = new Promise((resolve, reject) => { |
| | | ElMessageBox.confirm('此操作将删除该图片, 是否继续?', '提示', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning' |
| | | }) |
| | | .then(() => { |
| | | // console.log(state.workDetail.gbPath,'path') |
| | | const list = JSON.parse(JSON.stringify(state.form.workDetail.gbPath)) |
| | | fileList.map((item,index)=>{ |
| | | if(item.uid === file.uid){ |
| | | fileList.splice(index,1) |
| | | state.form.workDetail.gbPath.splice(index,1) |
| | | deletePic(list[index]) |
| | | } |
| | | if(!state.isOverSize){ |
| | | ElMessageBox.confirm('此操作将删除该图片, 是否继续?', '提示', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning' |
| | | }) |
| | | .then(() => { |
| | | // console.log(state.workDetail.gbPath,'path') |
| | | const list = JSON.parse(JSON.stringify(state.form.workDetail.gbPath)) |
| | | fileList.map((item,index)=>{ |
| | | if(item.uid === file.uid){ |
| | | fileList.splice(index,1) |
| | | state.form.workDetail.gbPath.splice(index,1) |
| | | // 请求删除接口 |
| | | deletePic(false,list[index]) |
| | | } |
| | | }) |
| | | }) |
| | | // 请求删除接口 |
| | | }) |
| | | .catch(() => { |
| | | reject(false); |
| | | }); |
| | | .catch(() => { |
| | | reject(false); |
| | | }); |
| | | }else{ |
| | | const list = JSON.parse(JSON.stringify(state.form.workDetail.gbPath)) |
| | | fileList.map((item,index)=>{ |
| | | if(item.uid === file.uid){ |
| | | fileList.splice(index,1) |
| | | state.form.workDetail.gbPath.splice(index,1) |
| | | deletePic(true,list[index]) |
| | | } |
| | | }) |
| | | state.isOverSize = false |
| | | } |
| | | }); |
| | | return result; |
| | | }; |
| | | |
| | | |
| | | // 删除图片接口 |
| | | const deletePic = async(fileName)=>{ |
| | | console.log(fileName,'fileName') |
| | | const deletePic = async(isOverSize:boolean,fileName:string)=>{ |
| | | const res = await workApplyApi().deleteFile({fileName: fileName}) |
| | | if (res.data.code === '200') { |
| | | ElMessage({ |
| | | type: 'success', |
| | | message: '删除成功!' |
| | | type: isOverSize ? 'error' : 'success', |
| | | message: isOverSize ? '上传失败':'删除成功!' |
| | | }); |
| | | } else { |
| | | ElMessage({ |
| | |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="危害辨识" prop="hazardIdentification"> |
| | | <el-input |
| | | v-model="form.hazardIdentification" |
| | | placeholder="请输入危害辨识" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-divider border-style="dashed"/> |
| | | <el-row> |
| | |
| | | workLevel: null, |
| | | workContent: '', |
| | | workLocation: '', |
| | | hazardIdentification: '', |
| | | workDetail:{ |
| | | operationDepId: '', |
| | | operationHeight: null, |
| | |
| | | workLevel: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | | workContent: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | | workLocation: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | | hazardIdentification: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | | workTimeLine: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | | "workDetail.operationDepId": [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | | "workDetail.operationHeight": [{ required: true, message: '该内容不能为空', trigger: 'blur' }] |
| | |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="危害辨识" prop="hazardIdentification"> |
| | | <el-input |
| | | v-model="form.hazardIdentification" |
| | | placeholder="请输入危害辨识" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-divider border-style="dashed"/> |
| | | <el-row> |
| | |
| | | workLevel: null, |
| | | workContent: '', |
| | | workLocation: '', |
| | | hazardIdentification: '', |
| | | workDetail:{ |
| | | hoistingToolName: '', |
| | | weightMass: null |
| | |
| | | workLevel: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | | workContent: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | | workLocation: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | | hazardIdentification: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | | workTimeLine: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | | "workDetail.hoistingToolName": [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | | "workDetail.weightMass": [{ required: true, message: '该内容不能为空', trigger: 'blur' }] |
| | |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="危害辨识" prop="hazardIdentification"> |
| | | <el-input |
| | | v-model="form.hazardIdentification" |
| | | placeholder="请输入危害辨识" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-divider border-style="dashed"/> |
| | | <el-row> |
| | |
| | | dialogVisible: Boolean, |
| | | dialogImageUrl: string | null, |
| | | imgLimit: number, |
| | | isOverSize: boolean |
| | | } |
| | | interface file { |
| | | url: string; |
| | |
| | | workLevel: null, |
| | | workContent: '', |
| | | workLocation: '', |
| | | hazardIdentification: '', |
| | | workDetail:{ |
| | | bpCode: '', |
| | | mainMedia: '', |
| | |
| | | expStartTime: '', |
| | | expEndTime: '' |
| | | }, |
| | | isOverSize: false, |
| | | fileList: [], |
| | | imgLimit: 3, |
| | | uploadUrl: '', |
| | |
| | | workLevel: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | | workContent: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | | workLocation: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | | hazardIdentification: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | | workTimeLine: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | | "workDetail.bpCode": [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | | "workDetail.mainMedia": [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | |
| | | }; |
| | | |
| | | const getUploadUrl = async (rawFile: any) => { |
| | | const res = await workApplyApi().getUploadUrl(rawFile.name); |
| | | state.form.workDetail.bpLocationMapPath.push(res.data.data.fileName) |
| | | state.uploadUrl = res.data.data.uploadUrl; |
| | | console.log(res.data.data.fileName,'name') |
| | | const fileSize = rawFile.size / 1024 < 500 ? '1' : '0' |
| | | if(fileSize === '0'){ |
| | | ElMessage({ |
| | | type: 'warning', |
| | | message: '文件大小不能超过500k。' |
| | | }); |
| | | state.isOverSize = true |
| | | return false |
| | | }else{ |
| | | const res = await workApplyApi().getUploadUrl(rawFile.name); |
| | | state.form.workDetail.bpLocationMapPath.push(res.data.data.fileName) |
| | | state.uploadUrl = res.data.data.uploadUrl; |
| | | console.log(res.data.data.fileName,'name') |
| | | } |
| | | }; |
| | | |
| | | const upload = async (params: any) => { |
| | |
| | | |
| | | const beforeRemove = (file: {}, fileList: []) => { |
| | | const result = new Promise((resolve, reject) => { |
| | | ElMessageBox.confirm('此操作将删除该图片, 是否继续?', '提示', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning' |
| | | }) |
| | | .then(() => { |
| | | // console.log(state.workDetail.bpLocationMapPath,'path') |
| | | const list = JSON.parse(JSON.stringify(state.form.workDetail.bpLocationMapPath)) |
| | | fileList.map((item,index)=>{ |
| | | if(item.uid === file.uid){ |
| | | fileList.splice(index,1) |
| | | state.form.workDetail.bpLocationMapPath.splice(index,1) |
| | | deletePic(list[index]) |
| | | } |
| | | if(!state.isOverSize){ |
| | | ElMessageBox.confirm('此操作将删除该图片, 是否继续?', '提示', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning' |
| | | }) |
| | | .then(() => { |
| | | // console.log(state.workDetail.bpLocationMapPath,'path') |
| | | const list = JSON.parse(JSON.stringify(state.form.workDetail.bpLocationMapPath)) |
| | | fileList.map((item,index)=>{ |
| | | if(item.uid === file.uid){ |
| | | fileList.splice(index,1) |
| | | state.form.workDetail.bpLocationMapPath.splice(index,1) |
| | | deletePic(false,list[index]) |
| | | } |
| | | }) |
| | | // 请求删除接口 |
| | | }) |
| | | // 请求删除接口 |
| | | }) |
| | | .catch(() => { |
| | | reject(false); |
| | | }); |
| | | .catch(() => { |
| | | reject(false); |
| | | }); |
| | | }else{ |
| | | const list = JSON.parse(JSON.stringify(state.form.workDetail.bpLocationMapPath)) |
| | | fileList.map((item,index)=>{ |
| | | if(item.uid === file.uid){ |
| | | fileList.splice(index,1) |
| | | state.form.workDetail.bpLocationMapPath.splice(index,1) |
| | | deletePic(true,list[index]) |
| | | } |
| | | }) |
| | | state.isOverSize = false |
| | | } |
| | | }); |
| | | return result; |
| | | }; |
| | | |
| | | |
| | | // 删除图片接口 |
| | | const deletePic = async(fileName)=>{ |
| | | const deletePic = async(isOverSize:boolean,fileName:string)=>{ |
| | | console.log(fileName,'fileName') |
| | | const res = await workApplyApi().deleteFile({fileName: fileName}) |
| | | if (res.data.code === '200') { |
| | | ElMessage({ |
| | | type: 'success', |
| | | message: '删除成功!' |
| | | type: isOverSize ? 'error' : 'success', |
| | | message: isOverSize ? '上传失败':'删除成功!' |
| | | }); |
| | | } else { |
| | | ElMessage({ |
| | |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="危害辨识" prop="hazardIdentification"> |
| | | <el-input |
| | | v-model="form.hazardIdentification" |
| | | placeholder="请输入危害辨识" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-divider border-style="dashed"/> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | |
| | | workLevel: 0, |
| | | workContent: '', |
| | | workLocation: '', |
| | | hazardIdentification: '', |
| | | workDetail:{ |
| | | powerAccessPoint: '', |
| | | workingVoltage: null, |
| | |
| | | workLevel: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | | workContent: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | | workLocation: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | | hazardIdentification: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | | workTimeLine: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | | "workDetail.powerAccessPoint": [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | | "workDetail.workingVoltage": [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="危害辨识" prop="hazardIdentification"> |
| | | <el-input |
| | | v-model="form.hazardIdentification" |
| | | placeholder="请输入危害辨识" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-divider border-style="dashed" /> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | |
| | | workLevel: 0, |
| | | workContent: '', |
| | | workLocation: '', |
| | | hazardIdentification: '', |
| | | workDetail:{ |
| | | csDepId: null, |
| | | csName: '', |
| | |
| | | workType: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | | workContent: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | | workLocation: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | | hazardIdentification: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | | workTimeLine: [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | | "workDetail.csDepId": [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |
| | | "workDetail.csName": [{ required: true, message: '该内容不能为空', trigger: 'blur' }], |