qyt
9 months ago
parent
59cc6f1762
commit
6df86a9b32
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1 @@
|
||||
{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"adcode":710000,"name":"台湾省","center":[121.509062,25.044332],"centroid":[120.971485,23.749452],"childrenNum":0,"level":"province","acroutes":[100000],"parent":{"adcode":100000}},"geometry":{"type":"MultiPolygon","coordinates":[[[[120.443558,22.441245],[120.517584,22.408536],[120.569903,22.361728],[120.640505,22.241347],[120.659209,22.15432],[120.662001,22.066983],[120.651464,22.033165],[120.667691,21.983168],[120.70157,21.927065],[120.743246,21.915569],[120.78155,21.923957],[120.85468,21.883333],[120.87291,21.897387],[120.866482,21.98436],[120.907315,22.033208],[120.904154,22.119757],[120.914955,22.302718],[120.981658,22.528305],[121.015009,22.584168],[121.033292,22.650725],[121.078498,22.669656],[121.170544,22.723133],[121.210481,22.770665],[121.237931,22.836327],[121.324708,22.945666],[121.354687,23.01006],[121.370388,23.084347],[121.409535,23.102669],[121.430294,23.137196],[121.415015,23.195973],[121.440358,23.272096],[121.479558,23.3223],[121.497788,23.419789],[121.521497,23.483198],[121.523078,23.538708],[121.587778,23.76102],[121.621604,23.92075],[121.659381,24.006893],[121.639992,24.064276],[121.643838,24.097713],[121.678085,24.133906],[121.689044,24.174401],[121.809172,24.339055],[121.826717,24.423579],[121.867498,24.478978],[121.885464,24.529677],[121.892524,24.617912],[121.862598,24.671515],[121.837993,24.76015],[121.845053,24.836269],[121.932883,24.938645],[122.012178,25.001469],[121.980776,25.03079],[121.947425,25.031955],[121.917077,25.137908],[121.842155,25.135332],[121.782407,25.160425],[121.750531,25.160716],[121.707327,25.191493],[121.700319,25.226913],[121.655324,25.241859],[121.623026,25.294694],[121.584986,25.308926],[121.535038,25.307515],[121.444415,25.270624],[121.413487,25.238912],[121.371864,25.159885],[121.319281,25.140691],[121.209322,25.127104],[121.133135,25.078728],[121.102102,25.075153],[121.024704,25.040479],[121.009688,24.993649],[120.960899,24.940227],[120.908475,24.852012],[120.892299,24.767526],[120.823753,24.688321],[120.762371,24.658335],[120.688661,24.600678],[120.64277,24.490172],[120.589187,24.432354],[120.546299,24.370413],[120.521009,24.312038],[120.470534,24.24259],[120.451461,24.182691],[120.392029,24.11824],[120.316158,23.984881],[120.278276,23.927798],[120.245768,23.840553],[120.175377,23.807385],[120.102773,23.700981],[120.094817,23.587466],[120.121741,23.504664],[120.107831,23.341264],[120.081434,23.29191],[120.018947,23.073115],[120.029537,23.048623],[120.131382,23.002118],[120.149138,22.896715],[120.200403,22.721101],[120.274272,22.560181],[120.297191,22.531315],[120.443558,22.441245]]],[[[124.542984,25.903911],[124.586346,25.913777],[124.572805,25.93974],[124.541825,25.931031],[124.542984,25.903911]]],[[[123.445286,25.725966],[123.472104,25.713024],[123.508933,25.723237],[123.514834,25.751226],[123.483063,25.768587],[123.444496,25.746514],[123.445286,25.725966]]],[[[119.64597,23.55091],[119.701081,23.550657],[119.678057,23.600041],[119.610089,23.603953],[119.594388,23.577245],[119.566306,23.584732],[119.562565,23.530377],[119.573788,23.505885],[119.609141,23.503864],[119.64597,23.55091]]],[[[123.667207,25.914066],[123.707092,25.916873],[123.678008,25.938667],[123.667207,25.914066]]],[[[119.506031,23.625567],[119.505241,23.575814],[119.472416,23.557136],[119.523207,23.563699],[119.525578,23.624895],[119.506031,23.625567]]],[[[119.49739,23.386683],[119.495125,23.350156],[119.516885,23.349903],[119.49739,23.386683]]],[[[119.557454,23.666474],[119.604083,23.616989],[119.615516,23.660925],[119.586485,23.675974],[119.557454,23.666474]]],[[[121.46823,22.676644],[121.476502,22.64166],[121.513541,22.631833],[121.5147,22.67639],[121.46823,22.676644]]],[[[121.510538,22.087185],[121.507693,22.048523],[121.534089,22.022146],[121.594522,21.995382],[121.604586,22.022699],[121.575028,22.037122],[121.575607,22.084421],[121.510538,22.087185]]],[[[122.097533,25.500168],[122.093581,25.47183],[122.124825,25.475932],[122.097533,25.500168]]],[[[119.421467,23.216684],[119.421309,23.18935],[119.453396,23.217697],[119.421467,23.216684]]],[[[120.355042,22.327259],[120.395454,22.342287],[120.383072,22.355573],[120.355042,22.327259]]]]}}]}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<div class="block">
|
||||
|
||||
<el-table v-loading="loading" :data="list" key="1" style="width: 100%;margin-top: -10px"
|
||||
@row-click="intentDetail"
|
||||
>
|
||||
<el-table-column label="序号" type="index" width="55"></el-table-column>
|
||||
<el-table-column label="公告时间" prop="eventTime" width="170" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="事件名称" prop="eventMsg" width="190" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="事件描述" prop="remark" width="300" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="操作" width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
@click="intentDetail( scope.row)"
|
||||
>选择
|
||||
</el-button>
|
||||
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:limit.sync="filterQuery.limit"
|
||||
:page.sync="filterQuery.page"
|
||||
@pagination="handleCurrentChange"
|
||||
></pagination>
|
||||
<!-- <el-pagination-->
|
||||
<!-- style="float: right;margin-top: 15px"-->
|
||||
<!-- :page-size="20"-->
|
||||
<!-- :pager-count="1"-->
|
||||
<!-- layout="prev, pager, next"-->
|
||||
<!-- :total="2">-->
|
||||
<!-- </el-pagination>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {currentGET, currentPOST} from "@/api";
|
||||
|
||||
export default {
|
||||
name: "dialogAdverseMsg",
|
||||
data() {
|
||||
return {
|
||||
companyTypeMap: {
|
||||
1: "生产企业",
|
||||
2: "经营企业",
|
||||
3: "医疗机构",
|
||||
},
|
||||
list: [],
|
||||
total: 0,
|
||||
filterQuery: {
|
||||
page: 1,
|
||||
limit: 10,
|
||||
companyName: null,
|
||||
companyIdFk: null,
|
||||
},
|
||||
regionCode: null,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
editQuery: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
closeDialog: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getList();
|
||||
},
|
||||
|
||||
methods: {
|
||||
getList() {
|
||||
currentGET('adverseMsg', this.filterQuery
|
||||
).then(res => {
|
||||
if (res.code == 20000) {
|
||||
this.list = res.data.list || [];
|
||||
this.total = res.data.total || 0;
|
||||
} else {
|
||||
this.list = []
|
||||
this.$Message({
|
||||
text: res.msg,
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCurrentChange() {
|
||||
this.getList();
|
||||
},
|
||||
intentDetail() {
|
||||
this.closeDialog();
|
||||
},
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
|
||||
/*最外层透明*/
|
||||
::v-deep .el-table,
|
||||
::v-deep .el-table__expanded-cell {
|
||||
background-color: transparent !important;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 表格内背景颜色 */
|
||||
::v-deep .el-table th,
|
||||
::v-deep .el-table tr,
|
||||
::v-deep .el-table td {
|
||||
background-color: transparent !important;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "index"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,389 @@
|
||||
<template>
|
||||
<div>
|
||||
<div id="container" style="margin-top: 15px; position: relative;z-index: 1;"/>
|
||||
|
||||
<div style="position: absolute;top: 0;left: 0;z-index: 2;">
|
||||
|
||||
<!-- <el-select-->
|
||||
<!-- v-model="todayTarget"-->
|
||||
<!-- placeholder=""-->
|
||||
<!-- class="mySelect"-->
|
||||
<!-- popper-class="mySelectPopper"-->
|
||||
<!-- >-->
|
||||
<!-- <el-option-->
|
||||
<!-- v-for="item in todayTargetList"-->
|
||||
<!-- :label="item.label"-->
|
||||
<!-- :value="item.value"-->
|
||||
<!-- ></el-option>-->
|
||||
<!-- </el-select>-->
|
||||
|
||||
|
||||
<li class="map_title"
|
||||
style="width: 300px;height: 150px;margin-top: 170px;margin-left: 20px;text-align: center;padding-top: 15px">
|
||||
<el-row>
|
||||
<H1 style="color: white;font-weight: bold;margin-bottom: 15px">2023年1月23日不良事件(测试)</H1>
|
||||
</el-row>
|
||||
<el-row style="margin-top: 15px">
|
||||
<span style="color: white;font-size: 14px;text-align: left">XXX医院发现过期的“一次性无菌注射器”,“可吸收性外科缝线”,及“一次性使用肝素帽”等医疗器械</span>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<span></span>
|
||||
</el-row>
|
||||
|
||||
</li>
|
||||
|
||||
<!-- <el-select v-model="badEvent" style="width: 100%;margin-top: 170px;margin-left: 20px"-->
|
||||
<!-- popper-class="mySelectPopper"-->
|
||||
<!-- class="mySelect"-->
|
||||
<!-- >-->
|
||||
<!-- <el-option label="2023年1月23日不良事件(测试)" :value=1></el-option>-->
|
||||
<!-- <!– <el-option label="否" :value=2></el-option>–>-->
|
||||
<!-- </el-select>-->
|
||||
|
||||
|
||||
<!-- <div class="nav">-->
|
||||
<!-- <ul>-->
|
||||
<!-- <li class="map_nav" style="width: 300px">-->
|
||||
<!-- <a href="#" v-on:click="categoryClick();">2023年1月23日不良事件(测试)</a>-->
|
||||
<!-- </li>-->
|
||||
<!-- <li class="map_nav" style="width: 300px">-->
|
||||
<!-- <a href="#" v-on:click="companyClick();">2023年4月18日不良事件(测试)</a>-->
|
||||
<!-- </li>-->
|
||||
<!-- </ul>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
|
||||
|
||||
<div style="position: absolute;bottom: 0;right: 0;z-index: 3;margin-bottom: 50px;margin-right: 60px">
|
||||
|
||||
<li class="map_nav"
|
||||
style="width: 200px;height: 50px;margin-top: 170px;margin-left: 20px;text-align: center;padding-top: 15px">
|
||||
<a href="#" v-on:click="popAverse(); " style="color: white">不良事件列表</a>
|
||||
</li>
|
||||
|
||||
</div>
|
||||
<el-dialog
|
||||
title="查询不良事件"
|
||||
:visible.sync="addDialogVisible"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
v-if="addDialogVisible"
|
||||
append-to-body
|
||||
width="55%"
|
||||
>
|
||||
<dialogAdverseMsg
|
||||
:editQuery="curCorp"
|
||||
:closeDialog="closeDialog"
|
||||
></dialogAdverseMsg>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script type=" text
|
||||
/javascript">
|
||||
window._AMapSecurityConfig = {
|
||||
securityJsCode: 'aa4657762e81008f99de042076c83384',
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
<script type="text/javascript"
|
||||
src="https://webapi.amap.com/maps?v=1.4.15&key=5431bae8a043ee5d3ebdd7ddd4e58176"></script>
|
||||
|
||||
<script>
|
||||
import {Flow} from '@antv/l7plot';
|
||||
import {currentGET} from "@/api/modules";
|
||||
import dialogAdverseMsg from "./dialogAdverseMsg.vue"
|
||||
|
||||
export default {
|
||||
name: "l7Flow",
|
||||
|
||||
data() {
|
||||
return {
|
||||
badEvent: 1,
|
||||
unionQuery: {
|
||||
udiCode: null,
|
||||
},
|
||||
addDialogVisible: false,
|
||||
filterQuery: {
|
||||
udiCode: '0106943242398334112201101724011010JY110',
|
||||
ylqxzcrbarmc: null,
|
||||
cpmctymc: null,
|
||||
ggxh: null,
|
||||
nameCode: null,
|
||||
batchNo: null,
|
||||
companyName: "",
|
||||
page: 1,
|
||||
limit: 10,
|
||||
traceType: 1,
|
||||
},
|
||||
curCorp: null,
|
||||
udidlList: [],
|
||||
editQuery: {},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
initMap(data) {
|
||||
window._AMapSecurityConfig = {
|
||||
securityJsCode: 'aa4657762e81008f99de042076c83384',
|
||||
}
|
||||
new Flow('container', {
|
||||
map: {
|
||||
type: 'amap',
|
||||
style: 'dark',
|
||||
center: [116.3956, 39.9392],
|
||||
pitch: 0,
|
||||
zoom: 10,
|
||||
token: '5431bae8a043ee5d3ebdd7ddd4e58176',
|
||||
viewMode: '3D',
|
||||
},
|
||||
source: {
|
||||
data: data,
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'x1',
|
||||
y: 'y1',
|
||||
x1: 'x',
|
||||
y1: 'y',
|
||||
},
|
||||
},
|
||||
autoFit: true,
|
||||
shape: 'arc',
|
||||
size: 1.5,
|
||||
color: {
|
||||
field: 'count',
|
||||
value: ['rgba(230,129,28,0.9)', 'rgba(229,25,97,0.9)', 'rgba(1,124,247,0.9)'],
|
||||
scale: {type: 'quantize'},
|
||||
},
|
||||
style: {
|
||||
opacity: 0.8,
|
||||
segmentNumber: 60,
|
||||
},
|
||||
animate: {
|
||||
interval: 2,
|
||||
trailLength: 1,
|
||||
duration: 2,
|
||||
},
|
||||
radiation: {
|
||||
color: 'white',
|
||||
size: 30,
|
||||
},
|
||||
label: {
|
||||
visible: true,
|
||||
field: 'count',
|
||||
style: {
|
||||
fill: '#000',
|
||||
opacity: 0.8,
|
||||
fontSize: 10,
|
||||
stroke: '#fff',
|
||||
strokeWidth: 2,
|
||||
textAllowOverlap: false,
|
||||
padding: [5, 5],
|
||||
textOffset: [0, 35],
|
||||
},
|
||||
},
|
||||
zoom: {
|
||||
position: 'bottomright',
|
||||
},
|
||||
scale: {
|
||||
position: 'bottomright',
|
||||
},
|
||||
layerMenu: {
|
||||
position: 'topright',
|
||||
},
|
||||
legend: {
|
||||
position: 'bottomleft',
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
getInputFocus(event) {
|
||||
event.currentTarget.select();
|
||||
},
|
||||
enterKey() {
|
||||
this.getData();
|
||||
},
|
||||
getData() {
|
||||
this.pageflag = true;
|
||||
currentGET("amapFlow").then((res) => {
|
||||
this.pageflag = false;
|
||||
if (res.code == 20000) {
|
||||
this.initMap(res.data);
|
||||
this.$refs.inputRef.focus();
|
||||
this.$refs.inputRef.select();
|
||||
} else {
|
||||
this.pageflag = false;
|
||||
this.$Message({
|
||||
text: res.msg,
|
||||
type: "warning",
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
closeDialog() {
|
||||
this.addDialogVisible = false;
|
||||
},
|
||||
|
||||
popAverse() {
|
||||
this.addDialogVisible = true;
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
dialogAdverseMsg
|
||||
},
|
||||
created() {
|
||||
this.getData();
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
|
||||
.box-card {
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #EBEEF5;
|
||||
background-color: #00000000;
|
||||
overflow: hidden;
|
||||
color: #303133;
|
||||
-webkit-transition: .3s;
|
||||
transition: .3s
|
||||
}
|
||||
|
||||
.map_nav {
|
||||
border-bottom: 4px solid #8d3562;
|
||||
box-shadow: -10px 0px 10px #2875a0 inset, /*左边阴影*/ 0px -10px 10px #2875a0 inset, /*上边阴影*/ 10px 0px 15px #2875a0 inset, /*å³è¾¹é˜´å½±*/ 0px 10px 15px #2875a0 inset;
|
||||
box-sizing: border-box;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
|
||||
.chooseItem {
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
.el-select-dropdown .el-select-dropdown__item.hover {
|
||||
background-color: #012049 !important;
|
||||
}
|
||||
|
||||
.el-select-dropdown {
|
||||
background: #00122a !important;
|
||||
border: 1px solid #83929d !important;
|
||||
}
|
||||
|
||||
.mySelect .el-input__inner {
|
||||
font-size: 24px !important;
|
||||
text-align: center;
|
||||
background: rgba(80, 136, 151, 0.1) !important;
|
||||
border: transparent !important;
|
||||
border-radius: 12px !important;
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
height: 100% !important;
|
||||
line-height: 100% !important;
|
||||
}
|
||||
|
||||
.mySelect {
|
||||
width: 180px;
|
||||
height: 100%;
|
||||
/*background: url("../../assets/img/") no-repeat;*/
|
||||
/*background-color: #042237 !important;*/
|
||||
height: 45px !important;
|
||||
width: 100px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #05658c !important;
|
||||
background-color: #042237 !important;
|
||||
}
|
||||
|
||||
.mySelectPopper {
|
||||
border: 1px solid #3062ff;
|
||||
background-color: #00122a;
|
||||
}
|
||||
|
||||
.mySelectPopper .el-select-dropdown__item.hover {
|
||||
background-color: #14265d;
|
||||
}
|
||||
|
||||
.mySelectPopper .el-select-dropdown__item.hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.mySelectPopper .el-input__inner {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.mySelectPopper .el-select-dropdown__item {
|
||||
color: #97bffc;
|
||||
font-size: 24px !important;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
.el-select-dropdown {
|
||||
background: #1f3b53 !important;
|
||||
border: 1px solid #83929d !important;
|
||||
}
|
||||
|
||||
.mySelectPopper .popper__arrow::after {
|
||||
border-bottom-color: #97bffc !important;
|
||||
}
|
||||
|
||||
.mySelectPopper .popper__arrow {
|
||||
border-bottom-color: #3062ff !important;
|
||||
}
|
||||
|
||||
.el-select
|
||||
.el-input
|
||||
.el-select__caret.el-input__icon::before {
|
||||
content: "\e790" !important;
|
||||
color: #02bff4;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.el-select .el-input .el-select__caret {
|
||||
transform: rotateZ(0deg) !important;
|
||||
}
|
||||
|
||||
.map_title {
|
||||
/*box-shadow: -10px 0px 10px #2875a0 inset, !*左边阴影*! 0px -10px 10px #2875a0 inset, !*上边阴影*! 10px 0px 15px #2875a0 inset, !*å³è¾¹é˜´å½±*! 0px 10px 15px #2875a0 inset;*/
|
||||
box-sizing: border-box;
|
||||
background-color: rgba(102, 131, 157, 0.65);
|
||||
margin-left: -12px;
|
||||
border-bottom: 4px solid #35788d;
|
||||
}
|
||||
|
||||
|
||||
#container {
|
||||
width: 1880px;
|
||||
height: 880px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,175 @@
|
||||
<!--
|
||||
* @Author: daidai
|
||||
* @Date: 2022-03-01 15:51:43
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2022-09-29 15:12:46
|
||||
* @FilePath: \web-pc\src\pages\big-screen\view\indexs\pinZhongItem.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="right_bottom">
|
||||
<dv-capsule-chart :config="config" style="width:100%;height:260px"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {currentGET} from '@/api/modules'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
gatewayno: '',
|
||||
config: {
|
||||
showValue: true,
|
||||
unit: "个",
|
||||
data: []
|
||||
},
|
||||
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getData()
|
||||
|
||||
},
|
||||
computed: {},
|
||||
mounted() {
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.clearData()
|
||||
},
|
||||
methods: {
|
||||
clearData() {
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
}
|
||||
},
|
||||
//轮询
|
||||
switper() {
|
||||
if (this.timer) {
|
||||
return
|
||||
}
|
||||
let looper = (a) => {
|
||||
this.getData()
|
||||
};
|
||||
this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
|
||||
},
|
||||
getData() {
|
||||
this.pageflag = true
|
||||
// this.pageflag =false
|
||||
currentGET('productCategory', {gatewayno: this.gatewayno}).then(res => {
|
||||
|
||||
if (!this.timer) {
|
||||
console.log('企业维护产品数量', res);
|
||||
}
|
||||
if (res.code == 20000) {
|
||||
|
||||
const objectArray = res.data.map(item => { // 将数据转换为对象数组
|
||||
return {
|
||||
value: item.nmapCount,
|
||||
name: item.categoryName,
|
||||
// 其他属性...
|
||||
};
|
||||
});
|
||||
console.log('企业维护产品数量', objectArray);
|
||||
this.config = {
|
||||
...this.config,
|
||||
data: objectArray
|
||||
}
|
||||
|
||||
|
||||
this.switper()
|
||||
} else {
|
||||
this.pageflag = false
|
||||
this.srcList = []
|
||||
this.$Message({
|
||||
text: res.msg,
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.list_Wrap {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
:deep(.kong) {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.sbtxSwiperclass {
|
||||
.img_wrap {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.right_bottom {
|
||||
box-sizing: border-box;
|
||||
padding: 0 16px;
|
||||
|
||||
.searchform {
|
||||
height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.searchform_item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
label {
|
||||
margin-right: 10px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
button {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
input {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.img_wrap {
|
||||
display: flex;
|
||||
// justify-content: space-around;
|
||||
box-sizing: border-box;
|
||||
padding: 0 0 20px;
|
||||
// overflow-x: auto;
|
||||
|
||||
li {
|
||||
width: 105px;
|
||||
height: 137px;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
// background: #84ccc9;
|
||||
// border: 1px solid #ffffff;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
margin: 0 10px;
|
||||
|
||||
img {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.noData {
|
||||
width: 100%;
|
||||
line-height: 100px;
|
||||
text-align: center;
|
||||
color: rgb(129, 128, 128);
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,230 @@
|
||||
<!--
|
||||
* @Author: daidai
|
||||
* @Date: 2022-03-01 15:51:43
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2022-09-29 15:12:46
|
||||
* @FilePath: \web-pc\src\pages\big-screen\view\indexs\pinZhongItem.vue
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<el-table v-loading="loading" :data="list"
|
||||
style="width: 100%"
|
||||
:cell-style="{ color: '#fff' }"
|
||||
:header-cell-style="{ color: '#fff' }"
|
||||
highlight-current-row
|
||||
@row-click="intentDetail"
|
||||
:row-class-name="tableRowClassName">
|
||||
<el-table-column label="序号" type="index" width="55"></el-table-column>
|
||||
<el-table-column label="时间" prop="updateTime" width="150" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="单位名称" prop="companyName" width="180" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="单位类型" prop="bussinessStatus" width="120" show-overflow-tooltip>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ companyTypeMap[scope.row.bussinessStatus] }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="产品通用名" prop="productName" width="150" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="规格型号" prop="ggxh" width="150" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="注册/备案号" prop="zczbhhzbapzbh" width="150" show-overflow-tooltip></el-table-column>
|
||||
|
||||
</el-table>
|
||||
|
||||
<el-pagination
|
||||
style="float: right;margin-top: 15px"
|
||||
:page-size="limit"
|
||||
@current-change="handleChange"
|
||||
layout="prev, pager, next"
|
||||
:total="total"
|
||||
:current-page="page"
|
||||
></el-pagination>
|
||||
|
||||
|
||||
<!-- <el-dialog-->
|
||||
<!-- title="企业信息"-->
|
||||
<!-- :visible.sync="addDialogVisible"-->
|
||||
<!-- :close-on-click-modal="false"-->
|
||||
<!-- :close-on-press-escape="false"-->
|
||||
<!-- v-if="addDialogVisible"-->
|
||||
<!-- append-to-body-->
|
||||
<!-- width="60%"-->
|
||||
<!-- >-->
|
||||
<!-- <dialogCorpProduct-->
|
||||
<!-- :editQuery="curCorp"-->
|
||||
<!-- ></dialogCorpProduct>-->
|
||||
<!-- </el-dialog>-->
|
||||
|
||||
<el-dialog
|
||||
title="异常信息"
|
||||
:visible.sync="addDialogVisible"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
v-if="addDialogVisible"
|
||||
append-to-body
|
||||
width="75%"
|
||||
>
|
||||
<dialogWarnInfo
|
||||
:editQuery="curCorp"
|
||||
></dialogWarnInfo>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {currentGET, currentPOST} from '@/api/modules'
|
||||
import dialogWarnInfo from "../../../../../udi-cpt-bigvis/src/views/manu/dialogWarnInfo.vue";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
gatewayno: '',
|
||||
config: {
|
||||
showValue: true,
|
||||
unit: "",
|
||||
data: []
|
||||
},
|
||||
activeName: 'first',
|
||||
list: [],
|
||||
page: 1,
|
||||
limit: 10,
|
||||
total: 0,
|
||||
addDialogVisible: false,
|
||||
curCorp: {},
|
||||
companyTypeMap: {
|
||||
1: "生产企业",
|
||||
2: "经营企业",
|
||||
3: "医疗机构",
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
props: {
|
||||
regionCode: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getData()
|
||||
|
||||
},
|
||||
computed: {},
|
||||
mounted() {
|
||||
},
|
||||
components: {dialogWarnInfo},
|
||||
beforeDestroy() {
|
||||
this.clearData()
|
||||
},
|
||||
methods: {
|
||||
|
||||
tableRowClassName({row, rowIndex}) {
|
||||
if (rowIndex === 1) {
|
||||
return 'warning-row';
|
||||
} else if (rowIndex === 3) {
|
||||
return 'success-row';
|
||||
}
|
||||
return '';
|
||||
},
|
||||
|
||||
clearData() {
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
}
|
||||
},
|
||||
//轮询
|
||||
switper() {
|
||||
if (this.timer) {
|
||||
return
|
||||
}
|
||||
let looper = (a) => {
|
||||
this.getData()
|
||||
};
|
||||
this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
|
||||
},
|
||||
|
||||
|
||||
intentDetail(row) {
|
||||
this.curCorp = row;
|
||||
this.addDialogVisible = true;
|
||||
},
|
||||
getData() {
|
||||
currentGET('warnMsg', {page: this.page, limit: this.limit}).then(res => {
|
||||
if (res.code == 20000) {
|
||||
this.list = res.data.list
|
||||
} else {
|
||||
this.pageflag = false
|
||||
this.srcList = []
|
||||
this.$Message({
|
||||
text: res.msg,
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
}
|
||||
)
|
||||
},
|
||||
}
|
||||
,
|
||||
}
|
||||
;
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.list_Wrap {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
:deep(.kong) {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
//.el-table .warning-row {
|
||||
// background: oldlace;
|
||||
//}
|
||||
//
|
||||
//.el-table .success-row {
|
||||
// background: #f0f9eb;
|
||||
//}
|
||||
|
||||
/*最外层透明*/
|
||||
::v-deep .el-table,
|
||||
::v-deep .el-table__expanded-cell {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/* 表格内背景颜色 */
|
||||
::v-deep .el-table th,
|
||||
::v-deep .el-table tr,
|
||||
::v-deep .el-table td {
|
||||
|
||||
.warning-row {
|
||||
background-color: #e24419;
|
||||
}
|
||||
|
||||
.success-row {
|
||||
background-color: #57d213;
|
||||
}
|
||||
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
::v-deep .el-table th {
|
||||
background-color: #2f70be !important;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
::v-deep .el-tabs__item {
|
||||
font-size: 14px; /* 调整字体大小 / / 调整字体颜色 */
|
||||
color: #d2c4c4;
|
||||
}
|
||||
|
||||
::v-deep .el-tabs__item.is-active {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,156 @@
|
||||
<!--
|
||||
* @Author: daidai
|
||||
* @Date: 2022-02-28 16:16:42
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2022-10-25 09:18:22
|
||||
* @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-bottom.vue
|
||||
-->
|
||||
<template>
|
||||
<Echart id="leftCenter" :options="options" class="left_center_inner" v-if="pageflag" ref="charts"/>
|
||||
<Reacquire v-else @onclick="getData" style="line-height:200px">
|
||||
重新获取
|
||||
</Reacquire>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {currentGET} from '@/api/modules'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
countUserNumData: {
|
||||
lockNum: 0,
|
||||
onlineNum: 0,
|
||||
offlineNum: 0,
|
||||
totalNum: 0
|
||||
},
|
||||
pageflag: true,
|
||||
timer: null
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getData()
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.clearData()
|
||||
|
||||
},
|
||||
methods: {
|
||||
clearData() {
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
}
|
||||
},
|
||||
getData() {
|
||||
this.pageflag = true
|
||||
// this.pageflag =false
|
||||
|
||||
currentGET('big1').then(res => {
|
||||
//只打印一次
|
||||
if (!this.timer) {
|
||||
console.log("设备总览", res);
|
||||
}
|
||||
if (res.code == 20000) {
|
||||
this.countUserNumData = res.data
|
||||
this.$nextTick(() => {
|
||||
this.init()
|
||||
})
|
||||
|
||||
} else {
|
||||
this.pageflag = false
|
||||
this.$Message({
|
||||
text: res.msg,
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
init() {
|
||||
this.options = {
|
||||
title: {
|
||||
text: ["总数 0 "].join("\n"),
|
||||
// subtext: 'Fake Data',
|
||||
// left: 'center'
|
||||
textStyle: {
|
||||
color: "#ffffff",
|
||||
lineHeight: 20,
|
||||
}
|
||||
},
|
||||
color:
|
||||
[
|
||||
"#fc8452",
|
||||
"#fac858",
|
||||
"#73c0de",
|
||||
"#3ba272",
|
||||
"#5470c6",
|
||||
"#5470c6",
|
||||
"#91cc75",
|
||||
|
||||
"#ee6666",
|
||||
|
||||
|
||||
"#9a60b4",
|
||||
"#ea7ccc"
|
||||
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
// legend: {
|
||||
// orient: 'vertical',
|
||||
// left: 'left'
|
||||
// },
|
||||
series: [
|
||||
{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: [
|
||||
{value: 0, name: '资质预警'},
|
||||
{value: 0, name: '其他预警'},
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
},
|
||||
label: {
|
||||
formatter: " {b|{b}} \n {c|{c}个} {per|{d}%} ",
|
||||
// position: "outside",
|
||||
rich: {
|
||||
b: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
lineHeight: 26,
|
||||
},
|
||||
c: {
|
||||
color: "#31ABE3",
|
||||
fontSize: 14,
|
||||
},
|
||||
d: {
|
||||
color: "#31ABE3",
|
||||
fontSize: 14,
|
||||
},
|
||||
per: {
|
||||
color: "#31ABE3",
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
</style>
|
||||
@ -0,0 +1,154 @@
|
||||
<!--
|
||||
* @Author: daidai
|
||||
* @Date: 2022-02-28 16:16:42
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2022-10-25 09:18:22
|
||||
* @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-bottom.vue
|
||||
-->
|
||||
<template>
|
||||
<Echart id="leftCenter" :options="options" class="left_center_inner" v-if="pageflag" ref="charts"/>
|
||||
<Reacquire v-else @onclick="getData" style="line-height:200px">
|
||||
重新获取
|
||||
</Reacquire>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {currentGET} from '@/api/modules'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
countUserNumData: {
|
||||
lockNum: 0,
|
||||
onlineNum: 0,
|
||||
offlineNum: 0,
|
||||
totalNum: 0
|
||||
},
|
||||
pageflag: true,
|
||||
timer: null
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getData()
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.clearData()
|
||||
|
||||
},
|
||||
methods: {
|
||||
clearData() {
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
}
|
||||
},
|
||||
getData() {
|
||||
this.pageflag = true
|
||||
// this.pageflag =false
|
||||
|
||||
currentGET('big1').then(res => {
|
||||
//只打印一次
|
||||
if (!this.timer) {
|
||||
console.log("设备总览", res);
|
||||
}
|
||||
if (res.code == 20000) {
|
||||
this.countUserNumData = res.data
|
||||
this.$nextTick(() => {
|
||||
this.init()
|
||||
})
|
||||
|
||||
} else {
|
||||
this.pageflag = false
|
||||
this.$Message({
|
||||
text: res.msg,
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
init() {
|
||||
this.options = {
|
||||
title: {
|
||||
text: ["总数 1 "].join("\n"),
|
||||
// subtext: 'Fake Data',
|
||||
// left: 'center'
|
||||
textStyle: {
|
||||
color: "#ffffff",
|
||||
lineHeight: 20,
|
||||
}
|
||||
},
|
||||
color:
|
||||
[
|
||||
"#fc8452",
|
||||
"#fac858",
|
||||
"#73c0de",
|
||||
"#3ba272",
|
||||
"#5470c6",
|
||||
"#5470c6",
|
||||
"#91cc75",
|
||||
"#ee6666",
|
||||
"#9a60b4",
|
||||
"#ea7ccc"
|
||||
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
// legend: {
|
||||
// orient: 'vertical',
|
||||
// left: 'left'
|
||||
// },
|
||||
series: [
|
||||
{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: [
|
||||
{value: 1, name: '产品预警'},
|
||||
{value: 0, name: '资质预警'},
|
||||
{value: 0, name: '其他预警'},
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
},
|
||||
label: {
|
||||
formatter: " {b|{b}} \n {c|{c}个} {per|{d}%} ",
|
||||
// position: "outside",
|
||||
rich: {
|
||||
b: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
lineHeight: 26,
|
||||
},
|
||||
c: {
|
||||
color: "#31ABE3",
|
||||
fontSize: 14,
|
||||
},
|
||||
d: {
|
||||
color: "#31ABE3",
|
||||
fontSize: 14,
|
||||
},
|
||||
per: {
|
||||
color: "#31ABE3",
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
</style>
|
||||
@ -0,0 +1,154 @@
|
||||
<!--
|
||||
* @Author: daidai
|
||||
* @Date: 2022-02-28 16:16:42
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2022-10-25 09:18:22
|
||||
* @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-bottom.vue
|
||||
-->
|
||||
<template>
|
||||
<Echart id="leftCenter" :options="options" class="left_center_inner" v-if="pageflag" ref="charts"/>
|
||||
<Reacquire v-else @onclick="getData" style="line-height:200px">
|
||||
重新获取
|
||||
</Reacquire>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {currentGET} from '@/api/modules'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
countUserNumData: {
|
||||
lockNum: 0,
|
||||
onlineNum: 0,
|
||||
offlineNum: 0,
|
||||
totalNum: 0
|
||||
},
|
||||
pageflag: true,
|
||||
timer: null
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getData()
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.clearData()
|
||||
|
||||
},
|
||||
methods: {
|
||||
clearData() {
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
}
|
||||
},
|
||||
getData() {
|
||||
this.pageflag = true
|
||||
// this.pageflag =false
|
||||
|
||||
currentGET('big1').then(res => {
|
||||
//只打印一次
|
||||
if (!this.timer) {
|
||||
console.log("设备总览", res);
|
||||
}
|
||||
if (res.code == 20000) {
|
||||
this.countUserNumData = res.data
|
||||
this.$nextTick(() => {
|
||||
this.init()
|
||||
})
|
||||
|
||||
} else {
|
||||
this.pageflag = false
|
||||
this.$Message({
|
||||
text: res.msg,
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
init() {
|
||||
this.options = {
|
||||
title: {
|
||||
text: ["总数 1 "].join("\n"),
|
||||
// subtext: 'Fake Data',
|
||||
// left: 'center'
|
||||
textStyle: {
|
||||
color: "#ffffff",
|
||||
lineHeight: 20,
|
||||
}
|
||||
},
|
||||
color:
|
||||
[
|
||||
"#fc8452",
|
||||
"#fac858",
|
||||
"#73c0de",
|
||||
"#3ba272",
|
||||
"#5470c6",
|
||||
"#5470c6",
|
||||
"#91cc75",
|
||||
"#ee6666",
|
||||
"#9a60b4",
|
||||
"#ea7ccc"
|
||||
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
// legend: {
|
||||
// orient: 'vertical',
|
||||
// left: 'left'
|
||||
// },
|
||||
series: [
|
||||
{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: [
|
||||
{value: 0, name: '生产企业'},
|
||||
{value: 0, name: '医疗机构'},
|
||||
{value: 1, name: '经营企业'},
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
},
|
||||
label: {
|
||||
formatter: " {b|{b}} \n {c|{c}个} {per|{d}%} ",
|
||||
// position: "outside",
|
||||
rich: {
|
||||
b: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
lineHeight: 26,
|
||||
},
|
||||
c: {
|
||||
color: "#31ABE3",
|
||||
fontSize: 14,
|
||||
},
|
||||
d: {
|
||||
color: "#31ABE3",
|
||||
fontSize: 14,
|
||||
},
|
||||
per: {
|
||||
color: "#31ABE3",
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
</style>
|
||||
@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<div class="block">
|
||||
<el-descriptions title="" :column="2" border class="el-descriptions">
|
||||
<el-descriptions-item label="企业名称">
|
||||
{{ editQuery.companyName }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="统一社会信用代码">{{ editQuery.creditNum }}</el-descriptions-item>
|
||||
<el-descriptions-item label="企业类别">{{ companyTypeMap[editQuery.bussinessStatus] }}</el-descriptions-item>
|
||||
<el-descriptions-item label="法人名称">
|
||||
{{ editQuery.legalPerson }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="联系电话">
|
||||
{{ editQuery.fmobile }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="联系人">
|
||||
{{ editQuery.name }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="邮箱">
|
||||
{{ editQuery.xemail }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="注册时间">
|
||||
{{ editQuery.registerTime }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="注册地址">
|
||||
{{ editQuery.registerAddress }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "dialogCorpInfo",
|
||||
data() {
|
||||
return {
|
||||
companyTypeMap: {
|
||||
1: "生产企业",
|
||||
2: "经营企业",
|
||||
3: "医疗机构",
|
||||
},
|
||||
};
|
||||
},
|
||||
props: {
|
||||
editQuery: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<div class="block">
|
||||
<el-descriptions title="" :column="2" border class="el-descriptions">
|
||||
<el-descriptions-item label="企业名称">
|
||||
{{ editQuery.companyName }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="统一社会信用代码">{{ editQuery.creditNum }}</el-descriptions-item>
|
||||
<el-descriptions-item label="法人名称">
|
||||
{{ editQuery.legalPerson }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="联系电话">
|
||||
{{ editQuery.fmobile }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="负责人">
|
||||
{{ editQuery.name }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="负责人电话">
|
||||
{{ editQuery.fmobile }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="注册时间">
|
||||
{{ editQuery.registerTime }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="注册地址">
|
||||
{{ editQuery.registerAddress }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<el-table v-loading="loading" :data="list" key="1" style="width: 100%;margin-top: 20px"
|
||||
border>
|
||||
<el-table-column label="序号" type="index" width="55"></el-table-column>
|
||||
<el-table-column label="产品通用名称" prop="cpmctymc" width="180" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="规格型号" prop="ggxh" width="180" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="医疗器械注册人" prop="ylqxzcrbarmc" width="180" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="注册/备案号" prop="zczbhhzbapzbh" width="180" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="器械类别" prop="cplx" width="120" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="产品类别" prop="hchzsb" width="120" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="是否赋码" prop="" width="100" show-overflow-tooltip>
|
||||
<template slot-scope="scope">
|
||||
<span>是</span>
|
||||
</template>
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column label="产品描述" prop="cpms" width="180" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="运输条件" prop="" width="180" show-overflow-tooltip></el-table-column>
|
||||
</el-table>
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:limit.sync="filterQuery.limit"
|
||||
:page.sync="filterQuery.page"
|
||||
@pagination="handleCurrentChange"
|
||||
></pagination>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {currentGET, currentPOST} from "@/api";
|
||||
|
||||
export default {
|
||||
name: "dialogCorpProduct",
|
||||
data() {
|
||||
return {
|
||||
companyTypeMap: {
|
||||
1: "生产企业",
|
||||
2: "经营企业",
|
||||
3: "医疗机构",
|
||||
},
|
||||
list: [],
|
||||
total: 0,
|
||||
filterQuery: {
|
||||
page: 1,
|
||||
limit: 10,
|
||||
companyName: null,
|
||||
companyIdFk: null,
|
||||
},
|
||||
regionCode: null,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
editQuery: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getList();
|
||||
},
|
||||
|
||||
methods: {
|
||||
getList() {
|
||||
this.filterQuery.regionCode = this.regionCode;
|
||||
this.filterQuery.companyIdFk = this.editQuery.ucId;
|
||||
currentGET('corpProductList', this.filterQuery
|
||||
).then(res => {
|
||||
if (res.code == 20000) {
|
||||
this.list = res.data.list || [];
|
||||
this.total = res.data.total || 0;
|
||||
} else {
|
||||
this.list = []
|
||||
this.$Message({
|
||||
text: res.msg,
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCurrentChange() {
|
||||
this.getList();
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
|
||||
/*最外层透明*/
|
||||
::v-deep .el-table,
|
||||
::v-deep .el-table__expanded-cell {
|
||||
background-color: transparent !important;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 表格内背景颜色 */
|
||||
::v-deep .el-table th,
|
||||
::v-deep .el-table tr,
|
||||
::v-deep .el-table td {
|
||||
background-color: transparent !important;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,290 @@
|
||||
<!--
|
||||
* @Author: daidai
|
||||
* @Date: 2022-03-04 09:23:59
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2022-05-07 11:05:02
|
||||
* @FilePath: \web-pc\src\pages\big-screen\view\indexs\nmpa.vue
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<div style="margin-top: 1px;margin-bottom: 1px">
|
||||
<el-button type="warning" icon="search" @click="addManufacturerCert" style="text-align:right;margin-left: 15px">
|
||||
按年度统计
|
||||
</el-button>
|
||||
<el-button type="warning" icon="search" @click="addManufacturerCert" style="text-align:right">按季度统计</el-button>
|
||||
<el-button type="warning" icon="search" @click="addManufacturerCert" style="text-align:right">按月份统计</el-button>
|
||||
<span class="demonstration" style="margin-left: 20px;color: yellow"></span>
|
||||
<el-date-picker
|
||||
v-model="value2"
|
||||
type="daterange"
|
||||
align="right"
|
||||
style="margin-left: 20px;color: yellow;margin-left: 15px;font-weight: bold"
|
||||
unlink-panels
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:picker-options="pickerOptions">
|
||||
</el-date-picker>
|
||||
<el-button type="warning" icon="search" @click="addManufacturerCert" style="margin-left: 15px">自定义统计</el-button>
|
||||
</div>
|
||||
<div class="contents">
|
||||
<div class="contetn_left">
|
||||
<ItemWrap
|
||||
class="contetn_lr-item"
|
||||
title="单位预警情况"
|
||||
>
|
||||
<checkCorpItem/>
|
||||
</ItemWrap>
|
||||
|
||||
<ItemWrap
|
||||
class="contetn_lr-item"
|
||||
title="产品预警情况"
|
||||
>
|
||||
<checkProductItem/>
|
||||
</ItemWrap>
|
||||
|
||||
<ItemWrap
|
||||
class="contetn_lr-item"
|
||||
title="单位分类占比"
|
||||
>
|
||||
<corpTypeItem/>
|
||||
</ItemWrap>
|
||||
</div>
|
||||
<div class="contetn_center">
|
||||
<ItemWrap
|
||||
class="contetn_lr-item"
|
||||
title="异常信息列表"
|
||||
style="padding: 0 10px 16px 10px;height: 570px">
|
||||
<centerTop/>
|
||||
</ItemWrap>
|
||||
|
||||
<div style="display: flex">
|
||||
<ItemWrap
|
||||
class="contetn_lr-item"
|
||||
title="进口与非进口占比"
|
||||
>
|
||||
<jinKouItem/>
|
||||
</ItemWrap>
|
||||
<ItemWrap
|
||||
class="contetn_lr-item"
|
||||
title="医保与非医保占比"
|
||||
>
|
||||
<yiBaoItem/>
|
||||
</ItemWrap>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contetn_right">
|
||||
<ItemWrap
|
||||
class="contetn_lr-item"
|
||||
title="集采与非集采占比"
|
||||
>
|
||||
<jiCaiItem/>
|
||||
</ItemWrap>
|
||||
|
||||
<ItemWrap
|
||||
class="contetn_lr-item"
|
||||
title="器械与体外诊断试剂占比"
|
||||
>
|
||||
<LeftBottom/>
|
||||
</ItemWrap>
|
||||
|
||||
<ItemWrap class="contetn_lr-item" title="品种分类占比">
|
||||
<RightBottom/>
|
||||
</ItemWrap>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LeftBottom from "./left-bottom.vue";
|
||||
import LeftBottom2 from "./left-bottom2.vue";
|
||||
import centerTop from "./center-top";
|
||||
import RightBottom from "./right-bottom.vue";
|
||||
import jiCaiItem from "./jiCaiItem.vue";
|
||||
import yiBaoItem from "./yiBaoItem.vue";
|
||||
import jinKouItem from "./jinKouItem.vue";
|
||||
import corpTypeItem from "./corpTypeItem.vue";
|
||||
import checkCorpItem from "./checkCorpItem.vue";
|
||||
import checkProductItem from "./checkProductItem.vue";
|
||||
|
||||
|
||||
export default {
|
||||
components: {
|
||||
LeftBottom,
|
||||
RightBottom,
|
||||
centerTop, LeftBottom2, jiCaiItem, yiBaoItem, jinKouItem, corpTypeItem
|
||||
, checkCorpItem, checkProductItem
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
histogramChart1: {},
|
||||
};
|
||||
},
|
||||
filters: {
|
||||
numsFilter(msg) {
|
||||
return msg || 0;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
|
||||
init() {
|
||||
this.histogramChart1 = {
|
||||
|
||||
color: ['#5bc0de'],
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '5%',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: "{a}<br/>{b}<br/>{c}"
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['一类', '二类', '三类'],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#5bc0de'
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
rotate: 0,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#5bc0de'
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
"show": false
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
formatter: function (value) {
|
||||
return value + ""
|
||||
},
|
||||
},
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
data: [0, 1, 2],
|
||||
label: {
|
||||
normal: {
|
||||
show: true,//开启显示
|
||||
position: 'top',//柱形上方
|
||||
textStyle: { //数值样式
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
]
|
||||
};
|
||||
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
// 内容
|
||||
.contents {
|
||||
//background: #000d4a url(../../assets/img/other/bg.jpg) center top;
|
||||
|
||||
.contetn_left,
|
||||
.contetn_right {
|
||||
width: 24.5%;
|
||||
box-sizing: border-box;
|
||||
// padding: 16px 0;
|
||||
}
|
||||
|
||||
//左右两侧 三个块
|
||||
.contetn_lr-item {
|
||||
height: 282px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
|
||||
.contetn_cr-item {
|
||||
height: 380px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
|
||||
.contetn_center_top {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// 中间
|
||||
.contetn_center {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
//justify-content: space-around;
|
||||
}
|
||||
|
||||
.contetn_center-bottom {
|
||||
height: 380px;
|
||||
}
|
||||
|
||||
////左边 右边 结构一样
|
||||
//.contetn_left,
|
||||
//.contetn_right {
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// margin-top: 25px;
|
||||
// //justify-content: space-around;
|
||||
// position: relative;
|
||||
//
|
||||
//
|
||||
//}
|
||||
}
|
||||
|
||||
|
||||
@keyframes rotating {
|
||||
0% {
|
||||
-webkit-transform: rotate(0) scale(1);
|
||||
transform: rotate(0) scale(1);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: rotate(180deg) scale(1.1);
|
||||
transform: rotate(180deg) scale(1.1);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg) scale(1);
|
||||
transform: rotate(360deg) scale(1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<Echart id="leftCenter" :options="options" style="width: 280px;height: 280px;margin-left: 120px;margin-top: 15px"
|
||||
ref="charts"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "left-bottom2",
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
};
|
||||
},
|
||||
props: {},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
init() {
|
||||
let dataStyle = {
|
||||
normal: {
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
//shadowBlur: 40,
|
||||
//shadowColor: 'rgba(40, 40, 40, 1)',
|
||||
}
|
||||
};
|
||||
let placeHolderStyle = {
|
||||
normal: {
|
||||
color: 'rgba(255,255,255,.05)',
|
||||
label: {show: false,},
|
||||
labelLine: {show: false}
|
||||
},
|
||||
emphasis: {
|
||||
color: 'rgba(0,0,0,0)'
|
||||
}
|
||||
};
|
||||
this.options = {
|
||||
color: ['#db2573', '#3ad60f', '#d69e0f', '#0fd6d6'],
|
||||
tooltip: {
|
||||
show: true,
|
||||
formatter: "{a} : {c} "
|
||||
},
|
||||
legend: {
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
itemGap: 12,
|
||||
bottom: '3%',
|
||||
|
||||
data: ['医保', '非医保', '集采', '非集采'],
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,.6)',
|
||||
}
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
name: '医保',
|
||||
type: 'pie',
|
||||
clockWise: false,
|
||||
center: ['50%', '42%'],
|
||||
radius: ['59%', '70%'],
|
||||
itemStyle: dataStyle,
|
||||
hoverAnimation: false,
|
||||
data: [{
|
||||
value: 80,
|
||||
name: '01'
|
||||
}, {
|
||||
value: 20,
|
||||
name: 'invisible',
|
||||
tooltip: {show: false},
|
||||
itemStyle: placeHolderStyle
|
||||
}]
|
||||
},
|
||||
{
|
||||
name: '非医保',
|
||||
type: 'pie',
|
||||
clockWise: false,
|
||||
center: ['50%', '42%'],
|
||||
radius: ['49%', '60%'],
|
||||
itemStyle: dataStyle,
|
||||
hoverAnimation: false,
|
||||
data: [{
|
||||
value: 90,
|
||||
name: '02'
|
||||
}, {
|
||||
value: 30,
|
||||
name: 'invisible',
|
||||
tooltip: {show: false},
|
||||
itemStyle: placeHolderStyle
|
||||
}]
|
||||
},
|
||||
{
|
||||
name: '集采',
|
||||
type: 'pie',
|
||||
clockWise: false,
|
||||
hoverAnimation: false,
|
||||
center: ['50%', '42%'],
|
||||
radius: ['39%', '50%'],
|
||||
itemStyle: dataStyle,
|
||||
data: [{
|
||||
value: 115,
|
||||
name: '03'
|
||||
}, {
|
||||
value: 35,
|
||||
name: 'invisible',
|
||||
tooltip: {show: false},
|
||||
itemStyle: placeHolderStyle
|
||||
}]
|
||||
},
|
||||
{
|
||||
name: '非集采',
|
||||
type: 'pie',
|
||||
clockWise: false,
|
||||
hoverAnimation: false,
|
||||
center: ['50%', '42%'],
|
||||
radius: ['29%', '40%'],
|
||||
itemStyle: dataStyle,
|
||||
data: [{
|
||||
value: 55,
|
||||
name: '04'
|
||||
}, {
|
||||
value: 40,
|
||||
name: 'invisible',
|
||||
tooltip: {show: false},
|
||||
itemStyle: placeHolderStyle
|
||||
}]
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<div class="center_bottom">
|
||||
<Echart
|
||||
:options="options"
|
||||
id="bottomLeftChart"
|
||||
class="echarts_bottom"
|
||||
></Echart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {currentGET} from '@/api/modules'
|
||||
import {graphic} from "echarts";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
};
|
||||
},
|
||||
props: {},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
this.pageflag = true;
|
||||
currentGET("big6", {companyName: this.companyName}).then((res) => {
|
||||
if (res.success) {
|
||||
this.init(res.data);
|
||||
} else {
|
||||
this.pageflag = false;
|
||||
this.$Message({
|
||||
text: res.msg,
|
||||
type: "warning",
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
init(newData) {
|
||||
this.options = {
|
||||
legend: {
|
||||
x: 'right',
|
||||
y: 'top',
|
||||
textStyle: {
|
||||
color: '#4ADEFE',
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
x: 30,
|
||||
y: 50,
|
||||
x2: 0,
|
||||
y2: 45
|
||||
},
|
||||
tooltip: {},
|
||||
dataset: {
|
||||
source: [
|
||||
['product', '已赋码', '未赋码'],
|
||||
['一类医疗器械', 0, 0],
|
||||
['二类医疗器械', 2, 0],
|
||||
['三类医疗器械', 120, 48],
|
||||
]
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#4ADEFE",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#4ADEFE",
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#4ADEFE'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
|
||||
|
||||
|
||||
{
|
||||
type: 'bar',
|
||||
barMaxWidth: '10',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#F3DB5C'
|
||||
},
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,//开启显示
|
||||
position: 'top',//柱形上方
|
||||
textStyle: { //数值样式
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
type: 'bar',
|
||||
barMaxWidth: '10',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#4ADEFE'
|
||||
},
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,//开启显示
|
||||
position: 'top',//柱形上方
|
||||
textStyle: { //数值样式
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.center_bottom {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.echarts_bottom {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,230 @@
|
||||
<!--
|
||||
* @Author: daidai
|
||||
* @Date: 2022-02-28 16:16:42
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2022-07-20 17:57:11
|
||||
* @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-bottom.vue
|
||||
-->
|
||||
<template>
|
||||
<ul class="user_Overview flex" v-if="pageflag">
|
||||
<li class="user_Overview-item" style="color: #00fdfa">
|
||||
<div class="user_Overview_nums allnum ">
|
||||
<dv-digital-flop :config="config" style="width:100%;height:100%;"/>
|
||||
</div>
|
||||
<p>资质总数</p>
|
||||
</li>
|
||||
<li class="user_Overview-item" style="color: #07f7a8">
|
||||
<div class="user_Overview_nums online">
|
||||
<dv-digital-flop :config="onlineconfig" style="width:100%;height:100%;"/>
|
||||
</div>
|
||||
<p>正常数</p>
|
||||
</li>
|
||||
<li class="user_Overview-item" style="color: #e3b337">
|
||||
<div class="user_Overview_nums offline">
|
||||
<dv-digital-flop :config="offlineconfig" style="width:100%;height:100%;"/>
|
||||
|
||||
</div>
|
||||
<p>预警数</p>
|
||||
</li>
|
||||
<li class="user_Overview-item" style="color: #f5023d">
|
||||
<div class="user_Overview_nums laramnum">
|
||||
<dv-digital-flop :config="laramnumconfig" style="width:100%;height:100%;"/>
|
||||
</div>
|
||||
<p>异常数</p>
|
||||
</li>
|
||||
</ul>
|
||||
<Reacquire v-else @onclick="getData" line-height="200px">
|
||||
重新获取
|
||||
</Reacquire>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {currentGET} from '@/api/modules'
|
||||
|
||||
let style = {
|
||||
fontSize: 24
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
userOverview: {
|
||||
alarmNum: 0,
|
||||
offlineNum: 0,
|
||||
onlineNum: 0,
|
||||
totalNum: 0,
|
||||
},
|
||||
pageflag: true,
|
||||
timer: null,
|
||||
config: {
|
||||
number: [100],
|
||||
content: '{nt}',
|
||||
style: {
|
||||
...style,
|
||||
// stroke: "#00fdfa",
|
||||
fill: "#00fdfa",
|
||||
},
|
||||
},
|
||||
onlineconfig: {
|
||||
number: [0],
|
||||
content: '{nt}',
|
||||
style: {
|
||||
...style,
|
||||
// stroke: "#07f7a8",
|
||||
fill: "#07f7a8",
|
||||
},
|
||||
},
|
||||
offlineconfig: {
|
||||
number: [0],
|
||||
content: '{nt}',
|
||||
style: {
|
||||
...style,
|
||||
// stroke: "#e3b337",
|
||||
fill: "#e3b337",
|
||||
},
|
||||
},
|
||||
laramnumconfig: {
|
||||
number: [0],
|
||||
content: '{nt}',
|
||||
style: {
|
||||
...style,
|
||||
// stroke: "#f5023d",
|
||||
fill: "#f5023d",
|
||||
},
|
||||
}
|
||||
|
||||
};
|
||||
},
|
||||
filters: {
|
||||
numsFilter(msg) {
|
||||
return msg || 0;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getData()
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.clearData()
|
||||
|
||||
},
|
||||
methods: {
|
||||
clearData() {
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
}
|
||||
},
|
||||
getData() {
|
||||
this.pageflag = true;
|
||||
currentGET("big2").then((res) => {
|
||||
if (!this.timer) {
|
||||
console.log("报备企业总览", res);
|
||||
}
|
||||
if (res.code==20000) {
|
||||
this.userOverview = res.data;
|
||||
this.onlineconfig = {
|
||||
...this.onlineconfig,
|
||||
number: [res.data.onlineCount]
|
||||
}
|
||||
this.config = {
|
||||
...this.config,
|
||||
number: [res.data.totalCount]
|
||||
}
|
||||
this.offlineconfig = {
|
||||
...this.offlineconfig,
|
||||
number: [res.data.offlineCount]
|
||||
}
|
||||
this.laramnumconfig = {
|
||||
...this.laramnumconfig,
|
||||
number: [res.data.errCount]
|
||||
}
|
||||
this.switper()
|
||||
} else {
|
||||
this.pageflag = false;
|
||||
this.$Message.warning(res.msg);
|
||||
}
|
||||
});
|
||||
},
|
||||
//轮询
|
||||
switper() {
|
||||
if (this.timer) {
|
||||
return
|
||||
}
|
||||
let looper = (a) => {
|
||||
this.getData()
|
||||
};
|
||||
this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.user_Overview {
|
||||
li {
|
||||
flex: 1;
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
height: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.user_Overview_nums {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
font-size: 22px;
|
||||
margin: 50px auto 30px;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&.bgdonghua::before {
|
||||
animation: rotating 14s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.allnum {
|
||||
|
||||
// background-image: url("../../assets/img/left_top_lan.png");
|
||||
&::before {
|
||||
background-image: url("../../../../../udi-cpt-bigvis/src/assets/img/left_top_lan.png");
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.online {
|
||||
&::before {
|
||||
background-image: url("../../../../../udi-cpt-bigvis/src/assets/img/left_top_lv.png");
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.offline {
|
||||
&::before {
|
||||
background-image: url("../../../../../udi-cpt-bigvis/src/assets/img/left_top_huang.png");
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.laramnum {
|
||||
&::before {
|
||||
background-image: url("../../../../../udi-cpt-bigvis/src/assets/img/left_top_hong.png");
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue