|
|
@@ -0,0 +1,432 @@
|
|
|
+<template>
|
|
|
+ <view class="data">
|
|
|
+ <view class="data-screen" @click="openScreen" style="padding-right:40rpx">
|
|
|
+ <image class="screen-img" src="@/static/image/sx.png" alt="">
|
|
|
+ <text>筛选</text>
|
|
|
+ </view>
|
|
|
+ <view class="echarts">
|
|
|
+ <view v-if="monthQuery" class="query-screen">
|
|
|
+ <view>
|
|
|
+ 数据组
|
|
|
+ </view>
|
|
|
+ <div style="margin: 20px 0;">
|
|
|
+ <uni-data-select v-model="dataValue" :localdata="datasList" @change="dataValueChange"
|
|
|
+ placeholder="请选择数据组"
|
|
|
+ style="placeholder-style: font-size: 16px; color: #909399;"></uni-data-select>
|
|
|
+ </div>
|
|
|
+ <view>
|
|
|
+ 点位
|
|
|
+ </view>
|
|
|
+ <zqs-select :list="dataItem" :multiple="true" label-key="label" value-key="value"
|
|
|
+ v-model="queryParams.idList" @search="searchItem" @confirm="confirmItem" clearable
|
|
|
+ placeholder="请选择点位" title="选择点位">
|
|
|
+
|
|
|
+ </zqs-select>
|
|
|
+ <view class="month">
|
|
|
+ <view :class="monthCurrent===item.current?'month-select':'month-item'" v-for="item in monthList"
|
|
|
+ :key="item.current" @click="monthChange(item.current)">
|
|
|
+ {{item.name}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <uni-datetime-picker v-model="range" type="datetimerange" start-placeholder="起始时间"
|
|
|
+ end-placeholder="终止时间" @change="handelDate" return-type="timestamp" />
|
|
|
+ <view class="month-btn">
|
|
|
+ <u-button class="reset" style="width:200rpx" @click="reset">重置</u-button>
|
|
|
+ <u-button type="primary" style="width:200rpx" @click="handelQuery">确认</u-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="modal" v-if="monthQuery"></view>
|
|
|
+ <u-empty v-if="!service.length" class="empty" icon="../../static/data.png" text="暂无数据">
|
|
|
+ </u-empty>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- #ifdef H5 -->
|
|
|
+ <web-view v-if="service.length" :src="src" style="border: none;width:100%;height:900px;"
|
|
|
+ :fullscreen="false">
|
|
|
+ </web-view>
|
|
|
+ <!-- #endif -->
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import zqsSelectVue from '../../components/zqs-select/zqs-select.vue'
|
|
|
+ import {
|
|
|
+ getLastWeek,
|
|
|
+ getLastMonth,
|
|
|
+ getLast3Month,
|
|
|
+ getLast6Month
|
|
|
+ } from '@/utils/date.js'
|
|
|
+ var wv;
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ zqsSelectVue
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ webviewStyles: {
|
|
|
+ progress: {
|
|
|
+ color: '#FF3333'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 查询参数
|
|
|
+ queryParams: {
|
|
|
+ idList: [],
|
|
|
+ startTime: null,
|
|
|
+ endTime: null,
|
|
|
+ },
|
|
|
+ // 日期选择
|
|
|
+ range: [],
|
|
|
+ // 时间选择
|
|
|
+ monthList: [{
|
|
|
+ name: '近一周',
|
|
|
+ current: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '近1个月',
|
|
|
+ current: 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '近3个月',
|
|
|
+ current: 2
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '近6个月',
|
|
|
+ current: 3
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ monthCurrent: 0,
|
|
|
+ monthQuery: false,
|
|
|
+ // 图表数据
|
|
|
+ service: [],
|
|
|
+ serviceTime: [],
|
|
|
+ // 数据组数据
|
|
|
+ datasList: [],
|
|
|
+ dataValue: null,
|
|
|
+ // 数据项数据
|
|
|
+ dataItem: [],
|
|
|
+ dataItem_Save: [],
|
|
|
+ selItem: [],
|
|
|
+ itemReadName: null,
|
|
|
+ src: '',
|
|
|
+ windowInfo: null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ monthCurrent: {
|
|
|
+ handler(val) {
|
|
|
+ switch (val) {
|
|
|
+ case 1:
|
|
|
+ this.range = getLastMonth()
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ this.range = getLast3Month()
|
|
|
+ break;
|
|
|
+ case 3:
|
|
|
+ this.range = getLast6Month()
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ this.range = getLastWeek()
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ this.handelDate(this.range)
|
|
|
+ },
|
|
|
+ immediate: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getUserData()
|
|
|
+ this.range = getLastWeek()
|
|
|
+ // this.src =
|
|
|
+ // `/static/webview/dataItem-wv.html?idList=[19366]&startTime=2024-10-24 15:00:00&endTime=2024-10-24 23:59:59`
|
|
|
+ uni.getSystemInfo({
|
|
|
+ success: (res) => {
|
|
|
+ this.windowInfo = res;
|
|
|
+ //this.createWvAndLoadUrl(this.src);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ //关闭webview对象
|
|
|
+ if (wv) {
|
|
|
+ wv.close()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ createWvAndLoadUrl(url) {
|
|
|
+ // #ifdef APP-PLUS
|
|
|
+ wv = plus.webview.create(url, "webview", {
|
|
|
+ top: this.windowInfo.statusBarHeight + 150,
|
|
|
+ scalable: true,
|
|
|
+ height: this.windowInfo.windowHeight - this.windowInfo.statusBarHeight - 96
|
|
|
+ })
|
|
|
+ // console.log('--------------------------------------------')
|
|
|
+ // console.log(this.$parent.toJSON())
|
|
|
+ // console.log('--------------------------------------------')
|
|
|
+ var currentWebview = this.$parent.$scope.$getAppWebview();
|
|
|
+ currentWebview.append(wv);
|
|
|
+ setTimeout(function() {
|
|
|
+ console.log(wv.getStyle())
|
|
|
+ }, 1000);
|
|
|
+ // #endif
|
|
|
+ },
|
|
|
+ // 打开筛选
|
|
|
+ openScreen() {
|
|
|
+ this.monthQuery = !this.monthQuery
|
|
|
+ },
|
|
|
+ // 切换时间
|
|
|
+ monthChange(current) {
|
|
|
+ this.monthCurrent = current
|
|
|
+ },
|
|
|
+ //点位搜索
|
|
|
+ searchItem(val) {
|
|
|
+ //模糊搜索
|
|
|
+ const regex = new RegExp(val, "i");
|
|
|
+ this.dataItem = this.dataItem_Save.filter(item => regex.test(item.label));
|
|
|
+ },
|
|
|
+ //确认点位
|
|
|
+ confirmItem(val) {
|
|
|
+ //console.log(val)
|
|
|
+ //console.log(this.selItem)
|
|
|
+ },
|
|
|
+ //获取当前登录人所有数据组
|
|
|
+ getUserData() {
|
|
|
+ uni.$http.get('/itemGroup/getAllItemGroup', {
|
|
|
+ page: 1,
|
|
|
+ limit: 9999
|
|
|
+ }).then(res => {
|
|
|
+ const data = res.data
|
|
|
+ if (data.code === 200) {
|
|
|
+ console.log(data)
|
|
|
+ this.datasList = data.data.itemGroupList.map(item => {
|
|
|
+ return {
|
|
|
+ text: item.groupName,
|
|
|
+ value: item.id
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //通过id获取数据组
|
|
|
+ getDataListById(id) {
|
|
|
+ uni.$http.get('/itemGroup/getItemGroupById', {
|
|
|
+ id: id,
|
|
|
+ }).then(res => {
|
|
|
+ const data = res.data
|
|
|
+ if (data.code === 200) {
|
|
|
+ this.dataItem = data.data.itemList.map(item => {
|
|
|
+ return {
|
|
|
+ label: item.modbusConfig ? item.itemName : item.itemReadName,
|
|
|
+ value: item.id
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.dataItem_Save = this.dataItem
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //确认按钮查询
|
|
|
+ handelQuery() {
|
|
|
+ // 临时当前时间，需要改成选择时间----开始
|
|
|
+ var date = new Date()
|
|
|
+ var timestr = date.getHours() < 10 ? ('0' + date.getHours()) : date.getHours()
|
|
|
+ timestr += ':'
|
|
|
+ timestr += date.getMinutes() < 10 ? ('0' + date.getMinutes()) : date.getMinutes()
|
|
|
+ timestr += ':'
|
|
|
+ timestr += date.getSeconds() < 10 ? ('0' + date.getSeconds()) : date.getSeconds()
|
|
|
+ // 临时当前时间，需要改成选择时间----结束
|
|
|
+ //console.log(this.queryParams.idList)
|
|
|
+ if (this.queryParams.idList.length == 0) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '请选择点位',
|
|
|
+ duration: 2000,
|
|
|
+ icon: "error"
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ } else if (this.queryParams.idList.length > 6) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '只能选择6个点位',
|
|
|
+ duration: 2000,
|
|
|
+ icon: "error"
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ uni.$http.get('/itemGroup/getItemListValue', this.queryParams).then(res => {
|
|
|
+ const data = res.data
|
|
|
+ if (data.code === 200) {
|
|
|
+ const {
|
|
|
+ idList,
|
|
|
+ startTime,
|
|
|
+ endTime
|
|
|
+ } = this.queryParams
|
|
|
+ //console.log(JSON.stringify(idList))
|
|
|
+ let id_List = idList.map(temp=>temp).join(',');
|
|
|
+ this.src =
|
|
|
+ `/static/webview/dataItem-wv.html?idList=${id_List}&startTime=${startTime}&endTime=${endTime}`
|
|
|
+ this.createWvAndLoadUrl(this.src);
|
|
|
+ if (data.data) {
|
|
|
+ const {
|
|
|
+ valueList,
|
|
|
+ valueTimeList
|
|
|
+ } = data.data
|
|
|
+ const service = [{
|
|
|
+ // name: this.itemName,
|
|
|
+ name: this.itemReadName,
|
|
|
+ data: valueList
|
|
|
+ }]
|
|
|
+ this.service = service
|
|
|
+ this.serviceTime = valueTimeList
|
|
|
+ } else {
|
|
|
+ this.service = []
|
|
|
+ this.serviceTime = []
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: data.msg,
|
|
|
+ duration: 2000,
|
|
|
+ icon: "error"
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.monthQuery = false
|
|
|
+ },
|
|
|
+ //选择日期
|
|
|
+ handelDate(date) {
|
|
|
+ this.queryParams.startTime = this.resolvingDate(date[0])
|
|
|
+ this.queryParams.endTime = this.resolvingDate(date[1])
|
|
|
+ },
|
|
|
+ resolvingDate(date) {
|
|
|
+ if (!date) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ //date是传入的时间
|
|
|
+ let d = new Date(date);
|
|
|
+
|
|
|
+ let month = (d.getMonth() + 1) < 10 ? '0' + (d.getMonth() + 1) : (d.getMonth() + 1);
|
|
|
+ let day = d.getDate() < 10 ? '0' + d.getDate() : d.getDate();
|
|
|
+ let hours = d.getHours() < 10 ? '0' + d.getHours() : d.getHours();
|
|
|
+ let min = d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes();
|
|
|
+ let sec = d.getSeconds() < 10 ? '0' + d.getSeconds() : d.getSeconds();
|
|
|
+
|
|
|
+ let times;
|
|
|
+ times = d.getFullYear() + '-' + month + '-' + day + ' ' + hours + ':' + min + ':' + sec;
|
|
|
+ return times
|
|
|
+ },
|
|
|
+ //重置按钮
|
|
|
+ reset() {
|
|
|
+ this.queryParams = {
|
|
|
+ idList: null,
|
|
|
+ startTime: null,
|
|
|
+ endTime: null,
|
|
|
+ }
|
|
|
+ this.dataValue = null
|
|
|
+ this.monthCurrent = 0
|
|
|
+ this.monthQuery = false
|
|
|
+ },
|
|
|
+ //选择数据组
|
|
|
+ dataValueChange(val) {
|
|
|
+ this.getDataListById(val)
|
|
|
+ },
|
|
|
+ itemChange(val) {
|
|
|
+ const item = this.dataItem.find(item => {
|
|
|
+ return item.value === val
|
|
|
+ })
|
|
|
+ this.itemReadName = item.text
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+
|
|
|
+ iframe {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ .webviewstyle {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ top: 400px;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .webview_style>uni-web-view>iframe {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .data {
|
|
|
+ margin-top: 40rpx;
|
|
|
+ height: 50vh;
|
|
|
+
|
|
|
+ .data-screen {
|
|
|
+ text-align: right;
|
|
|
+
|
|
|
+ .screen-img {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .uni-select__input-placeholder {
|
|
|
+ font-size: 14px;
|
|
|
+ color: red;
|
|
|
+ }
|
|
|
+
|
|
|
+ .echarts {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .query-screen {
|
|
|
+ width: 96vw;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ z-index: 999;
|
|
|
+
|
|
|
+ .month {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 28rpx;
|
|
|
+ margin: 40rpx 0;
|
|
|
+
|
|
|
+ .month-item {
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
+ background: #ECECEC;
|
|
|
+ color: #000000;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .month-select {
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ background: #289BFF;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .month-btn {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ margin-top: 40rpx;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+
|
|
|
+ .reset {
|
|
|
+ background: #EAF4FF;
|
|
|
+ color: #469DED;
|
|
|
+ border: 1px solid #A3B8CB;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .modal {
|
|
|
+ width: 100%;
|
|
|
+ height: 76vh;
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+</style>
|
lry
