对比新文件 |
| | |
| | | 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' |
| | | }) |
| | | } |
| | |
| | | <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; |
| | |
| | | show: true |
| | | }, |
| | | color: ['#1890FF','#FACC14'], |
| | | data: [ |
| | | { value: 1048, name: '未整改' }, |
| | | { value: 735, name: '已整改' } |
| | | ], |
| | | data: data, |
| | | emphasis: { |
| | | itemStyle: { |
| | | shadowBlur: 10, |
| | |
| | | |
| | | 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; |
| | |
| | | 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: { |
| | |
| | | } |
| | | }, |
| | | yAxis: { |
| | | data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'], |
| | | data: data.map(i=>i.companyName), |
| | | axisLine: { |
| | | show: false |
| | | }, |
| | |
| | | name: '2011', |
| | | type: 'bar', |
| | | barWidth: '15', |
| | | data: [203, 489, 134, 970, 744, 230] |
| | | data: data.map(i=>i.count) |
| | | } |
| | | ] |
| | | }; |
| | |
| | | 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; |
| | |
| | | width: 100%; |
| | | flex: 2; |
| | | } |
| | | </style> |
| | | </style> |
| | |
| | | <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; |
| | |
| | | ], |
| | | xAxis: { |
| | | type: 'category', |
| | | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], |
| | | data: data.map(i=>i.hour + ':00'), |
| | | axisLabel: { |
| | | color: '#fff' |
| | | }, |
| | |
| | | ], |
| | | series: [ |
| | | { |
| | | data: [150, 230, 224, 218, 135, 147, 260], |
| | | data: data.map(i=>i.count), |
| | | type: 'line', |
| | | label: { |
| | | show: true, |
| | |
| | | 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; |
| | | } |
| | | } |
| | | } |
| | |
| | | <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; |
| | |
| | | ], |
| | | xAxis: { |
| | | type: 'category', |
| | | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], |
| | | data: data.map(i=>i.day) || [], |
| | | axisLabel:{ |
| | | color: '#fff' |
| | | }, |
| | |
| | | ], |
| | | series: [ |
| | | { |
| | | data: [150, 230, 224, 218, 135, 147, 260], |
| | | data: data.map(i=>i.count) || [], |
| | | type: 'line', |
| | | label:{ |
| | | show: true, |
| | |
| | | <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> |
| | |
| | | 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) { |
| | |
| | | } |
| | | }) |
| | | |
| | | // 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) |
| | | }) |
| | | |
| | | // 内容区域样式 |
| | |
| | | |
| | | // 滚动动画 |
| | | const scrollAnimation = () => { |
| | | const totalHeight = companyData.length * rowHeight |
| | | const totalHeight = companyData.value.length * rowHeight |
| | | const loopHeight = loopData.value.length * rowHeight |
| | | // 更新滚动位置 |
| | | scrollPosition.value += scrollSpeed |
| | |
| | | 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; |
| | |
| | | <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"> |
| | |
| | | </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> |
| | |
| | | </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' }, |
| | |
| | | { company: '化工企业H', flowType: '入库', person: '吴十', time: '2023-05-10 17:05' }, |
| | | { company: '化工企业I', flowType: '出库', person: '郑十一', time: '2023-05-11 08:30' } |
| | | ] |
| | | const getList = ()=>{ |
| | | |
| | | } |
| | | const reset=()=>{ |
| | | |
| | | } |
| | |
| | | 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; |
| | |
| | | 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; |
| | |
| | | |
| | | .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; |
| | | } |
| | |
| | | <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; |
| | |
| | | { |
| | | type: 'pie', |
| | | radius: [20, 100], |
| | | center: ['50%', '45%'], |
| | | center: ['50%', '40%'], |
| | | roseType: 'area', |
| | | itemStyle: { |
| | | borderRadius: 5 |
| | |
| | | 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 |
| | | } |
| | | ] |
| | | }; |
| | |
| | | <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> |
| | | |
| | |
| | | }else { |
| | | ElMessage.warning('请先输入二维码编号') |
| | | } |
| | | |
| | | |
| | | |
| | | } |
| | | const getCompanyList = async (val)=>{ |
| | | if(val){ |