From cc41c6680e4230f9e3f7c8bc3552841c577d812d Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: Mon, 21 Apr 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