From cc41c6680e4230f9e3f7c8bc3552841c577d812d Mon Sep 17 00:00:00 2001 From: 马宇豪 <978517621@qq.com> Date: 星期一, 21 四月 2025 10:38:43 +0800 Subject: [PATCH] 修改大屏 --- src/views/hazardousChemicals/bigScreen/components/leftTop.vue | 175 +++++++++++++++++++++++++++++++++++++++++++++------------ 1 files changed, 137 insertions(+), 38 deletions(-) diff --git a/src/views/hazardousChemicals/bigScreen/components/leftTop.vue b/src/views/hazardousChemicals/bigScreen/components/leftTop.vue index cd5a7da..b9b7d6f 100644 --- a/src/views/hazardousChemicals/bigScreen/components/leftTop.vue +++ b/src/views/hazardousChemicals/bigScreen/components/leftTop.vue @@ -1,8 +1,11 @@ <template> <div class="charts-container"> <div class="top"> - 共计<span>41515152</span>人/次 + 共计<span>41515152</span>人/次 </div> + <el-select v-model="lineQuery.companyId" :teleported="false" placeholder="Select" size="small"> + <el-option :key="1" label="公司一" :value="1"/> + </el-select> <div id="main"></div> </div> </template> @@ -10,11 +13,13 @@ import * as echarts from 'echarts'; import {onMounted} from "vue"; -onMounted(()=>{ +onMounted(() => { initChart() }) - -const initChart =()=>{ +const lineQuery = { + companyId: 1 +} +const initChart = () => { var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; @@ -35,7 +40,7 @@ xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], - axisLabel:{ + axisLabel: { color: '#fff' }, axisTick: { @@ -45,12 +50,12 @@ yAxis: { type: 'value', splitLine: { - lineStyle:{ + lineStyle: { color: 'rgba(255,255,255,.1)', type: 'dashed' } }, - axisLabel:{ + axisLabel: { color: 'rgba(255,255,255,.6)' } }, @@ -65,17 +70,17 @@ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line', - label:{ + label: { show: true, color: '#fff', textBorderColor: 'transparent', fontSize: 8 }, // showSymbol: false, - lineStyle:{ + lineStyle: { color: '#54d5ff' }, - itemStyle:{ + itemStyle: { color: '#54d5ff', } } @@ -94,41 +99,135 @@ font-style: normal; font-weight: normal; } -.charts-container{ + +.charts-container { width: 100%; height: 100%; display: flex; flex-direction: column; } - .top{ - width: 100%; - font-size: 14px; - height: 50px; - line-height: 50px; - text-align: center; - margin: 10px 0 20px; - span{ - display: inline-block; - font-family: "LKJH"; - vertical-align: middle; - font-size: 28px; - color: yellow; - margin: 0 5px; - padding: 5px 10px; - letter-spacing: 4px; - border-top: 1px solid #155285; - border-bottom: 1px solid #155285; - background: - url('../../../../assets/bigScreen/numberBg.png') left center no-repeat, - url('../../../../assets/bigScreen/numberBg.png') right center no-repeat; - background-size: 1px 100%; +.top { + width: 100%; + font-size: 14px; + height: 50px; + line-height: 50px; + text-align: center; + margin: 10px 0 20px; + + span { + display: inline-block; + font-family: "LKJH"; + vertical-align: middle; + font-size: 28px; + color: yellow; + margin: 0 5px; + padding: 5px 10px; + letter-spacing: 4px; + border-top: 1px solid #155285; + border-bottom: 1px solid #155285; + background: url('../../../../assets/bigScreen/numberBg.png') left center no-repeat, + url('../../../../assets/bigScreen/numberBg.png') right center no-repeat; + background-size: 1px 100%; + } +} + +#main { + flex: 1; + width: 100%; +} +:deep(.el-input__wrapper){ + height: 24px; + box-shadow: none; + border: 1px solid #11FEEE; + background: rgba(6,24,88,.6); + color: #fff; + + :deep(.el-input__inner){ + font-size: 10px; + color: red !important + } + .el-icon{ + display: none; + color: #fff; + } +} +.el-select { + width: 100%; + height: 24px; +} + +:v-deep(.el-popper) { + background-color: rgba(10, 31, 92, 1); + border: 1px solid rgba(17, 254, 238, .4); + color: #11FEEE; + + .el-icon { + color: #11FEEE; + } + + .el-select-dropdown__item { + color: #11FEEE; + } + + .el-select-dropdown__item.hover { + background: #0049af; + } +} + +:v-deep(.el-popper__arrow) { + &::before { + background-color: rgba(10, 31, 92, .6) !important; + border: 1px solid rgba(17, 254, 238, .4); + } +} +</style> +<style lang="scss"> +.charts-container{ + :deep(.el-input__wrapper){ + height: 24px; + box-shadow: none; + border: 1px solid #11FEEE; + background: rgba(6,24,88,.6); + color: #fff; + + :deep(.el-input__inner){ + font-size: 10px; + color: #fff !important + } + .el-icon{ + display: none; + color: #fff; + } + } + .el-select { + width: 100%; + height: 24px; + } + + :deep(.el-popper) { + background-color: rgba(10, 31, 92, 1); + border: 1px solid rgba(17, 254, 238, .4); + color: #11FEEE; + + .el-icon { + color: #11FEEE; + } + + .el-select-dropdown__item { + color: #11FEEE; + } + + .el-select-dropdown__item.hover { + background: #0049af; } } - #main{ - flex: 1; - width: 100%; - + :v-deep(.el-popper__arrow) { + &::before { + background-color: rgba(10, 31, 92, .6) !important; + border: 1px solid rgba(17, 254, 238, .4); + } } -</style> +} +</style> \ No newline at end of file -- Gitblit v1.9.2