修改大屏

马宇豪

2025-04-22 91f2640c8919e7cbe41c8c437e4f7fd60345e062

修改大屏

 src/api/monitor/screenCharts.js

对比新文件
@@ -0,0 +1,37 @@
import request from '@/utils/request'

// 大屏接口
export function getDayUseStatistic(id) {
  return request({
    url: '/statistic/dayUseStatistic?companyId=' + id,
    method: 'get'
  })
}

export function getTaBooWarning(type) {
  return request({
    url: '/taBooWarning/listCount?state=' + type,
    method: 'get'
  })
}

export function getBasicCount() {
  return request({
    url: '/hazmat-basic/basicCount',
    method: 'get'
  })
}

export function getCompanyMessage(type) {
  return request({
    url: '/statistic/companyMessage?type=' + type,
    method: 'get'
  })
}

export function getDailywarningCount() {
  return request({
    url: '/warning/dailywarningCount',
    method: 'get'
  })
}

 src/views/hazardousChemicals/bigScreen/components/leftBottom.vue

@@ -1,19 +1,57 @@
<template>
  <div class="charts-container">
    <div id="dangerPie"></div>
    <el-radio-group v-model="data.state" size="small" class="state-button" @change="getTopList">
      <el-radio-button :label="1">已处理</el-radio-button>
      <el-radio-button :label="0">未处理</el-radio-button>
    </el-radio-group>
    <div id="dangerBar"></div>
  </div>
</template>
<script setup>
import * as echarts from 'echarts';
import {onMounted} from "vue";

import {onMounted, reactive} from "vue";
import {getAvoidInfoPage} from "@/api/hazardousChemicals/avoid";
import {ElMessage} from "element-plus";
import {getTaBooWarning} from "@/api/monitor/screenCharts";
onMounted(()=>{
  initDangerPie()
  initDangerBar()
  getListPage()
  getTopList()
})

const initDangerPie =()=>{
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 9999,
    warningType: '',
    companyId: null
  },
  state: 1
})

const getListPage = async () => {
  const res = await getAvoidInfoPage(data.queryParams)
  if(res.code == 200){
    let data = []
    if(res.data && Array.isArray(res.data.list) && res.data.list.length>0){
      data[0] = {
        name: '未处理',
        value: res.data.list.filter(i=>i.state == 0).length
      }
      data[1] = {
        name: '已处理',
        value: res.data.list.filter(i=>i.state == 1).length
      }
      initDangerPie(data)
    }else{
      initDangerPie([])
    }
  }else{
    ElMessage.warning(res.message)
  }
}

const initDangerPie =(data)=>{
  var chartDom = document.getElementById('dangerPie');
  var myChart = echarts.init(chartDom);
  var option;
@@ -42,10 +80,7 @@
          show: true
        },
        color: ['#1890FF','#FACC14'],
        data: [
          { value: 1048, name: '未整改' },
          { value: 735, name: '已整改' }
        ],
        data: data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
@@ -59,7 +94,19 @@

  option && myChart.setOption(option);
}
const initDangerBar =()=>{

const getTopList=async ()=>{
  const res = await getTaBooWarning(data.state)
  if (res.code == 200) {
      if(res.data && Array.isArray(res.data) && res.data.length>0){
        initDangerBar(res.data.reverse())
      }
  } else {
    ElMessage.warning(res.message)
  }
}

const initDangerBar =(data)=>{
  var chartDom = document.getElementById('dangerBar');
  var myChart = echarts.init(chartDom);
  var option;
@@ -83,16 +130,6 @@
          color: 'rgba(255,255,255,.6)',
          fontWeight: 'normal'
        }
      },
      {
        text: '已整改/未整改',
        right: '0',
        top: '0%',
        textStyle: {
          fontSize: 12,
          color: 'rgba(255,255,255,.6)',
          fontWeight: 'normal'
        }
      }
    ],
    xAxis: {
@@ -108,7 +145,7 @@
      }
    },
    yAxis: {
      data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'],
      data: data.map(i=>i.companyName),
      axisLine: {
        show: false
      },
@@ -124,7 +161,7 @@
        name: '2011',
        type: 'bar',
        barWidth: '15',
        data: [203, 489, 134, 970, 744, 230]
        data: data.map(i=>i.count)
      }
    ]
  };
