Web/digital-agriculture-admin
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

大数据中心土地资源初始布局

Browse Source
This commit is contained in:
13713575202 2025-04-18 17:29:29 +08:00
parent 83702dbd0b
commit f766ebd5e8
14 changed files with 2171 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/views/dataV/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="dataScreen-container" :style="{ width: `${style.width}px`, height: `${style.height}px`, transform: `${style.transform}` }">
<div class="boxTop">
<img src="./img/leftTitle.png" alt="" class="img1">
<img src="./img/leftTitle.png" alt="" class="img1" />
<div class="boxTopRight">
<div class="index_animation__s5UDk" />
<ul v-for="(item, index) in titleList" :key="index">
@ -24,77 +24,80 @@
<script>
// import './flexible'
import pageOne from './pageOne'
import pageTwo from './pageTwo'
import pageThree from './pageThree'
import pageFour from './pageFour'
import pageFive from './pageFive'
import pageOne from './pageOne';
import pageTwo from './pageTwo';
import pageThree from './pageThree';
import pageLand from './pageLand';
import pageFour from './pageFour';
import pageFive from './pageFive';
export default {
name: '',
components: {
pageOne,
pageTwo,
pageLand,
pageThree,
pageFour,
pageFive
pageFive,
},
provide() {
return {
getType: () => this.key,
getX: () => this.scale.x,
getY: () => this.scale.y
}
getY: () => this.scale.y,
};
},
data() {
return {
baseId: null,
titleList: [
{ name: '首\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0页', type: 'pageOne' },
{ name: '土地资源', type: 'pageLand' },
{ name: '科技支撑', type: 'pageTwo' },
{ name: '产业基地', type: 'pageThree' },
{ name: '全维监测', type: 'pageFour' },
{ name: '朔源追朔', type: 'pageFive' }
{ name: '朔源追朔', type: 'pageFive' },
],
titleImg1: require('./img/1.png'),
titleImg2: require('./img/2.png'),
style: {
width: '1920',
height: '1080',
transform: 'scaleY(1) scaleX(1) translate(-50%, -50%)'
transform: 'scaleY(1) scaleX(1) translate(-50%, -50%)',
},
current: 0,
key: 'pageOne',
scale: {}
}
scale: {},
};
},
mounted() {
this.setScale()
this.setScale();
/* 窗口改变事件*/
window.onresize = () => {
this.setScale()
}
this.setScale();
};
},
methods: {
handleTabs(item, index) {
window.addEventListener('resize', () => {
this.setScale()
})
this.setScale();
});
if (index != this.current) {
this.current = index
this.key = item.type
this.current = index;
this.key = item.type;
}
},
getScale() {
const w = window.innerWidth / this.style.width
const h = window.innerHeight / this.style.height
return { x: w, y: h }
const w = window.innerWidth / this.style.width;
const h = window.innerHeight / this.style.height;
return { x: w, y: h };
},
setScale() {
this.scale = this.getScale()
this.style.transform = 'scaleY(' + this.scale.y + ') scaleX(' + this.scale.x + ') translate(-50%, -50%)'
}
}
}
this.scale = this.getScale();
this.style.transform = 'scaleY(' + this.scale.y + ') scaleX(' + this.scale.x + ') translate(-50%, -50%)';
},
},
};
</script>
<style lang="scss" scoped>
.dataScreen-container {

5
src/views/dataV/layOut.vue
View File

@ -8,9 +8,10 @@
element-loading-text="地图加载中"
element-loading-spinner="el-icon-loading"
:style="{ height: 'calc(100vh - 310px)', width: '67%', 'margin-top': '65px', transform: `${scale}` }"
/>
>
</div>
<div class="boxTop" />
<div v-if="type != 'pageThree' && type != 'pageFive'" class="boxCentLeft">
<div v-if="type != 'pageThree' && type != 'pageFive' && type != 'pageLand'" class="boxCentLeft">
<slot name="one" />
</div>
<div class="boxRightTop">

299
src/views/dataV/layOutLand.vue Normal file
View File

@ -0,0 +1,299 @@
<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>

218
src/views/dataV/mapland.js Normal file
View File

@ -0,0 +1,218 @@
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;

130
src/views/dataV/pageLand/baseInfo.vue Normal file
View File

@ -0,0 +1,130 @@
<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>

165
src/views/dataV/pageLand/farmTask.vue Normal file
View File

@ -0,0 +1,165 @@
<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>

83
src/views/dataV/pageLand/index.vue Normal file
View File

@ -0,0 +1,83 @@
<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>

139
src/views/dataV/pageLand/landAreaTotal.vue Normal file
View File

@ -0,0 +1,139 @@
<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>

186
src/views/dataV/pageLand/landTypeArea.vue Normal file
View File

@ -0,0 +1,186 @@
<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>

167
src/views/dataV/pageLand/landTypeCompose.vue Normal file
View File

@ -0,0 +1,167 @@
<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>

215
src/views/dataV/pageLand/landTypeDistribution.vue Normal file
View File

@ -0,0 +1,215 @@
<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>

139
src/views/dataV/pageLand/plantArea.vue Normal file
View File

@ -0,0 +1,139 @@
<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>

164
src/views/dataV/pageLand/productPrices.vue Normal file
View File

@ -0,0 +1,164 @@
<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>

232
src/views/dataV/pageLand/task.vue Normal file
View File

@ -0,0 +1,232 @@
<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>