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