@@ -146,6 +183,25 @@
  display: flex;
  flex-direction: column;
}
:deep(.el-radio-group.state-button){
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: right;
  margin-bottom: -20px;
  position: relative;
  z-index: 9999;
}
:deep(.el-radio-button--small .el-radio-button__inner){
  height: 20px;
  line-height: 10px;
  background: rgba(0,0,0,0);
  border: 1px solid #11FEEE;
}
:deep(.el-radio-button__original-radio:checked+.el-radio-button__inner){
  color: #02CDE6
}

  #dangerPie{
    width: 100%;
    flex: 1;
@@ -155,4 +211,4 @@
    width: 100%;
    flex: 2;
  }
</style>
</style>

 src/views/hazardousChemicals/bigScreen/components/leftTop.vue

@@ -1,25 +1,89 @@
<template>
  <div class="charts-container">
    <div class="top">
      共计<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
        clearable
        v-model="data.queryParams.companyId"
        filterable
        remote
        :teleported="false"
        reserve-keyword
        placeholder="请选择企业"
        remote-show-suffix
        :remote-method="getData"
        style="width: 100%"
    >
      <el-option
          v-for="item in data.companyList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
      />
    </el-select>
    <div class="top">
      共计<span>{{data.totalCount}}</span>人/次
    </div>
    <div id="main"></div>
  </div>
</template>
<script setup>
import * as echarts from 'echarts';
import {onMounted} from "vue";
import {onMounted, reactive} from "vue";
import {getCompany} from "@/api/hazardousChemicals/company";
import {ElMessage} from "element-plus";
import {getDayUseStatistic} from "@/api/monitor/screenCharts";

