茶室
This commit is contained in:
parent
8ac054164f
commit
0745660395
98328
components/uni-ec-canvas/echarts.js
Normal file
98328
components/uni-ec-canvas/echarts.js
Normal file
File diff suppressed because it is too large
Load Diff
315
components/uni-ec-canvas/uni-ec-canvas.vue
Normal file
315
components/uni-ec-canvas/uni-ec-canvas.vue
Normal file
|
|
@ -0,0 +1,315 @@
|
|||
<template>
|
||||
<canvas type="2d" v-if="isUseNewCanvas" class="ec-canvas" :canvas-id="canvasId" @init="init" @touchstart="touchStart"
|
||||
@touchmove="touchMove" @touchend="touchEnd">
|
||||
</canvas>
|
||||
<canvas v-else class="ec-canvas" :canvas-id="canvasId" @init="init" @touchstart="touchStart" @touchmove="touchMove"
|
||||
@touchend="touchEnd">
|
||||
</canvas>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import WxCanvas from "./wx-canvas";
|
||||
import * as echarts from "./echarts";
|
||||
|
||||
let ctx;
|
||||
|
||||
function wrapTouch(event) {
|
||||
for (let i = 0; i < event.touches.length; ++i) {
|
||||
const touch = event.touches[i];
|
||||
touch.offsetX = touch.x;
|
||||
touch.offsetY = touch.y;
|
||||
}
|
||||
return event;
|
||||
}
|
||||
|
||||
export default {
|
||||
props: {
|
||||
canvasId: {
|
||||
type: String,
|
||||
default: () => {
|
||||
return "ec-canvas";
|
||||
}
|
||||
},
|
||||
ec: {
|
||||
type: Object
|
||||
},
|
||||
forceUseOldCanvas: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
$curChart: {},
|
||||
toHandleList: [],
|
||||
isUseNewCanvas: true
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
"ec.option": {
|
||||
deep: true,
|
||||
handler(val, oldVal) {
|
||||
this.setOption(val);
|
||||
}
|
||||
}
|
||||
},
|
||||
onReady: function() {
|
||||
if (!this.ec) {
|
||||
console.warn(
|
||||
'组件需绑定 ec 变量，例：<ec-canvas id="mychart-dom-bar" ' +
|
||||
'canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>'
|
||||
);
|
||||
return;
|
||||
}
|
||||
if (!this.ec.lazyLoad) {
|
||||
this.init();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
compareVersion(v1, v2) {
|
||||
v1 = v1.split(".");
|
||||
v2 = v2.split(".");
|
||||
const len = Math.max(v1.length, v2.length);
|
||||
|
||||
while (v1.length < len) {
|
||||
v1.push("0");
|
||||
}
|
||||
while (v2.length < len) {
|
||||
v2.push("0");
|
||||
}
|
||||
|
||||
for (let i = 0; i < len; i++) {
|
||||
const num1 = parseInt(v1[i]);
|
||||
const num2 = parseInt(v2[i]);
|
||||
|
||||
if (num1 > num2) {
|
||||
return 1;
|
||||
} else if (num1 < num2) {
|
||||
return -1;
|
||||
}
|
||||
}
|
||||
return 0;
|
||||
},
|
||||
init(callback) {
|
||||
const version = wx.getSystemInfoSync().SDKVersion;
|
||||
|
||||
let canUseNewCanvas = this.compareVersion(version, "2.9.0") >= 0;
|
||||
if (this.forceUseOldCanvas) {
|
||||
if (canUseNewCanvas) console.warn("开发者强制使用旧canvas,建议关闭");
|
||||
canUseNewCanvas = false;
|
||||
}
|
||||
this.isUseNewCanvas = canUseNewCanvas && !this.forceUseOldCanvas;
|
||||
if (this.isUseNewCanvas) {
|
||||
console.log('微信基础库版本大于2.9.0，开始使用<canvas type="2d"/>');
|
||||
// 2.9.0 可以使用 <canvas type="2d"></canvas>
|
||||
this.initByNewWay(callback);
|
||||
} else {
|
||||
const isValid = this.compareVersion(version, "1.9.91") >= 0;
|
||||
if (!isValid) {
|
||||
console.error(
|
||||
"微信基础库版本过低，需大于等于 1.9.91。" +
|
||||
"参见：https://github.com/ecomfe/echarts-for-weixin" +
|
||||
"#%E5%BE%AE%E4%BF%A1%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82"
|
||||
);
|
||||
return;
|
||||
} else {
|
||||
console.warn(
|
||||
"建议将微信基础库调整大于等于2.9.0版本。升级后绘图将有更好性能"
|
||||
);
|
||||
this.initByOldWay(callback);
|
||||
}
|
||||
}
|
||||
},
|
||||
initByOldWay(callback) {
|
||||
// 1.9.91 <= version < 2.9.0：原来的方式初始化
|
||||
ctx = wx.createCanvasContext(this.canvasId, this);
|
||||
const canvas = new WxCanvas(ctx, this.canvasId, false);
|
||||
const that = this
|
||||
echarts.setCanvasCreator(() => {
|
||||
return canvas;
|
||||
});
|
||||
// const canvasDpr = wx.getSystemInfoSync().pixelRatio // 微信旧的canvas不能传入dpr
|
||||
const canvasDpr = 1;
|
||||
var query = wx.createSelectorQuery().in(this);
|
||||
query
|
||||
.select(".ec-canvas")
|
||||
.boundingClientRect(res => {
|
||||
if (typeof callback === "function") {
|
||||
that.$curChart = callback(canvas, res.width, res.height, canvasDpr);
|
||||
} else if (that.ec) {
|
||||
that.initChart(canvas, res.width, res.height, canvasDpr)
|
||||
} else {
|
||||
that.triggerEvent("init", {
|
||||
canvas: canvas,
|
||||
width: res.width,
|
||||
height: res.height,
|
||||
devicePixelRatio: canvasDpr // 增加了dpr，可方便外面echarts.init
|
||||
});
|
||||
}
|
||||
})
|
||||
.exec();
|
||||
},
|
||||
initByNewWay(callback) {
|
||||
const that = this
|
||||
// version >= 2.9.0：使用新的方式初始化
|
||||
const query = wx.createSelectorQuery().in(this);
|
||||
query
|
||||
.select(".ec-canvas")
|
||||
.fields({
|
||||
node: true,
|
||||
size: true
|
||||
})
|
||||
.exec(res => {
|
||||
const canvasNode = res[0].node;
|
||||
|
||||
const canvasDpr = wx.getSystemInfoSync().pixelRatio;
|
||||
const canvasWidth = res[0].width;
|
||||
const canvasHeight = res[0].height;
|
||||
|
||||
const ctx = canvasNode.getContext("2d");
|
||||
|
||||
const canvas = new WxCanvas(ctx, that.canvasId, true, canvasNode);
|
||||
echarts.setCanvasCreator(() => {
|
||||
return canvas;
|
||||
});
|
||||
|
||||
if (typeof callback === "function") {
|
||||
that.$curChart = callback(
|
||||
canvas,
|
||||
canvasWidth,
|
||||
canvasHeight,
|
||||
canvasDpr
|
||||
);
|
||||
} else if (that.ec) {
|
||||
that.initChart(canvas, canvasWidth, canvasHeight, canvasDpr)
|
||||
} else {
|
||||
that.triggerEvent("init", {
|
||||
canvas: canvas,
|
||||
width: canvasWidth,
|
||||
height: canvasHeight,
|
||||
devicePixelRatio: canvasDpr
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
setOption(val) {
|
||||
if (!this.$curChart || !this.$curChart.setOption) {
|
||||
this.toHandleList.push(val);
|
||||
} else {
|
||||
this.$curChart.setOption(val);
|
||||
}
|
||||
},
|
||||
canvasToTempFilePath(opt) {
|
||||
if (this.isUseNewCanvas) {
|
||||
// 新版
|
||||
const query = wx.createSelectorQuery().in(this);
|
||||
query
|
||||
.select(".ec-canvas")
|
||||
.fields({
|
||||
node: true,
|
||||
size: true
|
||||
})
|
||||
.exec(res => {
|
||||
const canvasNode = res[0].node;
|
||||
opt.canvas = canvasNode;
|
||||
wx.canvasToTempFilePath(opt);
|
||||
});
|
||||
} else {
|
||||
// 旧的
|
||||
if (!opt.canvasId) {
|
||||
opt.canvasId = this.canvasId;
|
||||
}
|
||||
ctx.draw(true, () => {
|
||||
wx.canvasToTempFilePath(opt, this);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
touchStart(e) {
|
||||
if (this.ec.stopTouchEvent) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
return;
|
||||
}
|
||||
this.$emit("touchstart", e);
|
||||
if (this.$curChart && e.touches.length > 0) {
|
||||
var touch = e.touches[0];
|
||||
var handler = this.$curChart.getZr().handler;
|
||||
if (handler) {
|
||||
handler.dispatch("mousedown", {
|
||||
zrX: touch.x,
|
||||
zrY: touch.y
|
||||
});
|
||||
handler.dispatch("mousemove", {
|
||||
zrX: touch.x,
|
||||
zrY: touch.y
|
||||
});
|
||||
handler.processGesture(wrapTouch(e), "start");
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
touchMove(e) {
|
||||
if (this.ec.stopTouchEvent) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
return;
|
||||
}
|
||||
this.$emit("touchmove", e);
|
||||
if (this.$curChart && e.touches.length > 0) {
|
||||
var touch = e.touches[0];
|
||||
var handler = this.$curChart.getZr().handler;
|
||||
if (handler) {
|
||||
handler.dispatch("mousemove", {
|
||||
zrX: touch.x,
|
||||
zrY: touch.y
|
||||
});
|
||||
handler.processGesture(wrapTouch(e), "change");
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
touchEnd(e) {
|
||||
if (this.ec.stopTouchEvent) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
return;
|
||||
}
|
||||
this.$emit("touchend", e);
|
||||
if (this.$curChart) {
|
||||
const touch = e.changedTouches ? e.changedTouches[0] : {};
|
||||
var handler = this.$curChart.getZr().handler;
|
||||
if (handler) {
|
||||
handler.dispatch("mouseup", {
|
||||
zrX: touch.x,
|
||||
zrY: touch.y
|
||||
});
|
||||
handler.dispatch("click", {
|
||||
zrX: touch.x,
|
||||
zrY: touch.y
|
||||
});
|
||||
handler.processGesture(wrapTouch(e), "end");
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
initChart(canvas, width, height, canvasDpr) {
|
||||
this.$curChart = echarts.init(canvas, null, {
|
||||
width: width,
|
||||
height: height,
|
||||
devicePixelRatio: canvasDpr
|
||||
});
|
||||
canvas.setChart(this.$curChart);
|
||||
this.$curChart.setOption(this.ec.option);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.ec-canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
121
components/uni-ec-canvas/wx-canvas.js
Normal file
121
components/uni-ec-canvas/wx-canvas.js
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
export default class WxCanvas {
|
||||
constructor(ctx, canvasId, isNew, canvasNode) {
|
||||
this.ctx = ctx;
|
||||
this.canvasId = canvasId;
|
||||
this.chart = null;
|
||||
this.isNew = isNew
|
||||
if (isNew) {
|
||||
this.canvasNode = canvasNode;
|
||||
} else {
|
||||
this._initStyle(ctx);
|
||||
}
|
||||
|
||||
// this._initCanvas(zrender, ctx);
|
||||
|
||||
this._initEvent();
|
||||
}
|
||||
|
||||
getContext(contextType) {
|
||||
if (contextType === '2d') {
|
||||
return this.ctx;
|
||||
}
|
||||
}
|
||||
|
||||
// canvasToTempFilePath(opt) {
|
||||
// if (!opt.canvasId) {
|
||||
// opt.canvasId = this.canvasId;
|
||||
// }
|
||||
// return wx.canvasToTempFilePath(opt, this);
|
||||
// }
|
||||
|
||||
setChart(chart) {
|
||||
this.chart = chart;
|
||||
}
|
||||
|
||||
attachEvent() {
|
||||
// noop
|
||||
}
|
||||
|
||||
detachEvent() {
|
||||
// noop
|
||||
}
|
||||
|
||||
_initCanvas(zrender, ctx) {
|
||||
zrender.util.getContext = function () {
|
||||
return ctx;
|
||||
};
|
||||
|
||||
zrender.util.$override('measureText', function (text, font) {
|
||||
ctx.font = font || '12px sans-serif';
|
||||
return ctx.measureText(text);
|
||||
});
|
||||
}
|
||||
|
||||
_initStyle(ctx) {
|
||||
var styles = ['fillStyle', 'strokeStyle', 'globalAlpha',
|
||||
'textAlign', 'textBaseAlign', 'shadow', 'lineWidth',
|
||||
'lineCap', 'lineJoin', 'lineDash', 'miterLimit', 'fontSize'
|
||||
];
|
||||
|
||||
styles.forEach(style => {
|
||||
Object.defineProperty(ctx, style, {
|
||||
set: value => {
|
||||
if (style !== 'fillStyle' && style !== 'strokeStyle' ||
|
||||
value !== 'none' && value !== null
|
||||
) {
|
||||
ctx['set' + style.charAt(0).toUpperCase() + style.slice(1)](value);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
ctx.createRadialGradient = () => {
|
||||
return ctx.createCircularGradient(arguments);
|
||||
};
|
||||
}
|
||||
|
||||
_initEvent() {
|
||||
this.event = {};
|
||||
const eventNames = [{
|
||||
wxName: 'touchStart',
|
||||
ecName: 'mousedown'
|
||||
}, {
|
||||
wxName: 'touchMove',
|
||||
ecName: 'mousemove'
|
||||
}, {
|
||||
wxName: 'touchEnd',
|
||||
ecName: 'mouseup'
|
||||
}, {
|
||||
wxName: 'touchEnd',
|
||||
ecName: 'click'
|
||||
}];
|
||||
|
||||
eventNames.forEach(name => {
|
||||
this.event[name.wxName] = e => {
|
||||
const touch = e.touches[0];
|
||||
this.chart.getZr().handler.dispatch(name.ecName, {
|
||||
zrX: name.wxName === 'tap' ? touch.clientX : touch.x,
|
||||
zrY: name.wxName === 'tap' ? touch.clientY : touch.y
|
||||
});
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
set width(w) {
|
||||
if (this.canvasNode) this.canvasNode.width = w
|
||||
}
|
||||
set height(h) {
|
||||
if (this.canvasNode) this.canvasNode.height = h
|
||||
}
|
||||
|
||||
get width() {
|
||||
if (this.canvasNode)
|
||||
return this.canvasNode.width
|
||||
return 0
|
||||
}
|
||||
get height() {
|
||||
if (this.canvasNode)
|
||||
return this.canvasNode.height
|
||||
return 0
|
||||
}
|
||||
}
|
||||
|
|
@ -168,7 +168,7 @@
|
|||
|
||||
// 点击门店是否绑定
|
||||
btnmendian(){
|
||||
if(this.gateSnobj.device.sn == null){
|
||||
if(this.gateSnobj.device == null){
|
||||
let that = this
|
||||
uni.showModal({
|
||||
title: '温馨提示',
|
||||
|
|
|
|||
|
|
@ -862,6 +862,9 @@
|
|||
this.$u.get(`app/store/mch/${this.storeId}`).then(res => {
|
||||
if (res.code == 200) {
|
||||
this.roomobj = res.data
|
||||
// this.roomList = res.data.roomList
|
||||
// this.datingobj = res.data.hallEquList
|
||||
// this.cesuolist = res.da
|
||||
res.data.roomList.forEach(item => {
|
||||
if (item.type2 == 1) {
|
||||
this.roomList.push(item)
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<view class="page">
|
||||
<view class="page" >
|
||||
<u-navbar :is-back="false" title="运营" :border-bottom="false" back-icon-color="000" :background="bgc"
|
||||
title-color='#000' title-size='36' height='40' id="navbar">
|
||||
</u-navbar>
|
||||
|
|
@ -73,7 +73,10 @@
|
|||
</view>
|
||||
</view>
|
||||
<view class="zhixian">
|
||||
<l-echart class="line-chart" ref="lineChart2"></l-echart>
|
||||
<!-- <l-echart class="line-chart" ref="lineChart2"></l-echart> -->
|
||||
<view class="echarts" style="padding: 20rpx;">
|
||||
<uni-ec-canvas class="uni-ec-canvas" id="uni-ec-canvas" ref="canvas" canvas-id="uni-ec-canvas" :ec="ec"></uni-ec-canvas>
|
||||
</view>
|
||||
<view class="shuom">
|
||||
<view class="">
|
||||
<image src="https://api.ccttiot.com/smartmeter/img/static/uk2PaAnt4mMTrYhbM7PY" mode="">
|
||||
|
|
@ -111,151 +114,266 @@
|
|||
<view class="bd">
|
||||
<view class="one">
|
||||
<view class="">
|
||||
房间
|
||||
设备总数
|
||||
</view>
|
||||
<view class="cu">
|
||||
<text>2</text>/10
|
||||
<text>1/</text> 10
|
||||
</view>
|
||||
</view>
|
||||
<view class="one">
|
||||
<view class="">
|
||||
大厅设施
|
||||
空闲
|
||||
</view>
|
||||
<view class="cu">
|
||||
<text>3</text>/10
|
||||
<text>1/</text>6
|
||||
</view>
|
||||
</view>
|
||||
<view class="one" style="border: none;">
|
||||
<view class="">
|
||||
设备总数
|
||||
租赁中
|
||||
</view>
|
||||
<view class="cu">
|
||||
<text>5</text>/20
|
||||
<text>1/</text>4
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <tab-bar :indexs='1' style=""></tab-bar> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import * as echarts from '@/uni_modules/lime-echart/static/echarts.min.js';
|
||||
// import * as echarts from '@/components/lime-echart/static/echarts.min.js';
|
||||
import * as echarts from '@/components/uni-ec-canvas/echarts.js'
|
||||
let chart = null
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ec: {
|
||||
lazyLoad: true
|
||||
},
|
||||
|
||||
bgc: {
|
||||
backgroundColor: "",
|
||||
},
|
||||
tabindex: 1,
|
||||
smflag:false
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// 分享到好友（会话）
|
||||
onShareAppMessage: function () {
|
||||
return {
|
||||
title: '创想物联',
|
||||
path: '/pages/shouye/index'
|
||||
}
|
||||
},
|
||||
|
||||
// 分享到朋友圈
|
||||
onShareTimeline: function () {
|
||||
return {
|
||||
title: '创想物联',
|
||||
query: '',
|
||||
path: '/pages/shouye/index'
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
//加载折线图数据
|
||||
// this.loadLineData2()
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.timelist = []
|
||||
setTimeout(() => {
|
||||
console.log(this.$refs)
|
||||
this.$refs.canvas.init(this.initChart)
|
||||
}, 500)
|
||||
this.recharge = 0
|
||||
const now = new Date();
|
||||
this.yeartime = {
|
||||
year: now.getFullYear(),
|
||||
month: now.getMonth() + 1, // 月份从0开始，所以需要+1
|
||||
day: 1 // 设置为月份的第一天
|
||||
}
|
||||
this.kstime = this.yeartime.year + '-' + (this.yeartime.month < 10 ? '0' + this.yeartime.month : this.yeartime.month) + '-' + (this.yeartime.day < 10 ? '0' + this.yeartime.day : this.yeartime.day)
|
||||
this.yeartimes.year = now.getFullYear()
|
||||
this.yeartimes.month = now.getMonth() + 1
|
||||
this.yeartimes.day = now.getDate()
|
||||
this.jstime = this.yeartimes.year + '-' + (this.yeartimes.month < 10 ? '0' + this.yeartimes.month : this.yeartimes.month) + '-' + (this.yeartimes.day < 10 ? '0' + this.yeartimes.day : this.yeartimes.day)
|
||||
this.gettime()
|
||||
},
|
||||
methods: {
|
||||
// 点击切换周还是月
|
||||
btntab(num) {
|
||||
this.tabindex = num
|
||||
},
|
||||
//加载折线图数据
|
||||
loadLineData2() {
|
||||
//这里请求服务器拿到数据
|
||||
let res = {
|
||||
//x轴数据
|
||||
xData: ['6/11', '6/12', '6/13', '6/14', '6/15', '6/16', '6/17'],
|
||||
//y轴数据
|
||||
yData: [50, 120, 150, 220, 180, 300, 130], //订单数
|
||||
yData1: [2000, 1820, 2350, 1200, 800, 3000, 2190], //营收
|
||||
|
||||
// 点击导航栏回到首页
|
||||
btnshouye() {
|
||||
uni.reLaunch({
|
||||
url: '/pages/shouye/index'
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
gettimes() {
|
||||
let data = {
|
||||
deviceId: this.deviceId,
|
||||
year: this.yeartime.year,
|
||||
month: this.yeartime.month,
|
||||
groupBy: 'create_date'
|
||||
}
|
||||
let option = {
|
||||
this.loging = false
|
||||
this.$u.get('/app/device/electric/count', data).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.timelist = res.data
|
||||
this.chartData = this.timelist.map(item => item.usedElectriQuantity);
|
||||
this.chartday = [1,2,3,4,5,6,7,8];
|
||||
this.loging = true
|
||||
}
|
||||
})
|
||||
},
|
||||
generateWaveData(length) {
|
||||
const data = []
|
||||
for (let i = 0; i < length; i++) {
|
||||
const y = Math.sin((i / (length - 1)) * Math.PI * 2) // 正弦函数生成波浪形状的y值
|
||||
data.push((y + 1) * 50) // 映射到0-100的范围
|
||||
}
|
||||
return data
|
||||
},
|
||||
initChart(canvas, width, height, canvasDpr) {
|
||||
let that = this
|
||||
console.log(canvas, width, height, canvasDpr)
|
||||
const option = {
|
||||
grid: {
|
||||
left: 35,
|
||||
right: 0,
|
||||
top: 10,
|
||||
bottom: 20,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
// x轴数据文字颜色
|
||||
axisLabel: {
|
||||
color: '#a7a7a7'
|
||||
},
|
||||
// x轴那天坐标轴线的颜色
|
||||
boundaryGap: false,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#f1f1f1',
|
||||
}
|
||||
show: false,
|
||||
},
|
||||
//x轴上面刻度线隐藏
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
//这里是x轴数据
|
||||
data: res.xData
|
||||
},
|
||||
//设置网格
|
||||
grid: {
|
||||
top: 40,
|
||||
bottom: 30,
|
||||
},
|
||||
//y轴设置
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
//y轴标签文字颜色
|
||||
axisLabel: {
|
||||
color: '#a7a7a7'
|
||||
},
|
||||
// y轴分割线设置为虚线
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
color: '#808080',
|
||||
fontSize: 11,
|
||||
rotate: 0,
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
data: that.chartday,
|
||||
},
|
||||
yAxis: {
|
||||
show: true,
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: '#808080',
|
||||
fontSize: 11,
|
||||
formatter: function(value) {
|
||||
// 保留两位小数，没有小数时显示00
|
||||
return value
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
//设置提示为点击时
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
triggerOn: 'click',
|
||||
formatter: '{b}: \n {a0}: {c0} \n {a1}: {c1}'
|
||||
},
|
||||
//设置曲线的颜色
|
||||
color: ['#A9D2FF', '#B1A5FF'],
|
||||
series: [{
|
||||
name: "订单营收",
|
||||
//这里是数据
|
||||
data: res.yData1,
|
||||
type: 'line',
|
||||
//设置为平滑，默认为折线
|
||||
smooth: false,
|
||||
smooth: 0.6,
|
||||
symbol: 'none',
|
||||
lineStyle: {
|
||||
color: '#E0DBFF',
|
||||
width: 4,
|
||||
},
|
||||
{
|
||||
name: "订单数",
|
||||
//这里是数据
|
||||
data: res.yData,
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: '#ECE8FF'
|
||||
}, ]),
|
||||
},
|
||||
},
|
||||
data: that.chartData,
|
||||
},{
|
||||
type: 'line',
|
||||
//设置为平滑，默认为折线
|
||||
smooth: false,
|
||||
smooth: 0.6,
|
||||
symbol: 'none',
|
||||
lineStyle: {
|
||||
color: '#A9D2FF',
|
||||
width: 4,
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: '#C3E0FF'
|
||||
}, ]),
|
||||
},
|
||||
},
|
||||
data: that.chartData,
|
||||
}],
|
||||
}
|
||||
]
|
||||
}
|
||||
this.$refs.lineChart2.init(echarts, chart => {
|
||||
chart.setOption(option);
|
||||
chart = echarts.init(canvas, null, {
|
||||
width: width,
|
||||
height: height,
|
||||
devicePixelRatio: canvasDpr
|
||||
})
|
||||
}
|
||||
|
||||
option.series[0].data = [2000,400,1000,800,5000,2000,6000,8000]
|
||||
option.series[1].data = [104,205,350,510,250,630,720,801]
|
||||
canvas.setChart(chart)
|
||||
chart.setOption(option)
|
||||
return chart
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.page {
|
||||
// background: #fff;
|
||||
/deep/ .u-title{
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
/deep/ .u-icon__icon{
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
.imgbj{
|
||||
width: 750rpx;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
.uni-ec-canvas {
|
||||
width: 100%;
|
||||
height: 320rpx;
|
||||
display: block;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
.btnxz {
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans, Source Han Sans;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
page {
|
||||
background-color: #F7FAFE;
|
||||
}
|
||||
.actives {
|
||||
background: #fff !important;
|
||||
box-shadow: 0rpx 0rpx 4rpx 0rpx rgba(0, 0, 0, 0.15) !important;
|
||||
|
|
@ -263,7 +381,7 @@
|
|||
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 80vh;
|
||||
height: 77vh;
|
||||
overflow: scroll;
|
||||
}
|
||||
.shebei{
|
||||
|
|
@ -317,7 +435,7 @@
|
|||
color: #3D3D3D;
|
||||
margin-top: 8rpx;
|
||||
text{
|
||||
color: #48893B;
|
||||
color: #48893B !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -457,17 +575,19 @@
|
|||
margin-top: 20rpx;
|
||||
box-sizing: border-box;
|
||||
justify-content: space-between;
|
||||
|
||||
padding:0 50rpx;
|
||||
.one {
|
||||
.top {
|
||||
font-weight: 600;
|
||||
font-size: 36rpx;
|
||||
color: #48893B;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.bot {
|
||||
font-size: 28rpx;
|
||||
color: #7C7C7C;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -479,12 +599,128 @@
|
|||
}
|
||||
}
|
||||
|
||||
.imgbj {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
.page {
|
||||
// padding: 0 59rpx;
|
||||
.titles {
|
||||
padding-left: 32rpx;
|
||||
font-size: 40rpx;
|
||||
color: #fff;
|
||||
margin-bottom: 30rpx;
|
||||
padding-top: 104rpx;
|
||||
height: 200rpx;
|
||||
background-color: #48893B;
|
||||
text {
|
||||
padding-left: 33%;
|
||||
}
|
||||
}
|
||||
.name{
|
||||
font-size: 36rpx;
|
||||
color: #3D3D3D;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.gongneng{
|
||||
margin-top: 40rpx;
|
||||
width: 632rpx;
|
||||
height: 150rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42,130,228,0.1);
|
||||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 26rpx 50rpx;
|
||||
box-sizing: border-box;
|
||||
image{
|
||||
width: 96rpx;
|
||||
height: 102rpx;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
margin-top: 120rpx;
|
||||
font-size: 48rpx;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0rpx;
|
||||
|
||||
color: rgba(38, 43, 55, 1);
|
||||
}
|
||||
|
||||
.card {
|
||||
padding-top: 32rpx;
|
||||
margin-top: 10rpx;
|
||||
width: 632rpx;
|
||||
height: 540rpx;
|
||||
background: #48893B;
|
||||
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
|
||||
opacity: 1;
|
||||
border-radius: 40rpx;
|
||||
|
||||
.month {
|
||||
|
||||
margin-left: 22rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans, Source Han Sans;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.tit {
|
||||
margin-top: 18rpx;
|
||||
margin-left: 22rpx;
|
||||
font-size: 20rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
|
||||
}
|
||||
|
||||
.txt {
|
||||
margin-top: 2rpx;
|
||||
margin-left: 22rpx;
|
||||
font-size: 36rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 700;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.echarts {
|
||||
margin-left: 22rpx;
|
||||
margin-top: 60rpx;
|
||||
width: 588rpx;
|
||||
height: 320rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
margin-top: 16rpx;
|
||||
height: 630rpx;
|
||||
overflow: auto;
|
||||
.card_list {
|
||||
width: 632rpx;
|
||||
height: 88rpx;
|
||||
background: #FFFFFF;
|
||||
opacity: 1;
|
||||
border-radius: 30rpx;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
margin-top: 16rpx;
|
||||
align-items: center;
|
||||
|
||||
.left {
|
||||
margin-left: 52rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-right: 20rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
|
||||
font-weight: 400;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -659,7 +659,7 @@
|
|||
if (!isBooked) {
|
||||
let timeshijian = this.timeshijian
|
||||
let targetDate = new Date(timeshijian.replace(/-/g, '/'))
|
||||
let currentDate = new Date();
|
||||
let currentDate = new Date()
|
||||
console.log(targetDate,currentDate,'020202');
|
||||
if (targetDate < currentDate) {
|
||||
uni.showToast({
|
||||
|
|
@ -753,18 +753,18 @@
|
|||
this.jstime = this.addOneHourToTimess(this.kstime)
|
||||
this.price = this.tclist[0].deposit //订单金额
|
||||
this.hourstime = Math.ceil(this.tclist[0].deposit / this.tclist[0].price) //订单时间
|
||||
console.log(Math.ceil(this.tclist[0].deposit / this.tclist[0].price),'0000');
|
||||
console.log(Math.ceil(this.tclist[0].deposit / this.tclist[0].price),'0000')
|
||||
}
|
||||
},
|
||||
// 判断是否需要格式化
|
||||
isValidDateFormatOnly(inputString) {
|
||||
const parts = inputString.split(/[\s/]/);
|
||||
const parts = inputString.split(/[\s/]/)
|
||||
return parts.length === 5 &&
|
||||
!isNaN(parts[0]) && parts[0].length === 4 && // 年份
|
||||
!isNaN(parts[1]) && parts[1].length === 2 && // 月份
|
||||
!isNaN(parts[2]) && parts[2].length === 2 && // 日期
|
||||
!isNaN(parts[3]) && parts[3].length === 2 && // 小时
|
||||
!isNaN(parts[4]) && parts[4].length === 2; // 分钟
|
||||
!isNaN(parts[4]) && parts[4].length === 2 // 分钟
|
||||
},
|
||||
// 计算结束时间
|
||||
addOneHourToTime(timeString, date = new Date()) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user