Compare commits
No commits in common. "764c59a18fd043889d997b524179e9dc265994be" and "fe070f8084e93bc9b92bcd38a5a3b66d5b2d20d9" have entirely different histories.
764c59a18f
...
fe070f8084
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="dataScreen-container" :style="{ width: `${style.width}px`, height: `${style.height}px`, transform: `${style.transform}` }">
|
<div class="dataScreen-container" :style="{ width: `${style.width}px`, height: `${style.height}px`, transform: `${style.transform}` }">
|
||||||
<div class="boxTop">
|
<div class="boxTop">
|
||||||
<img src="./img/leftTitle.png" alt="" class="img1" />
|
<img src="./img/leftTitle.png" alt="" class="img1">
|
||||||
<div class="boxTopRight">
|
<div class="boxTopRight">
|
||||||
<div class="index_animation__s5UDk" />
|
<div class="index_animation__s5UDk" />
|
||||||
<ul v-for="(item, index) in titleList" :key="index">
|
<ul v-for="(item, index) in titleList" :key="index">
|
||||||
@ -24,80 +24,77 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
// import './flexible'
|
// import './flexible'
|
||||||
import pageOne from './pageOne';
|
import pageOne from './pageOne'
|
||||||
import pageTwo from './pageTwo';
|
import pageTwo from './pageTwo'
|
||||||
import pageThree from './pageThree';
|
import pageThree from './pageThree'
|
||||||
import pageLand from './pageLand';
|
import pageFour from './pageFour'
|
||||||
import pageFour from './pageFour';
|
import pageFive from './pageFive'
|
||||||
import pageFive from './pageFive';
|
|
||||||
export default {
|
export default {
|
||||||
name: '',
|
name: '',
|
||||||
components: {
|
components: {
|
||||||
pageOne,
|
pageOne,
|
||||||
pageTwo,
|
pageTwo,
|
||||||
pageLand,
|
|
||||||
pageThree,
|
pageThree,
|
||||||
pageFour,
|
pageFour,
|
||||||
pageFive,
|
pageFive
|
||||||
},
|
},
|
||||||
provide() {
|
provide() {
|
||||||
return {
|
return {
|
||||||
getType: () => this.key,
|
getType: () => this.key,
|
||||||
getX: () => this.scale.x,
|
getX: () => this.scale.x,
|
||||||
getY: () => this.scale.y,
|
getY: () => this.scale.y
|
||||||
};
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
baseId: null,
|
baseId: null,
|
||||||
titleList: [
|
titleList: [
|
||||||
{ name: '首\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0页', type: 'pageOne' },
|
{ name: '首\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0页', type: 'pageOne' },
|
||||||
{ name: '土地资源', type: 'pageLand' },
|
|
||||||
{ name: '科技支撑', type: 'pageTwo' },
|
{ name: '科技支撑', type: 'pageTwo' },
|
||||||
{ name: '产业基地', type: 'pageThree' },
|
{ name: '产业基地', type: 'pageThree' },
|
||||||
{ name: '全维监测', type: 'pageFour' },
|
{ name: '全维监测', type: 'pageFour' },
|
||||||
{ name: '朔源追朔', type: 'pageFive' },
|
{ name: '朔源追朔', type: 'pageFive' }
|
||||||
],
|
],
|
||||||
titleImg1: require('./img/1.png'),
|
titleImg1: require('./img/1.png'),
|
||||||
titleImg2: require('./img/2.png'),
|
titleImg2: require('./img/2.png'),
|
||||||
style: {
|
style: {
|
||||||
width: '1920',
|
width: '1920',
|
||||||
height: '1080',
|
height: '1080',
|
||||||
transform: 'scaleY(1) scaleX(1) translate(-50%, -50%)',
|
transform: 'scaleY(1) scaleX(1) translate(-50%, -50%)'
|
||||||
},
|
},
|
||||||
current: 0,
|
current: 0,
|
||||||
key: 'pageOne',
|
key: 'pageOne',
|
||||||
scale: {},
|
scale: {}
|
||||||
};
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.setScale();
|
this.setScale()
|
||||||
/* 窗口改变事件*/
|
/* 窗口改变事件*/
|
||||||
window.onresize = () => {
|
window.onresize = () => {
|
||||||
this.setScale();
|
this.setScale()
|
||||||
};
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleTabs(item, index) {
|
handleTabs(item, index) {
|
||||||
window.addEventListener('resize', () => {
|
window.addEventListener('resize', () => {
|
||||||
this.setScale();
|
this.setScale()
|
||||||
});
|
})
|
||||||
if (index != this.current) {
|
if (index != this.current) {
|
||||||
this.current = index;
|
this.current = index
|
||||||
this.key = item.type;
|
this.key = item.type
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
getScale() {
|
getScale() {
|
||||||
const w = window.innerWidth / this.style.width;
|
const w = window.innerWidth / this.style.width
|
||||||
const h = window.innerHeight / this.style.height;
|
const h = window.innerHeight / this.style.height
|
||||||
return { x: w, y: h };
|
return { x: w, y: h }
|
||||||
},
|
},
|
||||||
setScale() {
|
setScale() {
|
||||||
this.scale = this.getScale();
|
this.scale = this.getScale()
|
||||||
this.style.transform = 'scaleY(' + this.scale.y + ') scaleX(' + this.scale.x + ') translate(-50%, -50%)';
|
this.style.transform = 'scaleY(' + this.scale.y + ') scaleX(' + this.scale.x + ') translate(-50%, -50%)'
|
||||||
},
|
}
|
||||||
},
|
}
|
||||||
};
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.dataScreen-container {
|
.dataScreen-container {
|
||||||
|
|||||||
@ -8,10 +8,9 @@
|
|||||||
element-loading-text="地图加载中"
|
element-loading-text="地图加载中"
|
||||||
element-loading-spinner="el-icon-loading"
|
element-loading-spinner="el-icon-loading"
|
||||||
:style="{ height: 'calc(100vh - 310px)', width: '67%', 'margin-top': '65px', transform: `${scale}` }"
|
:style="{ height: 'calc(100vh - 310px)', width: '67%', 'margin-top': '65px', transform: `${scale}` }"
|
||||||
>
|
/>
|
||||||
</div>
|
|
||||||
<div class="boxTop" />
|
<div class="boxTop" />
|
||||||
<div v-if="type != 'pageThree' && type != 'pageFive' && type != 'pageLand'" class="boxCentLeft">
|
<div v-if="type != 'pageThree' && type != 'pageFive'" class="boxCentLeft">
|
||||||
<slot name="one" />
|
<slot name="one" />
|
||||||
</div>
|
</div>
|
||||||
<div class="boxRightTop">
|
<div class="boxRightTop">
|
||||||
|
|||||||
@ -1,299 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div id="landscreen" :style="{ 'background-image': `url(${bg})`, 'background-size': '100% 100%' }">
|
|
||||||
<div
|
|
||||||
v-if="type == 'pageLand'"
|
|
||||||
id="landMap"
|
|
||||||
class="land-center-map-warp"
|
|
||||||
v-loading="loading"
|
|
||||||
element-loading-background="#263840"
|
|
||||||
element-loading-text="地图加载中"
|
|
||||||
element-loading-spinner="el-icon-loading"
|
|
||||||
:style="{ transform: `${scale}` }"
|
|
||||||
>
|
|
||||||
<div class="land-type-map" v-if="type == 'pageLand'">
|
|
||||||
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="doAllChange">全选</el-checkbox>
|
|
||||||
<div style="margin: 15px 0"></div>
|
|
||||||
<el-checkbox-group v-model="checkedlist" @change="doSingleChange">
|
|
||||||
<el-checkbox v-for="item in options" :label="item.id" :key="item.id">{{ item.name }}</el-checkbox>
|
|
||||||
</el-checkbox-group>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="type != 'pageFive' && type != 'pageFour'" class="boxLeftTop">
|
|
||||||
<div class="title">{{ title[0] }}</div>
|
|
||||||
<div class="content">
|
|
||||||
<slot name="five" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-if="type != 'pageFive' && type != 'pageFour'" class="boxLeftCenter">
|
|
||||||
<div class="title">{{ title[1] }}</div>
|
|
||||||
<div class="content">
|
|
||||||
<slot name="five" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-if="type != 'pageFive' && type != 'pageFour'" class="boxLeftBottom">
|
|
||||||
<div class="title">{{ title[2] }}</div>
|
|
||||||
<div class="content">
|
|
||||||
<slot name="four" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="boxTop" />
|
|
||||||
<div v-if="type != 'pageThree' && type != 'pageFive' && type != 'pageLand'" class="boxCentLeft">
|
|
||||||
<slot name="one" />
|
|
||||||
</div>
|
|
||||||
<div class="boxRightTop">
|
|
||||||
<div class="title">{{ title[3] }}</div>
|
|
||||||
<div class="content">
|
|
||||||
<slot name="two" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="boxRightCenter">
|
|
||||||
<div class="title">{{ title[4] }}</div>
|
|
||||||
<div class="content">
|
|
||||||
<slot name="three" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="boxRightBottom">
|
|
||||||
<div class="title">{{ title[5] }}</div>
|
|
||||||
<div class="content">
|
|
||||||
<slot name="six" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-if="type == 'pageFive' || type == 'pageFour'" class="left">
|
|
||||||
<div class="content">
|
|
||||||
<slot name="seven" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import mapMixinLand from './mapland';
|
|
||||||
export default {
|
|
||||||
name: '',
|
|
||||||
mixins: [mapMixinLand],
|
|
||||||
inject: ['getType', 'getX', 'getY'],
|
|
||||||
props: {
|
|
||||||
bg: String,
|
|
||||||
title: Array,
|
|
||||||
baseId: Number,
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
options: [
|
|
||||||
{ name: '旱地', id: '01' },
|
|
||||||
{ name: '果园', id: '02' },
|
|
||||||
{ name: '水浇地', id: '03' },
|
|
||||||
{ name: '沟渠', id: '04' },
|
|
||||||
{ name: '田坎', id: '05' },
|
|
||||||
{ name: '茶园', id: '06' },
|
|
||||||
{ name: '设施农用地', id: '07' },
|
|
||||||
],
|
|
||||||
checkAll: false,
|
|
||||||
checkedlist: ['01','02','03','04','05','06','07'],
|
|
||||||
isIndeterminate: true,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
// TODO:使用eventBus祖孙传参待优化
|
|
||||||
computed: {
|
|
||||||
type() {
|
|
||||||
return this.getType();
|
|
||||||
},
|
|
||||||
scale() {
|
|
||||||
return `scale(${1 / this.getX()},${1 / this.getY()})`;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
doAllChange(val) {
|
|
||||||
let list = this.options.map((m) => {
|
|
||||||
return m.id;
|
|
||||||
});
|
|
||||||
this.checkedlist = val ? list : [];
|
|
||||||
this.isIndeterminate = false;
|
|
||||||
},
|
|
||||||
doSingleChange(value) {
|
|
||||||
let checkedCount = value.length;
|
|
||||||
this.checkAll = checkedCount === this.options.length;
|
|
||||||
this.isIndeterminate = checkedCount > 0 && checkedCount < this.options.length;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
#landscreen {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
.land-center-map-warp {
|
|
||||||
height: 100vh;
|
|
||||||
// width: calc(50% - 40px);
|
|
||||||
// margin-left: calc(25% + 20px);
|
|
||||||
width: 100%;
|
|
||||||
position: relative;
|
|
||||||
.land-type-map {
|
|
||||||
position: absolute;
|
|
||||||
right: calc(25% + 40px);
|
|
||||||
top: 20%;
|
|
||||||
width: 200px;
|
|
||||||
padding: 16px;
|
|
||||||
border-radius: 8px;
|
|
||||||
min-height: 50px;
|
|
||||||
z-index: 9999;
|
|
||||||
background: rgba(255,255,255,0.1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#landMap::v-deep {
|
|
||||||
transform-origin: left top;
|
|
||||||
.amap-info-content {
|
|
||||||
background: rgba(13, 29, 39, 0.8);
|
|
||||||
border-radius: 10px;
|
|
||||||
.InfoBox {
|
|
||||||
width: 250px;
|
|
||||||
height: 100px;
|
|
||||||
position: relative;
|
|
||||||
.title {
|
|
||||||
color: #fff;
|
|
||||||
font-size: 18px;
|
|
||||||
border-bottom: 1px solid #fff;
|
|
||||||
height: 40px;
|
|
||||||
line-height: 40px;
|
|
||||||
}
|
|
||||||
.num {
|
|
||||||
height: 60px;
|
|
||||||
color: #ccefff;
|
|
||||||
font-size: 12px;
|
|
||||||
padding-top: 10px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
.tips {
|
|
||||||
position: absolute;
|
|
||||||
right: -18px;
|
|
||||||
bottom: -9px;
|
|
||||||
width: 50px;
|
|
||||||
height: 26px;
|
|
||||||
line-height: 26px;
|
|
||||||
font-size: 12px;
|
|
||||||
text-align: center;
|
|
||||||
background: #2effb7;
|
|
||||||
border-bottom-right-radius: 10px;
|
|
||||||
border-top-left-radius: 10px;
|
|
||||||
}
|
|
||||||
.type {
|
|
||||||
color: #fff;
|
|
||||||
height: 60px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
.item {
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
.tag {
|
|
||||||
background: #203c49;
|
|
||||||
border-radius: 10px;
|
|
||||||
color: #2effb7;
|
|
||||||
font-size: 12px;
|
|
||||||
padding: 4px 12px;
|
|
||||||
display: inline-block;
|
|
||||||
margin: 10px 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.amap-info-sharp {
|
|
||||||
border-top-color: rgba(13, 29, 39, 0.8);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.title {
|
|
||||||
height: 35px;
|
|
||||||
line-height: 35px;
|
|
||||||
padding-left: 43px;
|
|
||||||
background: url('./img/title.png');
|
|
||||||
background-size: 100% 100%;
|
|
||||||
color: #ccefff;
|
|
||||||
font-weight: 900;
|
|
||||||
}
|
|
||||||
.content {
|
|
||||||
height: calc(100% - 35px);
|
|
||||||
padding: 10px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
.boxTop {
|
|
||||||
height: 75px;
|
|
||||||
}
|
|
||||||
.boxCentLeft {
|
|
||||||
position: absolute;
|
|
||||||
left: 20px;
|
|
||||||
top: 95px;
|
|
||||||
width: 25%;
|
|
||||||
height: 650px;
|
|
||||||
z-index: 200;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
.boxRightTop {
|
|
||||||
position: absolute;
|
|
||||||
right: 20px;
|
|
||||||
top: 95px;
|
|
||||||
width: 25%;
|
|
||||||
height: 325px;
|
|
||||||
z-index: 200;
|
|
||||||
// background: #0f2b39;
|
|
||||||
background: rgba(16, 43, 57, 0.1);
|
|
||||||
}
|
|
||||||
.boxRightCenter {
|
|
||||||
position: absolute;
|
|
||||||
right: 20px;
|
|
||||||
bottom: calc(100% - 650px - 95px);
|
|
||||||
width: 25%;
|
|
||||||
height: 310px;
|
|
||||||
z-index: 200;
|
|
||||||
// background: #0f2b39;
|
|
||||||
background: rgba(16, 43, 57, 0.1);
|
|
||||||
}
|
|
||||||
.boxLeftBottom {
|
|
||||||
position: absolute;
|
|
||||||
left: 20px;
|
|
||||||
bottom: 20px;
|
|
||||||
width: 25%;
|
|
||||||
height: 300px;
|
|
||||||
z-index: 200;
|
|
||||||
// background: #0f2b39;
|
|
||||||
background: rgba(16, 43, 57, 0.1);
|
|
||||||
}
|
|
||||||
.boxLeftCenter {
|
|
||||||
position: absolute;
|
|
||||||
left: 20px;
|
|
||||||
bottom: calc(100% - 650px - 95px);
|
|
||||||
width: 25%;
|
|
||||||
height: 300px;
|
|
||||||
z-index: 200;
|
|
||||||
// background: #0f2b39;
|
|
||||||
background: rgba(16, 43, 57, 0.1);
|
|
||||||
}
|
|
||||||
.boxLeftTop {
|
|
||||||
position: absolute;
|
|
||||||
left: 20px;
|
|
||||||
top: 95px;
|
|
||||||
width: 25%;
|
|
||||||
height: 325px;
|
|
||||||
z-index: 200;
|
|
||||||
// background: #0f2b39;
|
|
||||||
background: rgba(16, 43, 57, 0.1);
|
|
||||||
}
|
|
||||||
.boxRightBottom {
|
|
||||||
position: absolute;
|
|
||||||
right: 20px;
|
|
||||||
bottom: 20px;
|
|
||||||
width: 25%;
|
|
||||||
height: 300px;
|
|
||||||
z-index: 200;
|
|
||||||
// background: #0f2b39;
|
|
||||||
background: rgba(16, 43, 57, 0.1);
|
|
||||||
}
|
|
||||||
.left {
|
|
||||||
position: absolute;
|
|
||||||
left: 20px;
|
|
||||||
top: 95px;
|
|
||||||
width: 65%;
|
|
||||||
height: calc(100% - 95px - 20px);
|
|
||||||
z-index: 200;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,218 +0,0 @@
|
|||||||
import { listDevice } from '@/api/iot/device';
|
|
||||||
import { listLand } from '@/api/agriculture/land';
|
|
||||||
import { getDicts } from '@/api/system/dict/data';
|
|
||||||
const mapMixinLand = {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
area: [],
|
|
||||||
device: [],
|
|
||||||
baseUrl: process.env.VUE_APP_BASE_API,
|
|
||||||
loading: false,
|
|
||||||
landType: [],
|
|
||||||
deviceType: [],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
baseId: {
|
|
||||||
handler: async function (n) {
|
|
||||||
if (n) {
|
|
||||||
await this.$nextTick();
|
|
||||||
if (this.type == 'pageLand') {
|
|
||||||
this.loading = true;
|
|
||||||
// 获去地块数据
|
|
||||||
const res = await listLand({ baseId: this.baseId });
|
|
||||||
this.area = res.rows;
|
|
||||||
|
|
||||||
// 获取设备数据
|
|
||||||
const res1 = await listDevice({ baseId: this.baseId });
|
|
||||||
this.device = res1.rows.map((item) => ({
|
|
||||||
...item,
|
|
||||||
imgUrl: item.imgUrl.split(',').length > 1 ? item.imgUrl.split(',')[1] : item.imgUrl,
|
|
||||||
}));
|
|
||||||
this.initMap();
|
|
||||||
getDicts('agriculture_land_type').then((response) => {
|
|
||||||
this.landType = response.data;
|
|
||||||
});
|
|
||||||
getDicts('iot_device_status').then((response) => {
|
|
||||||
this.deviceType = response.data;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
immediate: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
async mounted() { },
|
|
||||||
methods: {
|
|
||||||
/** 初始化map */
|
|
||||||
async initMap() {
|
|
||||||
this.map = new this.AMap.Map('landMap', {
|
|
||||||
// 设置地图容器id
|
|
||||||
mapStyle: 'amap://styles/grey',
|
|
||||||
zoom: 12, // 初始化地图级别
|
|
||||||
doubleClickZoom: false,
|
|
||||||
});
|
|
||||||
await this.createAreaPolygon();
|
|
||||||
// await this.createDevicePoint();
|
|
||||||
},
|
|
||||||
/** 绘制地块 */
|
|
||||||
createAreaPolygon() {
|
|
||||||
const label = [];
|
|
||||||
const overlayGroup = [];
|
|
||||||
this.area.forEach((item) => {
|
|
||||||
if (item.landPath) {
|
|
||||||
const path = [];
|
|
||||||
const pointList = [];
|
|
||||||
let landPath = "99.890621,24.455971|99.890766,24.455854|99.890959,24.456001"
|
|
||||||
// item.landPath.split('|').forEach((point) => {
|
|
||||||
// path.push(new this.AMap.LngLat(point.split(',')[0], point.split(',')[1]));
|
|
||||||
// pointList.push([Number(point.split(',')[0]), Number(point.split(',')[1])]);
|
|
||||||
// });
|
|
||||||
landPath.split('|').forEach((point) => {
|
|
||||||
path.push(new this.AMap.LngLat(point.split(',')[0], point.split(',')[1]));
|
|
||||||
pointList.push([Number(point.split(',')[0]), Number(point.split(',')[1])]);
|
|
||||||
});
|
|
||||||
const polygon = new this.AMap.Polygon({
|
|
||||||
path: path,
|
|
||||||
fillColor: item.fillColor,
|
|
||||||
fillOpacity: item.fillOpacity,
|
|
||||||
strokeColor: item.strokeColor,
|
|
||||||
strokeWeight: item.strokeWeight,
|
|
||||||
strokeOpacity: item.strokeOpacity,
|
|
||||||
extData: {
|
|
||||||
...item,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
polygon.on('click', (e) => {
|
|
||||||
this.createInfoWindow(e);
|
|
||||||
});
|
|
||||||
|
|
||||||
overlayGroup.push(polygon);
|
|
||||||
// 添加地块名称
|
|
||||||
label.push(
|
|
||||||
new this.AMap.Text({
|
|
||||||
text: item.landName,
|
|
||||||
anchor: 'center',
|
|
||||||
position: this.getAreaCenter(pointList),
|
|
||||||
style: {
|
|
||||||
background: 'transparent',
|
|
||||||
color: '#fff',
|
|
||||||
border: 'none',
|
|
||||||
fontSize: '16px',
|
|
||||||
},
|
|
||||||
})
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
// this.map.add(new this.AMap.OverlayGroup(label));
|
|
||||||
this.map.add(new this.AMap.OverlayGroup(overlayGroup));
|
|
||||||
this.map.setFitView(overlayGroup);
|
|
||||||
this.loading = false;
|
|
||||||
},
|
|
||||||
/** 创建设备marker点 */
|
|
||||||
createDevicePoint() {
|
|
||||||
const devicePointList = [];
|
|
||||||
this.device.forEach((device) => {
|
|
||||||
if ((device.longitude, device.latitude)) {
|
|
||||||
const marker = new this.AMap.Marker({
|
|
||||||
icon: new this.AMap.Icon({
|
|
||||||
image: this.baseUrl + device.imgUrl,
|
|
||||||
imageSize: new this.AMap.Size(32, 32),
|
|
||||||
}),
|
|
||||||
position: [device.longitude, device.latitude],
|
|
||||||
title: device.deviceName,
|
|
||||||
anchor: 'bottom-center',
|
|
||||||
extData: {
|
|
||||||
...device,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
marker.on('click', (e) => {
|
|
||||||
this.createInfoWindow2(e);
|
|
||||||
});
|
|
||||||
devicePointList.push(marker);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
this.map.add(new this.AMap.OverlayGroup(devicePointList));
|
|
||||||
this.loading = false;
|
|
||||||
},
|
|
||||||
/** 获取地块中心点 */
|
|
||||||
getAreaCenter(location) {
|
|
||||||
var total = location.length;
|
|
||||||
var X = 0;
|
|
||||||
var Y = 0;
|
|
||||||
var Z = 0;
|
|
||||||
location.forEach((lnglat) => {
|
|
||||||
var lng = (lnglat[0] * Math.PI) / 180;
|
|
||||||
var lat = (lnglat[1] * Math.PI) / 180;
|
|
||||||
var x, y, z;
|
|
||||||
x = Math.cos(lat) * Math.cos(lng);
|
|
||||||
y = Math.cos(lat) * Math.sin(lng);
|
|
||||||
z = Math.sin(lat);
|
|
||||||
X += x;
|
|
||||||
Y += y;
|
|
||||||
Z += z;
|
|
||||||
});
|
|
||||||
X = X / total;
|
|
||||||
Y = Y / total;
|
|
||||||
Z = Z / total;
|
|
||||||
|
|
||||||
var Lng = Math.atan2(Y, X);
|
|
||||||
var Hyp = Math.sqrt(X * X + Y * Y);
|
|
||||||
var Lat = Math.atan2(Z, Hyp);
|
|
||||||
return [parseFloat((Lng * 180) / Math.PI), parseFloat((Lat * 180) / Math.PI)];
|
|
||||||
},
|
|
||||||
/** 信息窗体 */
|
|
||||||
createInfoWindow(e) {
|
|
||||||
var info = document.createElement('div');
|
|
||||||
info.className = 'InfoBox';
|
|
||||||
var title = document.createElement('div');
|
|
||||||
title.className = 'title';
|
|
||||||
title.innerHTML = `${e.target._opts.extData.landName}`;
|
|
||||||
var type = document.createElement('div');
|
|
||||||
var typeName = '';
|
|
||||||
this.landType.forEach((item) => {
|
|
||||||
if (item.dictValue == e.target._opts.extData.landType) {
|
|
||||||
typeName = item.dictLabel;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
type.className = 'type';
|
|
||||||
type.innerHTML = `<div class="item">类型：<div class="tag">${typeName}</div></div>
|
|
||||||
<div class="item">面积：${e.target._opts.extData.landArea}亩</div>`;
|
|
||||||
info.appendChild(title);
|
|
||||||
info.appendChild(type);
|
|
||||||
const infoWindow = new this.AMap.InfoWindow({
|
|
||||||
anchor: 'bottom-center',
|
|
||||||
content: info, // 使用默认信息窗体框样式，显示信息内容
|
|
||||||
});
|
|
||||||
infoWindow.open(this.map, new this.AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()));
|
|
||||||
},
|
|
||||||
createInfoWindow2(e) {
|
|
||||||
var info = document.createElement('div');
|
|
||||||
info.className = 'InfoBox';
|
|
||||||
var title = document.createElement('div');
|
|
||||||
title.className = 'title';
|
|
||||||
title.innerHTML = `${e.target._opts.extData.deviceName}`;
|
|
||||||
var num = document.createElement('div');
|
|
||||||
num.className = 'num';
|
|
||||||
num.innerHTML = `<div>编号：${e.target._opts.extData.serialNumber}</div>`;
|
|
||||||
var tips = document.createElement('div');
|
|
||||||
tips.className = 'tips';
|
|
||||||
var statusName = '';
|
|
||||||
this.deviceType.forEach((item) => {
|
|
||||||
if (item.dictValue == e.target._opts.extData.status) {
|
|
||||||
statusName = item.dictLabel;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
tips.innerHTML = `${statusName}`;
|
|
||||||
info.appendChild(title);
|
|
||||||
info.appendChild(num);
|
|
||||||
info.appendChild(tips);
|
|
||||||
const infoWindow = new this.AMap.InfoWindow({
|
|
||||||
anchor: 'bottom-center',
|
|
||||||
content: info, // 使用默认信息窗体框样式，显示信息内容
|
|
||||||
});
|
|
||||||
infoWindow.open(this.map, new this.AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()));
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
export default mapMixinLand;
|
|
||||||
@ -1,130 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="baseInfo">
|
|
||||||
<div class="farm">
|
|
||||||
<div class="img">
|
|
||||||
<img :src="baseInfo.baseImg" alt="" srcset="" />
|
|
||||||
</div>
|
|
||||||
<div class="farmInfo">
|
|
||||||
<div><span>基地名称：</span>{{ baseInfo.baseName }}</div>
|
|
||||||
<div><span>基地负责人：</span>{{ baseInfo.baseLeader }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="info">
|
|
||||||
<div class="item">
|
|
||||||
<img src="../img/icon1.png" alt="" />
|
|
||||||
<div class="num">{{ baseInfo.areaCount }}</div>
|
|
||||||
<div class="label">基地面积（亩）</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<img src="../img/icon2.png" alt="" />
|
|
||||||
<div class="num">{{ baseInfo.diCount + baseInfo.pengCount }}</div>
|
|
||||||
<div class="label">地块数量（块）</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<img src="../img/icon3.png" alt="" />
|
|
||||||
<div class="num">{{ baseInfo.germplasmCount }}</div>
|
|
||||||
<div class="label">种养作物（种）</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<img src="../img/icon4.png" alt="" />
|
|
||||||
<div class="num">{{ baseInfo.batchCount }}</div>
|
|
||||||
<div class="label">种植批次（个）</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { selectBaseInfo } from '@/api/agriculture/dataStatistics';
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
baseInfo: {},
|
|
||||||
baseUrl: process.env.VUE_APP_BASE_API,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
baseId: Number,
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
baseId: {
|
|
||||||
handler: function (n) {
|
|
||||||
selectBaseInfo(this.baseId).then((res) => {
|
|
||||||
this.baseInfo = res.rows[0];
|
|
||||||
});
|
|
||||||
},
|
|
||||||
immediate: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.baseInfo {
|
|
||||||
height: 100%;
|
|
||||||
padding-left: 20px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
.farm {
|
|
||||||
height: 40%;
|
|
||||||
display: flex;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
.img {
|
|
||||||
width: 100px;
|
|
||||||
height: 90%;
|
|
||||||
margin-right: 20px;
|
|
||||||
border-radius: 10px;
|
|
||||||
overflow: hidden;
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.farmInfo {
|
|
||||||
height: 100%;
|
|
||||||
padding: 12px 0;
|
|
||||||
color: #ccefff;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
div {
|
|
||||||
font-size: 18px;
|
|
||||||
span {
|
|
||||||
color: #8ea5b5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.info {
|
|
||||||
height: 60%;
|
|
||||||
display: flex;
|
|
||||||
.item {
|
|
||||||
flex: 1;
|
|
||||||
height: 100%;
|
|
||||||
font-size: 24px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
flex-direction: column;
|
|
||||||
img {
|
|
||||||
width: 30px;
|
|
||||||
}
|
|
||||||
.label {
|
|
||||||
color: #fff;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
&:nth-of-type(1) {
|
|
||||||
color: #2effb7;
|
|
||||||
}
|
|
||||||
&:nth-of-type(2) {
|
|
||||||
color: #099aff;
|
|
||||||
}
|
|
||||||
&:nth-of-type(3) {
|
|
||||||
color: #32ebf2;
|
|
||||||
}
|
|
||||||
&:nth-of-type(4) {
|
|
||||||
color: #fcde1f;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,165 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div style="height: 100%">
|
|
||||||
<div class="farmTask">
|
|
||||||
<div class="echarts">
|
|
||||||
<div class="pie" id="taskInfo"></div>
|
|
||||||
<div class="detail">
|
|
||||||
<div class="info">农事任务详情：<span @click="showDetail">点击查看明细></span></div>
|
|
||||||
<div class="progress">
|
|
||||||
<div>农事任务进度：</div>
|
|
||||||
<el-progress style="width: 65%" :percentage="percentage"></el-progress>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="info">
|
|
||||||
<div class="item" v-for="item in taskTotal" :key="item.id">
|
|
||||||
<div class="num">{{ item.value }}</div>
|
|
||||||
<div class="label">{{ item.name }}任务(项)</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { selectTaskInfo } from '@/api/agriculture/dataStatistics';
|
|
||||||
import { pie, autoHover } from '../echartsOption';
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
percentage: 0,
|
|
||||||
taskTotal: [],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
baseId: Number,
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
baseId: {
|
|
||||||
handler: async function (n) {
|
|
||||||
if (n) {
|
|
||||||
const { rows } = await selectTaskInfo(this.baseId);
|
|
||||||
this.taskTotal = rows;
|
|
||||||
//已分配 已完成 未分配 进行中
|
|
||||||
await this.$nextTick();
|
|
||||||
//完成率统计
|
|
||||||
let total = rows.reduce((sum, item) => sum + item.value, 0);
|
|
||||||
this.percentage = total == 0 ? 0 : Number(((rows[1].value / total) * 100).toFixed(1));
|
|
||||||
//饼图赋值
|
|
||||||
let option = {
|
|
||||||
color: this.$colorList,
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
type: 'pie',
|
|
||||||
radius: ['75%', '90%'],
|
|
||||||
avoidLabelOverlap: false,
|
|
||||||
itemStyle: {
|
|
||||||
borderRadius: 2,
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
show: false,
|
|
||||||
position: 'center',
|
|
||||||
color: '#fff',
|
|
||||||
textBorderColor: 'transparent',
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
fontSize: 14,
|
|
||||||
formatter: `{b}\n{d}%`,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
labelLine: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
data: rows,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
let myChart = this.$echarts.init(document.getElementById('taskInfo'));
|
|
||||||
myChart.setOption(option);
|
|
||||||
autoHover(myChart, option, 3000);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
immediate: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
showDetail() {
|
|
||||||
this.$emit('show');
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.farmTask {
|
|
||||||
height: 100%;
|
|
||||||
padding-left: 20px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
.echarts {
|
|
||||||
height: 50%;
|
|
||||||
display: flex;
|
|
||||||
.pie {
|
|
||||||
height: 100%;
|
|
||||||
width: 120px;
|
|
||||||
margin-right: 20px;
|
|
||||||
}
|
|
||||||
.detail {
|
|
||||||
flex: 1;
|
|
||||||
color: #fff;
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 20px 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
.progress::v-deep {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
.el-progress__text {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
.el-progress-bar__outer {
|
|
||||||
height: 20px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
span {
|
|
||||||
color: #2effb7;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.info {
|
|
||||||
height: 50%;
|
|
||||||
display: flex;
|
|
||||||
.item {
|
|
||||||
flex: 1;
|
|
||||||
height: 100%;
|
|
||||||
font-size: 20px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
flex-direction: column;
|
|
||||||
.num {
|
|
||||||
font-size: 26px;
|
|
||||||
}
|
|
||||||
.label {
|
|
||||||
color: #fff;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
&:nth-of-type(1) {
|
|
||||||
color: #2effb7;
|
|
||||||
}
|
|
||||||
&:nth-of-type(2) {
|
|
||||||
color: #099aff;
|
|
||||||
}
|
|
||||||
&:nth-of-type(3) {
|
|
||||||
color: #32ebf2;
|
|
||||||
}
|
|
||||||
&:nth-of-type(4) {
|
|
||||||
color: #fcde1f;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,83 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="industrialBase">
|
|
||||||
<layOutLand :baseId="baseId" :title="title">
|
|
||||||
<template v-slot:two>
|
|
||||||
<land-type-compose :baseId="baseId"></land-type-compose>
|
|
||||||
</template>
|
|
||||||
<template v-slot:three>
|
|
||||||
<land-type-distribution :baseId="baseId"></land-type-distribution>
|
|
||||||
</template>
|
|
||||||
<template v-slot:four>
|
|
||||||
<land-area-total :baseId="baseId"></land-area-total>
|
|
||||||
</template>
|
|
||||||
<template v-slot:five>
|
|
||||||
<plant-area :baseId="baseId"></plant-area>
|
|
||||||
</template>
|
|
||||||
<template v-slot:six>
|
|
||||||
<land-type-area :baseId="baseId"></land-type-area>
|
|
||||||
</template>
|
|
||||||
</layOutLand>
|
|
||||||
<el-dialog :visible.sync="show" width="60%" custom-class="taskDetail" :modal="false">
|
|
||||||
<div slot="title">农事任务</div>
|
|
||||||
<task :baseId="baseId"></task>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import layOutLand from '../layOutLand.vue';
|
|
||||||
import baseInfo from './baseInfo.vue';
|
|
||||||
import productPrices from './productPrices.vue';
|
|
||||||
import farmTask from './farmTask.vue';
|
|
||||||
import plantArea from './plantArea.vue';
|
|
||||||
import landTypeCompose from './landTypeCompose.vue';
|
|
||||||
import landTypeDistribution from './landTypeDistribution.vue';
|
|
||||||
import landTypeArea from './landTypeArea.vue';
|
|
||||||
import landAreaTotal from './landAreaTotal.vue';
|
|
||||||
import task from './task.vue';
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
layOutLand,
|
|
||||||
baseInfo,
|
|
||||||
productPrices,
|
|
||||||
farmTask,
|
|
||||||
plantArea,
|
|
||||||
landTypeCompose,
|
|
||||||
landTypeDistribution,
|
|
||||||
landTypeArea,
|
|
||||||
landAreaTotal,
|
|
||||||
task,
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
baseId: Number,
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
title: ['耕地面积统计', '农村土地资源项目', '项目效益分析', '耕地类型', '根底类型面积统计','作物情况'],
|
|
||||||
show: false,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
baseId: {
|
|
||||||
handler: function (n) {},
|
|
||||||
immediate: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.industrialBase::v-deep {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
.taskDetail {
|
|
||||||
.el-dialog__header {
|
|
||||||
background: #0b2439;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
.el-dialog__body {
|
|
||||||
background: #0b2439;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,139 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="land-area-total-warp" id="landAreaTotal"></div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { selectBatchInfo } from '@/api/agriculture/dataStatistics';
|
|
||||||
import { bar, autoHover } from '../echartsOption';
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
datalist: [],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
baseId: Number,
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
baseId: {
|
|
||||||
handler: async function (n) {
|
|
||||||
if (n) {
|
|
||||||
await this.$nextTick();
|
|
||||||
const { rows } = await selectBatchInfo(this.baseId);
|
|
||||||
this.datalist = [
|
|
||||||
{ name: '凤山镇', value: 3.5 },
|
|
||||||
{ name: '勐佑镇', value: 1.2 },
|
|
||||||
{ name: '三岔河镇', value: 3.0 },
|
|
||||||
{ name: '小湾镇', value: 0.4 },
|
|
||||||
{ name: '洛党镇', value: 0.9 },
|
|
||||||
{ name: '雪山镇', value: 1.2 },
|
|
||||||
{ name: '营盘镇', value: 3.2 },
|
|
||||||
{ name: '郭大寨乡', value: 1.3 },
|
|
||||||
{ name: '大寺乡', value: 3.5 },
|
|
||||||
{ name: '鲁史镇', value: 0.4 },
|
|
||||||
{ name: '诗礼乡', value: 0.9 },
|
|
||||||
{ name: '新华乡', value: 1.1 },
|
|
||||||
{ name: '腰街乡', value: 1.5 },
|
|
||||||
];
|
|
||||||
let option = {
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
showContent: false,
|
|
||||||
axisPointer: {
|
|
||||||
type: 'shadow',
|
|
||||||
crossStyle: {
|
|
||||||
color: '#999',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
left: 30,
|
|
||||||
top: 20,
|
|
||||||
right: 20,
|
|
||||||
bottom: 20,
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
// data: rows.map((item) => item.name),
|
|
||||||
data: this.datalist.map((item) => item.name),
|
|
||||||
axisLabel: {
|
|
||||||
color: '#fff',
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: false, // 显示分割线
|
|
||||||
lineStyle: {
|
|
||||||
type: 'dashed', // 设置为虚线
|
|
||||||
width: 0.5, // 分割线宽度
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value',
|
|
||||||
axisLabel: {
|
|
||||||
color: '#fff',
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: false, // 显示分割线
|
|
||||||
lineStyle: {
|
|
||||||
type: 'dashed', // 设置为虚线
|
|
||||||
width: 0.5, // 分割线宽度
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
// data: rows.map((item) => item.value),
|
|
||||||
data: this.datalist.map((item) => item.value),
|
|
||||||
type: 'bar',
|
|
||||||
emphasis: {
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
fontSize: 12,
|
|
||||||
formatter: '{c}万亩',
|
|
||||||
position: 'top',
|
|
||||||
color: '#fff',
|
|
||||||
textBorderColor: 'transparent',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
barWidth: 20,
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
borderRadius: [20, 20, 0, 0],
|
|
||||||
color: {
|
|
||||||
type: 'linear', // 线性渐变
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
x2: 0,
|
|
||||||
y2: 1,
|
|
||||||
colorStops: [
|
|
||||||
{ offset: 0, color: '#99dcf3' },
|
|
||||||
{ offset: 1, color: '#01589c' },
|
|
||||||
],
|
|
||||||
global: false, // 默认为 false
|
|
||||||
},
|
|
||||||
// color: (params) => {
|
|
||||||
// return this.$colorList[params.dataIndex];
|
|
||||||
// },
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
let myChart = this.$echarts.init(document.getElementById('landAreaTotal'));
|
|
||||||
myChart.setOption(option);
|
|
||||||
autoHover(myChart, option, 1500);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
immediate: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
mounted() {},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.land-area-total-warp {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,186 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="land-type-area-warp">
|
|
||||||
<div class="filter-warp">
|
|
||||||
<el-dropdown @command="handleCommand">
|
|
||||||
<span class="el-dropdown-link">
|
|
||||||
{{ currentType && currentType.id ? currentType.name : '请选择地区' }}
|
|
||||||
<el-icon class="el-icon-arrow-down"><arrow-down /></el-icon>
|
|
||||||
</span>
|
|
||||||
<template #dropdown>
|
|
||||||
<el-dropdown-menu>
|
|
||||||
<el-dropdown-item v-for="(n, indexn) in typelist" :key="n.id" :command="n"> {{ n.name }}</el-dropdown-item>
|
|
||||||
</el-dropdown-menu>
|
|
||||||
</template>
|
|
||||||
</el-dropdown>
|
|
||||||
</div>
|
|
||||||
<div id="landTypeArea" class="charts-content"></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { selectBatchInfo } from '@/api/agriculture/dataStatistics';
|
|
||||||
import { bar, autoHover } from '../echartsOption';
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
typelist: [
|
|
||||||
{ name: '勐佑镇', id: '01' },
|
|
||||||
{ name: '三岔河镇', id: '02' },
|
|
||||||
{ name: '小湾镇', id: '03' },
|
|
||||||
{ name: '洛党镇', id: '04' },
|
|
||||||
{ name: '雪山镇', id: '05' },
|
|
||||||
{ name: '营盘镇', id: '06' },
|
|
||||||
{ name: '郭大寨乡', id: '07' },
|
|
||||||
{ name: '大寺乡', id: '08' },
|
|
||||||
{ name: '鲁史镇', id: '09' },
|
|
||||||
{ name: '诗礼乡', id: '010' },
|
|
||||||
{ name: '新华乡', id: '011' },
|
|
||||||
{ name: '腰街乡', id: '012' },
|
|
||||||
],
|
|
||||||
currentType: { name: '勐佑镇', id: '01' },
|
|
||||||
};
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
baseId: Number,
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
baseId: {
|
|
||||||
handler: async function (n) {
|
|
||||||
if (n) {
|
|
||||||
await this.$nextTick();
|
|
||||||
const { rows } = await selectBatchInfo(this.baseId);
|
|
||||||
let product = [
|
|
||||||
{ name: '旱地', value: 3.5 },
|
|
||||||
{ name: '果园', value: 1.2 },
|
|
||||||
{ name: '水浇地', value: 3.0 },
|
|
||||||
{ name: '沟渠', value: 0.4 },
|
|
||||||
{ name: '田坎', value: 0.4},
|
|
||||||
{ name: '茶园', value: 3.8 },
|
|
||||||
{ name: '设施农用地', value: 0.9 },
|
|
||||||
];
|
|
||||||
let option = {
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
showContent: false,
|
|
||||||
axisPointer: {
|
|
||||||
type: 'shadow',
|
|
||||||
crossStyle: {
|
|
||||||
color: '#999',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
left: 30,
|
|
||||||
top: 20,
|
|
||||||
right: 20,
|
|
||||||
bottom: 20,
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
// data: rows.map((item) => item.name),
|
|
||||||
data: product.map((item) => item.name),
|
|
||||||
axisLabel: {
|
|
||||||
color: '#fff',
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: false, // 显示分割线
|
|
||||||
lineStyle: {
|
|
||||||
type: 'dashed', // 设置为虚线
|
|
||||||
width: 0.5, // 分割线宽度
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value',
|
|
||||||
axisLabel: {
|
|
||||||
color: '#fff',
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: false, // 显示分割线
|
|
||||||
lineStyle: {
|
|
||||||
type: 'dashed', // 设置为虚线
|
|
||||||
width: 0.5, // 分割线宽度
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
// data: rows.map((item) => item.value),
|
|
||||||
data: product.map((item) => item.value),
|
|
||||||
type: 'bar',
|
|
||||||
emphasis: {
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
fontSize: 12,
|
|
||||||
formatter: '{c}万亩',
|
|
||||||
position: 'top',
|
|
||||||
color: '#fff',
|
|
||||||
textBorderColor: 'transparent',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
barWidth: 20,
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
borderRadius: [20, 20, 0, 0],
|
|
||||||
// color: (params) => {
|
|
||||||
// return this.$colorList[params.dataIndex];
|
|
||||||
// },
|
|
||||||
color: {
|
|
||||||
type: 'linear', // 线性渐变
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
x2: 0,
|
|
||||||
y2: 1,
|
|
||||||
colorStops: [
|
|
||||||
{ offset: 0, color: '#adf5a1' },
|
|
||||||
{ offset: 1, color: '#198905' },
|
|
||||||
],
|
|
||||||
global: false, // 默认为 false
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
let myChart = this.$echarts.init(document.getElementById('landTypeArea'));
|
|
||||||
myChart.setOption(option);
|
|
||||||
autoHover(myChart, option, 1500);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
immediate: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
mounted() {},
|
|
||||||
methods:{
|
|
||||||
handleCommand(data) {
|
|
||||||
console.info('handleCommand', data);
|
|
||||||
this.currentType = data;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.land-type-area-warp {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
.filter-warp {
|
|
||||||
width: 100px;
|
|
||||||
height: 100%;
|
|
||||||
.el-dropdown {
|
|
||||||
width: 100px;
|
|
||||||
padding: 0 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
span {
|
|
||||||
color: #fff;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.charts-content {
|
|
||||||
width: calc(100% - 100px);
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,167 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="land-type-compose-warp">
|
|
||||||
<div id="pieChart"></div>
|
|
||||||
<div id="barChart"></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { autoHover } from '../echartsOption';
|
|
||||||
import { selectDeviceInfo } from '@/api/agriculture/dataStatistics';
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
product: [],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
baseId: Number,
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
baseId: {
|
|
||||||
handler: async function (n) {
|
|
||||||
if (n) {
|
|
||||||
await this.$nextTick();
|
|
||||||
let pieChart = this.$echarts.init(document.getElementById('pieChart'));
|
|
||||||
let barChart = this.$echarts.init(document.getElementById('barChart'));
|
|
||||||
const { rows } = await selectDeviceInfo(this.baseId);
|
|
||||||
// this.product = rows;
|
|
||||||
this.product = [
|
|
||||||
{ name: '旱地', value: 32 },
|
|
||||||
{ name: '果园', value: 12 },
|
|
||||||
{ name: '水浇地', value: 35 },
|
|
||||||
{ name: '灌溉水田', value: 4 },
|
|
||||||
{ name: '茶园', value: 35 },
|
|
||||||
{ name: '菜地', value: 12 },
|
|
||||||
];
|
|
||||||
let option1 = {
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
color: this.$colorList,
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
type: 'pie',
|
|
||||||
radius: ['75%', '90%'],
|
|
||||||
avoidLabelOverlap: false,
|
|
||||||
itemStyle: {
|
|
||||||
borderRadius: 2,
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
show: false,
|
|
||||||
position: 'center',
|
|
||||||
color: '#fff',
|
|
||||||
textBorderColor: 'transparent',
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
fontSize: 14,
|
|
||||||
formatter: `{b}\n{d}%`,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
labelLine: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
// data: rows,
|
|
||||||
data: this.product,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
pieChart.setOption(option1);
|
|
||||||
autoHover(pieChart, option1, 1500);
|
|
||||||
|
|
||||||
let option2 = {
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
showContent: false,
|
|
||||||
axisPointer: {
|
|
||||||
type: 'shadow',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
left: 100,
|
|
||||||
top: 20,
|
|
||||||
right: 50,
|
|
||||||
bottom: 20,
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'category',
|
|
||||||
// data: rows.map((item) => item.name),
|
|
||||||
data: this.product.map((item) => item.name),
|
|
||||||
axisLabel: {
|
|
||||||
color: '#fff',
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: false, // 显示分割线
|
|
||||||
lineStyle: {
|
|
||||||
type: 'dashed', // 设置为虚线
|
|
||||||
width: 0.5, // 分割线宽度
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'value',
|
|
||||||
axisLabel: {
|
|
||||||
color: '#fff',
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: false, // 显示分割线
|
|
||||||
lineStyle: {
|
|
||||||
type: 'dashed', // 设置为虚线
|
|
||||||
width: 0.5, // 分割线宽度
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
// data: rows.map((item) => item.value),
|
|
||||||
data: this.product.map((item) => item.value),
|
|
||||||
type: 'bar',
|
|
||||||
barWidth: 20,
|
|
||||||
emphasis: {
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
fontSize: 12,
|
|
||||||
formatter: '{c}%',
|
|
||||||
position: 'right',
|
|
||||||
color: '#fff',
|
|
||||||
textBorderColor: 'transparent',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
borderRadius: [0, 20, 20, 0],
|
|
||||||
color: (params) => {
|
|
||||||
return this.$colorList[params.dataIndex];
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
barChart.setOption(option2);
|
|
||||||
autoHover(barChart, option2, 1500);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
immediate: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.land-type-compose-warp {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
#pieChart {
|
|
||||||
width: 30%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
#barChart {
|
|
||||||
width: 70%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,215 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="land-type-distribution-warp">
|
|
||||||
<!-- <div id="distributionPieChart"></div> -->
|
|
||||||
<div class="filter-warp">
|
|
||||||
<el-dropdown @command="handleCommand">
|
|
||||||
<span class="el-dropdown-link">
|
|
||||||
{{ currentType && currentType.id ? currentType.name : '请选择类型' }}
|
|
||||||
<el-icon class="el-icon-arrow-down"><arrow-down /></el-icon>
|
|
||||||
</span>
|
|
||||||
<template #dropdown>
|
|
||||||
<el-dropdown-menu>
|
|
||||||
<el-dropdown-item v-for="(n, indexn) in typelist" :key="n.id" :command="n"> {{ n.name }}</el-dropdown-item>
|
|
||||||
</el-dropdown-menu>
|
|
||||||
</template>
|
|
||||||
</el-dropdown>
|
|
||||||
</div>
|
|
||||||
<div id="distributionBarChart"></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { autoHover } from '../echartsOption';
|
|
||||||
import { selectDeviceInfo } from '@/api/agriculture/dataStatistics';
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
product: [],
|
|
||||||
typelist: [
|
|
||||||
{ name: '旱地', id: '01' },
|
|
||||||
{ name: '果园', id: '02' },
|
|
||||||
{ name: '水浇地', id: '03' },
|
|
||||||
{ name: '沟渠', id: '04' },
|
|
||||||
{ name: '田坎', id: '05' },
|
|
||||||
{ name: '茶园', id: '06' },
|
|
||||||
{ name: '设施农用地', id: '07' },
|
|
||||||
],
|
|
||||||
currentType: { name: '茶园', id: '06' },
|
|
||||||
};
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
baseId: Number,
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
baseId: {
|
|
||||||
handler: async function (n) {
|
|
||||||
if (n) {
|
|
||||||
await this.$nextTick();
|
|
||||||
// let pieChart = this.$echarts.init(document.getElementById('distributionPieChart'));
|
|
||||||
let barChart = this.$echarts.init(document.getElementById('distributionBarChart'));
|
|
||||||
const { rows } = await selectDeviceInfo(this.baseId);
|
|
||||||
// this.product = rows;
|
|
||||||
this.product = [
|
|
||||||
{ name: '凤山镇', value: 0.35 },
|
|
||||||
{ name: '勐佑镇', value: 0.12 },
|
|
||||||
{ name: '三岔河镇', value: 0.35 },
|
|
||||||
{ name: '小湾镇', value: 0.4 },
|
|
||||||
{ name: '洛党镇', value: 0.9 },
|
|
||||||
{ name: '雪山镇', value: 0.12 },
|
|
||||||
{ name: '营盘镇', value: 0.32 },
|
|
||||||
{ name: '郭大寨乡', value: 0.12 },
|
|
||||||
{ name: '大寺乡', value: 0.35 },
|
|
||||||
{ name: '鲁史镇', value: 0.4 },
|
|
||||||
{ name: '诗礼乡', value: 0.9 },
|
|
||||||
{ name: '新华乡', value: 0.12 },
|
|
||||||
{ name: '腰街乡', value: 0.15 },
|
|
||||||
];
|
|
||||||
console.info('landTypeDistribution**************', this.product);
|
|
||||||
let option1 = {
|
|
||||||
color: this.$colorList,
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
type: 'pie',
|
|
||||||
radius: ['75%', '90%'],
|
|
||||||
avoidLabelOverlap: false,
|
|
||||||
itemStyle: {
|
|
||||||
borderRadius: 2,
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
show: false,
|
|
||||||
position: 'center',
|
|
||||||
color: '#fff',
|
|
||||||
textBorderColor: 'transparent',
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
fontSize: 14,
|
|
||||||
formatter: `{b}\n{d}%`,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
labelLine: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
// data: rows,
|
|
||||||
data: this.product,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
// pieChart.setOption(option1);
|
|
||||||
// autoHover(pieChart, option1, 1500);
|
|
||||||
|
|
||||||
let option2 = {
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
showContent: false,
|
|
||||||
axisPointer: {
|
|
||||||
type: 'shadow',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
left: 100,
|
|
||||||
top: 20,
|
|
||||||
right: 50,
|
|
||||||
bottom: 20,
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'category',
|
|
||||||
// data: rows.map((item) => item.name),
|
|
||||||
data: this.product.map((item) => item.name),
|
|
||||||
axisLabel: {
|
|
||||||
color: '#fff',
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: false, // 显示分割线
|
|
||||||
lineStyle: {
|
|
||||||
type: 'dashed', // 设置为虚线
|
|
||||||
width: 0.5, // 分割线宽度
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'value',
|
|
||||||
axisLabel: {
|
|
||||||
color: '#fff',
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: false, // 显示分割线
|
|
||||||
lineStyle: {
|
|
||||||
type: 'dashed', // 设置为虚线
|
|
||||||
width: 0.5, // 分割线宽度
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
// data: rows.map((item) => item.value),
|
|
||||||
data: this.product.map((item) => item.value),
|
|
||||||
type: 'bar',
|
|
||||||
barWidth: 10,
|
|
||||||
emphasis: {
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
fontSize: 12,
|
|
||||||
formatter: '{c}万亩',
|
|
||||||
position: 'right',
|
|
||||||
color: '#fff',
|
|
||||||
textBorderColor: 'transparent',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
borderRadius: [0, 10, 10, 0],
|
|
||||||
color: (params) => {
|
|
||||||
return this.$colorList[params.dataIndex];
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
barChart.setOption(option2);
|
|
||||||
autoHover(barChart, option2, 1500);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
immediate: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleCommand(data) {
|
|
||||||
console.info('handleCommand', data);
|
|
||||||
this.currentType = data;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.land-type-distribution-warp {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
// #distributionPieChart {
|
|
||||||
// width: 30%;
|
|
||||||
// height: 100%;
|
|
||||||
// }
|
|
||||||
.filter-warp {
|
|
||||||
width: 100px;
|
|
||||||
height: 100%;
|
|
||||||
.el-dropdown {
|
|
||||||
width: 100px;
|
|
||||||
padding: 0 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
span {
|
|
||||||
color: #fff;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#distributionBarChart {
|
|
||||||
width: calc(100% - 100px);
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,139 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="plantArea" id="plnatArea"></div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { selectBatchInfo } from '@/api/agriculture/dataStatistics';
|
|
||||||
import { bar, autoHover } from '../echartsOption';
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
datalist: [],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
baseId: Number,
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
baseId: {
|
|
||||||
handler: async function (n) {
|
|
||||||
if (n) {
|
|
||||||
await this.$nextTick();
|
|
||||||
const { rows } = await selectBatchInfo(this.baseId);
|
|
||||||
this.datalist = [
|
|
||||||
{ name: '凤山镇', value: 35 },
|
|
||||||
{ name: '勐佑镇', value: 12 },
|
|
||||||
{ name: '三岔河镇', value: 30 },
|
|
||||||
{ name: '小湾镇', value: 4 },
|
|
||||||
{ name: '洛党镇', value: 9 },
|
|
||||||
{ name: '雪山镇', value: 12 },
|
|
||||||
{ name: '营盘镇', value: 32 },
|
|
||||||
{ name: '郭大寨乡', value: 13 },
|
|
||||||
{ name: '大寺乡', value: 35 },
|
|
||||||
{ name: '鲁史镇', value: 4 },
|
|
||||||
{ name: '诗礼乡', value: 9 },
|
|
||||||
{ name: '新华乡', value: 11 },
|
|
||||||
{ name: '腰街乡', value: 15 },
|
|
||||||
];
|
|
||||||
let option = {
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
showContent: false,
|
|
||||||
axisPointer: {
|
|
||||||
type: 'shadow',
|
|
||||||
crossStyle: {
|
|
||||||
color: '#999',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
left: 30,
|
|
||||||
top: 20,
|
|
||||||
right: 20,
|
|
||||||
bottom: 20,
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
// data: rows.map((item) => item.name),
|
|
||||||
data: this.datalist.map((item) => item.name),
|
|
||||||
axisLabel: {
|
|
||||||
color: '#fff',
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: false, // 显示分割线
|
|
||||||
lineStyle: {
|
|
||||||
type: 'dashed', // 设置为虚线
|
|
||||||
width: 0.5, // 分割线宽度
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value',
|
|
||||||
axisLabel: {
|
|
||||||
color: '#fff',
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: false, // 显示分割线
|
|
||||||
lineStyle: {
|
|
||||||
type: 'dashed', // 设置为虚线
|
|
||||||
width: 0.5, // 分割线宽度
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
// data: rows.map((item) => item.value),
|
|
||||||
data: this.datalist.map((item) => item.value),
|
|
||||||
type: 'bar',
|
|
||||||
emphasis: {
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
fontSize: 12,
|
|
||||||
formatter: '{c}个',
|
|
||||||
position: 'top',
|
|
||||||
color: '#fff',
|
|
||||||
textBorderColor: 'transparent',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
barWidth: 20,
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
borderRadius: [20, 20, 0, 0],
|
|
||||||
// color: (params) => {
|
|
||||||
// return this.$colorList[params.dataIndex];
|
|
||||||
// },
|
|
||||||
color: {
|
|
||||||
type: 'linear', // 线性渐变
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
x2: 0,
|
|
||||||
y2: 1,
|
|
||||||
colorStops: [
|
|
||||||
{ offset: 0, color: '#b6fdf7' },
|
|
||||||
{ offset: 1, color: '#019c8f' },
|
|
||||||
],
|
|
||||||
global: false, // 默认为 false
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
let myChart = this.$echarts.init(document.getElementById('plnatArea'));
|
|
||||||
myChart.setOption(option);
|
|
||||||
autoHover(myChart, option, 1500);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
immediate: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
mounted() {},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.plantArea {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,164 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="productPrices">
|
|
||||||
<div class="box">
|
|
||||||
<div class="label">
|
|
||||||
<div>品种名称</div>
|
|
||||||
<div>单位</div>
|
|
||||||
<div>昨日</div>
|
|
||||||
<div>今日</div>
|
|
||||||
<div>涨跌</div>
|
|
||||||
</div>
|
|
||||||
<vue-seamless-scroll :data="scrollList" class="list" :class-option="defaultOption(scrollList)">
|
|
||||||
<ul class="case-info">
|
|
||||||
<li v-for="(item, index) in scrollList" :key="index">
|
|
||||||
<div>{{ item.type }}</div>
|
|
||||||
<div>{{ item.unit }}</div>
|
|
||||||
<div>{{ item.old }}元</div>
|
|
||||||
<div>{{ item.new }}元</div>
|
|
||||||
<div>{{ ((item.new - item.old) / item.new).toFixed(2) }}% <i class="el-icon-bottom"></i></div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</vue-seamless-scroll>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import vueSeamlessScroll from 'vue-seamless-scroll';
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
vueSeamlessScroll,
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
scrollList: [
|
|
||||||
{
|
|
||||||
type: '西瓜',
|
|
||||||
unit: 'KG',
|
|
||||||
old: 2,
|
|
||||||
new: 3,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: '草莓',
|
|
||||||
unit: 'KG',
|
|
||||||
old: 2,
|
|
||||||
new: 3,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: '番茄',
|
|
||||||
unit: 'KG',
|
|
||||||
old: 2,
|
|
||||||
new: 3,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: '水蜜桃',
|
|
||||||
unit: 'KG',
|
|
||||||
old: 2,
|
|
||||||
new: 3,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: '哈密瓜',
|
|
||||||
unit: 'KG',
|
|
||||||
old: 2,
|
|
||||||
new: 3,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: '蓝莓',
|
|
||||||
unit: 'KG',
|
|
||||||
old: 2,
|
|
||||||
new: 3,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: '橘子',
|
|
||||||
unit: 'KG',
|
|
||||||
old: 2,
|
|
||||||
new: 3,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
defaultOption() {
|
|
||||||
return (data) => {
|
|
||||||
return {
|
|
||||||
step: 0.4, // 数值越大速度滚动越快
|
|
||||||
limitMoveNum: this.scrollList.length, // 开始无缝滚动的数据量 this.dataList.length
|
|
||||||
hoverStop: true, // 是否开启鼠标悬停stop
|
|
||||||
direction: 1, // 0向下 1向上 2向左 3向右
|
|
||||||
openWatch: true, // 开启数据实时监控刷新dom
|
|
||||||
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
|
||||||
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
|
||||||
waitTime: 0, // 单步运动停止的时间(默认值1000ms)
|
|
||||||
};
|
|
||||||
};
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.productPrices {
|
|
||||||
height: 100%;
|
|
||||||
.box {
|
|
||||||
height: 100%;
|
|
||||||
.label {
|
|
||||||
display: flex;
|
|
||||||
background: #203c4999;
|
|
||||||
color: #c5d0d4;
|
|
||||||
height: 30px;
|
|
||||||
line-height: 30px;
|
|
||||||
border-radius: 4px;
|
|
||||||
padding-left: 20px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
div {
|
|
||||||
flex: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
&:nth-of-type(1) {
|
|
||||||
flex: 1.5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.list {
|
|
||||||
height: calc(100% - 30px);
|
|
||||||
overflow: hidden;
|
|
||||||
.case-info {
|
|
||||||
color: #fff;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
padding-left: 20px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
li {
|
|
||||||
display: flex;
|
|
||||||
height: 30px;
|
|
||||||
line-height: 30px;
|
|
||||||
div {
|
|
||||||
flex: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
font-size: 13px;
|
|
||||||
&:nth-of-type(1) {
|
|
||||||
flex: 1.5;
|
|
||||||
}
|
|
||||||
&:nth-of-type(3) {
|
|
||||||
color: #099aff;
|
|
||||||
}
|
|
||||||
&:nth-of-type(4) {
|
|
||||||
color: #099aff;
|
|
||||||
}
|
|
||||||
&:nth-of-type(5) {
|
|
||||||
color: #2effb7;
|
|
||||||
.el-icon-bottom {
|
|
||||||
color: #2effb7;
|
|
||||||
font-weight: 900;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,232 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="gantt-container">
|
|
||||||
<div class="search">
|
|
||||||
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
|
|
||||||
<el-form-item label="任务名称" prop="taskName">
|
|
||||||
<el-input v-model="queryParams.taskName" placeholder="请输入任务名称" clearable size="small" @keyup.enter.native="handleQuery" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="计划开始日期" prop="psr">
|
|
||||||
<el-date-picker
|
|
||||||
size="small"
|
|
||||||
v-model="queryParams.psr"
|
|
||||||
type="daterange"
|
|
||||||
range-separator="-"
|
|
||||||
start-placeholder="时间范围开始"
|
|
||||||
value-format="yyyy-MM-dd"
|
|
||||||
end-placeholder="时间范围结束"
|
|
||||||
>
|
|
||||||
</el-date-picker>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type="info" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
|
||||||
<el-button icon="el-icon-refresh" type="info" plain size="mini" @click="resetQuery">重置</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
<div class="table">
|
|
||||||
<el-table
|
|
||||||
v-loading="loading"
|
|
||||||
element-loading-background="#263840"
|
|
||||||
:data="taskList"
|
|
||||||
:header-cell-style="{ background: '#092944', color: '#fff' }"
|
|
||||||
:row-class-name="tableRowClassName"
|
|
||||||
:cell-style="{ color: '#fff' }"
|
|
||||||
>
|
|
||||||
<el-table-column label="批次名称" align="center" prop="batchName" />
|
|
||||||
<el-table-column label="任务名称" align="center" prop="taskName" />
|
|
||||||
<el-table-column label="计划开始日期" align="center" prop="planStart" width="180" />
|
|
||||||
<el-table-column label="计划结束日期" align="center" prop="planFinish" width="180" />
|
|
||||||
<el-table-column label="实际开始日期" align="center" prop="actualStart" width="180">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<span>{{ scope.row.actualStart ? scope.row.actualStart : '/' }}</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="实际结束日期" align="center" prop="actualFinish" width="180">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<span>{{ scope.row.actualFinish ? scope.row.actualFinish : '/' }}</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="状态" align="center" prop="status">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<dict-tag :options="dict.type.agriculture_batch_task_status" :value="scope.row.status" />
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<pagination
|
|
||||||
v-show="total > 0"
|
|
||||||
:total="total"
|
|
||||||
:page.sync="queryParams.pageNum"
|
|
||||||
:limit.sync="queryParams.pageSize"
|
|
||||||
@pagination="getList"
|
|
||||||
:background="false"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { listBatchTask } from '@/api/agriculture/batchTask';
|
|
||||||
export default {
|
|
||||||
name: 'BatchTask',
|
|
||||||
props: {
|
|
||||||
baseId: Number,
|
|
||||||
},
|
|
||||||
dicts: ['agriculture_batch_task_status'],
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
// 遮罩层
|
|
||||||
loading: true,
|
|
||||||
// 显示搜索条件
|
|
||||||
showSearch: true,
|
|
||||||
// 总条数
|
|
||||||
total: 0,
|
|
||||||
// 批次任务表格数据
|
|
||||||
taskList: [],
|
|
||||||
//任务id
|
|
||||||
taskId: null,
|
|
||||||
// 查询参数
|
|
||||||
queryParams: {
|
|
||||||
pageNum: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
taskName: null,
|
|
||||||
planStart: null,
|
|
||||||
planStartStart: null,
|
|
||||||
planStartEnd: null,
|
|
||||||
planFinish: null,
|
|
||||||
psr: null,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
baseId: {
|
|
||||||
handler: function (n) {
|
|
||||||
if (n) {
|
|
||||||
this.getList();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
immediate: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
/** 查询批次任务列表 */
|
|
||||||
async getList() {
|
|
||||||
this.loading = true;
|
|
||||||
const {
|
|
||||||
queryParams: { psr },
|
|
||||||
} = this;
|
|
||||||
if (psr && Array.isArray(psr) && psr.length == 2) {
|
|
||||||
this.queryParams.params = {
|
|
||||||
planStartStart: psr[0],
|
|
||||||
planStartEnd: psr[1],
|
|
||||||
};
|
|
||||||
}
|
|
||||||
const response = await listBatchTask({
|
|
||||||
baseId: this.baseId,
|
|
||||||
...this.queryParams,
|
|
||||||
});
|
|
||||||
this.taskList = response.rows;
|
|
||||||
this.total = response.total;
|
|
||||||
this.loading = false;
|
|
||||||
},
|
|
||||||
/** 搜索按钮操作 */
|
|
||||||
handleQuery() {
|
|
||||||
this.queryParams.pageNum = 1;
|
|
||||||
this.getList();
|
|
||||||
},
|
|
||||||
/** 重置按钮操作 */
|
|
||||||
resetQuery() {
|
|
||||||
this.resetForm('queryForm');
|
|
||||||
this.handleQuery();
|
|
||||||
},
|
|
||||||
tableRowClassName({ row, rowIndex }) {
|
|
||||||
return 'even';
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
$colorL1: #0c2438;
|
|
||||||
$colorL2: #092944;
|
|
||||||
$colorL3: #0d3758;
|
|
||||||
$colorL4: #132f41;
|
|
||||||
.gantt-container {
|
|
||||||
height: 100%;
|
|
||||||
.table {
|
|
||||||
background: #0b2439;
|
|
||||||
padding: 0 20px;
|
|
||||||
height: calc(100% - 70px - 70px);
|
|
||||||
.gantt {
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
::v-deep .el-table {
|
|
||||||
.even {
|
|
||||||
background: #132f41;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
|
|
||||||
background-color: rgba(0, 0, 0, 0) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.search {
|
|
||||||
background: #0b2439;
|
|
||||||
height: 70px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
position: sticky;
|
|
||||||
top: 0px;
|
|
||||||
z-index: 2;
|
|
||||||
&::v-deep .el-form {
|
|
||||||
color: #fff;
|
|
||||||
.el-form-item__label {
|
|
||||||
color: #b9dbea;
|
|
||||||
}
|
|
||||||
input {
|
|
||||||
border: none;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
.el-date-editor {
|
|
||||||
border: none;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
.el-input__inner,
|
|
||||||
.el-range-input {
|
|
||||||
background: #132f42;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.pagination-container ::v-deep {
|
|
||||||
height: 50px;
|
|
||||||
background: #0b2439;
|
|
||||||
.el-pagination {
|
|
||||||
.el-pagination__total,
|
|
||||||
.el-pagination__jump {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
.el-input__inner,
|
|
||||||
button,
|
|
||||||
.el-pager .number,
|
|
||||||
.el-icon {
|
|
||||||
background: #132f42;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
.el-pager li.active {
|
|
||||||
font-weight: 900;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
input {
|
|
||||||
border: none;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.search ::v-deep .el-form-item {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
.search ::v-deep .el-form {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
x
Reference in New Issue
Block a user