onMounted(() => {
  initChart()
onMounted(async () => {
  await getCompanyList()
  await getData()
})
const lineQuery = {
  companyId: 1

const data = reactive({
  queryParams: {
    companyId: null
  },
  companyList: [],
  totalCount: 0
})
const getCompanyList = async (val)=>{
  if(val){
    const queryParams = {
      name: val
    }
    const res = await getCompany(queryParams)
    if (res.code == 200) {
      data.companyList = res.data.list
    } else {
      ElMessage.warning(res.message)
    }
  }else {
    const queryParams = {
      pageNum: 1,
      pageSize: 999
    }
    const res = await getCompany(queryParams)
    if (res.code == 200) {
      data.companyList = res.data.list
      if(data.queryParams.companyId == null){
        data.queryParams.companyId = data.companyList[0].id
      }
    } else {
      ElMessage.warning(res.message)
    }
  }
}
const initChart = () => {


const getData = async ()=>{
const res = await getDayUseStatistic(data.queryParams.companyId)
  if (res.code == 200) {
    initChart(res.data || [])
    data.totalCount = res.data.find(i=>i.totalCount >0)?.totalCount || 0
  } else {
    ElMessage.warning(res.message)
  }
}

const initChart = (data) => {
  var chartDom = document.getElementById('main');
  var myChart = echarts.init(chartDom);
  var option;
@@ -39,7 +103,7 @@
    ],
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      data: data.map(i=>i.hour + ':00'),
      axisLabel: {
        color: '#fff'
      },
@@ -68,7 +132,7 @@
    ],
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        data: data.map(i=>i.count),
        type: 'line',
        label: {
          show: true,
@@ -137,58 +201,24 @@
  width: 100%;
}
:deep(.el-input__wrapper){
  height: 24px;
  height: 28px;
  box-shadow: none;
  border: 1px solid #11FEEE;
  background: rgba(6,24,88,.6);
  color: #fff;

  .el-icon{
    display: none;
    color: #fff;
  }
}
</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);
:deep(.el-input__inner){
  color: #02CDE6;
}
:deep(.el-input .el-select__caret){
  color: #02CDE6
}
:deep(.el-popper.is-light){
  background: rgb(8,44,97);
  .el-select-dropdown__item{
    color: #fff;
  }
  .el-select {
    width: 100%;
    height: 24px;
    input.el-input__inner{
      font-size: 10px;
      color: #fff !important
    }
    .el-icon{
      display: none;
      color: #fff;
    }
  }
  :deep(.el-popper){
    background: rgba(10,31,92,1) !important;
    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);
    &:hover{
      background: #015fb0;
    }
  }
}

 src/views/hazardousChemicals/bigScreen/components/midBottom.vue

@@ -6,12 +6,29 @@
<script setup>
import * as echarts from 'echarts';
import {onMounted} from "vue";
import {getCompanyMessage, getDailywarningCount} from "@/api/monitor/screenCharts";
import {ElMessage} from "element-plus";

onMounted(()=>{
  initChart()
  getList()

})

const initChart =()=>{

const getList = async () => {
  const res = await getDailywarningCount()
  if(res.code == 200){
    if(res.data && Array.isArray(res.data) && res.data.length>0){
      initChart(res.data)
    }else{
      initChart([])
    }
  }else{
    ElMessage.warning(res.message)
  }
}

const initChart =(data)=>{
  var chartDom = document.getElementById('preWarning');
  var myChart = echarts.init(chartDom);
  var option;
@@ -31,7 +48,7 @@
    ],
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      data: data.map(i=>i.day) || [],
      axisLabel:{
        color: '#fff'
      },
@@ -60,7 +77,7 @@
    ],
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        data: data.map(i=>i.count) || [],
        type: 'line',
        label:{
          show: true,

 src/views/hazardousChemicals/bigScreen/components/midTop.vue

@@ -1,34 +1,56 @@
<template>
  <div class="charts-container">
    <div class="table-wrapper">
      <table class="scrollable-table">
        <thead>
        <tr>
          <th>排名</th>
          <th>企业名称</th>
          <th>危化品仓库</th>
          <th>预警信息</th>
        </tr>
        </thead>
      </table>
      <div class="scroll-viewport" ref="viewport">
        <div class="scroll-content" :style="contentStyle">
          <table class="scrollable-table">
            <tbody>
            <tr v-for="item in companyData" :key="item.id">
              <td>{{ item.rank }}</td>
              <td>{{ item.company }}</td>
              <td>{{ item.warehouse }}</td>
              <td :class="{'warning': item.warning}">{{ item.warning || '无' }}</td>
            </tr>
            <tr v-for="item in loopData" :key="`loop-${item.id}`">
              <td>{{ item.rank }}</td>
              <td>{{ item.company }}</td>
              <td>{{ item.warehouse }}</td>
              <td :class="{'warning': item.warning}">{{ item.warning || '无' }}</td>
            </tr>
            </tbody>
          </table>
    <div class="container-left">
      <div class="filter">
        <el-select
            clearable
            :teleported="false"
            v-model="companyType"
            filterable
            placeholder="请选择企业类型"
            style="width: 100%"
            remote
            remote-show-suffix
            :remote-method="getList"
        >
          <el-option
              v-for="item in typeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
          />
        </el-select>
      </div>
      <div class="table-wrapper">
        <table class="scrollable-table">
          <thead>
          <tr>
            <th>序号</th>
            <th>企业名称</th>
            <th>危化品仓库</th>
            <th>预警信息</th>
          </tr>
          </thead>
        </table>
        <div class="scroll-viewport" ref="viewport">
          <div class="scroll-content" :style="contentStyle">
            <table class="scrollable-table">
              <tbody>
              <tr v-for="(item,index) in companyData" :key="item.id">
                <td>{{ index + 1 }}</td>
                <td>{{ item.companyName }}</td>
                <td>{{ item.warehouseCount }}</td>
                <td>{{ item.warningCount }}</td>
              </tr>
              <tr v-for="(item,index) in loopData" :key="`loop-${item.id}`">
                <td>{{ index + 1 }}</td>
                <td>{{ item.companyName }}</td>
                <td>{{ item.warehouseCount }}</td>
                <td>{{ item.warningCount }}</td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
@@ -41,32 +63,19 @@
import SUZHOU from './map.json'
import {getAvoidList} from "@/api/hazardousChemicals/avoid";
import {ElMessage} from "element-plus";
import {getCompanyMessage} from "@/api/monitor/screenCharts";
// 表格数据
const companyData = [
  { id: 1, rank: 1, company: '化工企业A', warehouse: '仓库1', warning: '相忌预警' },
  { id: 2, rank: 2, company: '化工企业B', warehouse: '仓库2', warning: '' },
  { id: 3, rank: 3, company: '化工企业C', warehouse: '仓库3', warning: '超期预警' },
  { id: 4, rank: 4, company: '化工企业D', warehouse: '仓库4', warning: '' },
  { id: 5, rank: 5, company: '化工企业E', warehouse: '仓库5', warning: '' },
  { id: 6, rank: 6, company: '化工企业F', warehouse: '仓库6', warning: '超期预警' },
  { id: 7, rank: 7, company: '化工企业G', warehouse: '仓库7', warning: '' },
  { id: 8, rank: 8, company: '化工企业H', warehouse: '仓库8', warning: '' },
  { id: 9, rank: 9, company: '化工企业I', warehouse: '仓库9', warning: '' },
  { id: 10, rank: 10, company: '化工企业J', warehouse: '仓库10', warning: '' },
  { id: 11, rank: 11, company: '化工企业K', warehouse: '仓库11', warning: '' },
  { id: 12, rank: 12, company: '化工企业L', warehouse: '仓库12', warning: '' },
]
// const companyData = ref([])
const companyData = ref([])
// 配置参数
const visibleRows = 8 // 显示的行数
const scrollSpeed = 1 // 每次滚动的像素数
const scrollSpeed = 0.5 // 每次滚动的像素数
const rowHeight = 40 // 行高，与CSS一致
const viewport = ref(null)
const scrollPosition = ref(0)
let animationFrame = null

onMounted(()=>{
  // getList()
  getList()
  initChart()
  // 设置视口高度
  if (viewport.value) {
@@ -84,19 +93,35 @@
  }
})

// const getList = async () => {
//   const res = await getAvoidList({warningType: '', companyId: null})
//   if(res.code == 200){
//     companyData.value = res.data
//     console.log(companyData.value,555)
//   }else{
//     ElMessage.warning(res.message)
//   }
// }
const companyType = ref('')
const typeList = [
  {
    id: 0,
    name: '研发类'
  },
  {
    id: 1,
    name: '生产类'
  },
  {
    id: 2,
    name: '中试类'
  }
]

const getList = async () => {
  const res = await getCompanyMessage(companyType.value)
  if(res.code == 200){
    companyData.value = res.data
    // console.log(companyData.value,555)
  }else{
    ElMessage.warning(res.message)
  }
}

// 复制前几行数据用于循环
const loopData = computed(() => {
  return companyData.slice(0, visibleRows)
  return companyData.value.slice(0, visibleRows)
})

// 内容区域样式
@@ -108,7 +133,7 @@

// 滚动动画
const scrollAnimation = () => {
  const totalHeight = companyData.length * rowHeight
  const totalHeight = companyData.value.length * rowHeight
  const loopHeight = loopData.value.length * rowHeight
  // 更新滚动位置
  scrollPosition.value += scrollSpeed
@@ -265,10 +290,43 @@
  display: flex;
  align-items: flex-start;
}

.container-left{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 300px;
}

.filter{
  width: 300px;
}
:deep(.el-input__wrapper){
  height: 28px;
  box-shadow: none;
  border: 1px solid #11FEEE;
  background: rgba(6,24,88,.6);
  color: #fff;
}
:deep(.el-input__inner){
  color: #02CDE6;
}
:deep(.el-input .el-select__caret){
  color: #02CDE6
}
:deep(.el-popper.is-light){
  background: rgb(8,44,97);
  .el-select-dropdown__item{
    color: #fff;
    &:hover{
      background: #015fb0;
    }
  }
}
.table-wrapper {
  position: relative;
  width: 300px;
  margin-top: 30px;
  margin-top: 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 2px;
  overflow: hidden;

 src/views/hazardousChemicals/bigScreen/components/rightBottom.vue

@@ -1,14 +1,25 @@
<template>
  <div class="charts-container">
    <div class="filter">
      <el-input
          v-model="queryParams.code"
          placeholder="请输入流向码"
      <el-select
          clearable
      />
          <div class="search-btn">
            查询
          </div>
          v-model="data.queryParams.companyId"
          filterable
          placeholder="请选择企业"
          style="flex: 3"
          :teleported="false"
      >
        <el-option
            v-for="item in data.companyList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
        />
      </el-select>
      <el-input v-model="data.queryParams.code" placeholder="请输入流向码"></el-input>
      <div class="search-btn" @click="getList">
        查询
      </div>
    </div>
    <div class="table-wrapper">
    <table class="data-table">
@@ -21,11 +32,11 @@
      </tr>
      </thead>
      <tbody>
      <tr v-for="(item, index) in dataList" :key="index">
        <td>{{ item.company }}</td>
        <td>{{ item.flowType }}</td>
        <td>{{ item.person }}</td>
        <td>{{ item.time }}</td>
      <tr v-for="(item, index) in data.dataList" :key="index">
        <td>{{ data.companyList.find(i=>i.id == item.companyId)?.name }}</td>
        <td class="state-describe" :class="{'orange': item.stateName == '取用' || item.stateName == '销售','red': item.stateName == '标签作废'|| item.stateName == '用尽登记'}">{{ item.stateName }}</td>
        <td>{{ item.user.name }}</td>
        <td>{{ item.updateTime }}</td>
      </tr>
      </tbody>
    </table>
@@ -33,15 +44,80 @@
  </div>
</template>
<script setup>
import {onMounted, reactive} from "vue";
import {nextTick, onMounted, reactive} from "vue";
import {ElMessage} from "element-plus";
import {getBasicCount} from "@/api/monitor/screenCharts";
import {getAllRawFlow} from "@/api/hazardousChemicals/rawRecord";
import {getFlowByCode} from "@/api/hazardousChemicals/productRecord";
import {getCompany} from "@/api/hazardousChemicals/company";

onMounted(()=>{
  getList()
onMounted(async()=>{
  await getCompanyList()
})

const queryParams = reactive({
  code: ''
const data = reactive({
  companyList: [],
  queryParams: {
    companyId: null,
    code: ''
  },
  dataList: []
})

const getCompanyList = async (val)=>{
  if(val){
    const queryParams = {
      name: val
    }
    const res = await getCompany(queryParams)
    if (res.code == 200) {
      data.companyList = res.data.list
    } else {
      ElMessage.warning(res.message)
    }
  }else {
    const queryParams = {
      pageNum: 1,
      pageSize: 999
    }
    const res = await getCompany(queryParams)
    if (res.code == 200) {
      data.companyList = res.data.list
    } else {
      ElMessage.warning(res.message)
    }
  }
}

const getList = async () => {
  if(!data.queryParams.companyId){
    ElMessage.warning('请输入企业名称')
    return
  }
  if(data.queryParams.code==''){
    ElMessage.warning('请输入二维码编号')
    return
  }
  const res = await getFlowByCode(data.queryParams)
  if(res.code == 200){
    if(res.data && res.data.length>0){
      if(res.data[0].hazmatBasic){
        console.log(res.data,'data')
        data.dataList = res.data.map(item => {
          return {
            ...item,
            stateName: item.state ==0 ?'入库': item.state ==1 ? '取用' :item.state ==2 ? '归还': item.state ==3 ? '标签作废' : item.state ==4 ? '用尽登记':item.state ==5 ? '销售' : item.state ==6? '零头入库':'',
          }
        })
      }
    }else {
      data.dataList = []
    }
  }else{
    ElMessage.warning(res.message)
  }
}

const dataList = [
  { company: '化工企业A', flowType: '出库', person: '张三', time: '2023-05-10 09:30' },
  { company: '化工企业B', flowType: '入库', person: '李四', time: '2023-05-10 10:15' },
@@ -53,9 +129,6 @@
  { company: '化工企业H', flowType: '入库', person: '吴十', time: '2023-05-10 17:05' },
  { company: '化工企业I', flowType: '出库', person: '郑十一', time: '2023-05-11 08:30' }
]
const getList = ()=>{

}
const reset=()=>{

}
@@ -78,12 +151,6 @@
    margin-bottom: 20px;
    .el-input{
      flex: 3;
      border: 1px solid blue !important;
      border-color: blue !important;
    }
    :deep(.el-input__wrapper){
      background-color: rgba(0,0,0,0);
      border-color: blue !important;
    }
    .search-btn{
      flex: 1;
@@ -98,6 +165,28 @@
      color: #fff
    }
  }
  :deep(.el-input__wrapper){
    height: 28px;
    box-shadow: none;
    border: 1px solid #11FEEE;
    background: rgba(6,24,88,.6);
    color: #fff;
  }
  :deep(.el-input__inner){
    color: #02CDE6;
  }
  :deep(.el-input .el-select__caret){
    color: #02CDE6
  }
  :deep(.el-popper.is-light){
    background: rgb(8,44,97);
    .el-select-dropdown__item{
      color: #fff;
      &:hover{
        background: #015fb0;
      }
    }
  }
  .table-wrapper {
    width: 100%;
    height: 320px;
@@ -108,29 +197,35 @@

  .data-table {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
    font-size: 14px;

    th,td {
      padding: 10px;
      font-size: 12px;
      color: #fff;
      text-align: left;
      height: 24px;
      border-bottom: 1px solid rgba(255,255,255,.1);
    }
    .state-describe{
      color: #00ff00
    }
    .red{
      color: #ff4848
    }
    .orange{
      color: #aeff00
    }
    th {
      position: sticky;
      top: 0;
      background-color: rgb(6,38,87); /* 无背景色 */
      font-weight: normal;
      color: #fff;
    }
  }

  .data-table th,
  .data-table td {
    padding: 10px;
    font-size: 12px;
    color: #fff;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,.1);
  }

  .data-table th {
    position: sticky;
    top: 0;
    background-color: rgb(6,38,87); /* 无背景色 */
    font-weight: normal;
    color: #fff;
  }

  /* 精简滚动条样式 */
  .table-wrapper::-webkit-scrollbar {
    width: 0;
  }

 src/views/hazardousChemicals/bigScreen/components/rightTop.vue

@@ -6,12 +6,33 @@
<script setup>
import * as echarts from 'echarts';
import {onMounted} from "vue";
import {ElMessage} from "element-plus";
import {getBasicCount} from "@/api/monitor/screenCharts";

onMounted(()=>{
  initChart()
  getPieData()
})

const initChart =()=>{
const getPieData = async ()=>{
  const res = await getBasicCount()
  if (res.code == 200) {
    if(res.data && Array.isArray(res.data) && res.data.length>0){
      let data = res.data.map(i=>{
        return {
          name: i.hazmatCharacter,
          value: i.count,
        }
      })
      initChart(data)
    }else{
      initChart([])
    }
  } else {
    ElMessage.warning(res.message)
  }
}

const initChart =(data)=>{
  var chartDom = document.getElementById('typePie');
  var myChart = echarts.init(chartDom);
  var option;
@@ -35,7 +56,7 @@
      {
        type: 'pie',
        radius: [20, 100],
        center: ['50%', '45%'],
        center: ['50%', '40%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 5
@@ -45,16 +66,7 @@
          textBorderWidth: 0,
          formatter: '{d}%'
        },
        data: [
          { value: 30, name: 'rose 1' },
          { value: 28, name: 'rose 2' },
          { value: 26, name: 'rose 3' },
          { value: 24, name: 'rose 4' },
          { value: 22, name: 'rose 5' },
          { value: 20, name: 'rose 6' },
          { value: 18, name: 'rose 7' },
          { value: 16, name: 'rose 8' }
        ]
        data: data
      }
    ]
  };

 src/views/hazardousChemicals/bigScreen/index.vue

@@ -9,10 +9,10 @@
        <h1 class="dashboard-title">独墅湖科教创新区危化品智慧管控平台</h1>
      </div>
      <div class="header-right">
        <div class="weather-info">
          <span class="weather-icon">☀</span>
          <span class="weather-text">晴 26°C</span>
        </div>
<!--        <div class="weather-info">-->
<!--          <span class="weather-icon">☀</span>-->
<!--          <span class="weather-text">晴 26°C</span>-->
<!--        </div>-->
      </div>
    </header>


 src/views/hazardousChemicals/traceableQuery/index.vue

@@ -86,9 +86,6 @@
  }else {
    ElMessage.warning('请先输入二维码编号')
  }



}
const getCompanyList = async (val)=>{
  if(val){