|
|
<template>
|
|
|
<div
|
|
|
v-loading="loading"
|
|
|
class="view-container"
|
|
|
element-loading-text="拼命加载中"
|
|
|
>
|
|
|
<!-- 上半部分-->
|
|
|
<div class="view-container-top">
|
|
|
<div class="view-container-tl ">
|
|
|
<div class="view-container-tlt">
|
|
|
<Detail v-for="(item,index) in desc" :key="index" :count="item.count" :desc="item.desc" :img="item.img" />
|
|
|
</div>
|
|
|
<div class="view-container-tlb view-content">
|
|
|
<div class="header">
|
|
|
<div class="title">环境监控图</div>
|
|
|
<div>
|
|
|
<el-select v-model="client_id" placeholder="请选择柜体" @change="(val) => valueChange('id',val)">
|
|
|
<el-option
|
|
|
v-for="item in clientOptions"
|
|
|
:key="item.id"
|
|
|
:label="item.client_name"
|
|
|
:value="item.client_id"
|
|
|
/>
|
|
|
</el-select>
|
|
|
<el-select v-model="client_date" placeholder="请选择" @change="(val) => valueChange('date',val)">
|
|
|
<el-option
|
|
|
v-for="(item,index) in options"
|
|
|
:key="index"
|
|
|
:label="item"
|
|
|
:value="index+1"
|
|
|
/>
|
|
|
</el-select>
|
|
|
<el-radio-group v-model="radio1" @change="(val) => valueChange('radio',val)">
|
|
|
<el-radio-button :label="1">温度</el-radio-button>
|
|
|
<el-radio-button :label="2">湿度</el-radio-button>
|
|
|
<el-radio-button :label="3">VOC含量</el-radio-button>
|
|
|
</el-radio-group>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div
|
|
|
id="line"
|
|
|
v-loading="loadingLineData"
|
|
|
class="view"
|
|
|
element-loading-text="拼命加载中"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="view-container-tr view-content">
|
|
|
<div class="header">
|
|
|
<div class="title">库存余量
|
|
|
<el-popover
|
|
|
placement="right"
|
|
|
title="怎么看试剂余量？"
|
|
|
width="200"
|
|
|
trigger="hover"
|
|
|
content="如“2/50”，表示该试剂最后一次入库后共50瓶，当前剩余2瓶。"
|
|
|
>
|
|
|
<i slot="reference" class="el-icon-warning-outline" />
|
|
|
</el-popover>
|
|
|
</div>
|
|
|
<div>
|
|
|
<!-- <el-button >查看全部</el-button>-->
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="header">
|
|
|
<!-- <el-select v-model="client_id" style="margin-right: 0" placeholder="请选择">-->
|
|
|
<!-- <el-option-->
|
|
|
<!-- v-for="item in options"-->
|
|
|
<!-- :key="item.value"-->
|
|
|
<!-- :label="item.label"-->
|
|
|
<!-- :value="item.value"-->
|
|
|
<!-- />-->
|
|
|
<!-- </el-select>-->
|
|
|
<el-select v-model="rclient_id" :disabled="rloading" style="margin-right: 0" placeholder="请选择柜体" @change="remainingPageChange(1)">
|
|
|
<el-option
|
|
|
v-for="item in clientOptions"
|
|
|
:key="item.client_id"
|
|
|
:label="item.client_name"
|
|
|
:value="item.client_id"
|
|
|
/>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
<div class="view">
|
|
|
<el-table
|
|
|
v-loading="rloading"
|
|
|
:data="remainingData"
|
|
|
height="34vh"
|
|
|
stripe
|
|
|
style="width: calc(100% - 1.25rem)"
|
|
|
element-loading-text="拼命加载中"
|
|
|
>
|
|
|
<el-table-column
|
|
|
prop="name"
|
|
|
align="center"
|
|
|
label="试剂名称"
|
|
|
/>
|
|
|
<el-table-column
|
|
|
prop="surplus_number"
|
|
|
align="center"
|
|
|
label="余量"
|
|
|
/>
|
|
|
</el-table>
|
|
|
<div class="my-pagination" style="text-align: center">
|
|
|
<el-pagination
|
|
|
background
|
|
|
layout="prev, pager, next"
|
|
|
:total="rtotal"
|
|
|
:disabled="rloading"
|
|
|
:current-page.sync="rpage"
|
|
|
:page-size.sync="rpage_size"
|
|
|
@current-change="remainingPageChange"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 下半部分-->
|
|
|
<div class="view-container-bottom">
|
|
|
<div class="view-container-bl">
|
|
|
<div class="view-container-tr view-content">
|
|
|
<div class="header">
|
|
|
<div class="title">近期预警列表</div>
|
|
|
<div>
|
|
|
<el-button @click="warnAll">查看全部</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="content" style="overflow: auto">
|
|
|
<el-table
|
|
|
stripe
|
|
|
:data="tableData"
|
|
|
>
|
|
|
<el-table-column
|
|
|
align="center"
|
|
|
prop="warning_date"
|
|
|
label="预警时间"
|
|
|
/>
|
|
|
<el-table-column
|
|
|
align="center"
|
|
|
prop="object_type"
|
|
|
label="预警信息类型"
|
|
|
>
|
|
|
<template slot-scope="scope">
|
|
|
{{ warning_data_map[scope.row.object_type-1] }}
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
align="center"
|
|
|
prop="object_name"
|
|
|
label="对象"
|
|
|
/>
|
|
|
<el-table-column
|
|
|
show-overflow-tooltip
|
|
|
align="center"
|
|
|
prop="warning_content"
|
|
|
label="内容"
|
|
|
/>
|
|
|
<el-table-column
|
|
|
align="center"
|
|
|
prop="is_solve"
|
|
|
label="受理情况"
|
|
|
>
|
|
|
<template slot-scope="scope">
|
|
|
<el-tag :type="scope.row.is_solve === 0?'warning':'success' ">
|
|
|
{{ scope.row.is_solve === 0 ? '未受理':'已受理' }}
|
|
|
</el-tag>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<!-- <el-table-column-->
|
|
|
<!-- align="center"-->
|
|
|
<!-- prop="address"-->
|
|
|
<!-- label="位置"-->
|
|
|
<!-- />-->
|
|
|
</el-table>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="view-container-br">
|
|
|
<div class="view-container-tr view-content">
|
|
|
<div class="header-warn">
|
|
|
<div class="title">预警信息总览</div>
|
|
|
<div class="count">{{ warning_data_info.count_number }}</div>
|
|
|
<div class="desc">总计(条)</div>
|
|
|
</div>
|
|
|
<div id="pie" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- // 弹框-->
|
|
|
<el-dialog title="预警信息" width="70%" :visible.sync="dialogTableVisible">
|
|
|
<div class="header-custom">
|
|
|
<el-date-picker
|
|
|
v-model="start_time"
|
|
|
clearable
|
|
|
type="datetime"
|
|
|
placeholder="选择生产日期"
|
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
/>
|
|
|
<el-date-picker
|
|
|
v-model="end_time"
|
|
|
clearable
|
|
|
type="datetime"
|
|
|
placeholder="选择过期日期"
|
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
/>
|
|
|
<el-select v-model="object_type" clearable placeholder="请选择预警信息类型">
|
|
|
<el-option
|
|
|
v-for="(item,index) in warning_data_map"
|
|
|
:key="index"
|
|
|
:label="item"
|
|
|
:value="index + 1"
|
|
|
/>
|
|
|
</el-select>
|
|
|
<el-input v-model="seach_word" clearable placeholder="请输入搜索试剂名称" />
|
|
|
<el-button :disabled="loadingReagent" type="primary" icon="el-icon-search" @click="searchData">搜索</el-button>
|
|
|
</div>
|
|
|
<el-table
|
|
|
v-loading="loadingReagent"
|
|
|
:data="gridData"
|
|
|
stripe
|
|
|
height="400"
|
|
|
element-loading-text="拼命加载中"
|
|
|
:header-cell-style="headerStyle"
|
|
|
>
|
|
|
<el-table-column
|
|
|
align="center"
|
|
|
prop="warning_date"
|
|
|
label="预警时间"
|
|
|
/>
|
|
|
<el-table-column
|
|
|
align="center"
|
|
|
prop="object_type"
|
|
|
label="预警信息类型"
|
|
|
>
|
|
|
<template slot-scope="scope">
|
|
|
{{ warning_data_map[scope.row.object_type-1] }}
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
align="center"
|
|
|
prop="object_name"
|
|
|
label="对象"
|
|
|
/>
|
|
|
<el-table-column
|
|
|
align="center"
|
|
|
show-overflow-tooltip
|
|
|
prop="warning_content"
|
|
|
label="内容"
|
|
|
/>
|
|
|
<el-table-column
|
|
|
align="center"
|
|
|
prop="is_solve"
|
|
|
label="受理情况"
|
|
|
>
|
|
|
<template slot-scope="scope">
|
|
|
<el-tag :type="scope.row.is_solve === 0?'warning':'success' ">
|
|
|
{{ scope.row.is_solve === 0 ? '未受理':'已受理' }}
|
|
|
</el-tag>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
align="center"
|
|
|
prop="is_solve"
|
|
|
label="操作"
|
|
|
>
|
|
|
<template slot-scope="scope">
|
|
|
<el-button type="primary" @click="optClick(scope.row)">操作</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
<div class="my-pagination" style="text-align: center">
|
|
|
<el-pagination
|
|
|
background
|
|
|
layout="prev, pager, next"
|
|
|
:disabled="loadingReagent"
|
|
|
:current-page.sync="page"
|
|
|
:total="total"
|
|
|
:page-size.sync="page_size"
|
|
|
@current-change="pageChange"
|
|
|
/>
|
|
|
</div>
|
|
|
<el-dialog
|
|
|
width="50%"
|
|
|
title="预警详情"
|
|
|
:visible.sync="innerVisible"
|
|
|
append-to-body
|
|
|
>
|
|
|
<el-descriptions :column="2" border>
|
|
|
<el-descriptions-item label="预警对象" span="2">{{ rowData.object_name }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="预警内容" span="2">{{ rowData.warning_content }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="预警类型">{{ warning_data_map[rowData.object_type -1] }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="预警来源">{{ rowData.object_name }}</el-descriptions-item>
|
|
|
<!-- <el-descriptions-item label="生产日期">{{ this.rowData.object_name }}</el-descriptions-item>-->
|
|
|
<!-- <el-descriptions-item label="过期日期">{{ this.rowData.object_name }}</el-descriptions-item>-->
|
|
|
<!-- <el-descriptions-item label="试剂余量">{{ this.rowData.object_name }}</el-descriptions-item>-->
|
|
|
<!-- <el-descriptions-item label="所属终端">{{ this.rowData.object_name }}</el-descriptions-item>-->
|
|
|
<el-descriptions-item label="最后使用人"><el-tag>{{ rowData.warning_user_name }}</el-tag></el-descriptions-item>
|
|
|
<el-descriptions-item label="受理情况">
|
|
|
<el-tag :type="rowData.is_solve === 0?'warning':'success' ">
|
|
|
{{ rowData.is_solve === 0 ? '未受理':'已受理' }}
|
|
|
</el-tag>
|
|
|
</el-descriptions-item>
|
|
|
</el-descriptions>
|
|
|
<div style="text-align: center;margin-top: 20px">
|
|
|
<el-button @click="innerVisible=false">取消</el-button>
|
|
|
<el-button type="primary" @click="innerVisible=false">确认受邀</el-button>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import Detail from '@/components/Detail/index'
|
|
|
import { home_info, home_warning_list, home_drug_remaining, get_monitoring_info } from '@/api/reagent/overView'
|
|
|
import { client_list } from '@/api/common'
|
|
|
import stringify from '@/utils/stringify'
|
|
|
|
|
|
export default {
|
|
|
name: 'MainOverview',
|
|
|
components: { Detail },
|
|
|
data() {
|
|
|
return {
|
|
|
headerStyle: { 'background': '#E6E6E6' },
|
|
|
loading: false,
|
|
|
dialogTableVisible: false,
|
|
|
innerVisible: false,
|
|
|
myChart: null,
|
|
|
myChart2: null,
|
|
|
warning_data_info: {},
|
|
|
warning_data_map: ['试剂临期', '试剂过期', '余量不足', '环境异常', '出库临期', '出库超期', '未称重'],
|
|
|
desc: [
|
|
|
{
|
|
|
count: 0,
|
|
|
desc: '今日入库',
|
|
|
img: require('@/assets/3-主概览/今日入库.png')
|
|
|
},
|
|
|
{
|
|
|
count: 0,
|
|
|
desc: '今日领用',
|
|
|
img: require('@/assets/3-主概览/今日领用.png')
|
|
|
},
|
|
|
{
|
|
|
count: 0,
|
|
|
desc: '今日归还',
|
|
|
img: require('@/assets/3-主概览/今日归还.png')
|
|
|
},
|
|
|
{
|
|
|
count: 0,
|
|
|
desc: '今日未归还',
|
|
|
img: require('@/assets/3-主概览/今日未归还.png')
|
|
|
}
|
|
|
],
|
|
|
tableData: [],
|
|
|
clientOptions: [],
|
|
|
options: ['近24小时', '近七天', '近一个月'],
|
|
|
value: '',
|
|
|
radio1: 1,
|
|
|
gridData: [],
|
|
|
seach_word: '',
|
|
|
page: 1,
|
|
|
total: 0,
|
|
|
page_size: 15,
|
|
|
start_time: '',
|
|
|
end_time: '',
|
|
|
object_type: '',
|
|
|
loadingReagent: false,
|
|
|
rowData: {},
|
|
|
remainingData: [],
|
|
|
rpage: 1,
|
|
|
rtotal: 0,
|
|
|
rpage_size: 15,
|
|
|
rclient_id: null,
|
|
|
rloading: false,
|
|
|
client_id: null,
|
|
|
client_date: 1,
|
|
|
linechartData: [],
|
|
|
loadingLineData: true
|
|
|
}
|
|
|
},
|
|
|
async created() {
|
|
|
this.loading = true
|
|
|
await this.initClientData()
|
|
|
this.getMonitoringData()
|
|
|
home_info().then(res => {
|
|
|
this.initDataFunc(res.data)
|
|
|
this.initAllCharts()
|
|
|
}).finally(() => (this.loading = false))
|
|
|
this.remainingPageChange(1)
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
window.removeEventListener('resize', () => {
|
|
|
this.myChart.resize()
|
|
|
this.myChart2.resize()
|
|
|
})
|
|
|
},
|
|
|
methods: {
|
|
|
initClientData() {
|
|
|
return new Promise((resolve, reject) => {
|
|
|
client_list().then(
|
|
|
res => {
|
|
|
this.clientOptions = res.data.data_list
|
|
|
this.client_id = this.clientOptions[0].client_id
|
|
|
this.rclient_id = this.client_id
|
|
|
resolve()
|
|
|
}
|
|
|
)
|
|
|
})
|
|
|
},
|
|
|
valueChange(t, value) {
|
|
|
this.getMonitoringData()
|
|
|
this.lineCharts(t)
|
|
|
},
|
|
|
getMonitoringData() {
|
|
|
const data = {
|
|
|
client_id: this.client_id,
|
|
|
time_type: this.client_date,
|
|
|
obj_type: this.radio1
|
|
|
}
|
|
|
this.loadingLineData = true
|
|
|
get_monitoring_info(stringify(data)).then(
|
|
|
res => {
|
|
|
this.linechartData = res.data
|
|
|
}
|
|
|
).finally(() => { this.loadingLineData = false })
|
|
|
},
|
|
|
remainingPageChange(page) {
|
|
|
this.rpage = page
|
|
|
this.getRemainingData()
|
|
|
},
|
|
|
getRemainingData() {
|
|
|
const data = {
|
|
|
client_id: this.rclient_id,
|
|
|
page: this.rpage,
|
|
|
page_size: this.rpage_size
|
|
|
}
|
|
|
this.rloading = true
|
|
|
home_drug_remaining(stringify(data)).then(res => {
|
|
|
this.remainingData = res.data.data
|
|
|
this.rtotal = res.data.total_count
|
|
|
}).finally(() => (this.rloading = false))
|
|
|
},
|
|
|
optClick(row) {
|
|
|
this.rowData = row
|
|
|
this.innerVisible = true
|
|
|
},
|
|
|
searchData() {
|
|
|
this.getWarnList()
|
|
|
},
|
|
|
getWarnList() {
|
|
|
const data = {
|
|
|
'seach_word': this.seach_word,
|
|
|
'object_type': this.object_type,
|
|
|
'start_time': this.start_time,
|
|
|
'end_time': this.end_time,
|
|
|
'page': this.page,
|
|
|
'page_size': this.page_size
|
|
|
}
|
|
|
this.loadingReagent = true
|
|
|
home_warning_list(stringify(data)).then(res => {
|
|
|
this.gridData = res.data.data_list
|
|
|
this.total = res.data.total_count
|
|
|
}).finally(() => (this.loadingReagent = false))
|
|
|
},
|
|
|
pageChange(page) {
|
|
|
this.page = page
|
|
|
this.getWarnList()
|
|
|
},
|
|
|
initDataFunc(data) {
|
|
|
const { new_day_record_number, warning_data_info, warning_list } = data
|
|
|
const nowstore = new_day_record_number.find(item => item.record_type === 1)
|
|
|
const nowget = new_day_record_number.find(item => item.record_type === 2)
|
|
|
const nowsend = new_day_record_number.find(item => item.record_type === 3)
|
|
|
const nowno = new_day_record_number.find(item => item.record_type === 100)
|
|
|
if (nowstore) {
|
|
|
this.desc[0].count = nowstore.type_number
|
|
|
}
|
|
|
if (nowget) {
|
|
|
this.desc[1].count = nowget.type_number
|
|
|
}
|
|
|
if (nowsend) {
|
|
|
this.desc[2].count = nowsend.type_number
|
|
|
}
|
|
|
if (nowno) {
|
|
|
this.desc[3].count = nowno.type_number
|
|
|
}
|
|
|
this.warning_data_info = warning_data_info
|
|
|
this.tableData = warning_list
|
|
|
},
|
|
|
initAllCharts() {
|
|
|
this.getLoadEcharts()
|
|
|
this.lineCharts()
|
|
|
window.addEventListener('resize', () => {
|
|
|
// 第六步，执行echarts自带的resize方法，即可做到让echarts图表自适应
|
|
|
this.myChart.resize()
|
|
|
this.myChart2.resize()
|
|
|
})
|
|
|
},
|
|
|
format(percentage) {
|
|
|
return `${percentage / 100}%`
|
|
|
},
|
|
|
warnAll() {
|
|
|
this.dialogTableVisible = true
|
|
|
// 拉去数据
|
|
|
this.getWarnList()
|
|
|
},
|
|
|
getLoadEcharts() {
|
|
|
this.myChart = this.$echarts.init(
|
|
|
document.getElementById('pie')
|
|
|
)
|
|
|
const data = this.warning_data_info.data_list.map(item => {
|
|
|
item.name = this.warning_data_map[item.object_type - 1]
|
|
|
item.value = item.type_number
|
|
|
return item
|
|
|
})
|
|
|
const option = {
|
|
|
series: [
|
|
|
{
|
|
|
name: 'Nightingale Chart',
|
|
|
type: 'pie',
|
|
|
radius: [8, 60],
|
|
|
roseType: 'area',
|
|
|
label: {
|
|
|
normal: {
|
|
|
show: true,
|
|
|
formatter: '{b}:{d}%'
|
|
|
}
|
|
|
},
|
|
|
data
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
this.myChart.setOption(option)
|
|
|
},
|
|
|
lineCharts(t) {
|
|
|
if (t) {
|
|
|
this.myChart2.clear()
|
|
|
} else {
|
|
|
this.myChart2 = this.$echarts.init(
|
|
|
document.getElementById('line')
|
|
|
)
|
|
|
}
|
|
|
const raOption = ['温度', '湿度', 'VOC含量']
|
|
|
const tmp = ['°C', 'RH%', 'ppm']
|
|
|
const option = {
|
|
|
title: {
|
|
|
text: this.options[this.client_date - 1] + raOption[this.radio1 - 1] + '变化'
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: 'axis'
|
|
|
},
|
|
|
legend: {},
|
|
|
toolbox: {
|
|
|
show: true,
|
|
|
feature: {
|
|
|
magicType: { type: ['line', 'bar'] },
|
|
|
saveAsImage: {}
|
|
|
}
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
boundaryGap: false,
|
|
|
data: this.linechartData.map(item => item.record_date)
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value',
|
|
|
axisLabel: {
|
|
|
formatter: '{value} ' + tmp[[this.radio1 - 1]]
|
|
|
}
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: this.clientOptions.find(item => item.client_id === this.client_id).client_name,
|
|
|
type: 'line',
|
|
|
areaStyle: {},
|
|
|
smooth: true,
|
|
|
data: this.linechartData.map(item => item.data_value),
|
|
|
markPoint: {
|
|
|
data: [
|
|
|
{ type: 'max', name: 'Max' },
|
|
|
{ type: 'min', name: 'Min' }
|
|
|
]
|
|
|
},
|
|
|
markLine: {
|
|
|
data: [{ type: 'average', name: 'Avg' }]
|
|
|
}
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
this.myChart2.setOption(option)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.view-container {
|
|
|
margin: 1rem;
|
|
|
|
|
|
.view-container-top {
|
|
|
display: flex;
|
|
|
margin-bottom: 1rem;
|
|
|
|
|
|
.view-container-tl {
|
|
|
width: 66%;
|
|
|
margin-right: 1rem;
|
|
|
|
|
|
.view-container-tlt {
|
|
|
padding-bottom: 1rem;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
}
|
|
|
.view-container-tr {
|
|
|
width: 33%;
|
|
|
background-color: white;
|
|
|
}
|
|
|
}
|
|
|
.view-container-bottom {
|
|
|
display: flex;
|
|
|
|
|
|
.view-container-bl {
|
|
|
width: 66%;
|
|
|
background-color: white;
|
|
|
margin-right: 1rem;
|
|
|
}
|
|
|
|
|
|
.view-container-br {
|
|
|
width: 33%;
|
|
|
background-color: white;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.view {
|
|
|
height: 14rem;
|
|
|
width: 33.75rem;
|
|
|
}
|
|
|
.header {
|
|
|
display: flex;
|
|
|
margin-bottom: 0.5rem;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
.el-input{
|
|
|
width: 150px;
|
|
|
}
|
|
|
.el-select {
|
|
|
margin-right: 1rem;
|
|
|
}
|
|
|
.title {
|
|
|
font-size: 20px;
|
|
|
font-weight: bold;
|
|
|
color: #303133;
|
|
|
}
|
|
|
}
|
|
|
.data-progress {
|
|
|
margin-top: 1rem;
|
|
|
width: 93%;
|
|
|
.data-progress-header {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
}
|
|
|
.header-warn{
|
|
|
.title {
|
|
|
font-size: 20px;
|
|
|
font-weight: bold;
|
|
|
color: #303133;
|
|
|
}
|
|
|
.count{
|
|
|
font-size: 36px;
|
|
|
font-weight: bold;
|
|
|
color: #303133;
|
|
|
margin-top: 3rem;
|
|
|
}
|
|
|
.desc{
|
|
|
font-size: 14px;
|
|
|
font-weight: 400;
|
|
|
color: #606266;
|
|
|
}
|
|
|
}
|
|
|
.view-content{
|
|
|
padding: 1rem;
|
|
|
background-color: white;
|
|
|
}
|
|
|
#pie{
|
|
|
width: 30rem;
|
|
|
height: 18rem;
|
|
|
}
|
|
|
#line{
|
|
|
width: 65rem;
|
|
|
height: 15.25rem;
|
|
|
}
|
|
|
.header-custom{
|
|
|
margin-bottom: 1rem;
|
|
|
.el-input{
|
|
|
width: 12.5rem;
|
|
|
margin-right: 1rem;
|
|
|
}
|
|
|
.el-select{
|
|
|
margin-right: 1rem;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
