ui修改
parent
c054822545
commit
6d228f20f8
|
|
@ -0,0 +1,236 @@
|
||||||
|
<template>
|
||||||
|
<view class="data-view">
|
||||||
|
<view class="select-box">
|
||||||
|
<uni-row >
|
||||||
|
<uni-col :span="8">
|
||||||
|
<uni-data-select :clear="false" v-model="imei" :localdata="agriList" @change="changeAgri"></uni-data-select>
|
||||||
|
</uni-col>
|
||||||
|
<uni-col :span="16">
|
||||||
|
<uni-datetime-picker v-model="dateRange" type="datetimerange" :end="end" @change="changeDate"/>
|
||||||
|
</uni-col>
|
||||||
|
</uni-row>
|
||||||
|
</view>
|
||||||
|
<view class="charts-box">
|
||||||
|
<qiun-data-charts
|
||||||
|
type="line"
|
||||||
|
:opts="opts"
|
||||||
|
background="#ffffff"
|
||||||
|
:chartData="chartData"
|
||||||
|
:canvas2d="true"
|
||||||
|
canvasId="nMPkeQGNEosMwoWKKNRBZBIEhguMoMWp"
|
||||||
|
:ontouch="true"
|
||||||
|
:disableScroll="true"
|
||||||
|
:onmovetip="true"
|
||||||
|
tooltipFormat="tooltipDemo"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
<view class="uni-padding-wrap uni-common-mt tag-row">
|
||||||
|
<button @click.stop="jumpDate(-1)" style="margin-right: 20rpx;" type="primary" size="mini">前一天</button>
|
||||||
|
<button :disabled="isTodayDate(dateRange[0]) || isTodayDate(dateRange[1]) || dateRange.length===0" @click.stop="jumpDate(1)" style="margin-right: 20rpx;" type="default" size="mini">后一天</button>
|
||||||
|
<button @click.stop="jumpDate(0)" type="warn" size="mini">回到当天</button>
|
||||||
|
</view>
|
||||||
|
<!-- 暂无数据 -->
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getHistoryData} from "../../api/system/data";
|
||||||
|
import {listAgri} from "../../api/system/assets/agri";
|
||||||
|
import {parseTime, isIntervalMoreThanNDays, getExactDiffDays, isTodayDate} from "../../utils/agri";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data: function () {
|
||||||
|
return {
|
||||||
|
chartData: {},
|
||||||
|
//这里的 opts 是图表类型 type="line" 的全部配置参数，您可以将此配置复制到 config-ucharts.js 文件中下标为 ['line'] 的节点中来覆盖全局默认参数。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
|
||||||
|
opts: {
|
||||||
|
legend: {
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
rotateAngle: 75,
|
||||||
|
format: "xAxisDemo"
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
gridType: "dash",
|
||||||
|
dashLength: 2,
|
||||||
|
disabled: false,
|
||||||
|
disableGrid: false,
|
||||||
|
splitNumber: 5,
|
||||||
|
gridColor: "#CCCCCC",
|
||||||
|
padding: 10,
|
||||||
|
showTitle: true,
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
type: "value",
|
||||||
|
position: "left",
|
||||||
|
disabled: false,
|
||||||
|
axisLine: true,
|
||||||
|
axisLineColor: "#CCCCCC",
|
||||||
|
calibration: true,
|
||||||
|
fontColor: "#666666",
|
||||||
|
fontSize: 13,
|
||||||
|
textAlign: "left",
|
||||||
|
title: "温度（℃）",
|
||||||
|
titleFontSize: 14,
|
||||||
|
titleOffsetY: -10,
|
||||||
|
titleOffsetX: 5,
|
||||||
|
titleFontColor: "#333333",
|
||||||
|
min: 0,
|
||||||
|
max: 50,
|
||||||
|
tofix: 1,
|
||||||
|
unit: "",
|
||||||
|
format: ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "value",
|
||||||
|
position: "right",
|
||||||
|
disabled: false,
|
||||||
|
axisLine: true,
|
||||||
|
axisLineColor: "#CCCCCC",
|
||||||
|
calibration: true,
|
||||||
|
fontColor: "#666666",
|
||||||
|
fontSize: 13,
|
||||||
|
textAlign: "right",
|
||||||
|
title: "湿度（%RH）",
|
||||||
|
titleFontSize: 14,
|
||||||
|
titleOffsetY: -10,
|
||||||
|
titleOffsetX: 0,
|
||||||
|
titleFontColor: "#333333",
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
|
tofix: 1,
|
||||||
|
unit: "",
|
||||||
|
format: ""
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
dateRange:[],
|
||||||
|
end:Date.now(),
|
||||||
|
agriList:[],
|
||||||
|
imei:null
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// this.getAgriList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
isTodayDate,
|
||||||
|
getServerData() {
|
||||||
|
const param = {
|
||||||
|
imei: this.imei,
|
||||||
|
startTime: this.dateRange[0],
|
||||||
|
endTime: this.dateRange[1]
|
||||||
|
}
|
||||||
|
//模拟从服务器获取数据时的延时
|
||||||
|
getHistoryData(param).then(response => {
|
||||||
|
if (response.code === 200 && response.data) {
|
||||||
|
var data = response.data;
|
||||||
|
this.chartData = JSON.parse(JSON.stringify(data));
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getAgriList() {
|
||||||
|
listAgri().then(response => {
|
||||||
|
if (response.code === 200) {
|
||||||
|
this.agriList = response.rows.map(item => ({
|
||||||
|
agriId: item.id,
|
||||||
|
text: item.agriName,
|
||||||
|
value: item.imei // 提取并改名
|
||||||
|
}));
|
||||||
|
|
||||||
|
this.imei = this.agriList[0].value;
|
||||||
|
this.getServerData();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
changeAgri(imei) {
|
||||||
|
if (imei) {
|
||||||
|
this.getServerData();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
changeDate(date) {
|
||||||
|
// date[0]-date[1]
|
||||||
|
if (isIntervalMoreThanNDays(date[0],date[1],7)) {
|
||||||
|
this.$modal.alert('时间范围暂不支持查询超过7天以上的数据！');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (date[0] === date[1]) {
|
||||||
|
this.dateRange[0] = parseTime(date[0], '{y}-{m}-{d} 00:00:00')
|
||||||
|
}
|
||||||
|
if (this.imei) {
|
||||||
|
this.getServerData();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
jumpDate(days) {
|
||||||
|
|
||||||
|
// 多选情况 || 时间范围今天以后不能选
|
||||||
|
// days: 前一天(-1) 后一天(1) 回到当天(0)
|
||||||
|
let targetDate;
|
||||||
|
if (this.dateRange.length === 0 || getExactDiffDays(this.dateRange[0],this.dateRange[1])>1) {
|
||||||
|
this.dateRange[0] = new Date();
|
||||||
|
}
|
||||||
|
if (days === 0) {
|
||||||
|
// 回到当天
|
||||||
|
targetDate = new Date();
|
||||||
|
} else {
|
||||||
|
// 前一天或后一天
|
||||||
|
const currentStartDate = new Date(this.dateRange[0]);
|
||||||
|
targetDate = new Date(currentStartDate);
|
||||||
|
targetDate.setDate(targetDate.getDate() + days);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置开始时间为目标日期的 00:00:00
|
||||||
|
const startDate = new Date(targetDate);
|
||||||
|
startDate.setHours(0, 0, 0, 0);
|
||||||
|
|
||||||
|
// 设置结束时间
|
||||||
|
let endDate;
|
||||||
|
if (days === 0) {
|
||||||
|
// 回到当天，结束时间为当前时间
|
||||||
|
endDate = new Date();
|
||||||
|
} else {
|
||||||
|
// 前一天或后一天，结束时间为目标日期的 23:59:59
|
||||||
|
endDate = new Date(targetDate);
|
||||||
|
endDate.setHours(23, 59, 59, 999);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新 dateRange
|
||||||
|
this.dateRange = [
|
||||||
|
parseTime(startDate ),
|
||||||
|
parseTime(endDate)
|
||||||
|
];
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
// 如果已选择设备，重新获取数据
|
||||||
|
if (this.imei) {
|
||||||
|
this.getServerData();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}, 500)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.data-view {
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
.select-box {
|
||||||
|
margin-top: 10rpx;
|
||||||
|
}
|
||||||
|
.charts-box {
|
||||||
|
width: 100%;
|
||||||
|
height: 500px;
|
||||||
|
}
|
||||||
|
/deep/ .uni-select, /deep/ .uni-date-editor--x {
|
||||||
|
background: #fff !important;
|
||||||
|
height: 68rpx;
|
||||||
|
}
|
||||||
|
.tag-row {
|
||||||
|
text-align: center;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,236 +1,31 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="data-view">
|
<view>
|
||||||
<view class="select-box">
|
<HistoryData ref="historyData" />
|
||||||
<uni-row >
|
|
||||||
<uni-col :span="8">
|
|
||||||
<uni-data-select :clear="false" v-model="imei" :localdata="agriList" @change="changeAgri"></uni-data-select>
|
|
||||||
</uni-col>
|
|
||||||
<uni-col :span="16">
|
|
||||||
<uni-datetime-picker v-model="dateRange" type="datetimerange" :end="end" @change="changeDate"/>
|
|
||||||
</uni-col>
|
|
||||||
</uni-row>
|
|
||||||
</view>
|
|
||||||
<view class="charts-box">
|
|
||||||
<qiun-data-charts
|
|
||||||
type="line"
|
|
||||||
:opts="opts"
|
|
||||||
background="#ffffff"
|
|
||||||
:chartData="chartData"
|
|
||||||
:canvas2d="true"
|
|
||||||
canvasId="nMPkeQGNEosMwoWKKNRBZBIEhguMoMWp"
|
|
||||||
:ontouch="true"
|
|
||||||
:disableScroll="true"
|
|
||||||
:onmovetip="true"
|
|
||||||
tooltipFormat="tooltipDemo"
|
|
||||||
/>
|
|
||||||
</view>
|
|
||||||
<view class="uni-padding-wrap uni-common-mt tag-row">
|
|
||||||
<button @click.stop="jumpDate(-1)" style="margin-right: 20rpx;" type="primary" size="mini">前一天</button>
|
|
||||||
<button :disabled="isTodayDate(dateRange[0]) || isTodayDate(dateRange[1])" @click.stop="jumpDate(1)" style="margin-right: 20rpx;" type="default" size="mini">后一天</button>
|
|
||||||
<button @click.stop="jumpDate(0)" type="warn" size="mini">回到当天</button>
|
|
||||||
</view>
|
|
||||||
<!-- 暂无数据 -->
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { getHistoryData} from "../../api/system/data";
|
import HistoryData from './data.vue'
|
||||||
import {listAgri} from "../../api/system/assets/agri";
|
|
||||||
import {parseTime, isIntervalMoreThanNDays, getExactDiffDays, isTodayDate} from "../../utils/agri";
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data: function () {
|
data: function () {
|
||||||
return {
|
return {
|
||||||
chartData: {},
|
|
||||||
//这里的 opts 是图表类型 type="line" 的全部配置参数，您可以将此配置复制到 config-ucharts.js 文件中下标为 ['line'] 的节点中来覆盖全局默认参数。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
|
|
||||||
opts: {
|
|
||||||
legend: {
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
rotateAngle: 75,
|
|
||||||
format: "xAxisDemo"
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
gridType: "dash",
|
|
||||||
dashLength: 2,
|
|
||||||
disabled: false,
|
|
||||||
disableGrid: false,
|
|
||||||
splitNumber: 5,
|
|
||||||
gridColor: "#CCCCCC",
|
|
||||||
padding: 10,
|
|
||||||
showTitle: true,
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
type: "value",
|
|
||||||
position: "left",
|
|
||||||
disabled: false,
|
|
||||||
axisLine: true,
|
|
||||||
axisLineColor: "#CCCCCC",
|
|
||||||
calibration: true,
|
|
||||||
fontColor: "#666666",
|
|
||||||
fontSize: 13,
|
|
||||||
textAlign: "left",
|
|
||||||
title: "温度（℃）",
|
|
||||||
titleFontSize: 14,
|
|
||||||
titleOffsetY: -10,
|
|
||||||
titleOffsetX: 5,
|
|
||||||
titleFontColor: "#333333",
|
|
||||||
min: 0,
|
|
||||||
max: 50,
|
|
||||||
tofix: 1,
|
|
||||||
unit: "",
|
|
||||||
format: ""
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: "value",
|
|
||||||
position: "right",
|
|
||||||
disabled: false,
|
|
||||||
axisLine: true,
|
|
||||||
axisLineColor: "#CCCCCC",
|
|
||||||
calibration: true,
|
|
||||||
fontColor: "#666666",
|
|
||||||
fontSize: 13,
|
|
||||||
textAlign: "right",
|
|
||||||
title: "湿度（%RH）",
|
|
||||||
titleFontSize: 14,
|
|
||||||
titleOffsetY: -10,
|
|
||||||
titleOffsetX: 0,
|
|
||||||
titleFontColor: "#333333",
|
|
||||||
min: 0,
|
|
||||||
max: 100,
|
|
||||||
tofix: 1,
|
|
||||||
unit: "",
|
|
||||||
format: ""
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
dateRange:[],
|
|
||||||
end:Date.now(),
|
|
||||||
agriList:[],
|
|
||||||
imei:null
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
components: {
|
||||||
|
HistoryData
|
||||||
|
},
|
||||||
onShow() {
|
onShow() {
|
||||||
this.getAgriList();
|
this.$nextTick(() => {
|
||||||
|
this.$refs.historyData.getAgriList();
|
||||||
|
})
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
isTodayDate,
|
|
||||||
getServerData() {
|
|
||||||
const param = {
|
|
||||||
imei: this.imei,
|
|
||||||
startTime: this.dateRange[0],
|
|
||||||
endTime: this.dateRange[1]
|
|
||||||
}
|
|
||||||
//模拟从服务器获取数据时的延时
|
|
||||||
getHistoryData(param).then(response => {
|
|
||||||
if (response.code === 200 && response.data) {
|
|
||||||
var data = response.data;
|
|
||||||
this.chartData = JSON.parse(JSON.stringify(data));
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
getAgriList() {
|
|
||||||
listAgri().then(response => {
|
|
||||||
if (response.code === 200) {
|
|
||||||
this.agriList = response.rows.map(item => ({
|
|
||||||
agriId: item.id,
|
|
||||||
text: item.agriName,
|
|
||||||
value: item.imei // 提取并改名
|
|
||||||
}));
|
|
||||||
|
|
||||||
this.imei = this.agriList[0].value;
|
|
||||||
this.getServerData();
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
changeAgri(imei) {
|
|
||||||
if (imei) {
|
|
||||||
this.getServerData();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
changeDate(date) {
|
|
||||||
// date[0]-date[1]
|
|
||||||
if (isIntervalMoreThanNDays(date[0],date[1],7)) {
|
|
||||||
this.$modal.alert('时间范围暂不支持查询超过7天以上的数据！');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (date[0] === date[1]) {
|
|
||||||
this.dateRange[0] = parseTime(date[0], '{y}-{m}-{d} 00:00:00')
|
|
||||||
}
|
|
||||||
if (this.imei) {
|
|
||||||
this.getServerData();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
jumpDate(days) {
|
|
||||||
|
|
||||||
// 多选情况 || 时间范围今天以后不能选
|
|
||||||
// days: 前一天(-1) 后一天(1) 回到当天(0)
|
|
||||||
let targetDate;
|
|
||||||
if (this.dateRange.length === 0 || getExactDiffDays(this.dateRange[0],this.dateRange[1])>1) {
|
|
||||||
this.dateRange[0] = new Date();
|
|
||||||
}
|
|
||||||
if (days === 0) {
|
|
||||||
// 回到当天
|
|
||||||
targetDate = new Date();
|
|
||||||
} else {
|
|
||||||
// 前一天或后一天
|
|
||||||
const currentStartDate = new Date(this.dateRange[0]);
|
|
||||||
targetDate = new Date(currentStartDate);
|
|
||||||
targetDate.setDate(targetDate.getDate() + days);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 设置开始时间为目标日期的 00:00:00
|
|
||||||
const startDate = new Date(targetDate);
|
|
||||||
startDate.setHours(0, 0, 0, 0);
|
|
||||||
|
|
||||||
// 设置结束时间
|
|
||||||
let endDate;
|
|
||||||
if (days === 0) {
|
|
||||||
// 回到当天，结束时间为当前时间
|
|
||||||
endDate = new Date();
|
|
||||||
} else {
|
|
||||||
// 前一天或后一天，结束时间为目标日期的 23:59:59
|
|
||||||
endDate = new Date(targetDate);
|
|
||||||
endDate.setHours(23, 59, 59, 999);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 更新 dateRange
|
|
||||||
this.dateRange = [
|
|
||||||
parseTime(startDate ),
|
|
||||||
parseTime(endDate)
|
|
||||||
];
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
// 如果已选择设备，重新获取数据
|
|
||||||
if (this.imei) {
|
|
||||||
this.getServerData();
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}, 500)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.data-view {
|
|
||||||
background: #ffffff;
|
|
||||||
}
|
|
||||||
.select-box {
|
|
||||||
margin-top: 10rpx;
|
|
||||||
}
|
|
||||||
.charts-box {
|
|
||||||
width: 100%;
|
|
||||||
height: 500px;
|
|
||||||
}
|
|
||||||
/deep/ .uni-select, /deep/ .uni-date-editor--x {
|
|
||||||
background: #fff !important;
|
|
||||||
height: 68rpx;
|
|
||||||
}
|
|
||||||
.tag-row {
|
|
||||||
text-align: center;
|
|
||||||
padding-bottom: 20rpx;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -1,79 +1,121 @@
|
||||||
<template>
|
<template>
|
||||||
<view style="height: 750rpx">
|
<view style="width:100%; height: 1000rpx; background:#FFFFFF;">
|
||||||
<l-echart ref="chart"></l-echart>
|
<view style="width:100%; height: 800rpx;">
|
||||||
|
<l-echart ref="chart"></l-echart>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
import LEchart from "../../uni_modules/lime-echart/components/l-echart/l-echart.vue";
|
import LEchart from "../../uni_modules/lime-echart/components/l-echart/l-echart.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {LEchart},
|
components: { LEchart },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
option: {
|
option: {
|
||||||
title: {
|
title: {
|
||||||
text: 'Stacked Line' // todo
|
text: 'Stacked Line',
|
||||||
|
x: 'center',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 16,
|
||||||
|
color: '#333'
|
||||||
|
},
|
||||||
|
padding: [10, 0, 10, 0] // 预留标题上下间距，避免与图例冲突
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis'
|
trigger: 'axis'
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
|
data: ['价格', '数量'],
|
||||||
|
orient: 'horizontal',
|
||||||
|
bottom: '10%',
|
||||||
|
padding: [10, 20, 20, 20],
|
||||||
|
itemGap: 20,
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 24,
|
||||||
|
color: '#333'
|
||||||
|
}
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
left: '3%',
|
left: '3%',
|
||||||
right: '4%',
|
right: '4%',
|
||||||
bottom: '3%',
|
top: '15%',
|
||||||
|
bottom: '30%', // 增大底部预留空间
|
||||||
containLabel: true
|
containLabel: true
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
boundaryGap: false,
|
boundaryGap: false,
|
||||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||||||
},
|
axisLabel: {
|
||||||
yAxis: {
|
fontSize: 12
|
||||||
type: 'value'
|
}
|
||||||
},
|
},
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '价格',
|
||||||
|
position: 'left',
|
||||||
|
alignTicks: true,
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#c23531'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
formatter: '{value} 元',
|
||||||
|
fontSize: 12
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '数量',
|
||||||
|
position: 'right',
|
||||||
|
alignTicks: true,
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#2f4554'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
formatter: '{value} 件',
|
||||||
|
fontSize: 12
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
dataZoom: [{}],
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: '邮件营销',
|
name: '价格',
|
||||||
type: 'line',
|
type: 'line',
|
||||||
stack: '总量',
|
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||||||
data: [120, 132, 101, 134, 90, 230, 210]
|
yAxisIndex: 0,
|
||||||
|
smooth: true,
|
||||||
|
symbolSize: 6,
|
||||||
|
itemStyle: { color: '#c23531' },
|
||||||
|
lineStyle: { width: 2 }
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '联盟广告',
|
name: '数量',
|
||||||
type: 'line',
|
type: 'line',
|
||||||
stack: '总量',
|
data: [120, 132, 101, 134, 90, 230, 210],
|
||||||
data: [220, 182, 191, 234, 290, 330, 310]
|
yAxisIndex: 1,
|
||||||
},
|
smooth: true,
|
||||||
{
|
symbolSize: 6,
|
||||||
name: '视频广告',
|
itemStyle: { color: '#2f4554' },
|
||||||
type: 'line',
|
lineStyle: { width: 2 }
|
||||||
stack: '总量',
|
|
||||||
data: [150, 232, 201, 154, 190, 330, 410]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '直接访问',
|
|
||||||
type: 'line',
|
|
||||||
stack: '总量',
|
|
||||||
data: [320, 332, 301, 334, 390, 330, 320]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '搜索引擎',
|
|
||||||
type: 'line',
|
|
||||||
stack: '总量',
|
|
||||||
data: [820, 932, 901, 934, 1290, 1330, 1320]
|
|
||||||
}
|
}
|
||||||
]
|
],
|
||||||
|
color: ['#c23531', '#2f4554']
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.$refs.chart.init(echarts, chart=> {
|
this.$refs.chart.init(echarts, chart => {
|
||||||
chart.setOption(this.option);
|
chart.setOption(this.option);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -280,6 +280,26 @@
|
||||||
:maskCloseable="false"
|
:maskCloseable="false"
|
||||||
@click="showTips"
|
@click="showTips"
|
||||||
/>
|
/>
|
||||||
|
<tn-fab
|
||||||
|
:btnList="content"
|
||||||
|
left="auto"
|
||||||
|
right="40"
|
||||||
|
bottom="100"
|
||||||
|
width="88"
|
||||||
|
height="88"
|
||||||
|
iconSize="64"
|
||||||
|
backgroundColor="#01BEFF"
|
||||||
|
fontColor="#FFFFFF"
|
||||||
|
icon="plusempty"
|
||||||
|
animationType="up"
|
||||||
|
@click="showData"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<uni-popup ref="showHistoryData" type="dialog" mode="center">
|
||||||
|
<view class="modal-container popup">
|
||||||
|
<history-data ref="historyDataRef"></history-data>
|
||||||
|
</view>
|
||||||
|
</uni-popup>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -295,6 +315,7 @@ import UniSection from "../../../components/uni-section/uni-section.vue";
|
||||||
import UniFormsItem from "../../../uni_modules/uni-forms/components/uni-forms-item/uni-forms-item.vue";
|
import UniFormsItem from "../../../uni_modules/uni-forms/components/uni-forms-item/uni-forms-item.vue";
|
||||||
import { checkTimeConflict } from "../../../utils/agri"
|
import { checkTimeConflict } from "../../../utils/agri"
|
||||||
import {getAgriTerm, saveAgriTerm} from "../../../api/control/autoTerm";
|
import {getAgriTerm, saveAgriTerm} from "../../../api/control/autoTerm";
|
||||||
|
import HistoryData from "../../data/data.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
options: {
|
options: {
|
||||||
|
|
@ -390,6 +411,7 @@ export default {
|
||||||
components: {
|
components: {
|
||||||
UniFormsItem,
|
UniFormsItem,
|
||||||
UniSection,
|
UniSection,
|
||||||
|
HistoryData,
|
||||||
UniPopup // 注册弹窗组件
|
UniPopup // 注册弹窗组件
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
@ -550,7 +572,20 @@ export default {
|
||||||
reservedLen: null,
|
reservedLen: null,
|
||||||
ventTotalLen: null
|
ventTotalLen: null
|
||||||
},
|
},
|
||||||
showTip:false
|
showTip:false,
|
||||||
|
pattern: {
|
||||||
|
color: '#7A7E83',
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
selectedColor: '#007AFF',
|
||||||
|
buttonColor: '#007AFF',
|
||||||
|
iconColor: '#fff'
|
||||||
|
},
|
||||||
|
content: [{
|
||||||
|
iconPath: '/static/image.png',
|
||||||
|
selectedIconPath: '/static/image-active.png',
|
||||||
|
text: '温度',
|
||||||
|
active: false
|
||||||
|
}]
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -1104,6 +1139,12 @@ export default {
|
||||||
if (event.index===1) {
|
if (event.index===1) {
|
||||||
this.saveAgriTerm();
|
this.saveAgriTerm();
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
showData() {
|
||||||
|
this.$refs.showHistoryData.open();
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.historyDataRef.getAgriList()
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1206,12 +1247,15 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 新增：弹窗样式 */
|
/* 新增：弹窗样式 */
|
||||||
.modal-container, .modal-container_ {
|
.modal-container_ {
|
||||||
width: 600rpx;
|
width: 600rpx;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 16rpx;
|
border-radius: 16rpx;
|
||||||
padding: 30rpx 20rpx;
|
padding: 30rpx 20rpx;
|
||||||
}
|
}
|
||||||
|
.popup {
|
||||||
|
width: 700rpx;
|
||||||
|
}
|
||||||
.modal-container_{
|
.modal-container_{
|
||||||
padding: 30rpx 40rpx;
|
padding: 30rpx 40rpx;
|
||||||
.uni-forms-item:nth-child(1) {
|
.uni-forms-item:nth-child(1) {
|
||||||
|
|
@ -1222,40 +1266,7 @@ export default {
|
||||||
gap: 30rpx;
|
gap: 30rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.modal-title {
|
|
||||||
font-size: 30rpx;
|
|
||||||
font-weight: 500;
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 40rpx;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-input-wrap {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 35rpx;
|
|
||||||
font-size: 26rpx;
|
|
||||||
margin-left: 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-label {
|
|
||||||
width: 180rpx;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-current {
|
|
||||||
margin-left: 14rpx;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-input {
|
|
||||||
height: 60rpx;
|
|
||||||
border: 1px solid #eee;
|
|
||||||
border-radius: 8rpx;
|
|
||||||
padding: 0 15rpx;
|
|
||||||
font-size: 26rpx;
|
|
||||||
width: 80rpx;
|
|
||||||
}
|
|
||||||
/* 核心样式：让子元素水平排列 */
|
/* 核心样式：让子元素水平排列 */
|
||||||
.modal-slider {
|
.modal-slider {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -1466,5 +1477,6 @@ export default {
|
||||||
/deep/ .uni-swipe_button {
|
/deep/ .uni-swipe_button {
|
||||||
height: 140rpx;
|
height: 140rpx;
|
||||||
border-radius: 10rpx;
|
border-radius: 10rpx;
|
||||||
|
box-shadow: 8rpx 5rpx 10rpx #D9D9D9 !important
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -594,10 +594,13 @@ page {
|
||||||
// #ifdef H5
|
// #ifdef H5
|
||||||
height: 192rpx !important;
|
height: 192rpx !important;
|
||||||
// #endif
|
// #endif
|
||||||
margin-right: 10rpx;
|
|
||||||
border-radius: 12rpx;
|
border-radius: 12rpx;
|
||||||
box-shadow: 8rpx 5rpx 10rpx #999;
|
box-shadow: 8rpx 5rpx 10rpx #999;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/deep/ .uni-swipe_button:nth-child(even) {
|
||||||
|
margin-right: 10rpx
|
||||||
|
}
|
||||||
.list-item,/deep/.tn-swipe-action-item {
|
.list-item,/deep/.tn-swipe-action-item {
|
||||||
height: 190rpx !important;
|
height: 190rpx !important;
|
||||||
/* 移除border-bottom，改为margin-top，并且把列表项背景设为半透明白色 */
|
/* 移除border-bottom，改为margin-top，并且把列表项背景设为半透明白色 */
|
||||||
|
|
|
||||||
|
|
@ -97,7 +97,12 @@
|
||||||
@tap.stop="fabClick"
|
@tap.stop="fabClick"
|
||||||
>
|
>
|
||||||
<slot>
|
<slot>
|
||||||
<view class="tn-fab__item__btn__icon" :class="[`tn-icon-${icon}`]" :style="{fontSize: $tn.string.getLengthUnitValue(iconSize || 64)}"></view>
|
<view class="tn-fab__item__btn__icon" :style="{fontSize: $tn.string.getLengthUnitValue(iconSize || 64)}">
|
||||||
|
<uni-icons :type="icon" :color="color" size="30" v-if="icon!='open'"/>
|
||||||
|
<view style="font-size: 30rpx" v-else>
|
||||||
|
{{ text }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</slot>
|
</slot>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -165,6 +170,14 @@
|
||||||
type: String,
|
type: String,
|
||||||
default: 'open'
|
default: 'open'
|
||||||
},
|
},
|
||||||
|
color: {
|
||||||
|
type: String,
|
||||||
|
default: '#fff'
|
||||||
|
},
|
||||||
|
text: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
// 按钮圆角
|
// 按钮圆角
|
||||||
radius: {
|
radius: {
|
||||||
type: [String, Number],
|
type: [String, Number],
|
||||||
|
|
@ -347,7 +360,6 @@
|
||||||
}, 10)
|
}, 10)
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
console.log(btnRectInfo);
|
|
||||||
this.systemInfo = {
|
this.systemInfo = {
|
||||||
width: systemInfo.windowWidth,
|
width: systemInfo.windowWidth,
|
||||||
height: systemInfo.windowHeight
|
height: systemInfo.windowHeight
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue