Skip to content

C
country-energy-ecological-construction
Commit 175a217f authored by 范加坤's avatar 范加坤
Browse files
Options

日期选择

parent 87f66fcb
Show whitespace changes
Inline Side-by-side
Showing with 143 additions and 689 deletions
src/App.vue
View file @ 175a217f
......@@ -29,8 +29,8 @@ body {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
// text-align: center;
color: #fff;
background: url("./assets/img/bg.png") no-repeat;
background-size: 100% 100%;
background-position: center;
......
src/assets/css/public.less
View file @ 175a217f
......@@ -54,12 +54,6 @@ i {
height: 3vh;
}
.time-info {
.el-input__inner {
height: 0 !important;
line-height: 0 !important;
}
}
table {
border-color: @main-color !important;
......@@ -365,44 +359,8 @@ i {
}
}
// 时间选择器
.el-date-editor {
opacity: 0;
position: absolute;
z-index: -100;
top: 0;
bottom: 0;
width: 0;
}
.el-picker-panel {
box-shadow: 0 2px 12px 0 rgba(0, 100, 200, 0.9) !important;
background: rgba(0, 100, 200, 0.45) !important;
border-color: @main-color !important;
color: @font-color !important;
.el-picker-panel__icon-btn {
color: @active-color !important;
}
.el-date-picker__header-label {
color: inherit !important;
font-size: 1.7vh !important;
}
table {
td {
.cell {
font-size: 1.3vh !important;
color: inherit !important;
}
}
td.current {
color: @active-color !important;
}
}
}
.el-dropdown-link {
font-size: 1.4vh;
......
src/components/DateWidget/DateWidget.vue 0 → 100644
View file @ 175a217f
<template>
<div class="time-info">
<el-date-picker
ref="datePicker"
v-model="curTime"
type="year"
format="yyyy"
value-format="yyyy"
:clearable="false"
@change="clearPlay"
></el-date-picker>
<label class="el-input__inner__picker" @click="showDatePicker">
{{ curTime }}
</label>
<i
:class="play ? 'el-icon-video-pause' : 'el-icon-video-play'"
@click="timePlay"
></i>
</div>
</template>
<script>
export default {
data() {
return {
dateLevel: 'year',
curTime: '',
play: false
}
},
methods: {
showDatePicker() {
console.log('asdfsadf')
this.$refs.datePicker.focus()
console.log(this.$refs.datePicker)
},
// 清除播放事件
clearPlay(e) {
console.log(e)
this.play = false
// clearInterval(this.timer)
},
timePlay() {
console.log('ss')
}
}
}
</script>
<style lang="less" scoped>
@import url('../../assets/css/public.less');
.time-info {
cursor: pointer;
flex-direction: row;
background: none;
display: flex;
align-items: center;
justify-content: center;
margin-left: 1vw;
height: 45px;
// 时间选择器
.el-date-editor {
opacity: 0;
position: absolute;
z-index: -100;
top: 0;
bottom: 0;
width: 0;
}
/deep/.el-date-picker {
color: #fff;
}
.el-input__inner__picker {
cursor: pointer;
position: relative;
padding: 0;
font-size: 36px;
color: @font-light-color;
font-family: timeFont;
height: 100%;
line-height: 45px;
box-shadow: 0 0px 8px 0 rgba(0, 100, 200, 0.9);
padding: 0 25px;
border: 0.1vh solid @main-color;
border-radius: 25px;
&:hover {
border-color: #fff;
}
}
/deep/.el-picker-panel {
box-shadow: 0 2px 12px 0 rgba(0, 100, 200, 0.9);
background: rgba(0, 100, 200, 0.45);
border-color: @main-color;
color: @font-color;
.el-picker-panel__icon-btn {
color: @active-color;
}
.el-date-picker__header-label {
color: inherit;
font-size: 1.7vh;
}
table {
td {
.cell {
font-size: 1.3vh;
color: inherit;
}
}
td.current {
color: @active-color;
}
}
}
i {
cursor: pointer;
font-size: 32px;
margin-left: 0.7vw;
// height: 4.5vh;
// line-height: 4.5vh;
font-weight: 300;
height: 100%;
line-height: 45px;
color: @active-color;
}
}
</style>
\ No newline at end of file
src/pages/methaneUpgrade/index.vue
View file @ 175a217f
<template>
<!-- 农村沼气转型升级 -->
<div class="contain">
asdfasdf
<div class="header">
<div class="time-info">
<el-date-picker
ref="datePicker"
v-show="dateLevel == 'year'"
v-model="curTime"
type="year"
format="yyyy"
value-format="yyyy"
:clearable="false"
@change="clearPlay"
></el-date-picker>
<label class="el-input__inner__picker" @click="showDatePicker">
{{ curTime | fmtTime }}
</label>
<i
:class="play ? 'el-icon-video-pause' : 'el-icon-video-play'"
@click="timePlay"
></i>
</div>
<!-- <div class="document">
<el-button
class="btn-show"
:class="otherShow ? '' : 'active'"
@click="otherShow = !otherShow"
>仅地图</el-button
>
<el-dropdown class="item" @command="showDocument" trigger="click">
<span class="el-dropdown-link">
源数据
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="fire">各火点情况</el-dropdown-item>
<el-dropdown-item command="tongji">火点统计情况</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div> -->
<!-- <div class="main-content">
<div class="left-info" v-show="otherShow">
<div class="value-show">
<div class="part info fire-info">
<label class="title" for="title">
<i class="el-icon-s-flag"></i>
火点数量(个)
</label>
<label class="main" for="fire">
{{ huodianCnt }}
</label>
<div class="border border-left-top"></div>
<div class="border border-right-top"></div>
<div class="border border-left-bottom"></div>
<div class="border border-right-bottom"></div>
</div>
<div class="part info pm-info">
<label class="title" for="title">
<i class="el-icon-s-flag"></i>
PM2.5排放量(吨)
</label>
<label class="main" for="pm">
{{ pmValue }}
</label>
<div class="border border-left-top"></div>
<div class="border border-right-top"></div>
<div class="border border-left-bottom"></div>
<div class="border border-right-bottom"></div>
</div>
</div>
</div>
<div class="choose-info" v-if="otherShow">
<el-button
v-if="dateLevel != 'day'"
:class="checkList.indexOf('影像') >= 0 ? 'active' : ''"
@click="changeLayer('影像')"
>排放量</el-button
>
<el-button
:class="checkList.indexOf('火点') >= 0 ? 'active' : ''"
@click="changeLayer('火点')"
>火点</el-button
>
</div>
<div class="choose-info-only" v-else>
<el-button
v-if="dateLevel != 'day'"
:class="checkList.indexOf('影像') >= 0 ? 'active' : ''"
@click="changeLayer('影像')"
>影像</el-button
>
<el-button
:class="checkList.indexOf('火点') >= 0 ? 'active' : ''"
@click="changeLayer('火点')"
>火点</el-button
>
</div>
<div class="date-level" v-show="otherShow">
<el-button
class="btn"
:class="{ active: dateLevel === item.value }"
v-for="item in dateLevelList"
:key="item.value"
@click="dateLevel = item.value"
>{{ item.name }}</el-button
>
</div>
<div class="region-list" v-show="otherShow">
<div class="region-item">
<span
v-for="(item, idx) in regionList"
class="tags el-tag el-tag--plain"
style="background-color: transparent;"
:key="idx"
>
{{ item }}
<i
class="el-tag__close el-icon-close"
@click="regionList.splice(idx, 1)"
></i>
</span>
</div>
</div>
<div class="map-info">
<map-time ref="map"></map-time>
</div>
<div class="echarts-info" v-show="otherShow">
<div class="region-level">
<el-button
:class="regionLevel == 'province' ? 'active' : ''"
@click="regionLevel = 'province'"
>省</el-button
>
<el-button
:class="regionLevel == 'city' ? 'active' : ''"
@click="regionLevel = 'city'"
>市</el-button
>
<el-button
:class="regionLevel == 'county' ? 'active' : ''"
@click="regionLevel = 'county'"
>县</el-button
>
</div>
<div class="tongji-echarts">
<div class="left">
<div class="part echarts-show sort-echarts">
<div class="title">
<i class="el-icon-data-analysis"></i>
火点数量(个)
</div>
<div class="echarts-main" id="huodianTongji"></div>
<div class="border border-left-top"></div>
<div class="border border-left-bottom"></div>
</div>
</div>
<div class="right">
<div class="part echarts-show sort-echarts">
<div class="title">
<i class="el-icon-data-analysis"></i>
PM2.5排放量(吨)
</div>
<div class="echarts-main" id="pmTongji"></div>
<div class="border border-right-top"></div>
<div class="border border-right-bottom"></div>
</div>
</div>
</div>
</div>
</div> -->
<!-- <div class="bottom-content" v-show="otherShow">
<div class="col-1">
<div class="part analysis-echarts">
<div class="title">
<i class="el-icon-data-line"></i>
火点数量站点PM2.5浓度拟合图
</div>
<div class="echarts-main" id="nihe"></div>
<div class="border border-left-top"></div>
<div class="border border-right-top"></div>
<div class="border border-left-bottom"></div>
<div class="border border-right-bottom"></div>
</div>
</div>
<div class="part col-2">
<div class="top">
<div class="title">
<i class="el-icon-s-data"></i>
火点数量与PM2.5排放量时间趋势图
</div>
</div>
<div class="barline-echarts">
<div id="barlineBox"></div>
</div>
<div class="border border-left-top"></div>
<div class="border border-right-top"></div>
<div class="border border-left-bottom"></div>
<div class="border border-right-bottom"></div>
</div>
<div class="part col-3">
<div class="tongji-table">
<div class="title">
<i class="el-icon-files"></i>
火点数量与PM2.5排放量统计表
</div>
<div class="tongji-content">
<el-table
:data="tongjiTableData"
border
show-summary
style="width: 100%;"
height="180"
:summary-method="getSummaries"
>
<el-table-column
width="50"
type="index"
label="序号"
align="center"
></el-table-column>
<el-table-column
prop="name"
align="center"
label="地区名"
></el-table-column>
<el-table-column
prop="huodianCnt"
align="center"
label="火点数量(个)"
></el-table-column>
<el-table-column
prop="pm"
align="center"
label="PM2.5排放量(吨)"
></el-table-column>
</el-table>
</div>
</div>
<div class="border border-left-top"></div>
<div class="border border-right-top"></div>
<div class="border border-left-bottom"></div>
<div class="border border-right-bottom"></div>
</div>
</div> -->
</div>
<DateWidget class="date-widget" />
</div>
</template>
<script>
import DateWidget from "../../components/DateWidget/DateWidget.vue"
export default {
name: 'MethaneUpgrade',
data() {
......@@ -260,411 +16,20 @@ export default {
play: false
}
},
methods: {
showDatePicker() {
console.log('asdfsadf')
this.$refs.datePicker.focus()
console.log(this.$refs.datePicker)
components: {
DateWidget
},
// 清除播放事件
clearPlay() {
this.play = false
clearInterval(this.timer)
}
methods: {
}
}
</script>
<style lang="less" scoped>
@import url('../../assets/css/public.less');
.contain {
position: relative;
.header {
// @import url('../../assets/css/public.less');
.date-widget{
position: absolute;
top: 0;
left: 0;
width: 100%;
// height: 7vh;
z-index: 300;
box-sizing: border-box;
text-align: left;
padding-left: 1vw;
background: linear-gradient(
to bottom,
rgba(0, 100, 200, 0.2),
rgba(0, 200, 100, 0)
);
}
.main-content {
width: 98.5vw;
height: 98vh;
position: relative;
}
top: 12vh;
}
.contain {
.header {
display: flex;
align-items: center;
z-index: 500;
img {
height: 6vh;
margin-right: 1vh;
}
h3 {
font-size: 4.7vh;
line-height: 10vh;
font-weight: 700;
letter-spacing: 0.1vh;
color: @main-color;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.time-info {
cursor: pointer;
flex-direction: row;
background: none;
display: flex;
align-items: center;
justify-content: center;
margin-left: 1vw;
height: 45px;
.el-input__inner__picker {
cursor: pointer;
position: relative;
padding: 0;
font-size: 36px;
color: @font-light-color;
font-family: timeFont;
height: 100%;
line-height: 45px;
box-shadow: 0 0px 8px 0 rgba(0, 100, 200, 0.9);
padding: 0 25px;
border: 0.1vh solid @main-color;
border-radius: 25px;
&:hover {
border-color: #fff !important;
}
}
i {
cursor: pointer;
font-size: 32px;
margin-left: 0.7vw;
// height: 4.5vh;
// line-height: 4.5vh;
font-weight: 300;
height: 100%;
line-height: 45px;
color: @active-color;
}
}
.document {
position: absolute;
top: 0;
right: 1.4vw;
height: 80%;
display: flex;
align-items: center;
cursor: pointer;
.btn-show {
height: 40% !important;
border: 0.1vh solid @main-color !important;
padding: 0vh 1.5vh !important;
}
.item {
cursor: pointer;
box-sizing: border-box;
// padding: 0.8vh;
border: 0.1vh solid @main-color;
// border-radius: 50%;
color: @main-color;
border-radius: 25px;
padding: 0vh 1.5vh;
margin-left: 1vh;
i {
font-size: 1.5vh;
}
&:hover {
border-color: #fff;
color: #fff;
i {
color: @font-color;
}
}
}
}
}
.main-content {
display: flex;
.left-info {
position: absolute;
// width: 16vh;
top: 11.5vh;
left: 1.5vw;
// width: 423px;
// height: calc(100vh - 11.5vh - 2vw - 2vh);
width: 25vw;
z-index: 500;
color: @font-color;
.value-show {
display: flex;
flex-direction: column;
// height: 13.3vh;
.info {
display: flex;
flex-direction: column;
padding: 1.5vh 0.5vh;
position: relative;
width: 50%;
margin-bottom: 1vh;
label {
text-align: center;
line-height: 90px;
height: 90px;
.sub {
font-size: 14px;
}
}
label.title {
width: 100%;
// font-size: 1.4vh;
padding-left: 10px;
height: 2vh;
line-height: 1.8vh;
color: @main-color;
text-align: left;
padding-top: 0.5vh;
// padding-left: 0.5vh;
font-size: 1.8vh;
color: #8fccff;
}
label.main {
text-align: left;
margin-left: 32px;
color: @font-light-color;
font-family: timeFont;
font-size: 47px;
}
}
// .info + .info {
// margin-left: 1vh;
// }
}
.year-yingxiang {
position: relative;
height: 42.3vh;
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
margin-top: 1vh;
.img-content {
width: 100%;
height: 85%;
margin-top: 1vh;
img {
width: auto;
height: 100%;
}
}
.img-legend {
position: absolute;
right: 1vh;
bottom: 1vh;
display: flex;
flex-direction: column;
justify-content: flex-start;
.title {
width: 100%;
text-align: left;
padding-left: 0;
margin-bottom: 5px;
color: @main-color;
font-size: 1.3vh;
}
.item {
display: flex;
align-items: center;
.circle {
border-radius: 2px;
width: 17px;
height: 10px;
margin-right: 0.5vh;
}
label {
color: @main-color;
font-size: 1.2vh;
}
}
.item + .item {
margin-top: 0.3vh;
}
}
}
}
.date-level {
position: absolute;
display: flex;
// margin-bottom: 0.8vh;
justify-content: space-around;
align-items: flex-end;
height: 6vh;
z-index: 500;
bottom: 30vh;
left: 2vw;
width: 12.5vw;
.btn {
background-color: #fff;
cursor: pointer;
// margin-right: 0.5vh;
border-radius: 2vh !important;
}
}
.region-list {
position: absolute;
// width: 50%;
z-index: 500;
// right: 29.5vw;
right: 49vw;
bottom: 30vh;
text-align: left;
}
.choose-info,
.choose-info-only {
position: absolute;
top: 7.8vh;
right: 30.5vw;
z-index: 500;
display: flex;
flex-direction: column;
button {
margin-bottom: 1vh;
}
}
.choose-info-only {
right: 20vw;
}
.map-info {
width: 100%;
height: 100%;
}
.echarts-info {
position: absolute;
top: 5.7vh;
right: 0;
width: 30vw;
z-index: 500;
display: flex;
flex-direction: column;
box-sizing: border-box;
padding-top: 2vh;
.region-level {
display: flex;
justify-content: space-around;
}
.tongji-echarts {
display: flex;
box-sizing: border-box;
height: 56.5vh;
// height: 554px;
margin-top: 1vh;
margin-bottom: 1vh;
.left,
.right {
width: 50%;
}
.left {
margin-right: 0.5vh;
}
}
.echarts-show {
display: flex;
height: 100%;
width: 100%;
flex-direction: column;
position: relative;
box-sizing: border-box;
.title {
.time-title {
font-size: 1.4vh;
}
}
.echarts-main {
height: 92%;
width: 100%;
}
}
}
}
.bottom-content {
position: absolute;
bottom: 0;
// top: 676px;
// right: 30vw;
left: 0;
height: 29vh;
// width: calc(67vw - 423px - 1vh);
width: 97vw;
z-index: 500;
display: flex;
flex-direction: row;
justify-content: flex-end;
// overflow: hidden;
padding: 0 1.5vw 0vh;
margin-right: 1vh;
// justify-content: center;
.col-1 {
display: flex;
position: relative;
height: 100%;
width: 423px;
.analysis-echarts {
position: relative;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
.title {
.time-title {
font-size: 1.4vh;
}
}
.echarts-main {
flex: 1;
}
}
}
.col-2 {
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
position: relative;
margin-left: 1vh;
.top {
display: flex;
margin-bottom: 0.6vh;
}
.barline-echarts {
flex: 1;
position: relative;
#barlineBox {
width: 100%;
height: 100%;
}
}
}
.col-3 {
position: relative;
width: 30vw;
margin-left: 1vh;
.tongji-table {
max-height: 50%;
display: flex;
flex-direction: column;
}
}
}
}
</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