Skip to content

Z
zhengfu
Commit dccfdf24 authored by 朱建丰's avatar 朱建丰
Browse files
Options

=0726

parent 47be740e
Hide whitespace changes
Inline Side-by-side
Showing with 2697 additions and 2376 deletions
.idea/.gitignore 0 → 100644
View file @ dccfdf24
# Default ignored files
/workspace.xml
\ No newline at end of file
.idea/misc.xml 0 → 100644
View file @ dccfdf24
<?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 @ dccfdf24
<?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 @ dccfdf24
<?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 @ dccfdf24
<?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/src/components/Breadcrumb.vue
View file @ dccfdf24
...@@ -79,7 +79,7 @@ export default { ...@@ -79,7 +79,7 @@ export default {
>>> .el-breadcrumb__inner { >>> .el-breadcrumb__inner {
color: #333; color: #333;
font-weight: bold; font-weight: bold;
font-size: 18px; font-size: 18px !important;
a { a {
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
...@@ -171,4 +171,4 @@ export default { ...@@ -171,4 +171,4 @@ export default {
border-right: 20px solid transparent; border-right: 20px solid transparent;
border-top: 20px solid transparent; border-top: 20px solid transparent;
} }
</style> </style>
\ No newline at end of file
qingtian_vue/README.md
View file @ dccfdf24
...@@ -28,3 +28,44 @@ npm test ...@@ -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). 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 @ dccfdf24
...@@ -88,45 +88,7 @@ ...@@ -88,45 +88,7 @@
viewPort(navigator.userAgent); viewPort(navigator.userAgent);
}, 500); }, 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?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;
})
</script> </script>
</html> </html>
qingtian_vue/src/components/Breadcrumb.vue
View file @ dccfdf24
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
>首页</a >首页</a
></el-breadcrumb-item ></el-breadcrumb-item
> >
<el-breadcrumb-item>{{ breadData.page_name }}</el-breadcrumb-item> <el-breadcrumb-item >{{ breadData.page_name }}</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
<div> <div>
<i class="iconfont icon-chengshi"></i> <i class="iconfont icon-chengshi"></i>
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
<div class="breadcrumb-text" v-if="show"> <div class="breadcrumb-text" v-if="show">
<div class="breadcrumb-title"> <div class="breadcrumb-title">
<img src="../assets/images/target.png" alt="" /> <img src="../assets/images/target.png" alt="" />
<span>年度目标</span> <span style="font-size:16px !important">年度目标</span>
<div class="s-line"></div> <div class="s-line"></div>
{{ breadData.annual_target }} {{ breadData.annual_target }}
</div> </div>
...@@ -89,6 +89,8 @@ export default { ...@@ -89,6 +89,8 @@ export default {
align-items: center; align-items: center;
} }
} }
.breadcrumb-text { .breadcrumb-text {
padding: 16px 20px 0; padding: 16px 20px 0;
} }
...@@ -99,7 +101,8 @@ export default { ...@@ -99,7 +101,8 @@ export default {
span { span {
color: #1492ff; color: #1492ff;
margin-right: 8px; margin-right: 8px;
font-size: 18px; font-weight: bold;
font-size: 18px !important;
} }
.s-line { .s-line {
width: 1px; width: 1px;
...@@ -169,4 +172,4 @@ export default { ...@@ -169,4 +172,4 @@ export default {
border-right: 20px solid transparent; border-right: 20px solid transparent;
border-top: 20px solid transparent; border-top: 20px solid transparent;
} }
</style> </style>
\ No newline at end of file
qingtian_vue/src/router/index.js
View file @ dccfdf24
...@@ -18,8 +18,7 @@ import Szsy from '../views/Szsy.vue' ...@@ -18,8 +18,7 @@ import Szsy from '../views/Szsy.vue'
import Err from '../views/err.vue' import Err from '../views/err.vue'
Vue.use(Router) Vue.use(Router)
var router = new Router({ var router = new Router({
routes: [ routes: [{
{
path: '/', path: '/',
name: 'Index', name: 'Index',
component: MyIndex component: MyIndex
...@@ -27,86 +26,122 @@ var router = new Router({ ...@@ -27,86 +26,122 @@ var router = new Router({
{ {
path: '/xxczh', path: '/xxczh',
name: 'NewUrbanization', name: 'NewUrbanization',
meta: { title: '新型城镇化' }, meta: {
title: '新型城镇化'
},
component: Xxczh component: Xxczh
}, },
{ {
path: '/msbz', path: '/msbz',
name: 'live', name: 'live',
meta: { title: '民生保障' }, meta: {
title: '民生保障'
},
component: Msbz component: Msbz
}, },
{ {
path: '/qyxtfz', path: '/qyxtfz',
name: 'region', name: 'region',
meta: { title: '区域协调发展' }, meta: {
title: '区域协调发展'
},
component: Qyxtfz component: Qyxtfz
}, },
{ {
path: '/cyfz', path: '/cyfz',
name: 'Cyfz', name: 'Cyfz',
meta: { title: '产业发展' }, meta: {
title: '产业发展'
},
component: Cyfz component: Cyfz
}, },
{ {
path: '/xczx', path: '/xczx',
name: 'Xczx', name: 'Xczx',
meta: { title: '乡村振兴' }, meta: {
title: '乡村振兴'
},
component: Xczx component: Xczx
}, },
{ {
path: '/aqsc', path: '/aqsc',
name: 'Aqsc', name: 'Aqsc',
meta: { title: '安全生产' }, meta: {
title: '安全生产'
},
component: Aqsc component: Aqsc
}, },
{ {
path: '/sxh', path: '/sxh',
name: 'Sxh', name: 'Sxh',
meta: { title: '双循环' }, meta: {
title: '双循环'
},
component: Sxh component: Sxh
}, },
{ {
path: '/kjcx', path: '/kjcx',
name: 'Kjcx', name: 'Kjcx',
meta: { title: '科技创新' }, meta: {
title: '科技创新'
},
component: Kjcx component: Kjcx
}, },
{ {
path: '/yshj', path: '/yshj',
name: 'Yshj', name: 'Yshj',
meta: { title: '营商环境' }, meta: {
title: '营商环境'
},
component: Yshj component: Yshj
}, },
{ {
path: '/ctfy', path: '/ctfy',
name: 'Ctfy', name: 'Ctfy',
meta: { title: '常态防疫' }, meta: {
title: '常态防疫'
},
component: Ctfy
},
{
path: '/cthfy',
name: 'Cthfy',
meta: {
title: '常态防疫'
},
component: Ctfy component: Ctfy
}, },
{ {
path: '/stwm', path: '/stwm',
name: 'Stwm', name: 'Stwm',
meta: { title: '生态文明' }, meta: {
title: '生态文明'
},
component: Stwm component: Stwm
}, },
{ {
path: '/xxgl', path: '/xxgl',
name: 'Xxgl', name: 'Xxgl',
meta: { title: '信息管理' }, meta: {
title: '信息管理'
},
component: Xxgl component: Xxgl
}, },
{ {
path: '/szsy', path: '/szsy',
name: 'Szsy', name: 'Szsy',
meta: { title: '双招双引' }, meta: {
title: '双招双引'
},
component: Szsy component: Szsy
}, },
{ {
path: '/err', path: '/err',
name: 'Err', name: 'Err',
meta: { title: '无权限' }, meta: {
title: '无权限'
},
component: Err component: Err
} }
] ]
...@@ -122,20 +157,7 @@ router.beforeEach((to, from, next) => { ...@@ -122,20 +157,7 @@ router.beforeEach((to, from, next) => {
// if (to.path == "/login"||to.path=="/nopower") { // if (to.path == "/login"||to.path=="/nopower") {
next() next()
// if (to.path == '/') {
// next()
// } else if (to.fullPath.indexOf('?') != -1) {
// let tag = to.fullPath.split('?')[1]
// let obj = {}
// obj[tag.split('=')[0]] = tag.split('=')[1]
// if (obj.debug == "true") {
// next();
// } else {
// next({name: 'Err'})
// }
// } else {
// next({name: 'Err'})
// }
// } else { // } else {
...@@ -149,16 +171,31 @@ router.beforeEach((to, from, next) => { ...@@ -149,16 +171,31 @@ router.beforeEach((to, from, next) => {
/*---------埋点代码开始 （路由切换执行）----------*/ /*---------埋点代码开始 （路由切换执行）----------*/
// 单页应用 或 “单个页面”需异步补充PV日志参数还需进行如下埋点： // 单页应用 或 “单个页面”需异步补充PV日志参数还需进行如下埋点：
aplus_queue.push({ action: 'aplus.setMetaInfo', arguments: ['aplus-waiting', 'MAN'] }); aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['aplus-waiting', 'MAN']
});
// PV日志接收日志域名，必须按实际情况填写 // 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 // 判单设备设置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埋点 // 如采集用户信息是异步行为需要先执行这个BLOCK埋点
aplus_queue.push({ action: 'aplus.setMetaInfo', arguments: ['_hold', 'BLOCK'] }); aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['_hold', 'BLOCK']
});
aplus_queue.push({ aplus_queue.push({
'action': 'aplus.sendPV', 'action': 'aplus.sendPV',
...@@ -169,16 +206,16 @@ router.beforeEach((to, from, next) => { ...@@ -169,16 +206,16 @@ router.beforeEach((to, from, next) => {
sapp_id: '14053', sapp_id: '14053',
sapp_name: 'szzf-yh', sapp_name: 'szzf-yh',
// 自定义PV参数key-value键值对（只能是这种平铺的json，不能做多层嵌套），除userName外（考虑安全原因暂时做废弃处理），其他为必填项。 // 自定义PV参数key-value键值对（只能是这种平铺的json，不能做多层嵌套），除userName外（考虑安全原因暂时做废弃处理），其他为必填项。
dev_type: devType, // 设备类型 dev_type: devType, // 设备类型
site_type: '101', // 站点类型 数字化改革门户100 数字政府101 党政机关整体智治102 数字社会103 数字经济104 数字法治105 site_type: '101', // 站点类型 数字化改革门户100 数字政府101 党政机关整体智治102 数字社会103 数字经济104 数字法治105
is_digital_reform: '1', // 固定值传1，标识是否为数字化改革相关应用 is_digital_reform: '1', // 固定值传1，标识是否为数字化改革相关应用
is_workbench: '1', // 新增字段，标识是否为数字化改革工作台，取值 1或0，1代表是，0代表不是，不填该参数取默认值0 is_workbench: '1', // 新增字段，标识是否为数字化改革工作台，取值 1或0，1代表是，0代表不是，不填该参数取默认值0
city_code: '331100', // 设区市编码 city_code: '331100', // 设区市编码
area_code: '331125', // 区县编码 area_code: '331125', // 区县编码
page_name: '云和数字政府门户', // 页面名称 page_name: '云和数字政府门户', // 页面名称
page_url: window.location.href, page_url: window.location.href,
page_id: window.location.hash, 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考虑安全原因暂时做废弃处理 // _user_nick: '', // userName考虑安全原因暂时做废弃处理
}] }]
}) })
...@@ -194,7 +231,10 @@ router.beforeEach((to, from, next) => { ...@@ -194,7 +231,10 @@ router.beforeEach((to, from, next) => {
}); });
// 如采集用户信息是异步行为，需要先设置完用户信息后再执行这个START埋点 // 如采集用户信息是异步行为，需要先设置完用户信息后再执行这个START埋点
// 此时被block住的日志会携带上用户信息逐条发出 // 此时被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 @ dccfdf24
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 @ dccfdf24
...@@ -33,12 +33,12 @@ ...@@ -33,12 +33,12 @@
<div class="mr20 w57"> <div class="mr20 w57">
<div> <div>
<div class="flex acenter lh30"> <div class="flex acenter lh30">
<img src="../assets/images/people.png" class="mr12 icon16" /> <img src="../assets/images/people.png" class="mr12 icon16"/>
<p>事故起数 19 起，同比前两年平均值</p> <p>事故起数 19 起，同比前两年平均值</p>
<em class="norm ml12">↓37.7%</em> <em class="norm ml12">↓37.7%</em>
</div> </div>
<div class="flex acenter lh30"> <div class="flex acenter lh30">
<img src="../assets/images/ren.png" class="mr12 icon16" /> <img src="../assets/images/ren.png" class="mr12 icon16"/>
<p>死亡人数 18 人，同比前两年平均值</p> <p>死亡人数 18 人，同比前两年平均值</p>
<em class="norm ml12">↓16.3%</em> <em class="norm ml12">↓16.3%</em>
</div> </div>
...@@ -727,7 +727,7 @@ ...@@ -727,7 +727,7 @@
</el-table-column> </el-table-column>
<el-table-column prop="time" label="发生时间" width="220"> <el-table-column prop="time" label="发生时间" width="220">
</el-table-column> </el-table-column>
<el-table-column prop="origin" label="信息来源"> </el-table-column> <el-table-column prop="origin" label="信息来源"></el-table-column>
<el-table-column prop="msg" label="应急预案" width="120"> <el-table-column prop="msg" label="应急预案" width="120">
</el-table-column> </el-table-column>
</el-table> </el-table>
...@@ -738,527 +738,550 @@ ...@@ -738,527 +738,550 @@
</template> </template>
<script> <script>
let one, two, three, four, five, six, seven; let one, two, three, four, five, six, seven;
const _myCity = "青田县"; const _myCity = "青田县";
import Breadcrumb from "../components/Breadcrumb.vue"; import Breadcrumb from "../components/Breadcrumb.vue";
import {getUserInfo,getTask,postUserInfo} from '../api/index' import {getUserInfo, getTask, postUserInfo} from '../api/index'
export default {
name: "epidemic", import
components: { Breadcrumb }, {
data() { messageFun
return { }
breadData: { from
page_name: "安全生产", '../util/jianquan'
annual_target: export default {
"为自觉接受媒体监督,有效行使工作职责，努力做到权为民所用，更好地服务社群，树立城管形象。", name: "epidemic",
leading: "应急管理局", components: {Breadcrumb},
}, data() {
myCity: _myCity, return {
activeName1: "second", breadData: {
activeName2: "first", page_name: "安全生产",
activeName3: "first", annual_target:
tableData: [ "为自觉接受媒体监督,有效行使工作职责，努力做到权为民所用，更好地服务社群，树立城管形象。",
{ leading: "应急管理局",
id: 1, },
uname: myCity: _myCity,
"丽水市百货大楼晶都步行街外立面改造装修工程发生一起高处坠落事故", activeName1: "second",
level: "一般", activeName2: "first",
types: "建筑业", activeName3: "first",
time: "2021年06月18日 08:25:00", tableData: [
origin: "丽水市莲都区应急管理局", {
msg: "应急预案", id: 1,
}, uname:
{ "丽水市百货大楼晶都步行街外立面改造装修工程发生一起高处坠落事故",
id: 2, level: "一般",
uname: "云和县发生一起事故造成1人死亡事件", types: "建筑业",
level: "一般", time: "2021年06月18日 08:25:00",
types: "商贸其他", origin: "丽水市莲都区应急管理局",
time: "2021年06月10日 08:25:00", msg: "应急预案",
origin: "龙泉市应急管理局", },
msg: "应急预案", {
}, id: 2,
{ uname: "云和县发生一起事故造成1人死亡事件",
id: 3, level: "一般",
uname: "龙泉发生一起叉车碰撞事故，致一人死亡", types: "商贸其他",
level: "一般", time: "2021年06月10日 08:25:00",
types: "轻工", origin: "龙泉市应急管理局",
time: "2021年06月10日 07:25:00", msg: "应急预案",
origin: "乡镇上报", },
msg: "应急预案", {
}, id: 3,
{ uname: "龙泉发生一起叉车碰撞事故，致一人死亡",
id: 4, level: "一般",
uname: types: "轻工",
"丽水市百货大楼晶都步行街外立面改造装修工程发生一起高处坠落事故", time: "2021年06月10日 07:25:00",
level: "一般", origin: "乡镇上报",
types: "建筑业", msg: "应急预案",
time: "2021年06月18日 08:25:00", },
origin: "丽水市莲都区应急管理局", {
msg: "应急预案", id: 4,
}, uname:
{ "丽水市百货大楼晶都步行街外立面改造装修工程发生一起高处坠落事故",
id: 5, level: "一般",
uname: "青田县山口镇至方山乡公路发生山体塌方", types: "建筑业",
level: "一般", time: "2021年06月18日 08:25:00",
types: "地质灾害", origin: "丽水市莲都区应急管理局",
time: "2021年05月27日 08:25:00", msg: "应急预案",
origin: "青田县应急管理局", },
msg: "应急预案", {
}, id: 5,
{ uname: "青田县山口镇至方山乡公路发生山体塌方",
id: 6, level: "一般",
uname: types: "地质灾害",
"青田县东源镇浙江以勒标准件制造有限公司发生一起触电事故致一人死亡", time: "2021年05月27日 08:25:00",
level: "特别重大", origin: "青田县应急管理局",
types: "商贸其他", msg: "应急预案",
time: "2021年05月12日 08:25:00", },
origin: "青田应急值班室", {
msg: "应急预案", id: 6,
}, uname:
], "青田县东源镇浙江以勒标准件制造有限公司发生一起触电事故致一人死亡",
gkShow: false, level: "特别重大",
whShow: true, types: "商贸其他",
showTit: false, time: "2021年05月12日 08:25:00",
}; origin: "青田应急值班室",
}, msg: "应急预案",
},
mounted() { ],
let _this = this; gkShow: false,
this.initGzbgChart(); whShow: true,
this.initGzbgChart2(); showTit: false,
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: {
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: [ mounted() {
{ this.listenMessage();
type: "category", let _this = this;
data: [ this.initGzbgChart();
"1月", this.initGzbgChart2();
"2月", this.initGzbgChart3();
"3月", this.initGzbgChart4();
"4月", this.initGzbgChart5();
"5月", this.initGzbgChart6();
"6月", this.initGzbgChart7();
"7月", window.parent.postMessage(document.body.scrollHeight, '*');
"8月", window.onresize = () => {
"9月", return (() => {
"10月", _this.initGzbgChart();
"11月", _this.initGzbgChart2();
"12月", _this.initGzbgChart3();
], _this.initGzbgChart4();
}, _this.initGzbgChart5();
], _this.initGzbgChart6();
yAxis: { _this.initGzbgChart7();
type: "value", window.parent.postMessage(document.body.scrollHeight, '*');
show: false, })();
};
window.addEventListener("resize", function (e) {
window.parent.postMessage(document.body.scrollHeight, '*');
});
}, },
series: [ methods: {
{ listenMessage() {
name: "事故起数", window.addEventListener('message', this.bindThis.bind(this));
type: "bar",
data: [6, 1, 7, 5, 4, 0, 0, 0, 0, 0, 0, 0],
label: {
// 在图形上显示每个数据
show: true,
position: "top",
itemStyle: {
color: "#1492ff", //柱子的颜色
},
}, },
}, async bindThis(e){
{ const query=this.$route.query;
name: "死亡人数", if(query.debug=="true")
type: "bar", {
data: [7, 1, 6, 4, 4, 0, 0, 0, 0, 0, 0, 0], return;
label: { }
// 在图形上显示每个数据 const ret=await messageFun(e);
show: true, if(ret==false)
position: "top", {
itemStyle: { this.$router.push("err");
normal: { }
color: "#d40000", //柱子的颜色
},
},
}, },
}, handleClick1(tab, event) {
], this.activeName1 = tab.name;
}); this.$nextTick(function () {
}, this.initGzbgChart3();
initGzbgChart2() { this.initGzbgChart4();
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: 4, name: "工矿商贸", seriesName: "0" },
{ value: 18, name: "道路交通", seriesName: "0" },
{ value: 0, name: "消防火灾", seriesName: "0" },
],
label: {
show: true,
// position: 'top',
formatter: "{c}起",
}, },
emphasis: { handleClick2(tab, event) {
itemStyle: { this.$nextTick(function () {
shadowBlur: 10, this.initGzbgChart5();
shadowOffsetX: 0, this.initGzbgChart6();
shadowColor: "rgba(0, 0, 0, 0.5)", });
},
}, },
}, handleClick3(tab, event) {
], this.$nextTick(function () {
}); this.initGzbgChart7();
}, // this.initGzbgChart8();
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, indexMethod(index) {
}, return index * 1 + 1;
axisTick: {
show: true,
},
axisLine: {
lineStyle: {
color: "#dddddd",
}, },
}, gk() {
}, this.gkShow = true;
yAxis: { this.whShow = !this.whShow;
show: false,
},
series: [
{
data: [20, 14, 18, 15, 10, 14, 26, 23],
type: "bar",
label: {
show: true,
position: "top",
formatter: "{c}%",
}, },
barWidth: 30, // 柱子宽度 wh() {
}, this.whShow = true;
], this.gkShow = !this.gkShow;
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: { warns() {
itemStyle: { this.showTit = true;
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
}, },
}, initGzbgChart() {
], if (one != null && one != "" && one != undefined) {
}); one.dispose(); //销毁
}, }
initGzbgChart5() { one = this.$echarts.init(document.getElementById("main1"));
if (five != null && five != "" && five != undefined) { one.setOption({
five.dispose(); //销毁 color: ["#1492ff", "#d40000"],
} tooltip: {
five = this.$echarts.init(document.getElementById("main5")); trigger: "axis",
five.setOption({ },
xAxis: { legend: {
type: "category", data: ["事故起数", "死亡人数"],
data: ["05-01", "05-08", "05-15", "05-22", "05-27", "05-31"], bottom: 0,
}, },
yAxis: { grid: {
type: "value", top: "8%",
min: 0, left: "3%",
max: 100, right: "5%",
splitNumber: 5, bottom: "15%",
splitLine: { containLabel: true,
show: true, },
}, calculable: true,
axisLine: { xAxis: [
lineStyle: { {
color: "#333333", 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: [6, 1, 7, 5, 4, 0, 0, 0, 0, 0, 0, 0],
label: {
// 在图形上显示每个数据
show: true,
position: "top",
itemStyle: {
color: "#1492ff", //柱子的颜色
},
},
},
{
name: "死亡人数",
type: "bar",
data: [7, 1, 6, 4, 4, 0, 0, 0, 0, 0, 0, 0],
label: {
// 在图形上显示每个数据
show: true,
position: "top",
itemStyle: {
normal: {
color: "#d40000", //柱子的颜色
},
},
},
},
],
});
}, },
}, initGzbgChart2() {
axisLabel: { if (two != null && two != "" && two != undefined) {
formatter: "{value}%", two.dispose(); //销毁
}, }
}, two = this.$echarts.init(document.getElementById("main2"));
series: [ two.setOption({
{ color: ["#ff6b00", "#d40000", "#15be50"],
data: [15, 21, 23, 39, 42, 65], tooltip: {
type: "line", trigger: "item",
}, },
], legend: {
grid: { bottom: 0,
top: "4%", left: "center",
left: "3%", },
right: "5%", series: [
bottom: "18%", {
containLabel: true, name: ["3", "18", "0"],
}, type: "pie",
}); radius: ["50%", "70%"],
}, data: [
initGzbgChart6() { {value: 4, name: "工矿商贸", seriesName: "0"},
if (six != null && six != "" && six != undefined) { {value: 18, name: "道路交通", seriesName: "0"},
six.dispose(); //销毁 {value: 0, name: "消防火灾", seriesName: "0"},
} ],
six = this.$echarts.init(document.getElementById("main6")); label: {
six.setOption({ show: true,
color: ["#FF3E38", "#53A8E8"], // position: 'top',
tooltip: { formatter: "{c}起",
trigger: "11", },
}, emphasis: {
legend: { itemStyle: {
// orient: 'vertical', shadowBlur: 10,
left: "center", shadowOffsetX: 0,
}, shadowColor: "rgba(0, 0, 0, 0.5)",
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: { initGzbgChart3() {
itemStyle: { if (three != null && three != "" && three != undefined) {
shadowBlur: 10, three.dispose(); //销毁
shadowOffsetX: 0, }
shadowColor: "rgba(0, 0, 0, 0.5)", 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: [20, 14, 18, 15, 10, 14, 26, 23],
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) {
grid: { four.dispose(); //销毁
top: "4%", }
left: "3%", four = this.$echarts.init(document.getElementById("main4"));
right: "5%", four.setOption({
bottom: "18%", color: ["#EE6666", "#FAC858", "#5470C6", "#91CC75"],
containLabel: true, tooltip: {
}, trigger: "item",
}); },
}, legend: {
initGzbgChart7() { right: 0,
if (seven != null && seven != "" && seven != undefined) { orient: "vertical",
seven.dispose(); //销毁 top: "center",
} },
seven = this.$echarts.init(document.getElementById("main7")); grid: {
seven.setOption({ top: "5%",
xAxis: { left: "3%",
type: "category", right: "5%",
data: [ bottom: "18%",
"05-01", containLabel: true,
"05-08", },
"05-15", series: [
"05-22", {
"05-27", name: "访问来源",
"05-31", type: "pie",
"06-07", radius: "50%",
"06-14", data: [
"06-21", {value: 0.22, name: "重大风险", seriesName: "15"},
], {value: 0.06, name: "较大风险", seriesName: "4 "},
}, {value: 14.39, name: "一般风险", seriesName: "975"},
legend: { {value: 85.33, name: "低风险", seriesName: "5809"},
data: ["乡镇应急救援队伍"], ],
}, label: {
yAxis: { show: true,
type: "value", // position: 'top',
min: 0, formatter: "{b} {d} {c}%",
max: 120, },
splitNumber: 5, emphasis: {
splitLine: { itemStyle: {
show: true, shadowBlur: 10,
}, shadowOffsetX: 0,
axisLine: { shadowColor: "rgba(0, 0, 0, 0.5)",
lineStyle: { },
color: "#333333", },
},
],
});
},
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,
},
});
}, },
},
},
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> </script>
<style lang="scss"> <style lang="scss">
#app { #app {
background: #fff !important; background: #fff !important;
} }
// @media screen and (max-width: 1200px) { // @media screen and (max-width: 1200px) {
.main { .main {
width: 100%; width: 100%;
background-color: #fff; background-color: #fff;
...@@ -1282,284 +1305,285 @@ export default { ...@@ -1282,284 +1305,285 @@ export default {
border-radius: 4px; border-radius: 4px;
margin: 20px auto; 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;
// // padding: 20px 20px 20px;
// background: #fff;
// }
// .minTop { // @media screen and (min-width: 1200px) {
// background-color: #fff; // .main {
// width: 1200px; // width: 1200px;
// border-radius: 4px; // margin: 0px auto;
// } // padding: 30px 0;
// } // }
.card__header { // .minHeader,
padding: 18px 20px; // .market {
border-bottom: 1px solid #ebeef5; // width: 1200px;
-webkit-box-sizing: border-box; // border-radius: 4px;
box-sizing: border-box; // // padding: 20px 20px 20px;
} // background: #fff;
// }
.el-breadcrumb__inner.is-link { // .minTop {
font-size: 16px !important; // background-color: #fff;
} // width: 1200px;
// border-radius: 4px;
// }
// }
.el-icon-s-marketing { .card__header {
color: rgb(54, 153, 247); padding: 18px 20px;
font-size: 30px; border-bottom: 1px solid #ebeef5;
} -webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cline { .el-breadcrumb__inner.is-link {
width: 1px; font-size: 16px !important;
height: 30px; }
background: #dddddd;
margin: 0 8px;
}
.hl30 { .el-icon-s-marketing {
height: 30px; color: rgb(54, 153, 247);
line-height: 30px; font-size: 30px;
} }
.shadow { .cline {
box-shadow: 0 2px 12px 0 #ccc; width: 1px;
} height: 30px;
background: #dddddd;
margin: 0 8px;
}
.norm { .hl30 {
font-style: normal; height: 30px;
color: #15be50; line-height: 30px;
} }
.zhan { .shadow {
width: 100%; box-shadow: 0 2px 12px 0 #ccc;
height: 280px; }
/* background: #ccc; */
}
.w100 { .norm {
width: 100%; font-style: normal;
} color: #15be50;
}
.w49 { .zhan {
width: 49%; width: 100%;
} height: 280px;
/* background: #ccc; */
}
.w57 { .w100 {
width: 57%; width: 100%;
} }
.w41 { .w49 {
width: 41%; width: 49%;
} }
.lh30 { .w57 {
line-height: 30px; width: 57%;
} }
.h60 { .w41 {
height: 60px; width: 41%;
} }
.btn { .lh30 {
width: 22%; line-height: 30px;
height: 40px; }
line-height: 40px;
border-radius: 4px;
text-align: center;
cursor: pointer;
}
.btn1 { .h60 {
width: 22%; height: 60px;
height: 40px; }
line-height: 40px;
border-radius: 4px;
text-align: center;
cursor: pointer;
}
.btn2 { .btn {
width: 22%; width: 22%;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
border-radius: 4px; border-radius: 4px;
text-align: center; text-align: center;
background: #c8c9cc !important; cursor: pointer;
cursor: pointer; }
color: #fff !important;
font-size: 16px !important;
border-color: #c8c9cc !important;
}
.btn1:hover { .btn1 {
color: #409eff; width: 22%;
border-color: #c6e2ff; height: 40px;
background-color: #ecf5ff; line-height: 40px;
} border-radius: 4px;
text-align: center;
cursor: pointer;
}
.btn:hover { .btn2 {
background: #66b1ff; width: 22%;
border-color: #66b1ff; height: 40px;
color: #fff; line-height: 40px;
} border-radius: 4px;
text-align: center;
background: #c8c9cc !important;
cursor: pointer;
color: #fff !important;
font-size: 16px !important;
border-color: #c8c9cc !important;
}
.pore { .btn1:hover {
position: relative; color: #409eff;
} border-color: #c6e2ff;
background-color: #ecf5ff;
}
.el-popover { .btn:hover {
min-width: 55px !important; background: #66b1ff;
left: 415px !important; border-color: #66b1ff;
} color: #fff;
}
.el-tooltip__popper { .pore {
border: 1px solid #ecf5ff !important; position: relative;
background: #fff !important; }
}
/* .poab { .el-popover {
position: absolute; min-width: 55px !important;
top: -70px; left: 415px !important;
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; .el-tooltip__popper {
width: 5px; border: 1px solid #ecf5ff !important;
top: -10px; background: #fff !important;
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;
} */ /* .poab {
.el-progress--circle, position: absolute;
.el-progress--dashboard { top: -70px;
display: inline-block; width: 80px;
position: relative; 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-button:hover { } */
color: #fff; .el-progress--circle,
border-color: #c8c9cc !important; .el-progress--dashboard {
background-color: #c8c9cc; display: inline-block;
} position: relative;
}
.el-progress_text { .el-button:hover {
font-size: 16px !important; color: #fff;
color: #000; border-color: #c8c9cc !important;
position: absolute; background-color: #c8c9cc;
top: 50%; }
left: 0;
width: 100%;
text-align: center;
margin: 0;
transform: translateY(-50%);
}
.bgs { .el-progress_text {
width: 60px; font-size: 16px !important;
height: 60px; color: #000;
position: absolute; position: absolute;
left: 0; top: 50%;
right: 0; left: 0;
top: 10px; width: 100%;
margin: auto; text-align: center;
border-radius: 50%; margin: 0;
/* background: #48e1a7; */ transform: translateY(-50%);
} }
.bgc89 { .bgs {
background: #c8c9cc; width: 60px;
} height: 60px;
position: absolute;
left: 0;
right: 0;
top: 10px;
margin: auto;
border-radius: 50%;
/* background: #48e1a7; */
}
.borc8 { .bgc89 {
border: 1px solid #c8c9cc; background: #c8c9cc;
} }
.el-tabs { .borc8 {
width: 100% !important; border: 1px solid #c8c9cc;
} }
.mb12 { .el-tabs {
margin-bottom: 12px; width: 100% !important;
} }
.zfx { .mb12 {
color: #ff6b00; margin-bottom: 12px;
font-style: normal; }
font-size: 20px;
vertical-align: middle;
line-height: 22px;
margin-right: 12px;
}
.el-progress { .zfx {
width: 100% !important; color: #ff6b00;
} font-style: normal;
font-size: 20px;
vertical-align: middle;
line-height: 22px;
margin-right: 12px;
}
.cc8 { .el-progress {
background: #c8c9cc; width: 100% !important;
color: #fff; }
padding: 12px 20px;
border-radius: 5px;
}
.aqsc .el-table__row .el-table_1_column_2 { .cc8 {
color: #409eff; background: #c8c9cc;
font-size: 12px; color: #fff;
} padding: 12px 20px;
border-radius: 5px;
}
.el-table__row .el-table_1_column_7 { .aqsc .el-table__row .el-table_1_column_2 {
color: #aaa !important; color: #409eff;
} font-size: 12px;
}
.el-table__row .el-table_1_column_7 {
color: #aaa !important;
}
.el-table thead { .el-table thead {
color: #333 !important; color: #333 !important;
} }
.el-table td, .el-table td,
.el-table th { .el-table th {
text-align: center !important; text-align: center !important;
} }
.textRight { .textRight {
text-align: right; text-align: right;
} }
.icon160 { .icon160 {
width: 160px; width: 160px;
} }
.h510 { .h510 {
height: 510px; height: 510px;
} }
</style> </style>
qingtian_vue/src/views/Ecology.vue
View file @ dccfdf24
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
<div class="air-quality unify-item shadow"> <div class="air-quality unify-item shadow">
<h3 class="module-tit">空气质量巩固提升行动</h3> <h3 class="module-tit">空气质量巩固提升行动</h3>
<div class="aq-map"> <div class="aq-map">
<img src="../assets/images/sy-map.jpg" alt="" /> <img src="../assets/images/sy-map.jpg" alt=""/>
<div class="aq-exponent"> <div class="aq-exponent">
<p>空气质量指数</p> <p>空气质量指数</p>
<ul class="aq-list"> <ul class="aq-list">
...@@ -181,471 +181,540 @@ ...@@ -181,471 +181,540 @@
</template> </template>
<script> <script>
import Breadcrumb from "../components/Breadcrumb.vue"; import Breadcrumb from "../components/Breadcrumb.vue";
import Tree from "../components/Tree.vue"; import Tree from "../components/Tree.vue";
export default { import {messageFun} from "../util/jianquan";
name: "ecology",
components: { Tree, Breadcrumb }, export default {
data() { name: "ecology",
return { components: {Tree, Breadcrumb},
breadData: { data() {
page_name: "生态文明", return {
annual_target:"暂无数据", breadData: {
leading: "青田县环保局", page_name: "生态文明",
}, annual_target: "暂无数据",
aqList: [ leading: "青田县环保局",
{ },
name: "优", aqList: [
bgc: "#10D485", {
}, name: "优",
{ bgc: "#10D485",
name: "良", },
bgc: "#189CFF", {
}, name: "良",
{ bgc: "#189CFF",
name: "轻度污染", },
bgc: "#2A6FFF", {
}, name: "轻度污染",
{ bgc: "#2A6FFF",
name: "中度污染", },
bgc: "#FFA72A", {
}, name: "中度污染",
{ bgc: "#FFA72A",
name: "重度污染", },
bgc: "#FF842A", {
}, name: "重度污染",
], bgc: "#FF842A",
clear_water_info: [ },
{ ],
classify: "国考断面", clear_water_info: [
num: 2, {
name: "优Ⅲ类", classify: "国考断面",
current_num: "100%", num: 2,
target_num: "100%", name: "优Ⅲ类",
compare_num: 0.5, current_num: "100%",
}, target_num: "100%",
{ compare_num: 0.5,
classify: "省控断面", },
num: 2, {
name: "优Ⅲ类", classify: "省控断面",
current_num: "100%", num: 2,
target_num: "100%", name: "优Ⅲ类",
compare_num: 0.5, current_num: "100%",
}, target_num: "100%",
{ compare_num: 0.5,
classify: "饮用水水源地", },
num: 1, {
name: "优Ⅲ类", classify: "饮用水水源地",
current_num: "100%", num: 1,
target_num: "100%", name: "优Ⅲ类",
compare_num: 0.5, current_num: "100%",
}, target_num: "100%",
], compare_num: 0.5,
aq_desc_info: [ },
{ ],
name: "空气优良天数比", aq_desc_info: [
target_num: "93.3%", {
current_num: "99.3%", name: "空气优良天数比",
compare_num: -0.7, target_num: "93.3%",
icon: "icon-kongqiyouliang", current_num: "99.3%",
}, compare_num: -0.7,
{ icon: "icon-kongqiyouliang",
name: "PM2.5浓度", },
target_num: 36, {
current_num: 22, name: "PM2.5浓度",
compare_num: -4.3, target_num: 36,
icon: "icon-pm", current_num: 22,
}, compare_num: -4.3,
], icon: "icon-pm",
no_waste_info: [ },
],
{ no_waste_info: [
name: "医疗废物收集处置率",
target_num: "100%", {
current_num: "100%", name: "医疗废物收集处置率",
compare_num: 0.5, target_num: "100%",
}, current_num: "100%",
{ compare_num: 0.5,
name: "医城镇垃圾分类覆盖面", },
target_num: "100%", {
current_num: "80%", name: "医城镇垃圾分类覆盖面",
compare_num: 0.5, target_num: "100%",
}, current_num: "80%",
], compare_num: 0.5,
br_info: [ },
{ ],
name: "河湖问题整改", br_info: [
target_num: "93.3%", {
current_num: "95.3%", name: "河湖问题整改",
compare_num: 0.5, target_num: "93.3%",
}, current_num: "95.3%",
{ compare_num: 0.5,
name: "河湖问题整改", },
target_num: "93.3%", {
current_num: "95.3%", name: "河湖问题整改",
compare_num: 0.5, target_num: "93.3%",
}, current_num: "95.3%",
], compare_num: 0.5,
ecological_creation_info: [ },
{ ],
name: "市级生态文明建设示范市（县）", ecological_creation_info: [
num: "24个", {
icon: "icon-gongyuzhuzhai", name: "市级生态文明建设示范市（县）",
}, num: "24个",
{ icon: "icon-gongyuzhuzhai",
name: "县市区级生态文明建设示范市（县）", },
num: "61个", {
icon: "icon-chengshi1", name: "县市区级生态文明建设示范市（县）",
num: "61个",
icon: "icon-chengshi1",
},
{
name: '绿水青山就是"金山银山"实践创新基地',
num: "24个",
icon: "icon-shanshui",
},
],
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: '正常'
},
{
name: "工业废气治理项目(39.7)",
status: '正常'
},
{
name: "工业废物治理项目(39.7)",
status: '正常'
}
],
},
],
};
}, },
{ mounted() {
name: '绿水青山就是"金山银山"实践创新基地', this.listenMessage();
num: "24个", window.parent.postMessage(document.body.scrollHeight, '*');
icon: "icon-shanshui", window.onresize = () => {
return (() => {
window.parent.postMessage(document.body.scrollHeight, '*');
})();
};
window.addEventListener("resize", function (e) {
window.parent.postMessage(document.body.scrollHeight, '*');
});
}, },
], methods: {
treeData: [ listenMessage() {
{ window.addEventListener('message', this.bindThis.bind(this));
name: "深化碧水行动",
children: [
{
name: "新增小微企业园(39.7)",
status:'正常'
},
{
name: "探索开展“清新田园”建设(39.7)",
status:'滞后'
},
{
name: "接收外送电(39.7)",
status:'滞后'
},
{
name: "全省天然气消费量(39.7)",
status:'正常'
}, },
{ async bindThis(e) {
name: "海铁联运量(39.7)", const query = this.$route.query;
status:'正常' if (query.debug == "true") {
return;
}
const ret = await messageFun(e);
if (ret == false) {
this.$router.push("err");
}
}, },
{ }
name: "淘汰国Ⅲ及以下老旧运营(39.7)",
status:'正常'
},
{
name: "工业废气治理项目(39.7)",
status:'正常'
},
{
name: "工业废物治理项目(39.7)",
status:'正常'
}
],
},
],
};
},
mounted() {
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, '*');
});
}
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.ecology { .ecology {
// width: 1300px; // width: 1300px;
width: calc(100% - 40px); width: calc(100% - 40px);
margin: 0px auto; margin: 0px auto;
padding: 20px; padding: 20px;
// background: #666 // background: #666
} }
//公共样式
.module-tit{ //公共样式
font-size: 20px; .module-tit {
padding: 16px 0 12px 12px; font-size: 20px;
font-weight: 600; padding: 16px 0 12px 12px;
position: relative; font-weight: 600;
} position: relative;
.module-tit::before{ }
content: "";
position: absolute; .module-tit::before {
left: 0px; content: "";
top: 16px; position: absolute;
width: 4px; left: 0px;
height: 28px; top: 16px;
background-color: #1492ff; width: 4px;
} height: 28px;
.unify-item{ background-color: #1492ff;
box-sizing: border-box; }
padding: 0 20px 12px;
background-color: #fff; .unify-item {
border-radius: 4px; box-sizing: border-box;
margin-bottom: 20px; padding: 0 20px 12px;
} background-color: #fff;
.shadow { border-radius: 4px;
box-shadow: 0 2px 12px 0 #ccc; margin-bottom: 20px;
} }
//当前页面样式
.clear-water { .shadow {
ul { box-shadow: 0 2px 12px 0 #ccc;
li { }
display: flex;
justify-content: space-between; //当前页面样式
align-items: center; .clear-water {
height: 130px; ul {
background-color: #fafafa; li {
margin-bottom: 20px;
color: #333;
.cw-classify {
width: 30px;
height: 130px;
text-align: center;
background-color: #e1f1ff;
color: #1492ff;
display: flex; display: flex;
padding: 0 8px; justify-content: space-between;
align-items: center; align-items: center;
} height: 130px;
.cw-progress { background-color: #fafafa;
position: relative; margin-bottom: 20px;
>>> .el-progress-circle { color: #333;
width: 100px !important;
height: 100px !important; .cw-classify {
} width: 30px;
> p { height: 130px;
position: absolute; text-align: center;
top: 50%; background-color: #e1f1ff;
left: 50%;
transform: translate(-50%, -50%);
font-size: 18px;
}
}
.cw-percentage {
.cw-per-num {
font-size: 20px;
color: #1492ff; color: #1492ff;
font-weight: 600; display: flex;
margin-bottom: 8px; 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 { .cw-percentage {
width: 35%; .cw-per-num {
padding-left: 20px; font-size: 20px;
box-sizing: border-box; color: #1492ff;
border-left: 1px solid #eee; font-weight: 600;
.cw-com-per { margin-bottom: 8px;
color: #1492ff; }
margin: 8px 0 12px;
.cw-per-text {
font-size: 18px;
}
} }
.cw-com-desc {
color: #1bd68a; .cw-compare {
margin: 5px 0; 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 { .air-quality {
.aq-map { .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 {
display: flex; display: flex;
justify-content: space-around;
align-items: center; align-items: center;
padding: 8px 0;
i { img {
display: block; width: 40%;
width: 8px; height: auto;
height: 8px;
border-radius: 50%;
margin-right: 8px;
} }
}
} .aq-exponent {
.aq-desc { p {
display: flex; font-size: 18px;
justify-content: space-around; font-weight: 600;
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-desc-con { }
padding: 20px 0 0;
.aq-list {
margin: 20px 0;
li {
display: flex;
align-items: center;
padding: 8px 0;
i { 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; color: #1492ff;
font-size: 24px; height: 36px;
line-height: 46px; text-align: center;
line-height: 36px;
border-radius: 2px;
background-color: #e1f1ff;
} }
.aq-desc-tb {
display: flex; .aq-desc-con {
align-items: center; padding: 20px 0 0;
justify-content: space-between;
margin-bottom: 20px; i {
padding: 0 12px; color: #1492ff;
> div { font-size: 24px;
width: 45%; line-height: 46px;
} }
.aq-desc-icon {
width: 46px; .aq-desc-tb {
height: 46px; display: flex;
border-radius: 50%; align-items: center;
background-color: #e7f5ff; justify-content: space-between;
text-align: center; 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 { .no-waste {
.nw-con { .nw-con {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
li {
padding: 12px 20px; li {
background-color: #eefbff; padding: 12px 20px;
width: 48%; background-color: #eefbff;
box-sizing: border-box; width: 48%;
color: #333; box-sizing: border-box;
.nw-task-name { color: #333;
font-size: 18px;
font-weight: 600; .nw-task-name {
color: #000;
}
.nw-task-num {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 12px 0;
p {
font-size: 18px; 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 { p {
color: #1492ff; font-size: 18px;
margin: 5px 0;
} }
}
.nw-task-target { .nw-task-current {
width: 20%; width: 20%;
p {
color: #ffc149; p {
color: #1492ff;
}
} }
}
.nw-task-compare { .nw-task-target {
width: 45%; width: 20%;
p {
color: #1bd68a; p {
color: #ffc149;
}
}
.nw-task-compare {
width: 45%;
p {
color: #1bd68a;
}
} }
} }
} }
}
.nw-task-first { .nw-task-first {
width: 100%; width: 100%;
background-color: #fffcee; background-color: #fffcee;
margin-bottom: 20px; margin-bottom: 20px;
}
} }
} }
}
.beautiful-rivers { .beautiful-rivers {
.br-con { .br-con {
li { li {
padding: 12px 20px; padding: 12px 20px;
background-color: #fbfbfb; background-color: #fbfbfb;
margin-bottom: 12px; margin-bottom: 12px;
color: #333; color: #333;
h4 {
font-weight: 600; h4 {
font-size: 18px; font-weight: 600;
color: #000; 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;
} }
& > div {
.br-task-num {
display: flex; display: flex;
align-items: center; align-items: center;
width: 30%; justify-content: space-between;
} padding: 8px 0;
.br-task-pro {
position: relative; > > > .el-progress-circle {
margin-right: 8px; width: 60px !important;
i { height: 60px !important;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
} }
}
.br-task-compare { & > div {
i { display: flex;
font-size: 42px; align-items: center;
color: #1bd68a; width: 30%;
}
.br-task-pro {
position: relative;
margin-right: 8px; margin-right: 8px;
i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
}
}
.br-task-compare {
i {
font-size: 42px;
color: #1bd68a;
margin-right: 8px;
}
} }
} }
} }
} }
} }
}
.ecological-creation { .ecological-creation {
.ec-con { .ec-con {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
li {
width: 30%; li {
background-color: #f1f3f5; width: 30%;
padding: 12px; background-color: #f1f3f5;
text-align: center; padding: 12px;
color: #333; text-align: center;
box-sizing: border-box; color: #333;
i { box-sizing: border-box;
font-size: 44px;
color: #1492ff; i {
font-size: 44px;
color: #1492ff;
}
} }
} }
} }
} </style>
</style>
\ No newline at end of file
qingtian_vue/src/views/Epidemic.vue
View file @ dccfdf24
<template> <template>
<div class="epidemic"> <div class="epidemic main">
<div class="shadow"> <div class="minHeader shadow">
<Breadcrumb :breadData="breadData"></Breadcrumb> <Breadcrumb :breadData="breadData"></Breadcrumb>
</div> </div>
<div class="epidemic-tabs mt20"> <div class="epidemic-tabs mt20">
<ul class="et-con"> <ul class="et-con">
...@@ -193,13 +193,13 @@ ...@@ -193,13 +193,13 @@
<el-col :sm="8" :xs="24"> <el-col :sm="8" :xs="24">
<div class="vt-ipt"> <div class="vt-ipt">
<p>证件号码</p> <p>证件号码</p>
<input type="text" v-model="vt.vt_code1" /> <input type="text" v-model="vt.vt_code1"/>
</div> </div>
</el-col> </el-col>
<el-col :sm="8" :xs="16"> <el-col :sm="8" :xs="16">
<div class="vt-ipt"> <div class="vt-ipt">
<p>电子监管码</p> <p>电子监管码</p>
<input type="text" v-model="vt.vt_code2" /> <input type="text" v-model="vt.vt_code2"/>
</div> </div>
</el-col> </el-col>
<el-col :sm="4" :xs="8"> <el-col :sm="4" :xs="8">
...@@ -483,7 +483,7 @@ ...@@ -483,7 +483,7 @@
</div> </div>
<div class="re-search"> <div class="re-search">
<p>冷链码</p> <p>冷链码</p>
<input type="text" /> <input type="text"/>
<button> <button>
<i class="el-icon-search"></i> <i class="el-icon-search"></i>
检索 检索
...@@ -520,842 +520,908 @@ ...@@ -520,842 +520,908 @@
</template> </template>
<script> <script>
import Breadcrumb from "../components/Breadcrumb.vue"; import Breadcrumb from "../components/Breadcrumb.vue";
export default { import {messageFun} from '../util/jianquan'
name: "epidemic",
components: { Breadcrumb }, export default {
data() { name: "epidemic",
return { components: {Breadcrumb},
breadData: { data() {
page_name: "常态化疫情防控", return {
annual_target: "暂无数据", breadData: {
leading: "县疫情防控办 县卫生健康局", page_name: "常态化疫情防控",
}, annual_target: "暂无数据",
epidemic_tabs_info: [ leading: "县疫情防控办 县卫生健康局",
{
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();
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, '*');
});
},
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",
},
},
},
{
value: 100 - 30.53,
//不需要显示的数据，颜色设置成和背景一样
itemStyle: {
normal: {
color: "#E6EBF8",
},
}, },
}, epidemic_tabs_info: [
], {
}, name: "疫苗接种",
{ },
type: "pie", {
hoverAnimation: false, name: "疫情追溯",
radius: ["65%", "80%"], },
label: { {
normal: { name: "冷链追溯",
position: "inner", },
}, ],
}, epidemic_tabs_idx: 0,
labelLine: { vt: {
normal: { vt_code1: "",
show: false, vt_code2: "",
}, vt_info_table: [],
},
data: [
{
value: 79.2,
itemStyle: {
normal: {
color: "#91CC75",
},
}, },
}, cct: {
{ mf_info_table: [
value: 100 - 79.2, {
itemStyle: { category: "食品",
normal: { sampling_num: "0",
color: "#E6EBF8", 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: { mounted() {
trigger: "axis", this.listenMessage();
this.init_circle_1();
this.init_circle_2();
this.init_line_1();
this.init_bar_2();
this.init_bar_1();
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, '*');
});
}, },
xAxis: { methods: {
type: "category", listenMessage() {
axisLine: { window.addEventListener('message', this.bindThis.bind(this));
lineStyle: {
color: "#333",
fontSize: 14,
}, },
}, async bindThis(e) {
boundaryGap: false, const query = this.$route.query;
data: ["05.21", "05.22", "05.23", "05.24", "05.25", "05.26", "05.27"], if (query.debug == "true") {
}, return;
yAxis: { }
type: "value", const ret = await messageFun(e);
show: true, // 是否显示 if (ret == false) {
name: "单位(万剂)", // 轴名称 this.$router.push("err");
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",
}, },
}, tabIdx(i) {
axisLabel: { this.epidemic_tabs_idx = i;
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, // 柱形的宽度 init_circle_1() {
barCategoryGap: "10%", // 柱形的间距 this.cChart_1 = this.$echarts.init(document.getElementById("circle_1"));
data: [100, 78, 90, 85, 93, 86, 98, 95, 80, 78], this.cChart_1.setOption({
}, title: {
{ text: ((27673 / 96150) * 100).toFixed(2) + "%",
name: "接种数", // 序列名称 subtext: "疫苗接种完成率",
type: "bar", // 类型 x: "center",
legendHoverLink: true, // 是否启用图列 hover 时的联动高亮 y: "center",
itemStyle: { textStyle: {
// 图形的形状 fontWeight: "600",
color: "#83D7AE", 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, // 柱形的宽度 init_circle_2() {
barCategoryGap: "10%", // 柱形的间距 this.cChart_2 = this.$echarts.init(document.getElementById("circle_2"));
data: [100, 78, 90, 85, 93, 86, 98, 95, 80, 78], this.cChart_2.setOption({
}, color: ["#5470C6", "#91CC75"],
], series: [
}); {
}, type: "pie",
init_bar_2() { hoverAnimation: false,
this.bar_2 = this.$echarts.init(document.getElementById("bar_2")); radius: ["80%", "95%"],
this.bar_2.setOption({ //环的位置
tooltip: { label: {
show: true, // 是否显示提示框，默认为true normal: {
trigger: "item", // 数据项图形触发 position: "inner",
axisPointer: { },
// 指示样式 },
type: "shadow", labelLine: {
axis: "auto", normal: {
}, show: false,
padding: 5, },
textStyle: { },
// 提示框内容的样式 data: [
color: "#666", {
}, value: 30.53, //需要显示的数据
}, itemStyle: {
// ---- gird区域 --- normal: {
// ------ X轴 ------ color: "#5470C6",
xAxis: { },
type: "category", },
axisLine: { },
lineStyle: { {
color: "#666", 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",
},
},
},
],
},
],
});
}, },
}, init_line_1() {
axisLabel: { this.line_1 = this.$echarts.init(document.getElementById("line_1"));
rotate: 30, this.line_1.setOption({
interval: 0, legend: {
}, orient: "horizontal",
show: true, // 是否显示 x: "0%",
data: [ y: "0%",
"莲都", data: ["接种量", "库存量"],
"龙泉", textStyle: {
"青田", fontSize: 16,
"云和", },
"庆元", },
"缙云", grid: {
"遂昌", top: "30%",
"松阳", left: "3%",
"景宁", right: "8%",
"开发区", bottom: "3%",
], containLabel: true,
}, },
// ------ y轴 ---------- tooltip: {
yAxis: { trigger: "axis",
show: true, // 是否显示 },
name: "单位(万剂)", // 轴名称 xAxis: {
type: "value", // 轴类型，默认为 ‘category’ type: "category",
nameTextStyle: { axisLine: {
// 坐标轴名称样式 lineStyle: {
color: "#666", color: "#333",
padding: [5, 0, 0, 5], // 坐标轴名称相对位置 fontSize: 14,
fontSize: 14, },
}, },
}, boundaryGap: false,
// ------- 内容数据 ------- data: ["05.21", "05.22", "05.23", "05.24", "05.25", "05.26", "05.27"],
series: [ },
{ yAxis: {
name: "库存量", // 序列名称 type: "value",
type: "bar", // 类型 show: true, // 是否显示
legendHoverLink: true, // 是否启用图列 hover 时的联动高亮 name: "单位(万剂)", // 轴名称
itemStyle: { nameTextStyle: {
// 图形的形状 // 坐标轴名称样式
color: "#48A1FF", 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, // 柱形的宽度 init_bar_1() {
barCategoryGap: "10%", // 柱形的间距 this.bar_1 = this.$echarts.init(document.getElementById("bar_1"));
data: [100, 78, 90, 85, 93, 86, 98, 95, 80, 78], 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: [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],
},
],
});
},
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> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
.epidemic { .epidemic {
// background: #666; // background: #666;
// width: 1300px; // width: 1300px;
width: calc(100% - 40px); width: calc(100% - 40px);
margin: 0px auto; margin: 0px auto;
padding: 20px padding: 20px
} }
.module-tit{
font-size: 20px; .module-tit {
padding: 16px 0 12px 12px; font-size: 20px;
font-weight: 600; padding: 16px 0 12px 12px;
position: relative; 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;
}
h3 { .module-tit::before {
border-bottom: 1px solid #ddd; content: "";
}
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 {
position: absolute; position: absolute;
top: 50%; left: 0px;
left: 50%; top: 16px;
transform: translate(-50%, -50%); width: 4px;
text-align: center; height: 28px;
white-space: nowrap; background-color: #1492ff;
} }
}
.epidemic-tabs { .unify-item {
margin-bottom: 20px; box-sizing: border-box;
.et-con { padding: 0 20px 12px;
width: 66.667%; background-color: #fff;
margin: 0 auto; border-radius: 4px;
display: flex; margin-bottom: 20px;
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;
}
} }
}
.general-situation { .shadow {
.gs-top { box-shadow: 0 2px 12px 0 #ccc;
display: flex; }
align-items: center;
justify-content: center; 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; color: #1492ff;
margin: 8px 0; margin: 8px 0;
p { text-align: center;
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);
}
} }
.gs-con {
display: flex; .e-pro {
align-items: center; position: relative;
margin: 20px 0;
flex-wrap: wrap; .e-pro-text {
.gs-con-item { position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center; text-align: center;
background-color: #f6f7f8; white-space: nowrap;
height: 210px; }
}
.epidemic-tabs {
margin-bottom: 20px;
.et-con {
width: 66.667%;
margin: 0 auto;
display: flex; display: flex;
flex-direction: column; justify-content: space-between;
justify-content: center;
font-size: 18px; li {
box-sizing: border-box; width: 20%;
padding: 0 4px;
div {
margin: 8px 0;
}
span {
color: #1492ff; 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 { .general-situation {
.vp-con { .gs-top {
display: flex; display: flex;
justify-content: space-between; align-items: center;
align-items: center; justify-content: center;
.vp-text { color: #1492ff;
width: 50%; margin: 8px 0;
}
}
}
.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;
p { p {
margin: 30px 0; margin: 0 8px;
height: 56px; 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; .gs-con {
height: 100px !important; 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 { .vaccination-progress {
h4 { .vp-con {
font-weight: normal;
font-size: 18px;
}
.vt-con {
.vt-top {
margin: 12px 0 0;
}
.vt-ipt {
display: flex; display: flex;
justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 12px;
input { .vp-text {
width: 50%; width: 50%;
} }
} }
.vt-info-table { }
>>> .el-table {
min-height: 300px; .daily-news {
border: 1px solid #ddd; .dn-con {
} display: flex;
>>> .is-leaf { justify-content: space-between;
background-color: #1492ff; align-items: center;
color: #fff;
border-right: 1px solid #fff; .dn-text {
width: 30%;
font-size: 18px;
} }
} }
.vaccinator-info { }
margin: 12px 0;
border-bottom: 1px solid #ddd; .key-groups {
.vaccinator-info-con { .kg-con {
padding: 12px; margin: 40px 0;
color: #333; color: #333;
overflow: hidden;
> div {
text-align: center;
p { p {
margin: 5px 0; margin: 30px 0;
height: 56px;
} }
} }
> > > .el-progress-circle {
width: 100px !important;
height: 100px !important;
}
} }
} }
}
.cold-chain-tracing { .vaccine-traceability {
h4 { h4 {
font-weight: normal; font-weight: normal;
font-size: 18px; font-size: 18px;
padding: 12px 0; }
}
>>> .el-table__header tr, .vt-con {
>>> .el-table__header th { .vt-top {
padding: 0; margin: 12px 0 0;
height: 40px; }
}
>>> .is-leaf { .vt-ipt {
background-color: #1492ff;
color: #fff;
}
.monitoring {
.monitoring-first {
.mf-text {
display: flex; display: flex;
justify-content: space-between; align-items: center;
padding: 0 20px 0 12px; margin-bottom: 12px;
margin: 8px 0;
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 { .cold-chain-tracing {
.re-search { h4 {
display: flex; font-weight: normal;
align-items: center; font-size: 18px;
margin: 12px 0 20px; padding: 12px 0;
input {
margin: 0 8px;
} }
}
.re-step { > > > .el-table__header tr,
.step-title { > > > .el-table__header th {
color: #1492ff; padding: 0;
padding: 8px 0; height: 40px;
border-bottom: 1px dashed #1492ff; }
i {
font-size: 18px; > > > .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; .result {
border-radius: 10px; .re-search {
display: flex;
align-items: center;
margin: 12px 0 20px;
input {
margin: 0 8px;
} }
} }
.step-desc {
margin: 20px 0; .re-step {
color: #333; .step-title {
padding: 0 12px; color: #1492ff;
p { padding: 8px 0;
margin: 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>
</style>
\ No newline at end of file
qingtian_vue/src/views/Xxgl.vue
View file @ dccfdf24
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
</el-table-column> </el-table-column>
<el-table-column prop="allow_id" label="执业许可证号"> <el-table-column prop="allow_id" label="执业许可证号">
</el-table-column> </el-table-column>
<el-table-column prop="address" label="机构地址"> </el-table-column> <el-table-column prop="address" label="机构地址"></el-table-column>
</el-table> </el-table>
<div style="width: 400px"> <div style="width: 400px">
<div id="main1" style="max-width: 100%; height: 400px"></div> <div id="main1" style="max-width: 100%; height: 400px"></div>
...@@ -67,34 +67,34 @@ ...@@ -67,34 +67,34 @@
</el-table-column> </el-table-column>
<el-table-column prop="name" label="行政划分" width="80"> <el-table-column prop="name" label="行政划分" width="80">
</el-table-column> </el-table-column>
<el-table-column prop="fzs" 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="yxzs" label="有效数"></el-table-column>
<el-table-column prop="spscjy" label="食品生产经营"> <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 prop="spscjy2" label="有效证数">
</el-table-column> </el-table-column>
</el-table-column> </el-table-column>
<el-table-column prop="ggcsfw" label="公共场所服务"> <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 prop="ggcsfw2" label="有效证数">
</el-table-column> </el-table-column>
</el-table-column> </el-table-column>
<el-table-column prop="shyys" label="生活饮用水"> <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 prop="shyys2" label="有效证数">
</el-table-column> </el-table-column>
</el-table-column> </el-table-column>
<el-table-column prop="jzry" label="家政人员"> <el-table-column prop="jzry" label="家政人员">
<el-table-column prop="jzry1" 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 prop="jzry2" label="有效证数"></el-table-column>
</el-table-column> </el-table-column>
<el-table-column prop="hzpsc" label="化妆品生产"> <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 prop="hzpsc2" label="有效证数">
</el-table-column> </el-table-column>
</el-table-column> </el-table-column>
<el-table-column prop="xdpsc" label="消毒产品生产"> <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 prop="xdpsc2" label="有效证数">
</el-table-column> </el-table-column>
</el-table-column> </el-table-column>
...@@ -105,25 +105,25 @@ ...@@ -105,25 +105,25 @@
</el-table-column> </el-table-column>
</el-table-column> </el-table-column>
<el-table-column prop="ypsc" label="药品生产"> <el-table-column prop="ypsc" label="药品生产">
<el-table-column prop="ypsc1" 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 prop="ypsc2" label="有效证数"></el-table-column>
</el-table-column> </el-table-column>
<el-table-column prop="ylqxsc" label="医疗器械生产"> <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 prop="ylqxsc2" label="有效证数">
</el-table-column> </el-table-column>
</el-table-column> </el-table-column>
<el-table-column prop="spggcs" label="食品/公共场所"> <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 prop="spggcs2" label="有效证数">
</el-table-column> </el-table-column>
</el-table-column> </el-table-column>
<el-table-column prop="qt" label="其他"> <el-table-column prop="qt" label="其他">
<el-table-column prop="qt1" 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 prop="qt2" label="有效证数"></el-table-column>
</el-table-column> </el-table-column>
<el-table-column prop="tyjgby" label="托幼机构保育"> <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 prop="tyjgby2" label="有效证数">
</el-table-column> </el-table-column>
</el-table-column> </el-table-column>
...@@ -135,355 +135,375 @@ ...@@ -135,355 +135,375 @@
</template> </template>
<script> <script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等） //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》'; //例如：import 《组件名称》 from '《组件路径》';
import { tableData, tableInfo } from "@/assets/js/data.js"; import {tableData, tableInfo} from "@/assets/js/data.js";
import Breadcrumb from "../components/Breadcrumb.vue"; import Breadcrumb from "../components/Breadcrumb.vue";
import geoJson from '@/assets/json/qingtian.json' import geoJson from '@/assets/json/qingtian.json'
let one, two; import {messageFun} from '../util/jianquan'
export default {
//import引入的组件需要注入到对象中才能使用 let one, two;
components: { export default {
Breadcrumb //import引入的组件需要注入到对象中才能使用
}, components: {
data() { Breadcrumb
//这里存放数据
return {
breadData: {
page_name: "电子健康证明",
annual_target:
"暂无数据",
leading: "县疫情防控办 县卫生健康局",
},
tableData: tableData,
tableInfo: tableInfo,
};
},
mounted() {
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.onresize = () => {
// return (() => {
// _this.initChart1();
// _this.initChart2();
// })();
// };
},
methods: {
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()
})
},
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() {
data: ["体检人数", "食品生产经营", "公共场所服务", "生活饮用水"], //这里存放数据
return {
breadData: {
page_name: "电子健康证明",
annual_target:
"暂无数据",
leading: "县疫情防控办 县卫生健康局",
},
tableData: tableData,
tableInfo: tableInfo,
};
}, },
grid: { mounted() {
left: "3%", this.listenMessage();
right: "4%", let _this = this;
bottom: "5%", this.initChart1();
containLabel: true, this.initChart2();
window.parent.postMessage(document.body.scrollHeight, '*');
window.addEventListener("resize", function (e) {
window.parent.postMessage(document.body.scrollHeight, '*');
});
// window.onresize = () => {
// return (() => {
// _this.initChart1();
// _this.initChart2();
// })();
// };
}, },
xAxis: [ methods: {
{ listenMessage() {
type: "category", window.addEventListener('message', this.bindThis.bind(this));
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], async bindThis(e) {
}, const query = this.$route.query;
{ if (query.debug == "true") {
name: "食品生产经营", return;
type: "bar", }
stack: "职业", const ret = await messageFun(e);
emphasis: { if (ret == false) {
focus: "series", this.$router.push("err");
}
}, },
data: [259, 186, 360, 797, 493, 628, 252, 449, 1807, 457], initChart1() {
}, if (one != null && one != "" && one != undefined) {
{ one.dispose(); //销毁
name: "公共场所服务", }
type: "bar", one = this.$echarts.init(document.getElementById("main1"));
stack: "职业", this.$echarts.registerMap("青田县", geoJson, {});
emphasis: { var geoCoordMap = {
focus: "series", 青田万康口腔诊所: [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], initChart2() {
}, if (two != null && two != "" && two != undefined) {
{ two.dispose(); //销毁
name: "生活饮用水", }
type: "bar", two = this.$echarts.init(document.getElementById("main2"));
stack: "职业", two.setOption({
emphasis: { tooltip: {
focus: "series", 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
#app { #app {
background: #fff !important; background: #fff !important;
} }
@media screen and (max-width: 1200px) { @media screen and (max-width: 1200px) {
.main { .main {
width: 100%; width: 100%;
margin: 0px auto; margin: 0px auto;
padding: 30px 0; 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;
}
}
@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;
}
} }
.minHeader,
.market { .card__header {
width: calc(100% - 40px); padding: 18px 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
border-radius: 4px;
padding: 20px;
margin: 0px auto 0;
background: #fff;
} }
.minTop {
width: calc(100% - 40px); .card__headers {
padding: 18px 0px 5px;
-webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
border-radius: 4px;
margin: 20px auto;
background: #fff;
} }
}
@media screen and (min-width: 1200px) { .shadow {
.main { box-shadow: 0 2px 12px 0 #ccc;
width: 1200px;
margin: 0px auto;
padding: 30px 0;
} }
.minHeader,
.market { .w100 {
width: 1200px; width: 100%;
border-radius: 4px;
// padding: 0px 20px 0px;
background: #fff;
} }
.minTop {
width: 1200px; .w60 {
border-radius: 4px; width: 60%;
background: #fff;
} }
}
.card__header { .w40 {
padding: 18px 20px; width: 40%;
-webkit-box-sizing: border-box; }
box-sizing: border-box;
}
.card__headers { .cline {
padding: 18px 0px 5px; width: 2px;
-webkit-box-sizing: border-box; height: 18px;
box-sizing: border-box; background: #1492ff;
} margin: 0 8px;
}
.shadow { .icon28 {
box-shadow: 0 2px 12px 0 #ccc; width: 28px;
} height: 28px;
}
</style>
<style>
.tijg .el-table td,
.tijg .el-table th {
text-align: center !important;
}
.w100 { .tijg .el-table__header thead tr th {
width: 100%; color: #606266;
} background: #ebeff8;
}
.w60 { .xxgl .el-breadcrumb__inner.is-link {
width: 60%; font-size: 16px !important;
} font-weight: bold;
color: #333;
}
.w40 { .xxgl .el-icon-s-marketing {
width: 40%; color: rgb(54, 153, 247);
} font-size: 30px;
.cline { }
width: 2px;
height: 18px;
background: #1492ff;
margin: 0 8px;
}
.icon28 {
width: 28px;
height: 28px;
}
</style> </style>
<style>
.tijg .el-table td,
.tijg .el-table th {
text-align: center !important;
}
.tijg .el-table__header thead tr th {
color: #606266;
background: #ebeff8;
}
.xxgl .el-breadcrumb__inner.is-link {
font-size: 16px !important;
font-weight: bold;
color: #333;
}
.xxgl .el-icon-s-marketing {
color: rgb(54, 153, 247);
font-size: 30px;
}
</style>
\ No newline at end of file
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