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/message.vue | 185 ++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 185 insertions(+), 0 deletions(-) diff --git a/src/views/riskWarningSys/warningBigScreen/components/message.vue b/src/views/riskWarningSys/warningBigScreen/components/message.vue new file mode 100644 index 0000000..637728b --- /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], + 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> -- Gitblit v1.9.2