|
|
|
|
@ -1,5 +1,9 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="view-container">
|
|
|
|
|
<div
|
|
|
|
|
v-loading="loading"
|
|
|
|
|
class="view-container"
|
|
|
|
|
element-loading-text="拼命加载中"
|
|
|
|
|
>
|
|
|
|
|
<!-- 上半部分-->
|
|
|
|
|
<div class="view-container-top">
|
|
|
|
|
<div class="view-container-tl ">
|
|
|
|
|
@ -38,7 +42,17 @@
|
|
|
|
|
</div>
|
|
|
|
|
<div class="view-container-tr view-content">
|
|
|
|
|
<div class="header">
|
|
|
|
|
<div class="title">库存余量</div>
|
|
|
|
|
<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 size="small">查看全部</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
@ -52,7 +66,7 @@
|
|
|
|
|
:value="item.value"
|
|
|
|
|
/>
|
|
|
|
|
</el-select>
|
|
|
|
|
<el-select v-model="value" size="small" style="margin-right: 0" placeholder="请选择">
|
|
|
|
|
<el-select v-model="value" :disabled="rloading" size="small" style="margin-right: 0" placeholder="请选择">
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in options"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
@ -62,39 +76,38 @@
|
|
|
|
|
</el-select>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="view">
|
|
|
|
|
<div class="data-progress">
|
|
|
|
|
<div class="data-progress-header">
|
|
|
|
|
<div>三氯甲烷</div><div>50/100</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<el-progress :percentage="50" :stroke-width="20" text-inside />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="data-progress">
|
|
|
|
|
<div class="data-progress-header">
|
|
|
|
|
<div>三氯甲烷</div><div>50/100</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<el-progress :percentage="50" :stroke-width="24" text-inside />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="data-progress">
|
|
|
|
|
<div class="data-progress-header">
|
|
|
|
|
<div>三氯甲烷</div><div>50/100</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<el-progress :percentage="50" :stroke-width="24" text-inside />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="data-page">
|
|
|
|
|
<el-table
|
|
|
|
|
v-loading="rloading"
|
|
|
|
|
:data="remainingData"
|
|
|
|
|
height="200"
|
|
|
|
|
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 style="text-align: center">
|
|
|
|
|
<el-pagination
|
|
|
|
|
layout="prev, pager, next"
|
|
|
|
|
:total="1000"
|
|
|
|
|
:total="rtotal"
|
|
|
|
|
hide-on-single-page
|
|
|
|
|
: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">
|
|
|
|
|
@ -108,147 +121,370 @@
|
|
|
|
|
<div class="content" style="overflow: auto">
|
|
|
|
|
<el-table
|
|
|
|
|
:data="tableData"
|
|
|
|
|
style="width: 100%"
|
|
|
|
|
height="170"
|
|
|
|
|
>
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="date"
|
|
|
|
|
label="日期"
|
|
|
|
|
width="180"
|
|
|
|
|
align="center"
|
|
|
|
|
prop="warning_date"
|
|
|
|
|
label="预警时间"
|
|
|
|
|
/>
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="name"
|
|
|
|
|
label="姓名"
|
|
|
|
|
width="180"
|
|
|
|
|
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
|
|
|
|
|
prop="address"
|
|
|
|
|
label="地址"
|
|
|
|
|
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">
|
|
|
|
|
<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="收货地址" :visible.sync="dialogTableVisible">
|
|
|
|
|
<el-table :data="gridData">
|
|
|
|
|
<el-table-column property="date" label="日期" width="150" />
|
|
|
|
|
<el-table-column property="name" label="姓名" width="200" />
|
|
|
|
|
<el-table-column property="address" label="地址" />
|
|
|
|
|
<el-dialog title="预警信息" width="70%" :visible.sync="dialogTableVisible">
|
|
|
|
|
<div class="header">
|
|
|
|
|
<el-date-picker
|
|
|
|
|
v-model="start_time"
|
|
|
|
|
size="small"
|
|
|
|
|
type="datetime"
|
|
|
|
|
placeholder="选择生产日期"
|
|
|
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
|
|
/>
|
|
|
|
|
<el-date-picker
|
|
|
|
|
v-model="end_time"
|
|
|
|
|
size="small"
|
|
|
|
|
type="datetime"
|
|
|
|
|
placeholder="选择过期日期"
|
|
|
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
|
|
/>
|
|
|
|
|
<el-select v-model="object_type" size="small" 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" size="small" placeholder="请输入搜索试剂名称" />
|
|
|
|
|
<el-button size="small" :disabled="loadingReagent" type="primary" icon="el-icon-search" @click="searchData">搜索</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
<el-table
|
|
|
|
|
v-loading="loadingReagent"
|
|
|
|
|
:data="gridData"
|
|
|
|
|
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" size="small" @click="optClick(scope.row)">操作</el-button>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
<div style="text-align: center">
|
|
|
|
|
<el-pagination
|
|
|
|
|
layout="prev, pager, next"
|
|
|
|
|
hide-on-single-page
|
|
|
|
|
:disabled="loadingReagent"
|
|
|
|
|
:current-page.sync="page"
|
|
|
|
|
:total="total"
|
|
|
|
|
:page-size.sync="page_size"
|
|
|
|
|
@current-change="pageChange"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<el-dialog
|
|
|
|
|
width="30%"
|
|
|
|
|
title="内层 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>取消</el-button>
|
|
|
|
|
<el-button type="primary">确认受邀</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 } from '@/api/reagent/overView'
|
|
|
|
|
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: 90,
|
|
|
|
|
count: 0,
|
|
|
|
|
desc: '今日入库',
|
|
|
|
|
img: require('@/assets/3-主概览/今日入库.png')
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
count: 80,
|
|
|
|
|
count: 0,
|
|
|
|
|
desc: '今日领用',
|
|
|
|
|
img: require('@/assets/3-主概览/今日领用.png')
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
count: 70,
|
|
|
|
|
count: 0,
|
|
|
|
|
desc: '今日归还',
|
|
|
|
|
img: require('@/assets/3-主概览/今日归还.png')
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
count: 60,
|
|
|
|
|
desc: '今日归还',
|
|
|
|
|
count: 0,
|
|
|
|
|
desc: '今日未归还',
|
|
|
|
|
img: require('@/assets/3-主概览/今日未归还.png')
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
tableData: [{
|
|
|
|
|
date: '2016-05-02',
|
|
|
|
|
name: '王小虎',
|
|
|
|
|
address: '上海市普陀区金沙江路 1518 弄'
|
|
|
|
|
}, {
|
|
|
|
|
date: '2016-05-04',
|
|
|
|
|
name: '王小虎',
|
|
|
|
|
address: '上海市普陀区金沙江路 1517 弄'
|
|
|
|
|
}, {
|
|
|
|
|
date: '2016-05-01',
|
|
|
|
|
name: '王小虎',
|
|
|
|
|
address: '上海市普陀区金沙江路 1519 弄'
|
|
|
|
|
}, {
|
|
|
|
|
date: '2016-05-03',
|
|
|
|
|
name: '王小虎',
|
|
|
|
|
address: '上海市普陀区金沙江路 1516 弄'
|
|
|
|
|
}]
|
|
|
|
|
tableData: [],
|
|
|
|
|
options: [],
|
|
|
|
|
value: '',
|
|
|
|
|
radio1: '',
|
|
|
|
|
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
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.loading = true
|
|
|
|
|
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: {
|
|
|
|
|
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))
|
|
|
|
|
},
|
|
|
|
|
// 页面初始化挂载dom
|
|
|
|
|
mounted() {
|
|
|
|
|
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()
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
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 = {
|
|
|
|
|
// legend: {
|
|
|
|
|
// align: 'left'
|
|
|
|
|
// orient: 'vertical',
|
|
|
|
|
// left: 'left'
|
|
|
|
|
// },
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: 'Nightingale Chart',
|
|
|
|
|
type: 'pie',
|
|
|
|
|
roseType: 'area',
|
|
|
|
|
// radius: [50, 250],
|
|
|
|
|
center: ['50%', '50%'],
|
|
|
|
|
itemStyle: {
|
|
|
|
|
borderRadius: 8
|
|
|
|
|
label: {
|
|
|
|
|
normal: {
|
|
|
|
|
show: true,
|
|
|
|
|
formatter: '{b}:{d}%'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data: [
|
|
|
|
|
{ value: 40, name: 'rose 1' },
|
|
|
|
|
{ value: 38, name: 'rose 2' },
|
|
|
|
|
{ value: 32, name: 'rose 3' },
|
|
|
|
|
{ value: 30, name: 'rose 4' },
|
|
|
|
|
{ value: 28, name: 'rose 5' },
|
|
|
|
|
{ value: 26, name: 'rose 6' },
|
|
|
|
|
{ value: 22, name: 'rose 7' },
|
|
|
|
|
{ value: 18, name: 'rose 8' }
|
|
|
|
|
]
|
|
|
|
|
data
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
@ -358,7 +594,9 @@ export default {
|
|
|
|
|
margin-bottom: 0.5rem;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
.el-input{
|
|
|
|
|
width: 150px;
|
|
|
|
|
}
|
|
|
|
|
.el-select {
|
|
|
|
|
margin-right: 1rem;
|
|
|
|
|
}
|
|
|
|
|
@ -376,16 +614,33 @@ export default {
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.header-warn{
|
|
|
|
|
.title {
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: #303133;
|
|
|
|
|
}
|
|
|
|
|
.count{
|
|
|
|
|
font-size: 36px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: #303133;
|
|
|
|
|
}
|
|
|
|
|
.desc{
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
color: #606266;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.view-content{
|
|
|
|
|
padding: 1rem;
|
|
|
|
|
background-color: white;
|
|
|
|
|
}
|
|
|
|
|
#pie{
|
|
|
|
|
width: 30rem;
|
|
|
|
|
height: 15rem;
|
|
|
|
|
height: 13rem;
|
|
|
|
|
}
|
|
|
|
|
#line{
|
|
|
|
|
width: 65rem;
|
|
|
|
|
height: 14.5rem;
|
|
|
|
|
height: 13rem;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
duan
2 years ago