<template>
|
<div class="charts-cont">
|
<div class="message">
|
<dv-scroll-board ref="scrollBoard" :config="config" style="width:100%;height:100%;cursor: pointer" @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 { useRouter } from 'vue-router'
|
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 {riskWarningApi} from "/@/api/riskWarning";
|
|
interface stateType {
|
reportData: []
|
config: object
|
}
|
export default defineComponent({
|
name: 'message',
|
components: {},
|
props:{
|
size: Number,
|
theme: Boolean
|
},
|
setup(props,context) {
|
const screenThemes = useScreenTheme()
|
const { screenTheme } = storeToRefs(screenThemes);
|
const userInfo = useUserInfo()
|
const { userInfos } = storeToRefs(userInfo);
|
const router = useRouter();
|
const pro = ref("eChartPro" + Date.now() + Math.random())
|
const state = reactive<stateType>({
|
reportData: [],
|
config:{
|
header: ['消息列表','同比'],
|
data: [],
|
align: ['left'],
|
headerBGC: '#0049af',
|
oddRowBGC: 'none',
|
index: true,
|
columnWidth: [55,250],
|
evenRowBGC: 'rgba(57,122,206,.1)',
|
indexHeader: '序号',
|
rowNum: fontSize(5)
|
}
|
})
|
|
const getReport = async () => {
|
let res = await riskWarningApi().getAllReport();
|
if (res.data.code === '200') {
|
state.reportData = res.data.data
|
state.config.data = state.reportData.map(i=> {
|
if(i.yoy >= 0){
|
return [i.spiName,'<span style="color:#11feee">' + i.yoy + '%</span>']
|
}else{
|
return [i.spiName,'<span style="color:red">' + i.yoy + '%</span>']
|
}
|
|
})
|
} else {
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
}
|
|
const mouseoverHandler = (e: any) => {
|
|
}
|
|
const clickHandler = (e: any) => {
|
router.push({
|
path: 'screenPage',
|
query: {
|
num: 8,
|
rowIndex: e.rowIndex
|
}
|
})
|
context.emit('getData',e.rowIndex)
|
}
|
|
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(() => {
|
getReport()
|
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>
|
