bug修改

zhouwx

2024-08-19 cd84a28754fc1b3fadb7027245333d6d3ff330a3

 src/views/hazardousChemicals/homePage/index.vue

@@ -43,65 +43,51 @@
      </el-row>
    </div>
    <div>
      <el-row :gutter="20" justify="space-between" style="margin-bottom: 15px">
        <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
          <el-card>
            <span style="font-size: 18px;font-weight: 600;margin-left: 45%">超期预警</span>
            <el-table height="320" v-loading="data.wloading" :data="data.warningData" style="margin-top: 15px">
              <el-table-column label="序号" type="index" align="center" width="80" />
              <el-table-column label="生成时间" prop="createTime" align="center"  />
              <el-table-column label="领用人" prop="createName" align="center" />
              <el-table-column label="领用时间" prop="useTime" align="center" />
              <el-table-column label="最后流转时间" prop="updateTime" align="center" width="180"  />
              <el-table-column label="处理时间" prop="handleTime" align="center" />
              <el-table-column label="状态" prop="name" align="center" >
                <template #default="scope">
                  <span>{{scope.row.state === 0 ? '未处理':'已处理'}}</span>
                </template>
              </el-table-column>
            </el-table>
            <pagination
                :total="data.wTotal"
                v-model:page="data.warningQueryParams.pageNum"
                v-model:limit="data.warningQueryParams.pageSize"
                @pagination="getWarningData"
            />
      <el-row :gutter="20" justify="space-between" >
        <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24" style="margin-bottom: 15px">
          <el-card style="height: 500px;overflow: auto">
              <span style="font-size: 18px;font-weight: 600;margin-bottom: -5px">危化品动态</span>
              <el-divider style="margin: 15px 0"></el-divider>
              <div style="padding: 10px;" v-if="data.hazmatData && data.hazmatData.length >0">
                <div v-for="(item,index) in data.hazmatData" :key="index" style="display: flex;flex-direction: column">
                  <div style="display: flex">
                    <img :src="avator" style="width: 25px;height: 25px" />
                    <div style="display: flex;flex-direction: column;margin-left: 20px">
                      <span style="font-size: 16px;font-weight: 600">{{item.description}}&nbsp;
                        <span style="color: #03752e" v-if="item.num > 0">{{item.num >0 ? '+' + item.num: item.num}}{{item.unit}}</span>
                        <span style="color: #f6828e" v-else>{{item.num}}{{item.unit}}</span>
                      </span>
                      <span style="font-size: 14px;color: #8a8f97;margin-top: 5px">{{item.updateTime}}</span>
                    </div>
                  </div>
                  <el-divider style="margin: 15px 0" v-if="index != data.hazmatData.length-1"></el-divider>
                </div>
              </div>
            <div v-else>
              <el-empty description="暂无数据" style="margin-top: 10%"></el-empty>
            </div>
          </el-card>

        </el-col>
        <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
          <el-card>
            <span style="font-size: 18px;font-weight: 600;margin-left: 45%">危化品使用</span>
            <el-table height="320" v-loading="data.hloading" :data="data.hazmatData" style="margin-top: 15px">
              <el-table-column label="名称" prop="name" align="center" />
              <el-table-column label="产品编号" prop="hazmatBasic.productSn" align="center"  />
              <el-table-column label="CAS" prop="hazmatBasic.cas" align="center"/>
              <el-table-column label="试剂类型" prop="hazmatBasic.hazmatType" align="center"/>
              <el-table-column label="危险性质" prop="hazmatBasic.hazmatCharacter" align="center"/>
              <el-table-column label="供应商" prop="hazmatBasic.supplier" align="center"/>
              <el-table-column label="厂家" prop="hazmatBasic.manufacturer" align="center"/>
              <el-table-column label="规格" prop="hazmatBasic.hazmatCharacter" align="center"/>
              <el-table-column label="包装" prop="hazmatBasic.metering" align="center">
                <template #default="scope">
                  <span>{{scope.row.hazmatBasic.metering}}{{scope.row.hazmatBasic.unit}}</span>
                </template>
              </el-table-column>
              <el-table-column label="含税售价" prop="hazmatBasic.price" align="center"/>
              <el-table-column label="每箱数量" prop="hazmatBasic.perBox" align="center"/>
              <el-table-column label="最小包装类型" prop="minPackage" align="center" width="220">
                <template #default="scope">
                  <span>{{scope.row.hazmatBasic.minPackage == 0 ? '瓶' :scope.row.hazmatBasic.minPackage == 1?'袋':scope.row.hazmatBasic.minPackage == 2?'桶 ':scope.row.hazmatBasic.minPackage == 3?'盒':scope.row.hazmatBasic.minPackage == 4?'箱':'其他'}}</span>
                </template>
              </el-table-column>
              <el-table-column label="安全库存" prop="hazmatBasic.safeNum" align="center"/>
              <el-table-column label="超期阈值（小时）" prop="hazmatBasic.threshold" align="center" width="220"/>
            </el-table>
            <pagination
                :total="data.hTotal"
                v-model:page="data.hazmatQueryParams.pageNum"
                v-model:limit="data.hazmatQueryParams.pageSize"
                @pagination="getHazmatUseData"
            />
          <el-card style="height: 500px;overflow: auto">
            <span style="font-size: 18px;font-weight: 600;margin-bottom: -5px">超期预警</span>
            <el-divider style="margin: 15px 0"></el-divider>
            <div style="padding: 10px;" v-if="data.warningData && data.warningData.length >0">
              <div v-for="(item,index) in data.warningData" :key="index" style="display: flex;flex-direction: column">
                <div style="display: flex">
                  <img :src="avator" style="width: 25px;height: 25px" />
                  <div style="display: flex;flex-direction: column;margin-left: 20px">
                      <span style="font-size: 16px;font-weight: 600">{{item.description}}
                      </span>
                    <span style="font-size: 14px;color: #8a8f97;margin-top: 5px">{{item.useTime}}</span>
                  </div>
                </div>
                <el-divider style="margin: 15px 0" v-if="index != data.hazmatData.length-1"></el-divider>
              </div>
            </div>
            <div v-else>
              <el-empty description="暂无数据" style="margin-top: 10%"></el-empty>
            </div>
          </el-card>
        </el-col>
      </el-row>
