<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, 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"
|
|
interface stateType {
|
}
|
export default defineComponent({
|
name: 'message',
|
components: {},
|
props:{
|
size: Number,
|
theme: Boolean
|
},
|
setup(props) {
|
const screenThemes = useScreenTheme()
|
const { screenTheme } = storeToRefs(screenThemes);
|
const userInfo = useUserInfo()
|
const { userInfos } = storeToRefs(userInfo);
|
const pro = ref("eChartPro" + Date.now() + Math.random())
|
const 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],
|
align: ['center','center','center'],
|
headerBGC: '#0049af',
|
oddRowBGC: 'none',
|
evenRowBGC: 'rgba(57,122,206,.1)',
|
indexHeader: '序号',
|
rowNum: fontSize(5)
|
}
|
})
|
|
const mouseoverHandler = (e: any) => {
|
|
}
|
|
const clickHandler = (e: any) => {
|
|
}
|
|
function fontSize(val){
|
let nowClientWidth = document.documentElement.clientWidth;
|
return val * (nowClientWidth/1920) * Number(props.size);
|
}
|
watchEffect(() => {
|
if(props.theme){
|
state.config.headerBGC = '#0049af'
|
state.config.oddRowBGC = 'none'
|
state.config.evenRowBGC = 'rgba(57,122,206,.1)'
|
}else{
|
state.config.headerBGC = '#333'
|
state.config.oddRowBGC = '#888'
|
state.config.evenRowBGC = '#999'
|
}
|
})
|
|
const getTheme =()=>{
|
if(screenTheme.value.isDark){
|
state.config.headerBGC = '#0049af'
|
state.config.oddRowBGC = 'none'
|
state.config.evenRowBGC = 'rgba(57,122,206,.1)'
|
}else{
|
state.config.headerBGC = '#333'
|
state.config.oddRowBGC = '#888'
|
state.config.evenRowBGC = '#999'
|
}
|
}
|
|
// 页面载入时执行方法
|
onMounted(() => {
|
getTheme()
|
});
|
|
return {
|
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>
|
