Browse Source

wenti

master
huxinglu 4 years ago
parent
commit
2061e03360
6 changed files with 227 additions and 88 deletions
  1. +3
    -4
      src/App.vue
  2. +1
    -25
      src/views/command/dateLeft.vue
  3. +1
    -18
      src/views/command/dateRight.vue
  4. +3
    -2
      src/views/command/index.vue
  5. +218
    -0
      src/views/command/problemLeft.vue
  6. +1
    -39
      src/views/main/index.vue

+ 3
- 4
src/App.vue View File

@@ -13,15 +13,14 @@
export default {
name: 'App',
created() {
let designSize = 1980; // 设计图尺寸
let html = document.documentElement;
let wW = html.clientWidth;// 窗口宽度
let designSize = 1580; // 设计图尺寸
let wW = (document.body.clientWidth+document.body.clientHeight)/2;// 窗口宽度
let rem = wW * 100 / designSize;
document.documentElement.style.fontSize = rem + 'px';
store.dispatch('user/setFontSize', rem)
$(window).resize(function ()// 绑定到窗口的这个事件中
{
let designSize = 1980; // 设计图尺寸
let designSize = 1580; // 设计图尺寸
let html = document.documentElement;
let wW = html.clientWidth;// 窗口宽度
let rem = wW * 100 / designSize;

+ 1
- 25
src/views/command/dateLeft.vue View File

@@ -56,7 +56,7 @@
<overBar
id="overBar"
:width="4.19,fontSize | filterPx"
:height="2.22,fontSize | filterPx">
:height="2.02,fontSize | filterPx">
</overBar>
</div>
</div>
@@ -287,28 +287,4 @@
}
}

@media (max-height: 1050px) {
.date-left {
> div:first-child {
margin-top: 0.1rem;
}

> div:nth-child(2) {
margin-top: 0.04rem;

> div:last-child {
padding: 0.15rem 0.1rem 0.16rem 0.1rem;
}
}

> div:nth-child(3) {
margin-top: 0.04rem;

}

> div:last-child {
margin-top: 0.04rem;
}
}
}
</style>

+ 1
- 18
src/views/command/dateRight.vue View File

@@ -42,7 +42,7 @@
<div>河湖水质问题分类统计</div>
</div>
<div>
<cake id="rightPre" :width="3.89,fontSize | filterPx" :height="2.584,fontSize | filterPx"></cake>
<cake id="rightPre" :width="3.89,fontSize | filterPx" :height="2.454,fontSize | filterPx"></cake>
</div>
</div>
<div>
@@ -266,21 +266,4 @@
}
}

@media (max-height: 1050px) {
.date-right {
> div:first-child {
margin-top: 0.1rem;

> div:last-child {
> div {
margin-top: 0.14rem;
}
}
}

> div:nth-child(2) {
margin-top: 0.05rem;
}
}
}
</style>

+ 3
- 2
src/views/command/index.vue View File

@@ -82,6 +82,7 @@
</div>
<dateLeft v-if="activeType=='date'"></dateLeft>
<dateRight v-if="activeType=='date'"></dateRight>
<problemLeft v-if="activeType=='problem'"></problemLeft>
</div>
</template>

@@ -90,6 +91,7 @@
import njBround from "static/nj.json";
import dateLeft from './dateLeft'
import dateRight from './dateRight'
import problemLeft from './problemLeft'
import {mapGetters} from "vuex";
import api from '@/api/main/index'
import driver from 'static/driver.json'
@@ -144,7 +146,7 @@
computed: {
...mapGetters(["fontSize"])
},
components: {dateLeft, dateRight},
components: {dateLeft, dateRight,problemLeft},
methods: {
getDriver() {
const {data} = driver
@@ -219,7 +221,6 @@
me.map.add(polygon);
});
}
console.log(JSON.stringify(list))
},
// addRegionMarker(item) {
// // 创建纯文本标记

+ 218
- 0
src/views/command/problemLeft.vue View File

@@ -0,0 +1,218 @@
<template>
<div class="problem-left">
<div>
<img src="../../assets/img/command/head-problem.png"/>
</div>
<div>
<el-form ref="form" :model="ruleForm" :label-width="formLabelWidth+'px'">
<el-form-item label="时间范围:">
<el-date-picker
v-model="ruleForm.date"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item label="所属区域:">
<el-select v-model="ruleForm.driver" placeholder="">
<el-option
v-for="item in driverList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="河湖名称:">
<el-select v-model="ruleForm.hu" placeholder="">
<el-option
v-for="item in huList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="处理状态:">
<el-select v-model="ruleForm.status" placeholder="">
<el-option
v-for="item in statusList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-form>
<div class="search-btn">查询</div>
</div>
</div>
</template>

