Skip to content

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

0816

parent 078d3908
Hide whitespace changes
Inline Side-by-side
Showing with 3901 additions and 950 deletions
jingning_mobile/src/assets/css/common.scss
View file @ d45c7cf3
...@@ -100,6 +100,9 @@ ul,li { ...@@ -100,6 +100,9 @@ ul,li {
.cf { .cf {
color: #fff; color: #fff;
} }
.bgf {
background: #fff;
}
.bgf78 { .bgf78 {
background: #f7f8fa; background: #f7f8fa;
} }
......
jingning_mobile/src/router/index.js
View file @ d45c7cf3
...@@ -87,6 +87,12 @@ const routes = [ ...@@ -87,6 +87,12 @@ const routes = [
meta: { title: '生态文明' }, meta: { title: '生态文明' },
component: Hjzz component: Hjzz
}, },
{
path: '/jfjb',
name: 'Jfjb',
meta: { title: '减负降本' },
component: () => import('@/views/Jfjb')
}
] ]
const router = new VueRouter({ const router = new VueRouter({
......
jingning_mobile/src/views/Jfjb.vue 0 → 100644
View file @ d45c7cf3
<!-- -->
<template>
<div class="main">
<div class="jfjb">
<el-row :gutter="20">
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="">
<div class="bgf bradius4 p12">
<div class="flex acenter between">
<div class="fs22 b c3">本年减负降本概览</div>
<div class="flex acenter">
<div class="c149">查看详情</div>
<i class="el-icon-arrow-right c149"></i>
</div>
</div>
<div class="mt30 mb15">
<el-row class="flex acenter jcenter" :gutter="5">
<el-col :xs="24" :sm="14" :md="14" :lg="14" :xl="12">
<div>
<div
v-for="(item, index) in allList"
:key="index"
class="mt20"
>
<div>
<span class="b">·</span>
<span>{{ item.title }}</span>
</div>
<div class="flex acenter mt8">
<span class="c149 fs22 ml12 mr5">{{ item.num }}</span>
<span>{{ item.dan }}</span>
</div>
</div>
</div>
</el-col>
<el-col :xs="24" :sm="10" :md="10" :lg="10" :xl="12">
<div class="proges">
<el-progress
type="circle"
:percentage="57.9"
:stroke-width="Number(12)"
:width="Number(140)"
color="#1492ff"
:show-text="false"
></el-progress>
<div class="flex acenter column protit">
<div class="c149">
<span class="fs22 b">57.9</span>
<span class="b">%</span>
</div>
<div class="fs12 c3">任务完成进度</div>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="mt20">
<div class="bgf bradius4 p12">
<div class="flex acenter between">
<div class="fs22 b c3">本年减负降本趋势</div>
<div class="flex acenter">
<div class="c6">单位: 亿元</div>
</div>
</div>
<div>
<div class="mt12">
<div id="main1" style="max-width: 100%; height: 345px"></div>
</div>
</div>
</div>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="mt20">
<div class="bgf bradius4 p12">
<div class="flex acenter between">
<div class="fs22 b c3">本年减负降本额构成</div>
<div class="flex acenter">
<div class="c6">单位: 亿元</div>
</div>
</div>
<div>
<div class="mt12">
<div id="main2" style="max-width: 100%; height: 345px"></div>
</div>
</div>
</div>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="mt20">
<div class="bgf bradius4 p12">
<div class="flex acenter between">
<div class="fs22 b c3">地市减负降本情况</div>
<div class="flex acenter">
<div class="c6">单位: 亿元</div>
</div>
</div>
<div>
<div class="mt12">
<div id="main3" style="max-width: 100%; height: 345px"></div>
</div>
</div>
</div>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="mt20">
<div class="bgf bradius4 p12">
<div class="flex acenter between">
<div class="fs22 b c3">行业减负降本TOP10</div>
<div class="flex acenter">
<div class="c6">单位: 亿元</div>
</div>
</div>
<div>
<div class="mt12">
<div id="main4" style="max-width: 100%; height: 345px"></div>
</div>
</div>
</div>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="mt20">
<div class="bgf bradius4 p12">
<div class="flex acenter between">
<div class="fs22 b c3">部门减负降本情况</div>
<div class="flex acenter">
<div class="c6">单位: 亿元</div>
</div>
</div>
<div>
<div class="mt12">
<div id="main5" style="max-width: 100%; height: 345px"></div>
</div>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
allList: [
{
title: "全年减负降本目标",
num: 2.71,
dan: "亿元",
},
{
title: "减负降本政策",
num: 24,
dan: "条",
},
{
title: "本年累计减负降本额",
num: 1.57,
dan: "亿元",
},
{
title: "惠及企业数量",
num: 42003,
dan: "家次",
},
],
};
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
this.initCharts1();
this.initCharts2();
this.initCharts3();
this.initCharts4();
this.initCharts5();
},
//方法集合
methods: {
initCharts1() {
var chartDom = document.getElementById("main1");
var myChart1 = this.$echarts.init(chartDom);
var option;
option = {
color: ["#5B8FF9", "#FE9D41"],
legend: {
data: ["累计减负降本额", "当月减负降本额"],
},
xAxis: {
type: "category",
data: [
"2021-01",
"2021-02",
"2021-03",
"2021-04",
"2021-05",
"2021-06",
],
axisLabel: {
textStyle: {
color: "#333",
fontSize: 14,
},
rotate: -30,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
yAxis: {
type: "value",
min: 0,
max: 1.8,
splitNumber: 6,
axisTick: {
show: true,
},
},
grid: {
top: "15%",
left: "3%",
right: "8%",
bottom: "0%",
containLabel: true,
},
series: [
{
name: "累计减负降本额",
data: [0.33, 0.42, 0.9, 1.07, 1.39, 1.57],
type: "bar",
label: {
// 在图形上显示每个数据
show: true,
position: "top",
},
},
{
name: "当月减负降本额",
data: [0.33, 0.1, 0.45, 0.15, 0.3, 0.2],
type: "line",
smooth: true,
showSymbol: false,
},
],
};
option && myChart1.setOption(option);
window.addEventListener("resize", () => {
myChart1.resize();
});
},
initCharts2() {
var chartDom = document.getElementById("main2");
var myChart2 = this.$echarts.init(chartDom);
var option;
option = {
color: [
"#5B8FF9",
"#5AD8A6",
"#5D7092",
"#F6BD16",
"#E8684A",
"#6DC8EC",
"#9270CA",
],
tooltip: {
trigger: "item",
},
grid: {
top: "0%",
left: "3%",
right: "5%",
bottom: "0%",
},
legend: {
orient: "horizontal",
bottom: "0",
icon: "circle",
},
series: [
{
name: "访问来源",
type: "pie",
radius: "50%",
data: [
{ value: 0.65, name: "减免税收" },
{ value: 0.3, name: "减免政府性基金" },
{ value: 0.08, name: "降用工成本" },
{ value: 0.3, name: "降用能成本" },
{ value: 0.0, name: "降物流成本" },
{ value: 0.24, name: "降融资成本" },
{ value: 0.0, name: "降其他成本" },
],
label: {
normal: {
show: true,
position: "inner", //显示在扇形上
formatter: "{c}", //显示内容
textStyle: {
color: "white", // 改变标示文字的颜色
fontSize: 14, //文字大小
},
},
},
},
],
};
option && myChart2.setOption(option);
window.addEventListener("resize", () => {
myChart2.resize();
});
},
initCharts3() {
var chartDom = document.getElementById("main3");
var myChart3 = this.$echarts.init(chartDom);
var option;
option = {
color: ["#5B8FF9", "#FE9D41"],
xAxis: {
type: "category",
data: ["青田县"],
axisLabel: {
textStyle: {
color: "#666",
fontSize: 12,
},
rotate: -30,
},
axisLine: {
show: true,
},
axisTick: {
show: false,
},
},
yAxis: {
type: "value",
min: 0,
max: 1.8,
splitNumber: 6,
},
grid: {
top: "15%",
left: "3%",
right: "5%",
bottom: "0%",
containLabel: true,
},
series: [
{
name: "累计减负降本额",
data: [1.57],
type: "bar",
label: {
// 在图形上显示每个数据
show: true,
position: "top",
color: "#666",
fontSize: 16,
},
},
],
};
option && myChart3.setOption(option);
window.addEventListener("resize", () => {
myChart3.resize();
});
},
initCharts4() {
var chartDom = document.getElementById("main4");
var myChart4 = this.$echarts.init(chartDom);
var option;
option = {
color: ["#73A0FA"],
xAxis: {
max: 0.6,
axisLine: {
show: true,
lineStyle: {
width: 2,
},
},
axisTick: {
show: true,
},
axisLabel: {
show: false,
},
},
yAxis: {
type: "category",
data: [
"制造业",
"房地产业",
"批发和零售业",
"建筑业",
"教育",
"金融业",
"电力,热力.燃气...",
"租赁和商务服务业",
"科学研究和技术服务...",
"采矿业",
],
inverse: true,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
color: "#333",
width: 100,
overflow: 'truncate'
},
},
grid: {
top: "10%",
left: "-6%",
right: "8%",
bottom: "5%",
containLabel: true,
},
series: [
{
name: "X",
type: "bar",
data: [0.58, 0.26, 0.21, 0.08, 0.07, 0.07, 0.05, 0.03, 0.03, 0.02],
label: {
show: true,
position: "right",
fontSize: 14,
color: "#666",
},
},
],
};
option && myChart4.setOption(option);
window.addEventListener("resize", () => {
myChart4.resize();
});
},
initCharts5() {
var chartDom = document.getElementById("main5");
var myChart5 = this.$echarts.init(chartDom);
var option;
option = {
color: ["#6DC8EC"],
xAxis: {
type: "category",
data: [
"税务",
"发改",
"人行",
"财政",
"建设",
"人设",
"能源",
"通信管理",
"银监",
"市场监管",
"交通"
],
axisLabel: {
textStyle: {
color: "#666",
fontSize: 12,
},
rotate: -30,
interval: -1
},
axisLine: {
show: true,
lineStyle: {
width: 1,
},
},
axisTick: {
show: false,
},
},
yAxis: {
type: "value",
min: 0,
max: 0.7,
splitNumber: 7
},
grid: {
top: "15%",
left: "0%",
right: "5%",
bottom: "0%",
containLabel: true,
},
series: [
{
name: "部门减负降本额",
data: [0.65, 0.25, 0.24, 0.18, 0.12, 0.08, 0.05, 0.00, 0.00, 0.00, 0.00],
type: "bar",
label: {
// 在图形上显示每个数据
show: true,
position: "top",
color: '#666'
},
}
],
};
option && myChart5.setOption(option);
window.addEventListener("resize", () => {
myChart5.resize();
});
},
},
};
</script>
<style lang="scss" scoped>
html,
body {
background-color: #f2f3f5;
}
@media screen and (max-width: 1400px) {
.main {
width: 100%;
margin: 0px auto;
// padding: 20px;
}
.jfjb {
width: calc(100% - 20px);
padding: 10px;
background: #f2f3f5;
}
}
@media screen and (min-width: 1400px) {
.main {
width: 1400px;
margin: 0px auto;
padding: 10px;
}
.jfjb {
width: calc(100% - 20px);
// padding: 20px;
}
}
.mr5 {
margin-right: 5px;
}
.mt8 {
margin-top: 8px;
}
.mb15 {
margin-bottom: 15px;
}
.proges {
position: relative;
width: 150px;
height: 150px;
}
.protit {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
\ No newline at end of file
jingning_mobile/src/views/Live.vue
View file @ d45c7cf3
...@@ -701,10 +701,10 @@ export default { ...@@ -701,10 +701,10 @@ export default {
width: 49% !important; width: 49% !important;
} }
} */ } */
.el-progress { .quota-progress .el-progress {
width: 80% !important; width: 80% !important;
} }
.el-progress__text { .quota-progress .el-progress__text {
color: #1492ff; color: #1492ff;
} }
</style> </style>
jingning_mobile/src/views/MyIndex.vue
View file @ d45c7cf3
...@@ -40,6 +40,10 @@ ...@@ -40,6 +40,10 @@
<li> <li>
生态文明-子门户&nbsp;&nbsp;&nbsp;&nbsp;<router-link tag="span" @click.native="handle('/stwm','stwm')" to="#" class="link">点击跳转</router-link> 生态文明-子门户&nbsp;&nbsp;&nbsp;&nbsp;<router-link tag="span" @click.native="handle('/stwm','stwm')" to="#" class="link">点击跳转</router-link>
</li> </li>
<li>
减负降本-子门户&nbsp;&nbsp;&nbsp;&nbsp;<router-link tag="span" @click.native="handle('/jfjb','jfjb')" to="#" class="link">点击跳转</router-link>
</li>
</ul> </ul>
</div> </div>
</template> </template>
......
jingning_mobile/src/views/yshj.vue
View file @ d45c7cf3
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
</div> </div>
</div> </div>
<div class="mt20 getgov"> <div class="mt20 getgov">
<el-tabs type="border-card" class="minTop"> <el-tabs type="border-card" class="minTop" @tab-click="handleClick1">
<el-tab-pane label="政府工作报告任务落实"> <el-tab-pane label="政府工作报告任务落实">
<div class="gavo flex column acenter"> <div class="gavo flex column acenter">
<p class="mb12">截止四月底前完成进度</p> <p class="mb12">截止四月底前完成进度</p>
...@@ -54,8 +54,176 @@ ...@@ -54,8 +54,176 @@
</div> </div>
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="民营经济发展监测">民营经济发展监测</el-tab-pane> <el-tab-pane label="减负降本">
<el-tab-pane label="无感检测">无感检测</el-tab-pane> <el-row :gutter="0">
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="">
<div class="bgf bradius4 p12 bords">
<div class="flex acenter between">
<div class="fs22 b c3">本年减负降本概览</div>
<div class="flex acenter">
<div class="c149">查看详情</div>
<i class="el-icon-arrow-right c149"></i>
</div>
</div>
<div class="mt30 mb15">
<el-row class="flex acenter between" :gutter="5">
<el-col :xs="14" :sm="16" :md="14" :lg="14" :xl="12">
<div>
<div
v-for="(item, index) in allList"
:key="index"
class="mt20"
>
<div>
<span class="b">·</span>
<span>{{ item.title }}</span>
</div>
<div class="flex acenter mt8">
<span class="c149 fs22 ml12 mr5">{{
item.num
}}</span>
<span>{{ item.dan }}</span>
</div>
</div>
</div>
</el-col>
<el-col :xs="10" :sm="8" :md="10" :lg="10" :xl="12">
<div class="proges">
<el-progress
type="circle"
:percentage="57.9"
:stroke-width="Number(12)"
:width="Number(120)"
color="#1492ff"
:show-text="false"
></el-progress>
<div class="flex acenter column protit">
<div class="c149">
<span class="fs20 b">57.9</span>
<span class="b">%</span>
</div>
<div class="fs12 c3">任务完成进度</div>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="mt20">
<div class="bgf bradius4 p12 bords">
<div class="flex acenter between">
<div class="fs22 b c3">本年减负降本趋势</div>
<div class="flex acenter">
<div class="c6">单位: 亿元</div>
</div>
</div>
<div>
<div class="mt12">
<div
id="main6"
style="max-width: 100%; height: 345px"
></div>
</div>
</div>
</div>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="mt20">
<div class="bgf bradius4 p12 bords">
<div class="flex acenter between">
<div class="fs22 b c3">本年减负降本额构成</div>
<div class="flex acenter">
<div class="c6">单位: 亿元</div>
</div>
</div>
<div>
<div class="mt12">
<div
id="main7"
style="max-width: 100%; height: 345px"
></div>
</div>
</div>
</div>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="mt20">
<div class="bgf bradius4 p12 bords">
<div class="flex acenter between">
<div class="fs22 b c3">地市减负降本情况</div>
<div class="flex acenter">
<div class="c6">单位: 亿元</div>
</div>
</div>
<div>
<div class="mt12">
<div
id="main8"
style="max-width: 100%; height: 345px"
></div>
</div>
</div>
</div>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="mt20">
<div class="bgf bradius4 p12 bords">
<div class="flex acenter between">
<div class="fs22 b c3">行业减负降本TOP10</div>
<div class="flex acenter">
<div class="c6">单位: 亿元</div>
</div>
</div>
<div>
<div class="mt12">
<div
id="main9"
style="max-width: 100%; height: 345px"
></div>
</div>
</div>
</div>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="mt20">
<div class="bgf bradius4 p12 bords">
<div class="flex acenter between">
<div class="fs22 b c3">部门减负降本情况</div>
<div class="flex acenter">
<div class="c6">单位: 亿元</div>
</div>
</div>
<div>
<div class="mt12">
<div
id="main10"
style="max-width: 100%; height: 345px"
></div>
</div>
</div>
</div>
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label="民营经济发展监测" disabled>
<el-tooltip
class="item-tabs"
effect="light"
placement="top"
slot="label"
>                
<div slot="content"> 建设中</div>
<span>民营经济发展监测</span>
</el-tooltip>
</el-tab-pane>
<el-tab-pane label="无感检测" disabled>
<el-tooltip
class="item-tabs"
effect="light"
placement="top"
slot="label"
>                
<div slot="content"> 建设中</div>
<span>无感检测</span>
</el-tooltip>
</el-tab-pane>
</el-tabs> </el-tabs>
<!-- <p class="govtig fs14">营商环境市场活力综合应用定义</p> --> <!-- <p class="govtig fs14">营商环境市场活力综合应用定义</p> -->
</div> </div>
...@@ -468,7 +636,30 @@ export default { ...@@ -468,7 +636,30 @@ export default {
components: {}, components: {},
data() { data() {
//这里存放数据 //这里存放数据
return {}; return {
allList: [
{
title: "全年减负降本目标",
num: 2.71,
dan: "亿元",
},
{
title: "减负降本政策",
num: 24,
dan: "条",
},
{
title: "本年累计减负降本额",
num: 1.57,
dan: "亿元",
},
{
title: "惠及企业数量",
num: 42003,
dan: "家次",
},
],
};
}, },
mounted() { mounted() {
this.initCharts1(); this.initCharts1();
...@@ -479,6 +670,15 @@ export default { ...@@ -479,6 +670,15 @@ export default {
}, },
//方法集合 //方法集合
methods: { methods: {
handleClick1(tab, event) {
this.$nextTick(function () {
this.initCharts6();
this.initCharts7();
this.initCharts8();
this.initCharts9();
this.initCharts10();
});
},
initCharts1() { initCharts1() {
var chartDom = document.getElementById("main1"); var chartDom = document.getElementById("main1");
var myChart1 = this.$echarts.init(chartDom); var myChart1 = this.$echarts.init(chartDom);
...@@ -822,6 +1022,354 @@ export default { ...@@ -822,6 +1022,354 @@ export default {
// 使用刚指定的配置项和数据显示图表。 // 使用刚指定的配置项和数据显示图表。
option && myChart5.setOption(option); option && myChart5.setOption(option);
}, },
initCharts6() {
var chartDom = document.getElementById("main6");
var myChart6 = this.$echarts.init(chartDom);
var option;
option = {
color: ["#5B8FF9", "#FE9D41"],
legend: {
data: ["累计减负降本额", "当月减负降本额"],
},
xAxis: {
type: "category",
data: [
"2021-01",
"2021-02",
"2021-03",
"2021-04",
"2021-05",
"2021-06",
],
axisLabel: {
textStyle: {
color: "#333",
fontSize: 14,
},
rotate: -30,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
yAxis: {
type: "value",
min: 0,
max: 1.8,
splitNumber: 6,
axisTick: {
show: true,
},
},
grid: {
top: "15%",
left: "3%",
right: "10%",
bottom: "0%",
containLabel: true,
},
series: [
{
name: "累计减负降本额",
data: [0.33, 0.42, 0.9, 1.07, 1.39, 1.57],
type: "bar",
label: {
// 在图形上显示每个数据
show: true,
position: "top",
},
},
{
name: "当月减负降本额",
data: [0.33, 0.1, 0.45, 0.15, 0.3, 0.2],
type: "line",
smooth: true,
showSymbol: false,
},
],
};
option && myChart6.setOption(option);
window.addEventListener("resize", () => {
myChart6.resize();
});
},
initCharts7() {
var chartDom = document.getElementById("main7");
var myChart2 = this.$echarts.init(chartDom);
var option;
option = {
color: [
"#5B8FF9",
"#5AD8A6",
"#5D7092",
"#F6BD16",
"#E8684A",
"#6DC8EC",
"#9270CA",
],
tooltip: {
trigger: "item",
},
grid: {
top: "0%",
left: "3%",
right: "7%",
bottom: "0%",
},
legend: {
orient: "horizontal",
bottom: "0",
icon: "circle",
},
series: [
{
name: "访问来源",
type: "pie",
radius: "50%",
data: [
{ value: 0.65, name: "减免税收" },
{ value: 0.3, name: "减免政府性基金" },
{ value: 0.08, name: "降用工成本" },
{ value: 0.3, name: "降用能成本" },
{ value: 0.0, name: "降物流成本" },
{ value: 0.24, name: "降融资成本" },
{ value: 0.0, name: "降其他成本" },
],
label: {
normal: {
show: true,
position: "inner", //显示在扇形上
formatter: "{c}", //显示内容
textStyle: {
color: "white", // 改变标示文字的颜色
fontSize: 14, //文字大小
},
},
},
},
],
};
option && myChart2.setOption(option);
window.addEventListener("resize", () => {
myChart2.resize();
});
},
initCharts8() {
var chartDom = document.getElementById("main8");
var myChart3 = this.$echarts.init(chartDom);
var option;
option = {
color: ["#5B8FF9", "#FE9D41"],
xAxis: {
type: "category",
data: ["青田县"],
axisLabel: {
textStyle: {
color: "#666",
fontSize: 12,
},
rotate: -30,
},
axisLine: {
show: true,
},
axisTick: {
show: false,
},
},
yAxis: {
type: "value",
min: 0,
max: 1.8,
splitNumber: 6,
},
grid: {
top: "15%",
left: "3%",
right: "5%",
bottom: "0%",
containLabel: true,
},
series: [
{
name: "累计减负降本额",
data: [1.57],
type: "bar",
label: {
// 在图形上显示每个数据
show: true,
position: "top",
color: "#666",
fontSize: 16,
},
},
],
};
option && myChart3.setOption(option);
window.addEventListener("resize", () => {
myChart3.resize();
});
},
initCharts9() {
var chartDom = document.getElementById("main9");
var myChart4 = this.$echarts.init(chartDom);
var option;
option = {
color: ["#73A0FA"],
xAxis: {
max: 0.6,
axisLine: {
show: true,
lineStyle: {
width: 2,
},
},
axisTick: {
show: true,
},
axisLabel: {
show: false,
},
},
yAxis: {
type: "category",
data: [
"制造业",
"房地产业",
"批发和零售业",
"建筑业",
"教育",
"金融业",
"电力,热力.燃气...",
"租赁和商务服务业",
"科学研究和技术服务...",
"采矿业",
],
inverse: true,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
color: "#333",
width: 100,
overflow: "truncate",
},
},
grid: {
top: "10%",
left: "-6%",
right: "9%",
bottom: "5%",
containLabel: true,
},
series: [
{
name: "X",
type: "bar",
data: [0.58, 0.26, 0.21, 0.08, 0.07, 0.07, 0.05, 0.03, 0.03, 0.02],
label: {
show: true,
position: "right",
fontSize: 14,
color: "#666",
},
},
],
};
option && myChart4.setOption(option);
window.addEventListener("resize", () => {
myChart4.resize();
});
},
initCharts10() {
var chartDom = document.getElementById("main10");
var myChart5 = this.$echarts.init(chartDom);
var option;
option = {
color: ["#6DC8EC"],
xAxis: {
type: "category",
data: [
"税务",
"发改",
"人行",
"财政",
"建设",
"人设",
"能源",
"通信管理",
"银监",
"市场监管",
"交通",
],
axisLabel: {
textStyle: {
color: "#666",
fontSize: 12,
},
rotate: -30,
interval: -1,
},
axisLine: {
show: true,
lineStyle: {
width: 1,
},
},
axisTick: {
show: false,
},
},
yAxis: {
type: "value",
min: 0,
max: 0.7,
splitNumber: 7,
},
grid: {
top: "15%",
left: "0%",
right: "3%",
bottom: "0%",
containLabel: true,
},
series: [
{
name: "部门减负降本额",
data: [
0.65, 0.25, 0.24, 0.18, 0.12, 0.08, 0.05, 0.0, 0.0, 0.0, 0.0,
],
type: "bar",
label: {
// 在图形上显示每个数据
show: true,
position: "top",
color: "#666",
},
},
],
};
option && myChart5.setOption(option);
window.addEventListener("resize", () => {
myChart5.resize();
});
},
}, },
}; };
</script> </script>
...@@ -1047,6 +1595,27 @@ export default { ...@@ -1047,6 +1595,27 @@ export default {
box-sizing: border-box; box-sizing: border-box;
padding-right: 20px; padding-right: 20px;
} }
.mr5 {
margin-right: 5px;
}
.mt8 {
margin-top: 8px;
}
.mb15 {
margin-bottom: 15px;
}
.proges {
position: relative;
width: 120px;
height: 120px;
}
.protit {
width: 75px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style> </style>
<style> <style>
.el-icon-d-arrow-right:before { .el-icon-d-arrow-right:before {
......
qingtian_mobile/src/components/Breadcrumb.vue
View file @ d45c7cf3
...@@ -6,8 +6,12 @@ ...@@ -6,8 +6,12 @@
v-if="$route.path != '/index'" v-if="$route.path != '/index'"
separator-class="el-icon-arrow-right" separator-class="el-icon-arrow-right"
> >
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> <el-breadcrumb-item
<el-breadcrumb-item>{{ breadData.page_name }}</el-breadcrumb-item> ><a href="https://szzf.qingtian.gov.cn:18080"
>首页</a
></el-breadcrumb-item
>
<el-breadcrumb-item class="fs18">{{ breadData.page_name }}</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
<div class="mt12"> <div class="mt12">
<i class="el-icon-office-building mr12"></i> <i class="el-icon-office-building mr12"></i>
...@@ -15,9 +19,12 @@ ...@@ -15,9 +19,12 @@
</div> </div>
</div> </div>
<div class="breadcrumb-text"> <div class="breadcrumb-text">
<div class="breadcrumb-title"> <div class="breadcrumb-title flex acenter">
<img src="../assets/images/target.png" alt="" /> <div class="flex title shrink acenter">
<span>年度目标 | </span> <img src="../assets/images/target.png" class="icon24 shrink" />
<span>年度目标 | </span>
</div>
{{ breadData.annual_target }} {{ breadData.annual_target }}
</div> </div>
</div> </div>
...@@ -29,9 +36,9 @@ export default { ...@@ -29,9 +36,9 @@ export default {
name: "breadcrumb", name: "breadcrumb",
props: { props: {
breadData: { breadData: {
type: Object type: Object,
}, },
} },
}; };
</script> </script>
...@@ -48,21 +55,23 @@ export default { ...@@ -48,21 +55,23 @@ export default {
} }
>>> .el-breadcrumb__inner { >>> .el-breadcrumb__inner {
color: #333; color: #333;
font-weight: normal; font-weight: bold;
} }
.breadcrumb-title { .breadcrumb-title {
margin-top: 12px; margin-top: 12px;
display: flex; // display: flex;
align-items: center; // align-items: center;
span{ .title {
color: #1492ff; span {
margin-right: 8px; color: #1492ff;
font-size: 18px; margin-right: 8px;
font-size: 16px;
}
} }
} }
.breadcrumb-title img { .breadcrumb-title img {
width: 28px; width: 28px;
height: auto; height: 28px;
} }
.breadcrumb-title h2 { .breadcrumb-title h2 {
font-weight: 600; font-weight: 600;
...@@ -70,4 +79,11 @@ export default { ...@@ -70,4 +79,11 @@ export default {
margin-right: 20px; margin-right: 20px;
} }
} }
.icon24 {
width: 24px;
height: 24px;
}
.shrink {
flex-shrink: 0;
}
</style> </style>
\ No newline at end of file
qingtian_mobile/src/router/index.js
View file @ d45c7cf3
...@@ -13,91 +13,123 @@ import Qyxtfz from '../views/Region.vue' ...@@ -13,91 +13,123 @@ import Qyxtfz from '../views/Region.vue'
import Hjzz from '../views/Ecology.vue' import Hjzz from '../views/Ecology.vue'
import Ctfy from '../views/Epidemic.vue' import Ctfy from '../views/Epidemic.vue'
import Xxgl from '../views/Xxgl.vue' import Xxgl from '../views/Xxgl.vue'
import Szsy from '../views/Szsy.vue'
import Err from '../views/err.vue'
Vue.use(VueRouter) Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'MyIndex',
meta: { title: '青田数字子门户' },
component: MyIndex
},
{
path: '/aqsc',
name: 'Aqsc',
meta: { title: '安全生产' },
component: Aqsc
},
{
path: '/yshj',
name: 'Yshj',
meta: { title: '营商环境' },
component: Yshj
},
{
path: '/xczx',
name: 'Xczx',
meta: { title: '乡村振兴' },
component: Xczx
},
{
path: '/kjcx',
name: 'Kjcx',
meta: { title: '科技创新' },
component: Kjcx
},
{
path: '/sxh',
name: 'Sxh',
meta: { title: '双循环' },
component: Sxh
},
{
path: '/cyfz',
name: 'Cyfz',
meta: { title: '产业发展' },
component: Cyfz
},
{
path: '/msbz',
name: 'live',
meta: { title: '民生保障' },
component: Msbz
},
{
path: '/xxczh',
name: 'NewUrbanization',
meta: { title: '新型城镇化' },
component: Xxczh
},
{
path: '/qyxtfz',
name: 'region',
meta: { title: '区域协调发展' },
component: Qyxtfz
},
{
path: '/ctfy',
name: 'Ctfy',
meta: { title: '常态防疫' },
component: Ctfy
},
{
path: '/stwm',
name: 'Stwm',
meta: { title: '生态文明' },
component: Hjzz
},
{
path: '/xxgl',
name: 'Xxgl',
meta: { title: '信息管理' },
component: Xxgl
}
]
const router = new VueRouter({ var router = new VueRouter({
routes routes: [
{
path: '/',
name: 'MyIndex',
meta: { title: '青田数字子门户' },
component: MyIndex
},
{
path: '/aqsc',
name: 'Aqsc',
meta: { title: '安全生产' },
component: Aqsc
},
{
path: '/yshj',
name: 'Yshj',
meta: { title: '营商环境' },
component: Yshj
},
{
path: '/xczx',
name: 'Xczx',
meta: { title: '乡村振兴' },
component: Xczx
},
{
path: '/kjcx',
name: 'Kjcx',
meta: { title: '科技创新' },
component: Kjcx
},
{
path: '/sxh',
name: 'Sxh',
meta: { title: '双循环' },
component: Sxh
},
{
path: '/cyfz',
name: 'Cyfz',
meta: { title: '产业发展' },
component: Cyfz
},
{
path: '/msbz',
name: 'live',
meta: { title: '民生保障' },
component: Msbz
},
{
path: '/xxczh',
name: 'NewUrbanization',
meta: { title: '新型城镇化' },
component: Xxczh
},
{
path: '/qyxtfz',
name: 'region',
meta: { title: '区域协调发展' },
component: Qyxtfz
},
{
path: '/ctfy',
name: 'Ctfy',
meta: { title: '常态防疫' },
component: Ctfy
},
{
path: '/stwm',
name: 'Stwm',
meta: { title: '生态文明' },
component: Hjzz
},
{
path: '/xxgl',
name: 'Xxgl',
meta: { title: '信息管理' },
component: Xxgl
},
{
path: '/szsy',
name: 'Szsy',
meta: { title: '双招双引' },
component: Szsy
},
{
path: '/err?debug=true',
name: 'Err',
meta: { title: '无权限' },
component: Err
}
]
})
router.beforeEach((to, from, next) => {
// if (to.path == "/login"||to.path=="/nopower") {
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") {
// // console.log(1111);
// next();
// } else {
// // router.
// next({name: 'Err'})
// }
// } else {
// next({name: 'Err'})
// }
}) })
export default router export default router
qingtian_mobile/src/views/Ecology.vue
View file @ d45c7cf3
<template> <template>
<div class="ecology"> <div class="ecology">
<div>
<Breadcrumb :breadData="breadData"></Breadcrumb>
</div>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :sm="12" :xs="24"> <el-col :sm="12" :xs="24">
<div class="clear-water unify-item"> <div class="clear-water unify-item">
...@@ -180,12 +183,18 @@ ...@@ -180,12 +183,18 @@
</template> </template>
<script> <script>
import Breadcrumb from "../components/Breadcrumb.vue";
import Tree from "../components/Tree.vue"; import Tree from "../components/Tree.vue";
export default { export default {
name: "ecology", name: "ecology",
components: { Tree }, components: { Tree , Breadcrumb},
data() { data() {
return { return {
breadData: {
page_name: "生态文明",
annual_target:"暂无数据",
leading: "青田县环保局",
},
aqList: [ aqList: [
{ {
name: "优", name: "优",
......
qingtian_mobile/src/views/Industry.vue
View file @ d45c7cf3
...@@ -5,7 +5,9 @@ ...@@ -5,7 +5,9 @@
<div class="minHeader shadow"> <div class="minHeader shadow">
<div class="card__header"> <div class="card__header">
<el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> <el-breadcrumb-item><a href="https://szzf.qingtian.gov.cn:18080"
>首页</a
></el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/' }" <el-breadcrumb-item :to="{ path: '/' }"
>产业发展</el-breadcrumb-item >产业发展</el-breadcrumb-item
> >
...@@ -564,12 +566,21 @@ export default { ...@@ -564,12 +566,21 @@ export default {
} }
</style> </style>
<style> <style>
.el-breadcrumb__inner.is-link { /* .el-breadcrumb__inner.is-link {
font-weight: 400 !important; font-weight: 400 !important;
color: #333333 !important; color: #333333 !important;
} }
.el-breadcrumb__inner { .el-breadcrumb__inner {
font-size: 16px !important; font-size: 16px !important;
} */
.el-breadcrumb__inner {
color: #333 !important;
font-weight: bold !important;
font-size: 18px;
}
.el-breadcrumb__inner a {
color: #303133 !important;
font-size: 16px;
} }
.el-tooltip__popper { .el-tooltip__popper {
color: #333 !important; color: #333 !important;
......
qingtian_mobile/src/views/MyIndex.vue
View file @ d45c7cf3
...@@ -42,7 +42,11 @@ ...@@ -42,7 +42,11 @@
</li> </li>
<li> <li>
体检信息管理-子门户&nbsp;&nbsp;&nbsp;&nbsp;<router-link tag="span" @click.native="handle('/xxgl','xxgl')" to="#" class="link">点击跳转</router-link> 电子健康证明-子门户&nbsp;&nbsp;&nbsp;&nbsp;<router-link tag="span" @click.native="handle('/xxgl','xxgl')" to="#" class="link">点击跳转</router-link>
</li>
<li>
双招双引-子门户&nbsp;&nbsp;&nbsp;&nbsp;<router-link tag="span" @click.native="handle('/szsy','szsy')" to="#" class="link">点击跳转</router-link>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -59,7 +63,7 @@ export default { ...@@ -59,7 +63,7 @@ export default {
}, },
methods: { methods: {
handle(path,name) { handle(path,name) {
let { href } = this.$router.resolve({ path: path }); let { href } = this.$router.resolve({ path: path+ '?debug=true' });
window.open(href, name); window.open(href, name);
}, },
}, },
......
qingtian_mobile/src/views/Szsy.vue 0 → 100644
View file @ d45c7cf3
<!-- -->
<template>
<div class="index">
<div class="main">
<div class="minHeader shadow">
<Breadcrumb :breadData="breadData"></Breadcrumb>
</div>
<div class="mt20 minTop shadow">
<el-row>
<el-col :xs="24" :sm="12" :md="12" :lg="12">
<div class="">
<div class="card__header flex between acenter">
<p class="tieaft">重点关注</p>
<div class="flex acenter">
<div class="c149">查看更多</div>
<i class="el-icon-arrow-right c149"></i>
</div>
</div>
<div class="card__headers">
<div class="c149">· 新引进项目进展情况</div>
<div class="mt12">
<el-select v-model="value" placeholder="2021年">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<div class="flex around acenter mt12">
<div class="flex acenter">
<div class="icon15 bg15b"></div>
<div class="c6">已落地</div>
</div>
<div class="flex acenter">
<div class="icon15 bg149"></div>
<div class="c6">在建</div>
</div>
<div class="flex acenter">
<div class="icon15 bgffc"></div>
<div class="c6">投资</div>
</div>
<div class="flex acenter">
<div class="icon15 bgff5"></div>
<div class="c6">税收总额</div>
</div>
</div>
</div>
<div>
<div id="main" style="max-width: 100%; height: 280px"></div>
</div>
</div>
</div>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12">
<div class="">
<div class="card__header flex between acenter">
<p class="tieaft">工作动态</p>
<div class="flex acenter">
<div class="c149">查看更多</div>
<i class="el-icon-arrow-right c149"></i>
</div>
</div>
<div class="card__headers">
<div class="flex acenter column">
<img src="../assets/images/zheng.png" alt="" />
<div class="mt12 b c3 fs18">
2月23日, 市四届人大六次会议召开
</div>
</div>
<div class="mt12 text">报告在回顾2020年工作时指出:
丽水经济开发区新增储备工业发展空间3万亩，新引进重大招商项目114个，总投资131.4亿
元，已入园项目中世界500强1个、中国500强3个、央企2个上市公司7个。新引进总部经济项目25个，落地数字经济项目18
个，国家经开区排名从158位跃升至80位。
</div>
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :xs="24" :sm="12" :md="12" :lg="12">
<div class="">
<div class="card__header flex between acenter">
<p class="tieaft">任务进行时</p>
</div>
<div class="card__headers">
<div class="mb20">
<div class="flex between acenter">
<p class="c149">· 招商引资</p>
<div class="flex acenter">
<div class="c149">查看更多</div>
<i class="el-icon-arrow-right c149"></i>
</div>
</div>
<div class="flex lab column acenter mt12 b">
<div>大项目 (110个) : 22个</div>
<!-- <div class="lines"></div> -->
<div class="mt12">实际到资 (189亿元) : 35亿元</div>
</div>
</div>
<div class="mb20">
<div class="flex between acenter">
<p class="c149">· 招才引智</p>
<div class="flex acenter">
<div class="c149">查看更多</div>
<i class="el-icon-arrow-right c149"></i>
</div>
</div>
<div class="mt12">
<el-row :gutter="12">
<el-col :xs="12" :sm="12" :md="12" :lg="12">
<div class="item">领导引才 (次) : 10</div>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12">
<div class="item">引才活动 (次) : 8</div>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12">
<div class="item">项目对接 (个) : 242</div>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="12">
<div class="item">人才平台 (个) : 7</div>
</el-col>
</el-row>
</div>
</div>
</div>
</div>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12">
<div class="">
<div class="card__header flex between acenter">
<p class="tieaft">引进人才</p>
<div class="flex acenter">
<div class="c149">查看更多</div>
<i class="el-icon-arrow-right c149"></i>
</div>
</div>
<div class="mt12 card__headers">
<el-row :gutter="12">
<el-col :xs="12" :sm="12" :md="8" :lg="8">
<div class="items">
<div>新引进 (留丽)</div>
<div>高校毕业生</div>
<div class="cff5 b mt8">2140人</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :md="8" :lg="8">
<div class="items">
<div>新引进 (留丽)</div>
<div>博士</div>
<div class="cff5 b mt8">30人</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :md="8" :lg="8">
<div class="items">
<div>新招收</div>
<div>博士后研究人员</div>
<div class="cff5 b mt8">27人</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :md="8" :lg="8">
<div class="items">
<div>新引进</div>
<div>硕士</div>
<div class="cff5 b mt8">147人</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :md="8" :lg="8">
<div class="items">
<div>新引进</div>
<div>外国专家智力</div>
<div class="cff5 b mt8">172人</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :md="8" :lg="8">
<div class="items">
<div>新遴选</div>
<div>"绿谷精英"</div>
<div class="cff5 b mt8">724人</div>
</div>
</el-col>
</el-row>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
</div>
</template>
<script>
import Breadcrumb from "../components/Breadcrumb.vue";
export default {
components: {
Breadcrumb,
},
data() {
return {
myCityName: "青田县",
breadData: {
page_name: "双招双引",
annual_target: "暂无数据",
leading: "青田县招商局",
},
options: [
{
value: "2021年",
label: "2021年",
},
{
value: "2020年",
label: "2020年",
},
],
value: "",
};
},
mounted() {
this.initCharts1();
},
//方法集合
methods: {
initCharts1() {
var chartDom = document.getElementById("main");
var myChart1 = this.$echarts.init(chartDom);
var option;
option = {
color: ["#ffc000", "#15be50", "#1492ff", "#ff5151"],
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
},
grid: {
left: "1%",
right: "0%",
bottom: "3%",
containLabel: true,
},
xAxis: [
{
type: "category",
data: [
"丽水",
"莲都",
"青田",
"龙泉",
"云和",
"遂昌",
"庆元",
"景宁",
"松阳",
"缙云",
],
axisLabel: {
textStyle: {
color: "#333", //坐标值得具体的颜色
fontSize: 13,
},
interval: 0,
rotate: 30
},
},
],
yAxis: [
{
type: "value",
name: "个",
min: 0,
max: 50,
interval: 10,
},
{
type: "value",
name: "亿元",
min: 0,
max: 100000,
interval: 20000,
},
],
series: [
{
name: "投资",
type: "bar",
stack: "进展",
emphasis: {
focus: "series",
},
data: [20, 10, 12, 10, 10, 10, 10, 10, 10, 10],
},
{
name: "已落地",
type: "bar",
stack: "进展",
emphasis: {
focus: "series",
},
data: [10, 20, 18, 20, 5, 15, 5, 2, 2, 5],
},
{
name: "在建",
type: "bar",
stack: "进展",
emphasis: {
focus: "series",
},
data: [12, 15, 5, 12, 10, 8, 23, 6, 11, 15],
},
{
data: [
90000, 100000, 85000, 92000, 55000, 72000, 90000, 60000, 65000,
80000,
],
type: "line",
yAxisIndex: 1,
},
],
};
option && myChart1.setOption(option);
window.addEventListener("resize", () => {
myChart1.resize();
});
},
},
};
</script>
<style lang="scss" scoped>
.index {
background: #efefef;
}
@media screen and(min-width:1200px) {
#app {
width: 1200px;
background: #efefef !important;
}
.main {
width: 1200px !important;
}
}
.main {
width: 100%;
margin: 0px auto;
padding: 20px 0;
}
.index {
background: #efefef;
}
.minHeader,
.tabtits {
width: calc(100% - 20px);
box-sizing: border-box;
border-radius: 4px;
}
.minHeader {
background: #fff;
margin: 0px auto 0;
}
.tabtits {
background-color: #eff2f5;
padding: 10px 20px 20px;
margin: 20px auto 0;
}
.minTop {
width: calc(100% - 20px);
box-sizing: border-box;
border-radius: 4px;
margin: 0px auto 0;
background: #fff;
}
.card__header {
margin-bottom: 5px;
padding: 10px 10px 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 16px;
}
.card__headers {
padding: 0px 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 16px;
}
.el-icon-s-marketing {
color: rgb(54, 153, 247);
font-size: 18px;
}
.cline {
width: 2px;
height: 18px;
background: #1492ff;
margin: 0 8px;
}
.icon28 {
width: 28px;
height: 28px;
}
.icon15 {
width: 14px;
height: 14px;
margin: 2px 5px 0 10px;
}
.c149 {
color: #1492ff;
}
.bg149 {
background: #1492ff;
}
.bg15b {
background: #15be50;
}
.bgffc {
background: #ffc000;
}
.bgff5 {
background: #ff5151;
}
.cff5 {
color: #ff5151;
}
.bg1 {
background-color: #f9fbfd;
padding: 5px 10px;
margin-top: 12px;
}
.tieaft {
font-size: 20px;
padding: 5px 0 5px 12px;
font-weight: 600;
position: relative;
}
.tieaft::before {
content: "";
position: absolute;
left: 0px;
top: 9px;
width: 2px;
height: 20px;
background-color: #1492ff;
}
.zhan {
height: 280px;
padding: 0 20px 20px 20px;
}
.mt12 {
margin-top: 12px;
}
.mb12 {
margin-bottom: 12px;
}
.mt8 {
margin-top: 8px;
}
.mt20 {
margin-top: 20px;
}
.text {
// text-align-last:justify;
line-height: 33px;
font-size: 18px;
color: #666;
word-spacing: -5px
}
.lab {
border-radius: 4px;
background: #1492ff;
color: #fff;
padding: 10px 0;
}
.item {
border-radius: 4px;
background: #f2f3f5;
color: #333;
padding: 10px 0;
margin-bottom: 12px;
display: flex;
justify-content: center;
align-items: center;
}
.items {
border-radius: 4px;
background: #FFEBEB;
color: #333;
padding: 15px 0;
margin-bottom: 12px;
display: flex;
flex-direction: column;
align-items: center;
}
.lines {
width: 1px;
height: 25px;
background: #43a8ff;
}
</style>
<style>
.el-breadcrumb__inner.is-link {
font-weight: 400 !important;
color: #333333 !important;
}
.el-breadcrumb__inner {
font-size: 16px !important;
}
.el-input__inner {
width: 100px;
height: 30px;
line-height: 30px;
border-radius: 40px;
background: #ecf3ff;
color: #1492ff;
outline: none;
border: none;
}
.el-input__icon {
line-height: 30px;
}
.el-icon-arrow-up:before {
color: #1492ff;
}
.el-input__inner::-webkit-input-placeholder {
/* WebKit browsers */
color: #1492ff;
}
.el-input__inner:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #1492ff;
}
</style>
\ No newline at end of file
qingtian_mobile/src/views/Xxgl.vue
View file @ d45c7cf3
...@@ -2,7 +2,10 @@ ...@@ -2,7 +2,10 @@
<template> <template>
<div class=""> <div class="">
<div class="main"> <div class="main">
<div class="minHeader shadow"> <div class="header-t">
<Breadcrumb :breadData="breadData"></Breadcrumb>
</div>
<!-- <div class="minHeader shadow">
<div class="card__headers xxgl"> <div class="card__headers xxgl">
<el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }" <el-breadcrumb-item :to="{ path: '/' }"
...@@ -16,8 +19,8 @@ ...@@ -16,8 +19,8 @@
<i class="el-icon-office-building mr12"></i> <i class="el-icon-office-building mr12"></i>
<p class="c3">牵头单位: 县疫情防控办 县卫生健康局</p> <p class="c3">牵头单位: 县疫情防控办 县卫生健康局</p>
</div> </div>
</div> </div>
</div> </div>-->
<div class="minTop shadow mt20"> <div class="minTop shadow mt20">
<div class="flex between pt20 pl20 pr20"> <div class="flex between pt20 pl20 pr20">
<p class="fs20 c3 b">体检机构管理</p> <p class="fs20 c3 b">体检机构管理</p>
...@@ -133,15 +136,21 @@ ...@@ -133,15 +136,21 @@
<script> <script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等） //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》'; //例如：import 《组件名称》 from '《组件路径》';
import Breadcrumb from "../components/Breadcrumb.vue";
import { tableData, tableInfo } from "@/assets/js/data.js"; import { tableData, tableInfo } from "@/assets/js/data.js";
import geoJson from "@/assets/json/qingtian.json"; import geoJson from "@/assets/json/qingtian.json";
let one, two; let one, two;
export default { export default {
//import引入的组件需要注入到对象中才能使用 //import引入的组件需要注入到对象中才能使用
components: {}, components: {Breadcrumb},
data() { data() {
//这里存放数据 //这里存放数据
return { return {
breadData: {
page_name: "电子健康证明",
annual_target:"暂无数据",
leading: "县疫情防控办 县卫生健康局",
},
tableData: tableData, tableData: tableData,
tableInfo: tableInfo, tableInfo: tableInfo,
}; };
...@@ -376,6 +385,10 @@ export default { ...@@ -376,6 +385,10 @@ export default {
margin: 0px auto; margin: 0px auto;
padding: 10px 0; padding: 10px 0;
} }
.header-t {
width:calc(100% - 20px);
margin: 10px auto 0;
}
.minHeader { .minHeader {
width: calc(100% - 20px); width: calc(100% - 20px);
box-sizing: border-box; box-sizing: border-box;
......
qingtian_mobile/src/views/aqsc.vue
View file @ d45c7cf3
...@@ -3,7 +3,8 @@ ...@@ -3,7 +3,8 @@
<!-- <Gets /> --> <!-- <Gets /> -->
<div class="main"> <div class="main">
<div class="minHeader shadow"> <div class="minHeader shadow">
<div class="card__header flex between acenter"> <Breadcrumb :breadData="breadData"></Breadcrumb>
<!-- <div class="card__header flex between acenter">
<el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/' }" <el-breadcrumb-item :to="{ path: '/' }"
...@@ -26,7 +27,7 @@ ...@@ -26,7 +27,7 @@
为自觉接受媒体监督,有效行使工作职责，努力做到权为民所用，更好地服务社群，树立城管形象。 为自觉接受媒体监督,有效行使工作职责，努力做到权为民所用，更好地服务社群，树立城管形象。
</div> </div>
</div> </div>
</div> </div> -->
</div> </div>
<div class="minTop shadow mt20"> <div class="minTop shadow mt20">
<div> <div>
...@@ -760,13 +761,18 @@ ...@@ -760,13 +761,18 @@
</template> </template>
<script> <script>
import Breadcrumb from "../components/Breadcrumb.vue";
export default { export default {
name: "Aqsc", name: "Aqsc",
components: { components: { Breadcrumb },
// Gets
},
data() { data() {
return { return {
breadData: {
page_name: "安全生产",
annual_target:
"为自觉接受媒体监督,有效行使工作职责，努力做到权为民所用，更好地服务社群，树立城管形象。",
leading: "应急管理局",
},
activeName1: "first", activeName1: "first",
activeName2: "first", activeName2: "first",
activeName3: "first", activeName3: "first",
......
qingtian_mobile/src/views/err.vue 0 → 100644
View file @ d45c7cf3
<!-- -->
<template>
<div class=''>
无权限访问
</div>
</template>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
},
beforeCreate() {}, //生命周期 - 创建之前
//生命周期 - 创建完成（可以访问当前this实例）
created() {
},
beforeMount() {}, //生命周期 - 挂载之前
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
},
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style>
</style>
\ No newline at end of file
qingtian_mobile/src/views/yshj.vue
View file @ d45c7cf3
...@@ -5,9 +5,11 @@ ...@@ -5,9 +5,11 @@
<div class="minHeader"> <div class="minHeader">
<div> <div>
<el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> <el-breadcrumb-item><a href="https://szzf.qingtian.gov.cn:18080"
>首页</a
></el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/' }" <el-breadcrumb-item :to="{ path: '/' }"
>营商环境市场活力</el-breadcrumb-item class="b">营商环境市场活力</el-breadcrumb-item
> >
</el-breadcrumb> </el-breadcrumb>
</div> </div>
...@@ -21,7 +23,7 @@ ...@@ -21,7 +23,7 @@
<span class="fs12">正常</span> <span class="fs12">正常</span>
</p> </p>
</div> </div>
<div class="fs12 mt12">牵头单位: 县发展和改革局</div> <div class="fs16 mt12">牵头单位: 县发展和改革局</div>
</div> </div>
</div> </div>
<div class="mt20 getgov"> <div class="mt20 getgov">
...@@ -45,7 +47,7 @@ ...@@ -45,7 +47,7 @@
<div class="bdash"></div> <div class="bdash"></div>
<div class="flex column acenter"> <div class="flex column acenter">
<p class="b fs20 c3">1</p> <p class="b fs20 c3">1</p>
<p class="bgff5 cff6 fs14 tapd b">预警</p> <p class="bgff5 cff8 fs14 tapd b">预警</p>
</div> </div>
<div class="bdash"></div> <div class="bdash"></div>
<div class="flex column acenter"> <div class="flex column acenter">
...@@ -1094,4 +1096,13 @@ export default { ...@@ -1094,4 +1096,13 @@ export default {
width: 180px !important; width: 180px !important;
text-align: center; text-align: center;
} }
.el-breadcrumb__inner {
color: #333 !important;
font-weight: bold !important;
font-size: 18px;
}
.el-breadcrumb__inner a {
color: #303133 !important;
font-size: 16px;
}
</style> </style>
\ No newline at end of file
qingtian_vue/index.html
View file @ d45c7cf3
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>景宁数字政府门户</title> <title>青田数字政府门户</title>
<script src="https://alidt.alicdn.com/alilog/mlog/aplus_cloud.js"></script> <script src="https://alidt.alicdn.com/alilog/mlog/aplus_cloud.js"></script>
<script src='https://wpk-gate.zjzwfw.gov.cn/static/wpk-jssdk.1.0.2/wpkReporter.js' crossorigin='true'></script> <script src='https://wpk-gate.zjzwfw.gov.cn/static/wpk-jssdk.1.0.2/wpkReporter.js' crossorigin='true'></script>
</head> </head>
...@@ -82,6 +82,13 @@ ...@@ -82,6 +82,13 @@
viewPort(navigator.userAgent); viewPort(navigator.userAgent);
}, 500); }, 500);
} }
// window.addEventListener("message", function (e) {
// console.log(e);
// // let accessToken = e;
// let user = await fetch(
// `https://lsszzf.lishui.gov.cn:18082/common/login/getuserinfo.php`
// );
// });
</script> </script>
</html> </html>
\ No newline at end of file
qingtian_vue/src/api/index.js
View file @ d45c7cf3
import axios from 'axios' import axios from 'axios'
import { Base64 } from 'js-base64' import { Base64 } from 'js-base64'
let base = 'https://szzf.songyang.gov.cn:8081'; // let base = 'https://szzf.songyang.gov.cn:8081';
let base = 'https://lsszzf.lishui.gov.cn:18082/common/login/getuserinfo.php';
let requestHead = { let requestHead = {
headers: { headers: {
'Authorization': 'Basic ' + Base64.encode('98b8c111526e4b1eba5cde7669ab2228:y916a7f471944898ab68c8b256e0c1f2') 'Authorization': 'Basic ' + Base64.encode('98b8c111526e4b1eba5cde7669ab2228:y916a7f471944898ab68c8b256e0c1f2'),
'content-type': 'application/x-www-form-urlencoded',
} }
}; };
...@@ -70,6 +72,10 @@ export const getSearchCon = (a, b,c=1,d=10) => { ...@@ -70,6 +72,10 @@ export const getSearchCon = (a, b,c=1,d=10) => {
export const getPortalUserinfo = (a) => { export const getPortalUserinfo = (a) => {
return get('/api/portal/userinfo?area=sy&code=' + a); return get('/api/portal/userinfo?area=sy&code=' + a);
}; };
// //获取扫码登录后用户信息
// export const postUserInfo = (a) => {
// return post('/api/portal/qrinfo?area=sy&code=' + a);
// };
//获取免登后用户信息和权限信息 //获取免登后用户信息和权限信息
export const getUserInfo = (a) => { export const getUserInfo = (a) => {
return get('/api/portal/qrinfo?area=sy&code=' + a); return get('/api/portal/qrinfo?area=sy&code=' + a);
......
qingtian_vue/src/components/Breadcrumb.vue
View file @ d45c7cf3
<template> <template>
<div class="breadcrumb"> <div class="breadcrumb-t">
<div class="br-top"> <div class="breadcrumb">
<el-breadcrumb <div class="br-top">
separator="/" <el-breadcrumb
v-if="$route.path != '/index'" separator="/"
separator-class="el-icon-arrow-right" v-if="$route.path != '/index'"
> separator-class="el-icon-arrow-right"
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> >
<el-breadcrumb-item>{{ breadData.page_name }}</el-breadcrumb-item> <el-breadcrumb-item
</el-breadcrumb> ><a href="https://szzf.qingtian.gov.cn:18080"
<div> >首页</a
<i class="iconfont icon-chengshi"></i> ></el-breadcrumb-item
<span>牵头单位：{{ breadData.leading }}</span> >
<el-breadcrumb-item>{{ breadData.page_name }}</el-breadcrumb-item>
</el-breadcrumb>
<div>
<i class="iconfont icon-chengshi"></i>
<span>牵头单位：{{ breadData.leading }}</span>
</div>
</div> </div>
</div> </div>
<div class="breadcrumb-text"> <div class="line" v-if="show"></div>
<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>年度目标</span>
<div class="s-line"></div>
{{ breadData.annual_target }} {{ breadData.annual_target }}
</div> </div>
</div> </div>
<div class="flex acenter jcenter shoez" @click="shows">
<div class="flex acenter jcenter showt">
<div>年度目标</div>
<!-- <img :src="show?'../assets/images/bottom.png': '../assets/images/topArrow.png'" alt="" /> -->
<img src="../assets/images/bottom.png" alt="" v-if="!show">
<img src="../assets/images/topArrow.png" alt="" v-else>
</div>
</div>
</div> </div>
</template> </template>
...@@ -29,50 +45,127 @@ export default { ...@@ -29,50 +45,127 @@ export default {
name: "breadcrumb", name: "breadcrumb",
props: { props: {
breadData: { breadData: {
type: Object type: Object,
}, },
},
data() {
return {
show: true
};
},
methods: {
shows() {
this.show = ! this.show
}
} }
}; };
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
.breadcrumb-t {
position: relative;
background:#fff;
}
.breadcrumb { .breadcrumb {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
background-color: #fff; background-color: #fff;
border-radius: 4px; border-radius: 4px;
padding: 12px 20px; padding: 16px 20px 0;
margin-bottom: 20px; margin-bottom: 16px;
>>> .el-breadcrumb {
font-size: 16px;
}
>>> .el-breadcrumb__inner { >>> .el-breadcrumb__inner {
color: #333; color: #333;
font-weight: normal; font-weight: bold;
font-size: 18px;
a {
font-weight: 400;
font-size: 16px;
}
} }
.br-top { .br-top {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.breadcrumb-title { }
margin-top: 12px; .breadcrumb-text {
display: flex; padding: 16px 20px 0;
align-items: center; }
span{ .breadcrumb-title {
color: #1492ff; display: flex;
margin-right: 8px; align-items: center;
font-size: 18px; color: #333;
} span {
color: #1492ff;
margin-right: 8px;
font-size: 18px;
} }
.breadcrumb-title img { .s-line {
width: 28px; width: 1px;
height: auto; height: 15px;
background: #ddd;
margin-right: 10px;
} }
.breadcrumb-title h2 { }
font-weight: 600; .breadcrumb-title img {
font-size: 24px; width: 24px;
margin-right: 20px; height: auto;
}
.breadcrumb-title h2 {
font-weight: 600;
font-size: 24px;
margin-right: 20px;
}
.line {
width: 100%;
height: 1px;
background: #ddd;
transform: scaleY(0.5);
}
.shoet {
width: 150px;
height: 24px;
position: relative;
}
.shoez {
// position: absolute;
bottom: 0;
height: 24px;
}
.showt {
color: #999;
background: #eee;
position: relative;
bottom: -1px;
img {
width: 15px;
height: 15px;
margin-left: 5px;
z-index: 10;
} }
} }
.showt:after {
position: absolute;
left: 0;
top: -19px;
width: 0;
height: 0;
margin-left: -20px;
content: " ";
border-bottom: 20px solid #eee;
border-left: 20px solid transparent;
border-top: 20px solid transparent;
}
.showt:before {
position: absolute;
right: 0;
top: -19px;
width: 0;
height: 0;
margin-right: -20px;
content: " ";
border-bottom: 20px solid #eee;
border-right: 20px solid transparent;
border-top: 20px solid transparent;
}
</style> </style>
\ No newline at end of file
qingtian_vue/src/router/index.js
View file @ d45c7cf3
...@@ -14,6 +14,8 @@ import Qyxtfz from '../views/Region.vue' ...@@ -14,6 +14,8 @@ import Qyxtfz from '../views/Region.vue'
import Stwm from '../views/Ecology.vue' import Stwm from '../views/Ecology.vue'
import Ctfy from '../views/Epidemic.vue' import Ctfy from '../views/Epidemic.vue'
import Xxgl from '../views/Xxgl.vue' import Xxgl from '../views/Xxgl.vue'
import Szsy from '../views/Szsy.vue'
import Err from '../views/err.vue'
Vue.use(Router) Vue.use(Router)
var router = new Router({ var router = new Router({
routes: [ routes: [
...@@ -32,7 +34,7 @@ var router = new Router({ ...@@ -32,7 +34,7 @@ var router = new Router({
path: '/msbz', path: '/msbz',
name: 'live', name: 'live',
meta: { title: '民生保障' }, meta: { title: '民生保障' },
component:Msbz component: Msbz
}, },
{ {
path: '/qyxtfz', path: '/qyxtfz',
...@@ -94,6 +96,18 @@ var router = new Router({ ...@@ -94,6 +96,18 @@ var router = new Router({
name: 'Xxgl', name: 'Xxgl',
meta: { title: '信息管理' }, meta: { title: '信息管理' },
component: Xxgl component: Xxgl
},
{
path: '/szsy',
name: 'Szsy',
meta: { title: '双招双引' },
component: Szsy
},
{
path: '/err?debug=true',
name: 'Err',
meta: { title: '无权限' },
component: Err
} }
] ]
}) })
...@@ -106,7 +120,24 @@ let devType = (isAndroid || isIOS) ? '02' : '01'; ...@@ -106,7 +120,24 @@ let devType = (isAndroid || isIOS) ? '02' : '01';
router.beforeEach((to, from, next) => { 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 {
// const token = sessionStorage.getItem("token"); // const token = sessionStorage.getItem("token");
// if (token) { // if (token) {
......
qingtian_vue/src/views/Aqsc.vue
View file @ d45c7cf3
<template> <template>
<div class="main"> <div class="main">
<div class="minHeader shadow"> <div class="minHeader shadow">
<div class="card__header flex between"> <Breadcrumb :breadData="breadData"></Breadcrumb>
<!-- <div class="card__header flex between">
<el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> <el-breadcrumb-item><a href="https://szzf.qingtian.gov.cn:18080">首页</a></el-breadcrumb-item>
<el-breadcrumb-item :to="{path: '/'}">安全生产</el-breadcrumb-item> <el-breadcrumb-item :to="{path: '/'}">安全生产</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
<div class="flex acenter"> <div class="flex acenter">
...@@ -16,9 +17,11 @@ ...@@ -16,9 +17,11 @@
<div class="flex acenter"> <div class="flex acenter">
<span class="c3">年度目标</span> <span class="c3">年度目标</span>
<div class="cline"></div> <div class="cline"></div>
<span class="c3">为自觉接受媒体监督,有效行使工作职责，努力做到权为民所用，更好地服务社群，树立城管形象。</span> <span class="c3"
>为自觉接受媒体监督,有效行使工作职责，努力做到权为民所用，更好地服务社群，树立城管形象。</span
>
</div> </div>
</div> </div> -->
</div> </div>
<div class="minTop shadow mt20"> <div class="minTop shadow mt20">
<div> <div>
...@@ -30,19 +33,19 @@ ...@@ -30,19 +33,19 @@
<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>
</div> </div>
<div class="textCenter mt20 c3">2021年全市安全生产事故情况</div> <div class="textCenter mt20 c3">2021年全市安全生产事故情况</div>
<div class="zhan mt12"> <div class="zhan mt12">
<div id="main1" style="max-width: 100%;height: 280px;"></div> <div id="main1" style="max-width: 100%; height: 280px"></div>
</div> </div>
</div> </div>
<div class="w41"> <div class="w41">
...@@ -53,7 +56,7 @@ ...@@ -53,7 +56,7 @@
</div> </div>
<div class="flex acenter column"> <div class="flex acenter column">
<p class="c9">较大事务</p> <p class="c9">较大事务</p>
<p class="fs18 cff6 b">0</p> <p class="fs18 cff8 b">0</p>
</div> </div>
<div class="flex acenter column"> <div class="flex acenter column">
<p class="c9">重大事务</p> <p class="c9">重大事务</p>
...@@ -61,8 +64,8 @@ ...@@ -61,8 +64,8 @@
</div> </div>
</div> </div>
<div class="textCenter mt20 c3">2021年全市安全生产事故情况</div> <div class="textCenter mt20 c3">2021年全市安全生产事故情况</div>
<div class="zhan mt12 "> <div class="zhan mt12">
<div id="main2" style="max-width: 100%;height: 280px;"></div> <div id="main2" style="max-width: 100%; height: 280px"></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -76,52 +79,112 @@ ...@@ -76,52 +79,112 @@
</div> </div>
<div class="p20"> <div class="p20">
<div class="flex around wrap w100"> <div class="flex around wrap w100">
<p class="" :class="whShow?'bg149 cf btn':'bgf c3 borc8 btn1'" @click="wh">危化领域</p> <p
<p class="" :class="whShow?'bgf c3 borc8 btn1':'bg149 cf btn'" @click="gk">工矿领域</p> class=""
<el-tooltip class="item btn2 cf" effect="white" content="建设中..." placement="top"> :class="whShow ? 'bg149 cf btn' : 'bgf c3 borc8 btn1'"
@click="wh"
>
危化领域
</p>
<p
class=""
:class="whShow ? 'bgf c3 borc8 btn1' : 'bg149 cf btn'"
@click="gk"
>
工矿领域
</p>
<el-tooltip
class="item btn2 cf"
effect="white"
content="建设中..."
placement="top"
>
<p>消防领域</p> <p>消防领域</p>
</el-tooltip> </el-tooltip>
<el-tooltip class="item btn2 cf" effect="white" content="建设中..." placement="top"> <el-tooltip
class="item btn2 cf"
effect="white"
content="建设中..."
placement="top"
>
<p>道路交通</p> <p>道路交通</p>
</el-tooltip> </el-tooltip>
<el-tooltip class="item btn2 cf mt20" effect="white" content="建设中..." placement="top"> <el-tooltip
class="item btn2 cf mt20"
effect="white"
content="建设中..."
placement="top"
>
<p>建设施工</p> <p>建设施工</p>
</el-tooltip> </el-tooltip>
<el-tooltip class="item btn2 cf mt20" effect="white" content="建设中..." placement="top"> <el-tooltip
class="item btn2 cf mt20"
effect="white"
content="建设中..."
placement="top"
>
<p>城市运行</p> <p>城市运行</p>
</el-tooltip> </el-tooltip>
<el-tooltip class="item btn2 cf mt20" effect="white" content="建设中..." placement="top"> <el-tooltip
class="item btn2 cf mt20"
effect="white"
content="建设中..."
placement="top"
>
<p>旅游领域</p> <p>旅游领域</p>
</el-tooltip> </el-tooltip>
<el-tooltip class="item btn2 cf mt20" effect="white" content="建设中..." placement="top"> <el-tooltip
class="item btn2 cf mt20"
effect="white"
content="建设中..."
placement="top"
>
<p>特种设备</p> <p>特种设备</p>
</el-tooltip> </el-tooltip>
</div> </div>
<div class="flex around mt20" v-if="whShow"> <div class="flex around mt20" v-if="whShow">
<div class="flex column acenter"> <div class="flex column acenter">
<div class="el-progress--circle" style="height: 80px;width: 80px;"> <div
class="el-progress--circle"
style="height: 80px; width: 80px"
>
<div class="bgs bg15b"></div> <div class="bgs bg15b"></div>
<svg viewBox="0 0 100 100"> <svg viewBox="0 0 100 100">
<path d=" <path
d="
M 50 50 M 50 50
m 0 -47 m 0 -47
a 47 47 0 1 1 0 94 a 47 47 0 1 1 0 94
a 47 47 0 1 1 0 -94 a 47 47 0 1 1 0 -94
" stroke="#e5e9f2" stroke-width="5.0" fill="none" "
stroke="#e5e9f2"
stroke-width="5.0"
fill="none"
class="el-progress-circle__track" class="el-progress-circle__track"
style="stroke-dasharray: 295.31px, 295.31px; stroke-dashoffset: 0px;"> style="
</path> stroke-dasharray: 295.31px, 295.31px;
<path d=" stroke-dashoffset: 0px;
"
></path>
<path
d="
M 50 50 M 50 50
m 0 -47 m 0 -47
a 47 47 0 1 1 0 94 a 47 47 0 1 1 0 94
a 47 47 0 1 1 0 -94 a 47 47 0 1 1 0 -94
" stroke="#48e1a7" fill="none" stroke-linecap="round" stroke-width="5.0" "
stroke="#48e1a7"
fill="none"
stroke-linecap="round"
stroke-width="5.0"
class="el-progress-circle__path" class="el-progress-circle__path"
style="stroke-dasharray: 171.28px, 295.31px; stroke-dashoffset: 0px; transition: stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s;"> style="
</path> stroke-dasharray: 171.28px, 295.31px;
stroke-dashoffset: 0px;
transition: stroke-dasharray 0.6s ease 0s,
stroke 0.6s ease 0s;
"
></path>
</svg> </svg>
<div class="el-progress_text">58%</div> <div class="el-progress_text">58%</div>
</div> </div>
...@@ -131,27 +194,47 @@ ...@@ -131,27 +194,47 @@
</div> </div>
</div> </div>
<div class="flex column acenter"> <div class="flex column acenter">
<div class="el-progress--circle" style="height: 80px;width: 80px;"> <div
class="el-progress--circle"
style="height: 80px; width: 80px"
>
<div class="bgs bgff8"></div> <div class="bgs bgff8"></div>
<svg viewBox="0 0 100 100"> <svg viewBox="0 0 100 100">
<path d=" <path
d="
M 50 50 M 50 50
m 0 -47 m 0 -47
a 47 47 0 1 1 0 94 a 47 47 0 1 1 0 94
a 47 47 0 1 1 0 -94 a 47 47 0 1 1 0 -94
" stroke="#e5e9f2" stroke-width="5.0" fill="none" "
stroke="#e5e9f2"
stroke-width="5.0"
fill="none"
class="el-progress-circle__track" class="el-progress-circle__track"
style="stroke-dasharray: 295.31px, 295.31px; stroke-dashoffset: 0px;"> style="
</path> stroke-dasharray: 295.31px, 295.31px;
<path d=" stroke-dashoffset: 0px;
"
></path>
<path
d="
M 50 50 M 50 50
m 0 -47 m 0 -47
a 47 47 0 1 1 0 94 a 47 47 0 1 1 0 94
a 47 47 0 1 1 0 -94 a 47 47 0 1 1 0 -94
" stroke="#ff8126" fill="none" stroke-linecap="round" stroke-width="5.0" "
stroke="#ff8126"
fill="none"
stroke-linecap="round"
stroke-width="5.0"
class="el-progress-circle__path" class="el-progress-circle__path"
style="stroke-dasharray: 171.28px, 295.31px; stroke-dashoffset: 0px; transition: stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s;"> style="
</path> stroke-dasharray: 171.28px, 295.31px;
stroke-dashoffset: 0px;
transition: stroke-dasharray 0.6s ease 0s,
stroke 0.6s ease 0s;
"
></path>
</svg> </svg>
<div class="el-progress_text">58%</div> <div class="el-progress_text">58%</div>
</div> </div>
...@@ -161,27 +244,47 @@ ...@@ -161,27 +244,47 @@
</div> </div>
</div> </div>
<div class="flex column acenter"> <div class="flex column acenter">
<div class="el-progress--circle" style="height: 80px;width: 80px;"> <div
class="el-progress--circle"
style="height: 80px; width: 80px"
>
<div class="bgs bgffc"></div> <div class="bgs bgffc"></div>
<svg viewBox="0 0 100 100"> <svg viewBox="0 0 100 100">
<path d=" <path
d="
M 50 50 M 50 50
m 0 -47 m 0 -47
a 47 47 0 1 1 0 94 a 47 47 0 1 1 0 94
a 47 47 0 1 1 0 -94 a 47 47 0 1 1 0 -94
" stroke="#e5e9f2" stroke-width="5.0" fill="none" "
stroke="#e5e9f2"
stroke-width="5.0"
fill="none"
class="el-progress-circle__track" class="el-progress-circle__track"
style="stroke-dasharray: 295.31px, 295.31px; stroke-dashoffset: 0px;"> style="
</path> stroke-dasharray: 295.31px, 295.31px;
<path d=" stroke-dashoffset: 0px;
"
></path>
<path
d="
M 50 50 M 50 50
m 0 -47 m 0 -47
a 47 47 0 1 1 0 94 a 47 47 0 1 1 0 94
a 47 47 0 1 1 0 -94 a 47 47 0 1 1 0 -94
" stroke="#ffc341" fill="none" stroke-linecap="round" stroke-width="5.0" "
stroke="#ffc341"
fill="none"
stroke-linecap="round"
stroke-width="5.0"
class="el-progress-circle__path" class="el-progress-circle__path"
style="stroke-dasharray: 171.28px, 295.31px; stroke-dashoffset: 0px; transition: stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s;"> style="
</path> stroke-dasharray: 171.28px, 295.31px;
stroke-dashoffset: 0px;
transition: stroke-dasharray 0.6s ease 0s,
stroke 0.6s ease 0s;
"
></path>
</svg> </svg>
<div class="el-progress_text">58%</div> <div class="el-progress_text">58%</div>
</div> </div>
...@@ -193,27 +296,47 @@ ...@@ -193,27 +296,47 @@
</div> </div>
<div class="flex around mt20 wrap" v-if="gkShow"> <div class="flex around mt20 wrap" v-if="gkShow">
<div class="flex column acenter icon160"> <div class="flex column acenter icon160">
<div class="el-progress--circle" style="height: 80px;width: 80px;"> <div
class="el-progress--circle"
style="height: 80px; width: 80px"
>
<div class="bgs bg15b"></div> <div class="bgs bg15b"></div>
<svg viewBox="0 0 100 100"> <svg viewBox="0 0 100 100">
<path d=" <path
d="
M 50 50 M 50 50
m 0 -47 m 0 -47
a 47 47 0 1 1 0 94 a 47 47 0 1 1 0 94
a 47 47 0 1 1 0 -94 a 47 47 0 1 1 0 -94
" stroke="#e5e9f2" stroke-width="5.0" fill="none" "
stroke="#e5e9f2"
stroke-width="5.0"
fill="none"
class="el-progress-circle__track" class="el-progress-circle__track"
style="stroke-dasharray: 295.31px, 295.31px; stroke-dashoffset: 0px;"> style="
</path> stroke-dasharray: 295.31px, 295.31px;
<path d=" stroke-dashoffset: 0px;
"
></path>
<path
d="
M 50 50 M 50 50
m 0 -47 m 0 -47
a 47 47 0 1 1 0 94 a 47 47 0 1 1 0 94
a 47 47 0 1 1 0 -94 a 47 47 0 1 1 0 -94
" stroke="#48e1a7" fill="none" stroke-linecap="round" stroke-width="5.0" "
stroke="#48e1a7"
fill="none"
stroke-linecap="round"
stroke-width="5.0"
class="el-progress-circle__path" class="el-progress-circle__path"
style="stroke-dasharray: 171.28px, 295.31px; stroke-dashoffset: 0px; transition: stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s;"> style="
</path> stroke-dasharray: 171.28px, 295.31px;
stroke-dashoffset: 0px;
transition: stroke-dasharray 0.6s ease 0s,
stroke 0.6s ease 0s;
"
></path>
</svg> </svg>
<div class="el-progress_text">11座</div> <div class="el-progress_text">11座</div>
</div> </div>
...@@ -223,27 +346,47 @@ ...@@ -223,27 +346,47 @@
</div> </div>
</div> </div>
<div class="flex column acenter icon160"> <div class="flex column acenter icon160">
<div class="el-progress--circle" style="height: 80px;width: 80px;"> <div
class="el-progress--circle"
style="height: 80px; width: 80px"
>
<div class="bgs bgff8"></div> <div class="bgs bgff8"></div>
<svg viewBox="0 0 100 100"> <svg viewBox="0 0 100 100">
<path d=" <path
d="
M 50 50 M 50 50
m 0 -47 m 0 -47
a 47 47 0 1 1 0 94 a 47 47 0 1 1 0 94
a 47 47 0 1 1 0 -94 a 47 47 0 1 1 0 -94
" stroke="#e5e9f2" stroke-width="5.0" fill="none" "
stroke="#e5e9f2"
stroke-width="5.0"
fill="none"
class="el-progress-circle__track" class="el-progress-circle__track"
style="stroke-dasharray: 295.31px, 295.31px; stroke-dashoffset: 0px;"> style="
</path> stroke-dasharray: 295.31px, 295.31px;
<path d=" stroke-dashoffset: 0px;
"
></path>
<path
d="
M 50 50 M 50 50
m 0 -47 m 0 -47
a 47 47 0 1 1 0 94 a 47 47 0 1 1 0 94
a 47 47 0 1 1 0 -94 a 47 47 0 1 1 0 -94
" stroke="#ff8126" fill="none" stroke-linecap="round" stroke-width="5.0" "
stroke="#ff8126"
fill="none"
stroke-linecap="round"
stroke-width="5.0"
class="el-progress-circle__path" class="el-progress-circle__path"
style="stroke-dasharray: 171.28px, 295.31px; stroke-dashoffset: 0px; transition: stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s;"> style="
</path> stroke-dasharray: 171.28px, 295.31px;
stroke-dashoffset: 0px;
transition: stroke-dasharray 0.6s ease 0s,
stroke 0.6s ease 0s;
"
></path>
</svg> </svg>
<div class="el-progress_text">95%</div> <div class="el-progress_text">95%</div>
</div> </div>
...@@ -253,27 +396,47 @@ ...@@ -253,27 +396,47 @@
</div> </div>
</div> </div>
<div class="flex column acenter icon160"> <div class="flex column acenter icon160">
<div class="el-progress--circle" style="height: 80px;width: 80px;"> <div
class="el-progress--circle"
style="height: 80px; width: 80px"
>
<div class="bgs bgffc"></div> <div class="bgs bgffc"></div>
<svg viewBox="0 0 100 100"> <svg viewBox="0 0 100 100">
<path d=" <path
d="
M 50 50 M 50 50
m 0 -47 m 0 -47
a 47 47 0 1 1 0 94 a 47 47 0 1 1 0 94
a 47 47 0 1 1 0 -94 a 47 47 0 1 1 0 -94
" stroke="#e5e9f2" stroke-width="5.0" fill="none" "
stroke="#e5e9f2"
stroke-width="5.0"
fill="none"
class="el-progress-circle__track" class="el-progress-circle__track"
style="stroke-dasharray: 295.31px, 295.31px; stroke-dashoffset: 0px;"> style="
</path> stroke-dasharray: 295.31px, 295.31px;
<path d=" stroke-dashoffset: 0px;
"
></path>
<path
d="
M 50 50 M 50 50
m 0 -47 m 0 -47
a 47 47 0 1 1 0 94 a 47 47 0 1 1 0 94
a 47 47 0 1 1 0 -94 a 47 47 0 1 1 0 -94
" stroke="#ffc341" fill="none" stroke-linecap="round" stroke-width="5.0" "
stroke="#ffc341"
fill="none"
stroke-linecap="round"
stroke-width="5.0"
class="el-progress-circle__path" class="el-progress-circle__path"
style="stroke-dasharray: 171.28px, 295.31px; stroke-dashoffset: 0px; transition: stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s;"> style="
</path> stroke-dasharray: 171.28px, 295.31px;
stroke-dashoffset: 0px;
transition: stroke-dasharray 0.6s ease 0s,
stroke 0.6s ease 0s;
"
></path>
</svg> </svg>
<div class="el-progress_text">100%</div> <div class="el-progress_text">100%</div>
</div> </div>
...@@ -283,27 +446,47 @@ ...@@ -283,27 +446,47 @@
</div> </div>
</div> </div>
<div class="flex column acenter icon160 mt12"> <div class="flex column acenter icon160 mt12">
<div class="el-progress--circle" style="height: 80px;width: 80px;"> <div
class="el-progress--circle"
style="height: 80px; width: 80px"
>
<div class="bgs bg20d"></div> <div class="bgs bg20d"></div>
<svg viewBox="0 0 100 100"> <svg viewBox="0 0 100 100">
<path d=" <path
d="
M 50 50 M 50 50
m 0 -47 m 0 -47
a 47 47 0 1 1 0 94 a 47 47 0 1 1 0 94
a 47 47 0 1 1 0 -94 a 47 47 0 1 1 0 -94
" stroke="#e5e9f2" stroke-width="5.0" fill="none" "
stroke="#e5e9f2"
stroke-width="5.0"
fill="none"
class="el-progress-circle__track" class="el-progress-circle__track"
style="stroke-dasharray: 295.31px, 295.31px; stroke-dashoffset: 0px;"> style="
</path> stroke-dasharray: 295.31px, 295.31px;
<path d=" stroke-dashoffset: 0px;
"
></path>
<path
d="
M 50 50 M 50 50
m 0 -47 m 0 -47
a 47 47 0 1 1 0 94 a 47 47 0 1 1 0 94
a 47 47 0 1 1 0 -94 a 47 47 0 1 1 0 -94
" stroke="#20DBEE" fill="none" stroke-linecap="round" stroke-width="5.0" "
stroke="#20DBEE"
fill="none"
stroke-linecap="round"
stroke-width="5.0"
class="el-progress-circle__path" class="el-progress-circle__path"
style="stroke-dasharray: 171.28px, 295.31px; stroke-dashoffset: 0px; transition: stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s;"> style="
</path> stroke-dasharray: 171.28px, 295.31px;
stroke-dashoffset: 0px;
transition: stroke-dasharray 0.6s ease 0s,
stroke 0.6s ease 0s;
"
></path>
</svg> </svg>
<div class="el-progress_text">29%</div> <div class="el-progress_text">29%</div>
</div> </div>
...@@ -313,27 +496,47 @@ ...@@ -313,27 +496,47 @@
</div> </div>
</div> </div>
<div class="flex column acenter icon160 mt12"> <div class="flex column acenter icon160 mt12">
<div class="el-progress--circle" style="height: 80px;width: 80px;"> <div
class="el-progress--circle"
style="height: 80px; width: 80px"
>
<div class="bgs bg369"></div> <div class="bgs bg369"></div>
<svg viewBox="0 0 100 100"> <svg viewBox="0 0 100 100">
<path d=" <path
d="
M 50 50 M 50 50
m 0 -47 m 0 -47
a 47 47 0 1 1 0 94 a 47 47 0 1 1 0 94
a 47 47 0 1 1 0 -94 a 47 47 0 1 1 0 -94
" stroke="#e5e9f2" stroke-width="5.0" fill="none" "
stroke="#e5e9f2"
stroke-width="5.0"
fill="none"
class="el-progress-circle__track" class="el-progress-circle__track"
style="stroke-dasharray: 295.31px, 295.31px; stroke-dashoffset: 0px;"> style="
</path> stroke-dasharray: 295.31px, 295.31px;
<path d=" stroke-dashoffset: 0px;
"
></path>
<path
d="
M 50 50 M 50 50
m 0 -47 m 0 -47
a 47 47 0 1 1 0 94 a 47 47 0 1 1 0 94
a 47 47 0 1 1 0 -94 a 47 47 0 1 1 0 -94
" stroke="#3699F7" fill="none" stroke-linecap="round" stroke-width="5.0" "
stroke="#3699F7"
fill="none"
stroke-linecap="round"
stroke-width="5.0"
class="el-progress-circle__path" class="el-progress-circle__path"
style="stroke-dasharray: 171.28px, 295.31px; stroke-dashoffset: 0px; transition: stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s;"> style="
</path> stroke-dasharray: 171.28px, 295.31px;
stroke-dashoffset: 0px;
transition: stroke-dasharray 0.6s ease 0s,
stroke 0.6s ease 0s;
"
></path>
</svg> </svg>
<div class="el-progress_text">62.9%</div> <div class="el-progress_text">62.9%</div>
</div> </div>
...@@ -343,27 +546,47 @@ ...@@ -343,27 +546,47 @@
</div> </div>
</div> </div>
<div class="flex column acenter icon160 mt12"> <div class="flex column acenter icon160 mt12">
<div class="el-progress--circle" style="height: 80px;width: 80px;"> <div
class="el-progress--circle"
style="height: 80px; width: 80px"
>
<div class="bgs bga0f"></div> <div class="bgs bga0f"></div>
<svg viewBox="0 0 100 100"> <svg viewBox="0 0 100 100">
<path d=" <path
d="
M 50 50 M 50 50
m 0 -47 m 0 -47
a 47 47 0 1 1 0 94 a 47 47 0 1 1 0 94
a 47 47 0 1 1 0 -94 a 47 47 0 1 1 0 -94
" stroke="#e5e9f2" stroke-width="5.0" fill="none" "
stroke="#e5e9f2"
stroke-width="5.0"
fill="none"
class="el-progress-circle__track" class="el-progress-circle__track"
style="stroke-dasharray: 295.31px, 295.31px; stroke-dashoffset: 0px;"> style="
</path> stroke-dasharray: 295.31px, 295.31px;
<path d=" stroke-dashoffset: 0px;
"
></path>
<path
d="
M 50 50 M 50 50
m 0 -47 m 0 -47
a 47 47 0 1 1 0 94 a 47 47 0 1 1 0 94
a 47 47 0 1 1 0 -94 a 47 47 0 1 1 0 -94
" stroke="#AA00FF" fill="none" stroke-linecap="round" stroke-width="5.0" "
stroke="#AA00FF"
fill="none"
stroke-linecap="round"
stroke-width="5.0"
class="el-progress-circle__path" class="el-progress-circle__path"
style="stroke-dasharray: 171.28px, 295.31px; stroke-dashoffset: 0px; transition: stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s;"> style="
</path> stroke-dasharray: 171.28px, 295.31px;
stroke-dashoffset: 0px;
transition: stroke-dasharray 0.6s ease 0s,
stroke 0.6s ease 0s;
"
></path>
</svg> </svg>
<div class="el-progress_text">95%</div> <div class="el-progress_text">95%</div>
</div> </div>
...@@ -381,12 +604,20 @@ ...@@ -381,12 +604,20 @@
<p class="c9">截止到5月底</p> <p class="c9">截止到5月底</p>
</div> </div>
<div class="p20 flex between"> <div class="p20 flex between">
<el-tabs v-model="activeName1" type="card" @tab-click="handleClick1" > <el-tabs v-model="activeName1" type="card" @tab-click="handleClick1">
<el-tab-pane label="重点领域安全生产风险普查率" name="first"> <el-tab-pane label="重点领域安全生产风险普查率" name="first">
<div id="main3" style="max-width: 100%;height: 320px;" v-show="activeName1 == 'first'"></div> <div
id="main3"
style="max-width: 100%; height: 320px"
v-show="activeName1 == 'first'"
></div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="企业风险档案" name="second"> <el-tab-pane label="企业风险档案" name="second">
<div id="main4" style="max-width: 100%;height: 320px;" v-show="activeName1 == 'second'"></div> <div
id="main4"
style="max-width: 100%; height: 320px"
v-show="activeName1 == 'second'"
></div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
...@@ -398,15 +629,15 @@ ...@@ -398,15 +629,15 @@
<p class="fs20 c3 b">自然灾害防控</p> <p class="fs20 c3 b">自然灾害防控</p>
<!-- <p class="c9">截止到5月底</p> --> <!-- <p class="c9">截止到5月底</p> -->
</div> </div>
<div class="p20 flex between"> <div class="p20 flex between">
<el-tabs v-model="activeName2" type="card" @tab-click="handleClick2"> <el-tabs v-model="activeName2" type="card" @tab-click="handleClick2">
<el-tab-pane label="基层防汛“掌上应急”开通情况" name="first"> <el-tab-pane label="基层防汛“掌上应急”开通情况" name="first">
<p class="textCenter mb12">全市基层防汛“掌上应急”开通情况</p> <p class="textCenter mb12">全市基层防汛“掌上应急”开通情况</p>
<div id="main5" style="max-width: 100%;height: 210px;"></div> <div id="main5" style="max-width: 100%; height: 210px"></div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="村级防汛防台形势图修编" name="second"> <el-tab-pane label="村级防汛防台形势图修编" name="second">
<p class="textCenter mb12">全市村级防汛防台形势图修编</p> <p class="textCenter mb12">全市村级防汛防台形势图修编</p>
<div id="main6" style="max-width: 100%;height: 210px;"></div> <div id="main6" style="max-width: 100%; height: 210px"></div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
...@@ -428,7 +659,10 @@ ...@@ -428,7 +659,10 @@
</div> </div>
<div class="flex acenter"> <div class="flex acenter">
<em class="zfx">◆</em> <em class="zfx">◆</em>
<el-progress :percentage="33.3" :show-text="false"></el-progress> <el-progress
:percentage="33.3"
:show-text="false"
></el-progress>
</div> </div>
</div> </div>
<div class="mb12 mr40"> <div class="mb12 mr40">
...@@ -438,7 +672,10 @@ ...@@ -438,7 +672,10 @@
</div> </div>
<div class="flex acenter"> <div class="flex acenter">
<em class="zfx">◆</em> <em class="zfx">◆</em>
<el-progress :percentage="22.22" :show-text="false"></el-progress> <el-progress
:percentage="22.22"
:show-text="false"
></el-progress>
</div> </div>
</div> </div>
<div class="mb12 mr40"> <div class="mb12 mr40">
...@@ -448,17 +685,20 @@ ...@@ -448,17 +685,20 @@
</div> </div>
<div class="flex acenter"> <div class="flex acenter">
<em class="zfx">◆</em> <em class="zfx">◆</em>
<el-progress :percentage="22.22" :show-text="false"></el-progress> <el-progress
:percentage="22.22"
:show-text="false"
></el-progress>
</div> </div>
</div> </div>
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="避灾安置场所建设" name="second"> <el-tab-pane label="避灾安置场所建设" name="second">
<p></p> <p></p>
<div id="main7" style="max-width: 100%;height: 210px;"></div> <div id="main7" style="max-width: 100%; height: 210px"></div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="森林火险防控" name="third"> <el-tab-pane label="森林火险防控" name="third">
<div id="main8" style="max-width: 100%;height: 210px;"></div> <div id="main8" style="max-width: 100%; height: 210px"></div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
...@@ -469,7 +709,7 @@ ...@@ -469,7 +709,7 @@
<div class="flex between card__header acenter"> <div class="flex between card__header acenter">
<div class="flex acenter"> <div class="flex acenter">
<p class="fs20 c3 b mr12">突发事件</p> <p class="fs20 c3 b mr12">突发事件</p>
<div class="cc8">{{myCity}}应急管理综合指挥平台</div> <div class="cc8">{{ myCity }}应急管理综合指挥平台</div>
</div> </div>
<p class="c9">截止到5月底</p> <p class="c9">截止到5月底</p>
</div> </div>
...@@ -487,8 +727,7 @@ ...@@ -487,8 +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 prop="origin" label="信息来源"> </el-table-column>
</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>
...@@ -499,649 +738,696 @@ ...@@ -499,649 +738,696 @@
</template> </template>
<script> <script>
let one, two, three,four,five,six,seven; let one, two, three, four, five, six, seven;
const _myCity="青田县" const _myCity = "青田县";
export default { import Breadcrumb from "../components/Breadcrumb.vue";
data() { import {getUserInfo,getTask,postUserInfo} from '../api/index'
return { export default {
myCity:_myCity, name: "epidemic",
activeName1: 'second', components: { Breadcrumb },
activeName2: 'first', data() {
activeName3: 'first', return {
tableData: [{ breadData: {
page_name: "安全生产",
annual_target:
"为自觉接受媒体监督,有效行使工作职责，努力做到权为民所用，更好地服务社群，树立城管形象。",
leading: "应急管理局",
},
myCity: _myCity,
activeName1: "second",
activeName2: "first",
activeName3: "first",
tableData: [
{
id: 1, id: 1,
uname: '丽水市百货大楼晶都步行街外立面改造装修工程发生一起高处坠落事故', uname:
level: '一般', "丽水市百货大楼晶都步行街外立面改造装修工程发生一起高处坠落事故",
types: '建筑业', level: "一般",
time: '2021年06月18日 08:25:00', types: "建筑业",
origin: '丽水市莲都区应急管理局', time: "2021年06月18日 08:25:00",
msg: '应急预案' origin: "丽水市莲都区应急管理局",
}, { msg: "应急预案",
},
{
id: 2, id: 2,
uname: '云和县发生一起事故造成1人死亡事件', uname: "云和县发生一起事故造成1人死亡事件",
level: '一般', level: "一般",
types: '商贸其他', types: "商贸其他",
time: '2021年06月10日 08:25:00', time: "2021年06月10日 08:25:00",
origin: '龙泉市应急管理局', origin: "龙泉市应急管理局",
msg: '应急预案' msg: "应急预案",
}, { },
{
id: 3, id: 3,
uname: '龙泉发生一起叉车碰撞事故，致一人死亡', uname: "龙泉发生一起叉车碰撞事故，致一人死亡",
level: '一般', level: "一般",
types: '轻工', types: "轻工",
time: '2021年06月10日 07:25:00', time: "2021年06月10日 07:25:00",
origin: '乡镇上报', origin: "乡镇上报",
msg: '应急预案' msg: "应急预案",
}, { },
{
id: 4, id: 4,
uname: '丽水市百货大楼晶都步行街外立面改造装修工程发生一起高处坠落事故', uname:
level: '一般', "丽水市百货大楼晶都步行街外立面改造装修工程发生一起高处坠落事故",
types: '建筑业', level: "一般",
time: '2021年06月18日 08:25:00', types: "建筑业",
origin: '丽水市莲都区应急管理局', time: "2021年06月18日 08:25:00",
msg: '应急预案' origin: "丽水市莲都区应急管理局",
}, { msg: "应急预案",
},
{
id: 5, id: 5,
uname: '青田县山口镇至方山乡公路发生山体塌方', uname: "青田县山口镇至方山乡公路发生山体塌方",
level: '一般', level: "一般",
types: '地质灾害', types: "地质灾害",
time: '2021年05月27日 08:25:00', time: "2021年05月27日 08:25:00",
origin: '青田县应急管理局', origin: "青田县应急管理局",
msg: '应急预案' msg: "应急预案",
}, { },
{
id: 6, id: 6,
uname: '青田县东源镇浙江以勒标准件制造有限公司发生一起触电事故致一人死亡', uname:
level: '特别重大', "青田县东源镇浙江以勒标准件制造有限公司发生一起触电事故致一人死亡",
types: '商贸其他', level: "特别重大",
time: '2021年05月12日 08:25:00', types: "商贸其他",
origin: '青田应急值班室', time: "2021年05月12日 08:25:00",
msg: '应急预案' origin: "青田应急值班室",
}], msg: "应急预案",
gkShow: false, },
whShow: true, ],
showTit: false gkShow: false,
}; whShow: true,
showTit: false,
};
},
mounted() {
let _this = this;
this.initGzbgChart();
this.initGzbgChart2();
this.initGzbgChart3();
this.initGzbgChart4();
this.initGzbgChart5();
this.initGzbgChart6();
this.initGzbgChart7();
window.onresize = () => {
return (() => {
_this.initGzbgChart();
_this.initGzbgChart2();
_this.initGzbgChart3();
_this.initGzbgChart4();
_this.initGzbgChart5();
_this.initGzbgChart6();
_this.initGzbgChart7();
})();
};
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();
});
}, },
mounted() { handleClick2(tab, event) {
let _this =this; this.$nextTick(function () {
this.initGzbgChart(); this.initGzbgChart5();
this.initGzbgChart2(); this.initGzbgChart6();
this.initGzbgChart3(); });
this.initGzbgChart4();
this.initGzbgChart5();
this.initGzbgChart6();
this.initGzbgChart7();
window.onresize = () => {
return (() => {
_this.initGzbgChart();
_this.initGzbgChart2();
_this.initGzbgChart3();
_this.initGzbgChart4();
_this.initGzbgChart5();
_this.initGzbgChart6();
_this.initGzbgChart7();
})();
};
}, },
methods: { handleClick3(tab, event) {
handleClick1(tab, event) { this.$nextTick(function () {
this.activeName1 = tab.name; this.initGzbgChart7();
this.$nextTick(function(){ // this.initGzbgChart8();
this.initGzbgChart3(); });
this.initGzbgChart4(); },
}) indexMethod(index) {
}, return index * 1 + 1;
handleClick2(tab, event) { },
this.$nextTick(function(){ gk() {
this.initGzbgChart5(); this.gkShow = true;
this.initGzbgChart6(); this.whShow = !this.whShow;
},
}) wh() {
}, this.whShow = true;
handleClick3(tab, event) { this.gkShow = !this.gkShow;
this.$nextTick(function(){ },
this.initGzbgChart7(); warns() {
// this.initGzbgChart8(); this.showTit = true;
}) },
}, initGzbgChart() {
indexMethod(index) { if (one != null && one != "" && one != undefined) {
return index * 1 + 1; one.dispose(); //销毁
}, }
gk() { one = this.$echarts.init(document.getElementById("main1"));
this.gkShow = true one.setOption({
this.whShow = !this.whShow color: ["#1492ff", "#d40000"],
}, tooltip: {
wh() { trigger: "axis",
this.whShow = true },
this.gkShow = !this.gkShow legend: {
}, data: ["事故起数", "死亡人数"],
warns() { bottom: 0,
this.showTit = true },
}, grid: {
initGzbgChart() { top: "8%",
if (one != null && one != "" && one != undefined) { left: "3%",
one.dispose(); //销毁 right: "5%",
} bottom: "15%",
one = this.$echarts.init( containLabel: true,
document.getElementById("main1") },
); calculable: true,
one.setOption({ xAxis: [
color: ['#1492ff', '#d40000'], {
tooltip: { type: "category",
trigger: 'axis' data: [
}, "1月",
legend: { "2月",
data: ['事故起数', '死亡人数'], "3月",
bottom: 0 "4月",
}, "5月",
grid: { "6月",
top: '8%', "7月",
left: '3%', "8月",
right: '5%', "9月",
bottom: '15%', "10月",
containLabel: true "11月",
}, "12月",
calculable: true,
xAxis: [
{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}
], ],
yAxis: { },
type: 'value', ],
show: false yAxis: {
} type: "value",
, show: false,
series: [ },
{ series: [
name: '事故起数', {
type: 'bar', name: "事故起数",
data: [6, 1, 7, 5, 4, 0, 0, 0, 0, 0, 0, 0], type: "bar",
label: { // 在图形上显示每个数据 data: [6, 1, 7, 5, 4, 0, 0, 0, 0, 0, 0, 0],
show: true, label: {
position: 'top', // 在图形上显示每个数据
itemStyle: { show: true,
color: '#1492ff' //柱子的颜色 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", //柱子的颜色
}, },
{ },
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() { initGzbgChart2() {
if (two != null && two != "" && two != undefined) { if (two != null && two != "" && two != undefined) {
two.dispose(); //销毁 two.dispose(); //销毁
} }
two = this.$echarts.init( two = this.$echarts.init(document.getElementById("main2"));
document.getElementById("main2")
);
two.setOption({ two.setOption({
color: ['#ff6b00', '#d40000', '#15be50'], color: ["#ff6b00", "#d40000", "#15be50"],
tooltip: { tooltip: {
trigger: 'item' 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}起",
}, },
legend: { emphasis: {
bottom: 0, itemStyle: {
left: 'center' shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
}, },
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: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
});
}, },
initGzbgChart3() { initGzbgChart3() {
if (three != null && three != "" && three != undefined) { if (three != null && three != "" && three != undefined) {
three.dispose(); //销毁 three.dispose(); //销毁
} }
three = this.$echarts.init( three = this.$echarts.init(document.getElementById("main3"));
document.getElementById("main3")
);
three.setOption({ three.setOption({
color: ['#15be50'], color: ["#15be50"],
xAxis: { xAxis: {
type: 'category', type: "category",
data: ['危化领域', '工矿领域', '消防领域', '道路交通', '建设施工', '城市运行', '旅游领域', '特种设备'], data: [
axisLabel: { "危化领域",
textStyle: { "工矿领域",
color: '#333', //坐标值得具体的颜色 "消防领域",
fontSize: 14 "道路交通",
}, "建设施工",
interval: 0 "城市运行",
}, "旅游领域",
axisTick: { "特种设备",
show: true ],
}, axisLabel: {
axisLine: { textStyle: {
lineStyle: { color: "#333", //坐标值得具体的颜色
color: '#dddddd', fontSize: 14,
}
}
}, },
yAxis: { interval: 0,
show: false },
axisTick: {
show: true,
},
axisLine: {
lineStyle: {
color: "#dddddd",
}, },
series: [{ },
data: [20, 14, 18, 15, 10, 14, 26, 23], },
type: 'bar', yAxis: {
label: { show: false,
show: true, },
position: 'top', series: [
formatter: '{c}%' {
}, data: [20, 14, 18, 15, 10, 14, 26, 23],
barWidth: 30 // 柱子宽度 type: "bar",
}], label: {
grid: { show: true,
top: '5%', position: "top",
left: '3%', formatter: "{c}%",
right: '5%', },
bottom: '5%', barWidth: 30, // 柱子宽度
containLabel: true },
} ],
}); grid: {
top: "5%",
left: "3%",
right: "5%",
bottom: "5%",
containLabel: true,
},
});
}, },
initGzbgChart4() { initGzbgChart4() {
if (four != null && four != "" && four != undefined) { if (four != null && four != "" && four != undefined) {
four.dispose(); //销毁 four.dispose(); //销毁
} }
four = this.$echarts.init( four = this.$echarts.init(document.getElementById("main4"));
document.getElementById("main4")
);
four.setOption({ four.setOption({
color: ['#EE6666', '#FAC858', '#5470C6', '#91CC75'], color: ["#EE6666", "#FAC858", "#5470C6", "#91CC75"],
tooltip: { tooltip: {
trigger: 'item' trigger: "item",
}, },
legend: { legend: {
right: 0, right: 0,
orient: 'vertical', orient: "vertical",
top: 'center' 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}%",
}, },
grid: { emphasis: {
top: '5%', itemStyle: {
left: '3%', shadowBlur: 10,
right: '5%', shadowOffsetX: 0,
bottom: '18%', shadowColor: "rgba(0, 0, 0, 0.5)",
containLabel: true },
}, },
series: [ },
{ ],
name: '访问来源', });
type: 'pie',
radius: '50%',
data: [
{ value: 0.22, name: '重大风险', seriesName: '15' },
{ value: 0.06, name: '较大风险', seriesName: '4 ' },
{ value: 14.39, name: '一般风险', seriesName: '975' },
{ value: 85.33, name: '低风险', seriesName: '5809' }
],
label: {
show: true,
// position: 'top',
formatter: '{b} {d} {c}%'
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
});
}, },
initGzbgChart5() { initGzbgChart5() {
if (five != null && five != "" && five != undefined) { if (five != null && five != "" && five != undefined) {
five.dispose(); //销毁 five.dispose(); //销毁
} }
five = this.$echarts.init( five = this.$echarts.init(document.getElementById("main5"));
document.getElementById("main5")
);
five.setOption({ five.setOption({
xAxis: { xAxis: {
type: 'category', type: "category",
data: ['05-01', '05-08', '05-15', '05-22', '05-27', '05-31'] 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",
}, },
yAxis: { },
type: 'value', axisLabel: {
min: 0, formatter: "{value}%",
max: 100, },
splitNumber: 5, },
splitLine: { series: [
show: true {
}, data: [15, 21, 23, 39, 42, 65],
axisLine: { type: "line",
lineStyle: { },
color: '#333333', ],
} grid: {
}, top: "4%",
axisLabel: { left: "3%",
formatter: '{value}%' right: "5%",
} bottom: "18%",
}, containLabel: true,
series: [{ },
data: [15, 21, 23, 39, 42, 65], });
type: 'line'
}],
grid: {
top: '4%',
left: '3%',
right: '5%',
bottom: '18%',
containLabel: true
}
});
}, },
initGzbgChart6() { initGzbgChart6() {
if (six != null && six != "" && six != undefined) { if (six != null && six != "" && six != undefined) {
six.dispose(); //销毁 six.dispose(); //销毁
} }
six = this.$echarts.init( six = this.$echarts.init(document.getElementById("main6"));
document.getElementById("main6")
);
six.setOption({ six.setOption({
color: ['#FF3E38', '#53A8E8'], color: ["#FF3E38", "#53A8E8"],
tooltip: { tooltip: {
trigger: '11' 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,
}, },
legend: { emphasis: {
// orient: 'vertical', itemStyle: {
left: 'center', shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
}, },
series: [ },
{ ],
name: '访问来源', grid: {
type: 'pie', top: "4%",
radius: '50%', left: "3%",
data: [ right: "5%",
{ value: 0, name: '未编修', seriesName: '0' }, bottom: "18%",
{ value: 100, name: '已编修', seriesName: '140' } containLabel: true,
], },
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() { initGzbgChart7() {
if (seven != null && seven != "" && seven != undefined) { if (seven != null && seven != "" && seven != undefined) {
seven.dispose(); //销毁 seven.dispose(); //销毁
} }
seven = this.$echarts.init( seven = this.$echarts.init(document.getElementById("main7"));
document.getElementById("main7")
);
seven.setOption({ seven.setOption({
xAxis: { xAxis: {
type: 'category', type: "category",
data: ['05-01', '05-08', '05-15', '05-22', '05-27', '05-31', '06-07', '06-14', '06-21'] 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",
}, },
legend: { },
data: ['乡镇应急救援队伍'] },
}, series: [
yAxis: { {
type: 'value', data: [21, 41, 50, 70, 77, 90, 105, 112, 117],
min: 0, type: "line",
max: 120, },
splitNumber: 5, ],
splitLine: { grid: {
show: true top: "10%",
}, left: "3%",
axisLine: { right: "5%",
lineStyle: { bottom: "0%",
color: '#333333', 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) {
.main {
width: 100%;
background-color: #fff;
margin: 0px auto;
padding: 30px 0;
}
.minHeader, @media screen and (max-width: 1200px) {
.market { .main {
width: calc(100% - 40px); width: 100%;
box-sizing: border-box; background-color: #fff;
border-radius: 4px; margin: 0px auto;
padding: 20px; padding: 30px 0;
margin: 20px auto 0;
background: #fff;
}
.minTop {
width: calc(100% - 40px);
box-sizing: border-box;
border-radius: 4px;
margin: 0 auto;
}
} }
@media screen and (min-width: 1200px) { .minHeader,
.main { .market {
width: 1200px; width: calc(100% - 40px);
margin: 0px auto; box-sizing: border-box;
padding: 30px 0; border-radius: 4px;
} // padding: 20px;
margin: 20px auto 0;
.minHeader, background: #fff;
.market {
width: 1160px;
border-radius: 4px;
padding: 20px 20px 20px;
background: #fff;
}
.minTop {
background-color: #fff;
width: 1200px;
border-radius: 4px;
}
} }
.card__header { .minTop {
padding: 18px 20px; width: calc(100% - 40px);
border-bottom: 1px solid #ebeef5;
-webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
border-radius: 4px;
margin: 20px auto;
} }
}
.el-breadcrumb__inner.is-link { @media screen and (min-width: 1200px) {
font-size: 16px !important; .main {
width: 1200px;
margin: 0px auto;
padding: 30px 0;
} }
.el-icon-s-marketing { .minHeader,
color: rgb(54, 153, 247); .market {
font-size: 30px; width: 1200px;
border-radius: 4px;
// padding: 20px 20px 20px;
background: #fff;
} }
.cline { .minTop {
width: 1px; background-color: #fff;
height: 30px; width: 1200px;
background: #dddddd; border-radius: 4px;
margin: 0 8px;
} }
}
.hl30 { .card__header {
height: 30px; padding: 18px 20px;
line-height: 30px; border-bottom: 1px solid #ebeef5;
} -webkit-box-sizing: border-box;
box-sizing: border-box;
}
.shadow { .el-breadcrumb__inner.is-link {
box-shadow: 0 2px 12px 0 #ccc; font-size: 16px !important;
} }
.norm { .el-icon-s-marketing {
font-style: normal; color: rgb(54, 153, 247);
color: #15be50; font-size: 30px;
} }
.zhan { .cline {
width: 100%; width: 1px;
height: 280px; height: 30px;
/* background: #ccc; */ background: #dddddd;
} margin: 0 8px;
}
.w100 { .hl30 {
width: 100%; height: 30px;
} line-height: 30px;
}
.w49 { .shadow {
width: 49%; box-shadow: 0 2px 12px 0 #ccc;
} }
.w57 { .norm {
width: 57%; font-style: normal;
} color: #15be50;
}
.w41 { .zhan {
width: 41%; width: 100%;
} height: 280px;
/* background: #ccc; */
}
.lh30 { .w100 {
line-height: 30px; width: 100%;
} }
.h60 { .w49 {
height: 60px; width: 49%;
} }
.btn { .w57 {
width: 22%; width: 57%;
height: 40px; }
line-height: 40px;
border-radius: 4px;
text-align: center;
cursor: pointer;
}
.btn1 { .w41 {
width: 22%; width: 41%;
height: 40px; }
line-height: 40px;
border-radius: 4px;
text-align: center;
cursor: pointer;
}
.btn2 { .lh30 {
width: 22%; line-height: 30px;
height: 40px; }
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;
}
.btn1:hover { .h60 {
color: #409eff; height: 60px;
border-color: #c6e2ff; }
background-color: #ecf5ff;
}
.btn:hover { .btn {
background: #66b1ff; width: 22%;
border-color: #66b1ff; height: 40px;
color: #fff; line-height: 40px;
} border-radius: 4px;
text-align: center;
cursor: pointer;
}
.pore { .btn1 {
position: relative; width: 22%;
} height: 40px;
line-height: 40px;
border-radius: 4px;
text-align: center;
cursor: pointer;
}
.el-popover { .btn2 {
min-width: 55px !important; width: 22%;
left: 415px !important; height: 40px;
} 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;
}
.el-tooltip__popper { .btn1:hover {
border: 1px solid #ecf5ff !important; color: #409eff;
background: #fff !important; border-color: #c6e2ff;
} background-color: #ecf5ff;
}
.btn:hover {
background: #66b1ff;
border-color: #66b1ff;
color: #fff;
}
.pore {
position: relative;
}
.el-popover {
min-width: 55px !important;
left: 415px !important;
}
/* .poab { .el-tooltip__popper {
border: 1px solid #ecf5ff !important;
background: #fff !important;
}
/* .poab {
position: absolute; position: absolute;
top: -70px; top: -70px;
width: 80px; width: 80px;
...@@ -1172,105 +1458,105 @@ ...@@ -1172,105 +1458,105 @@
border-right-color: transparent; border-right-color: transparent;
} */ } */
.el-progress--circle, .el-progress--circle,
.el-progress--dashboard { .el-progress--dashboard {
display: inline-block; display: inline-block;
position: relative; position: relative;
} }
.el-button:hover { .el-button:hover {
color: #fff; color: #fff;
border-color: #c8c9cc !important; border-color: #c8c9cc !important;
background-color: #c8c9cc; background-color: #c8c9cc;
} }
.el-progress_text { .el-progress_text {
font-size: 16px !important; font-size: 16px !important;
color: #000; color: #000;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 0; left: 0;
width: 100%; width: 100%;
text-align: center; text-align: center;
margin: 0; margin: 0;
transform: translateY(-50%); transform: translateY(-50%);
} }
.bgs { .bgs {
width: 60px; width: 60px;
height: 60px; height: 60px;
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
top: 10px; top: 10px;
margin: auto; margin: auto;
border-radius: 50%; border-radius: 50%;
/* background: #48e1a7; */ /* background: #48e1a7; */
} }
.bgc89 { .bgc89 {
background: #c8c9cc; background: #c8c9cc;
} }
.borc8 { .borc8 {
border: 1px solid #c8c9cc; border: 1px solid #c8c9cc;
} }
.el-tabs { .el-tabs {
width: 100% !important; width: 100% !important;
} }
.mb12 { .mb12 {
margin-bottom: 12px; margin-bottom: 12px;
} }
.zfx { .zfx {
color: #ff6b00; color: #ff6b00;
font-style: normal; font-style: normal;
font-size: 20px; font-size: 20px;
vertical-align: middle; vertical-align: middle;
line-height: 22px; line-height: 22px;
margin-right: 12px; margin-right: 12px;
} }
.el-progress { .el-progress {
width: 100% !important; width: 100% !important;
} }
.cc8 { .cc8 {
background: #c8c9cc; background: #c8c9cc;
color: #fff; color: #fff;
padding: 12px 20px; padding: 12px 20px;
border-radius: 5px; border-radius: 5px;
} }
.aqsc .el-table__row .el-table_1_column_2 { .aqsc .el-table__row .el-table_1_column_2 {
color: #409eff; color: #409eff;
font-size: 12px; font-size: 12px;
} }
.el-table__row .el-table_1_column_7 { .el-table__row .el-table_1_column_7 {
color: #aaa !important; 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 @ d45c7cf3
<template> <template>
<div class="ecology"> <div class="ecology">
<el-row :gutter="20"> <div class="">
<Breadcrumb :breadData="breadData"></Breadcrumb>
</div>
<el-row :gutter="20" class="mt20">
<el-col :sm="12" :xs="24"> <el-col :sm="12" :xs="24">
<div class="clear-water unify-item"> <div class="clear-water unify-item">
<h3 class="module-tit">深化碧水行动</h3> <h3 class="module-tit">深化碧水行动</h3>
...@@ -178,12 +181,18 @@ ...@@ -178,12 +181,18 @@
</template> </template>
<script> <script>
import Breadcrumb from "../components/Breadcrumb.vue";
import Tree from "../components/Tree.vue"; import Tree from "../components/Tree.vue";
export default { export default {
name: "ecology", name: "ecology",
components: { Tree }, components: { Tree, Breadcrumb },
data() { data() {
return { return {
breadData: {
page_name: "生态文明",
annual_target:"暂无数据",
leading: "青田县环保局",
},
aqList: [ aqList: [
{ {
name: "优", name: "优",
...@@ -335,6 +344,11 @@ export default { ...@@ -335,6 +344,11 @@ export default {
], ],
}; };
}, },
mounted() {
window.addEventListener("resize", function (e) {
window.parent.postMessage(document.body.scrollHeight, '*');
});
},
}; };
</script> </script>
......
qingtian_vue/src/views/Epidemic.vue
View file @ d45c7cf3
<template> <template>
<div class="epidemic"> <div class="epidemic">
<Breadcrumb :breadData="breadData"></Breadcrumb> <Breadcrumb :breadData="breadData"></Breadcrumb>
<div class="epidemic-tabs"> <div class="epidemic-tabs mt12">
<ul class="et-con"> <ul class="et-con">
<li <li
v-for="(item, index) in epidemic_tabs_info" v-for="(item, index) in epidemic_tabs_info"
...@@ -692,6 +692,9 @@ export default { ...@@ -692,6 +692,9 @@ export default {
this.init_line_1(); this.init_line_1();
this.init_bar_2(); this.init_bar_2();
this.init_bar_1(); this.init_bar_1();
window.addEventListener("resize", function (e) {
window.parent.postMessage(document.body.scrollHeight, '*');
});
}, },
methods: { methods: {
tabIdx(i) { tabIdx(i) {
......
qingtian_vue/src/views/Industry.vue
View file @ d45c7cf3
...@@ -3,9 +3,10 @@ ...@@ -3,9 +3,10 @@
<div class="index"> <div class="index">
<div class="main"> <div class="main">
<div class="minHeader shadow"> <div class="minHeader shadow">
<div class="card__header flex between acenter"> <Breadcrumb :breadData="breadData"></Breadcrumb>
<!-- <div class="card__header flex between acenter">
<el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> <el-breadcrumb-item><a href="https://szzf.qingtian.gov.cn:18080">首页</a></el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/' }" <el-breadcrumb-item :to="{ path: '/' }"
>产业发展</el-breadcrumb-item >产业发展</el-breadcrumb-item
> >
...@@ -24,7 +25,7 @@ ...@@ -24,7 +25,7 @@
</div> </div>
<div class="c3">暂无数据</div> <div class="c3">暂无数据</div>
</div> </div>
</div> </div> -->
</div> </div>
<div class="tabtits"> <div class="tabtits">
<el-row :gutter="10"> <el-row :gutter="10">
...@@ -203,10 +204,19 @@ ...@@ -203,10 +204,19 @@
</template> </template>
<script> <script>
import Breadcrumb from "../components/Breadcrumb.vue";
export default { export default {
components: {}, components: {
Breadcrumb
},
data() { data() {
return { return {
breadData: {
page_name: "产业发展",
annual_target:
"暂无数据",
leading: "青田县发展和改革局",
},
myCityName:'青田县' myCityName:'青田县'
}; };
}, },
...@@ -215,6 +225,9 @@ export default { ...@@ -215,6 +225,9 @@ export default {
this.initCharts2(); this.initCharts2();
this.initCharts3(); this.initCharts3();
this.initCharts4(); this.initCharts4();
window.addEventListener("resize", function (e) {
window.parent.postMessage(document.body.scrollHeight, '*');
});
}, },
//方法集合 //方法集合
methods: { methods: {
...@@ -564,7 +577,7 @@ export default { ...@@ -564,7 +577,7 @@ export default {
} }
.minHeader, .minHeader,
.tabtits { .tabtits {
width: calc(100% - 40px); width: calc(100% - 20px);
box-sizing: border-box; box-sizing: border-box;
border-radius: 4px; border-radius: 4px;
} }
...@@ -642,7 +655,7 @@ export default { ...@@ -642,7 +655,7 @@ export default {
</style> </style>
<style> <style>
.el-breadcrumb__inner.is-link { .el-breadcrumb__inner.is-link {
font-weight: 400 !important; font-weight: 700 !important;
color: #333333 !important; color: #333333 !important;
} }
.el-breadcrumb__inner { .el-breadcrumb__inner {
......
qingtian_vue/src/views/Kjcx.vue
View file @ d45c7cf3
...@@ -259,6 +259,9 @@ export default { ...@@ -259,6 +259,9 @@ export default {
_this.init5(); _this.init5();
})(); })();
}; };
window.addEventListener("resize", function (e) {
window.parent.postMessage(document.body.scrollHeight, '*');
});
}, },
methods: { methods: {
init1() { init1() {
......
qingtian_vue/src/views/Live.vue
View file @ d45c7cf3
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="live"> <div class="live">
<div class="main"> <div class="main">
<Breadcrumb :breadData="breadData"></Breadcrumb> <Breadcrumb :breadData="breadData"></Breadcrumb>
<el-row :gutter="20"> <el-row :gutter="20" class="mt20">
<el-col :span="12"> <el-col :span="12">
<div class="task"> <div class="task">
<div class="task-census"> <div class="task-census">
...@@ -312,6 +312,9 @@ export default { ...@@ -312,6 +312,9 @@ export default {
mounted() { mounted() {
this.init_bar_1(); this.init_bar_1();
this.init_bar_2(); this.init_bar_2();
window.addEventListener("resize", function (e) {
window.parent.postMessage(document.body.scrollHeight, '*');
});
// let _this =this; // let _this =this;
// window.addEventListener('resize', () => { // window.addEventListener('resize', () => {
// init_bar_1().resize() // init_bar_1().resize()
......
qingtian_vue/src/views/MyIndex.vue
View file @ d45c7cf3
...@@ -43,7 +43,11 @@ ...@@ -43,7 +43,11 @@
</li> </li>
<li> <li>
信息管理-子门户&nbsp;&nbsp;&nbsp;&nbsp;<router-link tag="span" @click.native="handle('/xxgl','xxgl')" to="#" class="link">点击跳转</router-link> 电子健康证明-子门户&nbsp;&nbsp;&nbsp;&nbsp;<router-link tag="span" @click.native="handle('/xxgl','xxgl')" to="#" class="link">点击跳转</router-link>
</li>
<li>
双招双引-子门户&nbsp;&nbsp;&nbsp;&nbsp;<router-link tag="span" @click.native="handle('/szsy','szsy')" to="#" class="link">点击跳转</router-link>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -60,7 +64,7 @@ export default { ...@@ -60,7 +64,7 @@ export default {
}, },
methods: { methods: {
handle(path,name) { handle(path,name) {
let { href } = this.$router.resolve({ path: path }); let { href } = this.$router.resolve({ path: path+ '?debug=true' });
window.open(href, name); window.open(href, name);
}, },
}, },
......
qingtian_vue/src/views/NewUrbanization.vue
View file @ d45c7cf3
...@@ -412,6 +412,9 @@ export default { ...@@ -412,6 +412,9 @@ export default {
this.init_bar_2(); this.init_bar_2();
this.init_circle_3(); this.init_circle_3();
this.init_bar_3(); this.init_bar_3();
window.addEventListener("resize", function (e) {
window.parent.postMessage(document.body.scrollHeight, '*');
});
// let _this =this; // let _this =this;
// window.onresize = () => { // window.onresize = () => {
// return (() => { // return (() => {
......
qingtian_vue/src/views/Region.vue
View file @ d45c7cf3
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="region"> <div class="region">
<div class="main"> <div class="main">
<Breadcrumb :breadData="breadData"></Breadcrumb> <Breadcrumb :breadData="breadData"></Breadcrumb>
<el-row :gutter="20"> <el-row :gutter="20" class="mt20">
<el-col :span="12"> <el-col :span="12">
<div class="unify-item box1_l"> <div class="unify-item box1_l">
<div class="module-tit">政府工作报告落实情况</div> <div class="module-tit">政府工作报告落实情况</div>
...@@ -87,6 +87,9 @@ export default { ...@@ -87,6 +87,9 @@ export default {
this.initGzbgChart(); this.initGzbgChart();
this.initSq26x1Chart(); this.initSq26x1Chart();
this.initSq26x2Chart(); this.initSq26x2Chart();
window.addEventListener("resize", function (e) {
window.parent.postMessage(document.body.scrollHeight, '*');
});
// let _this =this; // let _this =this;
// window.onresize = () => { // window.onresize = () => {
// return (() => { // return (() => {
...@@ -96,7 +99,7 @@ export default { ...@@ -96,7 +99,7 @@ export default {
// })(); // })();
// }; // };
}, },
methods: { methods: {
initGzbgChart() { initGzbgChart() {
if (one != null && one != "" && one != undefined) { if (one != null && one != "" && one != undefined) {
one.dispose();//销毁 one.dispose();//销毁
......
qingtian_vue/src/views/Sxh.vue
View file @ d45c7cf3
...@@ -148,6 +148,9 @@ export default { ...@@ -148,6 +148,9 @@ export default {
}, },
mounted() { mounted() {
this.initCharts1(); this.initCharts1();
window.addEventListener("resize", function (e) {
window.parent.postMessage(document.body.scrollHeight, '*');
});
}, },
methods: { methods: {
initCharts1() { initCharts1() {
......
qingtian_vue/src/views/Szsy.vue 0 → 100644
View file @ d45c7cf3
<!-- -->
<template>
<div class="index">
<div class="main">
<div class="minHeader shadow">
<Breadcrumb :breadData="breadData"></Breadcrumb>
</div>
<div class="mt20 minTop shadow">
<el-row>
<el-col :xs="24" :sm="12" :md="12" :lg="12">
<div class="">
<div class="card__header flex between acenter">
<p class="tieaft">重点关注</p>
<div class="flex acenter">
<div class="c149">查看更多</div>
<i class="el-icon-arrow-right c149"></i>
</div>
</div>
<div class="card__headers">
<div class="c149">· 新引进项目进展情况</div>
<div class="mt12 flex between acenter">
<el-select v-model="value" placeholder="2021年">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<div class="flex acenter">
<div class="flex acenter">
<div class="icon15 bg15b"></div>
<div class="c6">已落地</div>
</div>
<div class="flex acenter">
<div class="icon15 bg149"></div>
<div class="c6">在建</div>
</div>
<div class="flex acenter">
<div class="icon15 bgffc"></div>
<div class="c6">投资</div>
</div>
<div class="flex acenter">
<div class="icon15 bgff5"></div>
<div class="c6">税收总额</div>
</div>
</div>
</div>
<div>
<div id="main" style="max-width: 100%; height: 280px"></div>
</div>
</div>
</div>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12">
<div class="">
<div class="card__header flex between acenter">
<p class="tieaft">工作动态</p>
<div class="flex acenter">
<div class="c149">查看更多</div>
<i class="el-icon-arrow-right c149"></i>
</div>
</div>
<div class="card__headers">
<div class="flex acenter">
<img src="../assets/images/zheng.png" alt="" />
<div class="ml20 b c3 fs18">
2月23日, 市四届人大六次会议召开
</div>
</div>
<div class="mt12 text">
报告在回顾2020年工作时指出:
丽水经济开发区新增储备工业发展空间3万亩，新引进重大招商项目114个，总投资131.4亿
元，已入园项目中世界500强1个、中国500强3个、央企2个上市公司7个。新引进总部经济项目25个，落地数字经济项目18
个，国家经开区排名从158位跃升至80位。
</div>
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :xs="24" :sm="12" :md="12" :lg="12">
<div class="">
<div class="card__header flex between acenter">
<p class="tieaft">任务进行时</p>
</div>
<div class="card__headers">
<div class="mb20">
<div class="flex between acenter">
<p class="c149">· 招商引资</p>
<div class="flex acenter">
<div class="c149">查看更多</div>
<i class="el-icon-arrow-right c149"></i>
</div>
</div>
<div class="flex lab around acenter mt12 b">
<div>大项目 (110个) : 22个</div>
<div class="lines"></div>
<div>实际到资 (189亿元) : 35亿元</div>
</div>
</div>
<div class="mb20">
<div class="flex between acenter">
<p class="c149">· 招才引智</p>
<div class="flex acenter">
<div class="c149">查看更多</div>
<i class="el-icon-arrow-right c149"></i>
</div>
</div>
<div class="mt12">
<el-row :gutter="12">
<el-col :xs="24" :sm="12" :md="12" :lg="12">
<div class="item">领导引才 (次) : 10</div>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12">
<div class="item">引才活动 (次) : 8</div>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12">
<div class="item">项目对接 (个) : 242</div>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12">
<div class="item">人才平台 (个) : 7</div>
</el-col>
</el-row>
</div>
</div>
</div>
</div>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12">
<div class="">
<div class="card__header flex between acenter">
<p class="tieaft">引进人才</p>
<div class="flex acenter">
<div class="c149">查看更多</div>
<i class="el-icon-arrow-right c149"></i>
</div>
</div>
<div class="mt12 card__headers">
<el-row :gutter="12">
<el-col :xs="24" :sm="12" :md="8" :lg="8">
<div class="items">
<div>新引进 (留丽)</div>
<div>高校毕业生</div>
<div class="cff5 b mt8">2140人</div>
</div>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="8">
<div class="items">
<div>新引进 (留丽)</div>
<div>博士</div>
<div class="cff5 b mt8">30人</div>
</div>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="8">
<div class="items">
<div>新招收</div>
<div>博士后研究人员</div>
<div class="cff5 b mt8">27人</div>
</div>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="8">
<div class="items">
<div>新引进</div>
<div>硕士</div>
<div class="cff5 b mt8">147人</div>
</div>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="8">
<div class="items">
<div>新引进</div>
<div>外国专家智力</div>
<div class="cff5 b mt8">172人</div>
</div>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="8">
<div class="items">
<div>新遴选</div>
<div>"绿谷精英"</div>
<div class="cff5 b mt8">724人</div>
</div>
</el-col>
</el-row>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
</div>
</template>
<script>
import Breadcrumb from "../components/Breadcrumb.vue";
export default {
components: {
Breadcrumb,
},
data() {
return {
myCityName: "青田县",
breadData: {
page_name: "双招双引",
annual_target: "暂无数据",
leading: "青田县招商局",
},
options: [
{
value: "2021年",
label: "2021年",
},
{
value: "2020年",
label: "2020年",
},
],
value: "",
};
},
mounted() {
this.initCharts1();
window.addEventListener("resize", function (e) {
window.parent.postMessage(document.body.scrollHeight, '*');
});
},
//方法集合
methods: {
initCharts1() {
var chartDom = document.getElementById("main");
var myChart1 = this.$echarts.init(chartDom);
var option;
option = {
color: ["#ffc000", "#15be50", "#1492ff", "#ff5151"],
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: [
{
type: "category",
data: [
"丽水",
"莲都",
"青田",
"龙泉",
"云和",
"遂昌",
"庆元",
"景宁",
"松阳",
"缙云",
],
},
],
yAxis: [
{
type: "value",
name: "个",
min: 0,
max: 50,
interval: 10,
},
{
type: "value",
name: "亿元",
min: 0,
max: 100000,
interval: 20000,
},
],
series: [
{
name: "投资",
type: "bar",
stack: "进展",
emphasis: {
focus: "series",
},
data: [20, 10, 12, 10, 10, 10, 10, 10, 10, 10],
},
{
name: "已落地",
type: "bar",
stack: "进展",
emphasis: {
focus: "series",
},
data: [10, 20, 18, 20, 5, 15, 5, 2, 2, 5],
},
{
name: "在建",
type: "bar",
stack: "进展",
emphasis: {
focus: "series",
},
data: [12, 15, 5, 12, 10, 8, 23, 6, 11, 15],
},
{
data: [
90000, 100000, 85000, 92000, 55000, 72000, 90000, 60000, 65000,
80000,
],
type: "line",
yAxisIndex: 1,
},
],
};
option && myChart1.setOption(option);
window.addEventListener("resize", () => {
myChart1.resize();
});
},
},
};
</script>
<style lang="scss" scoped>
.index {
background: #efefef !important;
height: 100%;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
top: 0;
right: 0;
}
@media screen and(min-width:1200px) {
#app {
width: 1200px;
background: #efefef !important;
}
.main {
width: 1200px !important;
}
}
.main {
width: 100%;
margin: 0px auto;
padding: 20px 0;
}
.index {
background: #efefef;
}
.minHeader,
.tabtits {
width: calc(100% - 20px);
box-sizing: border-box;
border-radius: 4px;
}
.minHeader {
background: #fff;
margin: 0px auto 0;
}
.tabtits {
background-color: #eff2f5;
padding: 10px 20px 20px;
margin: 20px auto 0;
}
.minTop {
width: calc(100% - 20px);
box-sizing: border-box;
border-radius: 4px;
margin: 0px auto 0;
background: #fff;
}
.card__header {
padding: 10px 20px 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 16px;
}
.card__headers {
padding: 0px 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 16px;
}
.el-icon-s-marketing {
color: rgb(54, 153, 247);
font-size: 18px;
}
.cline {
width: 2px;
height: 18px;
background: #1492ff;
margin: 0 8px;
}
.icon28 {
width: 28px;
height: 28px;
}
.icon15 {
width: 14px;
height: 14px;
margin: 2px 5px 0 10px;
}
.c149 {
color: #1492ff;
}
.bg149 {
background: #1492ff;
}
.bg15b {
background: #15be50;
}
.bgffc {
background: #ffc000;
}
.bgff5 {
background: #ff5151;
}
.cff5 {
color: #ff5151;
}
.bg1 {
background-color: #f9fbfd;
padding: 5px 10px;
margin-top: 12px;
}
.tieaft {
font-size: 20px;
padding: 5px 0 12px 12px;
font-weight: 600;
position: relative;
}
.tieaft::before {
content: "";
position: absolute;
left: 0px;
top: 9px;
width: 2px;
height: 20px;
background-color: #1492ff;
}
.zhan {
height: 280px;
padding: 0 20px 20px 20px;
}
.mt12 {
margin-top: 12px;
}
.mb12 {
margin-bottom: 12px;
}
.mt8 {
margin-top: 8px;
}
.mt20 {
margin-top: 20px;
}
.text {
// text-align-last:justify;
line-height: 33px;
font-size: 18px;
color: #666;
}
.lab {
border-radius: 4px;
background: #1492ff;
color: #fff;
padding: 10px 0;
}
.item {
border-radius: 4px;
background: #f2f3f5;
color: #333;
padding: 10px 0;
margin-bottom: 12px;
display: flex;
justify-content: center;
align-items: center;
}
.items {
border-radius: 4px;
background: #FFEBEB;
color: #333;
padding: 15px 0;
margin-bottom: 12px;
display: flex;
flex-direction: column;
align-items: center;
}
.lines {
width: 1px;
height: 25px;
background: #43a8ff;
}
</style>
<style>
.el-breadcrumb__inner.is-link {
font-weight: 400 !important;
color: #333333 !important;
}
.el-breadcrumb__inner {
font-size: 16px !important;
}
.el-input__inner {
width: 100px;
height: 30px;
line-height: 30px;
border-radius: 40px;
background: #ecf3ff;
color: #1492ff;
outline: none;
border: none;
}
.el-input__icon {
line-height: 30px;
}
.el-icon-arrow-up:before {
color: #1492ff;
}
.el-input__inner::-webkit-input-placeholder {
/* WebKit browsers */
color: #1492ff;
}
.el-input__inner:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #1492ff;
}
</style>
\ No newline at end of file
qingtian_vue/src/views/Xczx.vue
View file @ d45c7cf3
...@@ -81,27 +81,27 @@ ...@@ -81,27 +81,27 @@
</div> </div>
</div> </div>
<div class="flex1"> <div class="flex1">
<div class="bgff5 cff6 h50 flex jcenter acenter fs20 b">共同富裕</div> <div class="bgff5 cff8 h50 flex jcenter acenter fs20 b">共同富裕</div>
<div class="h90 bgf78 mt12 p20 column between"> <div class="h90 bgf78 mt12 p20 column between">
<p class="fs18 b">低收入农民收入 (万元)</p> <p class="fs18 b">低收入农民收入 (万元)</p>
<div class="flex"> <div class="flex">
<p class="w65">家庭人均可支配收入</p> <p class="w65">家庭人均可支配收入</p>
<p class="cff6 b">32,745</p> <p class="cff8 b">32,745</p>
</div> </div>
<div class="flex"> <div class="flex">
<p class="w65">收入增幅</p> <p class="w65">收入增幅</p>
<p class="cff6 b">5%</p> <p class="cff8 b">5%</p>
</div> </div>
</div> </div>
<div class="h90 bgf78 mt12 p20 column between"> <div class="h90 bgf78 mt12 p20 column between">
<p class="fs18 b">农民收入 (万元)</p> <p class="fs18 b">农民收入 (万元)</p>
<div class="flex"> <div class="flex">
<p class="w65">农民人均可支配收入</p> <p class="w65">农民人均可支配收入</p>
<p class="cff6 b">122,745</p> <p class="cff8 b">122,745</p>
</div> </div>
<div class="flex"> <div class="flex">
<p class="w65">收入增幅</p> <p class="w65">收入增幅</p>
<p class="cff6 b">10%</p> <p class="cff8 b">10%</p>
</div> </div>
</div> </div>
</div> </div>
...@@ -182,7 +182,7 @@ ...@@ -182,7 +182,7 @@
<div class="flex year"> <div class="flex year">
<div class="icon160"></div> <div class="icon160"></div>
<div class="flex around acenter year mt20"> <div class="flex around acenter year mt20">
<div class="borderR bgff5 cff6 b">2019</div> <div class="borderR bgff5 cff8 b">2019</div>
<div class="borderR bgedf c149 b">2020</div> <div class="borderR bgedf c149 b">2020</div>
<div class="borderR bgf0f c15b b">2021</div> <div class="borderR bgf0f c15b b">2021</div>
</div> </div>
...@@ -277,6 +277,9 @@ export default { ...@@ -277,6 +277,9 @@ export default {
_this.init(); _this.init();
})(); })();
}; };
window.addEventListener("resize", function (e) {
window.parent.postMessage(document.body.scrollHeight, '*');
});
}, },
methods: { methods: {
tabRowClassName({ row, rowIndex }) { tabRowClassName({ row, rowIndex }) {
......
qingtian_vue/src/views/Xxgl.vue
View file @ d45c7cf3
...@@ -3,13 +3,15 @@ ...@@ -3,13 +3,15 @@
<div class=""> <div class="">
<div class="main"> <div class="main">
<div class="minHeader shadow"> <div class="minHeader shadow">
<div class="card__headers flex between xxgl"> <Breadcrumb :breadData="breadData"></Breadcrumb>
<!-- <div class="card__headers flex between xxgl">
<el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }" <el-breadcrumb-item :to="{ path: '/' }"
>管理系统</el-breadcrumb-item ><a href="https://szzf.qingtian.gov.cn:18080">首页</a></el-breadcrumb-item
> >
<el-breadcrumb-item :to="{ path: '/' }" <el-breadcrumb-item :to="{ path: '/' }"
>体检信息管理</el-breadcrumb-item >电子健康证明</el-breadcrumb-item
> >
</el-breadcrumb> </el-breadcrumb>
<div class="flex acenter"> <div class="flex acenter">
...@@ -17,6 +19,16 @@ ...@@ -17,6 +19,16 @@
<p class="c3">牵头单位: 县疫情防控办 县卫生健康局</p> <p class="c3">牵头单位: 县疫情防控办 县卫生健康局</p>
</div> </div>
</div> </div>
<div class="flex acenter pr20 pb12">
<img src="../assets/images/target.png" class="icon28" />
<div class="flex acenter">
<div class="flex acenter eltxtx">
<span class="c3 c149 fs18">年度目标</span>
<div class="cline"></div>
</div>
<div class="c3">暂无数据</div>
</div>
</div> -->
</div> </div>
<div class="minTop shadow mt20"> <div class="minTop shadow mt20">
<div class="flex between card__header"> <div class="flex between card__header">
...@@ -126,14 +138,23 @@ ...@@ -126,14 +138,23 @@
//这里可以导入其他文件（比如：组件，工具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 geoJson from '@/assets/json/qingtian.json' import geoJson from '@/assets/json/qingtian.json'
let one, two; let one, two;
export default { export default {
//import引入的组件需要注入到对象中才能使用 //import引入的组件需要注入到对象中才能使用
components: {}, components: {
Breadcrumb
},
data() { data() {
//这里存放数据 //这里存放数据
return { return {
breadData: {
page_name: "电子健康证明",
annual_target:
"暂无数据",
leading: "县疫情防控办 县卫生健康局",
},
tableData: tableData, tableData: tableData,
tableInfo: tableInfo, tableInfo: tableInfo,
}; };
...@@ -142,6 +163,9 @@ export default { ...@@ -142,6 +163,9 @@ export default {
let _this = this; let _this = this;
this.initChart1(); this.initChart1();
this.initChart2(); this.initChart2();
window.addEventListener("resize", function (e) {
window.parent.postMessage(document.body.scrollHeight, '*');
});
// window.onresize = () => { // window.onresize = () => {
// return (() => { // return (() => {
// _this.initChart1(); // _this.initChart1();
...@@ -372,7 +396,7 @@ export default { ...@@ -372,7 +396,7 @@ export default {
box-sizing: border-box; box-sizing: border-box;
border-radius: 4px; border-radius: 4px;
padding: 20px; padding: 20px;
margin: 20px auto 0; margin: 0px auto 0;
background: #fff; background: #fff;
} }
.minTop { .minTop {
...@@ -392,9 +416,9 @@ export default { ...@@ -392,9 +416,9 @@ export default {
} }
.minHeader, .minHeader,
.market { .market {
width: 1160px; width: 1200px;
border-radius: 4px; border-radius: 4px;
padding: 0px 20px 0px; // padding: 0px 20px 0px;
background: #fff; background: #fff;
} }
.minTop { .minTop {
...@@ -411,7 +435,7 @@ export default { ...@@ -411,7 +435,7 @@ export default {
} }
.card__headers { .card__headers {
padding: 18px 0px; padding: 18px 0px 5px;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }
...@@ -431,6 +455,16 @@ export default { ...@@ -431,6 +455,16 @@ export default {
.w40 { .w40 {
width: 40%; width: 40%;
} }
.cline {
width: 2px;
height: 18px;
background: #1492ff;
margin: 0 8px;
}
.icon28 {
width: 28px;
height: 28px;
}
</style> </style>
<style> <style>
.tijg .el-table td, .tijg .el-table td,
...@@ -443,6 +477,8 @@ export default { ...@@ -443,6 +477,8 @@ export default {
} }
.xxgl .el-breadcrumb__inner.is-link { .xxgl .el-breadcrumb__inner.is-link {
font-size: 16px !important; font-size: 16px !important;
font-weight: bold;
color: #333;
} }
.xxgl .el-icon-s-marketing { .xxgl .el-icon-s-marketing {
......
qingtian_vue/src/views/Yshj.vue
View file @ d45c7cf3
...@@ -3,8 +3,8 @@ ...@@ -3,8 +3,8 @@
<div class="minHeader"> <div class="minHeader">
<div> <div>
<el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> <el-breadcrumb-item><a href="https://szzf.qingtian.gov.cn:18080" class="fs16">首页</a></el-breadcrumb-item>
<el-breadcrumb-item :to="{path: '/'}">营商环境市场活力</el-breadcrumb-item> <el-breadcrumb-item :to="{path: '/'}" class="fs18">营商环境市场活力</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div> </div>
<div class="flex mt12 acenter between"> <div class="flex mt12 acenter between">
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
<div class="bdash"></div> <div class="bdash"></div>
<div class="flex column acenter"> <div class="flex column acenter">
<p class="b fs20 c3">1</p> <p class="b fs20 c3">1</p>
<p class="bgff5 cff6 fs14 tapd b">预警</p> <p class="bgff5 cff8 fs14 tapd b">预警</p>
</div> </div>
<div class="bdash"></div> <div class="bdash"></div>
<div class="flex column acenter"> <div class="flex column acenter">
...@@ -113,7 +113,7 @@ ...@@ -113,7 +113,7 @@
<p class="fs16 c6 mt5">网络交易风险闭环处理率</p> <p class="fs16 c6 mt5">网络交易风险闭环处理率</p>
</div> </div>
<div class="textCenter icon300 bgff5 flex jcenter column bradius2"> <div class="textCenter icon300 bgff5 flex jcenter column bradius2">
<p class="cff6 fs20 b">233个</p> <p class="cff8 fs20 b">233个</p>
<p class="fs16 c6 mt5">实施反垄断合规辅导的重点企业数量</p> <p class="fs16 c6 mt5">实施反垄断合规辅导的重点企业数量</p>
</div> </div>
</div> </div>
...@@ -154,7 +154,7 @@ ...@@ -154,7 +154,7 @@
</el-progress> </el-progress>
<img src='../assets/images/icon.png' style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);"> <img src='../assets/images/icon.png' style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">
</div> </div>
<p class="cff6 mt5 b">21522 个</p> <p class="cff8 mt5 b">21522 个</p>
<p class="c3 w65">严重失信企业总数</p> <p class="c3 w65">严重失信企业总数</p>
</div> </div>
</div> </div>
...@@ -194,7 +194,7 @@ ...@@ -194,7 +194,7 @@
</div> </div>
<div class="textCenter icon130 flex jcenter column bradius2"> <div class="textCenter icon130 flex jcenter column bradius2">
<p class="fs22 b">51%</p> <p class="fs22 b">51%</p>
<p class="cff6 fs16 bgff5 mt5 h30">平均问题发现率</p> <p class="cff8 fs16 bgff5 mt5 h30">平均问题发现率</p>
</div> </div>
</div> </div>
</div> </div>
...@@ -370,6 +370,9 @@ export default { ...@@ -370,6 +370,9 @@ export default {
_this.init5(); _this.init5();
})(); })();
}; };
window.addEventListener("resize", function (e) {
window.parent.postMessage(document.body.scrollHeight, '*');
});
}, },
methods: { methods: {
init() { init() {
...@@ -961,3 +964,9 @@ export default { ...@@ -961,3 +964,9 @@ export default {
align-items: flex-end; align-items: flex-end;
} }
</style> </style>
<style>
.el-breadcrumb__item:last-child .el-breadcrumb__inner{
color: #333 !important;
font-weight: bold;
}
</style>
\ No newline at end of file
qingtian_vue/src/views/err.vue 0 → 100644
View file @ d45c7cf3
<!-- -->
<template>
<div class=''>
无权限访问
</div>
</template>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
},
beforeCreate() {}, //生命周期 - 创建之前
//生命周期 - 创建完成（可以访问当前this实例）
created() {
},
beforeMount() {}, //生命周期 - 挂载之前
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
},
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style>
</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