代码拉取完成,页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>任城统计大数据平台</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="//at.alicdn.com/t/font_1460471_28h1ax8hlh.css">
<link rel="stylesheet" href="./css/base.css">
<!-- 引入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- <link rel="stylesheet" href="//at.alicdn.com/t/font_297971_xp2ziukzaxnd0a4i.css"> -->
<!--引入echarts-->
<script src='js/echarts.min.js'></script>
</head>
<body>
<div id="canvas">
<div class="work-header over">
<a href="./index.html" class="work-header__logo flf" style="display: block;">
<img src="./img/logo.png" style="display:block;height: 100%;" alt="">
</a>
<div class="work-header__position">
</div>
<div class="work-header__user flr">
<div class="work-header__message over">
<i class="flf iconfont icon-xiaoxi1"></i>
<p class="flf work-header__message__button">消息</p>
</div>
<div class="work-header__my">
<el-dropdown>
<img src="./img/head.jpg" alt="">
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>用户信息</el-dropdown-item>
<el-dropdown-item>用户信息</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="work-header__logout">
<i class=" iconfont icon-tuichu1"></i>
</div>
</div>
</div>
<div class="work-content">
<el-row :gutter="20">
<el-col :span="4" class="work-content__menu">
<el-card class="box-card">
<h4><b>系统管理</b><span> (任城平台)</span></h4>
<a :href="info.href" style="display: block;overflow: hidden;text-decoration: none;"
:class="['work-content__menu__list',info.icon == 'icon-ic_project' ? 'work-content--active' : '']"
v-for="info in menus" :key="info.icon">
<!-- <a :href="info.href" style="display: block;overflow: hidden;text-decoration: none;"> -->
<i :class="['iconfont', info.icon]"></i>
<p class="work-content__article">{{info.name}}</p>
<i class="work-content__details iconfont icon-ic_arrow_r"></i>
<!-- </a> -->
</a>
</el-card>
</el-col>
<el-col :span="20" class="work-content__body growthss">
<div class="work-content__nav">
<a style="text-decoration: none;"><i
class="iconfont icon-fanhui work-content__nav__back"></i></a>
<a style="text-decoration: none;">
<p class="work-content__nav__menu work-content__nav__menu--active">十强产业</p>
</a>
</div>
<el-scrollbar style="height: calc(100% - 65px);overflow:hidden;">
<div class="work-data__box">
<div class="work-data__box__over">
<p>省十强</p>
</div>
<div class="work-data__box__con">
<div style="overflow: hidden;">
<el-card v-for="o in 5" :key="o" class="box-card">
<div @click="opens">
<div class="work-data__icon">
<img src="./img/ten-1.png" alt="">
<!-- <i class="iconfont icon-yuanshigongzuozhan"></i> -->
</div>
<p class="work-data__titles">
新一代技术支持
</p>
<p class="work-data__number">300</p>
</div>
</el-card>
</div>
<div style="overflow: hidden;">
<el-card v-for="o in 5" :key="o" class="box-card">
<div @click="opens">
<div class="work-data__icon">
<img src="./img/ten-1.png" alt="">
<!-- <i class="iconfont icon-yuanshigongzuozhan"></i> -->
</div>
<p class="work-data__titles">
新一代技术支持
</p>
<p class="work-data__number">300</p>
</div>
</el-card>
</div>
</div>
<div class="work-data__box__over">
<p>
济宁十强</p>
</div>
<div class="work-data__box__con">
<div style="overflow: hidden;">
<el-card v-for="o in 5" :key="o" class="box-card">
<div @click="opens">
<div class="work-data__icon">
<img src="./img/ten-1.png" alt="">
<!-- <i class="iconfont icon-yuanshigongzuozhan"></i> -->
</div>
<p class="work-data__titles">
新一代技术支持
</p>
<p class="work-data__number">300</p>
</div>
</el-card>
</div>
<div style="overflow: hidden;">
<el-card v-for="o in 5" :key="o" class="box-card">
<div @click="opens">
<div class="work-data__icon">
<img src="./img/ten-1.png" alt="">
<!-- <i class="iconfont icon-yuanshigongzuozhan"></i> -->
</div>
<p class="work-data__titles">
新一代技术支持
</p>
<p class="work-data__number">300</p>
</div>
</el-card>
</div>
</div>
</div>
</el-scrollbar>
</el-col>
</el-row>
</div>
</div>
</body>
<style>
/* base */
* {
margin: 0px;
padding: 0px;
}
.over {
overflow: hidden;
}
.flf {
float: left;
}
.flr {
float: right;
}
body {
background: #e9ecf3;
font-size: 18px;
}
.work-header {
height: 70px;
width: 100%;
background: #2184d8;
}
/* 头部 */
.work-header {
overflow: hidden;
}
.work-header__message {
line-height: 70px;
;
}
.work-header__logo {
display: block;
height: 40px;
margin-top: 15px;
margin-left: 80px;
}
.work-header__position {
float: left;
line-height: 70px;
margin-left: 7%;
color: white;
font-size: .9rem;
}
.work-header__position a {
color: white;
}
.work-header__user {
float: right;
margin-right: 24px;
}
.work-header__user p {
float: left;
margin: 0px 6px;
}
.work-header__user i {
float: left;
line-height: 70px;
color: white;
margin: 0px 6px;
}
.work-header__message {
float: left;
height: 100%;
padding: 0px 10px;
cursor: pointer;
transition: .3s all;
}
.work-header__message:hover {
background: #1a74c0;
}
.work-header__my {
float: left;
height: 100%;
padding: 0px 10px;
cursor: pointer;
transition: .3s all;
}
.work-header__my:hover {
background: #1a74c0;
}
.work-header__my img {
width: 40px;
height: 40px;
border-radius: 1000px;
margin-top: 15px;
}
.work-header__logout {
float: left;
height: 100%;
padding: 0px 10px;
cursor: pointer;
transition: .3s all;
}
.work-header__logout:hover {
background: #1a74c0;
}
.work-header__message__button {
font-size: 1rem;
color: white;
}
/* 工作区 */
.work-content {
padding: 24px;
}
.work-content__menu h4 {
padding-top: 16px;
font-size: 1.1rem;
line-height: 35px;
margin-left: 10px;
}
.work-content__menu span {
text-indent: 1em;
font-size: .5rem;
}
.work-content .box-card .work-content__menu__list {
cursor: pointer;
overflow: hidden;
transition: .3s all;
padding: 15px 10px;
border-radius: 3px;
margin-top: 12px;
}
.work-content .iconfont {
color: #485a6a;
font-size: 1.8rem;
float: left;
line-height: 25px;
display: block;
transition: .3s all;
}
.work-content p {
line-height: 25px;
font-size: .8rem;
color: #485a6a;
float: left;
}
.work-content .work-content__article {
margin-left: 16px;
}
.work-content .work-content__details {
float: right;
}
.work-content .box-card .work-content__menu__list:hover {
background: #1a74c0;
}
.work-content .box-card .work-content__menu__list:hover p {
color: white;
}
.work-content .box-card .work-content__menu__list:hover .iconfont {
color: white;
}
.work-content--active {
background: #1a74c0;
}
.work-content--active .iconfont {
color: white;
}
.work-content--active p {
color: white;
}
/* 主体 */
.work-content__body__banner {
width: 100%;
}
.work-content__body h5 {
color: #2184d8;
font-weight: bold;
font-size: 1.4rem;
}
.work-content__body__substance {
margin-top: 16px;
}
.work-content__body__text {
margin: 10px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.work-content__body__card__box {
width: 100%;
/* margin: 0px !important; */
}
.work-content__body__card__info {
margin-top: 20px;
overflow: hidden;
cursor: pointer;
position: relative;
padding-top: 5px;
padding-bottom: 5px;
}
.work-content__body__card__warp {
border-radius: 3px;
overflow: hidden;
box-shadow: 0px 0px 4px 2px #e2e2e2;
}
.work-content__body__card__title {
position: absolute;
bottom: 0px;
left: 0px;
}
.work-content__body__card__title p {
line-height: 35px;
text-indent: 1em;
color: white;
padding-right: 12px;
position: relative;
font-size: .8rem;
z-index: 2;
}
.work-content__body__card__title .back {
position: relative;
width: 100%;
}
.work-content__body__card__title .shadow {
position: absolute;
background: black;
height: 35px;
width: 100%;
opacity: .5;
z-index: 1;
}
.work-content__body__card__message {
background: white;
overflow: hidden;
padding: 20px;
padding-bottom: 25px;
}
.work-content__body__card__message p {
font-size: .9rem;
color: #868686;
}
.work-content__body {
height: 100%;
}
/* 人物 */
.work-content__body__detail {
position: relative;
}
.work-content__body__detail .backs {
width: 100%;
display: block;
}
.work-content__body__title {
position: absolute;
padding-top: 8px;
width: 90%;
top: 0px;
left: 5%;
padding-bottom: 5px;
border-bottom: 2px solid #dcdcdc;
overflow: hidden;
}
.work-content__body__title .yellow {
float: left;
width: 5px;
height: 20px;
margin-top: 5px;
background: yellow;
}
.work-content__body__title p {
float: left;
line-height: 30px;
padding-left: 12px;
color: white;
font-size: .8rem;
}
.work-content__body__center {
overflow: hidden;
position: absolute;
top: 45px;
width: 100%;
left: 0px;
}
.work-content__body__header {
float: left;
width: 40%;
}
.work-content__body__header img {
width: 60%;
border-radius: 1000px;
margin-top: 15%;
margin-left: 20%;
display: block;
}
.work-content__body__message {
float: left;
width: 60%;
margin-top: 7%;
}
.work-content__body__message p {
width: 90%;
color: white;
font-size: .79rem;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* cross */
.is-always-shadow .el-card__body {
padding: 0px;
}
.work-content__menu .el-card__body {
padding: 14px;
}
.el-scrollbar__wrap {
overflow-x: hidden;
}
.work-content .el-row,
.work-content .el-row .work-content__menu,
.work-content .el-row .work-content__menu .box-card {
height: 100%;
}
/*新一代技术*/
.technology {
background: #fff;
padding: 20px 30px;
overflow: hidden;
}
/*标题*/
.technologyTitle {
height: 20px;
border-bottom: 1px solid #e3dfe0;
font-size: 15px;
color: #333;
padding-bottom: 17px;
position: relative;
}
.technologyTitle i {
width: 115px;
position: absolute;
bottom: -2px;
height: 3px;
left: 0;
background: #2184d7;
}
.technologytop {
overflow: hidden;
margin-top: 20px;
}
.technologytop>div {
width: 50%;
float: left;
}
.technologytop>div>div {
width: 100%;
height: 400px;
}
.work-content .technologytopp {
text-align: center;
font-size: 18px;
width: 100%;
color: #000;
position: relative;
margin-top: -30px;
font-weight: 700;
}
/*增速*/
.growth>div {
width: 100%;
height: 370px;
opacity: 0;
margin-top: 20px;
}
.growth .active {
opacity: 1;
}
.r {
float: right;
}
.r span {
text-align: center;
padding: 10px 20px;
color: #2184d7;
font-size: 12px;
border: 1px solid #2184d7;
border-radius: 6px;
margin-right: 25px;
cursor: pointer;
}
.r .active {
background: #2184d7;
color: #fff;
}
.work-data__box {
padding: 20px 30px;
background: white;
overflow: hidden;
}
.work-data__box__over {
border-bottom: 1px solid #dcdcdc;
width: 100%;
margin: 24px auto;
}
.work-data__box__over p {
border-bottom: 2px solid #2184d8;
margin-bottom: -1px;
float: none;
display: inline-block;
}
.work-data__box__con {
overflow: hidden;
}
.work-data__box__con .box-card {
float: left;
width: 18%;
margin: 1%;
box-sizing: border-box;
cursor: pointer;
}
.work-data__box__con .box-card .work-data__icon {
width: 100%;
margin: auto;
position: relative;
}
.work-data__box__con .box-card .work-data__icon img {
display: block;
width: 100%;
}
.work-data__box__con .box-card .work-data__icon i {
color: #3f7cf8;
position: absolute;
width: 58px;
height: 7px;
font-size: 50px;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
margin: auto;
font-weight: bold;
}
.work-data__box__con .box-card .work-data__titles {
text-align: center;
width: 100%;
line-height: 30px;
margin-top: 12px;
}
.work-data__box__con .box-card .work-data__number {
text-align: center;
width: 100%;
line-height: 30px;
color: #f8a20f;
font-size: 25px;
margin-bottom: 20px;
font-weight: bold;
}
.work-data__box__con .box-card:hover {
margin-top: -0px;
}
</style>
<script>
window.onload = function () {
$(".work-content").height($(window).height() - 120)
}
window.onresize = function () {
$(".work-content").height($(window).height() - 120)
}
new Vue({
el: "#canvas",
data: {
names: "",
people: {
where: []
},
menus: [{
icon: "icon-ic_project",
name: "十强产业",
href: "./shiqiang.html"
}, {
icon: "icon-tubiaozhuzhuangtu",
name: "数据查询",
href: "./shujuchaxun.html"
}, {
icon: "icon-shishijiance",
name: "四新监测",
href: "./sixinjiance.html"
}, {
icon: "icon-fanghu",
name: "重大项目监测",
href: "./zhongdianxiangmu.html"
}, {
icon: "icon-symmetric",
name: "对地对标",
href: "./work.html"
}, {
icon: "icon-gaosugongluyunyingshujufenxi",
name: "街道概览",
href: "./street.html"
}, {
icon: "icon-yuanshigongzuozhan",
name: "工作站概览",
href: "./work.html"
}, {
icon: "icon-dizhenjiance",
name: "学习教育",
href: "./xuexi.html"
}]
},
methods: {
opens: function () {
window.open('./chanye.html')
}
},
mounted: function () {
var _this = this
// if (!getQueryVariable("name")) {
// history.go(-1)
// } else {
// _this.names = unescape(getQueryVariable("name"))
// $.ajax({
// url: "./map/people.json",
// success: function (req) {
// _this.people = req.filter(function (s) {
// return new RegExp(_this.names.substr(0, _this.names.length -
// 3)).test(s.lab)
// })[0]
// }
// })
// }
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
return (false);
}
//产业
var myChart = echarts.init(document.getElementById('main'));
var myChart1 = echarts.init(document.getElementById('main1'));
function fangfa(text, text1, text2, text3, data1, dataa, dataaa) {
// 指定图表的配置项和数据
var option = {
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
},
formatter: function (params) {
var tar;
var str = '%'
for (var i = 0; i < params.length; i++) {
if (i == 3) {
str = ''
}
if (params[i].value != '') {
tar = params[i]
break
}
}
return tar.name + ' : ' + tar.value + str;
}
},
// 图例
legend: {
data: [text, text1, text2, text3]
},
xAxis: [{
type: 'category',
show: false,
data: [text, text1, text2, text3],
axisLabel: {
interval: 0
}
}],
yAxis: [{
type: 'value',
name: '数量',
min: 0,
max: 100,
interval: 20,
}
],
series: [{
name: text,
type: 'bar',
stack: '总量',
itemStyle: {
normal: {
color: function (params) {
var colorList = [
'#4eaaeb', '#B5C334', '#FCCE10', '#E87C25'
];
return colorList[params.dataIndex]
},
//以下为是否显示,显示位置和显示格式的设置了
label: {
show: true,
position: 'top',
formatter: '{b}\n{c}'
}
}
},
//设置柱的宽度,要是数据太少,柱子太宽不美观~
barWidth: 40,
data: data1
},
{
name: text1,
type: 'bar',
stack: '总量',
itemStyle: {
normal: {
color: function (params) {
var colorList = [
'#f94050', '#B5C334', '#FCCE10', '#E87C25'
];
return colorList[params.dataIndex]
},
//以下为是否显示,显示位置和显示格式的设置了
label: {
show: true,
position: 'top',
formatter: '{b}\n{c}'
}
}
},
//设置柱的宽度,要是数据太少,柱子太宽不美观~
barWidth: 40,
data: dataa
},
{
name: text2,
type: 'bar',
stack: '总量',
itemStyle: {
normal: {
color: function (params) {
var colorList = [
'#24cfe0', '#B5C334', '#FCCE10', '#E87C25'
];
return colorList[params.dataIndex]
},
//以下为是否显示,显示位置和显示格式的设置了
label: {
show: true,
position: 'top',
}
}
},
//设置柱的宽度,要是数据太少,柱子太宽不美观~
barWidth: 40,
data: ['', '', 60, '']
},
{
name: text3,
type: 'bar',
stack: '总量',
itemStyle: {
normal: {
color: function (params) {
var colorList = [
'#8f44ad', '#B5C334', '#FCCE10', '#E87C25'
];
return colorList[params.dataIndex]
},
//以下为是否显示,显示位置和显示格式的设置了
label: {
show: true,
position: 'top',
formatter: '{b}\n{c}'
}
}
},
//设置柱的宽度,要是数据太少,柱子太宽不美观~
barWidth: 40,
data: dataaa
}
]
};
return option
}
//增速
function zengsu(text, text1, data1, dataa) {
option = {
legend: {
data: [text, text1]
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
splitLine: {
show: false
},
data: ['全省总计', '济南市', '青岛市', '淄博市', '枣庄市', '东营市', '烟台市', '潍坊市', '济宁市', '泰安市',
'威海市', '日照市'
]
},
yAxis: {
type: 'value'
},
series: [{
name: text,
type: 'bar',
itemStyle: {
normal: {
color: '#2184d9',
}
},
label: {
normal: {
show: true,
position: 'top'
}
},
data: data1
},
{
name: text1,
type: 'line',
symbol: 'image://img/yuandia.png', //设定为实心点
symbolSize: 20, //设定实心点的大小
color: '#f5a311',
label: {
normal: {
show: true,
position: 'bottom'
}
},
data: dataa
}
]
};
return option
}
var myChart2 = echarts.init(document.getElementById('growth0'));
var myChart3 = echarts.init(document.getElementById('growth1'));
var myChart4 = echarts.init(document.getElementById('growth2'));
var myChart5 = echarts.init(document.getElementById('growth3'));
var growth = $('.growth>div')
growth.width($('.growthss').width() - 100)
growth.hide()
$('.growth .active').show()
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(fangfa('主营业务收入增长速度(%)', '利润总额增长速度(%)', '利润总额增长速度(%)', '增加值(亿元)', [40, '', '', ''], ['', 80, '', ''], ['', '', '', 20]));
myChart1.setOption(fangfa('主营业务收入增长速度(%)', '利润总额增长速度(%)', '利润总额增长速度(%)', '增加值(亿元)', [40, '', '', ''], ['', 80, '', ''], ['', '', '', 20]));
//渲染
myChart2.setOption(zengsu('主营业务收入增长速度(%)', '利润增额增长速度(%)', [-15, 17, -10, 13, 7, 13, 17, -17, -10, 16, 7, -14], [-2, 10, 0, 6, -10, 2, 17, 6, 6, -2, 6, 12, 9]));
myChart3.setOption(zengsu('主营业务收入增长速度(%)', '利润增额增长速度(%)', [-15, 17, -10, 13, 7, 13, 17, -17, -10, 16, 7, -14], [-2, 10, 0, 6, -10, 2, 17, 6, 6, -2, 6, 12, 9]));
myChart4.setOption(zengsu('主营业务收入增长速度(%)', '利润增额增长速度(%)', [-15, 17, -10, 13, 7, 13, 17, -17, -10, 16, 7, -14], [-2, 10, 0, 6, -10, 2, 17, 6, 6, -2, 6, 12, 9]));
myChart5.setOption(zengsu('主营业务收入增长速度(%)', '利润增额增长速度(%)', [-15, 17, -10, 13, 7, 13, 17, -17, -10, 16, 7, -14], [-2, 10, 0, 6, -10, 2, 17, 6, 6, -2, 6, 12, 9]));
//点击渲染
$('.r').on('click', ' span', function () {
$('.growth .active').removeClass('active')
$(growth[$(this).index()]).addClass('active')
growth.hide()
$(growth[$(this).index()]).show()
$('.r .active').removeClass('active')
$(this).addClass('active')
})
}
})
</script>
</html>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。