<script>
import {mapGetters} from "vuex";
import overBar from './overBar'
import transverseBar from './transverseBar'

export default {
name: "problem-left",
data() {
return {
ruleForm: {
date: '',
driver: ''
},
driverList: [],
huList: [],
statusList: [
{value: 1, label: '未处理'},
{value: 2, label: '处理中'},
{value: 3, label: '已完成'},
],
formLabelWidth: this.$root.$options.filters.filterPx(0.83, this.fontSize),
}
},
computed: {
...mapGetters(["fontSize"])
},
components: {overBar, transverseBar},
methods: {
activeClick(active) {
this.active = active
}
},
}
</script>

<style lang="less">
.problem-left {
position: absolute;
top: 1.25rem;
width: 4.27rem;
background-color: rgba(0, 0, 0, 0.6);
height: 100%;
padding-left: 0.26rem;
padding-right: 0.27rem;


> div:first-child {
margin-top: 0.2rem;
width: 100%;
height: 0.47rem;
display: flex;

> img {
width: 1.33rem;
height: 100%;
}
}

> div:nth-child(2) {
margin-top: 0.164rem;
padding: 0.193rem 0.229rem;
background-color: #171717;

.search-btn{
background: rgba(86,244,248,0.40);
border: 0.01rem solid #4DCBCE;
height: 0.4rem;
line-height: 0.4rem;
font-family: PingFangSC-Medium;
font-size: 0.15rem;
color: #FFFFFF;
text-align: center;
cursor: pointer;
}

.el-form-item__content {
line-height: 0.3rem;
flex: 1;
}

.el-form-item {
margin-bottom: 0.13rem;
display: flex;
align-items: center;
}

.el-form-item__label {
font-family: PingFangSC-Regular;
font-size: 0.14rem;
color: #FFFFFF;
line-height: 0.2rem;
}

.el-input {
color: #FFFFFF;
}

.el-input__inner {
border: none;
opacity: 0.8;
background-color: #3D3D3D;
color: #FFFFFF;
font-family: PingFangSC-Regular;
font-size: 0.12rem;
height: 0.3rem;
line-height: 0.3rem;
padding: 0 0.138rem;
width: 100%;
}

.el-date-editor .el-range__icon {
font-size: 0.12rem;
line-height: 0.3rem;
}

.el-input__icon {
width: 0.35rem;
}

.el-date-editor .el-range-separator {
padding: 0 5px;
line-height: 0.3rem;
width: 5%;
color: #FFFFFF;
opacity: 0.8;
font-size: 0.12rem;
}

.el-date-editor .el-range-input {
width: 40%;
color: #ffffff;
line-height: 0.3rem;
font-size: 0.12rem;
background-color: initial;
opacity: 0.8;
}

.el-date-editor .el-range__close-icon {
font-size: 0.12rem;
color: #C0C4CC;
line-height: 0.3rem;
}
.el-select .el-input .el-select__caret {
color: #ffffff;
font-size: 0.12rem;
}
.el-input__icon {
line-height: 0.3rem
}
}

}

@media (max-height: 1050px) {
.problem-left {
> div:first-child {
margin-top: 0.1rem;
}

> div:nth-child(2) {
margin-top: 0.114rem;
padding: 0.143rem 0.179rem;
}
}
}
</style>

+ 1
- 39
src/views/main/index.vue View File

@@ -148,7 +148,7 @@
<bar
id="rightBar"
:width="4.48,fontSize | filterPx"
:height="barHeight,fontSize | filterPx"
:height="2.42,fontSize | filterPx"
></bar>
</div>
</div>
@@ -177,7 +177,6 @@ export default {
data() {
return {
map: {},
barHeight: document.body.clientHeight > 1050 ? 2.42 : 2.06,
nameMark:[
{name:'六合区',lng:118.867937,lat:32.369795},
{name:'浦口区',lng:118.571012,lat:32.055306},
@@ -534,42 +533,5 @@ export default {
}
}

@media (max-height: 1050px) {
.box-left {
top: 1.35rem;
> div:first-child {
> div:last-child {
padding: 0.13rem 0.32rem;
}
}
> div:nth-child(2) {
margin-top: 0.175rem;
> div:last-child {
padding: 0.128rem 0.43rem 0.185rem 0.4rem;
}
}
> div:last-child {
margin-top: 0.15rem;
}
}
.box-right {
top: 1.35rem;
> div:first-child {
> div:last-child {
padding: 0rem 0.195rem 0.25rem 0.195rem;
}
}
> div:nth-child(2) {
margin-top: 0.15rem;
> div:last-child {
padding-bottom: 0.178rem;
padding-top: 0.392rem;
}
}
> div:last-child {
margin-top: 0.15rem;
}
}
}
}
</style>

Loading…
Cancel
Save