From 0d69019484ae3654579577d06871075b8a389159 Mon Sep 17 00:00:00 2001
From: Admin <978517621@qq.com>
Date: 星期五, 02 九月 2022 09:13:05 +0800
Subject: [PATCH] Default Changelist
---
src/views/riskWarningSys/warningBigScreen/components/monitor.vue | 104 +
src/views/riskWarningSys/warningBigScreen/components/danger.vue | 265 ++
src/views/riskWarningSys/warningBigScreen/components/message.vue | 185 ++
src/views/riskWarningSys/warningBigScreen/indexs/index.vue | 269 ++
src/views/riskWarningSys/warningBigScreen/components/SPI.vue | 276 +++
src/views/newHome/index.vue | 2
src/theme/bigScreen.css | 18
src/views/riskWarningSys/warningBigScreen/components/training.vue | 423 ++++
src/views/specialWorkSystem/workProcess/gasCheck/index.vue | 540 +++++
src/main.ts | 3
src/assets/warningScreen/small-full.png | 0
/dev/null | 255 --
src/views/riskWarningSys/warningBigScreen/components/stock.vue | 681 +++++++
src/views/riskWarningSys/warningBigScreen/components/accident.vue | 275 ++
src/views/specialWorkSystem/workAlert/alertRecord/index.vue | 438 ++++
package.json | 1
src/views/riskWarningSys/warningBigScreen/index.vue | 531 ++++-
src/views/riskWarningSys/warningBigScreen/components/risk.vue | 337 +++
src/views/riskWarningSys/warningBigScreen/components/educate.vue | 178 +
src/App.vue | 2
src/views/specialWorkSystem/workProcess/workCheck/index.vue | 521 +++++
src/views/riskWarningSys/warningBigScreen/components/profession.vue | 176 +
22 files changed, 5,068 insertions(+), 412 deletions(-)
diff --git a/package.json b/package.json
index 258bc6c..a2d2bab 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
},
"dependencies": {
"@element-plus/icons-vue": "^2.0.6",
+ "@kjgl77/datav-vue3": "^1.2.1",
"@wangeditor/editor": "^5.1.14",
"axios": "^0.27.2",
"countup.js": "^2.2.0",
diff --git a/src/App.vue b/src/App.vue
index 3b4f398..9227320 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,7 +7,7 @@
<!-- <router-view v-if="!$route.meta.iskeepAlive" v-slot="{ Component }">-->
<!-- <transition name="fade" mode="in-out">-->
<!-- <keep-alive :exclude="excludeList" :include="includeList">-->
- <!-- <component :is="Component" :key="$route.id"></component>-->
+ <!-- <components :is="Component" :key="$route.id"></components>-->
<!-- </keep-alive>-->
<!-- </transition>-->
<!-- </router-view>-->
diff --git a/src/assets/warningScreen/small-full.png b/src/assets/warningScreen/small-full.png
index ea70b32..d985854 100644
--- a/src/assets/warningScreen/small-full.png
+++ b/src/assets/warningScreen/small-full.png
Binary files differ
diff --git a/src/main.ts b/src/main.ts
index 18ef496..a45931b 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -13,6 +13,7 @@
import mitt from 'mitt';
import VueGridLayout from 'vue-grid-layout';
import zhCn from 'element-plus/lib/locale/lang/zh-cn';
+import DataVVue3 from '@kjgl77/datav-vue3'
const app = createApp(App);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
@@ -21,6 +22,6 @@
directive(app);
other.elSvg(app);
-app.use(pinia).use(router).use(ElementPlus, { i18n: i18n.global.t, locale: zhCn }).use(i18n).use(VueGridLayout).mount('#app');
+app.use(pinia).use(router).use(ElementPlus, { i18n: i18n.global.t, locale: zhCn }).use(i18n).use(DataVVue3).use(VueGridLayout).mount('#app');
app.config.globalProperties.mittBus = mitt();
diff --git a/src/theme/bigScreen.css b/src/theme/bigScreen.css
index 9bda57f..acbd111 100644
--- a/src/theme/bigScreen.css
+++ b/src/theme/bigScreen.css
@@ -1,18 +1,22 @@
+html{font-size:12px; font-size:62.5%; /* 10÷16=62.5% */}
@media screen and (max-width: 1920px) {
- body { font-size: 16px;}
+ html { font-size: 100%;}
+}
+@media screen and (max-width: 1336px) {
+ html { font-size: 80%;}
}
@media screen and (max-width: 1200px) {
- body { font-size: 14px;}
+ html { font-size: 62.5%;}
}
@media screen and (max-width: 1000px) {
- body { font-size: 12px;}
+ html { font-size: 10px;}
}
@media screen and (max-width: 800px) {
- body { font-size: 8px;}
+ html { font-size: 8px;}
}
@media screen and (max-width: 700px) {
- body { font-size: 7px;}
+ html { font-size: 7px;}
}
@media screen and (max-width: 600px) {
- body { font-size: 6px;}
-}
+ html { font-size: 6px;}
+}
\ No newline at end of file
diff --git a/src/views/newHome/index.vue b/src/views/newHome/index.vue
index 5f71b25..ca2e034 100644
--- a/src/views/newHome/index.vue
+++ b/src/views/newHome/index.vue
@@ -328,7 +328,7 @@
// 去风险大屏
const toRiskPlatform = () => {
// router.push({
- // name: "bigDataScreen"
+ // name: "warningScreen"
// });
window.open('http://39.104.85.193:8585/');
};
diff --git a/src/views/riskWarningSys/warningBigScreen/components/SPI.vue b/src/views/riskWarningSys/warningBigScreen/components/SPI.vue
new file mode 100644
index 0000000..b897098
--- /dev/null
+++ b/src/views/riskWarningSys/warningBigScreen/components/SPI.vue
@@ -0,0 +1,276 @@
+<template>
+ <div class="charts-cont">
+ <div class="spi" :id="spi">
+
+ </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: 'accident',
+ components: {},
+ props:{
+ size: Number,
+ dep: Number
+ },
+ setup(props) {
+ const userInfo = useUserInfo()
+ const { userInfos } = storeToRefs(userInfo);
+ const spi = ref("eChartSpi" + Date.now() + Math.random())
+ const state = reactive<stateType>({
+
+ })
+ type EChartsOption = echarts.EChartsOption
+ // 隐患整改情况
+ const initSpi =()=>{
+ let dom = document.getElementById(spi.value);
+ let myChart = echarts.init(dom);
+
+ let option: EChartsOption;
+
+ option = {
+ legend: {
+ data: ['注意线', '警告线', '危险线', 'SPI预警指数值'],
+ top: '0',
+ left: 'center',
+ textStyle:{
+ color: '#fff',
+ fontSize: fontSize(12)
+ }
+ },
+ grid: {
+ left: '4%',
+ right: '4%',
+ bottom: '5%',
+ },
+ xAxis: [
+ {
+ type: 'category',
+ boundaryGap: false,
+ data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
+ axisLine:{
+ show: true,
+ lineStyle:{
+ color: '#fff'
+ }
+ },
+ splitLine:{
+ show: true,
+ lineStyle:{
+ type: 'dashed',
+ color: 'rgba(255,255,255,.4)'
+ }
+ },
+ axisLabel:{
+ color: '#fff'
+ }
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ axisLine:{
+ show: true,
+ lineStyle:{
+ type: 'dotted'
+ }
+ },
+ axisLabel:{
+ color: '#ccc'
+ },
+ splitLine:{
+ show: true,
+ lineStyle:{
+ type: 'dashed',
+ color: 'rgba(255,255,255,.4)'
+ }
+ }
+ }
+ ],
+ series: [
+ {
+ name: '注意线',
+ data: [500, 500, 500, 500, 500, 500, 500,500, 500, 500, 500, 500],
+ type: 'line',
+ lineStyle:{
+ width: 0
+ },
+ areaStyle: {
+ color: {
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ {
+ offset: 0.1,
+ color: "rgba(147,208,81)", // 线处的颜色
+ },
+ {
+ offset: 0.9,
+ color: "rgba(147,208,81,.2)", // 坐标轴处的颜色
+ },
+ ]
+ },
+ },
+ 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',
+ smooth: true
+ },
+ {
+ name: 'SPI预警指数值',
+ data: [450, 632, 501, 434, 390, 530, 520,750, 632, 401, 634, 590],
+ type: 'line',
+ label:{
+ show: true,
+ color: '#fff',
+ fontSize: fontSize(12)
+ },
+ lineStyle:{
+ width: 2,
+ color: '#23E5E5'
+ },
+ itemStyle:{
+ color: '#23E5E5',
+ borderColor: '#fff',
+ borderWidth: 4
+ },
+ smooth: true
+ }
+ ]
+ };
+
+ 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(() => {
+ initSpi();
+ });
+
+ return {
+ spi,
+ Search,
+ fontSize,
+ ...toRefs(state)
+ };
+ },
+ });
+</script>
+
+<style scoped lang="scss">
+ .charts-cont{
+ width: 100%;
+ height: 100%;
+ padding: 5%;
+ position: relative;
+
+ .spi{
+ 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>
diff --git a/src/views/riskWarningSys/warningBigScreen/components/accident.vue b/src/views/riskWarningSys/warningBigScreen/components/accident.vue
new file mode 100644
index 0000000..041134b
--- /dev/null
+++ b/src/views/riskWarningSys/warningBigScreen/components/accident.vue
@@ -0,0 +1,275 @@
+<template>
+ <div class="charts-cont">
+ <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="accidentMonth"></div>
+ <div v-show="cur===2" class="month" :id="accidentYear"></div>
+ </div>
+</template>
+
+<script lang="ts">
+ import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted, nextTick, onUnmounted} 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: 'accident',
+ components: {},
+ props:{
+ size: Number
+ },
+ setup(props) {
+ const userInfo = useUserInfo()
+ const { userInfos } = storeToRefs(userInfo);
+ const accidentMonth = ref("eChartFix" + Date.now() + Math.random())
+ const accidentYear = ref("eChartFix" + Date.now() + Math.random())
+ const state = reactive<stateType>({
+ cur: 1
+ })
+
+ const changeTab =(i)=>{
+ state.cur = i
+ nextTick(()=>{
+ initAccidentByYear();
+ })
+ }
+ type EChartsOption = echarts.EChartsOption
+ // 隐患整改情况
+ const initAccidentByMonth =()=>{
+ let dom = document.getElementById(accidentMonth.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: '月度数据',
+ type: 'pie',
+ radius: ['45%', '70%'],
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderRadius: fontSize(4)
+ },
+ label: {
+ show: false,
+ position: 'outer',
+ fontSize: fontSize(10),
+ color: '#ffffff',
+ textBorderWidth: 0,
+ width: fontSize(40),
+ overflow: 'break'
+ },
+ // labelLine: {
+ // show: true,
+ // length: fontSize(10),
+ // length2: fontSize(10)
+ // },
+ emphasis: {
+ label: {
+ show: true,
+ fontSize: fontSize(22),
+ fontWeight: 'bold'
+ }
+ },
+ data: [
+ { value: 1048, name: '特别重大事故' },
+ { value: 735, name: '重大事故' },
+ { value: 580, name: '较大事故' },
+ { value: 484, name: '一般事故' },
+ { value: 300, name: '未遂事故' }
+ ],
+ center: ['50%','65%']
+ }
+ ]
+ };
+
+ option && myChart.setOption(option);
+
+ window.addEventListener("resize",function (){
+ myChart.resize();
+ });
+ }
+ // 隐患整改情况
+ const initAccidentByYear =()=>{
+ let dom = document.getElementById(accidentYear.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: '年度数据',
+ type: 'pie',
+ radius: ['45%', '70%'],
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderRadius: fontSize(4)
+ },
+ label: {
+ show: false,
+ position: 'outer',
+ fontSize: fontSize(10),
+ color: '#ffffff',
+ textBorderWidth: 0,
+ width: fontSize(40),
+ overflow: 'break'
+ },
+ // labelLine: {
+ // show: true,
+ // length: fontSize(10),
+ // length2: fontSize(10)
+ // },
+ emphasis: {
+ label: {
+ show: true,
+ fontSize: fontSize(22),
+ fontWeight: 'bold'
+ }
+ },
+ data: [
+ { value: 1048, name: '特别重大事故' },
+ { value: 735, name: '重大事故' },
+ { value: 580, name: '较大事故' },
+ { value: 484, name: '一般事故' },
+ { value: 300, name: '未遂事故' }
+ ],
+ center: ['50%','65%']
+ }
+ ]
+ };
+
+ 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(() => {
+ initAccidentByMonth();
+ // initAccidentByYear();
+ });
+
+ onUnmounted(() =>{
+ })
+
+ return {
+ accidentMonth,
+ accidentYear,
+ Search,
+ changeTab,
+ fontSize,
+ ...toRefs(state)
+ };
+ },
+ });
+</script>
+
+<style scoped lang="scss">
+ .charts-cont{
+ width: 100%;
+ height: 100%;
+ padding: 5%;
+ 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%;
+ }
+ }
+ .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>
diff --git a/src/views/riskWarningSys/warningBigScreen/components/danger.vue b/src/views/riskWarningSys/warningBigScreen/components/danger.vue
new file mode 100644
index 0000000..75ef0b1
--- /dev/null
+++ b/src/views/riskWarningSys/warningBigScreen/components/danger.vue
@@ -0,0 +1,265 @@
+<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: '0',
+ left: 'center',
+ 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: '10%',
+ left: 'center',
+ 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%','60%']
+ }
+ ]
+ };
+
+ 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: 5% 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>
diff --git a/src/views/riskWarningSys/warningBigScreen/components/educate.vue b/src/views/riskWarningSys/warningBigScreen/components/educate.vue
new file mode 100644
index 0000000..f85cc76
--- /dev/null
+++ b/src/views/riskWarningSys/warningBigScreen/components/educate.vue
@@ -0,0 +1,178 @@
+<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: 'risk',
+ 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: '5%',
+ left: 'center',
+ textStyle:{
+ color: '#fff',
+ fontSize: fontSize(11)
+ }
+ },
+ radar: [
+ {
+ indicator: [
+ { text: '设计培训次数' },
+ { text: '培训时间（小时）' },
+ { text: '完成比例（%）' }
+ ],
+ center: ['50%', '60%'],
+ radius: fontSize(60),
+ 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>
diff --git a/src/views/riskWarningSys/warningBigScreen/components/message.vue b/src/views/riskWarningSys/warningBigScreen/components/message.vue
new file mode 100644
index 0000000..d075b5d
--- /dev/null
+++ b/src/views/riskWarningSys/warningBigScreen/components/message.vue
@@ -0,0 +1,185 @@
+<template>
+ <div class="charts-cont">
+ <div class="message">
+ <dv-scroll-board ref="scrollBoard" :config="config" style="width:100%;height:100%" @mouseover="mouseoverHandler" @click="clickHandler" />
+ </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: 'profession',
+ components: {},
+ props:{
+ size: Number
+ },
+ setup(props) {
+ const userInfo = useUserInfo()
+ const { userInfos } = storeToRefs(userInfo);
+ const pro = ref("eChartPro" + Date.now() + Math.random())
+ const state = reactive<stateType>({
+ config:{
+ header: ['消息列表', '同比'],
+ data: [
+ ['一月预警消息SPI报告', '↑ 94%'],
+ ['二月预警消息SPI报告', '↑ 94%'],
+ ['三月预警消息SPI报告', '↑ 94%'],
+ ['四月预警消息SPI报告', '↑ 94%'],
+ ['五月预警消息SPI报告', '↑ 94%'],
+ ['六月预警消息SPI报告', '↑ 94%'],
+ ['七月预警消息SPI报告', '↑ 94%'],
+ ['八月预警消息SPI报告', '↑ 94%'],
+ ['九月预警消息SPI报告', '↑ 94%'],
+ ['十月预警消息SPI报告', '↑ 94%'],
+ ['十一月预警消息SPI报告', '↑ 94%'],
+ ['十二月预警消息SPI报告', '↑ 94%']
+ ],
+ index: true,
+ columnWidth: [60, 220],
+ align: ['center','center','center'],
+ headerBGC: '#0049af',
+ oddRowBGC: 'none',
+ evenRowBGC: 'rgba(57,122,206,.1)',
+ indexHeader: '序号',
+ rowNum: fontSize(5)
+ }
+ })
+
+ 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);
+ }
+
+ // 页面载入时执行方法
+ onMounted(() => {
+ });
+
+ return {
+ pro,
+ Search,
+ mouseoverHandler,
+ clickHandler,
+ fontSize,
+ ...toRefs(state)
+ };
+ },
+ });
+</script>
+<style scoped lang="scss">
+
+ .charts-cont{
+ width: 100%;
+ height: 100%;
+ padding: 5%;
+ position: relative;
+
+ .message{
+ width: 100%;
+ height: 100%;
+ border-radius: 4px;
+ overflow: hidden;
+
+ .th{
+ width: 100%;
+ display: flex;
+ height: 36px;
+ justify-content: space-between;
+ background: #1882d5;
+ font-size: 1rem;
+ line-height: 36px;
+ color: #ffffff;
+ .th-num{
+ width: 15%;
+ text-align: center;
+ }
+ .th-info{
+ width: 70%;
+ text-align: left;
+ color: #11FEEE
+ }
+ .th-sum{
+ width: 15%;
+ text-align: center;
+ }
+ }
+
+ .tm{
+ height: calc(100% - 36px);
+ width: 100%;
+ overflow: hidden;
+ scroll-behavior: smooth;
+
+ .ti{
+ display: flex;
+ height: 40px;
+ line-height: 40px;
+ justify-content: space-between;
+ color: #ffffff;
+
+ .num{
+ width: 15%;
+ text-align: center;
+ }
+ .info{
+ width: 70%;
+ text-align: left;
+ color: #11FEEE
+ }
+ .sum{
+ width: 15%;
+ text-align: center;
+ }
+ }
+ .darkBg{
+ background: rgba(57,122,206,.4);
+ }
+ }
+ }
+ }
+ .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>
diff --git a/src/views/riskWarningSys/warningBigScreen/components/monitor.vue b/src/views/riskWarningSys/warningBigScreen/components/monitor.vue
new file mode 100644
index 0000000..20cc551
--- /dev/null
+++ b/src/views/riskWarningSys/warningBigScreen/components/monitor.vue
@@ -0,0 +1,104 @@
+<template>
+ <div class="charts-cont">
+ <div class="monitor" :id="monitor">
+ <div>
+ <img src="../../../../assets/loginPage/watersys.JPG">
+ </div>
+ </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: 'monitor',
+ components: {},
+ props:['allData'],
+ setup() {
+ const userInfo = useUserInfo()
+ const { userInfos } = storeToRefs(userInfo);
+ const monitor = ref("eChartMon" + Date.now() + Math.random())
+ const state = reactive<stateType>({
+
+ })
+
+
+
+ // 页面载入时执行方法
+ onMounted(() => {
+ });
+
+ return {
+ monitor,
+ Search,
+ ...toRefs(state)
+ };
+ },
+ });
+</script>
+
+<style scoped lang="scss">
+ .charts-cont{
+ width: 100%;
+ height: 100%;
+ padding: 5%;
+ position: relative;
+
+ .monitor{
+ width: 100%;
+ height: 100%;
+ position: relative;
+ border-radius: 8px;
+ overflow: hidden;
+
+ img{
+ display: block;
+ width: 100%;
+ height: auto;
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ top: 0;
+ margin: auto;
+ }
+ }
+ }
+ .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>
diff --git a/src/views/riskWarningSys/warningBigScreen/components/profession.vue b/src/views/riskWarningSys/warningBigScreen/components/profession.vue
new file mode 100644
index 0000000..ed926bf
--- /dev/null
+++ b/src/views/riskWarningSys/warningBigScreen/components/profession.vue
@@ -0,0 +1,176 @@
+<template>
+ <div class="charts-cont">
+<!-- <div class="pro" :id="pro">-->
+
+<!-- </div>-->
+ <dv-active-ring-chart :config="config" style="width:100%;height:100%" />
+ </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: 'profession',
+ components: {},
+ props:{
+ size: Number
+ },
+ setup(props) {
+ const userInfo = useUserInfo()
+ const { userInfos } = storeToRefs(userInfo);
+ const pro = ref("eChartPro" + Date.now() + Math.random())
+ const state = reactive<stateType>({
+ config:{
+ data: [
+ {
+ name: '持证人员',
+ value: 55
+ },
+ {
+ name: '非持证人员',
+ value: 120
+ }
+ ],
+ radius: '65%',
+ activeRadius: '60%',
+ color: ['#FAC858','#EE6666'],
+ lineWidth: fontSize(25),
+ digitalFlopStyle: {
+ fontSize: 16,
+ fill: '#fff'
+ }
+ }
+ })
+ // 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();
+ // });
+ // }
+ function fontSize(val){
+ let nowClientWidth = document.documentElement.clientWidth;
+ return val * (nowClientWidth/1920) * Number(props.size);
+ }
+
+ // 页面载入时执行方法
+ onMounted(() => {
+ });
+
+ return {
+ pro,
+ Search,
+ fontSize,
+ ...toRefs(state)
+ };
+ },
+ });
+</script>
+
+<style scoped lang="scss">
+ .charts-cont{
+ width: 100%;
+ height: 100%;
+ padding: 4% 4% 0;
+ position: relative;
+
+ .pro{
+ 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>
diff --git a/src/views/riskWarningSys/warningBigScreen/components/risk.vue b/src/views/riskWarningSys/warningBigScreen/components/risk.vue
new file mode 100644
index 0000000..304e597
--- /dev/null
+++ b/src/views/riskWarningSys/warningBigScreen/components/risk.vue
@@ -0,0 +1,337 @@
+<template>
+ <div class="charts-cont">
+ <div v-show="curValue===true" class="risk" :id="risk1"></div>
+ <div v-show="curValue===false" class="risk" :id="risk2"></div>
+ </div>
+</template>
+
+<script lang="ts">
+ import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted, nextTick, onBeforeUnmount} 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 {
+ curValue: boolean
+ }
+ export default defineComponent({
+ name: 'risk',
+ components: {},
+ props:{
+ size: Number,
+ month: Number
+ },
+ setup(props) {
+ const userInfo = useUserInfo()
+ const { userInfos } = storeToRefs(userInfo);
+ const risk1 = ref("eChartRisk1" + Date.now() + Math.random())
+ const risk2 = ref("eChartRisk2" + Date.now() + Math.random())
+ const state = reactive<stateType>({
+ curValue: true
+ })
+
+ const swi = setInterval(()=>{
+ state.curValue = !state.curValue
+ if(state.curValue == true){
+ nextTick(()=>{
+ initRisk1()
+ })
+ }else{
+ nextTick(()=>{
+ initRisk2()
+ })
+ }
+
+ },5000)
+
+ type EChartsOption = echarts.EChartsOption
+ // 隐患整改情况
+ const initRisk1 =()=>{
+ let dom = document.getElementById(risk1.value);
+ let myChart = echarts.init(dom);
+
+ let option: EChartsOption;
+
+ option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ // Use axis to trigger tooltip
+ type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
+ }
+ },
+ legend: {
+ top: '1%',
+ left: 'center',
+ textStyle:{
+ color: '#fff',
+ fontSize: fontSize(12)
+ }
+ },
+ grid: {
+ left: '2%',
+ right: '4%',
+ bottom: '0',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ // data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
+ data: ['企业总', 'A部门', 'B部门', 'C部门', 'D部门', 'E部门'],
+ axisLine:{
+ show: true,
+ lineStyle:{
+ color: '#fff'
+ }
+ },
+ axisLabel:{
+ color: '#fff'
+ }
+ },
+ yAxis: {
+ type: 'value',
+ axisLine:{
+ show: true,
+ lineStyle:{
+ type: 'dotted'
+ }
+ },
+ axisLabel:{
+ color: '#ccc'
+ },
+ splitLine:{
+ show: false
+ }
+ },
+ series: [
+ {
+ name: '可能造成死亡的',
+ type: 'bar',
+ stack: 'total',
+ label: {
+ show: false
+ },
+ emphasis: {
+ focus: 'series'
+ },
+ // data: [320, 302, 301, 334, 390, 330, 320, 301, 334, 390, 330, 320]
+ data: [320, 302, 301, 334, 390, 330],
+ barCategoryGap: '50%'
+ },
+ {
+ name: '可能造成重伤的',
+ type: 'bar',
+ stack: 'total',
+ label: {
+ show: false
+ },
+ emphasis: {
+ focus: 'series'
+ },
+ // data: [120, 132, 101, 134, 90, 230, 210, 132, 101, 134, 90, 230]
+ data: [120, 132, 101, 134, 90, 230],
+ barCategoryGap: '50%'
+ },
+ {
+ name: '可能造成轻伤的',
+ type: 'bar',
+ stack: 'total',
+ label: {
+ show: false
+ },
+ emphasis: {
+ focus: 'series'
+ },
+ // data: [220, 182, 191, 234, 290, 330, 310, 191, 234, 290, 330, 310]
+ data: [220, 182, 191, 234, 290, 330],
+ barCategoryGap: '50%'
+ }
+ ]
+ };
+
+ option && myChart.setOption(option);
+ window.addEventListener("resize",function (){
+ myChart.resize();
+ });
+ echarts.init(document.getElementById(risk2.value)).dispose()
+ }
+
+ const initRisk2 =()=>{
+ let dom = document.getElementById(risk2.value);
+ let myChart = echarts.init(dom);
+
+ let option: EChartsOption;
+
+ option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ // Use axis to trigger tooltip
+ type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
+ }
+ },
+ legend: {
+ top: '1%',
+ left: 'center',
+ textStyle:{
+ color: '#fff',
+ fontSize: fontSize(12)
+ }
+ },
+ grid: {
+ left: '2%',
+ right: '4%',
+ bottom: '0',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ // data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
+ data: ['F部门', 'G部门', 'H部门', 'I部门', 'J部门', 'K部门'],
+ axisLine:{
+ show: true,
+ lineStyle:{
+ color: '#fff'
+ }
+ },
+ axisLabel:{
+ color: '#fff'
+ }
+ },
+ yAxis: {
+ type: 'value',
+ axisLine:{
+ show: true,
+ lineStyle:{
+ type: 'dotted'
+ }
+ },
+ axisLabel:{
+ color: '#ccc'
+ },
+ splitLine:{
+ show: false
+ }
+ },
+ series: [
+ {
+ name: '可能造成死亡的',
+ type: 'bar',
+ stack: 'total',
+ label: {
+ show: false
+ },
+ emphasis: {
+ focus: 'series'
+ },
+ // data: [320, 302, 301, 334, 390, 330, 320, 301, 334, 390, 330, 320]
+ data: [320, 301, 334, 390, 330, 320],
+ barCategoryGap: '50%'
+ },
+ {
+ name: '可能造成重伤的',
+ type: 'bar',
+ stack: 'total',
+ label: {
+ show: false
+ },
+ emphasis: {
+ focus: 'series'
+ },
+ // data: [120, 132, 101, 134, 90, 230, 210, 132, 101, 134, 90, 230]
+ data: [90, 230, 210, 132, 101, 134],
+ barCategoryGap: '50%'
+ },
+ {
+ name: '可能造成轻伤的',
+ type: 'bar',
+ stack: 'total',
+ label: {
+ show: false
+ },
+ emphasis: {
+ focus: 'series'
+ },
+ // data: [220, 182, 191, 234, 290, 330, 310, 191, 234, 290, 330, 310]
+ data: [290, 330, 310, 191, 234, 290],
+ barCategoryGap: '50%'
+ }
+ ]
+ };
+
+ option && myChart.setOption(option);
+ window.addEventListener("resize",function (){
+ myChart.resize();
+ });
+ echarts.init(document.getElementById(risk1.value)).dispose()
+ }
+
+ function fontSize(val){
+ let nowClientWidth = document.documentElement.clientWidth;
+ return val * (nowClientWidth/1920) * Number(props.size);
+ }
+
+ // 页面载入时执行方法
+ onMounted(() => {
+ initRisk1();
+ });
+
+ onBeforeUnmount(() =>{
+ clearInterval(swi)
+ })
+
+ return {
+ risk1,
+ risk2,
+ Search,
+ fontSize,
+ ...toRefs(state)
+ };
+ },
+ });
+</script>
+
+<style scoped lang="scss">
+ .charts-cont{
+ width: 100%;
+ height: 100%;
+ padding: 5% 5% 2%;
+ position: relative;
+
+ .risk{
+ width: 100%;
+ height: 100%;
+ }
+ }
+ .home-container {
+ height: 100%;
+ overflow: hidden;
+ position: relative;
+ .el-row{
+ margin-bottom: 20px;
+ }
+ .el-row:last-child {
+ margin-bottom: 0;
+ }
+ .el-input{
+ width: 100% !important;
+ }
+ .el-date-editor::v-deep{
+ width: 100%;
+ }
+ .el-select{
+ width: 100%;
+ }
+ .el-cascader{
+ width: 100% !important;
+ }
+ }
+</style>
diff --git a/src/views/riskWarningSys/warningBigScreen/components/stock.vue b/src/views/riskWarningSys/warningBigScreen/components/stock.vue
new file mode 100644
index 0000000..d7999b9
--- /dev/null
+++ b/src/views/riskWarningSys/warningBigScreen/components/stock.vue
@@ -0,0 +1,681 @@
+<template>
+ <div class="charts-cont">
+ <div v-show="curValue===true" class="stock" :id="stock1">
+
+ </div>
+ <div v-show="curValue===false" class="stock" :id="stock2"></div>
+ </div>
+</template>
+
+<script lang="ts">
+ import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted, nextTick, onBeforeUnmount} 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 {
+ curValue: boolean
+ }
+ export default defineComponent({
+ name: 'stock',
+ components: {},
+ props:{
+ size: Number
+ },
+ setup(props) {
+ const userInfo = useUserInfo()
+ const { userInfos } = storeToRefs(userInfo);
+ const stock1 = ref("eChartStock1" + Date.now() + Math.random())
+ const stock2 = ref("eChartStock2" + Date.now() + Math.random())
+ const state = reactive<stateType>({
+ curValue: true
+ })
+
+ const swit = setInterval(()=>{
+ state.curValue = !state.curValue
+ if(state.curValue == true){
+ nextTick(()=>{
+ initStock1()
+ })
+ }else{
+ nextTick(()=>{
+ initStock2()
+ })
+ }
+ },5000)
+ type EChartsOption = echarts.EChartsOption
+ // 隐患整改情况
+ const initStock1 =()=>{
+ let dom = document.getElementById(stock1.value);
+ let myChart = echarts.init(dom);
+
+ let option: EChartsOption;
+
+ option = {
+ series: [
+ {
+ name: '消防耗材',
+ type: 'pie',
+ radius: ['40%', '45%'],
+ data: [
+ { value: 2103, name: '消防耗材'},
+ { value: 2310, name: '消防耗材未使用'}
+ ],
+ label: {
+ show: true,
+ position: 'center',
+ formatter: '{total|{a}}' + '\n\r' + '{active|2103}',
+ rich: {
+ total:{
+ fontSize: fontSize(12),
+ color:'#fff',
+ lineHeight: fontSize(16)
+ },
+ active: {
+ fontSize: fontSize(16),
+ color:'#fff',
+ },
+ }
+ },
+ color: [
+ {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0, color: "#2D74C0" // 0% 处的颜色
+ }, {
+ offset: 1, color: "#21D9DC" // 100% 处的颜色
+ }]
+ },
+ {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0, color: "#333" // 0% 处的颜色
+ }, {
+ offset: 1, color: "#333" // 100% 处的颜色
+ }]
+ }
+ ],
+ center: ['20%','25%']
+ },
+ {
+ name: '安全帽',
+ type: 'pie',
+ radius: ['40%', '45%'],
+ data: [
+ { value: 23509, name: '安全帽'},
+ { value: 34312, name: '安全帽未使用'}
+ ],
+ label: {
+ show: true,
+ position: 'center',
+ formatter: '{total|{a}}' + '\n\r' + '{active|23509}',
+ rich: {
+ total:{
+ fontSize: fontSize(12),
+ color:'#fff',
+ lineHeight: fontSize(16)
+ },
+ active: {
+ fontSize: fontSize(16),
+ color:'#fff',
+ },
+ }
+ },
+ color: [
+ {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0, color: "#0DAA2E" // 0% 处的颜色
+ }, {
+ offset: 1, color: "#4CF475" // 100% 处的颜色
+ }]
+ },
+ {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0, color: "#333" // 0% 处的颜色
+ }, {
+ offset: 1, color: "#333" // 100% 处的颜色
+ }]
+ }
+ ],
+ center: ['50%','25%']
+ },
+ {
+ name: '防护服',
+ type: 'pie',
+ radius: ['40%', '45%'],
+ data: [
+ { value: 12830, name: '防护服'},
+ { value: 22140, name: '防护服未使用'}
+ ],
+ label: {
+ show: true,
+ position: 'center',
+ formatter: '{total|{a}}' + '\n\r' + '{active|12830}',
+ rich: {
+ total:{
+ fontSize: fontSize(12),
+ color:'#fff',
+ lineHeight: fontSize(16)
+ },
+ active: {
+ fontSize: fontSize(16),
+ color:'#fff',
+ },
+ }
+ },
+ color: [
+ {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0, color: "#E8B21D" // 0% 处的颜色
+ }, {
+ offset: 1, color: "#E5DC44" // 100% 处的颜色
+ }],
+ global: false // 缺省为 false
+ },
+ {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0, color: "#333" // 0% 处的颜色
+ }, {
+ offset: 1, color: "#333" // 100% 处的颜色
+ }],
+ global: false // 缺省为 false
+ }
+ ],
+ center: ['80%','25%']
+ },
+ {
+ name: '劳保鞋',
+ type: 'pie',
+ radius: ['40%', '45%'],
+ data: [
+ { value: 5492, name: '劳保鞋'},
+ { value: 10842, name: '劳保鞋未使用'}
+ ],
+ label: {
+ show: true,
+ position: 'center',
+ formatter: '{total|{a}}' + '\n\r' + '{active|5492}',
+ rich: {
+ total:{
+ fontSize: fontSize(12),
+ color:'#fff',
+ lineHeight: fontSize(16)
+ },
+ active: {
+ fontSize: fontSize(16),
+ color:'#fff',
+ },
+ }
+ },
+ color: [
+ {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0, color: "#D65146" // 0% 处的颜色
+ }, {
+ offset: 1, color: "#F58C28" // 100% 处的颜色
+ }]
+ },
+ {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0, color: "#333" // 0% 处的颜色
+ }, {
+ offset: 1, color: "#333" // 100% 处的颜色
+ }]
+ }
+ ],
+ center: ['33.33%','75%']
+ },
+ {
+ name: '动火护具',
+ type: 'pie',
+ radius: ['40%', '45%'],
+ data: [
+ { value: 44043, name: '动火护具'},
+ { value: 68102, name: '动火护具未使用' }
+ ],
+ label: {
+ show: true,
+ position: 'center',
+ formatter: '{total|{a}}' + '\n\r' + '{active|44043}',
+ rich: {
+ total:{
+ fontSize: fontSize(12),
+ color:'#fff',
+ lineHeight: fontSize(16)
+ },
+ active: {
+ fontSize: fontSize(16),
+ color:'#fff',
+ },
+ }
+ },
+ color: [
+ {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0, color: "#4449D1" // 0% 处的颜色
+ }, {
+ offset: 1, color: "#A86DE5" // 100% 处的颜色
+ }]
+ },
+ {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0, color: "#333" // 0% 处的颜色
+ }, {
+ offset: 1, color: "#333" // 100% 处的颜色
+ }]
+ }
+ ],
+ center: ['66.66%','75%']
+ }
+ ],
+ };
+
+ option && myChart.setOption(option);
+ window.addEventListener("resize",function (){
+ myChart.resize();
+ });
+ echarts.init(document.getElementById(stock2.value)).dispose()
+ }
+
+ const initStock2 =()=>{
+ let dom = document.getElementById(stock2.value);
+ let myChart = echarts.init(dom);
+
+ let option: EChartsOption;
+
+ option = {
+ series: [
+ {
+ name: '急救包',
+ type: 'pie',
+ radius: ['40%', '45%'],
+ data: [
+ { value: 8603, name: '急救包'},
+ { value: 12032, name: '急救包未使用'}
+ ],
+ label: {
+ show: true,
+ position: 'center',
+ formatter: '{total|{a}}' + '\n\r' + '{active|8603}',
+ rich: {
+ total:{
+ fontSize: fontSize(12),
+ color:'#fff',
+ lineHeight: fontSize(16)
+ },
+ active: {
+ fontSize: fontSize(16),
+ color:'#fff',
+ },
+ }
+ },
+ color: [
+ {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0, color: "#2D74C0" // 0% 处的颜色
+ }, {
+ offset: 1, color: "#21D9DC" // 100% 处的颜色
+ }],
+ global: false // 缺省为 false
+ },
+ {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0, color: "#333" // 0% 处的颜色
+ }, {
+ offset: 1, color: "#333" // 100% 处的颜色
+ }],
+ global: false // 缺省为 false
+ }
+ ],
+ center: ['20%','25%']
+ },
+ {
+ name: '人员培训资料',
+ type: 'pie',
+ radius: ['40%', '45%'],
+ data: [
+ { value: 8960, name: '人员培训资料'},
+ { value: 9890, name: '人员培训资料未使用'}
+ ],
+ label: {
+ show: true,
+ position: 'center',
+ formatter: '{total|{a}}' + '\n\r' + '{active|8960}',
+ rich: {
+ total:{
+ fontSize: fontSize(12),
+ color:'#fff',
+ lineHeight: fontSize(16)
+ },
+ active: {
+ fontSize: fontSize(16),
+ color:'#fff',
+ },
+ }
+ },
+ color: [
+ {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0, color: "#0DAA2E" // 0% 处的颜色
+ }, {
+ offset: 1, color: "#4CF475" // 100% 处的颜色
+ }],
+ global: false // 缺省为 false
+ },
+ {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0, color: "#333" // 0% 处的颜色
+ }, {
+ offset: 1, color: "#333" // 100% 处的颜色
+ }],
+ global: false // 缺省为 false
+ }
+ ],
+ center: ['50%','25%']
+ },
+ {
+ name: '安全护具',
+ type: 'pie',
+ radius: ['40%', '45%'],
+ data: [
+ { value: 12302, name: '安全护具'},
+ { value: 20130, name: '安全护具未使用'}
+ ],
+ label: {
+ show: true,
+ position: 'center',
+ formatter: '{total|{a}}' + '\n\r' + '{active|12302}',
+ rich: {
+ total:{
+ fontSize: fontSize(12),
+ color:'#fff',
+ lineHeight: fontSize(16)
+ },
+ active: {
+ fontSize: fontSize(16),
+ color:'#fff',
+ },
+ }
+ },
+ color: [
+ {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0, color: "#E8B21D" // 0% 处的颜色
+ }, {
+ offset: 1, color: "#E5DC44" // 100% 处的颜色
+ }],
+ global: false // 缺省为 false
+ },
+ {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0, color: "#333" // 0% 处的颜色
+ }, {
+ offset: 1, color: "#333" // 100% 处的颜色
+ }],
+ global: false // 缺省为 false
+ }
+ ],
+ center: ['80%','25%']
+ },
+ {
+ name: '高空护具',
+ type: 'pie',
+ radius: ['40%', '45%'],
+ data: [
+ { value: 42948, name: '高空护具'},
+ { value: 89342, name: '高空护具未使用'}
+ ],
+ label: {
+ show: true,
+ position: 'center',
+ formatter: '{total|{a}}' + '\n\r' + '{active|42948}',
+ rich: {
+ total:{
+ fontSize: fontSize(12),
+ color:'#fff',
+ lineHeight: fontSize(16)
+ },
+ active: {
+ fontSize: fontSize(16),
+ color:'#fff',
+ },
+ }
+ },
+ color: [
+ {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0, color: "#D65146" // 0% 处的颜色
+ }, {
+ offset: 1, color: "#F58C28" // 100% 处的颜色
+ }],
+ global: false // 缺省为 false
+ },
+ {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0, color: "#333" // 0% 处的颜色
+ }, {
+ offset: 1, color: "#333" // 100% 处的颜色
+ }],
+ global: false // 缺省为 false
+ }
+ ],
+ center: ['33.33%','75%']
+ },
+ {
+ name: '防尘护具',
+ type: 'pie',
+ radius: ['40%', '45%'],
+ data: [
+ { value: 1220, name: '防尘护具'},
+ { value: 5034, name: '防尘护具未使用' }
+ ],
+ label: {
+ show: true,
+ position: 'center',
+ formatter: '{total|{a}}' + '\n\r' + '{active|1220}',
+ rich: {
+ total:{
+ fontSize: fontSize(12),
+ color:'#fff',
+ lineHeight: fontSize(16)
+ },
+ active: {
+ fontSize: fontSize(16),
+ color:'#fff',
+ },
+ }
+ },
+ color: [
+ {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0, color: "#4449D1" // 0% 处的颜色
+ }, {
+ offset: 1, color: "#A86DE5" // 100% 处的颜色
+ }],
+ global: false // 缺省为 false
+ },
+ {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0, color: "#333" // 0% 处的颜色
+ }, {
+ offset: 1, color: "#333" // 100% 处的颜色
+ }],
+ global: false // 缺省为 false
+ }
+ ],
+ center: ['66.66%','75%']
+ }
+ ],
+ };
+
+ option && myChart.setOption(option);
+ window.addEventListener("resize",function (){
+ myChart.resize();
+ });
+ echarts.init(document.getElementById(stock1.value)).dispose()
+ }
+
+ function fontSize(val){
+ let nowClientWidth = document.documentElement.clientWidth;
+ return val * (nowClientWidth/1920) * Number(props.size);
+ }
+
+ // 页面载入时执行方法
+ onMounted(() => {
+ initStock1();
+ });
+ onBeforeUnmount(() =>{
+ clearInterval(swit)
+ })
+ return {
+ stock1,
+ stock2,
+ Search,
+ fontSize,
+ ...toRefs(state)
+ };
+ },
+ });
+</script>
+
+<style scoped lang="scss">
+ .charts-cont{
+ width: 100%;
+ height: 100%;
+ padding: 4% 2% 2%;
+ position: relative;
+
+ .stock{
+ 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>
diff --git a/src/views/riskWarningSys/warningBigScreen/components/training.vue b/src/views/riskWarningSys/warningBigScreen/components/training.vue
new file mode 100644
index 0000000..eb0cf52
--- /dev/null
+++ b/src/views/riskWarningSys/warningBigScreen/components/training.vue
@@ -0,0 +1,423 @@
+<template>
+ <div class="charts-cont">
+ <div v-show="curTab === 1" class="train" :id="train1"></div>
+ <div v-show="curTab === 2" class="train" :id="train2"></div>
+ <div v-show="curTab === 3" class="train" :id="train3"></div>
+ </div>
+</template>
+
+<script lang="ts">
+ import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted, nextTick, onBeforeUnmount} 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 {
+ curTab: number
+ }
+ export default defineComponent({
+ name: 'accident',
+ components: {},
+ props:{
+ size: Number
+ },
+ setup(props) {
+ const userInfo = useUserInfo()
+ const { userInfos } = storeToRefs(userInfo);
+ const train1 = ref("eChartTrain1" + Date.now() + Math.random())
+ const train2 = ref("eChartTrain2" + Date.now() + Math.random())
+ const train3 = ref("eChartTrain3" + Date.now() + Math.random())
+ const state = reactive<stateType>({
+ curTab: 1
+ })
+
+ // const changeTab=()=>{
+ // setInterval(()=>{
+ // if(state.curTab<3){
+ // state.curTab = state.curTab + 1
+ // if(state.curTab == 2){
+ // nextTick(()=>{
+ // initTrain2()
+ // })
+ // }else{
+ // nextTick(()=>{
+ // initTrain3()
+ // })
+ // }
+ //
+ // }else{
+ // state.curTab = 1
+ // nextTick(()=>{
+ // initTrain1()
+ // })
+ // }
+ // },5000)
+ // }
+ const changeTab = setInterval(()=>{
+ if(state.curTab<3){
+ state.curTab = state.curTab + 1
+ if(state.curTab == 2){
+ nextTick(()=>{
+ initTrain2()
+ })
+ }else{
+ nextTick(()=>{
+ initTrain3()
+ })
+ }
+
+ }else{
+ state.curTab = 1
+ nextTick(()=>{
+ initTrain1()
+ })
+ }
+ },5000)
+ type EChartsOption = echarts.EChartsOption
+ // 隐患整改情况
+ const initTrain1 =()=>{
+ let dom = document.getElementById(train1.value);
+ let myChart = echarts.init(dom);
+ let option: EChartsOption;
+
+ option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ grid: {
+ top: '1%',
+ left: '2%',
+ right: '2%',
+ bottom: '2%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'value',
+ boundaryGap: [0, 0.01],
+ axisLine:{
+ show: true,
+ lineStyle:{
+ type: 'dotted'
+ }
+ },
+ axisLabel:{
+ color: '#ccc'
+ },
+ splitLine:{
+ show: false
+ }
+ },
+ yAxis: {
+ type: 'category',
+ // data: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'],
+ data: ['一月', '二月', '三月', '四月'],
+ axisLine:{
+ show: true,
+ lineStyle:{
+ color: '#fff'
+ }
+ },
+ axisLabel:{
+ color: '#fff'
+ }
+ },
+ series: [
+ {
+ name: '2011',
+ type: 'bar',
+ // data: [18203, 23489, 29034, 104970, 131744, 630230, 18203, 23489, 29034, 104970, 131744, 630230]
+ data: [18203, 23489, 29034, 104970],
+ itemStyle:{
+ color: {
+ x: 0,
+ y: 0,
+ x2: 1,
+ y2: 0,
+ colorStops: [
+ {
+ offset: 0.1,
+ color: "#2D74C0", // 线处的颜色
+ },
+ {
+ offset: 0.9,
+ color: "#21D9DC", // 坐标轴处的颜色
+ },
+ ]
+ },
+ borderRadius: [0,99,99,0]
+ },
+ barCategoryGap: '50%',
+ label:{
+ show: true,
+ position: 'outside',
+ color: '#fff',
+ fontSize: fontSize(11)
+ }
+ }
+ ]
+ };
+
+ option && myChart.setOption(option);
+ window.addEventListener("resize",function (){
+ myChart.resize();
+ });
+ echarts.init(document.getElementById(train2.value)).dispose()
+ echarts.init(document.getElementById(train3.value)).dispose()
+ }
+
+ const initTrain2 =()=>{
+ let dom = document.getElementById(train2.value);
+ let myChart = echarts.init(dom);
+ let option: EChartsOption;
+
+ option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ grid: {
+ top: '1%',
+ left: '2%',
+ right: '2%',
+ bottom: '2%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'value',
+ boundaryGap: [0, 0.01],
+ axisLine:{
+ show: true,
+ lineStyle:{
+ type: 'dotted'
+ }
+ },
+ axisLabel:{
+ color: '#ccc'
+ },
+ splitLine:{
+ show: false
+ }
+ },
+ yAxis: {
+ type: 'category',
+ // data: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'],
+ data: ['五月', '六月','七月', '八月'],
+ axisLine:{
+ show: true,
+ lineStyle:{
+ color: '#fff'
+ }
+ },
+ axisLabel:{
+ color: '#fff'
+ }
+ },
+ series: [
+ {
+ name: '2011',
+ type: 'bar',
+ // data: [18203, 23489, 29034, 104970, 131744, 630230, 18203, 23489, 29034, 104970, 131744, 630230]
+ data: [131744, 630230, 18203, 23489],
+ barCategoryGap: '50%',
+ itemStyle:{
+ color: {
+ x: 0,
+ y: 0,
+ x2: 1,
+ y2: 0,
+ colorStops: [
+ {
+ offset: 0.1,
+ color: "#2D74C0", // 线处的颜色
+ },
+ {
+ offset: 0.9,
+ color: "#21D9DC", // 坐标轴处的颜色
+ },
+ ]
+ },
+ borderRadius: [0,99,99,0]
+ },
+ label:{
+ show: true,
+ position: 'outside',
+ color: '#fff',
+ fontSize: fontSize(11)
+ }
+ }
+ ]
+ };
+
+ option && myChart.setOption(option);
+ window.addEventListener("resize",function (){
+ myChart.resize();
+ });
+ echarts.init(document.getElementById(train1.value)).dispose()
+ echarts.init(document.getElementById(train3.value)).dispose()
+ }
+
+ const initTrain3 =()=>{
+ let dom = document.getElementById(train3.value);
+ let myChart = echarts.init(dom);
+ let option: EChartsOption;
+
+ option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ grid: {
+ top: '1%',
+ left: '2%',
+ right: '2%',
+ bottom: '2%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'value',
+ boundaryGap: [0, 0.01],
+ axisLine:{
+ show: true,
+ lineStyle:{
+ type: 'dotted'
+ }
+ },
+ axisLabel:{
+ color: '#ccc'
+ },
+ splitLine:{
+ show: false
+ }
+ },
+ yAxis: {
+ type: 'category',
+ // data: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'],
+ data: ['九月', '十月', '十一月', '十二月'],
+ axisLine:{
+ show: true,
+ lineStyle:{
+ color: '#fff'
+ }
+ },
+ axisLabel:{
+ color: '#fff'
+ }
+ },
+ series: [
+ {
+ name: '2011',
+ type: 'bar',
+ // data: [18203, 23489, 29034, 104970, 131744, 630230, 18203, 23489, 29034, 104970, 131744, 630230]
+ data: [29034, 104970, 131744, 630230],
+ barCategoryGap: '50%',
+ itemStyle:{
+ color: {
+ x: 0,
+ y: 0,
+ x2: 1,
+ y2: 0,
+ colorStops: [
+ {
+ offset: 0.1,
+ color: "#2D74C0", // 线处的颜色
+ },
+ {
+ offset: 0.9,
+ color: "#21D9DC", // 坐标轴处的颜色
+ },
+ ]
+ },
+ borderRadius: [0,99,99,0]
+ },
+ label:{
+ show: true,
+ position: 'outside',
+ color: '#fff',
+ fontSize: fontSize(11)
+ }
+ }
+ ]
+ };
+
+ option && myChart.setOption(option);
+ window.addEventListener("resize",function (){
+ myChart.resize();
+ });
+ echarts.init(document.getElementById(train1.value)).dispose()
+ echarts.init(document.getElementById(train2.value)).dispose()
+ }
+
+ function fontSize(val){
+ let nowClientWidth = document.documentElement.clientWidth;
+ return val * (nowClientWidth/1920) * Number(props.size);
+ }
+
+ // 页面载入时执行方法
+ onMounted(() => {
+ initTrain1();
+ });
+ onBeforeUnmount(() =>{
+ clearInterval(changeTab)
+ })
+ return {
+ train1,
+ train2,
+ train3,
+ Search,
+ fontSize,
+ ...toRefs(state)
+ };
+ },
+ });
+</script>
+
+<style scoped lang="scss">
+ .charts-cont{
+ width: 100%;
+ height: 100%;
+ padding: 1% 5% 5%;
+ position: relative;
+
+ .train{
+ 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>
diff --git a/src/views/riskWarningSys/warningBigScreen/index.vue b/src/views/riskWarningSys/warningBigScreen/index.vue
index 14a11d4..f10734c 100644
--- a/src/views/riskWarningSys/warningBigScreen/index.vue
+++ b/src/views/riskWarningSys/warningBigScreen/index.vue
@@ -25,40 +25,129 @@
<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>
+ <div class="part-tit">
+ <span>| 事故等级分布</span>
+ <img @click="jumpPage(1)" src="../../../assets/warningScreen/small-full.png">
+ </div>
+ <div class="chart-box">
+ <accident :size="1"></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>
+ <div class="part-tit">
+ <span>| 应急演练次数</span>
+ <img @click="jumpPage(2)" src="../../../assets/warningScreen/small-full.png">
+ </div>
+ <div class="chart-box">
+ <span class="train-tip">距上次演练结束 5 天</span>
+ <training :size="1"></training>
+ </div>
</div>
<div class="left-bottom">
+ <dv-border-box-13 backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-13>
+ <div class="part-tit">
+ <span>| 隐患等级数量分布</span>
+ <div>
+ <el-select class="selector" v-model="month" placeholder="Select" size="default">
+ <el-option
+ v-for="item in optionList"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+ <img @click="jumpPage(3)" src="../../../assets/warningScreen/small-full.png">
+ </div>
+ </div>
+ <div class="chart-box">
+ <risk :size="1" :month="month"></risk>
+ </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>
+ <div class="part-tit" style="position: absolute;top: 12%;padding: 0 4%">
+ <el-cascader
+ class="spiSe"
+ v-model="spiValue"
+ :options="spiOptions"
+ :props="props"
+ @change="handleChange"
+ />
+<!-- <span>SPI数据分析</span>-->
+ <img @click="jumpPage(4)" src="../../../assets/warningScreen/small-full.png">
+ </div>
+ <div class="chart-box">
+ <spi :size="1" :dep="spiValue"></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>
+ <div class="part-tit">
+ <span>| 教育培训分析</span>
+ <img @click="jumpPage(5)" src="../../../assets/warningScreen/small-full.png">
+ </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>
+ <div class="part-tit">
+ <span>| 隐患等级</span>
+ <img @click="jumpPage(6)" src="../../../assets/warningScreen/small-full.png">
+ </div>
+ <div class="chart-box">
+ <danger :size="1"></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>
+ <div class="part-tit">
+ <span>| 人员专业度分布</span>
+ <img @click="jumpPage(7)" src="../../../assets/warningScreen/small-full.png">
+ </div>
+ <div class="chart-box">
+ <profession :size="1"></profession>
+ </div>
</div>
</div>
</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>
+ <div class="part-tit">
+ <span>| 预警消息报告</span>
+ <img @click="jumpPage(8)" src="../../../assets/warningScreen/small-full.png">
+ </div>
+ <div class="chart-box">
+ <message :size="1"></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>
+ <div class="part-tit">
+ <span>| 特殊作业实时监控</span>
+ <img @click="jumpPage(9)" src="../../../assets/warningScreen/small-full.png">
+ </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>
+ <div class="part-tit">
+ <span>| 风险应急物资储备</span>
+ <img @click="jumpPage(10)" src="../../../assets/warningScreen/small-full.png">
+ </div>
+ <div class="chart-box">
+ <stock :size="1"></stock>
+ </div>
</div>
</div>
</div>
@@ -67,42 +156,148 @@
<script lang="ts">
import screenfull from 'screenfull';
- import { toRefs, reactive, ref, onMounted } from 'vue';
+ import { toRefs, reactive, ref, onMounted, defineComponent, defineAsyncComponent, nextTick, onUnmounted } from 'vue';
import { ElTable } from 'element-plus';
import { FormInstance, FormRules, ElMessage } from 'element-plus';
import { safetyRiskEventApi } from '/@/api/doublePreventSystem/safetyRiskEvent/index.ts';
import { useRouter } from 'vue-router';
import {hiddenReportApi} from "/@/api/doublePreventSystem/report";
import { productionDeviceApi } from '/@/api/doublePreventSystem/productionDevice/index.ts';
- import * as echarts from 'echarts/core';
- import {TooltipComponent, TooltipComponentOption, LegendComponent, LegendComponentOption} from 'echarts/components';
- import {PieChart, PieSeriesOption} from 'echarts/charts';
- import {LabelLayout} from 'echarts/features';
- import {CanvasRenderer} from 'echarts/renderers';
- echarts.use([TooltipComponent, LegendComponent, PieChart, CanvasRenderer, LabelLayout]);
+ import '/@/theme/bigScreen.css'
+
// 定义接口来定义对象的类型
interface stateType {
isScreenfull: boolean;
- currentTime: string
+ currentTime: string;
+ month: number;
+ spiValue: number;
+ optionList: Array<any>;
+ spiOptions: Array<any>
}
- export default {
+ export default defineComponent({
name: 'warningScreen',
- components: {},
+ components: {
+ accident: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/accident.vue')),
+ training: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/training.vue')),
+ spi: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/SPI.vue')),
+ risk: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/risk.vue')),
+ educate: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/educate.vue')),
+ danger: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/danger.vue')),
+ profession: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/profession.vue')),
+ message: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/message.vue')),
+ monitor: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/monitor.vue')),
+ stock: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/stock.vue'))
+ },
setup() {
const router = useRouter();
+ const props = {
+ expandTrigger: 'hover',
+ }
const state = reactive<stateType>({
isScreenfull: false,
- currentTime: ''
+ currentTime: '',
+ month: 0,
+ spiValue: 0,
+ optionList: [
+ {
+ label: '年度',
+ value: 0
+ },
+ {
+ label: '一月',
+ value: 1
+ },
+ {
+ label: '二月',
+ value: 2
+ },
+ {
+ label: '三月',
+ value: 3
+ },
+ {
+ label: '四月',
+ value: 4
+ },
+ {
+ label: '五月',
+ value: 5
+ },
+ {
+ label: '六月',
+ value: 6
+ },
+ {
+ label: '七月',
+ value: 7
+ },
+ {
+ label: '八月',
+ value: 8
+ },
+ {
+ label: '九月',
+ value: 9
+ },
+ {
+ label: '十月',
+ value: 10
+ }
+ ],
+ spiOptions: [
+ {
+ value: 0,
+ label: '公司级别SPI'
+ },
+ {
+ value: 1,
+ label: 'A事业部SPI',
+ children: [
+ {
+ value: 11,
+ label: 'A车间SPI'
+ },
+ {
+ value: 12,
+ label: 'B车间SPI'
+ },
+ {
+ value: 13,
+ label: 'C车间SPI'
+ }
+ ]
+ },
+ {
+ value: 2,
+ label: 'B事业部SPI',
+ children: [
+ {
+ value: 21,
+ label: 'D车间SPI'
+ },
+ {
+ value: 22,
+ label: 'E车间SPI'
+ },
+ {
+ value: 23,
+ label: 'F车间SPI'
+ }
+ ]
+ }
+ ]
});
// 页面载入时执行方法
onMounted(() => {
- setInterval(() => {
- state.currentTime = new Date().toLocaleString();
- console.log(state.currentTime)
- }, 1000);
+ getTime()
});
+ const getTime =()=>{
+ setInterval(() => {
+ state.currentTime = new Date().toLocaleString();
+ }, 1000);
+ }
// 全屏
const onScreenfullClick = () => {
if (!screenfull.isEnabled) {
@@ -118,6 +313,15 @@
}
});
};
+
+ const jumpPage = (num) =>{
+ router.push({
+ path: 'screenPage',
+ query: {
+ num: num
+ }
+ });
+ }
// 返回上一页
const goBack = () => {
@@ -138,102 +342,25 @@
// }
// };
- // 隐患整改情况
- // const initRiskFix =()=>{
- // var dom = document.getElementById('riskFix');
- // var myChart = echarts.init(dom, null, {
- // renderer: 'canvas',
- // useDirtyRect: false
- // });
- // var app = {};
- //
- // var option;
- //
- // option = {
- // tooltip: {
- // trigger: 'item'
- // },
- // legend: {
- // bottom: '5%',
- // left: 'center'
- // },
- // series: [
- // {
- // name: 'Access From',
- // type: 'pie',
- // radius: ['35%', '60%'],
- // avoidLabelOverlap: false,
- // itemStyle: {
- // borderRadius: 6,
- // borderColor: '#fff',
- // borderWidth: 2
- // },
- // label: {
- // alignTo: 'labelLine',
- // formatter: '{name|{b}}\n{value|{c}}',
- // minMargin: 5,
- // edgeDistance: 5,
- // lineHeight: 15,
- // rich: {
- // name: {
- // fontSize: 14,
- // color: '#666'
- // }
- // }
- // },
- // labelLine: {
- // length: 15,
- // maxSurfaceAngle: 80
- // },
- // emphasis: {
- // label: {
- // show: true,
- // fontSize: '40',
- // fontWeight: 'bold'
- // }
- // },
- // data: [
- // { value: 1048, name: '整改中' },
- // { value: 735, name: '待验收' },
- // { value: 580, name: '延期整改' },
- // { value: 484, name: '超期未整改' },
- // { value: 300, name: '已验收' }
- // ],
- // center: ['50%','40%']
- // }
- // ]
- // };
- //
- // if (option && typeof option === 'object') {
- // myChart.setOption(option);
- // }
- //
- // window.addEventListener('resize', myChart.resize);
- // }
-
return {
router,
+ props,
onScreenfullClick,
+ jumpPage,
goBack,
...toRefs(state)
};
}
- };
+ });
</script>
<style scoped lang="scss">
$homeNavLengh: 8;
-
- @media screen and (min-width: 1366px) {
-
+ ::v-deep(.el-select-dropdown) {
+ background-color: transparent !important;
}
-
- @media screen and (min-width: 1024px) and (max-width: 1366px){
-
- }
-
- @media screen and (max-width: 1024px) {
-
+ ::v-deep(.el-select-dropdown__item){
+ background-color: transparent !important;
}
.container {
width: 100%;
@@ -247,9 +374,9 @@
.header-content {
width: 100%;
- height: 80px;
+ height: 72px;
padding: 0 20px;
- font-size: 20px;
+ font-size: 1.25rem;
display: flex;
align-items: center;
justify-content: space-around;
@@ -267,9 +394,9 @@
}
.title {
width: 46%;
- font-size: 26px;
+ font-size: 2rem;
font-weight: bolder;
- line-height: 80px;
+ line-height: 72px;
text-align: center;
letter-spacing: 2px;
}
@@ -280,7 +407,7 @@
display: flex;
align-items: center;
justify-content: space-around;
- font-size: 15px;
+ font-size: 1rem;
padding-left: 30px;
.datetime {
@@ -293,8 +420,7 @@
&>div{
display: flex;
align-items: center;
- align-items: center;
- font-size: 15px;
+ font-size: 1rem;
margin-right: 20px;
img{
@@ -305,92 +431,203 @@
margin-left: 6px;
}
}
+ .fullbtn{
+ cursor: pointer;
+ }
+ .backBtn{
+ cursor: pointer;
+ }
}
}
}
.main-content{
width: 100%;
height: 100%;
- padding: 20px;
+ padding: 0 25px 25px;
display: flex;
align-items: center;
justify-content: space-between;
- .main-left{
- width: calc(25% - 10px);
+ &>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: #11feee;
+ font-weight: bolder;
+ }
+
+ .dv-border-box-11{
+ :deep(.dv-border-svg-container){
+ .dv-border-box-11-title{
+ font-size: 1.5rem;
+ fill: #11feee !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: #11feee;
+ }
+ ::v-deep(.el-cascader){
+ width: 25% !important;
+ }
+ ::v-deep(.el-input__wrapper){
+ width: 20%;
+ box-shadow: none;
+ border: 1px solid rgba(17,254,238,.2);
+ background: rgba(10,31,92,.6) !important;
+ height: 2.5rem;
+ color: #11FEEE;
+
+ input{
+ font-size: 1.25rem;
+ color: #11FEEE;
+ }
+ .el-icon{
+ color: #11FEEE;
+ }
+ }
+ .selector{
+ width: calc(100% - 1.25rem);
+ margin-right: 0.8rem;
+
+ ::v-deep(.el-input__wrapper){
+ box-shadow: none;
+ border: 1px solid rgba(17,254,238,.2);
+ background: rgba(10,31,92,.6) !important;
+ height: 1.5rem;
+ color: #11FEEE;
+
+ input{
+ font-size: 0.8rem;
+ color: #11FEEE;
+ }
+ .el-icon{
+ color: #11FEEE;
+ }
+ }
+ }
+
+ img{
+ width: 1.20rem;
+ height: 1.20rem;
+ 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%;
+ }
+ accident{
+ width: 100%;
+ height: 100%;
+ }
+
+ training{
+ width: 100%;
+ height: 100%;
+ }
+ }
+ }
+ }
+
+ .main-left{
+ width: calc(25% - 5px);
.left-top{
width: 100%;
- height: calc((100%/3) - (40px/3));
+ height: calc((100%/3) - (20px/3));
+
}
.left-mid{
width: 100%;
- height: calc((100%/3) - (40px/3));
+ height: calc((100%/3) - (20px/3));
}
.left-bottom{
width: 100%;
- height: calc((100%/3) - (40px/3));
+ height: calc((100%/3) - (20px/3));
}
}
.main-middle{
- width: calc(50% - 20px);
- height: 100%;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- align-items: flex-start;
+ width: calc(50% - 10px);
.mid-top{
width: 100%;
- height: calc((200%/3) - (80px/3) + 20px);
+ height: calc((200% - 40px)/3 + 10px);
}
.mid-bottom{
display: flex;
width: 100%;
- height: calc(100% - (200%/3) + (80px/3) - 40px);
+ height: calc((100%/3) - (20px/3));
justify-content: space-between;
+ padding: 0;
+ background: none;
+ border-radius: 0;
&>div {
position: relative;
- width: calc((100% - 40px)/3);
+ width: calc((100% - 20px)/3);
border-radius: 8px;
overflow: hidden;
-
- .chart-tit {
- position: absolute;
- left: 20px;
- top: 20px;
- font-weight: 700;
- z-index: 3;
- }
+ padding: 10px 15px;
+ box-sizing: border-box;
}
}
}
.main-right{
- width: calc(25% - 10px);
- height: 100%;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- align-items: flex-start;
+ width: calc(25% - 5px);
.right-top{
width: 100%;
- height: calc((100%/3) - (40px/3));
+ height: calc((100%/3) - (20px/3));
}
.right-mid{
width: 100%;
- height: calc((100%/3) - (40px/3));
+ height: calc((100%/3) - (20px/3));
}
.right-bottom{
width: 100%;
- height: calc((100%/3) - (40px/3));
+ height: calc((100%/3) - (20px/3));
}
}
}
diff --git a/src/views/riskWarningSys/warningBigScreen/indexs/index.vue b/src/views/riskWarningSys/warningBigScreen/indexs/index.vue
new file mode 100644
index 0000000..e0faf3b
--- /dev/null
+++ b/src/views/riskWarningSys/warningBigScreen/indexs/index.vue
@@ -0,0 +1,269 @@
+<template>
+ <div class="com-page">
+ <div class="btns" @click="goBack()">
+ 返回首页
+ </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>
+ <div class="chart-cont">
+ <div class="chart">
+ <div v-show="curChart===2" class="selector-2">距上次演练结束5天</div>
+ <el-select v-show="curChart===3" class="selector-3" v-model="month" placeholder="Select" size="default">
+ <el-option
+ v-for="item in optionList"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+ <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>
+ <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>
+ <message v-else-if="curChart===8" :size="2"></message>
+ <monitor v-else-if="curChart===9" :size="2.5"></monitor>
+ <stock v-else class="main-chart" :size="2"></stock>
+ </div>
+ <div class="chart-right">
+ <dv-decoration-10 :color="['#11FEEE']" style="width:100%;height:5%;" />
+ <div class="charts-des">
+ <div class="">
+
+ </div>
+ </div>
+ <dv-decoration-10 :color="['#11FEEE']" style="width:100%;height:5%;" />
+ </div>
+ </div>
+ </div>
+</template>
+
+<script lang="ts">
+ import screenfull from 'screenfull';
+ import { toRefs, reactive, ref, onMounted, defineComponent, defineAsyncComponent, nextTick, onUnmounted } from 'vue';
+ import { ElTable } from 'element-plus';
+ import { FormInstance, FormRules, ElMessage } from 'element-plus';
+ import { safetyRiskEventApi } from '/@/api/doublePreventSystem/safetyRiskEvent/index.ts';
+ import { useRoute } from 'vue-router';
+ import {hiddenReportApi} from "/@/api/doublePreventSystem/report";
+ import { productionDeviceApi } from '/@/api/doublePreventSystem/productionDevice/index.ts';
+ import '/@/theme/bigScreen.css'
+
+ // 定义接口来定义对象的类型
+ interface stateType {
+ isScreenfull: boolean;
+ curChart: number | null;
+ month: number;
+ optionList: Array<any>
+ }
+ export default defineComponent({
+ name: 'warningPage',
+ components: {
+ accident: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/accident.vue')),
+ training: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/training.vue')),
+ spi: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/SPI.vue')),
+ risk: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/risk.vue')),
+ educate: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/educate.vue')),
+ danger: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/danger.vue')),
+ profession: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/profession.vue')),
+ message: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/message.vue')),
+ monitor: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/monitor.vue')),
+ stock: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/stock.vue'))
+ },
+ setup() {
+ const route = useRoute();
+ const state = reactive<stateType>({
+ isScreenfull: false,
+ curChart: null,
+ month: 0,
+ optionList: [
+ {
+ label: '年度',
+ value: 0
+ },
+ {
+ label: '一月',
+ value: 1
+ },
+ {
+ label: '二月',
+ value: 2
+ },
+ {
+ label: '三月',
+ value: 3
+ },
+ {
+ label: '四月',
+ value: 4
+ },
+ {
+ label: '五月',
+ value: 5
+ },
+ {
+ label: '六月',
+ value: 6
+ },
+ {
+ label: '七月',
+ value: 7
+ },
+ {
+ label: '八月',
+ value: 8
+ },
+ {
+ label: '九月',
+ value: 9
+ },
+ {
+ label: '十月',
+ value: 10
+ }
+ ]
+ });
+
+ // 页面载入时执行方法
+ onMounted(() => {
+ if (route.query.num) {
+ state.curChart = Number(route.query.num)
+ }
+ });
+
+
+ // 全屏
+ const onScreenfullClick = () => {
+ if (!screenfull.isEnabled) {
+ ElMessage.warning('暂不不支持全屏');
+ return false;
+ }
+ screenfull.toggle();
+ screenfull.on('change', () => {
+ if (screenfull.isFullscreen) {
+ state.isScreenfull = true;
+ } else {
+ state.isScreenfull = false;
+ }
+ });
+ };
+
+ // 返回上一页
+ const goBack = () => {
+ window.history.go(-1);
+ };
+
+
+ return {
+ route,
+ onScreenfullClick,
+ goBack,
+ ...toRefs(state)
+ };
+ }
+ });
+</script>
+
+<style scoped lang="scss">
+ .com-page{
+ width: 100%;
+ height: 100%;
+ border:1px #5a5959 solid;
+ background: url('../../../../assets/warningScreen/body-bg.jpg');
+ padding: 4%;
+ .btns{
+ position: fixed;
+ right: 5%;
+ top: 20px;
+ 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;
+ }
+ .tit{
+ width: 100%;
+ height: 122px;
+ background: url("../../../../assets/warningScreen/pagebg-t.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: #11feee;
+ 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.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.png") no-repeat center;
+ background-size: 100% 100%;
+ }
+ }
+
+ }
+ }
+</style>
\ No newline at end of file
diff --git a/src/views/specialWorkSystem/workAlert/alertRecord/index.vue b/src/views/specialWorkSystem/workAlert/alertRecord/index.vue
new file mode 100644
index 0000000..f30e7c6
--- /dev/null
+++ b/src/views/specialWorkSystem/workAlert/alertRecord/index.vue
@@ -0,0 +1,438 @@
+<template>
+ <div class="home-container">
+ <div style="height: 100%">
+ <el-row class="homeCard">
+ <el-col :span="6" style="display:flex;align-items: center">
+ <span style="white-space: nowrap">作业证编号：</span>
+ <div class="grid-content topInfo">
+ <el-input v-model="searchWord"></el-input>
+ </div>
+ </el-col>
+ <el-col :span="6" style="display:flex;align-items: center">
+ <span style="white-space: nowrap">作业类型：</span>
+ <div class="grid-content topInfo">
+ <el-select v-model="searchType" placeholder="请选择作业类型">
+ <el-option
+ v-for="item in workTypeList"
+ :key="item.id"
+ :label="item.name"
+ :value="item.id"
+ />
+ </el-select>
+ </div>
+ </el-col>
+ <el-col :span="6" style="display:flex;align-items: center">
+ <span style="white-space: nowrap">预警类型：</span>
+ <div class="grid-content topInfo">
+ <el-select v-model="searchAlert" placeholder="请选择预警类型">
+ <el-option
+ v-for="item in alertTypeList"
+ :key="item.id"
+ :label="item.name"
+ :value="item.id"
+ />
+ </el-select>
+ </div>
+ </el-col>
+ <el-button type="primary" @click="searchRecord">查询</el-button>
+ <el-button plain @click="clearSearch">重置</el-button>
+ </el-row>
+ <div class="homeCard">
+ <div class="main-card">
+<!-- <el-row class="cardTop">-->
+<!-- <el-col :span="12" class="mainCardBtn">-->
+<!-- <el-button type="primary" :icon="Plus" size="default" @click="dialogAddRecord = true">新建</el-button>-->
+<!-- </el-col>-->
+<!-- <el-button type="primary" :icon="Refresh" size="default"/>-->
+<!-- </el-row>-->
+ <el-table
+ ref="multipleTableRef"
+ :data="tableData"
+ style="width: 100%"
+ height="calc(100% - 48px)"
+ :header-cell-style="{background: '#fafafa'}"
+ >
+ <el-table-column type="index" label="序号" width="200"/>
+ <el-table-column property="id" label="作业证编号" width="200"/>
+ <el-table-column property="workType" label="作业类型" width="200"/>
+ <el-table-column property="alertInfo" label="预警信息"/>
+ <el-table-column property="alertType" label="预警类型"/>
+ <el-table-column property="desc" label="描述" width="200"/>
+ <el-table-column property="name" label="上报人"/>
+ <el-table-column property="updateTime" label="上报时间"/>
+ <el-table-column fixed="right" label="操作" align="center" width="250">
+ <template #default="scope">
+ <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ <div class="pageBtn">
+ <el-pagination
+ v-model:currentPage="currentPage"
+ v-model:page-size="pageSize"
+ :page-sizes="[10, 15]"
+ small=false
+ background
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="100"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ />
+ </div>
+ </div>
+ </div>
+ </div>
+ <el-dialog v-model="dialogDetails" title="作业预警记录">
+ <el-form :model="details" label-width="120px">
+ <el-form-item label="作业证编号">
+ <el-input v-model="details.id" readonly/>
+ </el-form-item>
+ <el-form-item label="作业类型">
+ <el-input v-model="details.workType" readonly/>
+ </el-form-item>
+ <el-form-item label="预警信息">
+ <el-input v-model="details.alertInfo" readonly/>
+ </el-form-item>
+ <el-form-item label="预警类型">
+ <el-input v-model="details.alertType" readonly/>
+ </el-form-item>
+ <el-form-item label="描述">
+ <el-input v-model="details.desc" type="textarea" readonly/>
+ </el-form-item>
+ <el-form-item label="上报人">
+ <el-input v-model="details.name" readonly/>
+ </el-form-item>
+ <el-form-item label="上报时间">
+ <el-input v-model="details.updateTime" readonly/>
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button>
+ </el-form-item>
+ </el-form>
+ </el-dialog>
+ </div>
+</template>
+
+<script lang="ts">
+ import { toRefs, reactive, ref, onMounted } from 'vue';
+ import { storeToRefs } from 'pinia';
+ import { initBackEndControlRoutes } from '/@/router/backEnd';
+ import { useUserInfo } from '/@/stores/userInfo';
+ import { Session } from '/@/utils/storage';
+ import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue';
+ import { ElTable } from 'element-plus';
+ import { FormInstance, FormRules, ElMessage } from 'element-plus';
+ import { teamManageApi } from '/@/api/systemManage/basicDateManage/personShiftManage/teamManage';
+
+ // 定义接口来定义对象的类型
+ interface stateType {
+ tableData: Array<any>;
+ departmentList: Array<any>;
+ department:string;
+ workerList: Array<string>;
+ casProps: {};
+ multipleSelection: Array<any>;
+ deleteArr: Array<any>;
+ dialogDetails: boolean;
+ dialogAddRecord: boolean;
+ deleteDialog: boolean;
+ deleteSetDialog: boolean;
+ pageIndex: number;
+ pageSize: number;
+ chosenIndex: null | number;
+ deleteId: null | number;
+ searchWord: string;
+ searchType: number | null;
+ searchAlert: number | null;
+ totalSize: number;
+ addRecord: {
+
+ };
+ details: {
+
+ };
+ workTypeList: Array<any>;
+ alertTypeList: Array<any>
+ }
+
+ export default {
+ name: 'alertRecord',
+ components: {},
+ setup() {
+ const userInfo = useUserInfo();
+ const { userInfos } = storeToRefs(userInfo);
+
+ const state = reactive<stateType>({
+ pageIndex: 1,
+ pageSize: 10,
+ totalSize: 0,
+ chosenIndex: null,
+ searchWord: '',
+ searchType: null,
+ searchAlert: null,
+ tableData: [
+ {
+ id: 'GTXH-0000001',
+ workType: '动火作业',
+ alertInfo: '可燃气检查超标',
+ alertType: '气体分析',
+ desc: 'A车间动火作业过程检查',
+ name: '李羽飞',
+ updateTime: '2022-08-31 12:00:00'
+ },
+ {
+ id: 'GTXH-0000002',
+ workType: '动火作业',
+ alertInfo: '作业现场检查异常',
+ alertType: '作业检查',
+ desc: 'B车间动火作业过程气体检查',
+ name: '李羽飞',
+ updateTime: '2022-08-31 16:31:44'
+ },
+ {
+ id: 'GTXH-0000003',
+ workType: '动火作业',
+ alertInfo: '可燃气检查超标',
+ alertType: '气体分析',
+ desc: '',
+ name: '李羽飞',
+ updateTime: '2022-08-31 17:05:20'
+ }
+ ],
+ departmentList: [],
+ department: '',
+ workerList: [],
+ casProps: {
+ expandTrigger: 'hover',
+ emitPath: false,
+ value: 'depId',
+ label: 'depName'
+ },
+ multipleSelection: [],
+ dialogDetails: false,
+ dialogAddRecord: false,
+ deleteDialog: false,
+ deleteSetDialog: false,
+ addRecord: {
+
+ },
+ details: {
+
+ },
+ deleteId: null,
+ deleteArr: [],
+ workTypeList: [
+ { id: 1, name: '动火作业' },
+ { id: 2, name: '受限空间作业' },
+ { id: 3, name: '吊装作业' },
+ { id: 4, name: '动土作业' },
+ { id: 5, name: '断路作业' },
+ { id: 6, name: '高处作业' },
+ { id: 7, name: '临时用电作业' },
+ { id: 8, name: '盲板抽堵作业' }
+ ],
+ alertTypeList: [
+ { id: 1, name: '气体分析' },
+ { id: 2, name: '作业检查' }
+ ]
+ });
+
+ // 页面载入时执行方法
+ onMounted(() => {
+ // getListByPage();
+ // getAllDepartment();
+ });
+
+ // 分页获取班组管理列表
+ const getListByPage = async () => {
+ const data = { pageSize: state.pageSize, pageIndex: state.pageIndex, searchParams: { groupName: state.searchWord, containGroupMemberEnable: true } };
+ let res = await teamManageApi().getRecordPage(data);
+ if (res.data.code === '200') {
+ state.tableData = res.data.data.map((item) => {
+ if (!item.groupMembers || item.groupMembers == null) {
+ item.groupMembers = [];
+ } else {
+ item.groupMembers = Array.from(item.groupMembers, ({ username }) => username);
+ }
+ return item;
+ });
+ state.totalSize = res.data.total;
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ };
+
+ // 获取部门列表
+ const getAllDepartment = async () => {
+ let res = await teamManageApi().getAllDepartment();
+ if (res.data.code === '200') {
+ state.departmentList = res.data.data;
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ };
+
+ const handleChange = async (value) => {
+ state.addRecord.depId = value;
+ console.log(state.addRecord.department, 'de');
+ let res = await teamManageApi().getAllMember(value);
+ if (res.data.code === '200') {
+ state.workerList = res.data.data;
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ };
+
+ // 关键词查询记录
+ const searchRecord = async () => {
+ if (state.searchWord == '') {
+ ElMessage({
+ type: 'warning',
+ message: '请输入查询关键词'
+ });
+ } else {
+ getListByPage();
+ }
+ };
+
+ const clearSearch = async () => {
+ state.searchWord = '';
+ getListByPage();
+ };
+
+ const handleSizeChange = (val: number) => {
+ state.pageSize = val;
+ getListByPage();
+ };
+
+ const handleCurrentChange = (val: number) => {
+ state.pageIndex = val;
+ getListByPage();
+ };
+
+ // 查看记录
+ const viewRecord = (row) => {
+ state.details = JSON.parse(JSON.stringify(row));
+ state.dialogDetails = true;
+ };
+
+ // 刷新
+ const reLoadData = async () => {
+ getListByPage();
+ };
+
+ // 折线图
+ const renderMenu = async (value: string) => {
+ Session.set('projectId', value);
+ userInfos.value.projectId = value;
+ await initBackEndControlRoutes();
+ };
+
+ return {
+ View,
+ Edit,
+ Delete,
+ Refresh,
+ Plus,
+ handleChange,
+ searchRecord,
+ clearSearch,
+ viewRecord,
+ getListByPage,
+ reLoadData,
+ handleSizeChange,
+ handleCurrentChange,
+ ...toRefs(state)
+ };
+ }
+ };
+</script>
+
+<style scoped lang="scss">
+ $homeNavLengh: 8;
+ .home-container {
+ height: calc(100vh - 144px);
+ box-sizing: border-box;
+ overflow: hidden;
+ .homeCard {
+ width: 100%;
+ padding: 20px;
+ box-sizing: border-box;
+ background: #fff;
+ border-radius: 4px;
+
+ .main-card {
+ width: 100%;
+ height: 100%;
+ .cardTop {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 20px;
+ .mainCardBtn {
+ margin: 0;
+ }
+ }
+ .pageBtn {
+ height: 60px;
+ display: flex;
+ align-items: center;
+ justify-content: right;
+
+ .demo-pagination-block + .demo-pagination-block {
+ margin-top: 10px;
+ }
+ .demo-pagination-block .demonstration {
+ margin-bottom: 16px;
+ }
+ }
+ }
+ &:last-of-type {
+ height: calc(100% - 100px);
+ }
+ }
+ .el-row {
+ display: flex;
+ align-items: center;
+ margin-bottom: 20px;
+ &:last-child {
+ margin-bottom: 0;
+ }
+ .grid-content {
+ align-items: center;
+ min-height: 36px;
+ }
+
+ .topInfo {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ font-size: 16px;
+ font-weight: bold;
+
+ & > div {
+ white-space: nowrap;
+ margin-right: 20px;
+ }
+ }
+ }
+ }
+ .el-input{
+ width: 100% !important;
+ }
+ .el-date-editor::v-deep{
+ width: 100%;
+ }
+ .el-select{
+ width: 100%;
+ }
+</style>
diff --git a/src/views/specialWorkSystem/workProcess/gasCheck/index.vue b/src/views/specialWorkSystem/workProcess/gasCheck/index.vue
new file mode 100644
index 0000000..7e4c300
--- /dev/null
+++ b/src/views/specialWorkSystem/workProcess/gasCheck/index.vue
@@ -0,0 +1,540 @@
+<template>
+ <div class="home-container">
+ <div style="height: 100%">
+ <el-row class="homeCard">
+ <el-col :span="6" style="display:flex;align-items: center">
+ <span style="white-space: nowrap">作业证编号：</span>
+ <div class="grid-content topInfo">
+ <el-input v-model="searchWord"></el-input>
+ </div>
+ </el-col>
+ <el-col :span="6" style="display:flex;align-items: center">
+ <span style="white-space: nowrap">作业类型：</span>
+ <div class="grid-content topInfo">
+ <el-select v-model="searchType" placeholder="请选择作业类型">
+ <el-option
+ v-for="item in workType"
+ :key="item.id"
+ :label="item.name"
+ :value="item.id"
+ />
+ </el-select>
+ </div>
+ </el-col>
+ <el-button type="primary" @click="searchRecord">查询</el-button>
+ <el-button plain @click="clearSearch">重置</el-button>
+ </el-row>
+ <div class="homeCard">
+ <div class="main-card">
+ <el-row class="cardTop">
+ <el-col :span="12" class="mainCardBtn">
+ <el-button type="primary" :icon="Plus" size="default" @click="dialogAddRecord = true">新建</el-button>
+ </el-col>
+ <el-button type="primary" :icon="Refresh" size="default"/>
+ </el-row>
+ <el-table
+ ref="multipleTableRef"
+ :data="tableData"
+ style="width: 100%"
+ height="calc(100% - 100px)"
+ :header-cell-style="{background: '#fafafa'}"
+ >
+ <el-table-column type="index" label="序号" width="200"/>
+ <el-table-column property="id" label="作业证编号" width="200"/>
+ <el-table-column property="workType" label="作业类型" width="200"/>
+ <el-table-column property="combustible" label="可燃气%"/>
+ <el-table-column property="oxygen" label="氧气%"/>
+ <el-table-column property="co" label="一氧化碳ppm"/>
+ <el-table-column property="hs" label="硫化氢ppm"/>
+ <el-table-column property="desc" label="描述" width="200"/>
+ <el-table-column property="name" label="分析人"/>
+ <el-table-column property="updateTime" label="分析时间"/>
+ <el-table-column fixed="right" label="操作" align="center" width="250">
+ <template #default="scope">
+ <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ <div class="pageBtn">
+ <el-pagination
+ v-model:currentPage="currentPage"
+ v-model:page-size="pageSize"
+ :page-sizes="[10, 15]"
+ small=false
+ background
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="100"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ />
+ </div>
+ </div>
+ </div>
+ </div>
+ <el-dialog v-model="dialogDetails" title="检测记录">
+ <el-form :model="details" label-width="120px">
+ <el-form-item label="作业证编号">
+ <el-input v-model="details.id" readonly/>
+ </el-form-item>
+ <el-form-item label="作业类型">
+ <el-input v-model="details.workType" readonly/>
+ </el-form-item>
+ <el-form-item label="可燃气%">
+ <el-input v-model="details.combustible" readonly/>
+ </el-form-item>
+ <el-form-item label="氧气%">
+ <el-input v-model="details.oxygen" readonly/>
+ </el-form-item>
+ <el-form-item label="一氧化碳ppm">
+ <el-input v-model="details.co" readonly/>
+ </el-form-item>
+ <el-form-item label="硫化氢ppm">
+ <el-input v-model="details.hs" readonly/>
+ </el-form-item>
+ <el-form-item label="描述">
+ <el-input v-model="details.desc" type="textarea" readonly/>
+ </el-form-item>
+ <el-form-item label="分析人">
+ <el-input v-model="details.name" readonly/>
+ </el-form-item>
+ <el-form-item label="分析时间">
+ <el-input v-model="details.updateTime" readonly/>
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button>
+ </el-form-item>
+ </el-form>
+ </el-dialog>
+ <el-dialog v-model="dialogAddRecord" title="新建" @close="closeAdd" @open="openAdd">
+ <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules">
+ <el-form-item label="作业证编号" prop="id">
+ <el-input v-model="addRecord.id"> </el-input>
+ </el-form-item>
+ <el-form-item label="作业类型" prop="groupMembers">
+ <el-select v-model="addRecord.groupMembers">
+ <el-option
+ v-for="item in workType"
+ :key="item.id"
+ :label="item.name"
+ :value="item.id"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="可燃气%" prop="combustible">
+ <el-input v-model="addRecord.combustible"/>
+ </el-form-item>
+ <el-form-item label="氧气" prop="oxygen">
+ <el-input v-model="addRecord.oxygen"/>
+ </el-form-item>
+ <el-form-item label="一氧化碳ppm" prop="combustible">
+ <el-input v-model="addRecord.co"/>
+ </el-form-item>
+ <el-form-item label="硫化氢ppm" prop="oxygen">
+ <el-input v-model="addRecord.hs"/>
+ </el-form-item>
+ <el-form-item label="描述" prop="desc">
+ <el-input v-model="addRecord.desc" type="textarea"> </el-input>
+ </el-form-item>
+ <el-form-item>
+ <el-button type="warning" @click="dialogAddRecord = false" size="default" plain>取消</el-button>
+ <el-button type="primary" @click="confirmAddRecord(addRef)" size="default">确认</el-button>
+ </el-form-item>
+ </el-form>
+ </el-dialog>
+ </div>
+</template>
+
+<script lang="ts">
+ import { toRefs, reactive, ref, onMounted } from 'vue';
+ import { storeToRefs } from 'pinia';
+ import { initBackEndControlRoutes } from '/@/router/backEnd';
+ import { useUserInfo } from '/@/stores/userInfo';
+ import { Session } from '/@/utils/storage';
+ import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue';
+ import { ElTable } from 'element-plus';
+ import { FormInstance, FormRules, ElMessage } from 'element-plus';
+ import { teamManageApi } from '/@/api/systemManage/basicDateManage/personShiftManage/teamManage';
+
+ // 定义接口来定义对象的类型
+ interface stateType {
+ tableData: Array<any>;
+ departmentList: Array<any>;
+ department:string;
+ workerList: Array<string>;
+ casProps: {};
+ multipleSelection: Array<any>;
+ deleteArr: Array<any>;
+ dialogDetails: boolean;
+ dialogAddRecord: boolean;
+ deleteDialog: boolean;
+ deleteSetDialog: boolean;
+ pageIndex: number;
+ pageSize: number;
+ chosenIndex: null | number;
+ deleteId: null | number;
+ searchWord: string;
+ searchType: number | null;
+ totalSize: number;
+ addRecord: {
+
+ };
+ details: {
+
+ };
+ workType: Array<any>
+ }
+
+ export default {
+ name: 'gasCheck',
+ components: {},
+ setup() {
+ const userInfo = useUserInfo();
+ const { userInfos } = storeToRefs(userInfo);
+
+ const state = reactive<stateType>({
+ pageIndex: 1,
+ pageSize: 10,
+ totalSize: 0,
+ chosenIndex: null,
+ searchWord: '',
+ searchType: null,
+ tableData: [
+ {
+ id: 'GTXH-0000001',
+ workType: '动火作业',
+ combustible: 5,
+ oxygen: 20,
+ co: 0,
+ hs: 0,
+ desc: 'A车间动火作业过程气体检测异常',
+ name: '李羽飞',
+ updateTime: '2022-08-32 12:00:00'
+ },
+ {
+ id: 'GTXH-0000002',
+ workType: '动火作业',
+ combustible: 0,
+ oxygen: 20.8,
+ co: 0,
+ hs: 0,
+ desc: 'B车间动火作业过程气体检查',
+ name: '李羽飞',
+ updateTime: '2022-08-32 16:31:44'
+ },
+ {
+ id: 'GTXH-0000003',
+ workType: '动火作业',
+ combustible: 0,
+ oxygen: 21,
+ co: 0,
+ hs: 0,
+ desc: 'C车间动火作业过程气体检测异常',
+ name: '李羽飞',
+ updateTime: '2022-08-32 17:05:20'
+ }
+ ],
+ departmentList: [],
+ department: '',
+ workerList: [],
+ casProps: {
+ expandTrigger: 'hover',
+ emitPath: false,
+ value: 'depId',
+ label: 'depName'
+ },
+ multipleSelection: [],
+ dialogDetails: false,
+ dialogAddRecord: false,
+ deleteDialog: false,
+ deleteSetDialog: false,
+ addRecord: {
+
+ },
+ details: {
+
+ },
+ deleteId: null,
+ deleteArr: [],
+ workType: [
+ { id: 1, name: '动火作业' },
+ { id: 2, name: '受限空间作业' },
+ { id: 3, name: '吊装作业' },
+ { id: 4, name: '动土作业' },
+ { id: 5, name: '断路作业' },
+ { id: 6, name: '高处作业' },
+ { id: 7, name: '临时用电作业' },
+ { id: 8, name: '盲板抽堵作业' }
+ ]
+ });
+
+ const addRef = ref<FormInstance>();
+ const addRules = reactive<FormRules>({
+ id: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
+ workType: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
+ combustible: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
+ oxygen: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
+ co: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
+ hs: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
+ desc: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
+ name: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
+ updateTime: [{ required: true, message: '该内容不能为空', trigger: 'blur' }]
+ });
+
+ // 页面载入时执行方法
+ onMounted(() => {
+ // getListByPage();
+ // getAllDepartment();
+ });
+
+ // 分页获取班组管理列表
+ const getListByPage = async () => {
+ const data = { pageSize: state.pageSize, pageIndex: state.pageIndex, searchParams: { groupName: state.searchWord, containGroupMemberEnable: true } };
+ let res = await teamManageApi().getRecordPage(data);
+ if (res.data.code === '200') {
+ state.tableData = res.data.data.map((item) => {
+ if (!item.groupMembers || item.groupMembers == null) {
+ item.groupMembers = [];
+ } else {
+ item.groupMembers = Array.from(item.groupMembers, ({ username }) => username);
+ }
+ return item;
+ });
+ state.totalSize = res.data.total;
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ };
+
+ // 获取部门列表
+ const getAllDepartment = async () => {
+ let res = await teamManageApi().getAllDepartment();
+ if (res.data.code === '200') {
+ state.departmentList = res.data.data;
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ };
+
+ const handleChange = async (value) => {
+ state.addRecord.depId = value;
+ console.log(state.addRecord.department, 'de');
+ let res = await teamManageApi().getAllMember(value);
+ if (res.data.code === '200') {
+ state.workerList = res.data.data;
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ };
+
+ // 关键词查询记录
+ const searchRecord = async () => {
+ if (state.searchWord == '') {
+ ElMessage({
+ type: 'warning',
+ message: '请输入查询关键词'
+ });
+ } else {
+ getListByPage();
+ }
+ };
+
+ const clearSearch = async () => {
+ state.searchWord = '';
+ getListByPage();
+ };
+
+ // 添加班组管理方法
+ const addRecord = async (data: any) => {
+ let res = await teamManageApi().addRecord(data);
+ if (res.data.code === '200') {
+ ElMessage({
+ type: 'success',
+ message: res.data.msg
+ });
+ getListByPage();
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ };
+
+ // 新增修改记录
+ const confirmAddRecord = async (formEl: FormInstance | undefined) => {
+ if (!formEl) return;
+ await formEl.validate(async (valid, fields) => {
+ if (valid) {
+ const data = {
+ groupName: state.addRecord.groupName,
+ groupInfo: state.addRecord.groupInfo,
+ depId: state.addRecord.depId,
+ groupMemberIds: state.addRecord.groupMembers
+ };
+ if (state.chosenIndex == null) {
+ await addRecord(data);
+ } else {
+ data.groupId = JSON.stringify(state.addRecord.groupId);
+ await editRecord(data);
+ }
+ state.dialogAddRecord = false;
+ } else {
+ console.log('error submit!', fields);
+ }
+ });
+ };
+
+ const handleSizeChange = (val: number) => {
+ state.pageSize = val;
+ getListByPage();
+ };
+ const handleCurrentChange = (val: number) => {
+ state.pageIndex = val;
+ getListByPage();
+ };
+
+ // 查看记录
+ const viewRecord = (row) => {
+ state.details = JSON.parse(JSON.stringify(row));
+ state.dialogDetails = true;
+ };
+
+ // 刷新
+ const reLoadData = async () => {
+ getListByPage();
+ };
+
+ const closeAdd = () => {
+ state.addRecord = {};
+ state.chosenIndex = null;
+ };
+
+ const openAdd = () => {
+ if (state.chosenIndex == null) {
+ state.addRecord.info = '';
+ }
+ };
+ const indexClear = () => {
+ state.deleteId = null;
+ };
+
+ // 折线图
+ const renderMenu = async (value: string) => {
+ Session.set('projectId', value);
+ userInfos.value.projectId = value;
+ await initBackEndControlRoutes();
+ };
+ return {
+ addRef,
+ addRules,
+ View,
+ Edit,
+ Delete,
+ Refresh,
+ Plus,
+ handleChange,
+ searchRecord,
+ clearSearch,
+ viewRecord,
+ getListByPage,
+ reLoadData,
+ handleSizeChange,
+ handleCurrentChange,
+ confirmAddRecord,
+ closeAdd,
+ openAdd,
+ indexClear,
+ ...toRefs(state)
+ };
+ }
+ };
+</script>
+
+<style scoped lang="scss">
+ $homeNavLengh: 8;
+ .home-container {
+ height: calc(100vh - 144px);
+ box-sizing: border-box;
+ overflow: hidden;
+ .homeCard {
+ width: 100%;
+ padding: 20px;
+ box-sizing: border-box;
+ background: #fff;
+ border-radius: 4px;
+
+ .main-card {
+ width: 100%;
+ height: 100%;
+ .cardTop {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 20px;
+ .mainCardBtn {
+ margin: 0;
+ }
+ }
+ .pageBtn {
+ height: 60px;
+ display: flex;
+ align-items: center;
+ justify-content: right;
+
+ .demo-pagination-block + .demo-pagination-block {
+ margin-top: 10px;
+ }
+ .demo-pagination-block .demonstration {
+ margin-bottom: 16px;
+ }
+ }
+ }
+ &:last-of-type {
+ height: calc(100% - 100px);
+ }
+ }
+ .el-row {
+ display: flex;
+ align-items: center;
+ margin-bottom: 20px;
+ &:last-child {
+ margin-bottom: 0;
+ }
+ .grid-content {
+ align-items: center;
+ min-height: 36px;
+ }
+
+ .topInfo {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ font-size: 16px;
+ font-weight: bold;
+
+ & > div {
+ white-space: nowrap;
+ margin-right: 20px;
+ }
+ }
+ }
+ }
+ .el-input{
+ width: 100% !important;
+ }
+ .el-date-editor::v-deep{
+ width: 100%;
+ }
+ .el-select{
+ width: 100%;
+ }
+</style>
diff --git a/src/views/specialWorkSystem/workProcess/workCheck/index.vue b/src/views/specialWorkSystem/workProcess/workCheck/index.vue
new file mode 100644
index 0000000..fefb99f
--- /dev/null
+++ b/src/views/specialWorkSystem/workProcess/workCheck/index.vue
@@ -0,0 +1,521 @@
+<template>
+ <div class="home-container">
+ <div style="height: 100%">
+ <el-row class="homeCard">
+ <el-col :span="6" style="display:flex;align-items: center">
+ <span style="white-space: nowrap">作业证编号：</span>
+ <div class="grid-content topInfo">
+ <el-input v-model="searchWord"></el-input>
+ </div>
+ </el-col>
+ <el-col :span="6" style="display:flex;align-items: center">
+ <span style="white-space: nowrap">作业类型：</span>
+ <div class="grid-content topInfo">
+ <el-select v-model="searchType" placeholder="请选择作业类型">
+ <el-option
+ v-for="item in workTypeList"
+ :key="item.id"
+ :label="item.name"
+ :value="item.id"
+ />
+ </el-select>
+ </div>
+ </el-col>
+ <el-button type="primary" @click="searchRecord">查询</el-button>
+ <el-button plain @click="clearSearch">重置</el-button>
+ </el-row>
+ <div class="homeCard">
+ <div class="main-card">
+ <el-row class="cardTop">
+ <el-col :span="12" class="mainCardBtn">
+ <el-button type="primary" :icon="Plus" size="default" @click="dialogAddRecord = true">新建</el-button>
+ </el-col>
+ <el-button type="primary" :icon="Refresh" size="default"/>
+ </el-row>
+ <el-table
+ ref="multipleTableRef"
+ :data="tableData"
+ style="width: 100%"
+ height="calc(100% - 100px)"
+ :header-cell-style="{background: '#fafafa'}"
+ >
+ <el-table-column type="index" label="序号" width="200"/>
+ <el-table-column property="id" label="作业证编号" width="200"/>
+ <el-table-column property="workType" label="作业类型" width="200"/>
+ <el-table-column property="checkInfo" label="检查内容"/>
+ <el-table-column property="result" label="检查结果"/>
+ <el-table-column property="desc" label="描述" width="200"/>
+ <el-table-column property="name" label="分析人"/>
+ <el-table-column property="updateTime" label="分析时间"/>
+ <el-table-column fixed="right" label="操作" align="center" width="250">
+ <template #default="scope">
+ <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ <div class="pageBtn">
+ <el-pagination
+ v-model:currentPage="currentPage"
+ v-model:page-size="pageSize"
+ :page-sizes="[10, 15]"
+ small=false
+ background
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="100"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ />
+ </div>
+ </div>
+ </div>
+ </div>
+ <el-dialog v-model="dialogDetails" title="检查记录">
+ <el-form :model="details" label-width="120px">
+ <el-form-item label="作业证编号">
+ <el-input v-model="details.id" readonly/>
+ </el-form-item>
+ <el-form-item label="作业类型">
+ <el-input v-model="details.workType" readonly/>
+ </el-form-item>
+ <el-form-item label="检查内容">
+ <el-input v-model="details.checkInfo" readonly/>
+ </el-form-item>
+ <el-form-item label="检查结果">
+ <el-input v-model="details.result" readonly/>
+ </el-form-item>
+ <el-form-item label="描述">
+ <el-input v-model="details.desc" type="textarea" readonly/>
+ </el-form-item>
+ <el-form-item label="分析人">
+ <el-input v-model="details.name" readonly/>
+ </el-form-item>
+ <el-form-item label="分析时间">
+ <el-input v-model="details.updateTime" readonly/>
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button>
+ </el-form-item>
+ </el-form>
+ </el-dialog>
+ <el-dialog v-model="dialogAddRecord" title="新建" @close="closeAdd" @open="openAdd">
+ <el-form :model="addRecord" label-width="120px" ref="addRef" :rules="addRules">
+ <el-form-item label="作业证编号" prop="id">
+ <el-input v-model="addRecord.id"> </el-input>
+ </el-form-item>
+ <el-form-item label="作业类型" prop="workType">
+ <el-select v-model="addRecord.workType">
+ <el-option
+ v-for="item in workTypeList"
+ :key="item.id"
+ :label="item.name"
+ :value="item.id"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="检查内容" prop="checkInfo">
+ <el-input v-model="addRecord.checkInfo"> </el-input>
+ </el-form-item>
+ <el-form-item label="检查结果" prop="result">
+ <el-select v-model="addRecord.result">
+ <el-option label="正常" value="0"/>
+ <el-option label="异常" value="1"/>
+ </el-select>
+ </el-form-item>
+ <el-form-item label="描述" prop="desc">
+ <el-input v-model="addRecord.desc" type="textarea"> </el-input>
+ </el-form-item>
+ <el-form-item>
+ <el-button type="warning" @click="dialogAddRecord = false" size="default" plain>取消</el-button>
+ <el-button type="primary" @click="confirmAddRecord(addRef)" size="default">确认</el-button>
+ </el-form-item>
+ </el-form>
+ </el-dialog>
+ </div>
+</template>
+
+<script lang="ts">
+ import { toRefs, reactive, ref, onMounted } from 'vue';
+ import { storeToRefs } from 'pinia';
+ import { initBackEndControlRoutes } from '/@/router/backEnd';
+ import { useUserInfo } from '/@/stores/userInfo';
+ import { Session } from '/@/utils/storage';
+ import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue';
+ import { ElTable } from 'element-plus';
+ import { FormInstance, FormRules, ElMessage } from 'element-plus';
+ import { teamManageApi } from '/@/api/systemManage/basicDateManage/personShiftManage/teamManage';
+
+ // 定义接口来定义对象的类型
+ interface stateType {
+ tableData: Array<any>;
+ departmentList: Array<any>;
+ department:string;
+ workerList: Array<string>;
+ casProps: {};
+ multipleSelection: Array<any>;
+ deleteArr: Array<any>;
+ dialogDetails: boolean;
+ dialogAddRecord: boolean;
+ deleteDialog: boolean;
+ deleteSetDialog: boolean;
+ pageIndex: number;
+ pageSize: number;
+ chosenIndex: null | number;
+ deleteId: null | number;
+ searchWord: string;
+ searchType: number | null
+ totalSize: number;
+ addRecord: {
+
+ };
+ details: {
+
+ };
+ workTypeList: Array<any>
+ }
+
+ export default {
+ name: 'workCheck',
+ components: {},
+ setup() {
+ const userInfo = useUserInfo();
+ const { userInfos } = storeToRefs(userInfo);
+
+ const state = reactive<stateType>({
+ pageIndex: 1,
+ pageSize: 10,
+ totalSize: 0,
+ chosenIndex: null,
+ searchWord: '',
+ searchType: null,
+ tableData: [
+ {
+ id: 'GTXH-0000001',
+ workType: '动火作业',
+ checkInfo: '动火作业检查',
+ result: '正常',
+ desc: 'A车间动火作业过程检查',
+ name: '李羽飞',
+ updateTime: '2022-08-31 12:00:00'
+ },
+ {
+ id: 'GTXH-0000002',
+ workType: '动火作业',
+ checkInfo: '动火作业检查',
+ result: '正常',
+ desc: 'B车间动火作业过程气体检查',
+ name: '李羽飞',
+ updateTime: '2022-08-31 16:31:44'
+ },
+ {
+ id: 'GTXH-0000003',
+ workType: '动火作业',
+ checkInfo: '动火作业检查',
+ result: '异常',
+ desc: '',
+ name: '李羽飞',
+ updateTime: '2022-08-31 17:05:20'
+ }
+ ],
+ departmentList: [],
+ department: '',
+ workerList: [],
+ casProps: {
+ expandTrigger: 'hover',
+ emitPath: false,
+ value: 'depId',
+ label: 'depName'
+ },
+ multipleSelection: [],
+ dialogDetails: false,
+ dialogAddRecord: false,
+ deleteDialog: false,
+ deleteSetDialog: false,
+ addRecord: {
+
+ },
+ details: {
+
+ },
+ deleteId: null,
+ deleteArr: [],
+ workTypeList: [
+ { id: 1, name: '动火作业' },
+ { id: 2, name: '受限空间作业' },
+ { id: 3, name: '吊装作业' },
+ { id: 4, name: '动土作业' },
+ { id: 5, name: '断路作业' },
+ { id: 6, name: '高处作业' },
+ { id: 7, name: '临时用电作业' },
+ { id: 8, name: '盲板抽堵作业' }
+ ]
+ });
+
+ const addRef = ref<FormInstance>();
+ const addRules = reactive<FormRules>({
+ id: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
+ workType: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
+ checkInfo: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
+ result: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
+ desc: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
+ name: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
+ updateTime: [{ required: true, message: '该内容不能为空', trigger: 'blur' }]
+ });
+
+ // 页面载入时执行方法
+ onMounted(() => {
+ // getListByPage();
+ // getAllDepartment();
+ });
+
+ // 分页获取班组管理列表
+ const getListByPage = async () => {
+ const data = { pageSize: state.pageSize, pageIndex: state.pageIndex, searchParams: { groupName: state.searchWord, containGroupMemberEnable: true } };
+ let res = await teamManageApi().getRecordPage(data);
+ if (res.data.code === '200') {
+ state.tableData = res.data.data.map((item) => {
+ if (!item.groupMembers || item.groupMembers == null) {
+ item.groupMembers = [];
+ } else {
+ item.groupMembers = Array.from(item.groupMembers, ({ username }) => username);
+ }
+ return item;
+ });
+ state.totalSize = res.data.total;
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ };
+
+ // 获取部门列表
+ const getAllDepartment = async () => {
+ let res = await teamManageApi().getAllDepartment();
+ if (res.data.code === '200') {
+ state.departmentList = res.data.data;
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ };
+
+ const handleChange = async (value) => {
+ state.addRecord.depId = value;
+ console.log(state.addRecord.department, 'de');
+ let res = await teamManageApi().getAllMember(value);
+ if (res.data.code === '200') {
+ state.workerList = res.data.data;
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ };
+
+ // 关键词查询记录
+ const searchRecord = async () => {
+ if (state.searchWord == '') {
+ ElMessage({
+ type: 'warning',
+ message: '请输入查询关键词'
+ });
+ } else {
+ getListByPage();
+ }
+ };
+
+ const clearSearch = async () => {
+ state.searchWord = '';
+ getListByPage();
+ };
+
+ // 添加班组管理方法
+ const addRecord = async (data: any) => {
+ let res = await teamManageApi().addRecord(data);
+ if (res.data.code === '200') {
+ ElMessage({
+ type: 'success',
+ message: res.data.msg
+ });
+ getListByPage();
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ };
+
+ // 新增修改记录
+ const confirmAddRecord = async (formEl: FormInstance | undefined) => {
+ if (!formEl) return;
+ await formEl.validate(async (valid, fields) => {
+ if (valid) {
+ const data = {
+ groupName: state.addRecord.groupName,
+ groupInfo: state.addRecord.groupInfo,
+ depId: state.addRecord.depId,
+ groupMemberIds: state.addRecord.groupMembers
+ };
+ if (state.chosenIndex == null) {
+ await addRecord(data);
+ } else {
+ data.groupId = JSON.stringify(state.addRecord.groupId);
+ await editRecord(data);
+ }
+ state.dialogAddRecord = false;
+ } else {
+ console.log('error submit!', fields);
+ }
+ });
+ };
+
+ const handleSizeChange = (val: number) => {
+ state.pageSize = val;
+ getListByPage();
+ };
+ const handleCurrentChange = (val: number) => {
+ state.pageIndex = val;
+ getListByPage();
+ };
+
+ // 查看记录
+ const viewRecord = (row) => {
+ state.details = JSON.parse(JSON.stringify(row));
+ state.dialogDetails = true;
+ };
+
+ // 刷新
+ const reLoadData = async () => {
+ getListByPage();
+ };
+
+ const closeAdd = () => {
+ state.addRecord = {};
+ state.chosenIndex = null;
+ };
+
+ const openAdd = () => {
+ if (state.chosenIndex == null) {
+ state.addRecord.info = '';
+ }
+ };
+ const indexClear = () => {
+ state.deleteId = null;
+ };
+
+ // 折线图
+ const renderMenu = async (value: string) => {
+ Session.set('projectId', value);
+ userInfos.value.projectId = value;
+ await initBackEndControlRoutes();
+ };
+ return {
+ addRef,
+ addRules,
+ View,
+ Edit,
+ Delete,
+ Refresh,
+ Plus,
+ handleChange,
+ searchRecord,
+ clearSearch,
+ viewRecord,
+ getListByPage,
+ reLoadData,
+ handleSizeChange,
+ handleCurrentChange,
+ confirmAddRecord,
+ closeAdd,
+ openAdd,
+ indexClear,
+ ...toRefs(state)
+ };
+ }
+ };
+</script>
+
+<style scoped lang="scss">
+ $homeNavLengh: 8;
+ .home-container {
+ height: calc(100vh - 144px);
+ box-sizing: border-box;
+ overflow: hidden;
+ .homeCard {
+ width: 100%;
+ padding: 20px;
+ box-sizing: border-box;
+ background: #fff;
+ border-radius: 4px;
+
+ .main-card {
+ width: 100%;
+ height: 100%;
+ .cardTop {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 20px;
+ .mainCardBtn {
+ margin: 0;
+ }
+ }
+ .pageBtn {
+ height: 60px;
+ display: flex;
+ align-items: center;
+ justify-content: right;
+
+ .demo-pagination-block + .demo-pagination-block {
+ margin-top: 10px;
+ }
+ .demo-pagination-block .demonstration {
+ margin-bottom: 16px;
+ }
+ }
+ }
+ &:last-of-type {
+ height: calc(100% - 100px);
+ }
+ }
+ .el-row {
+ display: flex;
+ align-items: center;
+ margin-bottom: 20px;
+ &:last-child {
+ margin-bottom: 0;
+ }
+ .grid-content {
+ align-items: center;
+ min-height: 36px;
+ }
+
+ .topInfo {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ font-size: 16px;
+ font-weight: bold;
+
+ & > div {
+ white-space: nowrap;
+ margin-right: 20px;
+ }
+ }
+ }
+ }
+ .el-input{
+ width: 100% !important;
+ }
+ .el-date-editor::v-deep{
+ width: 100%;
+ }
+ .el-select{
+ width: 100%;
+ }
+</style>
diff --git a/src/views/specialWorkSystem/workProcessManage/gasCheckAnalyze/index.vue b/src/views/specialWorkSystem/workProcessManage/gasCheckAnalyze/index.vue
deleted file mode 100644
index 14b6c74..0000000
--- a/src/views/specialWorkSystem/workProcessManage/gasCheckAnalyze/index.vue
+++ /dev/null
@@ -1,260 +0,0 @@
-<template>
- <div class="home-container">
- <div height="100%">
- <el-row class="homeCard">
- <el-col :span="8">
- <div class="grid-content topInfo">
- <el-input v-model="searchWord" placeholder="作业证编号"></el-input>
- <el-button type="primary">查询</el-button>
- <el-button plain>重置</el-button>
- </div>
- </el-col>
- </el-row>
- <div class="homeCard">
- <div class="main-card">
- <el-row class="cardTop">
- <el-col :span="12" class="mainCardBtn">
- <el-button type="primary" :icon="Plus" size="default">新建</el-button>
- <el-button type="danger" :icon="Delete" size="default" plain>删除</el-button>
- </el-col>
- <el-button type="primary" :icon="Refresh" size="default"/>
- </el-row>
- <el-table
- ref="multipleTableRef"
- :data="tableData"
- style="width: 100%"
- :header-cell-style="{background: '#fafafa'}"
- @selection-change="handleSelectionChange"
- >
- <el-table-column type="selection" width="55" />
- <el-table-column property="id" label="作业证编号" width="200" sortable/>
- <el-table-column property="date" label="日期" width="180" sortable/>
- <el-table-column property="combustible" label="可燃气%" sortable/>
- <el-table-column property="oxygen" label="氧气%" sortable/>
- <el-table-column property="co" label="一氧化碳ppm" sortable/>
- <el-table-column property="hs" label="硫化氢ppm" sortable/>
- <el-table-column property="updateTime" label="更新时间" sortable/>
- </el-table>
- </div>
- <div class="pageBtn">
- <el-pagination
- v-model:currentPage="currentPage"
- v-model:page-size="pageSize"
- :page-sizes="[10, 15]"
- small=false
- background
- layout="total, sizes, prev, pager, next, jumper"
- :total="100"
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- />
- </div>
- </div>
- <el-dialog v-model="dialogDetails" title="签到记录" @close="dialogColse">
- <el-form :model="details" label-width="120px">
- <el-form-item label="作业证编号">
- <el-input v-model="details.id" readonly/>
- </el-form-item>
- <el-form-item label="签到人">
- <el-input
- v-model="details.worker"
- class="input-with-select"
- readonly
- >
- <template #append>
- <el-button :icon="Search" />
- </template>
- </el-input>
- </el-form-item>
-<!-- <el-form-item label="签到状态">-->
-<!-- <el-select v-model="details.status" readonly>-->
-<!-- <el-option label="已签到" value="已签到" />-->
-<!-- <el-option label="未签到" value="未签到" />-->
-<!-- </el-select>-->
-<!-- </el-form-item>-->
- <el-form-item label="签到时间">
- <el-input v-model="details.checkinTime" readonly/>
- </el-form-item>
- <el-form-item label="备注">
- <el-input v-model="details.remark" type="textarea" readonly/>
- </el-form-item>
- <el-form-item>
- <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button>
- </el-form-item>
- </el-form>
- </el-dialog>
- </div>
- </div>
-</template>
-
-<script lang="ts">
- import { toRefs, reactive, defineComponent, ref } from 'vue';
- import { storeToRefs } from 'pinia';
- import { initBackEndControlRoutes } from '/@/router/backEnd';
- import {useUserInfo} from "/@/stores/userInfo";
- import { Session } from '/@/utils/storage';
- import { Plus, Edit, Delete, Refresh, Search } from '@element-plus/icons-vue'
- import { ElTable } from 'element-plus'
- let global: any = {
- homeChartOne: null,
- homeChartTwo: null,
- homeCharThree: null,
- dispose: [null, '', undefined],
- };
-
- interface stateType {
- homeOne: Array <type>
- }
- interface type {
-
- }
- interface User {
- date: string
- name: string
- address: string
- }
- export default defineComponent({
- name: 'gasCheckAnalyze',
- setup() {
- const userInfo = useUserInfo()
- const { userInfos } = storeToRefs(userInfo);
- const state = reactive<stateType>({});
- const multipleTableRef = ref<InstanceType<typeof ElTable>>()
- const multipleSelection = ref<User[]>([])
- const handleSelectionChange = (val: User[]) => {
- multipleSelection.value = val
- }
- const currentPage = ref(1)
- const pageSize = ref(10)
- const handleSizeChange = (val: number) => {
- console.log(`${val} items per page`)
- }
- const handleCurrentChange = (val: number) => {
- console.log(`current page: ${val}`)
- }
- const tableData: User[] = [
- {
- id: '11011',
- date: '2021-04-22 15:21:31',
- combustible: 0,
- oxygen: 21,
- co: 0,
- hs: 0,
- updateTime: '2021-04-22 15:21:31',
- },
- {
- id: '11011',
- date: '2021-04-22 15:21:31',
- combustible: 1,
- oxygen: 21,
- co: 0,
- hs: 0,
- updateTime: '2021-04-22 15:21:31',
- }
- ]
- const dialogDetails = ref(false)
- const details = ref({})
- const viewDetails = (row)=> {
- console.log(row,'row')
- details.value = JSON.parse(JSON.stringify(row))
- console.log(details,'details')
- dialogDetails.value = true
- }
- // 折线图
- const renderMenu = async (value: string) => {
- Session.set('projectId',value)
- userInfos.value.projectId = value
- await initBackEndControlRoutes();
- };
- return {
- renderMenu,
- multipleTableRef,
- tableData,
- currentPage,
- pageSize,
- dialogDetails,
- details,
- viewDetails,
- handleSizeChange,
- handleCurrentChange,
- Plus,
- Edit,
- Delete,
- Search,
- handleSelectionChange,
- Refresh,
- ...toRefs(state),
- };
- },
- });
-</script>
-
-<style scoped lang="scss">
- $homeNavLengh: 8;
- .home-container {
- height: 100%;
- overflow: hidden;
- padding: 20px;
- .homeCard{
- width: 100%;
- padding: 20px;
- background: #fff;
- border-radius: 4px;
- }
- .el-row{
- display: flex;
- align-items: center;
- margin-bottom: 20px;
- &:last-child {
- margin-bottom: 0;
- }
- .grid-content{
- align-items: center;
- min-height: 36px;
- }
-
- .topInfo {
- display: flex;
- align-items: center;
- font-size: 16px;
- font-weight: bold;
-
- &>div{
- white-space: nowrap;
- margin-right: 20px;
- }
- }
- }
- .mainPages{
- height: 100%;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- }
- .main-card{
- width: 100%;
- .cardTop{
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-bottom: 20px;
- .mainCardBtn{
- margin: 0;
- }
- }
- }
- .pageBtn{
- display: flex;
- align-items: center;
- justify-content: right;
- margin-top: 20px;
-
- .demo-pagination-block + .demo-pagination-block {
- margin-top: 10px;
- }
- .demo-pagination-block .demonstration {
- margin-bottom: 16px;
- }
- }
- }
-</style>
diff --git a/src/views/specialWorkSystem/workProcessManage/workCheckRecord/index.vue b/src/views/specialWorkSystem/workProcessManage/workCheckRecord/index.vue
deleted file mode 100644
index e3d3d50..0000000
--- a/src/views/specialWorkSystem/workProcessManage/workCheckRecord/index.vue
+++ /dev/null
@@ -1,255 +0,0 @@
-<template>
- <div class="home-container">
- <el-scrollbar height="100%">
- <el-row class="homeCard">
- <el-col :span="8">
- <div class="grid-content topInfo">
- <el-input v-model="searchWord" placeholder="作业证编号"></el-input>
- <el-button type="primary">查询</el-button>
- <el-button plain>重置</el-button>
- </div>
- </el-col>
- </el-row>
- <div class="homeCard">
- <div class="main-card">
- <el-row class="cardTop">
- <el-col :span="12" class="mainCardBtn">
- <el-button type="warning" :icon="Edit" size="default" plain>修改</el-button>
- <el-button type="danger" :icon="Delete" size="default" plain>删除</el-button>
- </el-col>
- <el-button type="primary" :icon="Refresh" size="default"/>
- </el-row>
- <el-table
- ref="multipleTableRef"
- :data="tableData"
- style="width: 100%"
- :header-cell-style="{background: '#fafafa'}"
- @selection-change="handleSelectionChange"
- >
- <el-table-column type="selection" width="55" />
- <el-table-column property="id" label="作业证编号" width="200" sortable/>
- <el-table-column property="worker" label="签到人" width="180" />
- <el-table-column property="checkinTime" label="签到时间" sortable/>
- <el-table-column property="remark" label="备注"/>
- <el-table-column fixed="right" label="操作" align="center" width="180">
- <template #default="scope">
- <el-button link type="primary" size="small" @click="viewDetails(scope.row)">查看</el-button>
- </template>
- </el-table-column>
- </el-table>
- </div>
- <div class="pageBtn">
- <el-pagination
- v-model:currentPage="currentPage"
- v-model:page-size="pageSize"
- :page-sizes="[10, 15]"
- small=false
- background
- layout="total, sizes, prev, pager, next, jumper"
- :total="100"
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- />
- </div>
- </div>
- <el-dialog v-model="dialogDetails" title="签到记录" @close="dialogColse">
- <el-form :model="details" label-width="120px">
- <el-form-item label="作业证编号">
- <el-input v-model="details.id" readonly/>
- </el-form-item>
- <el-form-item label="签到人">
- <el-input
- v-model="details.worker"
- class="input-with-select"
- readonly
- >
- <template #append>
- <el-button :icon="Search" />
- </template>
- </el-input>
- </el-form-item>
-<!-- <el-form-item label="签到状态">-->
-<!-- <el-select v-model="details.status" readonly>-->
-<!-- <el-option label="已签到" value="已签到" />-->
-<!-- <el-option label="未签到" value="未签到" />-->
-<!-- </el-select>-->
-<!-- </el-form-item>-->
- <el-form-item label="签到时间">
- <el-input v-model="details.checkinTime" readonly/>
- </el-form-item>
- <el-form-item label="备注">
- <el-input v-model="details.remark" type="textarea" readonly/>
- </el-form-item>
- <el-form-item>
- <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button>
- </el-form-item>
- </el-form>
- </el-dialog>
- </el-scrollbar>
- </div>
-</template>
-
-<script lang="ts">
- import { toRefs, reactive, defineComponent, ref } from 'vue';
- import { storeToRefs } from 'pinia';
- import { initBackEndControlRoutes } from '/@/router/backEnd';
- import {useUserInfo} from "/@/stores/userInfo";
- import { Session } from '/@/utils/storage';
- import { Edit, Delete, Refresh, Search } from '@element-plus/icons-vue'
- import { ElTable } from 'element-plus'
- let global: any = {
- homeChartOne: null,
- homeChartTwo: null,
- homeCharThree: null,
- dispose: [null, '', undefined],
- };
-
- interface stateType {
- homeOne: Array <type>
- }
- interface type {
-
- }
- interface User {
- date: string
- name: string
- address: string
- }
- export default defineComponent({
- name: 'workCheckinRecord',
- setup() {
- const userInfo = useUserInfo()
- const { userInfos } = storeToRefs(userInfo);
- const state = reactive<stateType>({});
- const multipleTableRef = ref<InstanceType<typeof ElTable>>()
- const multipleSelection = ref<User[]>([])
- const handleSelectionChange = (val: User[]) => {
- multipleSelection.value = val
- }
- const currentPage = ref(1)
- const pageSize = ref(10)
- const handleSizeChange = (val: number) => {
- console.log(`${val} items per page`)
- }
- const handleCurrentChange = (val: number) => {
- console.log(`current page: ${val}`)
- }
- const tableData: User[] = [
- {
- id: '11011',
- worker: '吴海涛',
- checkinTime: '2021-04-22 15:21:31',
- remark: ''
- },
- {
- id: '11012',
- worker: '吴沈峰',
- checkinTime: '2021-04-22 15:21:31',
- remark: ''
- }
- ]
- const dialogDetails = ref(false)
- const details = ref({})
- const viewDetails = (row)=> {
- console.log(row,'row')
- details.value = JSON.parse(JSON.stringify(row))
- console.log(details,'details')
- dialogDetails.value = true
- }
- // 折线图
- const renderMenu = async (value: string) => {
- Session.set('projectId',value)
- userInfos.value.projectId = value
- await initBackEndControlRoutes();
- };
- return {
- renderMenu,
- multipleTableRef,
- tableData,
- currentPage,
- pageSize,
- dialogDetails,
- details,
- viewDetails,
- handleSizeChange,
- handleCurrentChange,
- Edit,
- Delete,
- Search,
- handleSelectionChange,
- Refresh,
- ...toRefs(state),
- };
- },
- });
-</script>
-
-<style scoped lang="scss">
- $homeNavLengh: 8;
- .home-container {
- height: 100%;
- overflow: hidden;
- padding: 20px;
- .homeCard{
- width: 100%;
- padding: 20px;
- background: #fff;
- border-radius: 4px;
- }
- .el-row{
- display: flex;
- align-items: center;
- margin-bottom: 20px;
- &:last-child {
- margin-bottom: 0;
- }
- .grid-content{
- align-items: center;
- min-height: 36px;
- }
-
- .topInfo {
- display: flex;
- align-items: center;
- font-size: 16px;
- font-weight: bold;
-
- &>div{
- white-space: nowrap;
- margin-right: 20px;
- }
- }
- }
- .mainPages{
- height: 100%;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- }
- .main-card{
- width: 100%;
- .cardTop{
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-bottom: 20px;
- .mainCardBtn{
- margin: 0;
- }
- }
- }
- .pageBtn{
- display: flex;
- align-items: center;
- justify-content: right;
- margin-top: 20px;
-
- .demo-pagination-block + .demo-pagination-block {
- margin-top: 10px;
- }
- .demo-pagination-block .demonstration {
- margin-bottom: 16px;
- }
- }
- }
-</style>
--
Gitblit v1.9.2