@@ -110,7 +96,7 @@
</template>
<script setup>
import { CountTo } from 'vue3-count-to'
import img1 from '@/assets/images/file.png'
import avator from '@/assets/images/avator.png'
import hazmat from '@/assets/logo/hazmat.png'
import warehouse from '@/assets/logo/warehouse.png'
import warning from '@/assets/logo/warning1.png'
@@ -121,6 +107,7 @@
import {ElMessage} from "element-plus";
import {getEntryData, getHazmatUseList, getHoData, getMaxUseData, getUseData} from "@/api/hazardousChemicals/count";
import {getWarning} from "@/api/hazardousChemicals/warning";
import {getRawFlow} from "@/api/hazardousChemicals/rawRecord";
const data = reactive({
  cardList: [
    {
@@ -153,6 +140,7 @@
    },
  ],
  maxUseList: [],
  maxUseName: [],
  useXData: [],
  useYData: [],
  entryXData: [],
@@ -160,7 +148,7 @@
  warningData: [],
  warningQueryParams: {
    pageNum: 1,
    pageSize: 5
    pageSize: 10
  },
  wTotal: 0,
  wloading: false,
@@ -170,7 +158,7 @@
    pageNum: 1,
    pageSize: 10
  },
  hazmatData: []
  hazmatData: [],

});
const myChart = shallowRef(null)
@@ -186,25 +174,35 @@
  await useData()
  await maxUseData()
  await getWarningData()
  await getHazmatUseData()
  await getHazmatFlowData()
});
const getWarningData = async () => {
  data.wloading = true
  const res = await getWarning(data.warningQueryParams)
  if(res.code == 200){
    data.warningData =res.data.list
    data.wTotal = res.data.total
    data.warningData =res.data.list.map(item => {
      return {
        ...item,
        description: `${item.createName} 领用了 ${item.hazmatBasic.name} 状态：${item.state ==0?'未处理':'已处理' }`
      }
    })
  }else{
    ElMessage.warning(res.message)
  }
  data.wloading = false
}
const getHazmatUseData = async () => {
const getHazmatFlowData = async () => {
  data.hloading = true
  const res = await getHazmatUseList(data.hazmatQueryParams)
  const res = await getRawFlow(data.hazmatQueryParams)
  if(res.code == 200){
    data.hazmatData =res.data.list
    data.hTotal = res.data.total
    data.hazmatData =res.data.list.map(item => {
      return {
        ...item,
        unit:item.hazmatBasic.unit,
        description: `${item.user.departName ? item.user.departName +'部门' : ''}   ${item.user.name}  进行了  ${item.state ==0?'批量导入': item.state ==1?'取用' :item.state ==2?'归还':item.state ==3?'标签作废' :''} ${item.hazmatBasic.name}`
      }
    })
    console.log('data.hazmatData',data.hazmatData)
  }else{
    ElMessage.warning(res.message)
  }
@@ -250,6 +248,7 @@
        name: item.name
      }
    })
    data.maxUseName = res.data.map(item => item.name)
    await getPieChart()
  }else{
    ElMessage.warning(res.message)
@@ -260,34 +259,39 @@
    myChart.value.dispose();
  }
  myChart.value = echarts.init(document.getElementById(pieChart.value));
  const option = {
    title: {
      text: '近一周频繁使用的危化品量',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '50%',
        data: data.maxUseList,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
  let option;
    option = {
      title: {
        text: '近一周频繁使用的危化品量',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '',
          type: 'pie',
          radius: '50%',
          data: data.maxUseList,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          // showEmptyCircle: false,
        }
      }
    ]
  };
      ]
    };



  // 使用刚指定的配置项和数据显示图表。
  myChart.value.setOption(option,true);
  //自适应宽度
@@ -422,7 +426,21 @@
    }

  }

  ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background-color: #ffffff;
    opacity: 0;
  }
  ::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #ffffff;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    /*-webkit-box-shadow: inset 0 0 6px rgba(154,154,154,.3);*/
    background-color: #ffffff;
  }
}

</style>