Skip to content

Z
zhengfu
Commit 8bc03492 authored by yanghaitao's avatar yanghaitao
Browse files
Options

0816

parents d45c7cf3 98156819
Hide whitespace changes
Inline Side-by-side
Showing with 4139 additions and 1803 deletions
.DS_Store deleted 100644 → 0
View file @ d45c7cf3
File deleted
.idea/.gitignore 0 → 100644
View file @ 8bc03492
# Default ignored files
/workspace.xml
\ No newline at end of file
.idea/misc.xml 0 → 100644
View file @ 8bc03492
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="JavaScriptSettings">
<option name="languageLevel" value="ES6" />
</component>
</project>
\ No newline at end of file
.idea/modules.xml 0 → 100644
View file @ 8bc03492
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/zhengfu.iml" filepath="$PROJECT_DIR$/.idea/zhengfu.iml" />
</modules>
</component>
</project>
\ No newline at end of file
.idea/vcs.xml 0 → 100644
View file @ 8bc03492
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$" vcs="Git" />
</component>
</project>
\ No newline at end of file
.idea/zhengfu.iml 0 → 100644
View file @ 8bc03492
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>
\ No newline at end of file
qingtian_mobile/index copy.html 0 → 100644
View file @ 8bc03492
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>mobile</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
qingtian_mobile/index.html
View file @ 8bc03492
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>mobile</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>青田数字政府门户</title>
<script src="https://alidt.alicdn.com/alilog/mlog/aplus_cloud.js"></script>
<script src='https://wpk-gate.zjzwfw.gov.cn/static/wpk-jssdk.1.0.2/wpkReporter.js' crossorigin='true'></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
<script>
//稳定性监控代码
try {
const config = {
bid: 'syszzfmh_zzdpro',
signkey: '1234567890abcdef',
gateway: 'https://wpk-gate.zjzwfw.gov.cn'
};
const wpk = new wpkReporter(config);
wpk.installAll();
window._wpk = wpk;
} catch (err) {
console.error('WpkReporter init fail', err);
}
// 埋点初始化代码
(function (w, d, s, q, i) {
w[q] = w[q] || [];
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s);
j.async = true;
j.id = 'beacon-aplus';
j.src = 'https://alidt.alicdn.com/alilog/mlog/aplus_cloud.js';
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'aplus_queue');
//适配pad
var view_timer = null;
function viewPort(userAgent, pageWidth) {
var oView = document.getElementById('viewport');
if (oView) {
document.head.removeChild(oView);
}
if (!pageWidth) {
pageWidth = 1440;
}
var screen_w = parseInt(window.screen.width),
screen_h = parseInt(window.screen.height),
scale = screen_w / pageWidth;
if (/Android (\d+\.\d+)/.test(userAgent)) {
var creat_meta = document.createElement('meta');
creat_meta.name = 'viewport';
creat_meta.id = 'viewport';
var version = parseFloat(RegExp.$1);
if (version > 2.3) {
creat_meta.content = 'width=' + pageWidth + ', initial-scale = ' + scale +
',user-scalable=1, minimum-scale = ' + scale + ', maximum-scale = ' + scale +
', target-densitydpi=device-dpi';
} else {
creat_meta.content = '"width=' + pageWidth + ', target-densitydpi=device-dpi';
}
document.head.appendChild(creat_meta);
} else {
var creat_meta = document.createElement('meta');
creat_meta.name = 'viewport';
creat_meta.id = 'viewport';
if (window.orientation == '-90' || window.orientation == '90') { //判断移动设备横屏竖屏
scale = window.screen.height / pageWidth;
creat_meta.content = 'width=' + pageWidth + ', initial-scale = ' + scale * screen_w / screen_h +
' ,minimum-scale = ' + scale * screen_w / screen_h + ', maximum-scale = ' + scale * screen_w / screen_h +
', user-scalable=no, target-densitydpi=device-dpi';
} else {
creat_meta.content = 'width=' + pageWidth + ', initial-scale = ' + scale + ' ,minimum-scale = ' + scale +
', maximum-scale = ' + scale + ', user-scalable=no, target-densitydpi=device-dpi';
}
document.head.appendChild(creat_meta);
}
}
viewPort(navigator.userAgent);
window.onresize = function () {
clearTimeout(view_timer);
view_timer = setTimeout(function () {
viewPort(navigator.userAgent);
}, 500);
}
window.addEventListener('message', async function (e, d) {
if (e.data && e.data.accessToken) {
var token = e.data.accessToken;
var url =
'https://portal.lishui.gov.cn:18080/api_2021/public/index.php/index/MicroPortalLogin/getUserInfoByAccessToken?accessToken=' +token;
var user = await fetch(url);
} else {
window.location.replace("./#err");
}
// var data = JSON.parse(e.data);
// alert(data);
// var accessToken = data.accessToken;
// alert(accessToken);
//alert(e.data)
// let data = JSON.parse(e.data);
// let accessToken = data.accessToken;
})
</script>
</html>
qingtian_mobile/src/components/Breadcrumb.vue
View file @ 8bc03492
<template>
<<<<<<< HEAD
<div class="breadcrumb">
<div class="br-top">
<el-breadcrumb
......@@ -26,6 +27,47 @@
</div>
{{ breadData.annual_target }}
=======
<div class="breadcrumb-t">
<div class="breadcrumb">
<div class="br-top">
<el-breadcrumb
separator="/"
v-if="$route.path != '/index'"
separator-class="el-icon-arrow-right"
>
<el-breadcrumb-item
><a href="https://szzf.qingtian.gov.cn:18080" target="_parent"
>首页</a
></el-breadcrumb-item
>
<el-breadcrumb-item><span style="font-size: 18px !important;font-weight: bold !important;">{{ breadData.page_name }}</span></el-breadcrumb-item>
<el-breadcrumb-item v-if="breadData.child"><span style="font-weight: normal !important;font-size: 16px !important;">{{ breadData.child }}</span></el-breadcrumb-item>
</el-breadcrumb>
<div class="mt12">
<i class="iconfont icon-chengshi"></i>
<span>牵头单位：{{ breadData.leading }}</span>
</div>
</div>
</div>
<div class="line" v-if="show"></div>
<div class="breadcrumb-text" v-if="show">
<div class="breadcrumb-title">
<div class="flex acenter mb12">
<img src="../assets/images/target.png" alt="" />
<span>年度目标</span>
</div>
<!-- <div class="s-line"></div> -->
<div>{{ breadData.annual_target }}</div>
</div>
</div>
<div class="flex acenter jcenter shoez" @click="shows">
<div class="flex acenter jcenter showt">
<div>年度目标</div>
<!-- <img :src="show?'../assets/images/bottom.png': '../assets/images/topArrow.png'" alt="" /> -->
<img src="../assets/images/bottom.png" alt="" v-if="!show">
<img src="../assets/images/topArrow.png" alt="" v-else>
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
</div>
</div>
</div>
......@@ -39,23 +81,39 @@ export default {
type: Object,
},
},
<<<<<<< HEAD
=======
data() {
return {
show: true
};
},
methods: {
shows() {
this.show = ! this.show
}
}
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
};
</script>
<style lang='scss' scoped>
.breadcrumb-t {
position: relative;
background:#fff;
border-radius: 6px;
}
.breadcrumb {
width: 100%;
// width: calc(100% - 40px);
box-sizing: border-box;
background-color: #fff;
border-radius: 4px;
padding: 12px;
margin-bottom: 20px;
>>> .el-breadcrumb {
font-size: 16px;
}
padding: 12px 10px 0;
margin-bottom: 12px;
>>> .el-breadcrumb__inner {
color: #333;
font-weight: bold;
<<<<<<< HEAD
}
.breadcrumb-title {
margin-top: 12px;
......@@ -72,13 +130,77 @@ export default {
.breadcrumb-title img {
width: 28px;
height: 28px;
=======
font-size: 18px !important;
a {
font-weight: 400;
font-size: 16px;
}
}
.br-top {
// display: flex;
justify-content: space-between;
align-items: center;
}
.breadcrumb-title h2 {
font-weight: 600;
font-size: 24px;
margin-right: 20px;
}
.breadcrumb-text {
padding: 12px 10px 0;
}
.breadcrumb-title {
// display: flex;
align-items: center;
color: #333;
span {
color: #1492ff;
margin-right: 8px;
font-size: 18px;
}
.s-line {
width: 1px;
height: 15px;
background: #ddd;
margin-right: 10px;
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
}
}
.breadcrumb-title img {
width: 24px;
height: auto;
}
.breadcrumb-title h2 {
font-weight: 600;
font-size: 24px;
margin-right: 20px;
}
.line {
width: 100%;
height: 1px;
background: #ddd;
transform: scaleY(0.5);
}
.shoet {
width: 150px;
height: 24px;
position: relative;
}
.shoez {
// position: absolute;
bottom: 0;
height: 24px;
}
.showt {
color: #999;
background: #eee;
position: relative;
bottom: -1px;
img {
width: 15px;
height: 15px;
margin-left: 5px;
z-index: 10;
}
}
<<<<<<< HEAD
.icon24 {
width: 24px;
height: 24px;
......@@ -86,4 +208,31 @@ export default {
.shrink {
flex-shrink: 0;
}
</style>
\ No newline at end of file
</style>
=======
.showt:after {
position: absolute;
left: 0;
top: -19px;
width: 0;
height: 0;
margin-left: -20px;
content: " ";
border-bottom: 20px solid #eee;
border-left: 20px solid transparent;
border-top: 20px solid transparent;
}
.showt:before {
position: absolute;
right: 0;
top: -19px;
width: 0;
height: 0;
margin-right: -20px;
content: " ";
border-bottom: 20px solid #eee;
border-right: 20px solid transparent;
border-top: 20px solid transparent;
}
</style>
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
qingtian_mobile/src/router/index.js
View file @ 8bc03492
......@@ -87,6 +87,15 @@ var router = new VueRouter({
component: Ctfy
},
{
<<<<<<< HEAD
=======
path: '/cthfy',
name: 'Chhtfy',
meta: { title: '常态防疫' },
component: Ctfy
},
{
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
path: '/stwm',
name: 'Stwm',
meta: { title: '生态文明' },
......@@ -105,7 +114,11 @@ var router = new VueRouter({
component: Szsy
},
{
<<<<<<< HEAD
path: '/err?debug=true',
=======
path: '/err',
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
name: 'Err',
meta: { title: '无权限' },
component: Err
......
qingtian_mobile/src/views/Ecology.vue
View file @ 8bc03492
<template>
<div class="ecology">
<<<<<<< HEAD
<div>
<Breadcrumb :breadData="breadData"></Breadcrumb>
</div>
<el-row :gutter="20">
=======
<div class="shadow">
<Breadcrumb :breadData="breadData"></Breadcrumb>
</div>
<el-row :gutter="20" class="mt20">
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
<el-col :sm="12" :xs="24">
<div class="clear-water unify-item">
<div class="clear-water unify-item shadow">
<h3 class="module-tit">深化碧水行动</h3>
<ul class="mt12">
<li v-for="(item, index) in clear_water_info" :key="index">
......@@ -34,7 +41,7 @@
</div>
</el-col>
<el-col :sm="12" :xs="24">
<div class="air-quality unify-item">
<div class="air-quality unify-item shadow">
<h3 class="module-tit">空气质量巩固提升行动</h3>
<div class="aq-map mt12">
<img src="../assets/images/sy-map.jpg" alt="" />
......@@ -85,7 +92,7 @@
</el-row>
<el-row :gutter="20">
<el-col :sm="12" :xs="24">
<div class="no-waste unify-item">
<div class="no-waste unify-item shadow">
<h3 class="module-tit">无废城市建设</h3>
<ul class="nw-con">
<li
......@@ -113,7 +120,7 @@
</div>
</el-col>
<el-col :sm="12" :xs="24">
<div class="beautiful-rivers unify-item">
<div class="beautiful-rivers unify-item shadow">
<h3 class="module-tit">美丽河湖库</h3>
<ul class="br-con mt12">
<li v-for="(item, index) in br_info" :key="index">
......@@ -173,7 +180,7 @@
</el-row>
<el-row :gutter="20">
<el-col :sm="12" :xs="24">
<div class="unify-item">
<div class="unify-item shadow">
<h3 class="module-tit mb12">政府工作报告任务落实</h3>
<Tree :treeData="treeData"></Tree>
</div>
......@@ -351,10 +358,18 @@ export default {
],
};
},
mounted() {
window.addEventListener("resize", function (e) {
window.parent.postMessage(document.body.scrollHeight, '*');
});
}
};
</script>
<style lang="scss" scoped>
.shadow {
box-shadow: 0 2px 12px 0 #ccc;
}
//公共样式
.w100 {
width: 100%;
......
qingtian_mobile/src/views/Epidemic.vue
View file @ 8bc03492
<template>
<div class="epidemic">
<Breadcrumb :breadData="breadData"></Breadcrumb>
<div class="epidemic-tabs">
<div class="epidemic-tabs mt20">
<el-row class="et-con" :gutter="20">
<el-col
class="lis"
......@@ -204,13 +204,13 @@
<el-col :sm="8" :xs="24">
<div class="vt-ipt">
<p>证件号码</p>
<input type="text" v-model="vt.vt_code1" />
<input type="text" v-model="vt.vt_code1"/>
</div>
</el-col>
<el-col :sm="8" :xs="17">
<div class="vt-ipt">
<p>电子监管码</p>
<input type="text" v-model="vt.vt_code2" />
<input type="text" v-model="vt.vt_code2"/>
</div>
</el-col>
<el-col :sm="4" :xs="7">
......@@ -500,7 +500,7 @@
</div>
<div class="re-search">
<p>冷链码</p>
<input type="text" />
<input type="text"/>
<button>
<i class="el-icon-search"></i>
检索
......@@ -537,807 +537,860 @@
</template>
<script>
import Breadcrumb from "../components/Breadcrumb.vue";
export default {
name: "epidemic",
components: { Breadcrumb },
data() {
return {
breadData: {
page_name: "常态化疫情防控",
annual_target: "暂无数据",
leading: "县疫情防控办 县卫生健康局",
},
epidemic_tabs_info: [
{
name: "疫苗接种",
},
{
name: "疫情追溯",
},
{
name: "冷链追溯",
},
],
epidemic_tabs_idx: 0,
vt: {
vt_code1: "",
vt_code2: "",
vt_info_table: [],
},
cct: {
mf_info_table: [
{
category: "食品",
sampling_num: "0",
positive_num: "0",
},
{
category: "外环境",
sampling_num: "0",
positive_num: "0",
},
{
category: "从业人员",
sampling_num: "0",
positive_num: "0",
},
],
ms_info_table: [
{
category: "肉类",
slaughter_num: "0",
produce_num: "0",
bestowal_num: "0",
manage_num: "0",
positive_num: "0",
},
{
category: "水产",
slaughter_num: "0",
produce_num: "0",
bestowal_num: "0",
manage_num: "0",
positive_num: "0",
},
{
category: "其他",
slaughter_num: "0",
produce_num: "0",
bestowal_num: "0",
manage_num: "0",
positive_num: "0",
},
{
category: "食品外包装",
slaughter_num: "0",
produce_num: "0",
bestowal_num: "0",
manage_num: "0",
positive_num: "0",
},
{
category: "环境",
slaughter_num: "0",
produce_num: "0",
bestowal_num: "0",
manage_num: "0",
positive_num: "0",
},
{
category: "从业人员",
slaughter_num: "0",
produce_num: "0",
bestowal_num: "0",
manage_num: "0",
positive_num: "0",
},
{
category: "合计",
slaughter_num: "0",
produce_num: "0",
bestowal_num: "0",
manage_num: "0",
positive_num: "0",
},
],
result_table: [
{
date: "2021-05-06",
informant: "张*",
tel: "xxx",
unit: "xxx",
category: "xxx",
code: "xxx",
},
{
date: "2021-05-06",
informant: "李*",
tel: "xxx",
unit: "xxx",
category: "xxx",
code: "xxx",
},
{
date: "2021-05-21",
informant: "王*",
tel: "xxx",
unit: "xxx",
category: "xxx",
code: "xxx",
},
],
step_info: [
{
step: "1",
product_name: "147118505帝皇鲜",
upstream_name: "天普乐食食品（上海）有限公司",
upstream_address:
"浙江省杭州经济技术开发区白杨街道11号大街469号1幢南楼201室",
downstream_name: "杭州盒马网络科技有限公司下沙第一分公司",
downstream_address: "",
type: "无码入库",
date: "2021-04-12 21:16:26",
},
{
step: "2",
product_name: "147118505帝皇鲜",
upstream_name: "天普乐食食品（上海）有限公司",
upstream_address:
"浙江省杭州经济技术开发区白杨街道11号大街469号1幢南楼201室",
downstream_name: "杭州盒马网络科技有限公司下沙第一分公司",
downstream_address: "",
type: "无码入库",
date: "2021-04-12 21:16:26",
},
{
step: "3",
product_name: "147118505帝皇鲜",
upstream_name: "天普乐食食品（上海）有限公司",
upstream_address:
"浙江省杭州经济技术开发区白杨街道11号大街469号1幢南楼201室",
downstream_name: "杭州盒马网络科技有限公司下沙第一分公司",
downstream_address: "",
type: "无码入库",
date: "2021-04-12 21:16:26",
},
],
},
};
},
mounted() {
this.init_circle_1();
this.init_circle_2();
this.init_line_1();
this.init_bar_2();
this.init_bar_1();
},
methods: {
tabIdx(i) {
this.epidemic_tabs_idx = i;
},
init_circle_1() {
this.cChart_1 = this.$echarts.init(document.getElementById("circle_1"));
this.cChart_1.setOption({
title: {
text: ((27673 / 96150) * 100).toFixed(2) + "%",
subtext: "疫苗接种完成率",
x: "center",
y: "center",
textStyle: {
fontWeight: "600",
fontSize: 20,
color: "#000",
}, // 标题
subtextStyle: {
fontWeight: "normal",
fontSize: 16,
color: "#666",
}, // 副标题
},
color: ["#48A1FF", "#efefef"],
series: [
{
name: "访问来源",
type: "pie",
radius: ["70%", "85%"], // 半径
center: ["50%", "50%"], // 位置
label: {
show: false,
},
data: [
{
value: 27673,
name: "接种人数",
},
{
value: 96150 - 27673,
name: "未接种人数",
},
],
},
],
});
},
init_circle_2() {
this.cChart_2 = this.$echarts.init(document.getElementById("circle_2"));
this.cChart_2.setOption({
color: ["#5470C6", "#91CC75"],
series: [
{
type: "pie",
hoverAnimation: false,
radius: ["80%", "95%"],
//环的位置
label: {
normal: {
position: "inner",
},
},
labelLine: {
normal: {
show: false,
},
},
data: [
{
value: 30.53, //需要显示的数据
itemStyle: {
normal: {
color: "#5470C6",
},
import Breadcrumb from "../components/Breadcrumb.vue";
export default {
name: "epidemic",
components: {Breadcrumb},
data() {
return {
breadData: {
page_name: "常态化疫情防控",
annual_target: "暂无数据",
leading: "县疫情防控办 县卫生健康局",
child: "疫苗接种",
},
},
{
value: 100 - 30.53,
//不需要显示的数据，颜色设置成和背景一样
itemStyle: {
normal: {
color: "#E6EBF8",
},
epidemic_tabs_info: [
{
name: "疫苗接种",
},
{
name: "疫情追溯",
},
{
name: "冷链追溯",
},
],
epidemic_tabs_idx: 0,
vt: {
vt_code1: "",
vt_code2: "",
vt_info_table: [],
},
},
],
},
{
type: "pie",
hoverAnimation: false,
radius: ["65%", "80%"],
label: {
normal: {
position: "inner",
},
},
labelLine: {
normal: {
show: false,
},
},
data: [
{
value: 79.2,
itemStyle: {
normal: {
color: "#91CC75",
},
cct: {
mf_info_table: [
{
category: "食品",
sampling_num: "0",
positive_num: "0",
},
{
category: "外环境",
sampling_num: "0",
positive_num: "0",
},
{
category: "从业人员",
sampling_num: "0",
positive_num: "0",
},
],
ms_info_table: [
{
category: "肉类",
slaughter_num: "0",
produce_num: "0",
bestowal_num: "0",
manage_num: "0",
positive_num: "0",
},
{
category: "水产",
slaughter_num: "0",
produce_num: "0",
bestowal_num: "0",
manage_num: "0",
positive_num: "0",
},
{
category: "其他",
slaughter_num: "0",
produce_num: "0",
bestowal_num: "0",
manage_num: "0",
positive_num: "0",
},
{
category: "食品外包装",
slaughter_num: "0",
produce_num: "0",
bestowal_num: "0",
manage_num: "0",
positive_num: "0",
},
{
category: "环境",
slaughter_num: "0",
produce_num: "0",
bestowal_num: "0",
manage_num: "0",
positive_num: "0",
},
{
category: "从业人员",
slaughter_num: "0",
produce_num: "0",
bestowal_num: "0",
manage_num: "0",
positive_num: "0",
},
{
category: "合计",
slaughter_num: "0",
produce_num: "0",
bestowal_num: "0",
manage_num: "0",
positive_num: "0",
},
],
result_table: [
{
date: "2021-05-06",
informant: "张*",
tel: "xxx",
unit: "xxx",
category: "xxx",
code: "xxx",
},
{
date: "2021-05-06",
informant: "李*",
tel: "xxx",
unit: "xxx",
category: "xxx",
code: "xxx",
},
{
date: "2021-05-21",
informant: "王*",
tel: "xxx",
unit: "xxx",
category: "xxx",
code: "xxx",
},
],
step_info: [
{
step: "1",
product_name: "147118505帝皇鲜",
upstream_name: "天普乐食食品（上海）有限公司",
upstream_address:
"浙江省杭州经济技术开发区白杨街道11号大街469号1幢南楼201室",
downstream_name: "杭州盒马网络科技有限公司下沙第一分公司",
downstream_address: "",
type: "无码入库",
date: "2021-04-12 21:16:26",
},
{
step: "2",
product_name: "147118505帝皇鲜",
upstream_name: "天普乐食食品（上海）有限公司",
upstream_address:
"浙江省杭州经济技术开发区白杨街道11号大街469号1幢南楼201室",
downstream_name: "杭州盒马网络科技有限公司下沙第一分公司",
downstream_address: "",
type: "无码入库",
date: "2021-04-12 21:16:26",
},
{
step: "3",
product_name: "147118505帝皇鲜",
upstream_name: "天普乐食食品（上海）有限公司",
upstream_address:
"浙江省杭州经济技术开发区白杨街道11号大街469号1幢南楼201室",
downstream_name: "杭州盒马网络科技有限公司下沙第一分公司",
downstream_address: "",
type: "无码入库",
date: "2021-04-12 21:16:26",
},
],
},
},
{
value: 100 - 79.2,
itemStyle: {
normal: {
color: "#E6EBF8",
},
},
},
],
},
],
});
},
init_line_1() {
this.line_1 = this.$echarts.init(document.getElementById("line_1"));
this.line_1.setOption({
legend: {
orient: "horizontal",
x: "0%",
y: "0%",
data: ["接种量", "库存量"],
textStyle: {
fontSize: 16,
},
},
grid: {
top: "30%",
left: "3%",
right: "8%",
bottom: "3%",
containLabel: true,
};
},
tooltip: {
trigger: "axis",
mounted() {
this.init_circle_1();
this.init_circle_2();
this.init_line_1();
this.init_bar_2();
this.init_bar_1();
window.addEventListener("resize", function (e) {
window.parent.postMessage(document.body.scrollHeight, '*');
});
},
xAxis: {
type: "category",
axisLine: {
lineStyle: {
color: "#333",
fontSize: 14,
methods: {
tabIdx(i) {
this.epidemic_tabs_idx = i;
this.breadData.child=this.epidemic_tabs_info[i].name;
},
},
boundaryGap: false,
data: ["05.21", "05.22", "05.23", "05.24", "05.25", "05.26", "05.27"],
},
yAxis: {
type: "value",
show: true, // 是否显示
name: "单位(万剂)", // 轴名称
nameTextStyle: {
// 坐标轴名称样式
color: "#666",
padding: [5, 0, 0, 5], // 坐标轴名称相对位置
fontSize: 14,
},
},
series: [
{
name: "接种量",
data: [0, 0, 0, 0, 0, 0, 0],
type: "line",
},
{
name: "库存量",
data: [0, 0, 0, 0, 0, 0, 0],
type: "line",
},
],
color: ["#3DCBCD", "#7FD5AB"],
});
},
init_bar_1() {
this.bar_1 = this.$echarts.init(document.getElementById("bar_1"));
this.bar_1.setOption({
legend: {
orient: "horizontal",
x: "center",
y: "top",
data: ["供应数", "接种数"],
},
grid: {
top: "20%",
left: "10%",
right: "1%",
bottom: "15%",
},
tooltip: {
show: true, // 是否显示提示框，默认为true
trigger: "item", // 数据项图形触发
axisPointer: {
// 指示样式
type: "shadow",
axis: "auto",
},
padding: 5,
textStyle: {
// 提示框内容的样式
color: "#666",
},
},
// ---- gird区域 ---
// ------ X轴 ------
xAxis: {
type: "category",
axisLine: {
lineStyle: {
color: "#666",
init_circle_1() {
this.cChart_1 = this.$echarts.init(document.getElementById("circle_1"));
this.cChart_1.setOption({
title: {
text: ((27673 / 96150) * 100).toFixed(2) + "%",
subtext: "疫苗接种完成率",
x: "center",
y: "center",
textStyle: {
fontWeight: "600",
fontSize: 20,
color: "#000",
}, // 标题
subtextStyle: {
fontWeight: "normal",
fontSize: 16,
color: "#666",
}, // 副标题
},
color: ["#48A1FF", "#efefef"],
series: [
{
name: "访问来源",
type: "pie",
radius: ["70%", "85%"], // 半径
center: ["50%", "50%"], // 位置
label: {
show: false,
},
data: [
{
value: 27673,
name: "接种人数",
},
{
value: 96150 - 27673,
name: "未接种人数",
},
],
},
],
});
},
},
axisLabel: {
rotate: 30,
interval: 0,
},
show: true, // 是否显示
data: [
"莲都",
"龙泉",
"青田",
"云和",
"庆元",
"缙云",
"遂昌",
"松阳",
"景宁",
"开发区",
],
},
// ------ y轴 ----------
yAxis: {
show: true, // 是否显示
name: "单位 (万剂)", // 轴名称
type: "value", // 轴类型，默认为 ‘category’
nameTextStyle: {
// 坐标轴名称样式
color: "#666",
padding: [5, 0, 0, 5], // 坐标轴名称相对位置
fontSize: 14,
},
},
// ------- 内容数据 -------
series: [
{
name: "供应数", // 序列名称
type: "bar", // 类型
legendHoverLink: true, // 是否启用图列 hover 时的联动高亮
itemStyle: {
// 图形的形状
color: "#48A1FF",
init_circle_2() {
this.cChart_2 = this.$echarts.init(document.getElementById("circle_2"));
this.cChart_2.setOption({
color: ["#5470C6", "#91CC75"],
series: [
{
type: "pie",
hoverAnimation: false,
radius: ["80%", "95%"],
//环的位置
label: {
normal: {
position: "inner",
},
},
labelLine: {
normal: {
show: false,
},
},
data: [
{
value: 30.53, //需要显示的数据
itemStyle: {
normal: {
color: "#5470C6",
},
},
},
{
value: 100 - 30.53,
//不需要显示的数据，颜色设置成和背景一样
itemStyle: {
normal: {
color: "#E6EBF8",
},
},
},
],
},
{
type: "pie",
hoverAnimation: false,
radius: ["65%", "80%"],
label: {
normal: {
position: "inner",
},
},
labelLine: {
normal: {
show: false,
},
},
data: [
{
value: 79.2,
itemStyle: {
normal: {
color: "#91CC75",
},
},
},
{
value: 100 - 79.2,
itemStyle: {
normal: {
color: "#E6EBF8",
},
},
},
],
},
],
});
},
barWidth: 12, // 柱形的宽度
barCategoryGap: "10%", // 柱形的间距
data: [100, 78, 90, 85, 93, 86, 98, 95, 80, 78],
},
{
name: "接种数", // 序列名称
type: "bar", // 类型
legendHoverLink: true, // 是否启用图列 hover 时的联动高亮
itemStyle: {
// 图形的形状
color: "#83D7AE",
init_line_1() {
this.line_1 = this.$echarts.init(document.getElementById("line_1"));
this.line_1.setOption({
legend: {
orient: "horizontal",
x: "0%",
y: "0%",
data: ["接种量", "库存量"],
textStyle: {
fontSize: 16,
},
},
grid: {
top: "30%",
left: "3%",
right: "8%",
bottom: "3%",
containLabel: true,
},
tooltip: {
trigger: "axis",
},
xAxis: {
type: "category",
axisLine: {
lineStyle: {
color: "#333",
fontSize: 14,
},
},
boundaryGap: false,
data: ["05.21", "05.22", "05.23", "05.24", "05.25", "05.26", "05.27"],
},
yAxis: {
type: "value",
show: true, // 是否显示
name: "单位(万剂)", // 轴名称
nameTextStyle: {
// 坐标轴名称样式
color: "#666",
padding: [5, 0, 0, 5], // 坐标轴名称相对位置
fontSize: 14,
},
},
series: [
{
name: "接种量",
data: [0, 0, 0, 0, 0, 0, 0],
type: "line",
},
{
name: "库存量",
data: [0, 0, 0, 0, 0, 0, 0],
type: "line",
},
],
color: ["#3DCBCD", "#7FD5AB"],
});
},
barWidth: 12, // 柱形的宽度
barCategoryGap: "10%", // 柱形的间距
data: [100, 78, 90, 85, 93, 86, 98, 95, 80, 78],
},
],
});
},
init_bar_2() {
this.bar_2 = this.$echarts.init(document.getElementById("bar_2"));
this.bar_2.setOption({
tooltip: {
show: true, // 是否显示提示框，默认为true
trigger: "item", // 数据项图形触发
axisPointer: {
// 指示样式
type: "shadow",
axis: "auto",
},
padding: 5,
textStyle: {
// 提示框内容的样式
color: "#666",
},
},
grid: {
top: "13%",
left: "10%",
right: "1%",
bottom: "15%",
},
// ---- gird区域 ---
// ------ X轴 ------
xAxis: {
type: "category",
axisLine: {
lineStyle: {
color: "#666",
init_bar_1() {
this.bar_1 = this.$echarts.init(document.getElementById("bar_1"));
this.bar_1.setOption({
legend: {
orient: "horizontal",
x: "center",
y: "top",
data: ["供应数", "接种数"],
},
grid: {
top: "20%",
left: "10%",
right: "1%",
bottom: "15%",
},
tooltip: {
show: true, // 是否显示提示框，默认为true
trigger: "item", // 数据项图形触发
axisPointer: {
// 指示样式
type: "shadow",
axis: "auto",
},
padding: 5,
textStyle: {
// 提示框内容的样式
color: "#666",
},
},
// ---- gird区域 ---
// ------ X轴 ------
xAxis: {
type: "category",
axisLine: {
lineStyle: {
color: "#666",
},
},
axisLabel: {
rotate: 30,
interval: 0,
},
show: true, // 是否显示
data: [
"莲都",
"龙泉",
"青田",
"云和",
"庆元",
"缙云",
"遂昌",
"松阳",
"景宁",
"开发区",
],
},
// ------ y轴 ----------
yAxis: {
show: true, // 是否显示
name: "单位 (万剂)", // 轴名称
type: "value", // 轴类型，默认为 ‘category’
nameTextStyle: {
// 坐标轴名称样式
color: "#666",
padding: [5, 0, 0, 5], // 坐标轴名称相对位置
fontSize: 14,
},
},
// ------- 内容数据 -------
series: [
{
name: "供应数", // 序列名称
type: "bar", // 类型
legendHoverLink: true, // 是否启用图列 hover 时的联动高亮
itemStyle: {
// 图形的形状
color: "#48A1FF",
},
barWidth: 12, // 柱形的宽度
barCategoryGap: "10%", // 柱形的间距
data: [100, 78, 90, 85, 93, 86, 98, 95, 80, 78],
},
{
name: "接种数", // 序列名称
type: "bar", // 类型
legendHoverLink: true, // 是否启用图列 hover 时的联动高亮
itemStyle: {
// 图形的形状
color: "#83D7AE",
},
barWidth: 12, // 柱形的宽度
barCategoryGap: "10%", // 柱形的间距
data: [100, 78, 90, 85, 93, 86, 98, 95, 80, 78],
},
],
});
},
},
axisLabel: {
rotate: 30,
interval: 0,
},
show: true, // 是否显示
data: ["莲都","龙泉","青田","云和","庆元","缙云","遂昌","松阳","景宁","开发区"],
},
// ------ y轴 ----------
yAxis: {
show: true, // 是否显示
name: "单位 (万剂)", // 轴名称
type: "value", // 轴类型，默认为 ‘category’
nameTextStyle: {
// 坐标轴名称样式
color: "#666",
padding: [5, 0, 0, 5], // 坐标轴名称相对位置
fontSize: 14,
},
},
// ------- 内容数据 -------
series: [
{
name: "库存量", // 序列名称
type: "bar", // 类型
legendHoverLink: true, // 是否启用图列 hover 时的联动高亮
itemStyle: {
// 图形的形状
color: "#48A1FF",
init_bar_2() {
this.bar_2 = this.$echarts.init(document.getElementById("bar_2"));
this.bar_2.setOption({
tooltip: {
show: true, // 是否显示提示框，默认为true
trigger: "item", // 数据项图形触发
axisPointer: {
// 指示样式
type: "shadow",
axis: "auto",
},
padding: 5,
textStyle: {
// 提示框内容的样式
color: "#666",
},
},
grid: {
top: "13%",
left: "10%",
right: "1%",
bottom: "15%",
},
// ---- gird区域 ---
// ------ X轴 ------
xAxis: {
type: "category",
axisLine: {
lineStyle: {
color: "#666",
},
},
axisLabel: {
rotate: 30,
interval: 0,
},
show: true, // 是否显示
data: ["莲都", "龙泉", "青田", "云和", "庆元", "缙云", "遂昌", "松阳", "景宁", "开发区"],
},
// ------ y轴 ----------
yAxis: {
show: true, // 是否显示
name: "单位 (万剂)", // 轴名称
type: "value", // 轴类型，默认为 ‘category’
nameTextStyle: {
// 坐标轴名称样式
color: "#666",
padding: [5, 0, 0, 5], // 坐标轴名称相对位置
fontSize: 14,
},
},
// ------- 内容数据 -------
series: [
{
name: "库存量", // 序列名称
type: "bar", // 类型
legendHoverLink: true, // 是否启用图列 hover 时的联动高亮
itemStyle: {
// 图形的形状
color: "#48A1FF",
},
barWidth: 15, // 柱形的宽度
barCategoryGap: "10%", // 柱形的间距
data: [100, 78, 90, 85, 93, 86, 98, 95, 80, 78],
},
],
});
},
barWidth: 15, // 柱形的宽度
barCategoryGap: "10%", // 柱形的间距
data: [100, 78, 90, 85, 93, 86, 98, 95, 80, 78],
},
],
});
},
},
};
},
};
</script>
<style lang='scss' scoped>
.module-tit {
font-size: 20px;
padding: 16px 0 12px 12px;
font-weight: 600;
position: relative;
}
.module-tit::before {
content: "";
position: absolute;
left: 0px;
top: 16px;
width: 4px;
height: 28px;
background-color: #1492ff;
}
.unifyitem {
box-sizing: border-box;
padding: 0 20px 12px;
background-color: #fff;
border-radius: 4px;
}
.module-tit {
font-size: 20px;
padding: 16px 0 12px 12px;
font-weight: 600;
position: relative;
}
h3 {
border-bottom: 1px solid #ddd;
}
button {
padding: 0 12px;
height: 30px;
line-height: 30px;
background-color: #1492ff;
border-radius: 2px;
border: 0;
color: #fff;
font-size: 16px;
}
input {
width: 155px;
height: 28px;
outline: none;
border: 0;
border: 1px solid #ccc;
border-radius: 2px;
margin-left: 5px;
font-size: 16px;
padding: 0 8px;
}
.ep-name {
font-size: 18px;
color: #1492ff;
margin: 12px 0 8px;
text-align: center;
}
.e-pro {
position: relative;
.e-pro-text {
.module-tit::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
white-space: nowrap;
left: 0px;
top: 16px;
width: 4px;
height: 28px;
background-color: #1492ff;
}
}
.epidemic {
width: calc(100% - 20px);
margin: 0px auto;
padding: 20px 0px 0px;
}
.epidemic-tabs {
margin-bottom: 10px;
.et-con {
.lis {
margin: 0px 0 10px;
p {
color: #1492ff;
background-color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
height: 48px;
line-height: 48px;
font-size: 20px;
border-radius: 2px;
cursor: pointer;
}
}
.et_disabled {
background-color: #fff !important;
color: #999 !important;
}
.active {
color: #fff !important;
background-color: #02a7f0 !important;
}
.unifyitem {
box-sizing: border-box;
padding: 0 20px 12px;
background-color: #fff;
border-radius: 4px;
}
h3 {
border-bottom: 1px solid #ddd;
}
button {
padding: 0 12px;
height: 30px;
line-height: 30px;
background-color: #1492ff;
border-radius: 2px;
border: 0;
color: #fff;
font-size: 16px;
}
input {
width: 155px;
height: 28px;
outline: none;
border: 0;
border: 1px solid #ccc;
border-radius: 2px;
margin-left: 5px;
font-size: 16px;
padding: 0 8px;
}
}
.general-situation {
.gs-top {
display: flex;
align-items: center;
justify-content: center;
.ep-name {
font-size: 18px;
color: #1492ff;
margin: 12px 0 8px;
p {
margin: 0 8px;
font-size: 18px;
}
.hr1 {
width: 40px;
height: 2px;
background: -webkit-gradient(
linear,
right top,
left top,
from(#4192f6),
to(#fff)
);
background: linear-gradient(270deg, #4192f6, #fff);
}
.hr2 {
width: 40px;
height: 2px;
background: -webkit-gradient(
linear,
left top,
right top,
from(#4192f6),
to(#fff)
);
background: linear-gradient(90deg, #4192f6, #fff);
}
text-align: center;
}
.gs-con {
margin: 20px 0;
.gs-con-item {
.e-pro {
position: relative;
.e-pro-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
background-color: #f6f7f8;
font-size: 18px;
box-sizing: border-box;
padding: 0 4px 1px;
div {
margin: 0px 0 8px;
}
span {
color: #1492ff;
margin-top: 10px;
}
p {
padding: 10px 0 0px;
}
.linb {
display: inline-block;
}
white-space: nowrap;
}
}
}
.key-groups {
.kg-con {
margin: 40px 0;
color: #333;
> div {
text-align: center;
p {
margin: 30px 0;
height: 56px;
.epidemic {
width: calc(100% - 20px);
margin: 0px auto;
padding: 20px 0px 0px;
}
.epidemic-tabs {
margin-bottom: 10px;
.et-con {
.lis {
margin: 0px 0 10px;
p {
color: #1492ff;
background-color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
height: 48px;
line-height: 48px;
font-size: 20px;
border-radius: 2px;
cursor: pointer;
}
}
.et_disabled {
background-color: #fff !important;
color: #999 !important;
}
.active {
color: #fff !important;
background-color: #02a7f0 !important;
}
}
>>> .el-progress-circle {
width: 100px !important;
height: 100px !important;
}
}
}
.vaccine-traceability {
h4 {
font-weight: normal;
font-size: 18px;
}
.vt-con {
.vt-top {
margin: 12px 0 0;
}
.vt-ipt {
.general-situation {
.gs-top {
display: flex;
align-items: center;
margin-bottom: 12px;
input {
width: 53%;
justify-content: center;
color: #1492ff;
margin: 12px 0 8px;
p {
margin: 0 8px;
font-size: 18px;
}
}
.vt-info-table {
>>> .el-table {
min-height: 60px;
border: 1px solid #ddd;
.hr1 {
width: 40px;
height: 2px;
background: -webkit-gradient(
linear,
right top,
left top,
from(#4192f6),
to(#fff)
);
background: linear-gradient(270deg, #4192f6, #fff);
}
>>> .is-leaf {
background-color: #1492ff;
color: #fff;
border-right: 1px solid #fff;
.hr2 {
width: 40px;
height: 2px;
background: -webkit-gradient(
linear,
left top,
right top,
from(#4192f6),
to(#fff)
);
background: linear-gradient(90deg, #4192f6, #fff);
}
}
.vaccinator-info {
margin: 12px 0;
border-bottom: 1px solid #ddd;
.vaccinator-info-con {
padding: 12px;
color: #333;
overflow: hidden;
.gs-con {
margin: 20px 0;
.gs-con-item {
text-align: center;
background-color: #f6f7f8;
font-size: 18px;
box-sizing: border-box;
padding: 0 4px 1px;
div {
margin: 0px 0 8px;
}
span {
color: #1492ff;
margin-top: 10px;
}
p {
margin: 5px 0;
padding: 10px 0 0px;
}
.linb {
display: inline-block;
}
}
}
}
}
.cold-chain-tracing {
h4 {
font-weight: normal;
font-size: 18px;
padding: 12px 0;
}
>>> .el-table__header tr,
>>> .el-table__header th {
padding: 0;
height: 40px;
}
>>> .is-leaf {
background-color: #1492ff;
color: #fff;
.key-groups {
.kg-con {
margin: 40px 0;
color: #333;
> div {
text-align: center;
p {
margin: 30px 0;
height: 56px;
}
}
> > > .el-progress-circle {
width: 100px !important;
height: 100px !important;
}
}
}
.monitoring {
.monitoring-first {
.mf-text {
.vaccine-traceability {
h4 {
font-weight: normal;
font-size: 18px;
}
.vt-con {
.vt-top {
margin: 12px 0 0;
}
.vt-ipt {
display: flex;
justify-content: space-between;
padding: 0 20px 0 12px;
margin: 8px 0;
align-items: center;
margin-bottom: 12px;
input {
width: 53%;
}
}
.vt-info-table {
> > > .el-table {
min-height: 60px;
border: 1px solid #ddd;
}
> > > .is-leaf {
background-color: #1492ff;
color: #fff;
border-right: 1px solid #fff;
}
}
.vaccinator-info {
margin: 12px 0;
border-bottom: 1px solid #ddd;
.vaccinator-info-con {
padding: 12px;
color: #333;
overflow: hidden;
p {
margin: 5px 0;
}
}
}
}
}
}
.result {
.re-search {
display: flex;
align-items: center;
margin: 12px 0 20px;
input {
margin: 0 8px;
.cold-chain-tracing {
h4 {
font-weight: normal;
font-size: 18px;
padding: 12px 0;
}
}
.re-step {
.step-title {
color: #1492ff;
padding: 8px 0;
border-bottom: 1px dashed #1492ff;
i {
font-size: 18px;
> > > .el-table__header tr,
> > > .el-table__header th {
padding: 0;
height: 40px;
}
> > > .is-leaf {
background-color: #1492ff;
color: #fff;
}
.monitoring {
.monitoring-first {
.mf-text {
display: flex;
justify-content: space-between;
padding: 0 20px 0 12px;
margin: 8px 0;
}
}
span {
padding: 0 5px;
border: 1px solid #1492ff;
line-height: 18px;
border-radius: 10px;
}
}
.result {
.re-search {
display: flex;
align-items: center;
margin: 12px 0 20px;
input {
margin: 0 8px;
}
}
.step-desc {
margin: 20px 0;
color: #333;
padding: 0 12px;
p {
margin: 8px 0;
.re-step {
.step-title {
color: #1492ff;
padding: 8px 0;
border-bottom: 1px dashed #1492ff;
i {
font-size: 18px;
}
span {
padding: 0 5px;
border: 1px solid #1492ff;
line-height: 18px;
border-radius: 10px;
}
}
.step-desc {
margin: 20px 0;
color: #333;
padding: 0 12px;
p {
margin: 8px 0;
}
}
}
}
}
</style>
\ No newline at end of file
</style>
qingtian_mobile/src/views/Industry.vue
View file @ 8bc03492
......@@ -3,7 +3,8 @@
<div class="index">
<div class="main">
<div class="minHeader shadow">
<div class="card__header">
<Breadcrumb :breadData="breadData"></Breadcrumb>
<!-- <div class="card__header">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item><a href="https://szzf.qingtian.gov.cn:18080"
>首页</a
......@@ -16,8 +17,8 @@
<i class="el-icon-office-building mr12"></i>
<p class="c3">牵头单位: 县发展和改革局</p>
</div>
</div>
<div class="flex acenter pl12 pr20 pb12">
</div> -->
<!-- <div class="flex acenter pl12 pr20 pb12">
<img src="../assets/images/target.png" class="icon28" />
<div class="flex acenter">
<div class="flex acenter eltxtx">
......@@ -26,7 +27,7 @@
</div>
<div class="c3">暂无数据</div>
</div>
</div>
</div> -->
</div>
<div class="tabtits">
<el-row :gutter="10">
......@@ -59,7 +60,7 @@
</div>
</div>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12">
<el-col :xs="24" :sm="12" :md="12" :lg="12" class="mt20">
<div class="minTop shadow">
<div class="card__header">
<p class="tieaft">本县规上工业增加值(2021年1-4月)</p>
......@@ -83,7 +84,7 @@
</div>
</div>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12">
<el-col :xs="24" :sm="12" :md="12" :lg="12" class="mt20">
<div class="minTop shadow">
<div class="card__header">
<p class="tieaft">区县规上工业利润(2021年1-4月)</p>
......@@ -100,10 +101,16 @@
</template>
<script>
import Breadcrumb from "../components/Breadcrumb.vue";
export default {
components: {},
components: {Breadcrumb},
data() {
return {
breadData: {
page_name: "产业发展",
annual_target: "暂无数据",
leading: "县发展和改革局",
},
industry_tabs: [
{
name: "数字经济",
......@@ -137,6 +144,9 @@ export default {
this.initCharts2();
this.initCharts3();
this.initCharts4();
window.addEventListener("resize", function (e) {
window.parent.postMessage(document.body.scrollHeight, '*');
});
},
//方法集合
methods: {
......
qingtian_mobile/src/views/Kjcx.vue
View file @ 8bc03492
......@@ -252,6 +252,9 @@ export default {
this.initCharts3();
this.initCharts4();
this.initCharts5();
window.addEventListener("resize", function (e) {
window.parent.postMessage(document.body.scrollHeight, '*');
});
},
methods: {
initCharts1() {
......
qingtian_mobile/src/views/Live.vue
View file @ 8bc03492
......@@ -2,7 +2,7 @@
<div class="live">
<div class="main">
<Breadcrumb :breadData="breadData"></Breadcrumb>
<el-row :gutter="20">
<el-row :gutter="20" class="mt20">
<el-col :xs="24" :sm="12" :md="12" :lg="12">
<div class="task">
<div class="task-census">
......@@ -334,6 +334,9 @@ export default {
mounted() {
this.init_bar_1();
this.init_bar_2();
window.addEventListener("resize", function (e) {
window.parent.postMessage(document.body.scrollHeight, '*');
});
},
methods: {
xtab(i) {
......
qingtian_mobile/src/views/NewUrbanization.vue
View file @ 8bc03492
......@@ -2,7 +2,7 @@
<div class="nu">
<div class="main">
<Breadcrumb :breadData="breadData"></Breadcrumb>
<div class="nu-tabs">
<div class="nu-tabs mt20">
<el-row class="uls" :gutter="10">
<el-col
class="lis"
......@@ -425,6 +425,9 @@ export default {
this.init_bar_2();
this.init_circle_3();
this.init_bar_3();
window.addEventListener("resize", function (e) {
window.parent.postMessage(document.body.scrollHeight, '*');
});
},
methods: {
tableRowClassName({ row }) {
......
qingtian_mobile/src/views/Region.vue
View file @ 8bc03492
......@@ -2,7 +2,7 @@
<div class="region">
<div class="main">
<Breadcrumb :breadData="breadData"></Breadcrumb>
<el-row :gutter="20">
<el-row :gutter="20" class="mt20">
<el-col :xs="24" :sm="12" :md="12" :lg="12">
<div class="unify-item box1_l">
<div class="module-tit">政府工作报告落实情况</div>
......@@ -82,6 +82,9 @@ export default {
this.initGzbgChart();
this.initSq26x1Chart();
this.initSq26x2Chart();
window.addEventListener("resize", function (e) {
window.parent.postMessage(document.body.scrollHeight, '*');
});
// let _this =this;
// window.onresize = () => {
// return (() => {
......
qingtian_mobile/src/views/Sxh.vue
View file @ 8bc03492
......@@ -159,6 +159,9 @@ export default {
},
mounted() {
this.initCharts1();
window.addEventListener("resize", function (e) {
window.parent.postMessage(document.body.scrollHeight, '*');
});
},
methods: {
initCharts1() {
......
qingtian_mobile/src/views/Szsy.vue
View file @ 8bc03492
......@@ -219,6 +219,12 @@ export default {
},
mounted() {
this.initCharts1();
<<<<<<< HEAD
=======
window.addEventListener("resize", function (e) {
window.parent.postMessage(document.body.scrollHeight, '*');
});
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
},
//方法集合
methods: {
......
qingtian_mobile/src/views/Xxgl.vue
View file @ 8bc03492
......@@ -156,9 +156,12 @@ export default {
};
},
mounted() {
let _this = this;
// let _this = this;
// this.initChart1();
this.initChart2();
window.addEventListener("resize", function (e) {
window.parent.postMessage(document.body.scrollHeight, '*');
});
// window.onresize = () => {
// return (() => {
// _this.initChart1();
......
qingtian_mobile/src/views/aqsc.vue
View file @ 8bc03492
......@@ -618,7 +618,7 @@
<p class="fs20 c3 b">企业风险普查</p>
<p class="c9">截止到5月底</p>
</div>
<div class="p20 flex between">
<div class="pt20 pb20 p10 flex between">
<el-tabs v-model="activeName1" type="card" @tab-click="handleClick1">
<el-tab-pane label="重点领域安全生产风险普查率" name="first">
<div id="main3" style="max-width: 100%; height: 320px"></div>
......@@ -848,6 +848,9 @@ export default {
this.initCharts5();
this.initCharts6();
this.initCharts7();
window.addEventListener("resize", function (e) {
window.parent.postMessage(document.body.scrollHeight, '*');
});
},
methods: {
handleClick1(tab, event) {
......
qingtian_mobile/src/views/err.vue
View file @ 8bc03492
<!-- -->
<template>
<<<<<<< HEAD
<div class=''>
无权限访问
=======
<div class='flex acenter jcenter mt20'>
<img src="../assets/images/err.png" alt="">
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
</div>
</template>
......
qingtian_mobile/src/views/xczx.vue
View file @ 8bc03492
......@@ -327,6 +327,9 @@ export default {
},
mounted() {
this.initCharts1();
window.addEventListener("resize", function (e) {
window.parent.postMessage(document.body.scrollHeight, '*');
});
},
methods: {
tabRowClassName({ row, rowIndex }) {
......
qingtian_mobile/src/views/yshj.vue
View file @ 8bc03492
......@@ -14,7 +14,8 @@
</el-breadcrumb>
</div>
<div class="mt12">
<div class="flex acenter">
<div class="fs16 mt12">牵头单位: 县发展和改革局</div>
<div class="flex acenter mt12">
<p class="b fs24 mr12 c3">营商环境市场活力</p>
<p class="kuai bradius4 c6dd bgf0f flex acenter jcenter h22">
<span
......@@ -23,7 +24,10 @@
<span class="fs12">正常</span>
</p>
</div>
<<<<<<< HEAD
<div class="fs16 mt12">牵头单位: 县发展和改革局</div>
=======
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
</div>
</div>
<div class="mt20 getgov">
......@@ -478,6 +482,9 @@ export default {
this.initCharts3();
this.initCharts4();
this.initCharts5();
window.addEventListener("resize", function (e) {
window.parent.postMessage(document.body.scrollHeight, '*');
});
},
//方法集合
methods: {
......
qingtian_vue/README.md
View file @ 8bc03492
......@@ -28,3 +28,44 @@ npm test
```
For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
<!-- window.addEventListener('message', async function (e, d) {
if (e.data && e.data.accessToken) {
var token = e.data.accessToken;
var url =
'https://portal.lishui.gov.cn:18080/api_2021/public/index.php/index/MicroPortalLogin/getUserInfoByAccessToken?token=' +token;
var user = await fetch(url);
var contentType = user.headers.get('Content-Type');
console.log(contentType);
console.log("return user");
console.log(user.json());
console.log("finishing");
} else {
window.location.replace("./#err");
} -->
// var data = JSON.parse(e.data);
// alert(data);
// var accessToken = data.accessToken;
// alert(accessToken);
//alert(e.data)
// let data = JSON.parse(e.data);
// let accessToken = data.accessToken;
})
qingtian_vue/index.html
View file @ 8bc03492
......@@ -31,7 +31,8 @@
// 埋点初始化代码
(function (w, d, s, q, i) {
w[q] = w[q] || [];
var f = d.getElementsByTagName(s)[0], j = d.createElement(s);
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s);
j.async = true;
j.id = 'beacon-aplus';
j.src = 'https://alidt.alicdn.com/alilog/mlog/aplus_cloud.js';
......@@ -39,6 +40,7 @@
})(window, document, 'script', 'aplus_queue');
//适配pad
var view_timer = null;
function viewPort(userAgent, pageWidth) {
var oView = document.getElementById('viewport');
if (oView) {
......@@ -48,7 +50,7 @@
pageWidth = 1440;
}
var screen_w = parseInt(window.screen.width),
screen_h =parseInt(window.screen.height),
screen_h = parseInt(window.screen.height),
scale = screen_w / pageWidth;
if (/Android (\d+\.\d+)/.test(userAgent)) {
var creat_meta = document.createElement('meta');
......@@ -56,7 +58,9 @@
creat_meta.id = 'viewport';
var version = parseFloat(RegExp.$1);
if (version > 2.3) {
creat_meta.content = 'width=' + pageWidth + ', initial-scale = ' + scale + ',user-scalable=1, minimum-scale = ' + scale + ', maximum-scale = ' + scale + ', target-densitydpi=device-dpi';
creat_meta.content = 'width=' + pageWidth + ', initial-scale = ' + scale +
',user-scalable=1, minimum-scale = ' + scale + ', maximum-scale = ' + scale +
', target-densitydpi=device-dpi';
} else {
creat_meta.content = '"width=' + pageWidth + ', target-densitydpi=device-dpi';
}
......@@ -65,12 +69,14 @@
var creat_meta = document.createElement('meta');
creat_meta.name = 'viewport';
creat_meta.id = 'viewport';
if (window.orientation == '-90' || window.orientation == '90') {//判断移动设备横屏竖屏
if (window.orientation == '-90' || window.orientation == '90') { //判断移动设备横屏竖屏
scale = window.screen.height / pageWidth;
creat_meta.content = 'width=' + pageWidth + ', initial-scale = ' + scale*screen_w/screen_h + ' ,minimum-scale = ' + scale*screen_w/screen_h + ', maximum-scale = ' + scale*screen_w/screen_h + ', user-scalable=no, target-densitydpi=device-dpi';
}
else {
creat_meta.content = 'width=' + pageWidth + ', initial-scale = ' + scale + ' ,minimum-scale = ' + scale + ', maximum-scale = ' + scale + ', user-scalable=no, target-densitydpi=device-dpi';
creat_meta.content = 'width=' + pageWidth + ', initial-scale = ' + scale * screen_w / screen_h +
' ,minimum-scale = ' + scale * screen_w / screen_h + ', maximum-scale = ' + scale * screen_w / screen_h +
', user-scalable=no, target-densitydpi=device-dpi';
} else {
creat_meta.content = 'width=' + pageWidth + ', initial-scale = ' + scale + ' ,minimum-scale = ' + scale +
', maximum-scale = ' + scale + ', user-scalable=no, target-densitydpi=device-dpi';
}
document.head.appendChild(creat_meta);
}
......@@ -82,6 +88,7 @@
viewPort(navigator.userAgent);
}, 500);
}
<<<<<<< HEAD
// window.addEventListener("message", function (e) {
// console.log(e);
// // let accessToken = e;
......@@ -89,6 +96,9 @@
// `https://lsszzf.lishui.gov.cn:18082/common/login/getuserinfo.php`
// );
// });
=======
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
</script>
</html>
\ No newline at end of file
</html>
qingtian_vue/package.json
View file @ 8bc03492
......@@ -42,6 +42,7 @@
"copy-webpack-plugin": "^4.0.1",
"cross-spawn": "^5.0.1",
"css-loader": "^0.28.0",
"element-resize-detector": "^1.2.3",
"eslint": "^4.15.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
......
qingtian_vue/src/App.vue
View file @ 8bc03492
......@@ -7,6 +7,11 @@
<script>
export default {
name: "App",
methods: {
// qw() {
// this.$router.replace({path: '/err'})
// }
}
};
</script>
......
qingtian_vue/src/components/Breadcrumb.vue
View file @ 8bc03492
......@@ -8,11 +8,19 @@
separator-class="el-icon-arrow-right"
>
<el-breadcrumb-item
<<<<<<< HEAD
><a href="https://szzf.qingtian.gov.cn:18080"
>首页</a
></el-breadcrumb-item
>
<el-breadcrumb-item>{{ breadData.page_name }}</el-breadcrumb-item>
=======
><a href="https://szzf.qingtian.gov.cn:18080" target="_parent"
>首页</a
></el-breadcrumb-item>
<el-breadcrumb-item ><span style="font-weight: bold !important;font-size: 18px !important;">{{ breadData.page_name }}</span></el-breadcrumb-item>
<el-breadcrumb-item v-if="breadData.child"><span style="font-weight: normal !important;font-size: 16px !important;">{{ breadData.child }}</span></el-breadcrumb-item>
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
</el-breadcrumb>
<div>
<i class="iconfont icon-chengshi"></i>
......@@ -24,7 +32,11 @@
<div class="breadcrumb-text" v-if="show">
<div class="breadcrumb-title">
<img src="../assets/images/target.png" alt="" />
<<<<<<< HEAD
<span>年度目标</span>
=======
<span style="font-size:16px !important">年度目标</span>
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
<div class="s-line"></div>
{{ breadData.annual_target }}
</div>
......@@ -50,7 +62,11 @@ export default {
},
data() {
return {
<<<<<<< HEAD
show: true
=======
show: false
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
};
},
methods: {
......@@ -65,6 +81,10 @@ export default {
.breadcrumb-t {
position: relative;
background:#fff;
<<<<<<< HEAD
=======
border-radius: 6px;
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
}
.breadcrumb {
width: 100%;
......@@ -75,8 +95,13 @@ export default {
margin-bottom: 16px;
>>> .el-breadcrumb__inner {
color: #333;
<<<<<<< HEAD
font-weight: bold;
font-size: 18px;
=======
font-weight: bold ;
font-size: 18px ;
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
a {
font-weight: 400;
font-size: 16px;
......@@ -88,6 +113,11 @@ export default {
align-items: center;
}
}
<<<<<<< HEAD
=======
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
.breadcrumb-text {
padding: 16px 20px 0;
}
......@@ -98,7 +128,12 @@ export default {
span {
color: #1492ff;
margin-right: 8px;
<<<<<<< HEAD
font-size: 18px;
=======
font-weight: bold !important;
font-size: 18px !important;
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
}
.s-line {
width: 1px;
......@@ -168,4 +203,8 @@ export default {
border-right: 20px solid transparent;
border-top: 20px solid transparent;
}
</style>
\ No newline at end of file
<<<<<<< HEAD
</style>
=======
</style>
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
qingtian_vue/src/main.js
View file @ 8bc03492
......@@ -10,6 +10,9 @@ import 'element-ui/lib/theme-chalk/index.css'
import './assets/font/iconfont.css'
import * as echarts from 'echarts'
import 'default-passive-events'
import ElementResizeDetectorMaker from 'element-resize-detector';
Vue.prototype.$erd = ElementResizeDetectorMaker();
Vue.prototype.$echarts = echarts
Vue.use(ElementUI)
Vue.config.productionTip = false
......
qingtian_vue/src/router/index.js
View file @ 8bc03492
......@@ -18,8 +18,7 @@ import Szsy from '../views/Szsy.vue'
import Err from '../views/err.vue'
Vue.use(Router)
var router = new Router({
routes: [
{
routes: [{
path: '/',
name: 'Index',
component: MyIndex
......@@ -27,79 +26,116 @@ var router = new Router({
{
path: '/xxczh',
name: 'NewUrbanization',
meta: { title: '新型城镇化' },
meta: {
title: '新型城镇化'
},
component: Xxczh
},
{
path: '/msbz',
name: 'live',
<<<<<<< HEAD
meta: { title: '民生保障' },
=======
meta: {
title: '民生保障'
},
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
component: Msbz
},
{
path: '/qyxtfz',
name: 'region',
meta: { title: '区域协调发展' },
meta: {
title: '区域协调发展'
},
component: Qyxtfz
},
{
path: '/cyfz',
name: 'Cyfz',
meta: { title: '产业发展' },
meta: {
title: '产业发展'
},
component: Cyfz
},
{
path: '/xczx',
name: 'Xczx',
meta: { title: '乡村振兴' },
meta: {
title: '乡村振兴'
},
component: Xczx
},
{
path: '/aqsc',
name: 'Aqsc',
meta: { title: '安全生产' },
meta: {
title: '安全生产'
},
component: Aqsc
},
{
path: '/sxh',
name: 'Sxh',
meta: { title: '双循环' },
meta: {
title: '双循环'
},
component: Sxh
},
{
path: '/kjcx',
name: 'Kjcx',
meta: { title: '科技创新' },
meta: {
title: '科技创新'
},
component: Kjcx
},
{
path: '/yshj',
name: 'Yshj',
meta: { title: '营商环境' },
meta: {
title: '营商环境'
},
component: Yshj
},
{
path: '/ctfy',
name: 'Ctfy',
meta: { title: '常态防疫' },
meta: {
title: '常态防疫'
},
component: Ctfy
},
{
path: '/cthfy',
name: 'Cthfy',
meta: {
title: '常态防疫'
},
component: Ctfy
},
{
path: '/stwm',
name: 'Stwm',
meta: { title: '生态文明' },
meta: {
title: '生态文明'
},
component: Stwm
},
{
path: '/xxgl',
name: 'Xxgl',
meta: { title: '信息管理' },
meta: {
title: '信息管理'
},
component: Xxgl
},
{
path: '/szsy',
name: 'Szsy',
<<<<<<< HEAD
meta: { title: '双招双引' },
component: Szsy
},
......@@ -107,6 +143,19 @@ var router = new Router({
path: '/err?debug=true',
name: 'Err',
meta: { title: '无权限' },
=======
meta: {
title: '双招双引'
},
component: Szsy
},
{
path: '/err',
name: 'Err',
meta: {
title: '无权限'
},
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
component: Err
}
]
......@@ -122,6 +171,7 @@ router.beforeEach((to, from, next) => {
// if (to.path == "/login"||to.path=="/nopower") {
next()
<<<<<<< HEAD
// if (to.path == '/') {
// next()
// } else if (to.fullPath.indexOf('?') != -1) {
......@@ -136,6 +186,9 @@ router.beforeEach((to, from, next) => {
// } else {
// next({name: 'Err'})
// }
=======
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
// } else {
......@@ -149,16 +202,31 @@ router.beforeEach((to, from, next) => {
/*---------埋点代码开始 （路由切换执行）----------*/
// 单页应用 或 “单个页面”需异步补充PV日志参数还需进行如下埋点：
aplus_queue.push({ action: 'aplus.setMetaInfo', arguments: ['aplus-waiting', 'MAN'] });
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['aplus-waiting', 'MAN']
});
// PV日志接收日志域名，必须按实际情况填写
aplus_queue.push({ action: 'aplus.setMetaInfo', arguments: ['aplus-rhost-v', 'alog.zjzwfw.gov.cn'] });
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['aplus-rhost-v', 'alog.zjzwfw.gov.cn']
});
// 一般日志（如点击和曝光）接收日志域名
aplus_queue.push({ action: 'aplus.setMetaInfo', arguments: ['aplus-rhost-g', 'alog.zjzwfw.gov.cn'] });
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['aplus-rhost-g', 'alog.zjzwfw.gov.cn']
});
// 判单设备设置appId
aplus_queue.push({ action: 'aplus.setMetaInfo', arguments: ['appId', isAndroid ? '28302650' : isIOS ? '28328447' : '47130293'] });
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['appId', isAndroid ? '28302650' : isIOS ? '28328447' : '47130293']
});
// 如采集用户信息是异步行为需要先执行这个BLOCK埋点
aplus_queue.push({ action: 'aplus.setMetaInfo', arguments: ['_hold', 'BLOCK'] });
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['_hold', 'BLOCK']
});
aplus_queue.push({
'action': 'aplus.sendPV',
......@@ -169,16 +237,16 @@ router.beforeEach((to, from, next) => {
sapp_id: '14053',
sapp_name: 'szzf-yh',
// 自定义PV参数key-value键值对（只能是这种平铺的json，不能做多层嵌套），除userName外（考虑安全原因暂时做废弃处理），其他为必填项。
dev_type: devType, // 设备类型
site_type: '101', // 站点类型 数字化改革门户100 数字政府101 党政机关整体智治102 数字社会103 数字经济104 数字法治105
is_digital_reform: '1', // 固定值传1，标识是否为数字化改革相关应用
is_workbench: '1', // 新增字段，标识是否为数字化改革工作台，取值 1或0，1代表是，0代表不是，不填该参数取默认值0
city_code: '331100', // 设区市编码
area_code: '331125', // 区县编码
page_name: '云和数字政府门户', // 页面名称
dev_type: devType, // 设备类型
site_type: '101', // 站点类型 数字化改革门户100 数字政府101 党政机关整体智治102 数字社会103 数字经济104 数字法治105
is_digital_reform: '1', // 固定值传1，标识是否为数字化改革相关应用
is_workbench: '1', // 新增字段，标识是否为数字化改革工作台，取值 1或0，1代表是，0代表不是，不填该参数取默认值0
city_code: '331100', // 设区市编码
area_code: '331125', // 区县编码
page_name: '云和数字政府门户', // 页面名称
page_url: window.location.href,
page_id: window.location.hash,
_user_id: sessionStorage.token ? JSON.parse(sessionStorage.token).accountId : '', // 客户端用户ID（浙政钉2.0ID）
_user_id: sessionStorage.token ? JSON.parse(sessionStorage.token).accountId : '', // 客户端用户ID（浙政钉2.0ID）
// _user_nick: '', // userName考虑安全原因暂时做废弃处理
}]
})
......@@ -194,7 +262,10 @@ router.beforeEach((to, from, next) => {
});
// 如采集用户信息是异步行为，需要先设置完用户信息后再执行这个START埋点
// 此时被block住的日志会携带上用户信息逐条发出
aplus_queue.push({ action: 'aplus.setMetaInfo', arguments: ['_hold', 'START'] });
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['_hold', 'START']
});
/*---------埋点代码结束----------*/
......
qingtian_vue/src/util/jianquan.js 0 → 100644
View file @ 8bc03492
function parseUser(json) {
if (json.code != "200") {
return null;
}
var data = json.data;
if (data == null || data == undefined) {
return null;
}
var username = data.username;
if (username == null || username == undefined || username == "") {
return null;
}
return username;
}
export async function messageFun(e) {
if (e.data && e.data.accessToken) {
var token = e.data.accessToken;
if (token == null || token == undefined) {
return false;
}
try {
console.log(token);
var url =
'https://portal.lishui.gov.cn:18080/api_2021/public/index.php/index/MicroPortalLogin/getUserInfoByAccessToken?accessToken=' + token;
var user = await fetch(url);
console.log(url);
var contentType = user.headers.get('Content-Type');
console.log(contentType);
console.log("return user");
var json = await user.json();
var username = parseUser(json);
console.log(json);
console.log("welcome:" + username);
if (username == null) {
return false;
}
console.log("finishing");
} catch (e) {
return false;
}
} else {
return false;
}
return true;
}
qingtian_vue/src/views/Aqsc.vue
View file @ 8bc03492
......@@ -2,6 +2,7 @@
<div class="main">
<div class="minHeader shadow">
<Breadcrumb :breadData="breadData"></Breadcrumb>
<<<<<<< HEAD
<!-- <div class="card__header flex between">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item><a href="https://szzf.qingtian.gov.cn:18080">首页</a></el-breadcrumb-item>
......@@ -22,17 +23,21 @@
>
</div>
</div> -->
=======
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
</div>
<div class="minTop shadow mt20">
<div>
<div class="flex between card__header">
<p class="fs20 c3 b">全县安全生产形势分析</p>
<p class="c9">截止到5月底</p>
<p class="c9">截止到7月底</p>
</div>
<div class="p20 flex between">
<div class="mr20 w57">
<div>
<div class="flex acenter lh30">
<<<<<<< HEAD
<img src="../assets/images/people.png" class="mr12 icon16" />
<p>事故起数 19 起，同比前两年平均值</p>
<em class="norm ml12">↓37.7%</em>
......@@ -41,9 +46,19 @@
<img src="../assets/images/ren.png" class="mr12 icon16" />
<p>死亡人数 18 人，同比前两年平均值</p>
<em class="norm ml12">↓16.3%</em>
=======
<img src="../assets/images/people.png" class="mr12 icon16"/>
<p>事故起数 8 起，同比前两年平均值</p>
<em class="norm ml12">0%</em>
</div>
<div class="flex acenter lh30">
<img src="../assets/images/ren.png" class="mr12 icon16"/>
<p>死亡人数 5 人，同比前两年平均值</p>
<em class="norm ml12">0%</em>
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
</div>
</div>
<div class="textCenter mt20 c3">2021年全市安全生产事故情况</div>
<div class="textCenter mt20 c3">2021年全县安全生产事故情况</div>
<div class="zhan mt12">
<div id="main1" style="max-width: 100%; height: 280px"></div>
</div>
......@@ -63,7 +78,11 @@
<p class="fs18 cd4 b">0</p>
</div>
</div>
<<<<<<< HEAD
<div class="textCenter mt20 c3">2021年全市安全生产事故情况</div>
=======
<div class="textCenter mt20 c3">2021年全县安全生产事故情况</div>
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
<div class="zhan mt12">
<div id="main2" style="max-width: 100%; height: 280px"></div>
</div>
......@@ -75,7 +94,7 @@
<div class="w49 h510">
<div class="flex between card__header">
<p class="fs20 c3 b">重点领域整治攻坚</p>
<p class="c9">截止到5月底</p>
<p class="c9">截止到7月底</p>
</div>
<div class="p20">
<div class="flex around wrap w100">
......@@ -113,7 +132,11 @@
class="item btn2 cf mt20"
effect="white"
content="建设中..."
<<<<<<< HEAD
placement="top"
=======
placement="bottom"
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
>
<p>建设施工</p>
</el-tooltip>
......@@ -121,7 +144,11 @@
class="item btn2 cf mt20"
effect="white"
content="建设中..."
<<<<<<< HEAD
placement="top"
=======
placement="bottom"
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
>
<p>城市运行</p>
</el-tooltip>
......@@ -129,7 +156,11 @@
class="item btn2 cf mt20"
effect="white"
content="建设中..."
<<<<<<< HEAD
placement="top"
=======
placement="bottom"
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
>
<p>旅游领域</p>
</el-tooltip>
......@@ -137,7 +168,11 @@
class="item btn2 cf mt20"
effect="white"
content="建设中..."
<<<<<<< HEAD
placement="top"
=======
placement="bottom"
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
>
<p>特种设备</p>
</el-tooltip>
......@@ -186,7 +221,7 @@
"
></path>
</svg>
<div class="el-progress_text">58%</div>
<div class="el-progress_text">100%</div>
</div>
<div class="textCenter mt12">
<p>危化领域</p>
......@@ -236,14 +271,18 @@
"
></path>
</svg>
<div class="el-progress_text">58%</div>
<div class="el-progress_text">0%</div>
</div>
<div class="textCenter mt12">
<p>化工产业</p>
<p>“禁限控”目录制定率</p>
</div>
</div>
<<<<<<< HEAD
<div class="flex column acenter">
=======
<!-- <div class="flex column acenter">
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
<div
class="el-progress--circle"
style="height: 80px; width: 80px"
......@@ -292,10 +331,14 @@
<p>重大危险源</p>
<p>在线管控</p>
</div>
</div>
</div> -->
</div>
<div class="flex around mt20 wrap" v-if="gkShow">
<<<<<<< HEAD
<div class="flex column acenter icon160">
=======
<div class="flex column acenter ">
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
<div
class="el-progress--circle"
style="height: 80px; width: 80px"
......@@ -338,14 +381,18 @@
"
></path>
</svg>
<div class="el-progress_text">11座</div>
<div class="el-progress_text">2座</div>
</div>
<div class="textCenter mt12">
<p>尾矿库</p>
<p>在线监测监控</p>
</div>
</div>
<<<<<<< HEAD
<div class="flex column acenter icon160">
=======
<div class="flex column acenter ">
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
<div
class="el-progress--circle"
style="height: 80px; width: 80px"
......@@ -388,14 +435,18 @@
"
></path>
</svg>
<div class="el-progress_text">95%</div>
<div class="el-progress_text">100%</div>
</div>
<div class="textCenter mt12">
<p>三项岗位人员</p>
<p>上岗持证率</p>
</div>
</div>
<<<<<<< HEAD
<div class="flex column acenter icon160">
=======
<div class="flex column acenter ">
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
<div
class="el-progress--circle"
style="height: 80px; width: 80px"
......@@ -445,7 +496,13 @@
<p>堆积坝的整改率</p>
</div>
</div>
<<<<<<< HEAD
<div class="flex column acenter icon160 mt12">
=======
</div>
<div class="flex around mt20 wrap" v-if="gkShow">
<div class="flex column acenter mt12">
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
<div
class="el-progress--circle"
style="height: 80px; width: 80px"
......@@ -488,14 +545,18 @@
"
></path>
</svg>
<div class="el-progress_text">29%</div>
<div class="el-progress_text">100%</div>
</div>
<div class="textCenter mt12">
<p>涉爆粉尘企业</p>
<p>网络专题学习率</p>
</div>
</div>
<<<<<<< HEAD
<div class="flex column acenter icon160 mt12">
=======
<div class="flex column acenter mt12">
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
<div
class="el-progress--circle"
style="height: 80px; width: 80px"
......@@ -538,14 +599,18 @@
"
></path>
</svg>
<div class="el-progress_text">62.9%</div>
<div class="el-progress_text">100%</div>
</div>
<div class="textCenter mt12">
<p>涉爆粉尘企业安全生产</p>
<p>社会化服务覆盖率</p>
</div>
</div>
<<<<<<< HEAD
<div class="flex column acenter icon160 mt12">
=======
<div class="flex column acenter mt12">
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
<div
class="el-progress--circle"
style="height: 80px; width: 80px"
......@@ -588,7 +653,7 @@
"
></path>
</svg>
<div class="el-progress_text">95%</div>
<div class="el-progress_text">100%</div>
</div>
<div class="textCenter mt12">
<p>粉尘爆炸危险场所</p>
......@@ -601,7 +666,7 @@
<div class="ml20 w49">
<div class="flex between card__header">
<p class="fs20 c3 b">企业风险普查</p>
<p class="c9">截止到5月底</p>
<p class="c9">截止到7月底</p>
</div>
<div class="p20 flex between">
<el-tabs v-model="activeName1" type="card" @tab-click="handleClick1">
......@@ -627,16 +692,24 @@
<div class="w49">
<div class="flex between card__header">
<p class="fs20 c3 b">自然灾害防控</p>
<!-- <p class="c9">截止到5月底</p> -->
<!-- <p class="c9">截止到7月底</p> -->
</div>
<div class="p20 flex between">
<el-tabs v-model="activeName2" type="card" @tab-click="handleClick2">
<el-tab-pane label="基层防汛“掌上应急”开通情况" name="first">
<<<<<<< HEAD
<p class="textCenter mb12">全市基层防汛“掌上应急”开通情况</p>
<div id="main5" style="max-width: 100%; height: 210px"></div>
</el-tab-pane>
<el-tab-pane label="村级防汛防台形势图修编" name="second">
<p class="textCenter mb12">全市村级防汛防台形势图修编</p>
=======
<p class="textCenter mb12">全县基层防汛“掌上应急”开通情况</p>
<div id="main5" style="max-width: 100%; height: 210px"></div>
</el-tab-pane>
<el-tab-pane label="村级防汛防台形势图修编" name="second">
<p class="textCenter mb12">全县村级防汛防台形势图修编</p>
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
<div id="main6" style="max-width: 100%; height: 210px"></div>
</el-tab-pane>
</el-tabs>
......@@ -645,7 +718,7 @@
<div class="ml20 w49">
<div class="flex between card__header">
<p class="fs20 c3 b">应急救援</p>
<p class="c9">截止到5月底</p>
<p class="c9">截止到7月底</p>
</div>
<div class="p20 flex between">
<el-tabs v-model="activeName3" type="card" @tab-click="handleClick3">
......@@ -655,12 +728,16 @@
<div class="mb12 mr40">
<div class="flex between ml20 mb12">
<p>培育社会救援队伍 (支)</p>
<p>1/3</p>
<p>4/4</p>
</div>
<div class="flex acenter">
<em class="zfx">◆</em>
<el-progress
<<<<<<< HEAD
:percentage="33.3"
=======
:percentage="100"
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
:show-text="false"
></el-progress>
</div>
......@@ -668,12 +745,16 @@
<div class="mb12 mr40">
<div class="flex between ml20 mb12">
<p>乡镇综合应急救援队伍（队）</p>
<p>4/18</p>
<p>0/0</p>
</div>
<div class="flex acenter">
<em class="zfx">◆</em>
<el-progress
<<<<<<< HEAD
:percentage="22.22"
=======
:percentage="100"
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
:show-text="false"
></el-progress>
</div>
......@@ -681,12 +762,16 @@
<div class="mb12 mr40">
<div class="flex between ml20 mb12">
<p>救援直升机临时起降点（个）</p>
<p>2/9</p>
<p>1/1</p>
</div>
<div class="flex acenter">
<em class="zfx">◆</em>
<el-progress
<<<<<<< HEAD
:percentage="22.22"
=======
:percentage="100"
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
:show-text="false"
></el-progress>
</div>
......@@ -697,9 +782,22 @@
<p></p>
<div id="main7" style="max-width: 100%; height: 210px"></div>
</el-tab-pane>
<<<<<<< HEAD
<el-tab-pane label="森林火险防控" name="third">
=======
<el-tab-pane label="森林火险防控" name="third" disabled="true" title="建设中" tooltip="建设中">
<el-tooltip class="item-tabs" effect="light" placement="top" slot="label">
<div slot="content">
建设中
</div>
<span><i class="el-icon-date"></i> 森林火险防控</span>
</el-tooltip>
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
<div id="main8" style="max-width: 100%; height: 210px"></div>
</el-tab-pane>
</el-tabs>
</div>
</div>
......@@ -711,7 +809,7 @@
<p class="fs20 c3 b mr12">突发事件</p>
<div class="cc8">{{ myCity }}应急管理综合指挥平台</div>
</div>
<p class="c9">截止到5月底</p>
<p class="c9">截止到7月底</p>
</div>
<div class="p20 flex between aqsc">
<el-table :data="tableData" height="250" border style="width: 100%">
......@@ -727,7 +825,11 @@
</el-table-column>
<el-table-column prop="time" label="发生时间" width="220">
</el-table-column>
<<<<<<< HEAD
<el-table-column prop="origin" label="信息来源"> </el-table-column>
=======
<el-table-column prop="origin" label="信息来源"></el-table-column>
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
<el-table-column prop="msg" label="应急预案" width="120">
</el-table-column>
</el-table>
......@@ -738,6 +840,7 @@
</template>
<script>
<<<<<<< HEAD
let one, two, three, four, five, six, seven;
const _myCity = "青田县";
import Breadcrumb from "../components/Breadcrumb.vue";
......@@ -1272,6 +1375,598 @@ export default {
margin: 20px auto 0;
background: #fff;
}
=======
let one, two, three, four, five, six, seven;
const _myCity = "青田县";
import Breadcrumb from "../components/Breadcrumb.vue";
import {getUserInfo, getTask, postUserInfo} from '../api/index'
import
{
messageFun
}
from
'../util/jianquan'
export default {
name: "epidemic",
components: {Breadcrumb},
data() {
return {
breadData: {
page_name: "安全生产",
annual_target:
"为有效行使工作职责，确保安全生产，做好应急工作。",
leading: "应急管理局",
},
myCity: _myCity,
activeName1: "second",
activeName2: "first",
activeName3: "first",
tableData: [
// {
// id: 1,
// uname:
// "百货大楼晶都步行街外立面改造装修工程发生一起高处坠落事故",
// level: "一般",
// types: "建筑业",
// time: "2021年06月18日 08:25:00",
// origin: "应急管理局",
// msg: "应急预案",
// },
// {
// id: 2,
// uname: "县发生一起事故造成1人死亡事件",
// level: "一般",
// types: "商贸其他",
// time: "2021年06月10日 08:25:00",
// origin: "应急管理局",
// msg: "应急预案",
// },
// {
// id: 3,
// uname: "发生一起叉车碰撞事故，致一人死亡",
// level: "一般",
// types: "轻工",
// time: "2021年06月10日 07:25:00",
// origin: "乡镇上报",
// msg: "应急预案",
// },
// {
// id: 4,
// uname:
// "百货大楼晶都步行街外立面改造装修工程发生一起高处坠落事故",
// level: "一般",
// types: "建筑业",
// time: "2021年06月18日 08:25:00",
// origin: "应急管理局",
// msg: "应急预案",
// },
{
id: 5,
uname: "青田县山口镇至方山乡公路发生山体塌方",
level: "一般",
types: "地质灾害",
time: "2021年05月27日 08:25:00",
origin: "青田县应急管理局",
msg: "应急预案",
},
{
id: 6,
uname:
"青田县东源镇浙江以勒标准件制造有限公司发生一起触电事故致一人死亡",
level: "特别重大",
types: "商贸其他",
time: "2021年05月12日 08:25:00",
origin: "青田应急值班室",
msg: "应急预案",
},
],
gkShow: false,
whShow: true,
showTit: false,
};
},
mounted() {
this.listenMessage();
let _this = this;
this.initGzbgChart();
this.initGzbgChart2();
this.initGzbgChart3();
this.initGzbgChart4();
this.initGzbgChart5();
this.initGzbgChart6();
this.initGzbgChart7();
window.parent.postMessage(document.body.scrollHeight, '*');
window.onresize = () => {
return (() => {
_this.initGzbgChart();
_this.initGzbgChart2();
_this.initGzbgChart3();
_this.initGzbgChart4();
_this.initGzbgChart5();
_this.initGzbgChart6();
_this.initGzbgChart7();
window.parent.postMessage(document.body.scrollHeight, '*');
})();
};
window.addEventListener("resize", function (e) {
window.parent.postMessage(document.body.scrollHeight, '*');
});
},
methods: {
listenMessage() {
window.addEventListener('message', this.bindThis.bind(this));
},
async bindThis(e){
const query=this.$route.query;
if(query.debug=="true")
{
return;
}
const ret=await messageFun(e);
if(ret==false)
{
this.$router.push("err");
}
},
handleClick1(tab, event) {
this.activeName1 = tab.name;
this.$nextTick(function () {
this.initGzbgChart3();
this.initGzbgChart4();
});
},
handleClick2(tab, event) {
this.$nextTick(function () {
this.initGzbgChart5();
this.initGzbgChart6();
});
},
handleClick3(tab, event) {
this.$nextTick(function () {
this.initGzbgChart7();
// this.initGzbgChart8();
});
},
indexMethod(index) {
return index * 1 + 1;
},
gk() {
this.gkShow = true;
this.whShow = !this.whShow;
},
wh() {
this.whShow = true;
this.gkShow = !this.gkShow;
},
warns() {
this.showTit = true;
},
initGzbgChart() {
if (one != null && one != "" && one != undefined) {
one.dispose(); //销毁
}
one = this.$echarts.init(document.getElementById("main1"));
one.setOption({
color: ["#1492ff", "#d40000"],
tooltip: {
trigger: "axis",
},
legend: {
data: ["事故起数", "死亡人数"],
bottom: 0,
},
grid: {
top: "8%",
left: "3%",
right: "5%",
bottom: "15%",
containLabel: true,
},
calculable: true,
xAxis: [
{
type: "category",
data: [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月",
],
},
],
yAxis: {
type: "value",
show: false,
},
series: [
{
name: "事故起数",
type: "bar",
data: [0, 0, 1, 1, 2, 4, 0, 0, 0, 0, 0, 0],
label: {
// 在图形上显示每个数据
show: true,
position: "top",
itemStyle: {
color: "#1492ff", //柱子的颜色
},
},
},
{
name: "死亡人数",
type: "bar",
data: [0, 0, 0, 0, 1, 4, 0, 0, 0, 0, 0, 0],
label: {
// 在图形上显示每个数据
show: true,
position: "top",
itemStyle: {
normal: {
color: "#d40000", //柱子的颜色
},
},
},
},
],
});
},
initGzbgChart2() {
if (two != null && two != "" && two != undefined) {
two.dispose(); //销毁
}
two = this.$echarts.init(document.getElementById("main2"));
two.setOption({
color: ["#ff6b00", "#d40000", "#15be50"],
tooltip: {
trigger: "item",
},
legend: {
bottom: 0,
left: "center",
},
series: [
{
name: ["3", "18", "0"],
type: "pie",
radius: ["50%", "70%"],
data: [
{value: 1, name: "工矿商贸", seriesName: "0"},
{value: 7, name: "道路交通", seriesName: "0"},
{value: 0, name: "消防火灾", seriesName: "0"},
],
label: {
show: true,
// position: 'top',
formatter: "{c}起",
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
],
});
},
initGzbgChart3() {
if (three != null && three != "" && three != undefined) {
three.dispose(); //销毁
}
three = this.$echarts.init(document.getElementById("main3"));
three.setOption({
color: ["#15be50"],
xAxis: {
type: "category",
data: [
"危化领域",
"工矿领域",
"消防领域",
"道路交通",
"建设施工",
"城市运行",
"旅游领域",
"特种设备",
],
axisLabel: {
textStyle: {
color: "#333", //坐标值得具体的颜色
fontSize: 14,
},
interval: 0,
},
axisTick: {
show: true,
},
axisLine: {
lineStyle: {
color: "#dddddd",
},
},
},
yAxis: {
show: false,
},
series: [
{
data: [100, 100, 100, 100, 100, 100, 100, 100],
type: "bar",
label: {
show: true,
position: "top",
formatter: "{c}%",
},
barWidth: 30, // 柱子宽度
},
],
grid: {
top: "5%",
left: "3%",
right: "5%",
bottom: "5%",
containLabel: true,
},
});
},
initGzbgChart4() {
if (four != null && four != "" && four != undefined) {
four.dispose(); //销毁
}
four = this.$echarts.init(document.getElementById("main4"));
four.setOption({
color: ["#EE6666", "#FAC858", "#5470C6", "#91CC75"],
tooltip: {
trigger: "item",
},
legend: {
right: 0,
orient: "vertical",
top: "center",
},
grid: {
top: "5%",
left: "3%",
right: "5%",
bottom: "18%",
containLabel: true,
},
series: [
{
name: "访问来源",
type: "pie",
radius: "50%",
data: [
{value: 0.22, name: "重大风险", seriesName: "15"},
{value: 0.06, name: "较大风险", seriesName: "4 "},
{value: 14.39, name: "一般风险", seriesName: "975"},
{value: 85.33, name: "低风险", seriesName: "5809"},
],
label: {
show: true,
// position: 'top',
formatter: "{b} {d} {c}%",
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
],
});
},
initGzbgChart5() {
if (five != null && five != "" && five != undefined) {
five.dispose(); //销毁
}
five = this.$echarts.init(document.getElementById("main5"));
five.setOption({
xAxis: {
type: "category",
data: ["05-01", "05-08", "05-15", "05-22", "05-27", "05-31"],
},
yAxis: {
type: "value",
min: 0,
max: 100,
splitNumber: 5,
splitLine: {
show: true,
},
axisLine: {
lineStyle: {
color: "#333333",
},
},
axisLabel: {
formatter: "{value}%",
},
},
series: [
{
data: [15, 21, 23, 39, 42, 65],
type: "line",
},
],
grid: {
top: "4%",
left: "3%",
right: "5%",
bottom: "18%",
containLabel: true,
},
});
},
initGzbgChart6() {
if (six != null && six != "" && six != undefined) {
six.dispose(); //销毁
}
six = this.$echarts.init(document.getElementById("main6"));
six.setOption({
color: ["#FF3E38", "#53A8E8"],
tooltip: {
trigger: "11",
},
legend: {
// orient: 'vertical',
left: "center",
},
series: [
{
name: "访问来源",
type: "pie",
radius: "50%",
data: [
{value: 0, name: "未编修", seriesName: "0"},
{value: 100, name: "已编修", seriesName: "140"},
],
label: {
show: true,
// position: 'top',
formatter: "{b} {d} {c}% ",
fontSize: 16,
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
],
grid: {
top: "4%",
left: "3%",
right: "5%",
bottom: "18%",
containLabel: true,
},
});
},
initGzbgChart7() {
if (seven != null && seven != "" && seven != undefined) {
seven.dispose(); //销毁
}
seven = this.$echarts.init(document.getElementById("main7"));
seven.setOption({
xAxis: {
type: "category",
data: [
"05-01",
"05-08",
"05-15",
"05-22",
"05-27",
"05-31",
"06-07",
"06-14",
"06-21",
],
},
legend: {
data: ["乡镇应急救援队伍"],
},
yAxis: {
type: "value",
min: 0,
max: 120,
splitNumber: 5,
splitLine: {
show: true,
},
axisLine: {
lineStyle: {
color: "#333333",
},
},
},
series: [
{
data: [21, 41, 50, 70, 77, 90, 105, 112, 117],
type: "line",
},
],
grid: {
top: "10%",
left: "3%",
right: "5%",
bottom: "0%",
containLabel: true,
},
});
},
},
};
</script>
<style lang="scss">
#app {
background: #fff !important;
}
/* @media screen and (max-width: 1200px) {*/
/*.main {*/
/* width: 100%;*/
/* background-color: #fff;*/
/* margin: 0px auto;*/
/* padding: 30px 0;*/
/*}*/
/*.minHeader,*/
/*.market {*/
/* width: calc(100% - 40px);*/
/* box-sizing: border-box;*/
/* border-radius: 4px;*/
/* // padding: 20px;*/
/* margin: 20px auto 0;*/
/* background: #fff;*/
/*}*/
/*.minTop {*/
/* width: calc(100% - 40px);*/
/* box-sizing: border-box;*/
/* border-radius: 4px;*/
/* margin: 20px auto;*/
/*}*/
// }
// @media screen and (min-width: 1200px) {
.main {
/*width: 1200px;*/
margin: 0px auto;
padding: 30px 0;
}
.minHeader,
.market {
/*width: 1200px;*/
border-radius: 4px;
background: #fff;
}
.minTop {
background-color: #fff;
/*width: 1200px;*/
border-radius: 4px;
}
// }
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
.minTop {
width: calc(100% - 40px);
......@@ -1422,6 +2117,7 @@ export default {
left: 415px !important;
}
<<<<<<< HEAD
.el-tooltip__popper {
border: 1px solid #ecf5ff !important;
background: #fff !important;
......@@ -1463,6 +2159,44 @@ export default {
display: inline-block;
position: relative;
}
=======
/* .poab {
position: absolute;
top: -70px;
width: 80px;
height: 40px;
line-height: 40px;
color: #333333;
border: 1px solid #ebeef5;
background: #fff;
border-radius: 4px;
top: -60px;
left: 50%;
transform: translate(-50%, 10px);
}
.popper__arrow {
position: absolute;
width: 5px;
top: -10px;
left: 50%;
transform: translate(-50%, 0px);
height: 0;
}
.corner {
width: 0px;
height: 0px;
border: 5px solid #f3f3ed;
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
} */
.el-progress--circle,
.el-progress--dashboard {
display: inline-block;
position: relative;
}
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
.el-button:hover {
color: #fff;
......
qingtian_vue/src/views/Ecology.vue
View file @ 8bc03492
<template>
<div class="ecology">
<<<<<<< HEAD
<div class="">
=======
<div class="shadow">
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
<Breadcrumb :breadData="breadData"></Breadcrumb>
</div>
<el-row :gutter="20" class="mt20">
<el-col :sm="12" :xs="24">
<div class="clear-water unify-item">
<div class="clear-water unify-item shadow" ref="left_one" id="left_one" style="height: 640px;">
<h3 class="module-tit">深化碧水行动</h3>
<ul>
<li v-for="(item, index) in clear_water_info" :key="index">
<li v-for="(item, index) in clear_water_info" :key="index" style="margin-top:35px">
<p class="cw-classify">{{ item.classify }}</p>
<div class="cw-progress">
<el-progress
......@@ -34,10 +38,10 @@
</div>
</el-col>
<el-col :sm="12" :xs="24">
<div class="air-quality unify-item">
<div class="air-quality unify-item shadow" ref="right_one" id="right_one" style="height: 640px">
<h3 class="module-tit">空气质量巩固提升行动</h3>
<div class="aq-map">
<img src="../assets/images/sy-map.jpg" alt="" />
<img src="../assets/images/qingtian.jpg" alt=""/>
<div class="aq-exponent">
<p>空气质量指数</p>
<ul class="aq-list">
......@@ -58,7 +62,7 @@
</div>
<div>
<p style="color: #1bd68a">
下降{{ Math.abs(item.compare_num) }}个百分点
上升{{ Math.abs(item.compare_num) }}个百分点
</p>
<span>同比</span>
</div>
......@@ -85,14 +89,14 @@
</el-row>
<el-row :gutter="20">
<el-col :sm="12" :xs="24">
<div class="no-waste unify-item">
<div class="no-waste unify-item shadow" style="height:250px;">
<h3 class="module-tit">无废城市建设</h3>
<ul class="nw-con">
<li
v-for="(item, index) in no_waste_info"
:key="index"
:class="{ 'nw-task-first': index == 100 }"
>
style="margin-left:0px !important">
<h4 class="nw-task-name">{{ item.name }}</h4>
<div class="nw-task-num">
<div class="nw-task-current">
......@@ -113,7 +117,7 @@
</div>
</el-col>
<el-col :sm="12" :xs="24">
<div class="beautiful-rivers unify-item">
<div class="beautiful-rivers unify-item shadow" style="height:250px">
<h3 class="module-tit">美丽河湖库</h3>
<ul class="br-con">
<li v-for="(item, index) in br_info" :key="index">
......@@ -157,7 +161,7 @@
<div class="br-task-compare">
<i class="iconfont icon-shangsheng"></i>
<div>
<p style="color: #1bd68a; font-size: 18px">
<p style="color: #1bd68a; font-size: 18px; min-width:140px">
上升{{ item.compare_num }}个百分点
</p>
<span>环比</span>
......@@ -171,7 +175,7 @@
</el-row>
<el-row :gutter="20">
<el-col :sm="12" :xs="24">
<div class="unify-item">
<div class="unify-item shadow">
<h3 class="module-tit">政府工作报告任务落实</h3>
<Tree :treeData="treeData"></Tree>
</div>
......@@ -181,6 +185,7 @@
</template>
<script>
<<<<<<< HEAD
import Breadcrumb from "../components/Breadcrumb.vue";
import Tree from "../components/Tree.vue";
export default {
......@@ -291,58 +296,220 @@ export default {
name: "市级生态文明建设示范市（县）",
num: "24个",
icon: "icon-gongyuzhuzhai",
=======
import Breadcrumb from "../components/Breadcrumb.vue";
import Tree from "../components/Tree.vue";
import {messageFun} from "../util/jianquan";
export default {
name: "ecology",
components: {Tree, Breadcrumb},
data() {
return {
breadData: {
page_name: "生态文明",
annual_target: "暂无数据",
leading: "青田县环保局",
},
aqList: [
{
name: "优",
bgc: "#10D485",
},
{
name: "良",
bgc: "#189CFF",
},
{
name: "轻度污染",
bgc: "#2A6FFF",
},
{
name: "中度污染",
bgc: "#FFA72A",
},
{
name: "重度污染",
bgc: "#FF842A",
},
],
clear_water_info: [
{
classify: "国考断面",
num: 3,
name: "优Ⅲ类",
current_num: "100%",
target_num: "100%",
compare_num: 0.5,
},
{
classify: "省控断面",
num: 5,
name: "优Ⅲ类",
current_num: "100%",
target_num: "100%",
compare_num: 0.5,
},
{
classify: "饮用水水源地",
num: 1,
name: "优Ⅲ类",
current_num: "100%",
target_num: "100%",
compare_num: 0.5,
},
],
aq_desc_info: [
{
name: "空气优良天数比",
target_num: "98.0%",
current_num: "99.3%",
compare_num: 1.3,
icon: "icon-kongqiyouliang",
},
{
name: "PM2.5浓度",
target_num: 20,
current_num: 22,
compare_num: 5,
icon: "icon-pm",
},
],
no_waste_info: [
// {
// name: "医疗废物收集处置率",
// target_num: "100%",
// current_num: "100%",
// compare_num: 0.5,
// },
{
name: "医城镇垃圾分类覆盖面",
target_num: "100%",
current_num: "80%",
compare_num: 0.5,
},
],
br_info: [
{
name: "河湖问题整改",
target_num: "93.3%",
current_num: "95.3%",
compare_num: 0.5,
},
// {
// name: "河湖问题整改",
// target_num: "93.3%",
// current_num: "95.3%",
// compare_num: 0.5,
// },
],
ecological_creation_info: [
{
name: "市级生态文明建设示范市（县）",
num: "24个",
icon: "icon-gongyuzhuzhai",
},
{
name: "县市区级生态文明建设示范市（县）",
num: "61个",
icon: "icon-chengshi1",
},
{
name: '绿水青山就是"金山银山"实践创新基地',
num: "24个",
icon: "icon-shanshui",
},
],
treeData: [
{
name: "深化碧水行动",
children: [
{
name: "“污水零直排区创建”",
status: '正常'
},
{
name: "美丽河湖创建",
status: '正常'
},
{
name: "城镇垃圾无害化处置率达100%",
status: '正常'
},
{
name: "砂石料行业整治提升",
status: '正常'
},
{
name: "涉林垦造耕地问题整改",
status: '正常'
},
{
name: "松材线虫病防治和美丽林相建设",
status: '正常'
},
{
name: "污水处理厂清洁化改造",
status: '正常'
},
{
name: "绿色矿山创建",
status: '正常'
}
],
},
],
};
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
},
{
name: "县市区级生态文明建设示范市（县）",
num: "61个",
icon: "icon-chengshi1",
created(){
// this.$erd.listenTo(this.$refs.right_one, (element) => {
// debugger
// var width = element.offsetWidth;
// var height = element.offsetHeight;
// console.log("height="+height);
// });
},
{
name: '绿水青山就是"金山银山"实践创新基地',
num: "24个",
icon: "icon-shanshui",
mounted() {
this.listenMessage();
window.parent.postMessage(document.body.scrollHeight, '*');
window.onresize = () => {
return (() => {
window.parent.postMessage(document.body.scrollHeight, '*');
})();
};
window.addEventListener("resize", function (e) {
window.parent.postMessage(document.body.scrollHeight, '*');
});
//
//
// this.$refs.left_one.style.height=t+"px";
},
],
treeData: [
{
name: "深化碧水行动",
children: [
{
name: "新增小微企业园(39.7)",
status:'正常'
},
{
name: "探索开展“清新田园”建设(39.7)",
status:'滞后'
},
{
name: "接收外送电(39.7)",
status:'滞后'
},
{
name: "全省天然气消费量(39.7)",
status:'正常'
},
{
name: "海铁联运量(39.7)",
status:'正常'
},
{
name: "淘汰国Ⅲ及以下老旧运营(39.7)",
status:'正常'
methods: {
listenMessage() {
window.addEventListener('message', this.bindThis.bind(this));
},
{
name: "工业废气治理项目(39.7)",
status:'正常'
async bindThis(e) {
const query = this.$route.query;
if (query.debug == "true") {
return;
}
const ret = await messageFun(e);
if (ret == false) {
this.$router.push("err");
}
},
{
name: "工业废物治理项目(39.7)",
status:'正常'
}
],
},
],
}
};
<<<<<<< HEAD
},
mounted() {
window.addEventListener("resize", function (e) {
......@@ -350,286 +517,351 @@ export default {
});
},
};
=======
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
</script>
<style lang="scss" scoped>
//公共样式
.module-tit{
font-size: 20px;
padding: 16px 0 12px 12px;
font-weight: 600;
position: relative;
}
.module-tit::before{
content: "";
position: absolute;
left: 0px;
top: 16px;
width: 4px;
height: 28px;
background-color: #1492ff;
}
.unify-item{
box-sizing: border-box;
padding: 0 20px 12px;
background-color: #fff;
border-radius: 4px;
margin-bottom: 20px;
}
//当前页面样式
.clear-water {
ul {
li {
display: flex;
justify-content: space-between;
align-items: center;
height: 130px;
background-color: #fafafa;
margin-bottom: 20px;
color: #333;
.cw-classify {
width: 30px;
height: 130px;
text-align: center;
background-color: #e1f1ff;
color: #1492ff;
.ecology {
width: calc(100% - 40px);
margin: 0px auto;
padding: 20px;
// background: #666
}
//公共样式
.module-tit {
font-size: 20px;
padding: 16px 0 12px 12px;
font-weight: 600;
position: relative;
}
.module-tit::before {
content: "";
position: absolute;
left: 0px;
top: 16px;
width: 4px;
height: 28px;
background-color: #1492ff;
}
.unify-item {
box-sizing: border-box;
padding: 0 20px 12px;
background-color: #fff;
border-radius: 4px;
margin-bottom: 20px;
}
.shadow {
box-shadow: 0 2px 12px 0 #ccc;
}
//当前页面样式
.clear-water {
ul {
li {
display: flex;
padding: 0 8px;
justify-content: space-between;
align-items: center;
}
.cw-progress {
position: relative;
>>> .el-progress-circle {
width: 100px !important;
height: 100px !important;
}
> p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 18px;
}
}
.cw-percentage {
.cw-per-num {
font-size: 20px;
height: 130px;
background-color: #fafafa;
margin-bottom: 20px;
color: #333;
.cw-classify {
width: 30px;
height: 130px;
text-align: center;
background-color: #e1f1ff;
color: #1492ff;
font-weight: 600;
margin-bottom: 8px;
display: flex;
padding: 0 8px;
align-items: center;
}
.cw-per-text {
font-size: 18px;
.cw-progress {
position: relative;
> > > .el-progress-circle {
width: 100px !important;
height: 100px !important;
}
> p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 18px;
}
}
}
.cw-compare {
width: 35%;
padding-left: 20px;
box-sizing: border-box;
border-left: 1px solid #eee;
.cw-com-per {
color: #1492ff;
margin: 8px 0 12px;
.cw-percentage {
.cw-per-num {
font-size: 20px;
color: #1492ff;
font-weight: 600;
margin-bottom: 8px;
}
.cw-per-text {
font-size: 18px;
}
}
.cw-com-desc {
color: #1bd68a;
margin: 5px 0;
.cw-compare {
width: 35%;
padding-left: 20px;
box-sizing: border-box;
border-left: 1px solid #eee;
.cw-com-per {
color: #1492ff;
margin: 8px 0 12px;
}
.cw-com-desc {
color: #1bd68a;
margin: 5px 0;
}
}
}
}
}
}
.air-quality {
.aq-map {
display: flex;
justify-content: space-around;
align-items: center;
img {
width: 40%;
height: auto;
}
.aq-exponent {
p {
font-size: 18px;
font-weight: 600;
}
}
}
.aq-list {
margin: 20px 0;
li {
.air-quality {
.aq-map {
display: flex;
justify-content: space-around;
align-items: center;
padding: 8px 0;
i {
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 8px;
img {
width: 40%;
height: auto;
}
}
}
.aq-desc {
display: flex;
justify-content: space-around;
margin-top: 12px;
color: #333;
li {
width: 47%;
background-color: #fafafa;
.aq-desc-name {
color: #1492ff;
height: 36px;
text-align: center;
line-height: 36px;
border-radius: 2px;
background-color: #e1f1ff;
.aq-exponent {
p {
font-size: 18px;
font-weight: 600;
}
}
.aq-desc-con {
padding: 20px 0 0;
}
.aq-list {
margin: 20px 0;
li {
display: flex;
align-items: center;
padding: 8px 0;
i {
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 8px;
}
}
}
.aq-desc {
display: flex;
justify-content: space-around;
margin-top: 12px;
color: #333;
li {
width: 47%;
background-color: #fafafa;
.aq-desc-name {
color: #1492ff;
font-size: 24px;
line-height: 46px;
height: 36px;
text-align: center;
line-height: 36px;
border-radius: 2px;
background-color: #e1f1ff;
}
.aq-desc-tb {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
padding: 0 12px;
> div {
width: 45%;
.aq-desc-con {
padding: 20px 0 0;
i {
color: #1492ff;
font-size: 24px;
line-height: 46px;
}
.aq-desc-icon {
width: 46px;
height: 46px;
border-radius: 50%;
background-color: #e7f5ff;
text-align: center;
.aq-desc-tb {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
padding: 0 12px;
> div {
width: 45%;
}
.aq-desc-icon {
width: 46px;
height: 46px;
border-radius: 50%;
background-color: #e7f5ff;
text-align: center;
}
}
}
}
}
}
}
.no-waste {
.nw-con {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
li {
padding: 12px 20px;
background-color: #eefbff;
width: 48%;
box-sizing: border-box;
color: #333;
.nw-task-name {
font-size: 18px;
font-weight: 600;
color: #000;
}
.nw-task-num {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 12px 0;
p {
.no-waste {
.nw-con {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
li {
padding: 12px 10px;
background-color: #eefbff;
width: 46%;
box-sizing: border-box;
color: #333;
.nw-task-name {
font-size: 18px;
margin: 5px 0;
font-weight: 600;
color: #000;
}
.nw-task-current {
width: 20%;
.nw-task-num {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 12px 0;
p {
color: #1492ff;
font-size: 18px;
margin: 5px 0;
}
}
.nw-task-target {
width: 20%;
p {
color: #ffc149;
.nw-task-current {
width: 20%;
p {
color: #1492ff;
}
}
}
.nw-task-compare {
width: 45%;
p {
color: #1bd68a;
.nw-task-target {
width: 20%;
p {
color: #ffc149;
}
}
.nw-task-compare {
width: 45%;
min-width:140px;
p {
color: #1bd68a;
}
}
}
}
}
.nw-task-first {
width: 100%;
background-color: #fffcee;
margin-bottom: 20px;
.nw-task-first {
width: 100%;
background-color: #fffcee;
margin-bottom: 20px;
}
}
}
}
.beautiful-rivers {
.br-con {
li {
padding: 12px 20px;
background-color: #fbfbfb;
margin-bottom: 12px;
color: #333;
h4 {
font-weight: 600;
font-size: 18px;
color: #000;
}
.br-task-num {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 0;
>>> .el-progress-circle {
width: 60px !important;
height: 60px !important;
.beautiful-rivers {
.br-con {
li {
padding: 12px 20px;
background-color: #fbfbfb;
margin-bottom: 12px;
color: #333;
h4 {
font-weight: 600;
font-size: 18px;
color: #000;
}
& > div {
.br-task-num {
display: flex;
align-items: center;
width: 30%;
}
.br-task-pro {
position: relative;
margin-right: 8px;
i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
justify-content: space-between;
padding: 8px 0;
> > > .el-progress-circle {
width: 60px !important;
height: 60px !important;
}
}
.br-task-compare {
i {
font-size: 42px;
color: #1bd68a;
& > div {
display: flex;
align-items: center;
width: 30%;
}
.br-task-pro {
position: relative;
margin-right: 8px;
i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
}
}
.br-task-compare {
min-width:140px;
i {
font-size: 42px;
color: #1bd68a;
margin-right: 8px;
}
}
}
}
}
}
}
.ecological-creation {
.ec-con {
display: flex;
justify-content: space-between;
li {
width: 30%;
background-color: #f1f3f5;
padding: 12px;
text-align: center;
color: #333;
box-sizing: border-box;
i {
font-size: 44px;
color: #1492ff;
.ecological-creation {
.ec-con {
display: flex;
justify-content: space-between;
li {
width: 30%;
background-color: #f1f3f5;
padding: 12px;
text-align: center;
color: #333;
box-sizing: border-box;
i {
font-size: 44px;
color: #1492ff;
}
}
}
}
}
</style>
\ No newline at end of file
</style>
qingtian_vue/src/views/Epidemic.vue
View file @ 8bc03492
<template>
<<<<<<< HEAD
<div class="epidemic">
<Breadcrumb :breadData="breadData"></Breadcrumb>
<div class="epidemic-tabs mt12">
=======
<div class="epidemic main">
<div class="minHeader shadow">
<Breadcrumb :breadData="breadData"></Breadcrumb>
</div>
<div class="epidemic-tabs mt20">
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
<ul class="et-con">
<li
v-for="(item, index) in epidemic_tabs_info"
......@@ -10,6 +18,18 @@
:class="{ active: epidemic_tabs_idx == index }"
>
{{ item.name }}
</li>
<li class="et-disabled">
<el-tooltip
class="item"
effect="effect"
content="建设中..."
popper-class="sy-tooltip"
placement="top"
:visible-arrow="false"
>
<p>冷链追溯</p>
</el-tooltip>
</li>
<li class="et-disabled">
<el-tooltip
......@@ -25,7 +45,7 @@
</li>
</ul>
</div>
<div class="vaccination" v-show="epidemic_tabs_idx == 0">
<div class="vaccination shadow" v-show="epidemic_tabs_idx == 0">
<el-row :gutter="20">
<el-col :sm="12" :xs="24">
<div class="general-situation unify-item">
......@@ -134,8 +154,9 @@
<el-col :sm="6" :xs="12">
<el-progress
type="circle"
:percentage="88.1"
:percentage="100"
:stroke-width="12"
:style="'margin:0 auto'"
:color="'#7FD6AD'"
>
</el-progress>
......@@ -144,46 +165,46 @@
<el-col :sm="6" :xs="12">
<el-progress
type="circle"
:percentage="78.1"
:percentage="0"
:stroke-width="12"
:color="'#647594'"
>
</el-progress>
<p>高等院校学生</p>
</el-col>
<el-col :sm="6" :xs="12">
<!-- <el-col :sm="6" :xs="12">
<el-progress
type="circle"
:percentage="83.8"
:percentage="0"
:stroke-width="12"
:color="'#EDBF4C'"
>
</el-progress>
<p>三类重点人群</p>
</el-col>
</el-col> -->
</div>
</el-row>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :sm="12" :xs="24">
<el-row :gutter="24">
<el-col :sm="24" :xs="24" >
<div class="daily-news unify-item">
<h3 class="module-tit">各区县工作进度</h3>
<p class="ep-name">各区县新冠病毒疫苗供应及接种情况</p>
<div id="bar_1" style="width: 85%; height: 300px"></div>
<h3 class="module-tit">各乡镇、街道工作进度</h3>
<p class="ep-name">各乡镇、街道新常住人口及第一剂接种情况</p>
<div id="bar_1" style="width: 100%; height: 350px;overflow-x:scroll"></div>
</div>
</el-col>
<el-col :sm="12" :xs="24">
<!-- <el-col :sm="12" :xs="24">
<div class="key-groups unify-item">
<h3 class="module-tit">各地库存量</h3>
<p class="ep-name">各地疫苗库存量（昨日）</p>
<div id="bar_2" style="width: 85%; height: 300px"></div>
</div>
</el-col>
</el-col> -->
</el-row>
</div>
<div class="vaccine-traceability" v-show="epidemic_tabs_idx == 1">
<div class="vaccine-traceability shadow" v-show="epidemic_tabs_idx == 1">
<div class="vt-con unify-item">
<h3 class="module-tit">疫苗追溯</h3>
<el-row>
......@@ -191,13 +212,13 @@
<el-col :sm="8" :xs="24">
<div class="vt-ipt">
<p>证件号码</p>
<input type="text" v-model="vt.vt_code1" />
<input type="text" v-model="vt.vt_code1"/>
</div>
</el-col>
<el-col :sm="8" :xs="16">
<div class="vt-ipt">
<p>电子监管码</p>
<input type="text" v-model="vt.vt_code2" />
<input type="text" v-model="vt.vt_code2"/>
</div>
</el-col>
<el-col :sm="4" :xs="8">
......@@ -317,7 +338,7 @@
</div>
</div>
</div>
<div class="cold-chain-tracing" v-show="epidemic_tabs_idx == 2">
<div class="cold-chain-tracing shadow" v-show="epidemic_tabs_idx == 2">
<div class="cct-con unify-item">
<h3 class="module-tit">冷链追溯</h3>
<el-row>
......@@ -481,7 +502,7 @@
</div>
<div class="re-search">
<p>冷链码</p>
<input type="text" />
<input type="text"/>
<button>
<i class="el-icon-search"></i>
检索
......@@ -518,6 +539,7 @@
</template>
<script>
<<<<<<< HEAD
import Breadcrumb from "../components/Breadcrumb.vue";
export default {
name: "epidemic",
......@@ -779,566 +801,983 @@ export default {
normal: {
color: "#E6EBF8",
},
=======
import Breadcrumb from "../components/Breadcrumb.vue";
import {messageFun} from '../util/jianquan'
export default {
name: "epidemic",
components: {Breadcrumb},
data() {
return {
bar_1:null,
breadData: {
page_name: "常态化疫情防控",
annual_target: "暂无数据",
leading: "县疫情防控办 县卫生健康局",
child:'疫苗接种',
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
},
},
],
},
{
type: "pie",
hoverAnimation: false,
radius: ["65%", "80%"],
label: {
normal: {
position: "inner",
},
},
labelLine: {
normal: {
show: false,
},
},
data: [
{
value: 79.2,
itemStyle: {
normal: {
color: "#91CC75",
},
epidemic_tabs_info: [
{
name: "疫苗接种",
},
{
name: "疫苗追溯",
},
// {
// name: "冷链追溯",
// },
],
epidemic_tabs_idx: 0,
vt: {
vt_code1: "",
vt_code2: "",
vt_info_table: [],
},
},
{
value: 100 - 79.2,
itemStyle: {
normal: {
color: "#E6EBF8",
},
cct: {
mf_info_table: [
{
category: "食品",
sampling_num: "0",
positive_num: "0",
},
{
category: "外环境",
sampling_num: "0",
positive_num: "0",
},
{
category: "从业人员",
sampling_num: "0",
positive_num: "0",
},
],
ms_info_table: [
{
category: "肉类",
slaughter_num: "0",
produce_num: "0",
bestowal_num: "0",
manage_num: "0",
positive_num: "0",
},
{
category: "水产",
slaughter_num: "0",
produce_num: "0",
bestowal_num: "0",
manage_num: "0",
positive_num: "0",
},
{
category: "其他",
slaughter_num: "0",
produce_num: "0",
bestowal_num: "0",
manage_num: "0",
positive_num: "0",
},
{
category: "食品外包装",
slaughter_num: "0",
produce_num: "0",
bestowal_num: "0",
manage_num: "0",
positive_num: "0",
},
{
category: "环境",
slaughter_num: "0",
produce_num: "0",
bestowal_num: "0",
manage_num: "0",
positive_num: "0",
},
{
category: "从业人员",
slaughter_num: "0",
produce_num: "0",
bestowal_num: "0",
manage_num: "0",
positive_num: "0",
},
{
category: "合计",
slaughter_num: "0",
produce_num: "0",
bestowal_num: "0",
manage_num: "0",
positive_num: "0",
},
],
result_table: [
{
date: "2021-05-06",
informant: "张*",
tel: "xxx",
unit: "xxx",
category: "xxx",
code: "xxx",
},
{
date: "2021-05-06",
informant: "李*",
tel: "xxx",
unit: "xxx",
category: "xxx",
code: "xxx",
},
{
date: "2021-05-21",
informant: "王*",
tel: "xxx",
unit: "xxx",
category: "xxx",
code: "xxx",
},
],
step_info: [
{
step: "1",
product_name: "147118505帝皇鲜",
upstream_name: "天普乐食食品（上海）有限公司",
upstream_address:
"浙江省杭州经济技术开发区白杨街道11号大街469号1幢南楼201室",
downstream_name: "杭州盒马网络科技有限公司下沙第一分公司",
downstream_address: "",
type: "无码入库",
date: "2021-04-12 21:16:26",
},
{
step: "2",
product_name: "147118505帝皇鲜",
upstream_name: "天普乐食食品（上海）有限公司",
upstream_address:
"浙江省杭州经济技术开发区白杨街道11号大街469号1幢南楼201室",
downstream_name: "杭州盒马网络科技有限公司下沙第一分公司",
downstream_address: "",
type: "无码入库",
date: "2021-04-12 21:16:26",
},
{
step: "3",
product_name: "147118505帝皇鲜",
upstream_name: "天普乐食食品（上海）有限公司",
upstream_address:
"浙江省杭州经济技术开发区白杨街道11号大街469号1幢南楼201室",
downstream_name: "杭州盒马网络科技有限公司下沙第一分公司",
downstream_address: "",
type: "无码入库",
date: "2021-04-12 21:16:26",
},
],
},
},
],
},
],
});
},
init_line_1() {
this.line_1 = this.$echarts.init(document.getElementById("line_1"));
this.line_1.setOption({
legend: {
orient: "horizontal",
x: "0%",
y: "0%",
data: ["接种量", "库存量"],
textStyle: {
fontSize: 16,
},
},
grid: {
top: "30%",
left: "3%",
right: "8%",
bottom: "3%",
containLabel: true,
};
},
tooltip: {
trigger: "axis",
mounted() {
this.listenMessage();
this.init_circle_1();
this.init_circle_2();
this.init_line_1();
//this.init_bar_2();
this.init_bar_1();
let _this = this;
window.parent.postMessage(document.body.scrollHeight, '*');
window.onresize = () => {
return (() => {
window.parent.postMessage(document.body.scrollHeight, '*');
_this.init_bar_1();
})();
};
window.addEventListener("resize", function (e) {
window.parent.postMessage(document.body.scrollHeight, '*');
debugger;
//.dispose()
_this.init_bar_1();
});
},
xAxis: {
type: "category",
axisLine: {
lineStyle: {
color: "#333",
fontSize: 14,
methods: {
listenMessage() {
window.addEventListener('message', this.bindThis.bind(this));
},
},
boundaryGap: false,
data: ["05.21", "05.22", "05.23", "05.24", "05.25", "05.26", "05.27"],
},
yAxis: {
type: "value",
show: true, // 是否显示
name: "单位(万剂)", // 轴名称
nameTextStyle: {
// 坐标轴名称样式
color: "#666",
padding: [5, 0, 0, 5], // 坐标轴名称相对位置
fontSize: 14,
}
},
series: [
{
name: "接种量",
data: [0, 0, 0, 0, 0, 0, 0],
type: "line",
},
{
name: "库存量",
data: [0, 0, 0, 0, 0, 0, 0],
type: "line",
},
],
color: ["#3DCBCD", "#7FD5AB"],
});
},
init_bar_1() {
this.bar_1 = this.$echarts.init(document.getElementById("bar_1"));
this.bar_1.setOption({
legend: {
orient: "horizontal",
x: "left",
y: "top",
data: ["供应数", "接种数"],
},
tooltip: {
show: true, // 是否显示提示框，默认为true
trigger: "item", // 数据项图形触发
axisPointer: {
// 指示样式
type: "shadow",
axis: "auto",
},
padding: 5,
textStyle: {
// 提示框内容的样式
color: "#666",
},
},
// ---- gird区域 ---
// ------ X轴 ------
xAxis: {
type: "category",
axisLine: {
lineStyle: {
color: "#666",
async bindThis(e) {
const query = this.$route.query;
if (query.debug == "true") {
return;
}
const ret = await messageFun(e);
if (ret == false) {
this.$router.push("err");
}
},
},
axisLabel: {
rotate: 30,
interval: 0
},
show: true, // 是否显示
data: [
"莲都",
"龙泉",
"青田",
"云和",
"庆元",
"缙云",
"遂昌",
"松阳",
"景宁",
"开发区",
],
},
// ------ y轴 ----------
yAxis: {
show: true, // 是否显示
name: "单位(万剂)", // 轴名称
type: "value", // 轴类型，默认为 ‘category’
nameTextStyle: {
// 坐标轴名称样式
color: "#666",
padding: [5, 0, 0, 5], // 坐标轴名称相对位置
fontSize: 14,
},
},
// ------- 内容数据 -------
series: [
{
name: "供应数", // 序列名称
type: "bar", // 类型
legendHoverLink: true, // 是否启用图列 hover 时的联动高亮
itemStyle: {
// 图形的形状
color: "#48A1FF",
tabIdx(i) {
this.epidemic_tabs_idx = i;
this.breadData.child=this.epidemic_tabs_info[i].name;
},
barWidth: 12, // 柱形的宽度
barCategoryGap: "10%", // 柱形的间距
data: [100, 78, 90, 85, 93, 86, 98, 95, 80, 78],
},
{
name: "接种数", // 序列名称
type: "bar", // 类型
legendHoverLink: true, // 是否启用图列 hover 时的联动高亮
itemStyle: {
// 图形的形状
color: "#83D7AE",
init_circle_1() {
this.cChart_1 = this.$echarts.init(document.getElementById("circle_1"));
this.cChart_1.setOption({
title: {
text: ((27673 / 96150) * 100).toFixed(2) + "%",
subtext: "疫苗接种完成率",
x: "center",
y: "center",
textStyle: {
fontWeight: "600",
fontSize: 20,
color: "#000",
}, // 标题
subtextStyle: {
fontWeight: "normal",
fontSize: 16,
color: "#666",
}, // 副标题
},
color: ["#48A1FF", "#efefef"],
series: [
{
name: "访问来源",
type: "pie",
radius: ["70%", "85%"], // 半径
center: ["50%", "50%"], // 位置
label: {
show: false,
},
data: [
{
value: 27673,
name: "接种人数",
},
{
value: 96150 - 27673,
name: "未接种人数",
},
],
},
],
});
},
barWidth: 12, // 柱形的宽度
barCategoryGap: "10%", // 柱形的间距
data: [100, 78, 90, 85, 93, 86, 98, 95, 80, 78],
},
],
});
},
init_bar_2() {
this.bar_2 = this.$echarts.init(document.getElementById("bar_2"));
this.bar_2.setOption({
tooltip: {
show: true, // 是否显示提示框，默认为true
trigger: "item", // 数据项图形触发
axisPointer: {
// 指示样式
type: "shadow",
axis: "auto",
},
padding: 5,
textStyle: {
// 提示框内容的样式
color: "#666",
},
},
// ---- gird区域 ---
// ------ X轴 ------
xAxis: {
type: "category",
axisLine: {
lineStyle: {
color: "#666",
init_circle_2() {
this.cChart_2 = this.$echarts.init(document.getElementById("circle_2"));
this.cChart_2.setOption({
color: ["#5470C6", "#91CC75"],
series: [
{
type: "pie",
hoverAnimation: false,
radius: ["80%", "95%"],
//环的位置
label: {
normal: {
position: "inner",
},
},
labelLine: {
normal: {
show: false,
},
},
data: [
{
value: 30.53, //需要显示的数据
itemStyle: {
normal: {
color: "#5470C6",
},
},
},
{
value: 100 - 30.53,
//不需要显示的数据，颜色设置成和背景一样
itemStyle: {
normal: {
color: "#E6EBF8",
},
},
},
],
},
{
type: "pie",
hoverAnimation: false,
radius: ["65%", "80%"],
label: {
normal: {
position: "inner",
},
},
labelLine: {
normal: {
show: false,
},
},
data: [
{
value: 79.2,
itemStyle: {
normal: {
color: "#91CC75",
},
},
},
{
value: 100 - 79.2,
itemStyle: {
normal: {
color: "#E6EBF8",
},
},
},
],
},
],
});
},
},
axisLabel: {
rotate: 30,
interval: 0,
},
show: true, // 是否显示
data: [
"莲都",
"龙泉",
"青田",
"云和",
"庆元",
"缙云",
"遂昌",
"松阳",
"景宁",
"开发区",
],
},
// ------ y轴 ----------
yAxis: {
show: true, // 是否显示
name: "单位(万剂)", // 轴名称
type: "value", // 轴类型，默认为 ‘category’
nameTextStyle: {
// 坐标轴名称样式
color: "#666",
padding: [5, 0, 0, 5], // 坐标轴名称相对位置
fontSize: 14,
},
},
// ------- 内容数据 -------
series: [
{
name: "库存量", // 序列名称
type: "bar", // 类型
legendHoverLink: true, // 是否启用图列 hover 时的联动高亮
itemStyle: {
// 图形的形状
color: "#48A1FF",
init_line_1() {
this.line_1 = this.$echarts.init(document.getElementById("line_1"));
this.line_1.setOption({
legend: {
orient: "horizontal",
x: "0%",
y: "0%",
data: ["接种量", "库存量"],
textStyle: {
fontSize: 16,
},
},
grid: {
top: "30%",
left: "3%",
right: "8%",
bottom: "3%",
containLabel: true,
},
tooltip: {
trigger: "axis",
},
xAxis: {
type: "category",
axisLine: {
lineStyle: {
color: "#333",
fontSize: 14,
},
},
boundaryGap: false,
data: ["05.21", "05.22", "05.23", "05.24", "05.25", "05.26", "05.27"],
},
yAxis: {
type: "value",
show: true, // 是否显示
name: "单位(万剂)", // 轴名称
nameTextStyle: {
// 坐标轴名称样式
color: "#666",
padding: [5, 0, 0, 5], // 坐标轴名称相对位置
fontSize: 14,
}
},
series: [
{
name: "接种量",
data: [0, 0, 0, 0, 0, 0, 0],
type: "line",
},
{
name: "库存量",
data: [0, 0, 0, 0, 0, 0, 0],
type: "line",
},
],
color: ["#3DCBCD", "#7FD5AB"],
});
},
barWidth: 15, // 柱形的宽度
barCategoryGap: "10%", // 柱形的间距
data: [100, 78, 90, 85, 93, 86, 98, 95, 80, 78],
},
],
});
},
},
};
init_bar_1() {
this.bar_1 = this.$echarts.init(document.getElementById("bar_1"));
this.bar_1.setOption({
legend: {
orient: "horizontal",
x: "left",
y: "top",
data: ["常住人口数", "接种数"],
},
tooltip: {
show: true, // 是否显示提示框，默认为true
trigger: "item", // 数据项图形触发
axisPointer: {
// 指示样式
type: "shadow",
axis: "auto",
},
padding: 5,
textStyle: {
// 提示框内容的样式
color: "#666",
},
},
// ---- gird区域 ---
// ------ X轴 ------
xAxis: {
type: "category",
axisLine: {
lineStyle: {
color: "#666",
},
},
axisLabel: {
rotate: 30,
interval: 0
},
show: true, // 是否显示
data: [
"贵岙乡",
"小舟山乡",
"万山乡",
"北山镇",
"巨浦乡",
"汤垟乡",
"阜山乡",
"油竹街道",
"腊口镇",
"季宅乡",
"仁庄镇",
"吴坑乡",
"章旦乡",
"祯旺乡",
"高湖镇",
"舒桥乡",
"温溪镇",
"方山乡",
"黄垟乡",
"仁宫乡",
"瓯南街道",
"章村乡",
"海溪乡",
"海口镇",
"山口镇",
"三溪口街道",
"祯埠镇",
"万阜乡",
"鹤城街道",
"东源镇",
"船寮镇",
"高市乡",
],
},
// ------ y轴 ----------
yAxis: {
show: true, // 是否显示
name: "单位(人/剂)", // 轴名称
type: "value", // 轴类型，默认为 ‘category’
nameTextStyle: {
// 坐标轴名称样式
color: "#666",
padding: [5, 0, 0, 5], // 坐标轴名称相对位置
fontSize: 14,
},
},
// ------- 内容数据 -------
series: [
{
name: "常住人口数", // 序列名称
type: "bar", // 类型
legendHoverLink: true, // 是否启用图列 hover 时的联动高亮
itemStyle: {
// 图形的形状
color: "#48A1FF",
},
barWidth: 12, // 柱形的宽度
barCategoryGap: "10%", // 柱形的间距
data: [1478, 988, 571, 2089, 2000, 1525, 4352, 27064, 16191, 4659,4992,2148,1811,1715,12880,5669,
61518,
2904,
1720,
3818,
32252,
5850,
4146,
10468,
8984,
6260,
9498,
2715,
69838,
16771,
30339,
4226
],
},
{
name: "接种数", // 序列名称
type: "bar", // 类型
legendHoverLink: true, // 是否启用图列 hover 时的联动高亮
itemStyle: {
// 图形的形状
color: "#83D7AE",
},
barWidth: 12, // 柱形的宽度
barCategoryGap: "10%", // 柱形的间距
data: [1935, 1054, 555, 1852, 1773, 1349, 3513, 21832, 12980, 3654,3911,1659,1398,1312,9709,4058,
43962,
2066,
1223,
2704,
22751,
4123,
2902,
7284,
6142,
4203,
6347,
1791,
43841,
10342,
17083,
2279
],
},
],
});
},
init_bar_2() {
this.bar_2 = this.$echarts.init(document.getElementById("bar_2"));
this.bar_2.setOption({
tooltip: {
show: true, // 是否显示提示框，默认为true
trigger: "item", // 数据项图形触发
axisPointer: {
// 指示样式
type: "shadow",
axis: "auto",
},
padding: 5,
textStyle: {
// 提示框内容的样式
color: "#666",
},
},
// ---- gird区域 ---
// ------ X轴 ------
xAxis: {
type: "category",
axisLine: {
lineStyle: {
color: "#666",
},
},
axisLabel: {
rotate: 30,
interval: 0,
},
show: true, // 是否显示
data: [
"莲都",
"龙泉",
"青田",
"云和",
"庆元",
"缙云",
"遂昌",
"松阳",
"景宁",
"开发区",
],
},
// ------ y轴 ----------
yAxis: {
show: true, // 是否显示
name: "单位(万剂)", // 轴名称
type: "value", // 轴类型，默认为 ‘category’
nameTextStyle: {
// 坐标轴名称样式
color: "#666",
padding: [5, 0, 0, 5], // 坐标轴名称相对位置
fontSize: 14,
},
},
// ------- 内容数据 -------
series: [
{
name: "库存量", // 序列名称
type: "bar", // 类型
legendHoverLink: true, // 是否启用图列 hover 时的联动高亮
itemStyle: {
// 图形的形状
color: "#48A1FF",
},
barWidth: 15, // 柱形的宽度
barCategoryGap: "10%", // 柱形的间距
data: [100, 78, 90, 85, 93, 86, 98, 95, 80, 78],
},
],
});
},
},
};
</script>
<style lang='scss' scoped>
.module-tit{
font-size: 20px;
padding: 16px 0 12px 12px;
font-weight: 600;
position: relative;
}
.module-tit::before{
content: "";
position: absolute;
left: 0px;
top: 16px;
width: 4px;
height: 28px;
background-color: #1492ff;
}
.unify-item{
box-sizing: border-box;
padding: 0 20px 12px;
background-color: #fff;
border-radius: 4px;
margin-bottom: 20px;
}
.epidemic {
// background: #666;
// width: 1300px;
width: calc(100% - 40px);
margin: 0px auto;
padding: 20px
}
.module-tit {
font-size: 20px;
padding: 16px 0 12px 12px;
font-weight: 600;
position: relative;
}
h3 {
border-bottom: 1px solid #ddd;
}
button {
padding: 0 12px;
height: 30px;
line-height: 30px;
background-color: #1492ff;
border-radius: 2px;
border: 0;
color: #fff;
font-size: 16px;
}
input {
height: 28px;
outline: none;
border: 0;
border: 1px solid #ccc;
border-radius: 2px;
margin-left: 5px;
font-size: 16px;
padding: 0 8px;
}
.ep-name {
font-size: 18px;
color: #1492ff;
margin: 8px 0;
text-align: center;
}
.e-pro {
position: relative;
.e-pro-text {
.module-tit::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
white-space: nowrap;
left: 0px;
top: 16px;
width: 4px;
height: 28px;
background-color: #1492ff;
}
}
.epidemic-tabs {
margin-bottom: 20px;
.et-con {
width: 66.667%;
margin: 0 auto;
display: flex;
justify-content: space-between;
li {
width: 20%;
color: #1492ff;
background-color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
height: 48px;
line-height: 48px;
font-size: 20px;
border-radius: 2px;
cursor: pointer;
}
.et-disabled {
color: #999;
}
.active {
color: #fff;
background-color: #02a7f0;
}
.unify-item {
box-sizing: border-box;
padding: 0 20px 12px;
background-color: #fff;
border-radius: 4px;
margin-bottom: 20px;
}
.shadow {
box-shadow: 0 2px 12px 0 #ccc;
}
h3 {
border-bottom: 1px solid #ddd;
}
button {
padding: 0 12px;
height: 30px;
line-height: 30px;
background-color: #1492ff;
border-radius: 2px;
border: 0;
color: #fff;
font-size: 16px;
}
input {
height: 28px;
outline: none;
border: 0;
border: 1px solid #ccc;
border-radius: 2px;
margin-left: 5px;
font-size: 16px;
padding: 0 8px;
}
}
.general-situation {
.gs-top {
display: flex;
align-items: center;
justify-content: center;
.ep-name {
font-size: 18px;
color: #1492ff;
margin: 8px 0;
p {
margin: 0 8px;
font-size: 18px;
}
.hr1 {
width: 59px;
height: 2px;
background: -webkit-gradient(
linear,
right top,
left top,
from(#4192f6),
to(#fff)
);
background: linear-gradient(270deg, #4192f6, #fff);
}
.hr2 {
width: 59px;
height: 2px;
background: -webkit-gradient(
linear,
left top,
right top,
from(#4192f6),
to(#fff)
);
background: linear-gradient(90deg, #4192f6, #fff);
}
text-align: center;
}
.gs-con {
display: flex;
align-items: center;
margin: 20px 0;
flex-wrap: wrap;
.gs-con-item {
.e-pro {
position: relative;
.e-pro-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
background-color: #f6f7f8;
height: 210px;
white-space: nowrap;
}
}
.epidemic-tabs {
margin-bottom: 20px;
.et-con {
width: 66.667%;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
font-size: 18px;
box-sizing: border-box;
padding: 0 4px;
div {
margin: 8px 0;
}
span {
justify-content: space-between;
li {
width: 20%;
color: #1492ff;
background-color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
height: 48px;
line-height: 48px;
font-size: 20px;
border-radius: 2px;
cursor: pointer;
}
.et-disabled {
color: #999;
}
.active {
color: #fff;
background-color: #02a7f0;
}
}
}
}
.vaccination-progress {
.vp-con {
display: flex;
justify-content: space-between;
align-items: center;
.vp-text {
width: 50%;
}
}
}
.daily-news {
.dn-con {
display: flex;
justify-content: space-between;
align-items: center;
.dn-text {
width: 30%;
font-size: 18px;
}
}
}
.key-groups {
.kg-con {
margin: 40px 0;
color: #333;
> div {
text-align: center;
.general-situation {
.gs-top {
display: flex;
align-items: center;
justify-content: center;
color: #1492ff;
margin: 8px 0;
p {
margin: 30px 0;
height: 56px;
margin: 0 8px;
font-size: 18px;
}
.hr1 {
width: 59px;
height: 2px;
background: -webkit-gradient(
linear,
right top,
left top,
from(#4192f6),
to(#fff)
);
background: linear-gradient(270deg, #4192f6, #fff);
}
.hr2 {
width: 59px;
height: 2px;
background: -webkit-gradient(
linear,
left top,
right top,
from(#4192f6),
to(#fff)
);
background: linear-gradient(90deg, #4192f6, #fff);
}
}
>>> .el-progress-circle {
width: 100px !important;
height: 100px !important;
.gs-con {
display: flex;
align-items: center;
margin: 20px 0;
flex-wrap: wrap;
.gs-con-item {
text-align: center;
background-color: #f6f7f8;
height: 210px;
display: flex;
flex-direction: column;
justify-content: center;
font-size: 18px;
box-sizing: border-box;
padding: 0 4px;
div {
margin: 8px 0;
}
span {
color: #1492ff;
}
}
}
}
}
.vaccine-traceability {
h4 {
font-weight: normal;
font-size: 18px;
}
.vt-con {
.vt-top {
margin: 12px 0 0;
}
.vt-ipt {
.vaccination-progress {
.vp-con {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
input {
.vp-text {
width: 50%;
}
}
.vt-info-table {
>>> .el-table {
min-height: 300px;
border: 1px solid #ddd;
}
>>> .is-leaf {
background-color: #1492ff;
color: #fff;
border-right: 1px solid #fff;
}
.daily-news {
.dn-con {
display: flex;
justify-content: space-between;
align-items: center;
.dn-text {
width: 30%;
font-size: 18px;
}
}
.vaccinator-info {
margin: 12px 0;
border-bottom: 1px solid #ddd;
.vaccinator-info-con {
padding: 12px;
color: #333;
overflow: hidden;
}
.key-groups {
.kg-con {
margin: 40px 0;
color: #333;
> div {
text-align: center;
p {
margin: 5px 0;
margin: 30px 0;
height: 56px;
}
}
> > > .el-progress-circle {
width: 100px !important;
height: 100px !important;
margin:0 auto !important;
}
}
}
}
.cold-chain-tracing {
h4 {
font-weight: normal;
font-size: 18px;
padding: 12px 0;
}
>>> .el-table__header tr,
>>> .el-table__header th {
padding: 0;
height: 40px;
}
>>> .is-leaf {
background-color: #1492ff;
color: #fff;
.el-progress-circle {
width: 100px !important;
height: 100px !important;
margin:0 auto !important;
}
.monitoring {
.monitoring-first {
.mf-text {
.vaccine-traceability {
h4 {
font-weight: normal;
font-size: 18px;
}
.vt-con {
.vt-top {
margin: 12px 0 0;
}
.vt-ipt {
display: flex;
justify-content: space-between;
padding: 0 20px 0 12px;
margin: 8px 0;
align-items: center;
margin-bottom: 12px;
input {
width: 50%;
}
}
.vt-info-table {
> > > .el-table {
min-height: 300px;
border: 1px solid #ddd;
}
> > > .is-leaf {
background-color: #1492ff;
color: #fff;
border-right: 1px solid #fff;
}
}
.vaccinator-info {
margin: 12px 0;
border-bottom: 1px solid #ddd;
.vaccinator-info-con {
padding: 12px;
color: #333;
overflow: hidden;
p {
margin: 5px 0;
}
}
}
}
}
}
.result {
.re-search {
display: flex;
align-items: center;
margin: 12px 0 20px;
input {
margin: 0 8px;
.cold-chain-tracing {
h4 {
font-weight: normal;
font-size: 18px;
padding: 12px 0;
}
}
.re-step {
.step-title {
color: #1492ff;
padding: 8px 0;
border-bottom: 1px dashed #1492ff;
i {
font-size: 18px;
> > > .el-table__header tr,
> > > .el-table__header th {
padding: 0;
height: 40px;
}
> > > .is-leaf {
background-color: #1492ff;
color: #fff;
}
.monitoring {
.monitoring-first {
.mf-text {
display: flex;
justify-content: space-between;
padding: 0 20px 0 12px;
margin: 8px 0;
}
}
span {
padding: 0 5px;
border: 1px solid #1492ff;
line-height: 18px;
border-radius: 10px;
}
}
.result {
.re-search {
display: flex;
align-items: center;
margin: 12px 0 20px;
input {
margin: 0 8px;
}
}
.step-desc {
margin: 20px 0;
color: #333;
padding: 0 12px;
p {
margin: 8px 0;
.re-step {
.step-title {
color: #1492ff;
padding: 8px 0;
border-bottom: 1px dashed #1492ff;
i {
font-size: 18px;
}
span {
padding: 0 5px;
border: 1px solid #1492ff;
line-height: 18px;
border-radius: 10px;
}
}
.step-desc {
margin: 20px 0;
color: #333;
padding: 0 12px;
p {
margin: 8px 0;
}
}
}
}
}
</style>
\ No newline at end of file
</style>
qingtian_vue/src/views/Industry.vue
View file @ 8bc03492
......@@ -225,6 +225,16 @@ export default {
this.initCharts2();
this.initCharts3();
this.initCharts4();
<<<<<<< HEAD
=======
window.parent.postMessage(document.body.scrollHeight, '*');
window.onresize = () => {
return (() => {
window.parent.postMessage(document.body.scrollHeight, '*');
})();
};
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
window.addEventListener("resize", function (e) {
window.parent.postMessage(document.body.scrollHeight, '*');
});
......
qingtian_vue/src/views/Xxgl.vue
View file @ 8bc03492
......@@ -42,7 +42,7 @@
</el-table-column>
<el-table-column prop="allow_id" label="执业许可证号">
</el-table-column>
<el-table-column prop="address" label="机构地址"> </el-table-column>
<el-table-column prop="address" label="机构地址"></el-table-column>
</el-table>
<div style="width: 400px">
<div id="main1" style="max-width: 100%; height: 400px"></div>
......@@ -67,34 +67,34 @@
</el-table-column>
<el-table-column prop="name" label="行政划分" width="80">
</el-table-column>
<el-table-column prop="fzs" label="发证数"> </el-table-column>
<el-table-column prop="yxzs" label="有效数"> </el-table-column>
<el-table-column prop="fzs" label="发证数"></el-table-column>
<el-table-column prop="yxzs" label="有效数"></el-table-column>
<el-table-column prop="spscjy" label="食品生产经营">
<el-table-column prop="spscjy1" label="发证数"> </el-table-column>
<el-table-column prop="spscjy1" label="发证数"></el-table-column>
<el-table-column prop="spscjy2" label="有效证数">
</el-table-column>
</el-table-column>
<el-table-column prop="ggcsfw" label="公共场所服务">
<el-table-column prop="ggcsfw1" label="发证数"> </el-table-column>
<el-table-column prop="ggcsfw1" label="发证数"></el-table-column>
<el-table-column prop="ggcsfw2" label="有效证数">
</el-table-column>
</el-table-column>
<el-table-column prop="shyys" label="生活饮用水">
<el-table-column prop="shyys1" label="发证数"> </el-table-column>
<el-table-column prop="shyys1" label="发证数"></el-table-column>
<el-table-column prop="shyys2" label="有效证数">
</el-table-column>
</el-table-column>
<el-table-column prop="jzry" label="家政人员">
<el-table-column prop="jzry1" label="发证数"> </el-table-column>
<el-table-column prop="jzry2" label="有效证数"> </el-table-column>
<el-table-column prop="jzry1" label="发证数"></el-table-column>
<el-table-column prop="jzry2" label="有效证数"></el-table-column>
</el-table-column>
<el-table-column prop="hzpsc" label="化妆品生产">
<el-table-column prop="hzpsc1" label="发证数"> </el-table-column>
<el-table-column prop="hzpsc1" label="发证数"></el-table-column>
<el-table-column prop="hzpsc2" label="有效证数">
</el-table-column>
</el-table-column>
<el-table-column prop="xdpsc" label="消毒产品生产">
<el-table-column prop="xdpsc1" label="发证数"> </el-table-column>
<el-table-column prop="xdpsc1" label="发证数"></el-table-column>
<el-table-column prop="xdpsc2" label="有效证数">
</el-table-column>
</el-table-column>
......@@ -105,25 +105,25 @@
</el-table-column>
</el-table-column>
<el-table-column prop="ypsc" label="药品生产">
<el-table-column prop="ypsc1" label="发证数"> </el-table-column>
<el-table-column prop="ypsc2" label="有效证数"> </el-table-column>
<el-table-column prop="ypsc1" label="发证数"></el-table-column>
<el-table-column prop="ypsc2" label="有效证数"></el-table-column>
</el-table-column>
<el-table-column prop="ylqxsc" label="医疗器械生产">
<el-table-column prop="ylqxsc1" label="发证数"> </el-table-column>
<el-table-column prop="ylqxsc1" label="发证数"></el-table-column>
<el-table-column prop="ylqxsc2" label="有效证数">
</el-table-column>
</el-table-column>
<el-table-column prop="spggcs" label="食品/公共场所">
<el-table-column prop="spggcs1" label="发证数"> </el-table-column>
<el-table-column prop="spggcs1" label="发证数"></el-table-column>
<el-table-column prop="spggcs2" label="有效证数">
</el-table-column>
</el-table-column>
<el-table-column prop="qt" label="其他">
<el-table-column prop="qt1" label="发证数"> </el-table-column>
<el-table-column prop="qt2" label="有效证数"> </el-table-column>
<el-table-column prop="qt1" label="发证数"></el-table-column>
<el-table-column prop="qt2" label="有效证数"></el-table-column>
</el-table-column>
<el-table-column prop="tyjgby" label="托幼机构保育">
<el-table-column prop="tyjgby1" label="发证数"> </el-table-column>
<el-table-column prop="tyjgby1" label="发证数"></el-table-column>
<el-table-column prop="tyjgby2" label="有效证数">
</el-table-column>
</el-table-column>
......@@ -135,6 +135,7 @@
</template>
<script>
<<<<<<< HEAD
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { tableData, tableInfo } from "@/assets/js/data.js";
......@@ -292,166 +293,401 @@ export default {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
=======
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import {tableData, tableInfo} from "@/assets/js/data.js";
import Breadcrumb from "../components/Breadcrumb.vue";
import geoJson from '@/assets/json/qingtian.json'
import {messageFun} from '../util/jianquan'
let one, two;
export default {
//import引入的组件需要注入到对象中才能使用
components: {
Breadcrumb
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
},
legend: {
data: ["体检人数", "食品生产经营", "公共场所服务", "生活饮用水"],
data() {
//这里存放数据
return {
breadData: {
page_name: "电子健康证明",
annual_target:
"暂无数据",
leading: "县疫情防控办 县卫生健康局",
},
tableData: tableData,
tableInfo: tableInfo,
};
},
grid: {
left: "3%",
right: "4%",
bottom: "5%",
containLabel: true,
mounted() {
this.listenMessage();
let _this = this;
this.initChart1();
this.initChart2();
window.parent.postMessage(document.body.scrollHeight, '*');
window.addEventListener("resize", function (e) {
window.parent.postMessage(document.body.scrollHeight, '*');
window.parent.postMessage(document.body.scrollHeight, '*');
});
// window.onresize = () => {
// return (() => {
// _this.initChart1();
// _this.initChart2();
// })();
// };
},
xAxis: [
{
type: "category",
data: [
"东源中心院",
"山口中心院",
"油竹新区卫生院",
"中医院",
"青田二院",
"江南医院",
"腊口中心院",
"船寮中心院",
"康馨医院",
"青田县人民医院温溪分院",
],
axisLabel: {
textStyle: {
color: "#333", //坐标值得具体的颜色
fontSize: 14,
},
width: 100,
overflow: "break",
interval: 0,
},
},
],
yAxis: [
{
type: "value",
name: "人数",
},
],
series: [
{
name: "体检人数",
type: "bar",
emphasis: {
focus: "series",
methods: {
listenMessage() {
window.addEventListener('message', this.bindThis.bind(this));
},
data: [282, 188, 448, 1186, 535, 908, 291, 474, 2410, 736],
},
{
name: "食品生产经营",
type: "bar",
stack: "职业",
emphasis: {
focus: "series",
async bindThis(e) {
const query = this.$route.query;
if (query.debug == "true") {
return;
}
const ret = await messageFun(e);
if (ret == false) {
this.$router.push("err");
}
},
data: [259, 186, 360, 797, 493, 628, 252, 449, 1807, 457],
},
{
name: "公共场所服务",
type: "bar",
stack: "职业",
emphasis: {
focus: "series",
initChart1() {
if (one != null && one != "" && one != undefined) {
one.dispose(); //销毁
}
one = this.$echarts.init(document.getElementById("main1"));
this.$echarts.registerMap("青田县", geoJson, {});
var geoCoordMap = {
青田万康口腔诊所: [120.303531, 28.13867],
青田中学卫生室: [120.327555, 28.112671],
青田中山诊所: [120.402735, 28.168119],
青田二院: [120.395389, 28.160624],
青田仁德医院: [120.2911164100647, 28.13983215729029],
青田仁济中医门诊部: [120.297364, 28.141048],
青田仁济医院: [120.337052, 28.093176],
青田佳吉口腔门诊部: [120.294649, 28.146659],
青田万康口青田俞荣达西医诊所腔诊所: [120.397821, 28.163797],
青田健玲口腔诊所: [120.285431, 28.13896],
};
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
});
}
}
return res;
};
var option = {
tooltip: {
trigger: "item",
formatter: function (params) {
// console.log(params);
var res = "机构名称:" + params.data.name + "<br/>";
return res;
},
},
series: [
{
name: "医院",
type: "scatter",
mapType: "lishui",
coordinateSystem: "geo",
data: convertData([
{name: "青田万康口腔诊所", value: 1},
{name: "青田中学卫生室", value: 2},
{name: "青田中山诊所", value: 3},
{name: "青田二院", value: 4},
{name: "青田仁德医院", value: 5},
{name: "青田仁济中医门诊部", value: 6},
{name: "青田仁济医院", value: 7},
{name: "青田佳吉口腔门诊部", value: 8},
{name: "青田万康口青田俞荣达西医诊所腔诊所", value: 9},
{name: "青田健玲口腔诊所", value: 10},
]),
encode: {
value: 2,
},
zlevel: 10,
symbol: "pin",
symbolSize: 20,
label: {
normal: {
show: true, //显示市区标签
textStyle: {color: "#c71585"}, //省份标签字体颜色
},
emphasis: {
//对应的鼠标悬浮效果
show: true, //关闭文字 （这东西有问题得关）
textStyle: {color: "#800080"},
},
},
itemStyle: {
normal: {
borderWidth: 1, //区域边框宽度
borderColor: "#009fe8", //区域边框颜色
areaColor: "#ffefd5", //区域颜色
},
emphasis: {
show: true,
borderWidth: 0.5,
borderColor: "#4b0082",
areaColor: "#f47920",
},
},
},
],
geo: {
map: "青田县",
itemStyle: {
borderColor: "#1492ff",
areaColor: "#edf4ff",
},
label: {
show: true,
},
},
};
one.setOption(option);
window.addEventListener('resize', () => {
one.resize()
})
},
data: [15, 1, 88, 388, 38, 272, 20, 16, 570, 102],
},
{
name: "生活饮用水",
type: "bar",
stack: "职业",
emphasis: {
focus: "series",
initChart2() {
if (two != null && two != "" && two != undefined) {
two.dispose(); //销毁
}
two = this.$echarts.init(document.getElementById("main2"));
two.setOption({
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
},
legend: {
data: ["体检人数", "食品生产经营", "公共场所服务", "生活饮用水"],
},
grid: {
left: "3%",
right: "4%",
bottom: "5%",
containLabel: true,
},
xAxis: [
{
type: "category",
data: [
"东源中心院",
"山口中心院",
"油竹新区卫生院",
"中医院",
"青田二院",
"江南医院",
"腊口中心院",
"船寮中心院",
"康馨医院",
"青田县人民医院温溪分院",
],
axisLabel: {
textStyle: {
color: "#333", //坐标值得具体的颜色
fontSize: 14,
},
width: 100,
overflow: "break",
interval: 0,
},
},
],
yAxis: [
{
type: "value",
name: "人数",
},
],
series: [
{
name: "体检人数",
type: "bar",
emphasis: {
focus: "series",
},
data: [282, 188, 448, 1186, 535, 908, 291, 474, 2410, 736],
},
{
name: "食品生产经营",
type: "bar",
stack: "职业",
emphasis: {
focus: "series",
},
data: [259, 186, 360, 797, 493, 628, 252, 449, 1807, 457],
},
{
name: "公共场所服务",
type: "bar",
stack: "职业",
emphasis: {
focus: "series",
},
data: [15, 1, 88, 388, 38, 272, 20, 16, 570, 102],
},
{
name: "生活饮用水",
type: "bar",
stack: "职业",
emphasis: {
focus: "series",
},
data: [8, 1, 0, 1, 4, 8, 1, 9, 32, 11],
},
],
});
window.addEventListener('resize', () => {
two.resize()
})
},
data: [8, 1, 0, 1, 4, 8, 1, 9, 32, 11],
},
],
});
window.addEventListener('resize',() => {
two.resize()
})
},
},
};
},
};
</script>
<style lang="scss" scoped>
#app {
background: #fff !important;
}
#app {
background: #fff !important;
}
@media screen and (max-width: 1200px) {
.main {
width: 100%;
margin: 0px auto;
padding: 30px 0;
@media screen and (max-width: 1200px) {
.main {
width: 100%;
margin: 0px auto;
padding: 30px 0;
}
.minHeader,
.market {
width: calc(100% - 40px);
box-sizing: border-box;
border-radius: 4px;
padding: 20px;
margin: 0px auto 0;
background: #fff;
}
.minTop {
width: calc(100% - 40px);
box-sizing: border-box;
border-radius: 4px;
margin: 20px auto;
background: #fff;
}
}
.minHeader,
.market {
width: calc(100% - 40px);
@media screen and (min-width: 1200px) {
.main {
width: 1200px;
margin: 0px auto;
padding: 30px 0;
}
.minHeader,
.market {
width: 1200px;
border-radius: 4px;
// padding: 0px 20px 0px;
background: #fff;
}
.minTop {
width: 1200px;
border-radius: 4px;
background: #fff;
}
}
.card__header {
padding: 18px 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
<<<<<<< HEAD
border-radius: 4px;
padding: 20px;
margin: 0px auto 0;
background: #fff;
=======
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
}
.minTop {
width: calc(100% - 40px);
.card__headers {
padding: 18px 0px 5px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 4px;
margin: 20px auto;
background: #fff;
}
}
@media screen and (min-width: 1200px) {
.main {
width: 1200px;
margin: 0px auto;
padding: 30px 0;
.shadow {
box-shadow: 0 2px 12px 0 #ccc;
}
<<<<<<< HEAD
.minHeader,
.market {
width: 1200px;
border-radius: 4px;
// padding: 0px 20px 0px;
background: #fff;
=======
.w100 {
width: 100%;
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
}
.minTop {
width: 1200px;
border-radius: 4px;
background: #fff;
.w60 {
width: 60%;
}
}
.card__header {
padding: 18px 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.w40 {
width: 40%;
}
<<<<<<< HEAD
.card__headers {
padding: 18px 0px 5px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
=======
.cline {
width: 2px;
height: 18px;
background: #1492ff;
margin: 0 8px;
}
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
.shadow {
box-shadow: 0 2px 12px 0 #ccc;
}
.icon28 {
width: 28px;
height: 28px;
}
</style>
<style>
.tijg .el-table td,
.tijg .el-table th {
text-align: center !important;
}
.w100 {
width: 100%;
}
.tijg .el-table__header thead tr th {
color: #606266;
background: #ebeff8;
}
.w60 {
width: 60%;
}
.xxgl .el-breadcrumb__inner.is-link {
font-size: 16px !important;
font-weight: bold;
color: #333;
}
<<<<<<< HEAD
.w40 {
width: 40%;
}
......@@ -485,4 +721,11 @@ export default {
color: rgb(54, 153, 247);
font-size: 30px;
}
</style>
\ No newline at end of file
</style>
=======
.xxgl .el-icon-s-marketing {
color: rgb(54, 153, 247);
font-size: 30px;
}
</style>
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
qingtian_vue/src/views/err.vue
View file @ 8bc03492
<!-- -->
<template>
<<<<<<< HEAD
<div class=''>
无权限访问
=======
<div class='flex acenter jcenter mt20'>
<img src="../assets/images/err.png" alt="">
>>>>>>> 981568198fdc16d21b8f488ca4407ccbfc277c73
</div>
</template>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment