From eafc031e3e6e48778d22b5455358273714944012 Mon Sep 17 00:00:00 2001
From: Your Name <123456>
Date: 星期一, 05 九月 2022 09:53:16 +0800
Subject: [PATCH] Merge branch 'master' of https://sinanoaq.cn:8888/r/gtqt
---
src/views/riskWarningSys/warningBigScreen/components/SPI.vue | 280 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 280 insertions(+), 0 deletions(-)
diff --git a/src/views/riskWarningSys/warningBigScreen/components/SPI.vue b/src/views/riskWarningSys/warningBigScreen/components/SPI.vue
new file mode 100644
index 0000000..f148306
--- /dev/null
+++ b/src/views/riskWarningSys/warningBigScreen/components/SPI.vue
@@ -0,0 +1,280 @@
+<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)
+ }
+ },
+ tooltip: {
+ trigger: 'axis'
+ },
+ 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',
+ triggerLineEvent: true,
+ 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>
--
Gitblit v1.9.2