修改大屏

马宇豪

2025-04-22 91f2640c8919e7cbe41c8c437e4f7fd60345e062

 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;
  }