<template>
|
<div class="charts-cont">
|
<div class="spi" :id="spi">
|
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted, watchEffect} from 'vue';
|
import { storeToRefs } from 'pinia';
|
import { initBackEndControlRoutes } from '/@/router/backEnd';
|
import {useUserInfo} from "/@/stores/userInfo";
|
import { 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'
|
import {useScreenTheme} from "/@/stores/screenTheme";
|
import {teamManageApi} from "/@/api/systemManage/basicDateManage/personShiftManage/teamManage";
|
import {riskWarningApi} from "/@/api/riskWarning";
|
|
interface stateType {
|
spiData: Array<any>;
|
year: string;
|
monthList: Array<string>;
|
valueList: Array<string>
|
}
|
export default defineComponent({
|
name: 'SPI',
|
components: {},
|
props:{
|
size: Number,
|
theme: Boolean
|
},
|
setup(props,context) {
|
const userInfo = useUserInfo()
|
const { userInfos } = storeToRefs(userInfo);
|
const screenThemes = useScreenTheme()
|
const { screenTheme } = storeToRefs(screenThemes);
|
const spi = ref("eChartSpi" + Date.now() + Math.random())
|
const state = reactive<stateType>({
|
spiData: [],
|
year: '',
|
monthList: [],
|
valueList: [],
|
})
|
|
// 获取spi数据
|
const getSpiData = async () => {
|
let res = await riskWarningApi().getSpiPage({
|
pageIndex: 1,
|
pageSize: 12
|
})
|
if (res.data.code === '200') {
|
state.spiData = res.data.data;
|
initSpi(state.spiData.reverse())
|
context.emit('getData',state.spiData.reverse())
|
} else {
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
};
|
type EChartsOption = echarts.EChartsOption
|
// 隐患整改情况
|
const initSpi =(data)=>{
|
let dom = document.getElementById(spi.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'
|
}
|
},
|
color: ['#91cc75','#ee6666'],
|
grid: [
|
{
|
top: '5%',
|
right: '2%',
|
bottom: '10%'
|
}
|
],
|
xAxis: {
|
type: 'category',
|
data: data.map(i=>i.time),
|
axisLabel: {
|
color: '#fff'
|
}
|
},
|
yAxis: {
|
type: 'value',
|
splitLine:{
|
lineStyle: {
|
color: 'rgba(255,255,255,.2)'
|
}
|
}
|
},
|
series: [
|
{
|
name: 'spi数值',
|
type: 'line',
|
data: data.map(i=>i.value?i.value:0)
|
}
|
]
|
}
|
|
option && myChart.setOption(option);
|
window.addEventListener("resize",function (){
|
myChart.resize();
|
});
|
}
|
|
|
watchEffect(() => {
|
getSpiData()
|
})
|
|
function fontSize(val){
|
let nowClientWidth = document.documentElement.clientWidth;
|
return val * (nowClientWidth/1920) * Number(props.size);
|
}
|
|
// 页面载入时执行方法
|
onMounted(() => {
|
getSpiData();
|
});
|
|
return {
|
spi,
|
Search,
|
fontSize,
|
...toRefs(state)
|
};
|
},
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.charts-cont{
|
width: 100%;
|
height: 100%;
|
padding: 2%;
|
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>
|