Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
db097bc64a | ||
|
|
9f593bd428 | ||
|
|
966d6d342c | ||
|
|
66cee2922d | ||
|
|
00e34c168f | ||
|
|
b71200cb97 |
17
App.vue
@@ -22,9 +22,17 @@ export default {
|
|||||||
uni.onPushMessage((res) => {
|
uni.onPushMessage((res) => {
|
||||||
console.log('收到推送消息:', res.data.payload.path) //监听推送消息
|
console.log('收到推送消息:', res.data.payload.path) //监听推送消息
|
||||||
if (res.data.payload && res.data.payload.path) {
|
if (res.data.payload && res.data.payload.path) {
|
||||||
uni.navigateTo({
|
uni.setStorageSync('messageParams', {
|
||||||
|
name: '',
|
||||||
|
id: '',
|
||||||
|
type: res.data.payload.path.split('type=')[1],
|
||||||
|
})
|
||||||
|
uni.switchTab({
|
||||||
url: res.data.payload.path,
|
url: res.data.payload.path,
|
||||||
})
|
})
|
||||||
|
// uni.navigateTo({
|
||||||
|
// url: res.data.payload.path,
|
||||||
|
// })
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
@@ -37,6 +45,7 @@ export default {
|
|||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
/*每个页面公共css */
|
/*每个页面公共css */
|
||||||
@import './common/css/base.scss';
|
@import './common/css/base.scss';
|
||||||
|
@import '@/static/iconfont/iconfont.css';
|
||||||
|
|
||||||
/deep/ uni-tabbar .uni-tabbar__badge {
|
/deep/ uni-tabbar .uni-tabbar__badge {
|
||||||
width: auto;
|
width: auto;
|
||||||
@@ -47,4 +56,10 @@ export default {
|
|||||||
font-size: 20rpx;
|
font-size: 20rpx;
|
||||||
padding: 0 8rpx;
|
padding: 0 8rpx;
|
||||||
}
|
}
|
||||||
|
// .uni-page-refresh__path {
|
||||||
|
// stroke: #007aff !important; /* 改成你想要的颜色,比如红色 #ff0000 */
|
||||||
|
// }
|
||||||
|
// .uni-page-refresh__icon {
|
||||||
|
// fill: #007aff !important; /* 改成你想要的颜色,比如红色 #ff0000 */
|
||||||
|
// }
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import request from '../js/request'
|
import request from '../js/request'
|
||||||
import config from '../js/config'
|
|
||||||
|
|
||||||
// 获取设备
|
// 获取设备
|
||||||
export function getDeviceList(params) {
|
export function getDeviceList(params) {
|
||||||
@@ -15,12 +14,15 @@ export function getDeviceList(params) {
|
|||||||
* @param {*} id 工程id
|
* @param {*} id 工程id
|
||||||
* @returns
|
* @returns
|
||||||
*/
|
*/
|
||||||
|
const date = new Date()
|
||||||
|
const year = date.getFullYear() // 年份 4 位
|
||||||
|
const month = (date.getMonth() + 1).toString().padStart(2, '0') // 月份自动补 0
|
||||||
|
const currentYearMonth = `${year}-${month}`
|
||||||
export function getDevCount(id) {
|
export function getDevCount(id) {
|
||||||
return request({
|
return request({
|
||||||
url: '/cs-device-boot/deviceUser/devCount',
|
url: '/cs-device-boot/deviceUser/devCount',
|
||||||
method: 'post',
|
method: 'post',
|
||||||
|
data: { id: id, time: currentYearMonth },
|
||||||
data: { id },
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -195,3 +197,46 @@ export const finishDebug = (params) => {
|
|||||||
data: params,
|
data: params,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
// 置顶设备、工程
|
||||||
|
export const engineeringPinToTop = (params) => {
|
||||||
|
return request({
|
||||||
|
url: '/cs-device-boot/csUserPins/engineeringPinToTop',
|
||||||
|
method: 'POST',
|
||||||
|
data: params,
|
||||||
|
header: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 查询工程树
|
||||||
|
export const lineTree = (params) => {
|
||||||
|
return request({
|
||||||
|
url: '/cs-device-boot/csLedger/AppLineTree',
|
||||||
|
method: 'POST',
|
||||||
|
// data: {
|
||||||
|
// type: 'engineering',
|
||||||
|
// },
|
||||||
|
// header: {
|
||||||
|
// 'Content-Type': 'application/json',
|
||||||
|
// },
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 查询工程
|
||||||
|
export const queryEngineeringPage = (params) => {
|
||||||
|
return request({
|
||||||
|
url: '/cs-device-boot/engineering/queryEngineeringPage',
|
||||||
|
method: 'POST',
|
||||||
|
data: params,
|
||||||
|
header: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 通过ndid查询出厂设备
|
||||||
|
export const queryEquipmentByndid = (params) => {
|
||||||
|
return request({
|
||||||
|
url: '/cs-device-boot/EquipmentDelivery/queryEquipmentByndid',
|
||||||
|
method: 'POST',
|
||||||
|
data: params,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|||||||
@@ -8,3 +8,9 @@ export function getModuleState(params) {
|
|||||||
data: params,
|
data: params,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
export function getBaseRealData(id) {
|
||||||
|
return request({
|
||||||
|
url: '/cs-harmonic-boot/realData/getBaseRealData?lineId='+id,
|
||||||
|
method: 'post',
|
||||||
|
})
|
||||||
|
}
|
||||||
@@ -15,3 +15,31 @@ export function updateStatus(params) {
|
|||||||
data: params,
|
data: params,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
/**
|
||||||
|
* 稳态详情
|
||||||
|
* @returns {*}
|
||||||
|
*/
|
||||||
|
export function queryHarmonicDetail(params) {
|
||||||
|
return request({
|
||||||
|
url: '/cs-harmonic-boot/csHarmonic/queryHarmonicDetail',
|
||||||
|
method: 'post',
|
||||||
|
header: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
data: params,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 运行告警事件详
|
||||||
|
* @returns {*}
|
||||||
|
*/
|
||||||
|
export function queryAlarmDetail(params) {
|
||||||
|
return request({
|
||||||
|
url: '/cs-harmonic-boot/csAlarm/queryAlarmDetail',
|
||||||
|
method: 'post',
|
||||||
|
header: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
data: params,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|||||||
40
common/api/report.js
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
import request from '../js/request'
|
||||||
|
|
||||||
|
// 下载稳态报告
|
||||||
|
export function downloadHarmonicReport(data) {
|
||||||
|
return request({
|
||||||
|
url: '/cs-report-boot/csAppReport/downloadHarmonicReport',
|
||||||
|
method: 'post',
|
||||||
|
data,
|
||||||
|
header: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 申请暂态报告
|
||||||
|
export function applicationReport(data) {
|
||||||
|
return request({
|
||||||
|
url: '/cs-report-boot/csAppReport/applicationReport',
|
||||||
|
method: 'post',
|
||||||
|
data,
|
||||||
|
header: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 生成暂态报告
|
||||||
|
export function createEventReport(params) {
|
||||||
|
return request({
|
||||||
|
url: '/cs-report-boot/csAppReport/createEventReport',
|
||||||
|
method: 'post',
|
||||||
|
params,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 下载暂态报告
|
||||||
|
export function downloadEventReport(params) {
|
||||||
|
return request({
|
||||||
|
url: '/cs-report-boot/csAppReport/downloadEventReport',
|
||||||
|
method: 'post',
|
||||||
|
params,
|
||||||
|
})
|
||||||
|
}
|
||||||
@@ -35,6 +35,9 @@ page {
|
|||||||
.pl#{$i} {
|
.pl#{$i} {
|
||||||
padding-left: #{$i}rpx;
|
padding-left: #{$i}rpx;
|
||||||
}
|
}
|
||||||
|
.pd#{$i} {
|
||||||
|
padding: #{$i}rpx;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.center {
|
.center {
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
const debug = false // true 是连地服务端本地,false 是连接线上
|
const debug = true // true 是连地服务端本地,false 是连接线上
|
||||||
|
|
||||||
const development = {
|
const development = {
|
||||||
domain: 'http://192.168.1.62:10215',
|
domain: 'http://192.168.2.126:10215',
|
||||||
}
|
}
|
||||||
|
|
||||||
const production = {
|
const production = {
|
||||||
|
|||||||
@@ -1,6 +1,8 @@
|
|||||||
export default {
|
export default {
|
||||||
onPullDownRefresh() {
|
onPullDownRefresh() {
|
||||||
this.store && this.store.reload()
|
if (this.store.isListAtTop) {
|
||||||
|
this.store && this.store.reload()
|
||||||
|
}
|
||||||
},
|
},
|
||||||
onReachBottom() {
|
onReachBottom() {
|
||||||
if (this.store.status != 'noMore') {
|
if (this.store.status != 'noMore') {
|
||||||
@@ -17,8 +19,10 @@ export default {
|
|||||||
var me = this
|
var me = this
|
||||||
return {
|
return {
|
||||||
data: [],
|
data: [],
|
||||||
|
copyData: {},
|
||||||
status: 'noMore',
|
status: 'noMore',
|
||||||
empty: false,
|
empty: false,
|
||||||
|
isListAtTop: true,
|
||||||
total: 0,
|
total: 0,
|
||||||
header: {
|
header: {
|
||||||
'Content-Type': 'application/json;charset=UTF-8',
|
'Content-Type': 'application/json;charset=UTF-8',
|
||||||
@@ -56,6 +60,7 @@ export default {
|
|||||||
}).then((res) => {
|
}).then((res) => {
|
||||||
console.warn(res)
|
console.warn(res)
|
||||||
let resultData = res.data?.list || res.data?.records || res.data || []
|
let resultData = res.data?.list || res.data?.records || res.data || []
|
||||||
|
this.copyData = res.data
|
||||||
if (this.params.pageNum == 1) {
|
if (this.params.pageNum == 1) {
|
||||||
this.data = resultData
|
this.data = resultData
|
||||||
if (resultData.length == 0 || resultData == 0) {
|
if (resultData.length == 0 || resultData == 0) {
|
||||||
@@ -81,7 +86,8 @@ export default {
|
|||||||
}
|
}
|
||||||
this.loadedCallback && this.loadedCallback()
|
this.loadedCallback && this.loadedCallback()
|
||||||
this.params.pageNum++
|
this.params.pageNum++
|
||||||
this.total = res.total
|
this.total = res.total || res.data?.total
|
||||||
|
|
||||||
this.loading = false
|
this.loading = false
|
||||||
uni.stopPullDownRefresh()
|
uni.stopPullDownRefresh()
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
export const MQTT_IP = 'pqmcn.com:8085/mqtt'//mqtt地址端口, 使用emqx时一定要加mqtt
|
// export const MQTT_IP = 'pqmcn.com:8085/mqtt'//mqtt地址端口, 使用emqx时一定要加mqtt
|
||||||
// export const MQTT_IP = '192.168.1.24:8085/mqtt'//mqtt地址端口, 使用emqx时一定要加mqtt
|
export const MQTT_IP = '192.168.1.103:8083/mqtt'//mqtt地址端口, 使用emqx时一定要加mqtt
|
||||||
|
|
||||||
const MQTT_USERNAME = 't_user'//mqtt用户名
|
const MQTT_USERNAME = 't_user'//mqtt用户名
|
||||||
const MQTT_PASSWORD = 'njcnpqs'//密码
|
const MQTT_PASSWORD = 'njcnpqs'//密码
|
||||||
|
|||||||
@@ -27,7 +27,7 @@ export default (options = {}) => {
|
|||||||
}
|
}
|
||||||
uni.request({
|
uni.request({
|
||||||
url,
|
url,
|
||||||
timeout: 1000 *10,
|
timeout: 1000 *30,
|
||||||
data: {
|
data: {
|
||||||
...options.data,
|
...options.data,
|
||||||
},
|
},
|
||||||
@@ -39,7 +39,7 @@ export default (options = {}) => {
|
|||||||
},
|
},
|
||||||
method: options.method || 'GET',
|
method: options.method || 'GET',
|
||||||
success: async (res) => {
|
success: async (res) => {
|
||||||
console.log(res)
|
// console.log(res)
|
||||||
if (arr.indexOf(options.url) > -1) {
|
if (arr.indexOf(options.url) > -1) {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
arr.splice(arr.indexOf(options.url), 1)
|
arr.splice(arr.indexOf(options.url), 1)
|
||||||
|
|||||||
@@ -107,24 +107,61 @@ function formatTime(time, option) {
|
|||||||
}
|
}
|
||||||
// 获取当天日期(年月日)
|
// 获取当天日期(年月日)
|
||||||
function getToday() {
|
function getToday() {
|
||||||
const today = new Date();
|
const today = new Date()
|
||||||
const year = today.getFullYear();
|
const year = today.getFullYear()
|
||||||
const month = String(today.getMonth() + 1).padStart(2, '0'); // 月份从0开始,需+1
|
const month = String(today.getMonth() + 1).padStart(2, '0') // 月份从0开始,需+1
|
||||||
const day = String(today.getDate()).padStart(2, '0');
|
const day = String(today.getDate()).padStart(2, '0')
|
||||||
return `${year}-${month}-${day}`;
|
return `${year}-${month}-${day}`
|
||||||
|
}
|
||||||
|
// 获取当天日期 往前推30天
|
||||||
|
function getBeforeDays(days = 30) {
|
||||||
|
const today = new Date()
|
||||||
|
// 计算往前推N天的时间戳(1天=86400000毫秒)
|
||||||
|
const beforeDate = new Date(today.getTime() - days * 24 * 60 * 60 * 1000)
|
||||||
|
return formatDate(beforeDate)
|
||||||
|
}
|
||||||
|
function formatDate(date) {
|
||||||
|
const year = date.getFullYear()
|
||||||
|
// 月份从0开始,补零到2位
|
||||||
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||||
|
// 日期补零到2位
|
||||||
|
const day = String(date.getDate()).padStart(2, '0')
|
||||||
|
return `${year}-${month}-${day}`
|
||||||
}
|
}
|
||||||
|
|
||||||
// 获取3个月前的日期
|
// 获取3个月前的日期
|
||||||
function getThreeMonthsAgo() {
|
function getThreeMonthsAgo() {
|
||||||
const threeMonthsAgo = new Date();
|
const threeMonthsAgo = new Date()
|
||||||
threeMonthsAgo.setMonth(threeMonthsAgo.getMonth() - 3); // 月份减3
|
threeMonthsAgo.setMonth(threeMonthsAgo.getMonth() - 3) // 月份减3
|
||||||
const year = threeMonthsAgo.getFullYear();
|
const year = threeMonthsAgo.getFullYear()
|
||||||
const month = String(threeMonthsAgo.getMonth() + 1).padStart(2, '0');
|
const month = String(threeMonthsAgo.getMonth() + 1).padStart(2, '0')
|
||||||
const day = String(threeMonthsAgo.getDate()).padStart(2, '0');
|
const day = String(threeMonthsAgo.getDate()).padStart(2, '0')
|
||||||
return `${year}-${month}-${day}`;
|
return `${year}-${month}-${day}`
|
||||||
}
|
}
|
||||||
|
//获取月最后一天
|
||||||
|
function getMonthFirstAndLastDay(monthStr) {
|
||||||
|
// 1. 校验输入格式(正则匹配YYYY-MM)
|
||||||
|
const reg = /^\d{4}-\d{2}$/
|
||||||
|
if (!reg.test(monthStr)) {
|
||||||
|
throw new Error('输入格式错误,请传入"YYYY-MM"格式的字符串,例如:2026-03')
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. 拆分年、月
|
||||||
|
const [year, month] = monthStr.split('-').map(Number)
|
||||||
|
|
||||||
|
// 3. 生成当月第一天(直接拼接01)
|
||||||
|
const firstDay = `${year}-${String(month).padStart(2, '0')}-01`
|
||||||
|
|
||||||
|
// 4. 生成当月最后一天(核心:利用Date的特性,下个月0号 = 当月最后一天)
|
||||||
|
// 注意:月份是0开始的(0=1月,11=12月),所以month+1是下一个月
|
||||||
|
const lastDayDate = new Date(year, month, 0) // 下个月0号 = 当月最后一天
|
||||||
|
const lastDay = `${year}-${String(month).padStart(2, '0')}-${String(lastDayDate.getDate()).padStart(2, '0')}`
|
||||||
|
|
||||||
|
return {
|
||||||
|
firstDay,
|
||||||
|
lastDay,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const h5Helper = {
|
const h5Helper = {
|
||||||
isAndroid: function () {
|
isAndroid: function () {
|
||||||
@@ -152,7 +189,7 @@ const getUserLocation = (call) => {
|
|||||||
success: function (address) {
|
success: function (address) {
|
||||||
call(address)
|
call(address)
|
||||||
},
|
},
|
||||||
fail: (err) => {
|
fail: (err) => {
|
||||||
uni.showModal({
|
uni.showModal({
|
||||||
title: '提示',
|
title: '提示',
|
||||||
content: '定位失败,请打开定位权限',
|
content: '定位失败,请打开定位权限',
|
||||||
@@ -294,12 +331,14 @@ const getDictData = (key) => {
|
|||||||
resolve(dictData.filter((item) => item.code === key)[0]?.children || [])
|
resolve(dictData.filter((item) => item.code === key)[0]?.children || [])
|
||||||
} else {
|
} else {
|
||||||
// 查询字典
|
// 查询字典
|
||||||
queryDictDataCache().then((res) => {
|
queryDictDataCache()
|
||||||
uni.setStorageSync(cacheKey.dictData, res.data)
|
.then((res) => {
|
||||||
resolve(res.data.filter((item) => item.code === key)[0]?.children || [])
|
uni.setStorageSync(cacheKey.dictData, res.data)
|
||||||
}).catch(err=>{
|
resolve(res.data.filter((item) => item.code === key)[0]?.children || [])
|
||||||
reject(err)
|
})
|
||||||
})
|
.catch((err) => {
|
||||||
|
reject(err)
|
||||||
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@@ -317,5 +356,7 @@ export default {
|
|||||||
refreshPrePage,
|
refreshPrePage,
|
||||||
getDictData,
|
getDictData,
|
||||||
getToday,
|
getToday,
|
||||||
getThreeMonthsAgo
|
getBeforeDays,
|
||||||
|
getThreeMonthsAgo,
|
||||||
|
getMonthFirstAndLastDay,
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -8,7 +8,56 @@
|
|||||||
:thumbnail="deviceIcon(device.runStatus)"
|
:thumbnail="deviceIcon(device.runStatus)"
|
||||||
>
|
>
|
||||||
<template v-slot:title>
|
<template v-slot:title>
|
||||||
<slot name="title"></slot>
|
<!-- 卡片标题 -->
|
||||||
|
<view class="uni-card__header" @click="jump(device)">
|
||||||
|
<view class="uni-card__header-box">
|
||||||
|
<view class="uni-card__header-avatar">
|
||||||
|
<view
|
||||||
|
class="event-icon"
|
||||||
|
:style="{ backgroundColor: getColor(device.runStatus, device.devType) }"
|
||||||
|
>
|
||||||
|
<!-- 动态图标:根据类型切换 -->
|
||||||
|
<uni-icons
|
||||||
|
custom-prefix="iconfont"
|
||||||
|
:type="
|
||||||
|
device.devType == 'Direct_Connected_Device'
|
||||||
|
? 'icon-zaixianjianceshebei'
|
||||||
|
: 'icon-shebei1'
|
||||||
|
"
|
||||||
|
:color="device.runStatus == 1 ? '#ff3b30' : '#10B981'"
|
||||||
|
:size="device.devType == 'Direct_Connected_Device' ? '35' : '40'"
|
||||||
|
></uni-icons>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="uni-card__header-content">
|
||||||
|
<text class="uni-card__header-content-title uni-ellipsis">
|
||||||
|
{{ device.equipmentName }}
|
||||||
|
</text>
|
||||||
|
<text class="uni-card__header-content-subtitle uni-ellipsis">
|
||||||
|
{{ device.mac }}
|
||||||
|
</text>
|
||||||
|
<view class="tagBox">
|
||||||
|
<text class="event-tag" :class="device.runStatus == 1 ? 'lx-tag' : 'zx-tag'">{{
|
||||||
|
device.runStatus == 1 ? '离线' : '在线'
|
||||||
|
}}</text>
|
||||||
|
<text
|
||||||
|
class="event-tag"
|
||||||
|
:class="device.devType == 'Direct_Connected_Device' ? 'zl-tag' : 'jc-tag'"
|
||||||
|
>
|
||||||
|
{{ device.devType == 'Direct_Connected_Device' ? '治理设备' : '监测设备' }}
|
||||||
|
</text>
|
||||||
|
<text class="event-tag" :class="device.isPrimaryUser == 1 ? 'z-tag' : 'fx-tag'">{{
|
||||||
|
device.isPrimaryUser == 1 ? '主设备' : '分享设备'
|
||||||
|
}}</text></view
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="uni-card__header-extra" style="position: relative" @click.stop>
|
||||||
|
<text class="uni-card__header-extra-text"></text>
|
||||||
|
<slot name="title"></slot>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- <slot name="title"></slot> -->
|
||||||
</template>
|
</template>
|
||||||
<view class="device-body">
|
<view class="device-body">
|
||||||
<view class="device-body-item">
|
<view class="device-body-item">
|
||||||
@@ -24,6 +73,7 @@
|
|||||||
<text>{{ device.process == 2 ? '功能调试' : '出厂调试' }}</text>
|
<text>{{ device.process == 2 ? '功能调试' : '出厂调试' }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="pinToTop" v-if="device.isTop == 1"> 置顶 </view>
|
||||||
</uni-card>
|
</uni-card>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
@@ -54,27 +104,170 @@ export default {
|
|||||||
return str
|
return str
|
||||||
},
|
},
|
||||||
jump() {
|
jump() {
|
||||||
console.log(12321,this.device);
|
if (this.device.devType == 'Direct_Connected_Device') {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url:
|
url:
|
||||||
'/pages/device/APF/detail?id=' +
|
'/pages/device/APF/detail?id=' +
|
||||||
this.device.equipmentId +
|
this.device.equipmentId +
|
||||||
'&isPrimaryUser=' +
|
'&isPrimaryUser=' +
|
||||||
this.device.isPrimaryUser +
|
this.device.isPrimaryUser +
|
||||||
'&process=' +
|
'&process=' +
|
||||||
this.device.process + '&ndid=' + this.device.ndid,
|
this.device.process +
|
||||||
})
|
'&ndid=' +
|
||||||
|
this.device.ndid,
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
if (this.device.lineList.length == 0) {
|
||||||
|
return this.$util.toast('暂无监测点!')
|
||||||
|
}
|
||||||
|
uni.navigateTo({
|
||||||
|
url:
|
||||||
|
'/pages/device/realTime/index?id=' +
|
||||||
|
this.device.equipmentId +
|
||||||
|
'&isPrimaryUser=' +
|
||||||
|
this.device.isPrimaryUser +
|
||||||
|
'&process=' +
|
||||||
|
this.device.process +
|
||||||
|
'&ndid=' +
|
||||||
|
this.device.ndid +
|
||||||
|
'&lineList=' +
|
||||||
|
JSON.stringify(this.device.lineList) +
|
||||||
|
'&engineeringName=' +
|
||||||
|
this.device.engineeringName +
|
||||||
|
'&equipmentName=' +
|
||||||
|
this.device.equipmentName +
|
||||||
|
'&runStatus=' +
|
||||||
|
this.device.runStatus,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getColor(status, type) {
|
||||||
|
if (status == 1) {
|
||||||
|
return '#ff3b3020'
|
||||||
|
} else {
|
||||||
|
return '#10b98120' //type == 'Direct_Connected_Device' ? '#10b98120' : ''
|
||||||
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.device-body {
|
.device-body {
|
||||||
padding: 20rpx;
|
padding: 10rpx 20rpx 20rpx;
|
||||||
|
|
||||||
.device-body-item {
|
.device-body-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666666;
|
||||||
|
line-height: 1.2;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.uni-card {
|
||||||
|
/deep/ .uni-card__header-box {
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
/deep/ .uni-card__header {
|
||||||
|
display: flex;
|
||||||
|
border-bottom: 2rpx #ebeef5 solid;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20rpx 20rpx 10rpx 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.uni-card .uni-card__header .uni-card__header-content .uni-card__header-content-title {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #3a3a3a;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.uni-card .uni-card__header .uni-card__header-content .uni-card__header-content-subtitle {
|
||||||
|
font-size: 12px;
|
||||||
|
// margin-top: 5px;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
.uni-card .uni-card__header .uni-card__header-avatar .uni-card__header-avatar-image {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.uni-card .uni-card__header .uni-card__header-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.tagBox {
|
||||||
|
display: flex;
|
||||||
|
gap: 15rpx;
|
||||||
|
}
|
||||||
|
.event-icon {
|
||||||
|
position: relative;
|
||||||
|
width: 100rpx;
|
||||||
|
height: 100rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
.event-tag {
|
||||||
|
font-size: 20rpx;
|
||||||
|
padding: 2rpx 10rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
margin-top: 5rpx;
|
||||||
|
// height: 38rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 在线
|
||||||
|
.zx-tag {
|
||||||
|
background-color: #67c23a20;
|
||||||
|
color: #67c23a;
|
||||||
|
}
|
||||||
|
.lx-tag {
|
||||||
|
background-color: #ff3b3020;
|
||||||
|
color: #ff3b30;
|
||||||
|
}
|
||||||
|
.z-tag {
|
||||||
|
background-color: #2563eb20;
|
||||||
|
color: #2563eb;
|
||||||
|
}
|
||||||
|
.fx-tag {
|
||||||
|
background-color: #90939920;
|
||||||
|
color: #909399;
|
||||||
|
}
|
||||||
|
.zl-tag {
|
||||||
|
background-color: #007aff20;
|
||||||
|
color: #007aff;
|
||||||
|
}
|
||||||
|
.jc-tag {
|
||||||
|
background-color: #36cfc920;
|
||||||
|
color: #36cfc9;
|
||||||
|
}
|
||||||
|
.pinToTop {
|
||||||
|
background-color: $uni-theme-color;
|
||||||
|
width: 100rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 20rpx;
|
||||||
|
position: absolute;
|
||||||
|
top: 0rpx;
|
||||||
|
right: 0rpx;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
|
||||||
|
/* 核心:旋转成斜三角效果 */
|
||||||
|
transform: rotate(45deg) translate(50rpx, -10rpx);
|
||||||
|
transform-origin: top right;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
283
components/Cn-filterCriteria/Cn-filterCriteria.vue
Normal file
@@ -0,0 +1,283 @@
|
|||||||
|
<template>
|
||||||
|
<view class="nav choose">
|
||||||
|
<view class="nav-menu" @click="selectEngineering" v-if="showQianTree"
|
||||||
|
>{{
|
||||||
|
select.engineeringName || select.projectName || select.deviceName || select.lineName
|
||||||
|
? [select.engineeringName, select.projectName, select.deviceName, select.lineName]
|
||||||
|
.filter((item) => item && item !== '')
|
||||||
|
.join('>')
|
||||||
|
: '全部工程'
|
||||||
|
}}
|
||||||
|
<uni-icons type="bottom" size="14"></uni-icons>
|
||||||
|
</view>
|
||||||
|
<!-- 弹框组件 -->
|
||||||
|
<Cn-qianTree
|
||||||
|
ref="qiantree"
|
||||||
|
:selectParent="true"
|
||||||
|
:multiple="false"
|
||||||
|
:range="list"
|
||||||
|
:foldAll="true"
|
||||||
|
:singleChoice="singleChoice"
|
||||||
|
@confirm="treeConfirm"
|
||||||
|
@cancel="treeCancel"
|
||||||
|
></Cn-qianTree>
|
||||||
|
<picker
|
||||||
|
mode="date"
|
||||||
|
:value="select.date"
|
||||||
|
:start="startDate"
|
||||||
|
fields="month"
|
||||||
|
:end="endDate"
|
||||||
|
@change="bindDateChange"
|
||||||
|
v-if="showDatetime"
|
||||||
|
>
|
||||||
|
<view class="nav-menu"
|
||||||
|
>{{ select.date }}
|
||||||
|
<uni-icons type="bottom" size="14"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</picker>
|
||||||
|
<uni-datetime-picker v-if="!showDatetime" v-model="select.range" type="daterange" :end="endDate">
|
||||||
|
<view class="nav-menu"
|
||||||
|
>{{ select.range[0] + '至' + select.range[1] }}
|
||||||
|
<uni-icons type="bottom" size="14"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</uni-datetime-picker>
|
||||||
|
<picker @change="bindReport" v-if="report" :value="select.report" :range="reportList">
|
||||||
|
<view class="nav-menu"
|
||||||
|
>{{ reportList[select.report] }}
|
||||||
|
<uni-icons type="bottom" size="14"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</picker>
|
||||||
|
<slot />
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { lineTree } from '@/common/api/device'
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
props: {
|
||||||
|
level: { type: Number, default: 3 },
|
||||||
|
showDatetime: { type: Boolean, default: true },
|
||||||
|
report: { type: Boolean, default: false },
|
||||||
|
singleChoice: { type: Boolean, default: false },
|
||||||
|
showQianTree: { type: Boolean, default: true },
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
const currentDate = this.getDate({
|
||||||
|
format: true,
|
||||||
|
})
|
||||||
|
return {
|
||||||
|
select: {
|
||||||
|
engineeringName: '',
|
||||||
|
engineeringId: '', //工程ID
|
||||||
|
projectName: '',
|
||||||
|
projectId: '', //項目ID
|
||||||
|
deviceName: '',
|
||||||
|
deviceId: '', //设备ID
|
||||||
|
lineName: '',
|
||||||
|
lineId: '', //测点ID
|
||||||
|
date: currentDate,
|
||||||
|
range: ['', ''],
|
||||||
|
report: 0,
|
||||||
|
},
|
||||||
|
list: [],
|
||||||
|
reportList: ['日报', '月报'],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
if (!this.showDatetime) {
|
||||||
|
this.select.range = [this.endDate.slice(0, -3) + '-01', this.endDate]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onShow() {},
|
||||||
|
|
||||||
|
mounted() {},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
getTree() {
|
||||||
|
this.clear()
|
||||||
|
lineTree().then((res) => {
|
||||||
|
let list = {}
|
||||||
|
if (this.singleChoice) {
|
||||||
|
let result = this.findFirstLevel(res.data)
|
||||||
|
console.log('🚀 ~ result:', result)
|
||||||
|
this.select.engineeringName = result.parents[0].name
|
||||||
|
this.select.engineeringId = result.parents[0].id //工程ID
|
||||||
|
this.select.projectName = result.parents[1].name
|
||||||
|
this.select.projectId = result.parents[1].id //項目ID
|
||||||
|
this.select.deviceName = result.parents[2].name
|
||||||
|
this.select.deviceId = result.parents[2].id //设备ID
|
||||||
|
this.select.lineName = result.node.name
|
||||||
|
this.select.lineId = result.node.id //测点ID
|
||||||
|
} else {
|
||||||
|
list = {
|
||||||
|
id: '',
|
||||||
|
pid: '0',
|
||||||
|
pids: '0',
|
||||||
|
name: '全部工程',
|
||||||
|
path: null,
|
||||||
|
provinceId: null,
|
||||||
|
cityId: null,
|
||||||
|
area: null,
|
||||||
|
remark: null,
|
||||||
|
sort: 0,
|
||||||
|
level: 0,
|
||||||
|
comFlag: null,
|
||||||
|
type: null,
|
||||||
|
lineType: null,
|
||||||
|
conType: null,
|
||||||
|
process: null,
|
||||||
|
isTop: 0,
|
||||||
|
children: [],
|
||||||
|
ndid: null,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.list = this.filterTreeByLevel(this.singleChoice ? res.data : [list, ...res.data])
|
||||||
|
// this.findFirstLevel( this.list)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 递归过滤函数:去除level > 2的节点
|
||||||
|
filterTreeByLevel(tree) {
|
||||||
|
// 遍历每一个节点
|
||||||
|
return tree.map((node) => {
|
||||||
|
// 复制当前节点(避免修改原数据)
|
||||||
|
const newNode = { ...node }
|
||||||
|
|
||||||
|
// 如果当前节点有子节点,并且当前节点的level <= 2(因为level=2的节点的子节点是level=3,需要过滤)
|
||||||
|
if (newNode.children && newNode.children.length > 0) {
|
||||||
|
// 递归过滤子节点:只保留子节点中level <= 2的
|
||||||
|
newNode.children = this.filterTreeByLevel(
|
||||||
|
newNode.children.filter((child) => child.level <= this.level),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return newNode
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getDate(type) {
|
||||||
|
const date = new Date()
|
||||||
|
let year = date.getFullYear()
|
||||||
|
let month = date.getMonth() + 1
|
||||||
|
let day = date.getDate()
|
||||||
|
if (type === 'start') {
|
||||||
|
year = year - 10
|
||||||
|
} else if (type === 'end') {
|
||||||
|
year = year
|
||||||
|
}
|
||||||
|
month = month > 9 ? month : '0' + month
|
||||||
|
day = day > 9 ? day : '0' + day
|
||||||
|
|
||||||
|
return this.showDatetime ? `${year}-${month}` : `${year}-${month}-${day}`
|
||||||
|
},
|
||||||
|
bindDateChange(e) {
|
||||||
|
this.select.date = e.detail.value
|
||||||
|
},
|
||||||
|
bindReport(e) {
|
||||||
|
this.select.report = e.detail.value
|
||||||
|
},
|
||||||
|
selectEngineering() {
|
||||||
|
this.$refs.qiantree._show()
|
||||||
|
},
|
||||||
|
|
||||||
|
// 确定回调事件
|
||||||
|
treeConfirm(e) {
|
||||||
|
this.clear()
|
||||||
|
|
||||||
|
this.setSelect(e[0].rank, e[0].name, e[0].id)
|
||||||
|
e[0].parents.forEach((item) => {
|
||||||
|
this.setSelect(item.rank, item.name, item.id)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 清空
|
||||||
|
clear() {
|
||||||
|
this.select.engineeringName = ''
|
||||||
|
this.select.engineeringId = '' //工程ID
|
||||||
|
this.select.projectName = ''
|
||||||
|
this.select.projectId = '' //項目ID
|
||||||
|
this.select.deviceName = ''
|
||||||
|
this.select.deviceId = '' //设备ID
|
||||||
|
this.select.lineName = ''
|
||||||
|
this.select.lineId = '' //测点ID
|
||||||
|
},
|
||||||
|
setSelect(rank, name, id) {
|
||||||
|
switch (rank) {
|
||||||
|
case 0:
|
||||||
|
this.select.engineeringId = id
|
||||||
|
this.select.engineeringName = name
|
||||||
|
break
|
||||||
|
case 1:
|
||||||
|
this.select.projectId = id
|
||||||
|
this.select.projectName = name
|
||||||
|
break
|
||||||
|
case 2:
|
||||||
|
this.select.deviceId = id
|
||||||
|
this.select.deviceName = name
|
||||||
|
break
|
||||||
|
case 3:
|
||||||
|
this.select.lineId = id
|
||||||
|
this.select.lineName = name
|
||||||
|
break
|
||||||
|
}
|
||||||
|
},
|
||||||
|
external(name, id) {
|
||||||
|
this.getTree()
|
||||||
|
this.select.engineeringId = id
|
||||||
|
this.select.engineeringName = name
|
||||||
|
},
|
||||||
|
// 取消回调事件
|
||||||
|
treeCancel(e) {
|
||||||
|
console.log(e)
|
||||||
|
},
|
||||||
|
findFirstLevel(list, parents = []) {
|
||||||
|
for (const item of list) {
|
||||||
|
// 当前就是 level=3
|
||||||
|
if (item.level === 3) {
|
||||||
|
return {
|
||||||
|
node: item, // 第一个 level=3
|
||||||
|
parents: parents, // 它的所有上级
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 递归子节点
|
||||||
|
if (item.children && item.children.length) {
|
||||||
|
const res = this.findFirstLevel(item.children, [...parents, item])
|
||||||
|
if (res) return res // 找到直接返回,不再循环
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return null
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
startDate() {
|
||||||
|
return this.getDate('start')
|
||||||
|
},
|
||||||
|
endDate() {
|
||||||
|
return this.getDate('end')
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
select: {
|
||||||
|
handler(val, oldVal) {
|
||||||
|
if (this.loading) return
|
||||||
|
this.$emit('select', val)
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
|
level: {
|
||||||
|
handler(val, oldVal) {
|
||||||
|
this.getTree()
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
/deep/ .uni-date-editor {
|
||||||
|
width: 360rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -39,7 +39,7 @@ export default {
|
|||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.Cn-page {
|
.Cn-page {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
|
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-padding {
|
.no-padding {
|
||||||
|
|||||||
544
components/Cn-qianTree/Cn-qianTree.vue
Normal file
@@ -0,0 +1,544 @@
|
|||||||
|
<template xlang="wxml">
|
||||||
|
<view class="tki-tree">
|
||||||
|
<view class="tki-tree-mask" :class="{ show: showTree }" @tap="_cancel"></view>
|
||||||
|
<view class="tki-tree-cnt" :class="{ show: showTree }">
|
||||||
|
<view class="tki-tree-bar">
|
||||||
|
<view class="tki-tree-bar-cancel" :style="{ color: cancelColor }" hover-class="hover-c" @tap="_cancel"
|
||||||
|
>取消</view
|
||||||
|
>
|
||||||
|
<view class="tki-tree-bar-title" :style="{ color: titleColor }">{{ title }}</view>
|
||||||
|
<view
|
||||||
|
class="tki-tree-bar-confirm"
|
||||||
|
:style="{ color: confirmColor }"
|
||||||
|
hover-class="hover-c"
|
||||||
|
@tap="_confirm"
|
||||||
|
>确定</view
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
<view class="tki-tree-bar1">
|
||||||
|
<uni-search-bar
|
||||||
|
class="uni-input"
|
||||||
|
radius="5"
|
||||||
|
placeholder="请输入关键字搜索"
|
||||||
|
clearButton="none"
|
||||||
|
@input="input"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- <uni-search-bar
|
||||||
|
v-model="searchValue"
|
||||||
|
clearButton="none"
|
||||||
|
bgColor="#fff"
|
||||||
|
placeholder="请输入关键词"
|
||||||
|
@input="input"
|
||||||
|
></uni-search-bar> -->
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="tki-tree-view">
|
||||||
|
<scroll-view class="tki-tree-view-sc" :scroll-y="true">
|
||||||
|
<block v-for="(item, index) in treeList" :key="index">
|
||||||
|
<view
|
||||||
|
class="tki-tree-item"
|
||||||
|
:style="[
|
||||||
|
{
|
||||||
|
paddingLeft: item.rank * 15 + 'px',
|
||||||
|
zIndex: item.rank * -1 + 50,
|
||||||
|
},
|
||||||
|
]"
|
||||||
|
:class="{
|
||||||
|
border: border === true,
|
||||||
|
show: item.show,
|
||||||
|
last: item.lastRank,
|
||||||
|
showchild: item.showChild,
|
||||||
|
open: item.open,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<view class="tki-tree-label" @tap.stop="_treeItemTap(item, index)">
|
||||||
|
<image
|
||||||
|
class="tki-tree-icon"
|
||||||
|
:src="item.lastRank ? lastIcon : item.showChild ? currentIcon : defaultIcon"
|
||||||
|
></image>
|
||||||
|
{{ item.name }}
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="tki-tree-check"
|
||||||
|
@tap.stop="_treeItemSelect(item, index)"
|
||||||
|
v-if="selectParent ? true : item.lastRank"
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
class="tki-tree-check-yes"
|
||||||
|
v-if="item.checked && (singleChoice ? item.rank == 3 : true)"
|
||||||
|
:class="{ radio: !multiple }"
|
||||||
|
:style="{ 'border-color': confirmColor }"
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
class="tki-tree-check-yes-b"
|
||||||
|
:style="{ 'background-color': confirmColor }"
|
||||||
|
></view>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="tki-tree-check-no"
|
||||||
|
v-if="!item.checked && (singleChoice ? item.rank == 3 : true)"
|
||||||
|
:class="{ radio: !multiple }"
|
||||||
|
:style="{ 'border-color': confirmColor }"
|
||||||
|
></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'tki-tree',
|
||||||
|
props: {
|
||||||
|
lazy: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
range: {
|
||||||
|
type: Array,
|
||||||
|
default: function () {
|
||||||
|
return []
|
||||||
|
},
|
||||||
|
},
|
||||||
|
idKey: {
|
||||||
|
type: String,
|
||||||
|
default: 'id',
|
||||||
|
},
|
||||||
|
singleChoice: { type: Boolean, default: false },
|
||||||
|
rangeKey: {
|
||||||
|
type: String,
|
||||||
|
default: 'name',
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
multiple: {
|
||||||
|
// 是否可以多选
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
// default: true
|
||||||
|
},
|
||||||
|
selectParent: {
|
||||||
|
//是否可以选父级
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
foldAll: {
|
||||||
|
//折叠时关闭所有已经打开的子集,再次打开时需要一级一级打开
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
confirmColor: {
|
||||||
|
// 确定按钮颜色
|
||||||
|
type: String,
|
||||||
|
default: '#376cf3', // #07bb07
|
||||||
|
},
|
||||||
|
cancelColor: {
|
||||||
|
// 取消按钮颜色
|
||||||
|
type: String,
|
||||||
|
default: '', // #757575
|
||||||
|
},
|
||||||
|
titleColor: {
|
||||||
|
// 标题颜色
|
||||||
|
type: String,
|
||||||
|
default: '', // #757575
|
||||||
|
},
|
||||||
|
currentIcon: {
|
||||||
|
// 展开时候的ic
|
||||||
|
type: String,
|
||||||
|
default:
|
||||||
|
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAABRCAYAAACqj0o2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MEQ0QTM0MzQ1Q0RBMTFFOUE0MjY4NzI1Njc1RjI1ODIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MEQ0QTM0MzU1Q0RBMTFFOUE0MjY4NzI1Njc1RjI1ODIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowRDRBMzQzMjVDREExMUU5QTQyNjg3MjU2NzVGMjU4MiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowRDRBMzQzMzVDREExMUU5QTQyNjg3MjU2NzVGMjU4MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PidwepsAAAK0SURBVHja7JxbTsJAFIYHww7ciStgCeoGvGxAiOsgURegoL5720AXYLiIr0aJviq3Zx3PhIEnKG3ndtr+f3KixrSUj/ZjzjClIqUUiFm2gAAQAREQEUAEREAERAQQAREQAREBREAEREBEEqa67h9RFDWllDv0awWYlqlQHmu1WjMRRMoV1QFttA12y3xRtdNczq8EsE4/f8FumX2q77ROvNXk8UGMEKdUz6tYJHljaZAbuyUH+UR1to5BEohTuqwPCeS4pAA/qY6o/kyHOAMCeRK3owJnj+rH1jjxhqpVsstaebCz6TmnHWyXyY+xHjSBWBY/bvSgadtXBj9u9KCN3rnIfkzkQVsTEEX0Y2IP2oKo/HhMICcFAThUcwVZNGU6FdbX/XURzkbVF4+ybGhjPrFdgP66QdXNurGtSdk6Xdb9nAJ8oDo3OQlsQZzkdPw41ONBo6vI5scDefRjZg+6gpg3Pxp50CXEvPjR2IOuIXL3oxUPuobI3Y9WPOgDIlc/WvOgL4iL/vqFCcD7LH0xB4hj7cfQ/fWH9qCT+FhG0tN+DBk1PzjOM0SVllixcsBT1AvYc/kAPhc0hRg/3uvxoCgKRN9+dOrBUBB9+9GpB0NC9OVH5x4MDdG1H714kANEV3705kEOEBf9dcPi/lQnsuvLg1wgSu3Ha0v7Uh4MMgUXeuG71H407a+VBy9CPQkOdw+MtB+nGbd/D+FBbhBNxo9SjwcngJjNj0E9yBFiFj8G9SBXiGn8GNyDnCEm8SMLD3KHGOdHNh7kDjHOj2w8mAeIi/5arX+c6b/fxHz9oADEdGdjR/fXCw/OOB5oVfCOgnepz8IB14PMw03jCmTE+QBx5z0gAmKSqK9OUF+hcAeIhu/QYr4Qie8rjW83hhMBERARQAREQAREBBABERCLnH8BBgA+TQI7U4t53AAAAABJRU5ErkJggg==',
|
||||||
|
},
|
||||||
|
defaultIcon: {
|
||||||
|
// 折叠时候的ic
|
||||||
|
type: String,
|
||||||
|
default:
|
||||||
|
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAABRCAYAAACqj0o2AAACE0lEQVR4Xu3c200DMRCF4XEltJAOkEugA+ggpUAHoQMqiFMCdEAJUMEiS4mEELlIO7bPOeN9i6K1rG/952myyea1WiCtXmEuYBPR4RBMxInoIOCwhOtJLKVszWyXc/5y2BvNEq6I+/3+kFK6M7OHnPM7jcLKjbZAvD/uaZtzflm5P4rbWyJWgDcze1LPuzVihfxUz7sH4ilJ2bx7Isrm3RtRMu8RiHJ5j0SUyXs0okTeCIj0eSMh0uaNhkiZNyIiXd7IiDR5oyNS5M2ACJ83EyJs3myIkHkzIsLlzYwIkzc7IkTeCojD81ZCHJa3GuKQvBURu+etjNgtb3XELnlHQGyedyTEZnlHQ2ySd0RE97wjI7rlHR3RJe+JeIrbLOecD6ePpZQ6W1kn2epo4MUrPOKyLN8ppYq1+y1VStncOjIdGnFZlo+U0uOtWOeOY2TE12Ouq//pEA7xXL7XfvcufR8K0Svfv6CREN3yDYfYIt9QiK3yjYTYLF95xB75SiP2ylcZsVu+cogj8pVCHJWvEuKwfOkREfKlRkTJlxkRJl86RMR8qRBR82VChM0XHpEhX2hElnyREWnyhUNkzBcKkTVfJETafIcjKuQ7FFEl35GIMvl2R1TMtyuiar49EWXzbY5oZpv/hibXTF2h3+s60FRKeT6+3TjMS3nrA3ZFRD8xrfY3ER1kJ+JEdBBwWGKeRAfEH1wS5WFZSDB/AAAAAElFTkSuQmCC',
|
||||||
|
},
|
||||||
|
lastIcon: {
|
||||||
|
// 没有子集的ic
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
border: {
|
||||||
|
// 是否有分割线
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showTree: false,
|
||||||
|
treeList: [],
|
||||||
|
selectIndex: -1,
|
||||||
|
returnedItem: [], //定义一个空数组
|
||||||
|
pids: [],
|
||||||
|
ancestorsIds: [],
|
||||||
|
childNums: [],
|
||||||
|
dataTree: [],
|
||||||
|
inputTimer: null, // 节流定时器标识
|
||||||
|
searchValue: '',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
methods: {
|
||||||
|
_show() {
|
||||||
|
this.showTree = true
|
||||||
|
if (this.searchValue != '') {
|
||||||
|
this.searchValue = ''
|
||||||
|
this.input('')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
_hide() {
|
||||||
|
this.showTree = false
|
||||||
|
},
|
||||||
|
_cancel() {
|
||||||
|
this._hide()
|
||||||
|
this.$emit('cancel', '')
|
||||||
|
},
|
||||||
|
_confirm() {
|
||||||
|
// 处理所选数据
|
||||||
|
let rt = [],
|
||||||
|
obj = {}
|
||||||
|
this.treeList.forEach((v, i) => {
|
||||||
|
if (this.treeList[i].checked) {
|
||||||
|
// rt.push(this.treeList[i].id)
|
||||||
|
rt.push(this.treeList[i])
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this._hide()
|
||||||
|
this.$emit('confirm', rt)
|
||||||
|
},
|
||||||
|
//扁平化树结构
|
||||||
|
_renderTreeList(list = [], rank = 0, parentId = [], parents = []) {
|
||||||
|
list.forEach((item) => {
|
||||||
|
this.treeList.push({
|
||||||
|
id: item[this.idKey],
|
||||||
|
name: item[this.rangeKey],
|
||||||
|
source: item,
|
||||||
|
parentId, // 父级id数组
|
||||||
|
parents, // 父级id数组
|
||||||
|
rank, // 层级
|
||||||
|
showChild: false, //子级是否显示
|
||||||
|
open: false, //是否打开
|
||||||
|
show: rank === 0, // 自身是否显示
|
||||||
|
hideArr: [],
|
||||||
|
orChecked: item.checked ? item.checked : false,
|
||||||
|
checked: item.checked ? item.checked : false,
|
||||||
|
childNum: 0,
|
||||||
|
})
|
||||||
|
|
||||||
|
if (Array.isArray(item.children) && item.children.length > 0) {
|
||||||
|
let parentid = [...parentId],
|
||||||
|
parentArr = [...parents]
|
||||||
|
delete parentArr.children
|
||||||
|
parentid.push(item[this.idKey])
|
||||||
|
parentArr.push({
|
||||||
|
[this.idKey]: item[this.idKey],
|
||||||
|
[this.rangeKey]: item[this.rangeKey],
|
||||||
|
rank: rank,
|
||||||
|
})
|
||||||
|
// lazy
|
||||||
|
if (!this.lazy) {
|
||||||
|
this._renderTreeList(item.children, rank + 1, parentid, parentArr)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.treeList[this.treeList.length - 1].lastRank = true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 处理默认选择
|
||||||
|
_defaultSelect() {
|
||||||
|
this.treeList.forEach((v, i) => {
|
||||||
|
if (v.checked) {
|
||||||
|
this.treeList.forEach((v2, i2) => {
|
||||||
|
if (v.parentId.toString().indexOf(v2.parentId.toString()) >= 0) {
|
||||||
|
v2.show = true
|
||||||
|
if (v.parentId.includes(v2.id)) {
|
||||||
|
v2.showChild = true
|
||||||
|
v2.open = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getOwn(id, arr) {
|
||||||
|
//利用foreach循环遍历
|
||||||
|
arr.forEach((item) => {
|
||||||
|
//判断递归结束条件
|
||||||
|
if (item[this.idKey] == id) {
|
||||||
|
// 存储数据到空数组
|
||||||
|
this.returnedItem = item
|
||||||
|
} else if (item.children != null) //判断chlidren是否有数据
|
||||||
|
{
|
||||||
|
//递归调用
|
||||||
|
this.getOwn(id, item.children)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return this.returnedItem
|
||||||
|
},
|
||||||
|
setShow(id, arr, isShow) {
|
||||||
|
arr.forEach((item, index) => {
|
||||||
|
if (item.parentId.includes(id)) {
|
||||||
|
this.treeList[index].showChild = isShow
|
||||||
|
this.treeList[index].show = isShow
|
||||||
|
} else if (item.children !== undefined) {
|
||||||
|
this.setShow(id, item.children, isShow)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 点击
|
||||||
|
_treeItemTap(item, index) {
|
||||||
|
// console.log(item)
|
||||||
|
if (item.lastRank === true) {
|
||||||
|
//点击最后一级时触发事件
|
||||||
|
this.treeList[index].checked = !this.treeList[index].checked
|
||||||
|
this._fixMultiple(index)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
let id = item.id
|
||||||
|
item.showChild = !item.showChild
|
||||||
|
// qingqian
|
||||||
|
if (item.showChild) {
|
||||||
|
// const range = this.range
|
||||||
|
const range = this.dataTree
|
||||||
|
const parentIdArr = item.parentId
|
||||||
|
// 找到当前元素
|
||||||
|
const own = this.getOwn(id, range)
|
||||||
|
const checkedChildren = own.children
|
||||||
|
// 子元素插入的索引位置
|
||||||
|
const nextIndex = this.treeList.findIndex((itemT) => itemT.id === item.id)
|
||||||
|
console.log(checkedChildren)
|
||||||
|
if (checkedChildren === undefined || checkedChildren.length < 1) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
// 子节点数量
|
||||||
|
this.treeList[index].childNum = checkedChildren.length
|
||||||
|
const newRank = item.rank + 1
|
||||||
|
checkedChildren.forEach((itemC) => {
|
||||||
|
const childObj = {
|
||||||
|
id: itemC[this.idKey],
|
||||||
|
name: itemC[this.rangeKey],
|
||||||
|
source: {},
|
||||||
|
parentId: [item.id], // 父级id数组
|
||||||
|
parents: [item], // 父级id数组
|
||||||
|
rank: newRank, // 层级
|
||||||
|
showChild: false, //子级是否显示
|
||||||
|
open: false, //是否打开
|
||||||
|
show: 1, // 自身是否显示
|
||||||
|
hideArr: [],
|
||||||
|
orChecked: this.treeList[index].checked,
|
||||||
|
checked: this.treeList[index].checked,
|
||||||
|
}
|
||||||
|
if (!this.treeList.some((itemT) => itemT.id === itemC[this.idKey])) {
|
||||||
|
this.treeList.splice(nextIndex + 1, 0, childObj)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 展开/隐藏子级/孙级
|
||||||
|
let list = this.treeList
|
||||||
|
item.open = item.showChild ? true : !item.open
|
||||||
|
list.forEach((childItem, i) => {
|
||||||
|
if (item.showChild === false) {
|
||||||
|
//隐藏所有子级
|
||||||
|
if (!childItem.parentId.includes(id)) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
//TODO: 修改
|
||||||
|
if (!this.foldAll) {
|
||||||
|
if (childItem.lastRank !== true && !childItem.open) {
|
||||||
|
childItem.showChild = false
|
||||||
|
this.setShow(childItem.id, this.treeList, false)
|
||||||
|
}
|
||||||
|
// 为隐藏的内容添加一个标记
|
||||||
|
if (childItem.show) {
|
||||||
|
childItem.hideArr[item.rank] = id
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (childItem.lastRank !== true) {
|
||||||
|
childItem.showChild = false
|
||||||
|
// 继续隐藏子级的的子级
|
||||||
|
this.setShow(childItem.id, this.treeList, false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (childItem.children !== undefined) {
|
||||||
|
childItem.children.forEach((childItem1, i1) => {
|
||||||
|
if (!childItem1.parentId.includes(childItem.id)) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
childItem.children[i1].showChild = false
|
||||||
|
childItem.children[i1].show = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
childItem.show = false
|
||||||
|
} else {
|
||||||
|
// 打开子集
|
||||||
|
if (childItem.parentId[childItem.parentId.length - 1] === id) {
|
||||||
|
childItem.show = true
|
||||||
|
}
|
||||||
|
// 打开被隐藏的子集
|
||||||
|
if (childItem.parentId.includes(id) && !this.foldAll) {
|
||||||
|
// console.log(childItem.hideArr)
|
||||||
|
if (childItem.hideArr[item.rank] === id) {
|
||||||
|
childItem.show = true
|
||||||
|
if (childItem.open && childItem.showChild) {
|
||||||
|
childItem.showChild = true
|
||||||
|
} else {
|
||||||
|
childItem.showChild = false
|
||||||
|
}
|
||||||
|
childItem.hideArr[item.rank] = null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 通过父id处理子级
|
||||||
|
syncChecked(trees, pid, checked) {
|
||||||
|
trees.forEach((item, index) => {
|
||||||
|
if (item.parentId.includes(pid)) {
|
||||||
|
this.treeList[index].checked = checked
|
||||||
|
this.syncChecked(trees, item.id, checked)
|
||||||
|
} else if (item.children !== undefined) {
|
||||||
|
this.syncChecked(item.children, pid, checked)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 获取父级往上所有层级的id 并同步状态
|
||||||
|
setAncestors(pids, checked) {
|
||||||
|
this.treeList.forEach((item, index) => {
|
||||||
|
if (pids.includes(item.id)) {
|
||||||
|
if (checked && this.childNums[item.id] !== undefined && item.childNum === this.childNums[item.id]) {
|
||||||
|
// 子级全部选中, 父级才选中
|
||||||
|
this.treeList[index].checked = true
|
||||||
|
} else {
|
||||||
|
this.treeList[index].checked = false
|
||||||
|
}
|
||||||
|
this.setAncestors(item.parentId, checked)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
_treeItemSelect(item, index) {
|
||||||
|
if (item.rank != 3) {
|
||||||
|
if (this.singleChoice) return
|
||||||
|
}
|
||||||
|
// if(this.singleChoice)
|
||||||
|
this.treeList[index].checked = !this.treeList[index].checked
|
||||||
|
// 选父级, 子级自动全选
|
||||||
|
this.syncChecked(this.treeList, item.id, this.treeList[index].checked)
|
||||||
|
|
||||||
|
if (item.rank > 0) {
|
||||||
|
item.parentId.forEach((pid, indexP) => {
|
||||||
|
const parent = this.treeList.filter((i) => i.id === pid)
|
||||||
|
const childNum = parent.length > 0 ? parent[0].childNum : 0
|
||||||
|
if (this.childNums[pid] === undefined) {
|
||||||
|
this.childNums[pid] = 1
|
||||||
|
} else if (this.childNums[pid] < childNum) {
|
||||||
|
this.childNums[pid]++
|
||||||
|
}
|
||||||
|
})
|
||||||
|
//子级选择/选满/取消选择, 父级往上同步状态
|
||||||
|
this.setAncestors(item.parentId, this.treeList[index].checked)
|
||||||
|
}
|
||||||
|
this._fixMultiple(index)
|
||||||
|
},
|
||||||
|
// 处理单选多选
|
||||||
|
_fixMultiple(index) {
|
||||||
|
if (!this.multiple) {
|
||||||
|
// 如果是单选
|
||||||
|
this.treeList.forEach((v, i) => {
|
||||||
|
if (i != index) {
|
||||||
|
this.treeList[i].checked = false
|
||||||
|
} else {
|
||||||
|
this.treeList[i].checked = true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 重置数据
|
||||||
|
_reTreeList() {
|
||||||
|
this.treeList.forEach((v, i) => {
|
||||||
|
this.treeList[i].checked = v.orChecked
|
||||||
|
})
|
||||||
|
},
|
||||||
|
_initTree(range = this.range) {
|
||||||
|
this.treeList = []
|
||||||
|
this.dataTree = JSON.parse(JSON.stringify(range))
|
||||||
|
this._renderTreeList(range)
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this._defaultSelect(range)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 筛选
|
||||||
|
input(val) {
|
||||||
|
// 清除上一次的定时器,避免频繁执行
|
||||||
|
if (this.inputTimer) {
|
||||||
|
clearTimeout(this.inputTimer)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置新的定时器,指定延迟后执行过滤逻辑
|
||||||
|
this.inputTimer = setTimeout(() => {
|
||||||
|
const keyword = val
|
||||||
|
// 执行树形过滤和初始化
|
||||||
|
this._initTree(this.filterNodes(this.range, keyword))
|
||||||
|
// 清空定时器标识
|
||||||
|
clearTimeout(this.inputTimer)
|
||||||
|
this.inputTimer = null
|
||||||
|
}, 500)
|
||||||
|
// this._initTree(this.filterNodes(this.range, val.detail.value))
|
||||||
|
},
|
||||||
|
|
||||||
|
filterNodes(node, query) {
|
||||||
|
const keyword = query.trim() // 获取搜索关键字并转换为小写
|
||||||
|
const nodes = node
|
||||||
|
// 使用递归函数过滤树形数据
|
||||||
|
const filteredNodes = []
|
||||||
|
for (const node of nodes) {
|
||||||
|
if (node.name.includes(keyword)) {
|
||||||
|
// 如果节点的标签包含关键字,将其添加到结果中
|
||||||
|
filteredNodes.push(node)
|
||||||
|
} else if (node.children && node.children.length > 0) {
|
||||||
|
// 如果节点有子节点,则递归过滤子节点
|
||||||
|
const filteredChildren = this.filterNodes(node.children, keyword)
|
||||||
|
if (filteredChildren.length > 0) {
|
||||||
|
// 如果子节点中有匹配的结果,则添加父节点
|
||||||
|
const clonedNode = { ...node, children: filteredChildren }
|
||||||
|
filteredNodes.push(clonedNode)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return filteredNodes
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
range(list) {
|
||||||
|
this._initTree(list)
|
||||||
|
},
|
||||||
|
multiple() {
|
||||||
|
if (this.range.length) {
|
||||||
|
this._reTreeList()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
selectParent() {
|
||||||
|
if (this.range.length) {
|
||||||
|
this._reTreeList()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this._initTree()
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import './style.css';
|
||||||
|
/deep/ .uni-searchbar__box {
|
||||||
|
justify-content: left !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
195
components/Cn-qianTree/style.css
Normal file
@@ -0,0 +1,195 @@
|
|||||||
|
.tki-tree-mask {
|
||||||
|
position: fixed;
|
||||||
|
top: 0rpx;
|
||||||
|
right: 0rpx;
|
||||||
|
bottom: 0rpx;
|
||||||
|
left: 0rpx;
|
||||||
|
z-index: 9998;
|
||||||
|
background-color: rgba(0, 0, 0, 0.6);
|
||||||
|
opacity: 0;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
.tki-tree-mask.show {
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.tki-tree-cnt {
|
||||||
|
position: fixed;
|
||||||
|
top: 0rpx;
|
||||||
|
right: 0rpx;
|
||||||
|
bottom: 0rpx;
|
||||||
|
left: 0rpx;
|
||||||
|
z-index: 9999;
|
||||||
|
top: 40%;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
transform: translateY(100%);
|
||||||
|
}
|
||||||
|
.tki-tree-cnt.show {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
.tki-tree-bar {
|
||||||
|
background-color: #fff;
|
||||||
|
height: 72rpx;
|
||||||
|
padding-left: 20rpx;
|
||||||
|
padding-right: 20rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-bottom-width: 1rpx !important;
|
||||||
|
border-bottom-style: solid;
|
||||||
|
border-bottom-color: #f5f5f5;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #757575;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
.tki-tree-bar1 {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
.tki-tree-bar-confirm {
|
||||||
|
color: #07bb07;
|
||||||
|
}
|
||||||
|
.tki-tree-view {
|
||||||
|
position: absolute;
|
||||||
|
top: 0rpx;
|
||||||
|
right: 0rpx;
|
||||||
|
bottom: 0rpx;
|
||||||
|
left: 0rpx;
|
||||||
|
top: 160rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
padding-top: 20rpx;
|
||||||
|
padding-right: 20rpx;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
padding-left: 20rpx;
|
||||||
|
}
|
||||||
|
.tki-tree-view-sc {
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.tki-tree-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 26rpx;
|
||||||
|
/* color: #757575; */
|
||||||
|
line-height: 1;
|
||||||
|
height: 0;
|
||||||
|
opacity: 0;
|
||||||
|
transition: 0.2s;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.tki-tree-item.show {
|
||||||
|
height: 80rpx;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.tki-tree-item.showchild:before {
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
.tki-tree-item.last:before {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.tki-tree-icon {
|
||||||
|
width: 26rpx;
|
||||||
|
height: 26rpx;
|
||||||
|
margin-right: 8rpx;
|
||||||
|
}
|
||||||
|
.tki-tree-label {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
.tki-tree-check {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.tki-tree-check-yes,
|
||||||
|
.tki-tree-check-no {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-top-left-radius: 20%;
|
||||||
|
border-top-right-radius: 20%;
|
||||||
|
border-bottom-right-radius: 20%;
|
||||||
|
border-bottom-left-radius: 20%;
|
||||||
|
border-top-width: 1rpx;
|
||||||
|
border-left-width: 1rpx;
|
||||||
|
border-bottom-width: 1rpx;
|
||||||
|
border-right-width: 1rpx;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: #07bb07;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.tki-tree-check-yes-b {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-top-left-radius: 20%;
|
||||||
|
border-top-right-radius: 20%;
|
||||||
|
border-bottom-right-radius: 20%;
|
||||||
|
border-bottom-left-radius: 20%;
|
||||||
|
background-color: #07bb07;
|
||||||
|
}
|
||||||
|
.tki-tree-check .radio {
|
||||||
|
border-top-left-radius: 50%;
|
||||||
|
border-top-right-radius: 50%;
|
||||||
|
border-bottom-right-radius: 50%;
|
||||||
|
border-bottom-left-radius: 50%;
|
||||||
|
}
|
||||||
|
.tki-tree-check .radio .tki-tree-check-yes-b {
|
||||||
|
border-top-left-radius: 50%;
|
||||||
|
border-top-right-radius: 50%;
|
||||||
|
border-bottom-right-radius: 50%;
|
||||||
|
border-bottom-left-radius: 50%;
|
||||||
|
}
|
||||||
|
.hover-c {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search {
|
||||||
|
position: absolute;
|
||||||
|
left: 35rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 基础输入框样式 */
|
||||||
|
.uni-input {
|
||||||
|
width: 95%;
|
||||||
|
height: 60rpx;
|
||||||
|
line-height: 60rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
/* font-size: 32rpx;
|
||||||
|
color: #333;
|
||||||
|
background: #f5f5f5;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
padding: 0 24rpx 0 60rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: none; */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 聚焦态样式 */
|
||||||
|
.uni-input:focus {
|
||||||
|
background: #fff;
|
||||||
|
border: 2rpx solid #007aff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 占位符样式 */
|
||||||
|
.uni-input::placeholder {
|
||||||
|
color: #999;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 兼容微信小程序 */
|
||||||
|
.uni-input::-webkit-input-placeholder {
|
||||||
|
color: #999;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
177
components/Cn-timepicker/Cn-timepicker.vue
Normal file
@@ -0,0 +1,177 @@
|
|||||||
|
<template>
|
||||||
|
<view class="content">
|
||||||
|
<picker
|
||||||
|
mode="multiSelector"
|
||||||
|
@change="bindPickerChange"
|
||||||
|
@columnchange="handleColumnChange"
|
||||||
|
:value="multiIndex"
|
||||||
|
:range="onlyYear ? yearsArray : multiArray"
|
||||||
|
>
|
||||||
|
<view class="time-season">
|
||||||
|
<text>
|
||||||
|
<text v-if="showMonth">{{ year + '-' + season }} </text>
|
||||||
|
<text v-else-if="year">{{ year + (year ? '年' : '') + (onlyYear ? '' : season) }} </text>
|
||||||
|
<text v-else class="prompt">请选择时间 </text>
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</picker>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
yearsMin: {
|
||||||
|
type: Number,
|
||||||
|
default: 5,
|
||||||
|
},
|
||||||
|
yearsMax: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
onlyYear: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
showMonth: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
const now = new Date()
|
||||||
|
this.currentYear = now.getFullYear() // 保存当前年份
|
||||||
|
this.currentMonth = now.getMonth() + 1 // 保存当前月份(1-12)
|
||||||
|
this.currentSeason = Math.ceil(this.currentMonth / 3) // 保存当前季度(1-4)
|
||||||
|
|
||||||
|
const yearArr = this.handleYear()
|
||||||
|
const seasonArr = ['一季度', '二季度', '三季度', '四季度']
|
||||||
|
const monthArr = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
|
||||||
|
return {
|
||||||
|
multiArray: [yearArr, this.showMonth ? monthArr : seasonArr],
|
||||||
|
multiIndex: [this.handleYear(true), 0],
|
||||||
|
yearsArray: [yearArr],
|
||||||
|
year: '',
|
||||||
|
season: '',
|
||||||
|
// 原始完整的时间数组(用于恢复)
|
||||||
|
fullMonthArr: [...monthArr],
|
||||||
|
fullSeasonArr: [...seasonArr]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
const now = new Date()
|
||||||
|
this.year = now.getFullYear().toString()
|
||||||
|
const month = now.getMonth() + 1
|
||||||
|
|
||||||
|
// 初始化时就过滤当前年份的时间范围
|
||||||
|
this.updateTimeRange(this.currentYear)
|
||||||
|
|
||||||
|
if (this.showMonth) {
|
||||||
|
this.multiIndex = [5, month - 1]
|
||||||
|
this.season = month < 10 ? `0${month}` : `${month}`
|
||||||
|
} else {
|
||||||
|
let key = 0
|
||||||
|
if (month >= 1 && month <= 3) {
|
||||||
|
key = 0
|
||||||
|
this.season = '一季度'
|
||||||
|
} else if (month >= 4 && month <= 6) {
|
||||||
|
key = 1
|
||||||
|
this.season = '二季度'
|
||||||
|
} else if (month >= 7 && month <= 9) {
|
||||||
|
key = 2
|
||||||
|
this.season = '三季度'
|
||||||
|
} else {
|
||||||
|
key = 3
|
||||||
|
this.season = '四季度'
|
||||||
|
}
|
||||||
|
this.multiIndex = [5, key]
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$emit('timeSeasonC', {
|
||||||
|
year: this.year,
|
||||||
|
season: this.season,
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 处理年份
|
||||||
|
handleYear(nowYearIndex) {
|
||||||
|
let optionsArray = []
|
||||||
|
let years = new Date().getFullYear()
|
||||||
|
for (let i = years - this.yearsMin; i <= years + this.yearsMax; i++) {
|
||||||
|
optionsArray.push(i)
|
||||||
|
}
|
||||||
|
if (nowYearIndex) {
|
||||||
|
return optionsArray.indexOf(years)
|
||||||
|
}
|
||||||
|
return optionsArray
|
||||||
|
},
|
||||||
|
// 列变化事件:切换年份时动态调整时间范围
|
||||||
|
handleColumnChange(e) {
|
||||||
|
// 只有切换第一列(年份列)时才处理
|
||||||
|
if (e.detail.column === 0) {
|
||||||
|
const selectedYear = this.multiArray[0][e.detail.value]
|
||||||
|
// 更新时间范围(月份/季度)
|
||||||
|
this.updateTimeRange(selectedYear)
|
||||||
|
// 修正索引:如果当前选中的时间超出新范围,重置为最后一个选项
|
||||||
|
const timeLength = this.multiArray[1].length
|
||||||
|
if (this.multiIndex[1] >= timeLength) {
|
||||||
|
this.multiIndex[1] = timeLength - 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 核心:根据选中年份更新时间范围
|
||||||
|
updateTimeRange(selectedYear) {
|
||||||
|
if (this.onlyYear) return // 只选年份时无需处理
|
||||||
|
|
||||||
|
if (selectedYear === this.currentYear) {
|
||||||
|
// 当前年份:只显示到当前月/当前季度
|
||||||
|
if (this.showMonth) {
|
||||||
|
// 过滤月份:只保留1到当前月
|
||||||
|
this.multiArray[1] = this.fullMonthArr.slice(0, this.currentMonth)
|
||||||
|
} else {
|
||||||
|
// 过滤季度:只保留1到当前季度
|
||||||
|
this.multiArray[1] = this.fullSeasonArr.slice(0, this.currentSeason)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 非当前年份:恢复完整的时间数组
|
||||||
|
this.multiArray[1] = this.showMonth ? [...this.fullMonthArr] : [...this.fullSeasonArr]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 确认选择时间
|
||||||
|
bindPickerChange: function (e) {
|
||||||
|
this.multiIndex = e.detail.value
|
||||||
|
|
||||||
|
this.year = this.multiArray[0][this.multiIndex[0]]
|
||||||
|
if (this.onlyYear) {
|
||||||
|
this.$emit('timeSeasonC', { year: this.year })
|
||||||
|
} else {
|
||||||
|
this.season = this.multiArray[1][this.multiIndex[1]]
|
||||||
|
this.$emit('timeSeasonC', {
|
||||||
|
year: this.year,
|
||||||
|
season: this.season,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.content {
|
||||||
|
width: 100%;
|
||||||
|
height: 62rpx !important;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 10rpx 20rpx;
|
||||||
|
line-height: 38rpx;
|
||||||
|
border: 1px solid #e5e5e5;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
}
|
||||||
|
.time-season {
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
.prompt {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: grey;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
12
main.js
@@ -5,17 +5,19 @@ import request from './common/js/request'
|
|||||||
import config from './common/js/config'
|
import config from './common/js/config'
|
||||||
import cacheKey from './common/js/cacheKey'
|
import cacheKey from './common/js/cacheKey'
|
||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
import share from "@/common/js/share.js";
|
import share from '@/common/js/share.js'
|
||||||
|
import uView from 'uview-ui'
|
||||||
Vue.config.productionTip = false
|
Vue.config.productionTip = false
|
||||||
Vue.prototype.$request = request
|
Vue.prototype.$request = request
|
||||||
Vue.prototype.$util = util
|
Vue.prototype.$util = util
|
||||||
Vue.prototype.$config = config
|
Vue.prototype.$config = config
|
||||||
Vue.prototype.$cacheKey = cacheKey
|
Vue.prototype.$cacheKey = cacheKey
|
||||||
Vue.mixin(share);
|
Vue.mixin(share)
|
||||||
|
Vue.use(uView)
|
||||||
|
uni.$u.config.unit = 'rpx'
|
||||||
App.mpType = 'app'
|
App.mpType = 'app'
|
||||||
const app = new Vue({
|
const app = new Vue({
|
||||||
...App
|
...App,
|
||||||
})
|
})
|
||||||
app.$mount()
|
|
||||||
|
|
||||||
|
app.$mount()
|
||||||
|
|||||||
@@ -2,8 +2,8 @@
|
|||||||
"name" : "灿能物联",
|
"name" : "灿能物联",
|
||||||
"appid" : "__UNI__88BC25B",
|
"appid" : "__UNI__88BC25B",
|
||||||
"description" : "",
|
"description" : "",
|
||||||
"versionName" : "1.6.81",
|
"versionName" : "1.6.82",
|
||||||
"versionCode" : 169,
|
"versionCode" : 170,
|
||||||
"transformPx" : false,
|
"transformPx" : false,
|
||||||
"sassImplementationName" : "node-sass",
|
"sassImplementationName" : "node-sass",
|
||||||
/* 5+App特有相关 */
|
/* 5+App特有相关 */
|
||||||
@@ -138,8 +138,8 @@
|
|||||||
"proxy" : {
|
"proxy" : {
|
||||||
"/api" : {
|
"/api" : {
|
||||||
"https" : true,
|
"https" : true,
|
||||||
"target" : "https://pqmcn.com:8092/api",
|
// "target" : "https://pqmcn.com:8092/api",
|
||||||
// "target" : "http://192.168.1.62:10215",
|
"target" : "http://192.168.2.126:10215",
|
||||||
"changOrigin" : true,
|
"changOrigin" : true,
|
||||||
"pathRewrite" : {
|
"pathRewrite" : {
|
||||||
"/api" : ""
|
"/api" : ""
|
||||||
@@ -153,6 +153,9 @@
|
|||||||
},
|
},
|
||||||
"unipush" : {
|
"unipush" : {
|
||||||
"enable" : false
|
"enable" : false
|
||||||
|
},
|
||||||
|
"sdkConfigs" : {
|
||||||
|
"maps" : {}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"mp-toutiao" : {
|
"mp-toutiao" : {
|
||||||
|
|||||||
6
package-lock.json
generated
@@ -427,7 +427,6 @@
|
|||||||
},
|
},
|
||||||
"mqtt": {
|
"mqtt": {
|
||||||
"version": "3.0.0",
|
"version": "3.0.0",
|
||||||
"resolved": "D:\\项目\\灿能\\app-govern\\node_modules\\.pnpm\\mqtt@3.0.0\\node_modules\\mqtt",
|
|
||||||
"requires": {
|
"requires": {
|
||||||
"base64-js": "^1.3.0",
|
"base64-js": "^1.3.0",
|
||||||
"commist": "^1.0.0",
|
"commist": "^1.0.0",
|
||||||
@@ -674,6 +673,11 @@
|
|||||||
"base64-arraybuffer": "^1.0.2"
|
"base64-arraybuffer": "^1.0.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"uview-ui": {
|
||||||
|
"version": "2.0.38",
|
||||||
|
"resolved": "https://registry.npmmirror.com/uview-ui/-/uview-ui-2.0.38.tgz",
|
||||||
|
"integrity": "sha512-6egHDf9lXHKpG3hEjRE0vMx4+VWwKk/ReTf5x18KrIKqdvdPRqO3+B8Unh7vYYwrIxzAWIlmhZ9RJpKI/4UqPQ=="
|
||||||
|
},
|
||||||
"websocket-stream": {
|
"websocket-stream": {
|
||||||
"version": "5.5.2",
|
"version": "5.5.2",
|
||||||
"resolved": "https://registry.npmmirror.com/websocket-stream/-/websocket-stream-5.5.2.tgz",
|
"resolved": "https://registry.npmmirror.com/websocket-stream/-/websocket-stream-5.5.2.tgz",
|
||||||
|
|||||||
@@ -25,6 +25,7 @@
|
|||||||
"image-tools": "^1.4.0",
|
"image-tools": "^1.4.0",
|
||||||
"jsrsasign": "^11.1.0",
|
"jsrsasign": "^11.1.0",
|
||||||
"mqtt": "^3.0.0",
|
"mqtt": "^3.0.0",
|
||||||
"pinyin-pro": "^3.26.0"
|
"pinyin-pro": "^3.26.0",
|
||||||
|
"uview-ui": "^2.0.38"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
83
pages.json
@@ -4,6 +4,7 @@
|
|||||||
{
|
{
|
||||||
"path": "pages/index/index",
|
"path": "pages/index/index",
|
||||||
"style": {
|
"style": {
|
||||||
|
"enablePullDownRefresh": true, // 开启下拉刷新
|
||||||
"navigationStyle": "custom",
|
"navigationStyle": "custom",
|
||||||
"pullToRefresh": {
|
"pullToRefresh": {
|
||||||
"support":true,
|
"support":true,
|
||||||
@@ -13,11 +14,41 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/index/message",
|
"path": "pages/index/message1",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "消息"
|
"navigationBarTitleText": "消息",
|
||||||
|
"enablePullDownRefresh": true, // 开启下拉刷新
|
||||||
|
"pullToRefresh": {
|
||||||
|
"support":true,
|
||||||
|
"style": "circle",
|
||||||
|
"color":"#007aff"
|
||||||
|
},
|
||||||
|
"app-plus": {
|
||||||
|
"bounce": "none",
|
||||||
|
//关闭窗口回弹效果
|
||||||
|
"titleNView": {
|
||||||
|
// 窗口的标题
|
||||||
|
"titleAlign": "center",
|
||||||
|
"padding-right": "20rpx",
|
||||||
|
"buttons": [
|
||||||
|
{
|
||||||
|
"text": "一键已读",
|
||||||
|
"fontSize": "28rpx",
|
||||||
|
"select": false,
|
||||||
|
"width": "auto"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/index/report",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "报表"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/index/mine",
|
"path": "pages/index/mine",
|
||||||
"style": {
|
"style": {
|
||||||
@@ -133,6 +164,13 @@
|
|||||||
"enablePullDownRefresh": true
|
"enablePullDownRefresh": true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/device/realTime/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "实时数据"
|
||||||
|
// "enablePullDownRefresh": true
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/device/DVR/detail",
|
"path": "pages/device/DVR/detail",
|
||||||
"style": {
|
"style": {
|
||||||
@@ -221,12 +259,36 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/message1/comp/preview",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "预览"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/message/messageDetail",
|
"path": "pages/message/messageDetail",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "暂态事件详情"
|
"navigationBarTitleText": "暂态事件详情"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/message1/comp/transientDetails",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "暂态事件详情"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/message1/comp/steadyStateDetails",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "稳态事件详情"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/message1/comp/alarmDetails",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "运行告警详情"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/device/transfer",
|
"path": "pages/device/transfer",
|
||||||
"style": {
|
"style": {
|
||||||
@@ -353,6 +415,12 @@
|
|||||||
"navigationBarTitleText": "服务内容配置"
|
"navigationBarTitleText": "服务内容配置"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/mine/transientSetting",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "暂态事件配置"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/user/erweima",
|
"path": "pages/user/erweima",
|
||||||
"style": {
|
"style": {
|
||||||
@@ -441,11 +509,17 @@
|
|||||||
"text": "首页"
|
"text": "首页"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"pagePath": "pages/index/message",
|
"pagePath": "pages/index/message1",
|
||||||
"iconPath": "static/notice.png",
|
"iconPath": "static/notice.png",
|
||||||
"selectedIconPath": "static/notice2.png",
|
"selectedIconPath": "static/notice2.png",
|
||||||
"text": "消息"
|
"text": "消息"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"pagePath": "pages/index/report",
|
||||||
|
"iconPath": "static/reportIco.png",
|
||||||
|
"selectedIconPath": "static/reportIco1.png",
|
||||||
|
"text": "报表"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"pagePath": "pages/index/mine",
|
"pagePath": "pages/index/mine",
|
||||||
"iconPath": "static/mine.png",
|
"iconPath": "static/mine.png",
|
||||||
@@ -468,7 +542,8 @@
|
|||||||
"easycom": {
|
"easycom": {
|
||||||
"autoscan": true,
|
"autoscan": true,
|
||||||
"custom": {
|
"custom": {
|
||||||
"^rc-(.*)": "@/components/Cn-$1/Cn-$1.vue"
|
"^rc-(.*)": "@/components/Cn-$1/Cn-$1.vue",
|
||||||
|
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"condition": {
|
"condition": {
|
||||||
|
|||||||
@@ -24,7 +24,9 @@
|
|||||||
<!-- <view class="content-item-header-right-des">暂态类型:{{ item.showName }}</view> -->
|
<!-- <view class="content-item-header-right-des">暂态类型:{{ item.showName }}</view> -->
|
||||||
<!-- <view class="content-item-header-right-des">{{ item.subTitle }}</view> -->
|
<!-- <view class="content-item-header-right-des">{{ item.subTitle }}</view> -->
|
||||||
</view>
|
</view>
|
||||||
<view class="ml10" v-if="type === '0' || item.status != '1'">🔍</view>
|
<view class="ml10" v-if="type === '0' || item.status != '1'">
|
||||||
|
<uni-icons type="search" size="25" color="#376cf3"></uni-icons
|
||||||
|
></view>
|
||||||
</view>
|
</view>
|
||||||
<view class="content-item-footer">{{ item.subTitle }}</view>
|
<view class="content-item-footer">{{ item.subTitle }}</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -112,7 +114,7 @@ export default {
|
|||||||
this.store = this.DataSource('/cs-harmonic-boot/eventUser/queryEventpage')
|
this.store = this.DataSource('/cs-harmonic-boot/eventUser/queryEventpage')
|
||||||
this.store.params.type = this.type
|
this.store.params.type = this.type
|
||||||
this.store.params.deviceId = this.deviceId
|
this.store.params.deviceId = this.deviceId
|
||||||
this.store.params.startTime = this.$util.getThreeMonthsAgo()
|
this.store.params.startTime = this.$util.getBeforeDays()
|
||||||
this.store.params.endTime = this.$util.getToday()
|
this.store.params.endTime = this.$util.getToday()
|
||||||
this.store.loadedCallback = () => {
|
this.store.loadedCallback = () => {
|
||||||
this.store.data.forEach((item) => {
|
this.store.data.forEach((item) => {
|
||||||
|
|||||||
@@ -3,16 +3,9 @@
|
|||||||
<template slot="body">
|
<template slot="body">
|
||||||
<view class="device">
|
<view class="device">
|
||||||
<view class="nav" :style="{ top: navTabHeight + 'px' }">
|
<view class="nav" :style="{ top: navTabHeight + 'px' }">
|
||||||
<view
|
<view class="nav-menu" @click="selectEngineering"
|
||||||
class="nav-menu"
|
|
||||||
:class="{ 'nav-menu-active': select.engineeringName }"
|
|
||||||
@click="selectEngineering"
|
|
||||||
>{{ select.engineeringName || '全部工程' }}
|
>{{ select.engineeringName || '全部工程' }}
|
||||||
<uni-icons
|
<uni-icons type="bottom" size="14"></uni-icons>
|
||||||
type="bottom"
|
|
||||||
size="14"
|
|
||||||
:color="select.engineeringName ? '#376cf3' : '#666'"
|
|
||||||
></uni-icons>
|
|
||||||
</view>
|
</view>
|
||||||
<picker
|
<picker
|
||||||
@change="projectNameChange"
|
@change="projectNameChange"
|
||||||
@@ -22,30 +15,16 @@
|
|||||||
range-key="text"
|
range-key="text"
|
||||||
v-if="select.engineeringId"
|
v-if="select.engineeringId"
|
||||||
>
|
>
|
||||||
<view
|
<view class="nav-menu" @click="select.selectProject = true">
|
||||||
class="nav-menu"
|
|
||||||
:class="{ 'nav-menu-active': select.projectName }"
|
|
||||||
@click="select.selectProject = true"
|
|
||||||
>
|
|
||||||
{{
|
{{
|
||||||
select.projectName
|
select.projectName
|
||||||
? select.projectName.length > 6
|
? select.projectName.length > 6
|
||||||
? select.projectName.substring(0, 6) + '...'
|
? select.projectName.substring(0, 12) + '...'
|
||||||
: select.projectName
|
: select.projectName
|
||||||
: '全部项目'
|
: '全部项目'
|
||||||
}}
|
}}
|
||||||
<uni-icons
|
<uni-icons type="top" size="14" v-if="select.selectProject"></uni-icons>
|
||||||
type="top"
|
<uni-icons type="bottom" size="14" v-else></uni-icons>
|
||||||
size="14"
|
|
||||||
:color="select.projectName ? '#376cf3' : '#666'"
|
|
||||||
v-if="select.selectProject"
|
|
||||||
></uni-icons>
|
|
||||||
<uni-icons
|
|
||||||
type="bottom"
|
|
||||||
size="14"
|
|
||||||
:color="select.projectName ? '#376cf3' : '#666'"
|
|
||||||
v-else
|
|
||||||
></uni-icons>
|
|
||||||
</view>
|
</view>
|
||||||
</picker>
|
</picker>
|
||||||
<picker
|
<picker
|
||||||
@@ -55,41 +34,70 @@
|
|||||||
:range="projectType"
|
:range="projectType"
|
||||||
range-key="text"
|
range-key="text"
|
||||||
>
|
>
|
||||||
<view
|
<view class="nav-menu" @click="select.runStatusSelect = true">
|
||||||
class="nav-menu"
|
|
||||||
:class="{ 'nav-menu-active': select.runStatusName }"
|
|
||||||
@click="select.runStatusSelect = true"
|
|
||||||
>
|
|
||||||
{{
|
{{
|
||||||
select.runStatusName
|
select.runStatusName
|
||||||
? select.runStatusName.length > 4
|
? select.runStatusName.length > 12
|
||||||
? select.runStatusName.substring(0, 4) + '...'
|
? select.runStatusName.substring(0, 12) + '...'
|
||||||
: select.runStatusName
|
: select.runStatusName
|
||||||
: '全部状态'
|
: '全部状态'
|
||||||
}}
|
}}
|
||||||
<uni-icons
|
<uni-icons type="top" size="14" v-if="select.runStatusSelect"></uni-icons>
|
||||||
type="top"
|
<uni-icons type="bottom" size="14" v-else></uni-icons>
|
||||||
size="14"
|
|
||||||
:color="select.runStatusName ? '#376cf3' : '#666'"
|
|
||||||
v-if="select.runStatusSelect"
|
|
||||||
></uni-icons>
|
|
||||||
<uni-icons
|
|
||||||
type="bottom"
|
|
||||||
size="14"
|
|
||||||
:color="select.runStatusName ? '#376cf3' : '#666'"
|
|
||||||
v-else
|
|
||||||
></uni-icons>
|
|
||||||
</view>
|
</view>
|
||||||
</picker>
|
</picker>
|
||||||
<view style="flex: 1"></view>
|
|
||||||
<!-- <picker @change="runStatusChange" :value="select.projectTypeIndex" :range="projectType" range-key="text">
|
|
||||||
<view class="nav-menu" :class="{ 'nav-menu-active': select.projectType }"
|
|
||||||
>{{ select.projectType || '类型' }}
|
|
||||||
</view>
|
|
||||||
</picker> -->
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
<view class="nav" style="padding: 0 10px !important">
|
||||||
|
<view style="flex: 1"></view>
|
||||||
|
<template v-if="transfer || share">
|
||||||
|
<view class="nav-menu nav-menu-btn" @click="cancel">取消</view>
|
||||||
|
<view class="nav-menu nav-menu-btn" @click="submit">确定</view>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="store.data.length">
|
||||||
|
<view
|
||||||
|
class="nav-menu nav-menu-btn"
|
||||||
|
@click="selectDevice('transfer')"
|
||||||
|
v-if="
|
||||||
|
userInfo.authorities === 'app_vip_user' || userInfo.authorities === 'engineering_user'
|
||||||
|
"
|
||||||
|
>移交
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="nav-menu nav-menu-btn"
|
||||||
|
@click="selectDevice('share')"
|
||||||
|
v-if="userInfo.authorities === 'app_vip_user'"
|
||||||
|
>分享
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</view>
|
||||||
|
|
||||||
<view class="content device" :style="{ minHeight: minHeight }">
|
<view class="content device" :style="{ minHeight: minHeight }">
|
||||||
<Cn-device-card v-for="(item, index) in store.data" :device="item" :key="index"> </Cn-device-card>
|
<uni-swipe-action>
|
||||||
|
<uni-swipe-action-item
|
||||||
|
v-for="(item, index) in store.data"
|
||||||
|
:threshold="0"
|
||||||
|
:right-options="item.isTop == 0 ? options1 : options12"
|
||||||
|
@click="bindClick($event, item)"
|
||||||
|
>
|
||||||
|
<Cn-device-card :device="item" :key="index">
|
||||||
|
<template v-slot:title>
|
||||||
|
<!-- 卡片标题 -->
|
||||||
|
|
||||||
|
<switch
|
||||||
|
v-if="transfer || share"
|
||||||
|
:checked="checkList.indexOf(item.equipmentId) > -1"
|
||||||
|
style="transform: scale(0.8); position: relative; left: 20rpx"
|
||||||
|
@change="switchChange(item)"
|
||||||
|
/>
|
||||||
|
<view class="star-icon" v-else>
|
||||||
|
<!-- <uni-icons type="search" size="25" color="#376cf3"></uni-icons> -->
|
||||||
|
🔍
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</Cn-device-card>
|
||||||
|
</uni-swipe-action-item>
|
||||||
|
</uni-swipe-action>
|
||||||
<uni-load-more
|
<uni-load-more
|
||||||
v-if="store.status == 'loading' || (store.data && store.data.length > 0)"
|
v-if="store.status == 'loading' || (store.data && store.data.length > 0)"
|
||||||
:status="store.status"
|
:status="store.status"
|
||||||
@@ -104,7 +112,7 @@
|
|||||||
import { getProjectList } from '@/common/api/project'
|
import { getProjectList } from '@/common/api/project'
|
||||||
import { queryDictData } from '@/common/api/dictionary'
|
import { queryDictData } from '@/common/api/dictionary'
|
||||||
import list from '@/common/js/list'
|
import list from '@/common/js/list'
|
||||||
|
import { engineeringPinToTop } from '@/common/api/device'
|
||||||
export default {
|
export default {
|
||||||
mixins: [list],
|
mixins: [list],
|
||||||
data() {
|
data() {
|
||||||
@@ -123,6 +131,7 @@ export default {
|
|||||||
runStatusIndex: 0,
|
runStatusIndex: 0,
|
||||||
runStatusSelect: false,
|
runStatusSelect: false,
|
||||||
},
|
},
|
||||||
|
userInfo: {},
|
||||||
minHeight: 0,
|
minHeight: 0,
|
||||||
navTabHeight: 0,
|
navTabHeight: 0,
|
||||||
engineeringList: [],
|
engineeringList: [],
|
||||||
@@ -142,6 +151,22 @@ export default {
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
pageOptions: {},
|
pageOptions: {},
|
||||||
|
options1: [
|
||||||
|
{
|
||||||
|
text: '置顶',
|
||||||
|
style: {
|
||||||
|
backgroundColor: '#376cf3',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
options12: [
|
||||||
|
{
|
||||||
|
text: '取消',
|
||||||
|
style: {
|
||||||
|
backgroundColor: '#ccc',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
@@ -164,6 +189,9 @@ export default {
|
|||||||
)
|
)
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
created() {
|
||||||
|
this.userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
|
||||||
|
},
|
||||||
onLoad(options) {
|
onLoad(options) {
|
||||||
let engineering = uni.getStorageSync('engineering')
|
let engineering = uni.getStorageSync('engineering')
|
||||||
this.pageOptions = options
|
this.pageOptions = options
|
||||||
@@ -208,9 +236,26 @@ export default {
|
|||||||
this.select.engineeringId = engineering.id
|
this.select.engineeringId = engineering.id
|
||||||
this.select.engineeringName = engineering.name
|
this.select.engineeringName = engineering.name
|
||||||
this.select.projectNameIndex = 0
|
this.select.projectNameIndex = 0
|
||||||
|
this.select.projectName = ''
|
||||||
|
this.getProjectList()
|
||||||
}
|
}
|
||||||
|
this.store && this.store.reload()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
bindClick(e, item) {
|
||||||
|
engineeringPinToTop({
|
||||||
|
targetId: item.equipmentId,
|
||||||
|
targetType: 1,
|
||||||
|
userId: uni.getStorageSync(this.$cacheKey.userInfo).userIndex,
|
||||||
|
}).then((res) => {
|
||||||
|
if (res.code == 'A0000') {
|
||||||
|
this.$util.toast('操作成功!')
|
||||||
|
this.store.search()
|
||||||
|
} else {
|
||||||
|
this.$util.toast(res.message)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
selectEngineering() {
|
selectEngineering() {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: '/pages/home/selectEngineering?from=once',
|
url: '/pages/home/selectEngineering?from=once',
|
||||||
@@ -295,8 +340,30 @@ export default {
|
|||||||
}
|
}
|
||||||
this.store.reload()
|
this.store.reload()
|
||||||
},
|
},
|
||||||
|
|
||||||
getProjectList() {
|
getProjectList() {
|
||||||
this.projectList = uni.getStorageSync('projectList')
|
getProjectList({
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 9999,
|
||||||
|
engineeringId: this.select.engineeringId,
|
||||||
|
}).then((res) => {
|
||||||
|
console.log(res)
|
||||||
|
let arr = [
|
||||||
|
{
|
||||||
|
text: '全部项目',
|
||||||
|
value: '-1',
|
||||||
|
},
|
||||||
|
...res.data.records.map((item) => {
|
||||||
|
return {
|
||||||
|
text: item.name,
|
||||||
|
value: item.id,
|
||||||
|
...item,
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
]
|
||||||
|
this.projectList = arr
|
||||||
|
uni.setStorageSync('projectList', arr)
|
||||||
|
})
|
||||||
},
|
},
|
||||||
getEngineeringList() {
|
getEngineeringList() {
|
||||||
this.engineeringList = uni.getStorageSync('engineeringList')
|
this.engineeringList = uni.getStorageSync('engineeringList')
|
||||||
@@ -368,12 +435,37 @@ export default {
|
|||||||
this.navMenuActive = index
|
this.navMenuActive = index
|
||||||
},
|
},
|
||||||
jump(item) {
|
jump(item) {
|
||||||
console.log(12321,item);
|
console.log(12321, item)
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: '/pages/device/APF/detail?id=' + item.equipmentId + '&isPrimaryUser=' + item.isPrimaryUser + '&ndid=' + item.ndid,
|
url:
|
||||||
|
'/pages/device/APF/detail?id=' +
|
||||||
|
item.equipmentId +
|
||||||
|
'&isPrimaryUser=' +
|
||||||
|
item.isPrimaryUser +
|
||||||
|
'&ndid=' +
|
||||||
|
item.ndid,
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
selectDevice(type) {
|
||||||
|
if (this.store.data.findIndex((item) => item.isPrimaryUser === '1') === -1) {
|
||||||
|
this.$util.toast('没有可操作的设备')
|
||||||
|
} else {
|
||||||
|
this[type] = true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
switchChange(e) {
|
||||||
|
let index = this.checkList.indexOf(e.equipmentId)
|
||||||
|
if (index > -1) {
|
||||||
|
this.checkList.splice(index, 1)
|
||||||
|
} else {
|
||||||
|
this.checkList.push(e.equipmentId)
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss"></style>
|
<style lang="scss">
|
||||||
|
/deep/ .button-group--right {
|
||||||
|
padding: 0 0 20rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -23,9 +23,26 @@
|
|||||||
</button>
|
</button>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
<template v-else >
|
<template v-else>
|
||||||
<view class="content">
|
<view class="content">
|
||||||
<uni-forms>
|
<uni-forms>
|
||||||
|
<uni-forms-item label="工程">
|
||||||
|
<view style="display: flex; align-items: center">
|
||||||
|
<uni-data-select
|
||||||
|
v-model="formData.engineeringId"
|
||||||
|
:localdata="engineeringList"
|
||||||
|
@change="engineeringChang($event, true)"
|
||||||
|
:clear="false"
|
||||||
|
></uni-data-select>
|
||||||
|
<uni-icons
|
||||||
|
type="plusempty"
|
||||||
|
color="#007aff"
|
||||||
|
size="26"
|
||||||
|
class="ml20"
|
||||||
|
@click="createEngineering"
|
||||||
|
></uni-icons>
|
||||||
|
</view>
|
||||||
|
</uni-forms-item>
|
||||||
<uni-forms-item label="项目">
|
<uni-forms-item label="项目">
|
||||||
<view style="display: flex; align-items: center">
|
<view style="display: flex; align-items: center">
|
||||||
<uni-data-select
|
<uni-data-select
|
||||||
@@ -43,28 +60,7 @@
|
|||||||
></uni-icons>
|
></uni-icons>
|
||||||
</view>
|
</view>
|
||||||
</uni-forms-item>
|
</uni-forms-item>
|
||||||
<!-- <uni-forms-item label="型号">
|
|
||||||
<uni-data-select v-model="formData.type" :localdata="typeRange"
|
|
||||||
@change="typeChange(item)"></uni-data-select>
|
|
||||||
</uni-forms-item> -->
|
|
||||||
<!-- <uni-forms-item label="位置">-->
|
|
||||||
<!-- <view style="display: flex;">-->
|
|
||||||
<!-- <uni-easyinput-->
|
|
||||||
<!-- :clearable="false"-->
|
|
||||||
<!-- type="textarea"-->
|
|
||||||
<!-- autoHeight-->
|
|
||||||
<!-- v-model="formData.area"-->
|
|
||||||
<!-- placeholder="请输入位置信息"-->
|
|
||||||
<!-- />-->
|
|
||||||
<!-- <uni-icons-->
|
|
||||||
<!-- type="location"-->
|
|
||||||
<!-- color="#007aff"-->
|
|
||||||
<!-- size="26"-->
|
|
||||||
<!-- class="ml20"-->
|
|
||||||
<!-- @click="chooseLocation"-->
|
|
||||||
<!-- ></uni-icons>-->
|
|
||||||
<!-- </view>-->
|
|
||||||
<!-- </uni-forms-item>-->
|
|
||||||
<uni-forms-item label="拓扑图" v-if="formData.projectId">
|
<uni-forms-item label="拓扑图" v-if="formData.projectId">
|
||||||
<view style="display: flex">
|
<view style="display: flex">
|
||||||
<view style="flex: 1">
|
<view style="flex: 1">
|
||||||
@@ -82,7 +78,10 @@
|
|||||||
></uni-icons>
|
></uni-icons>
|
||||||
</view>
|
</view>
|
||||||
</uni-forms-item>
|
</uni-forms-item>
|
||||||
<uni-forms-item label="监测点" v-if="pointList.length && formData.topologyDiagramUrl">
|
<uni-forms-item
|
||||||
|
label="监测点"
|
||||||
|
v-if="pointList.length && formData.topologyDiagramUrl && formData.projectId"
|
||||||
|
>
|
||||||
<view
|
<view
|
||||||
class="point-item"
|
class="point-item"
|
||||||
v-for="(item2, index2) in pointList"
|
v-for="(item2, index2) in pointList"
|
||||||
@@ -97,10 +96,10 @@
|
|||||||
</uni-forms>
|
</uni-forms>
|
||||||
</view>
|
</view>
|
||||||
<image class="gplot-image" ref="gplot-image" :src="formData.topologyDiagramUrl" mode="widthFix" />
|
<image class="gplot-image" ref="gplot-image" :src="formData.topologyDiagramUrl" mode="widthFix" />
|
||||||
<view class="btn-wrap" >
|
<view class="btn-wrap">
|
||||||
<!-- <view class="btn-wrap-item" @click="add"> 添加监测点 </view> -->
|
<!-- <view class="btn-wrap-item" @click="add"> 添加监测点 </view> -->
|
||||||
<!-- <view class="btn-wrap-item" @click="submit" > 提交</view> -->
|
<!-- <view class="btn-wrap-item" @click="submit" > 提交</view> -->
|
||||||
<button class="btn-wrap-item" :loading="isLoading1" :disabled="isLoading1" @click="submit">
|
<button class="btn-wrap-item" :loading="isLoading1" :disabled="isLoading1" @click="submit">
|
||||||
{{ isLoading1 ? '提交中...' : '提交' }}
|
{{ isLoading1 ? '提交中...' : '提交' }}
|
||||||
</button>
|
</button>
|
||||||
</view>
|
</view>
|
||||||
@@ -172,7 +171,14 @@
|
|||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { registerDevice, getModel, addDevice, queryByTopoId } from '@/common/api/device.js'
|
import {
|
||||||
|
registerDevice,
|
||||||
|
getModel,
|
||||||
|
addDevice,
|
||||||
|
queryByTopoId,
|
||||||
|
queryEngineeringPage,
|
||||||
|
queryEquipmentByndid,
|
||||||
|
} from '@/common/api/device.js'
|
||||||
import { getProjectList, queryTopologyDiagramPage } from '@/common/api/project.js'
|
import { getProjectList, queryTopologyDiagramPage } from '@/common/api/project.js'
|
||||||
import ykAuthpup from '@/components/yk-authpup/yk-authpup'
|
import ykAuthpup from '@/components/yk-authpup/yk-authpup'
|
||||||
export default {
|
export default {
|
||||||
@@ -184,6 +190,7 @@ export default {
|
|||||||
loading: false,
|
loading: false,
|
||||||
type: 1,
|
type: 1,
|
||||||
formData: {
|
formData: {
|
||||||
|
engineeringId: '',
|
||||||
nDid: '',
|
nDid: '',
|
||||||
projectId: '',
|
projectId: '',
|
||||||
topologyDiagramUrl: '',
|
topologyDiagramUrl: '',
|
||||||
@@ -200,6 +207,7 @@ export default {
|
|||||||
isAdaptive: false, // 是否适应当前项目
|
isAdaptive: false, // 是否适应当前项目
|
||||||
dialogOpen: false,
|
dialogOpen: false,
|
||||||
options: {},
|
options: {},
|
||||||
|
engineeringList: [],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onBackPress() {
|
onBackPress() {
|
||||||
@@ -231,31 +239,89 @@ export default {
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
onShow() {
|
onShow() {
|
||||||
let engineering = uni.getStorageSync(this.$cacheKey.engineering)
|
this.getEngineering()
|
||||||
getProjectList({
|
if (this.formData.engineeringId) {
|
||||||
pageNum: 1,
|
this.engineeringChang(this.formData.engineeringId, false)
|
||||||
pageSize: 9999,
|
// this.queryTopologyDiagramPage()
|
||||||
engineeringId: engineering.id,
|
}
|
||||||
}).then((res) => {
|
// let engineering = uni.getStorageSync(this.$cacheKey.engineering)
|
||||||
console.log(res)
|
// getProjectList({
|
||||||
let arr = [
|
// pageNum: 1,
|
||||||
...res.data.records.map((item) => {
|
// pageSize: 9999,
|
||||||
return {
|
// engineeringId: engineering.id,
|
||||||
...item,
|
// }).then((res) => {
|
||||||
text: item.name,
|
// console.log(res)
|
||||||
value: item.id,
|
// let arr = [
|
||||||
}
|
// ...res.data.records.map((item) => {
|
||||||
}),
|
// return {
|
||||||
]
|
// ...item,
|
||||||
this.projectRange = arr
|
// text: item.name,
|
||||||
})
|
// value: item.id,
|
||||||
|
// }
|
||||||
|
// }),
|
||||||
|
// ]
|
||||||
|
// this.projectRange = arr
|
||||||
|
// })
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
getEngineering() {
|
||||||
|
queryEngineeringPage({ pageNum: 1, pageSize: 9999 }).then((res) => {
|
||||||
|
let arr = [
|
||||||
|
...res.data.records.map((item) => {
|
||||||
|
return {
|
||||||
|
...item,
|
||||||
|
text: item.name,
|
||||||
|
value: item.id,
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
]
|
||||||
|
this.engineeringList = arr
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
engineeringChang(e, key) {
|
||||||
|
if (e == '') {
|
||||||
|
return (this.projectRange = [])
|
||||||
|
}
|
||||||
|
if (key) {
|
||||||
|
this.formData.projectId = ''
|
||||||
|
}
|
||||||
|
uni.setStorageSync('engineering', this.engineeringList.filter((item) => item.id == e)[0])
|
||||||
|
|
||||||
|
getProjectList({
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 9999,
|
||||||
|
engineeringId: e,
|
||||||
|
}).then((res) => {
|
||||||
|
let arr = [
|
||||||
|
...res.data.records.map((item) => {
|
||||||
|
return {
|
||||||
|
...item,
|
||||||
|
text: item.name,
|
||||||
|
value: item.id,
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
]
|
||||||
|
this.projectRange = arr
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
createProject() {
|
createProject() {
|
||||||
|
if (this.formData.engineeringId == '') {
|
||||||
|
return uni.showToast({
|
||||||
|
title: '请选择工程',
|
||||||
|
icon: 'none',
|
||||||
|
})
|
||||||
|
}
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: '/pages/project/new?from=newDevice',
|
url: '/pages/project/new?from=newDevice',
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
createEngineering() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/engineering/new',
|
||||||
|
})
|
||||||
|
},
|
||||||
resize() {
|
resize() {
|
||||||
console.log(this.$refs['gplot-image'])
|
console.log(this.$refs['gplot-image'])
|
||||||
},
|
},
|
||||||
@@ -265,7 +331,7 @@ export default {
|
|||||||
this.pointList.forEach((item) => {
|
this.pointList.forEach((item) => {
|
||||||
console.log(item.position)
|
console.log(item.position)
|
||||||
this.imageList[this.activeGplot].csLineTopologyTemplateVOList.forEach((item3) => {
|
this.imageList[this.activeGplot].csLineTopologyTemplateVOList.forEach((item3) => {
|
||||||
console.log(item3.linePostion)
|
// console.log(item3.linePostion)
|
||||||
if (item3.linePostion === item.position) {
|
if (item3.linePostion === item.position) {
|
||||||
item.lat = item3.lat
|
item.lat = item3.lat
|
||||||
item.lng = item3.lng
|
item.lng = item3.lng
|
||||||
@@ -320,9 +386,8 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
changeAuth() {
|
changeAuth() {
|
||||||
|
|
||||||
uni.scanCode({
|
uni.scanCode({
|
||||||
onlyFromCamera:true,
|
onlyFromCamera: true,
|
||||||
success: (res) => {
|
success: (res) => {
|
||||||
console.log('条码类型:' + res.scanType)
|
console.log('条码类型:' + res.scanType)
|
||||||
console.log('条码内容:' + res.result)
|
console.log('条码内容:' + res.result)
|
||||||
@@ -353,7 +418,7 @@ export default {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
this.type = 2
|
this.type = 2
|
||||||
|
this.getNdin()
|
||||||
this.isLoading = false
|
this.isLoading = false
|
||||||
})
|
})
|
||||||
.catch(() => {
|
.catch(() => {
|
||||||
@@ -364,6 +429,25 @@ export default {
|
|||||||
this.isLoading = false
|
this.isLoading = false
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
// 默认回显工程项目
|
||||||
|
getNdin() {
|
||||||
|
queryEquipmentByndid({ ndid: this.formData.nDid }).then((res) => {
|
||||||
|
this.formData.engineeringId = res.data.associatedEngineering || ''
|
||||||
|
this.formData.projectId = res.data.associatedProject || ''
|
||||||
|
if (this.formData.engineeringId) {
|
||||||
|
this.engineeringChang(this.formData.engineeringId, false)
|
||||||
|
this.queryTopologyDiagramPage()
|
||||||
|
let flag = this.engineeringList.some((item) => item.id === this.formData.engineeringId)
|
||||||
|
if (!flag) {
|
||||||
|
this.engineeringList.unshift({
|
||||||
|
text: res.data.associatedEngineeringName,
|
||||||
|
value: res.data.associatedEngineering,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
// chooseLocation() {
|
// chooseLocation() {
|
||||||
// uni.chooseLocation({
|
// uni.chooseLocation({
|
||||||
// success: function (res) {
|
// success: function (res) {
|
||||||
@@ -461,17 +545,19 @@ export default {
|
|||||||
list: this.pointList,
|
list: this.pointList,
|
||||||
ndid: this.formData.nDid,
|
ndid: this.formData.nDid,
|
||||||
process: Number(this.options.type),
|
process: Number(this.options.type),
|
||||||
}).then((res) => {
|
|
||||||
console.log(res)
|
|
||||||
this.$util.toast('提交成功')
|
|
||||||
this.isLoading1 = false
|
|
||||||
setTimeout(() => {
|
|
||||||
this.type = 3
|
|
||||||
uni.navigateBack({ delta: 1 })
|
|
||||||
}, 1500)
|
|
||||||
}).catch(()=>{
|
|
||||||
this.isLoading1 = false
|
|
||||||
})
|
})
|
||||||
|
.then((res) => {
|
||||||
|
console.log(res)
|
||||||
|
this.$util.toast('提交成功')
|
||||||
|
this.isLoading1 = false
|
||||||
|
setTimeout(() => {
|
||||||
|
this.type = 3
|
||||||
|
uni.navigateBack({ delta: 1 })
|
||||||
|
}, 1500)
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
this.isLoading1 = false
|
||||||
|
})
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|||||||
1008
pages/device/realTime/index.vue
Normal file
@@ -27,7 +27,7 @@
|
|||||||
<view class="message">
|
<view class="message">
|
||||||
<uni-card
|
<uni-card
|
||||||
:title="item.name"
|
:title="item.name"
|
||||||
extra="🔍"
|
extra="🔍"
|
||||||
@click="jump(item)"
|
@click="jump(item)"
|
||||||
v-for="(item, index) in store.data"
|
v-for="(item, index) in store.data"
|
||||||
:style="{ marginTop: index === 0 ? '0' : '' }"
|
:style="{ marginTop: index === 0 ? '0' : '' }"
|
||||||
|
|||||||
@@ -2,11 +2,14 @@
|
|||||||
<Cn-page :loading="loading">
|
<Cn-page :loading="loading">
|
||||||
<view slot="body">
|
<view slot="body">
|
||||||
<view class="select-enineering">
|
<view class="select-enineering">
|
||||||
|
<view class="all" @click="all">全部工程</view>
|
||||||
<uni-indexed-list
|
<uni-indexed-list
|
||||||
|
:style="{ top: showAll ? '110rpx' : '0' }"
|
||||||
:options="engineeringListFilter"
|
:options="engineeringListFilter"
|
||||||
:showSelect="false"
|
:showSelect="false"
|
||||||
@click="confirm"
|
@click="confirm"
|
||||||
></uni-indexed-list>
|
>
|
||||||
|
</uni-indexed-list>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</Cn-page>
|
</Cn-page>
|
||||||
@@ -16,11 +19,13 @@ import { pinyin } from 'pinyin-pro'
|
|||||||
import { queryEngineering } from '@/common/api/engineering'
|
import { queryEngineering } from '@/common/api/engineering'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
props: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
loading: false,
|
loading: false,
|
||||||
engineeringList: [],
|
engineeringList: [],
|
||||||
options: {},
|
options: {},
|
||||||
|
showAll: true,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@@ -29,7 +34,7 @@ export default {
|
|||||||
this.engineeringList.forEach((item) => {
|
this.engineeringList.forEach((item) => {
|
||||||
let arr = pinyin(item.name[0], { toneType: 'none', type: 'array' })
|
let arr = pinyin(item.name[0], { toneType: 'none', type: 'array' })
|
||||||
let letter = arr[0][0].toUpperCase()
|
let letter = arr[0][0].toUpperCase()
|
||||||
console.log(letter)
|
// console.log(letter)
|
||||||
let index = result.findIndex((item) => item.letter === letter)
|
let index = result.findIndex((item) => item.letter === letter)
|
||||||
if (index === -1) {
|
if (index === -1) {
|
||||||
result.push({
|
result.push({
|
||||||
@@ -45,6 +50,7 @@ export default {
|
|||||||
},
|
},
|
||||||
onLoad(options) {
|
onLoad(options) {
|
||||||
this.options = options
|
this.options = options
|
||||||
|
this.showAll = this.options.showAll ? true : false
|
||||||
this.engineeringList = uni.getStorageSync('engineeringList')
|
this.engineeringList = uni.getStorageSync('engineeringList')
|
||||||
this.userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
|
this.userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
|
||||||
if (!(this.userInfo.authorities === 'app_vip_user' || this.userInfo.authorities === 'engineering_user')) {
|
if (!(this.userInfo.authorities === 'app_vip_user' || this.userInfo.authorities === 'engineering_user')) {
|
||||||
@@ -60,7 +66,18 @@ export default {
|
|||||||
},
|
},
|
||||||
onShow() {
|
onShow() {
|
||||||
queryEngineering().then((res) => {
|
queryEngineering().then((res) => {
|
||||||
this.engineeringList = res.data
|
this.engineeringList = res.data.sort((a, b) => {
|
||||||
|
const nameA = a.name
|
||||||
|
const nameB = b.name
|
||||||
|
|
||||||
|
const isANumber = /^\d/.test(nameA)
|
||||||
|
const isBNumber = /^\d/.test(nameB)
|
||||||
|
|
||||||
|
if (isANumber !== isBNumber) {
|
||||||
|
return isANumber ? 1 : -1
|
||||||
|
}
|
||||||
|
return nameA.localeCompare(nameB, 'zh', { sensitivity: 'accent' })
|
||||||
|
})
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
onNavigationBarButtonTap(e) {
|
onNavigationBarButtonTap(e) {
|
||||||
@@ -76,8 +93,27 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
all() {
|
||||||
|
uni.setStorageSync('onceSelectEngineering', {
|
||||||
|
createBy: '',
|
||||||
|
createTime: '',
|
||||||
|
updateBy: '',
|
||||||
|
updateTime: '',
|
||||||
|
id: '',
|
||||||
|
name: '',
|
||||||
|
userId: null,
|
||||||
|
province: '',
|
||||||
|
provinceName: '',
|
||||||
|
city: '',
|
||||||
|
cityName: '',
|
||||||
|
description: '',
|
||||||
|
status: '1',
|
||||||
|
})
|
||||||
|
uni.navigateBack()
|
||||||
|
},
|
||||||
confirm(e) {
|
confirm(e) {
|
||||||
console.log(e)
|
console.log(e)
|
||||||
|
|
||||||
let engineering = this.engineeringList.find((item) => item.name === e.item.name)
|
let engineering = this.engineeringList.find((item) => item.name === e.item.name)
|
||||||
if (this.options.from === 'once') {
|
if (this.options.from === 'once') {
|
||||||
// 创建项目的时候选择工程 用完即删
|
// 创建项目的时候选择工程 用完即删
|
||||||
@@ -94,4 +130,15 @@ export default {
|
|||||||
.index {
|
.index {
|
||||||
padding: 34rpx;
|
padding: 34rpx;
|
||||||
}
|
}
|
||||||
|
.all {
|
||||||
|
padding-left: 30rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
height: 50px;
|
||||||
|
border-bottom-style: solid;
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
border-bottom-color: #dedede;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
320
pages/index/comp/apply.vue
Normal file
@@ -0,0 +1,320 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="filterCriteria">
|
||||||
|
<!-- 筛选条件 -->
|
||||||
|
<Cn-filterCriteria @select="select" :singleChoice="true" :showDatetime="true"> </Cn-filterCriteria>
|
||||||
|
<view class="choose1">
|
||||||
|
<view>
|
||||||
|
<checkbox-group @change="changeBox"
|
||||||
|
><checkbox value="true" :checked="checkedAll" />全选
|
||||||
|
</checkbox-group></view
|
||||||
|
>
|
||||||
|
<view class="nav-menu nav-menu-btn" @click="selectDevice">申请报告 </view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="smallLabel mt20">
|
||||||
|
<view> 共 {{ store.total }} 条事件 | 已选择 {{ checkedTotal }} 条事件 </view>
|
||||||
|
<view style="width: 180rpx">
|
||||||
|
<picker @change="bindPickerChange" :value="sort" :range="array">
|
||||||
|
<view class="uni-input"
|
||||||
|
>{{ array[sort] }}排序
|
||||||
|
<uni-icons custom-prefix="iconfont" type="icon-paixu1" size="10" color="#2563EB"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</picker>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 卡片 -->
|
||||||
|
<scroll-view
|
||||||
|
scroll-y="true"
|
||||||
|
class="event-list"
|
||||||
|
:style="{ height: 'calc(100vh - ' + (navHeight + height) + 'px)', overflow: 'auto' }"
|
||||||
|
>
|
||||||
|
<!-- 循环渲染事件项 -->
|
||||||
|
<uni-card
|
||||||
|
class="event-item"
|
||||||
|
:class="judgment(item.showName).type"
|
||||||
|
v-for="(item, index) in store.data"
|
||||||
|
:key="index"
|
||||||
|
@click="clackCard(item)"
|
||||||
|
>
|
||||||
|
<!-- 头部:图标 + 信息 + 操作 -->
|
||||||
|
<view class="event-header">
|
||||||
|
<view class="event-icon">
|
||||||
|
<!-- 动态图标:根据类型切换 -->
|
||||||
|
<uni-icons
|
||||||
|
:custom-prefix="judgment(item.showName) == 'interrupt' ? 'custom-icon' : 'iconfont'"
|
||||||
|
:type="judgment(item.showName).icon"
|
||||||
|
:color="judgment(item.showName).color"
|
||||||
|
:size="judgment(item.showName).size"
|
||||||
|
></uni-icons>
|
||||||
|
</view>
|
||||||
|
<view class="event-info">
|
||||||
|
<view class="event-title">
|
||||||
|
<text class="event-id">{{ item.equipmentName }}</text>
|
||||||
|
<text class="event-tag" :class="`${judgment(item.showName).type}-tag`">{{
|
||||||
|
item.showName
|
||||||
|
}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="event-desc">
|
||||||
|
<text>工程名称:{{ item.engineeringName }}</text>
|
||||||
|
<text>项目名称:{{ item.projectName }}</text>
|
||||||
|
<text>监测点名称:{{ item.lineName }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="event-action">
|
||||||
|
<!-- 选择 -->
|
||||||
|
<checkbox-group @change="changeChild($event, item)"
|
||||||
|
><checkbox value="true" :checked="item.checked" />
|
||||||
|
</checkbox-group>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 详情区域 -->
|
||||||
|
<view class="event-detail">
|
||||||
|
<text>
|
||||||
|
发生时间:{{ item.startTime }},幅值:{{ item.evtParamVVaDepth }},持续时间:{{
|
||||||
|
item.evtParamTm
|
||||||
|
}},相别:{{ item.evtParamPhase }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</uni-card>
|
||||||
|
<uni-load-more
|
||||||
|
v-if="store.status == 'loading' || (store.data && store.data.length > 0)"
|
||||||
|
:status="store.status"
|
||||||
|
></uni-load-more>
|
||||||
|
<Cn-empty v-else style="top: 20%"></Cn-empty>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import list from '@/common/js/list'
|
||||||
|
import { applicationReport } from '@/common/api/report.js'
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
props: {
|
||||||
|
navHeight: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mixins: [list],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
selectValue: {},
|
||||||
|
height: 0,
|
||||||
|
checkedAll: false,
|
||||||
|
checkedTotal: 0,
|
||||||
|
sort: 0,
|
||||||
|
array: ['发生时间', '暂降深度', '持续时间'],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.setHeight()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
setHeight() {
|
||||||
|
uni.createSelectorQuery()
|
||||||
|
.select('.filterCriteria')
|
||||||
|
.boundingClientRect((rect) => {
|
||||||
|
//
|
||||||
|
// #ifdef H5
|
||||||
|
this.height = rect?.height + 100 || 0
|
||||||
|
// #endif
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
this.height = rect?.height + 90 || 0
|
||||||
|
// #endif
|
||||||
|
})
|
||||||
|
.exec()
|
||||||
|
},
|
||||||
|
async select(val) {
|
||||||
|
this.selectValue = val
|
||||||
|
await this.init()
|
||||||
|
this.setHeight()
|
||||||
|
},
|
||||||
|
init() {
|
||||||
|
this.store = this.DataSource('/cs-harmonic-boot/eventUser/queryEventpage')
|
||||||
|
this.store.params.type = 0
|
||||||
|
this.store.params.pageSize = 10000
|
||||||
|
this.store.params.sortField = this.sort
|
||||||
|
this.store.params.engineeringid = this.selectValue.engineeringId
|
||||||
|
this.store.params.projectId = this.selectValue.projectId
|
||||||
|
this.store.params.deviceId = this.selectValue.deviceId
|
||||||
|
this.store.params.lineId = this.selectValue.lineId
|
||||||
|
this.store.params.target = ['Evt_Sys_DipStr']
|
||||||
|
this.store.params.startTime = this.$util.getMonthFirstAndLastDay(this.selectValue.date).firstDay
|
||||||
|
this.store.params.endTime = this.$util.getMonthFirstAndLastDay(this.selectValue.date).lastDay
|
||||||
|
// this.store.params.startTime = this.selectValue.range[0]
|
||||||
|
// this.store.params.endTime = this.selectValue.range[1]
|
||||||
|
this.store.loadedCallback = () => {
|
||||||
|
this.checkedTotal = 0
|
||||||
|
this.store.data = this.store.data.map((item) => {
|
||||||
|
item.checked = false
|
||||||
|
return item
|
||||||
|
})
|
||||||
|
}
|
||||||
|
this.store.reload()
|
||||||
|
},
|
||||||
|
// 全选
|
||||||
|
changeBox(e) {
|
||||||
|
this.checkedAll = !this.checkedAll
|
||||||
|
if (e.target.value.length > 0) {
|
||||||
|
this.store.data = this.store.data.map((item) => {
|
||||||
|
item.checked = true
|
||||||
|
return item
|
||||||
|
})
|
||||||
|
this.checkedTotal = this.store.total
|
||||||
|
} else {
|
||||||
|
this.store.data = this.store.data.map((item) => {
|
||||||
|
item.checked = false
|
||||||
|
return item
|
||||||
|
})
|
||||||
|
this.checkedTotal = 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
changeChild(e, item) {
|
||||||
|
item.checked = !item.checked
|
||||||
|
this.checkedAll = this.store.data.every((item) => item.checked === true)
|
||||||
|
this.checkedTotal = this.store.data.filter((item) => item.checked === true).length
|
||||||
|
},
|
||||||
|
// 点击卡片
|
||||||
|
clackCard() {},
|
||||||
|
// 切换排序
|
||||||
|
bindPickerChange(e) {
|
||||||
|
this.sort = e.detail.value
|
||||||
|
this.init()
|
||||||
|
},
|
||||||
|
judgment(val, key) {
|
||||||
|
switch (val) {
|
||||||
|
case '电压暂降':
|
||||||
|
return {
|
||||||
|
type: 'sag',
|
||||||
|
icon: 'icon-a-svg4',
|
||||||
|
color: '#2563eb',
|
||||||
|
size: '25',
|
||||||
|
}
|
||||||
|
case '电压暂升':
|
||||||
|
return {
|
||||||
|
type: 'swell',
|
||||||
|
icon: 'icon-a-svg5',
|
||||||
|
color: '#e6a23c',
|
||||||
|
size: '25',
|
||||||
|
}
|
||||||
|
case '电压中断':
|
||||||
|
return {
|
||||||
|
type: 'interrupt',
|
||||||
|
icon: 'icon-zhongduan2',
|
||||||
|
color: '#6b7280',
|
||||||
|
size: '35',
|
||||||
|
}
|
||||||
|
case '瞬态':
|
||||||
|
return {
|
||||||
|
type: 'transient',
|
||||||
|
icon: 'icon-shuntaishijian',
|
||||||
|
color: '#8b5cf6',
|
||||||
|
size: '40',
|
||||||
|
}
|
||||||
|
case '未知':
|
||||||
|
return {
|
||||||
|
type: 'unknown',
|
||||||
|
icon: 'icon-wenhao',
|
||||||
|
color: '#6b7280',
|
||||||
|
size: '45',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 申请
|
||||||
|
selectDevice() {
|
||||||
|
if (this.checkedTotal == 0) {
|
||||||
|
return uni.showToast({
|
||||||
|
title: '请选择事件!',
|
||||||
|
icon: 'none',
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
uni.showLoading({
|
||||||
|
title: '申请中,请稍等...',
|
||||||
|
mask: true,
|
||||||
|
})
|
||||||
|
|
||||||
|
let list = this.store.data.filter((item) => item.checked === true)
|
||||||
|
applicationReport({
|
||||||
|
list: list.map((item) => item.id),
|
||||||
|
lineId: list[0].lineId,
|
||||||
|
startTime: this.$util.getMonthFirstAndLastDay(this.selectValue.date).firstDay,
|
||||||
|
endTime: this.$util.getMonthFirstAndLastDay(this.selectValue.date).lastDay,
|
||||||
|
}).then((res) => {
|
||||||
|
this.store.reload()
|
||||||
|
uni.showToast({
|
||||||
|
icon: 'success',
|
||||||
|
mask: true,
|
||||||
|
title: '申请暂态报告,成功!',
|
||||||
|
duration: 1000,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
isAllLineIdSame(data) {
|
||||||
|
// 获取第一个元素的lineId作为基准
|
||||||
|
const baseLineId = data[0].lineId
|
||||||
|
|
||||||
|
// 遍历数组,检查每个元素的lineId是否和基准一致
|
||||||
|
for (let item of data) {
|
||||||
|
// 兼容元素可能没有lineId的情况
|
||||||
|
if (!item || item.lineId !== baseLineId) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return true
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import '@/pages/message1/index.scss';
|
||||||
|
.filterCriteria {
|
||||||
|
.nav {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
.choose1 {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
/deep/ .uni-checkbox-input {
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
}
|
||||||
|
font-size: 26rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nav-menu {
|
||||||
|
height: 40rpx;
|
||||||
|
padding: 6rpx 20rpx;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
line-height: 40rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
background: #ebeaec;
|
||||||
|
color: #666;
|
||||||
|
&-active {
|
||||||
|
background: #dfe5f7;
|
||||||
|
color: $uni-theme-color;
|
||||||
|
}
|
||||||
|
&-btn {
|
||||||
|
background: $uni-theme-color;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/deep/.uni-card__content {
|
||||||
|
padding: 20rpx !important;
|
||||||
|
}
|
||||||
|
.smallLabel {
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 24rpx !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -60,37 +60,31 @@
|
|||||||
</picker> -->
|
</picker> -->
|
||||||
</view>
|
</view>
|
||||||
<view class="content device" :style="{ minHeight: minHeight }">
|
<view class="content device" :style="{ minHeight: minHeight }">
|
||||||
<Cn-device-card v-for="(item, index) in deviceListFilter" :device="item" :key="index">
|
<uni-swipe-action>
|
||||||
<template v-slot:title v-if="transfer || share">
|
<uni-swipe-action-item
|
||||||
<!-- 卡片标题 -->
|
v-for="(item, index) in deviceListFilter"
|
||||||
<view class="uni-card__header">
|
:threshold="0"
|
||||||
<view class="uni-card__header-box">
|
:right-options="item.isTop == 0 ? options1 : options12"
|
||||||
<view class="uni-card__header-avatar">
|
@click="bindClick($event, item)"
|
||||||
<image
|
>
|
||||||
class="uni-card__header-avatar-image"
|
<Cn-device-card :device="item" :key="index">
|
||||||
:src="deviceIcon(item.runStatus)"
|
<template v-slot:title>
|
||||||
mode="aspectFit"
|
<!-- 卡片标题 -->
|
||||||
/>
|
|
||||||
</view>
|
|
||||||
<view class="uni-card__header-content">
|
|
||||||
<text class="uni-card__header-content-title uni-ellipsis">
|
|
||||||
{{ item.equipmentName }}
|
|
||||||
</text>
|
|
||||||
<text class="uni-card__header-content-subtitle uni-ellipsis">
|
|
||||||
{{ item.mac }}
|
|
||||||
</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="uni-card__header-extra" style="position: relative">
|
|
||||||
<switch
|
<switch
|
||||||
|
v-if="transfer || share"
|
||||||
:checked="checkList.indexOf(item.equipmentId) > -1"
|
:checked="checkList.indexOf(item.equipmentId) > -1"
|
||||||
style="transform: scale(0.8); position: relative; left: 20rpx"
|
style="transform: scale(0.8); position: relative; left: 20rpx"
|
||||||
@change="switchChange(item)"
|
@change="switchChange(item)"
|
||||||
/>
|
/>
|
||||||
</view>
|
<view class="star-icon" v-else>
|
||||||
</view>
|
<!-- <uni-icons type="search" size="25" color="#376cf3"></uni-icons> -->
|
||||||
</template>
|
🔍
|
||||||
</Cn-device-card>
|
</view>
|
||||||
|
</template>
|
||||||
|
</Cn-device-card>
|
||||||
|
</uni-swipe-action-item>
|
||||||
|
</uni-swipe-action>
|
||||||
<uni-load-more
|
<uni-load-more
|
||||||
v-if="store.status == 'loading' || deviceListFilter.length > 0"
|
v-if="store.status == 'loading' || deviceListFilter.length > 0"
|
||||||
:status="store.status"
|
:status="store.status"
|
||||||
@@ -102,7 +96,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import { getProjectList } from '@/common/api/project'
|
import { getProjectList } from '@/common/api/project'
|
||||||
import { queryDictData } from '@/common/api/dictionary'
|
import { queryDictData } from '@/common/api/dictionary'
|
||||||
|
import { engineeringPinToTop } from '@/common/api/device'
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
store: {
|
store: {
|
||||||
@@ -129,11 +123,26 @@ export default {
|
|||||||
projectType: [],
|
projectType: [],
|
||||||
userInfo: {},
|
userInfo: {},
|
||||||
selectProject: false,
|
selectProject: false,
|
||||||
|
options1: [
|
||||||
|
{
|
||||||
|
text: '置顶',
|
||||||
|
style: {
|
||||||
|
backgroundColor: '#376cf3',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
options12: [
|
||||||
|
{
|
||||||
|
text: '取消',
|
||||||
|
style: {
|
||||||
|
backgroundColor: '#ccc',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
deviceListFilter() {
|
deviceListFilter() {
|
||||||
|
|
||||||
let arr = this.store.data.filter((item) => {
|
let arr = this.store.data.filter((item) => {
|
||||||
if (this.select.projectName && this.select.projectType) {
|
if (this.select.projectName && this.select.projectType) {
|
||||||
return item.project === this.select.projectName && item.type === this.select.projectType
|
return item.project === this.select.projectName && item.type === this.select.projectType
|
||||||
@@ -147,7 +156,6 @@ export default {
|
|||||||
})
|
})
|
||||||
|
|
||||||
if (this.transfer || this.share) {
|
if (this.transfer || this.share) {
|
||||||
|
|
||||||
return arr.filter((item) => {
|
return arr.filter((item) => {
|
||||||
return item.isPrimaryUser === '1' //&& item.process == 4
|
return item.isPrimaryUser === '1' //&& item.process == 4
|
||||||
})
|
})
|
||||||
@@ -161,6 +169,21 @@ export default {
|
|||||||
},
|
},
|
||||||
mounted() {},
|
mounted() {},
|
||||||
methods: {
|
methods: {
|
||||||
|
bindClick(e, item) {
|
||||||
|
engineeringPinToTop({
|
||||||
|
targetId: item.equipmentId,
|
||||||
|
targetType: 1,
|
||||||
|
userId: uni.getStorageSync(this.$cacheKey.userInfo).userIndex,
|
||||||
|
}).then((res) => {
|
||||||
|
if (res.code == 'A0000') {
|
||||||
|
this.$util.toast('操作成功!')
|
||||||
|
this.store.search()
|
||||||
|
} else {
|
||||||
|
this.$util.toast(res.message)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
selectDevice(type) {
|
selectDevice(type) {
|
||||||
if (this.deviceListFilter.findIndex((item) => item.isPrimaryUser === '1') === -1) {
|
if (this.deviceListFilter.findIndex((item) => item.isPrimaryUser === '1') === -1) {
|
||||||
this.$util.toast('没有可操作的设备')
|
this.$util.toast('没有可操作的设备')
|
||||||
@@ -184,7 +207,6 @@ export default {
|
|||||||
return str
|
return str
|
||||||
},
|
},
|
||||||
switchChange(e) {
|
switchChange(e) {
|
||||||
console.log(e)
|
|
||||||
let index = this.checkList.indexOf(e.equipmentId)
|
let index = this.checkList.indexOf(e.equipmentId)
|
||||||
if (index > -1) {
|
if (index > -1) {
|
||||||
this.checkList.splice(index, 1)
|
this.checkList.splice(index, 1)
|
||||||
@@ -333,18 +355,28 @@ export default {
|
|||||||
this.navMenuActive = index
|
this.navMenuActive = index
|
||||||
},
|
},
|
||||||
jump(item) {
|
jump(item) {
|
||||||
|
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: '/pages/device/APF/detail?id=' + item.equipmentId + '&isPrimaryUser=' + item.isPrimaryUser+ '&ndid=' + item.ndid,
|
url:
|
||||||
|
'/pages/device/APF/detail?id=' +
|
||||||
|
item.equipmentId +
|
||||||
|
'&isPrimaryUser=' +
|
||||||
|
item.isPrimaryUser +
|
||||||
|
'&ndid=' +
|
||||||
|
item.ndid,
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.index-device{
|
.index-device {
|
||||||
.nav-menu {
|
.nav-menu {
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
/deep/ .button-group--right {
|
||||||
|
padding: 0 0 20rpx;
|
||||||
|
}
|
||||||
|
.star-icon {
|
||||||
|
font-size: 40rpx;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
277
pages/index/comp/engineering.vue
Normal file
@@ -0,0 +1,277 @@
|
|||||||
|
<template>
|
||||||
|
<view class="index-device">
|
||||||
|
<view class="nav" :style="{ top: navTabHeight + 'px' }"> </view>
|
||||||
|
<view class="content device project-list" :style="{ minHeight: minHeight }">
|
||||||
|
<uni-swipe-action>
|
||||||
|
<uni-swipe-action-item
|
||||||
|
v-for="(item, index) in store.data"
|
||||||
|
:threshold="0"
|
||||||
|
:right-options="item.isTop == 0 ? options1 : options12"
|
||||||
|
@click="bindClick($event, item)"
|
||||||
|
>
|
||||||
|
<uni-card :key="index">
|
||||||
|
<view class="card-header">
|
||||||
|
<view class="project-icon">
|
||||||
|
<uni-icons
|
||||||
|
custom-prefix="iconfont"
|
||||||
|
type="icon-gongcheng"
|
||||||
|
color="#2563eb"
|
||||||
|
size="45"
|
||||||
|
></uni-icons>
|
||||||
|
</view>
|
||||||
|
<view class="project-info">
|
||||||
|
<view class="project-name">{{ item.engineeringName }}</view>
|
||||||
|
<view class="project-stats">
|
||||||
|
<view class="stat-item" @click="jump('nowEngineering', item)">
|
||||||
|
<text class="stat-value blue">{{ item.devTotal }}</text>
|
||||||
|
<text class="stat-label">设备总数</text>
|
||||||
|
</view>
|
||||||
|
<view class="stat-item" @click="jump('currentOnLineDevs', item)">
|
||||||
|
<text class="stat-value green">{{ item.onlineDevTotal }}</text>
|
||||||
|
<text class="stat-label">在线设备</text>
|
||||||
|
</view>
|
||||||
|
<view class="stat-item" @click="jump('currentOffLineDevs', item)">
|
||||||
|
<text class="stat-value red">{{ item.offlineDevTotal }}</text>
|
||||||
|
<text class="stat-label">离线设备</text>
|
||||||
|
</view>
|
||||||
|
<view class="stat-item" @click="jump('event', item)">
|
||||||
|
<text class="stat-value red">{{ item.alarmTotal }}</text>
|
||||||
|
<text class="stat-label">告警数量</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="pinToTop" v-if="item.isTop == 1"> 置顶 </view>
|
||||||
|
</uni-card>
|
||||||
|
</uni-swipe-action-item>
|
||||||
|
</uni-swipe-action>
|
||||||
|
<uni-load-more
|
||||||
|
v-if="store.status == 'loading' || deviceListFilter.length > 0"
|
||||||
|
:status="store.status"
|
||||||
|
></uni-load-more>
|
||||||
|
<Cn-empty v-else></Cn-empty>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { engineeringPinToTop } from '@/common/api/device'
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
store: {
|
||||||
|
type: Object,
|
||||||
|
default: {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading: false,
|
||||||
|
minHeight: 0,
|
||||||
|
navTabHeight: 0,
|
||||||
|
userInfo: {},
|
||||||
|
options1: [
|
||||||
|
{
|
||||||
|
text: '置顶',
|
||||||
|
style: {
|
||||||
|
backgroundColor: '#376cf3',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
options12: [
|
||||||
|
{
|
||||||
|
text: '取消',
|
||||||
|
style: {
|
||||||
|
backgroundColor: '#ccc',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
deviceListFilter() {
|
||||||
|
let arr = this.store.data
|
||||||
|
|
||||||
|
return arr
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
console.log(12333, this.store)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
bindClick(e, item) {
|
||||||
|
engineeringPinToTop({
|
||||||
|
targetId: item.engineeringId,
|
||||||
|
targetType: 2,
|
||||||
|
userId: uni.getStorageSync(this.$cacheKey.userInfo).userIndex,
|
||||||
|
}).then((res) => {
|
||||||
|
if (res.code == 'A0000') {
|
||||||
|
this.$util.toast('操作成功!')
|
||||||
|
this.store.search()
|
||||||
|
} else {
|
||||||
|
this.$util.toast(res.message)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
getDeviceList() {
|
||||||
|
this.store.params.pageSize = 50
|
||||||
|
this.store.firstCallBack = (res) => {
|
||||||
|
uni.createSelectorQuery()
|
||||||
|
.select('.uni-navbar')
|
||||||
|
.boundingClientRect((rect1) => {
|
||||||
|
if (!rect1) return
|
||||||
|
this.navTabHeight = rect1.height
|
||||||
|
uni.createSelectorQuery()
|
||||||
|
.select('.nav')
|
||||||
|
.boundingClientRect((rect2) => {
|
||||||
|
if (!rect2) return
|
||||||
|
// #ifdef H5
|
||||||
|
this.minHeight = 'calc(100vh - ' + (this.navTabHeight + rect2.height + 50) + 'px)'
|
||||||
|
// #endif
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
this.minHeight = 'calc(100vh - ' + (this.navTabHeight + rect2.height) + 'px)'
|
||||||
|
console.log(this.minHeight)
|
||||||
|
// #endif
|
||||||
|
})
|
||||||
|
.exec()
|
||||||
|
})
|
||||||
|
.exec()
|
||||||
|
}
|
||||||
|
this.store.reload()
|
||||||
|
},
|
||||||
|
async init() {
|
||||||
|
console.warn('init')
|
||||||
|
this.getDeviceList()
|
||||||
|
},
|
||||||
|
|
||||||
|
jump(type, item) {
|
||||||
|
if (type == 'event') {
|
||||||
|
// 存储参数
|
||||||
|
uni.setStorageSync('messageParams', {
|
||||||
|
name: item.engineeringName,
|
||||||
|
id: item.engineeringId,
|
||||||
|
type: '',
|
||||||
|
})
|
||||||
|
uni.switchTab({
|
||||||
|
url: '/pages/index/message1',
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
uni.setStorageSync('engineering', { name: item.engineeringName, id: item.engineeringId })
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/device/list?type=' + type,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.index-device {
|
||||||
|
/* 列表容器 */
|
||||||
|
|
||||||
|
// .project-card {
|
||||||
|
// background-color: #ffffff;
|
||||||
|
// border-radius: 16rpx;
|
||||||
|
// margin-bottom: 16rpx;
|
||||||
|
// padding: 24rpx;
|
||||||
|
// box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
|
||||||
|
// }
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-icon {
|
||||||
|
width: 110rpx;
|
||||||
|
height: 110rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
background-color: #2563eb20;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-info {
|
||||||
|
flex: 1;
|
||||||
|
line-height: 36rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-name {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #333333;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-stats {
|
||||||
|
display: flex;
|
||||||
|
// justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
flex: 1;
|
||||||
|
border-right: 2rpx solid #ccc;
|
||||||
|
&:last-child {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-value {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue {
|
||||||
|
color: #007aff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.green {
|
||||||
|
color: #34c759;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red {
|
||||||
|
color: #ff3b30;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-star {
|
||||||
|
color: #cccccc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/deep/ .uni-card {
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
/deep/ .button-group--right {
|
||||||
|
padding: 0 0 20rpx;
|
||||||
|
}
|
||||||
|
.pinToTop {
|
||||||
|
background-color: $uni-theme-color;
|
||||||
|
width: 100rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 20rpx;
|
||||||
|
position: absolute;
|
||||||
|
top: 0rpx;
|
||||||
|
right: 0rpx;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
|
||||||
|
/* 核心:旋转成斜三角效果 */
|
||||||
|
transform: rotate(45deg) translate(50rpx, -10rpx);
|
||||||
|
transform-origin: top right;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,24 +1,36 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="index-zhuyonghu">
|
<view class="index-zhuyonghu">
|
||||||
<template v-if="devCount.engineeringListLength > 1">
|
<template v-if="devCount.engineeringListLength > 0">
|
||||||
<view class="canneng-index-title mb20">所有工程设备统计</view>
|
<view class="canneng-index-title mb20">所有工程设备统计</view>
|
||||||
<view class="header">
|
<view class="header">
|
||||||
<view class="header-item" @click="jump('allEngineering')">
|
<view class="header-item" @click="jump('allEngineering')">
|
||||||
<view class="header-item-value">{{ devCount.onLineDevCount + devCount.offLineDevCount || 0 }}</view>
|
<view class="header-item-value">{{ devCount.onLineDevCount + devCount.offLineDevCount || 0 }}</view>
|
||||||
<view class="header-item-label">设备总数</view>
|
<view class="header-item-label">设备总数</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="header-item" @click="jump('onLineDevs')">
|
<view class="header-item" @click="jump('onLineDevs')">
|
||||||
<view class="header-item-value">{{ devCount.onLineDevCount || 0 }}</view>
|
<view class="header-item-value">{{ devCount.onLineDevCount || 0 }}</view>
|
||||||
<view class="header-item-label">在线设备</view>
|
<view class="header-item-label">在线设备</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="header-item" @click="jump('offLineDevs')">
|
<view class="header-item" @click="jump('offLineDevs')">
|
||||||
<view class="header-item-value">{{ devCount.offLineDevCount || 0 }}</view>
|
<view class="header-item-value">{{ devCount.offLineDevCount || 0 }}</view>
|
||||||
<view class="header-item-label">离线设备</view>
|
<view class="header-item-label">离线设备</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
<view class="header-item" @click="jumpMessage(0)">
|
||||||
<view class="mt20"></view>
|
<view class="header-item-value">{{ devCount.eventCount || 0 }}</view>
|
||||||
</template>
|
<view class="header-item-label">暂态事件数</view>
|
||||||
<view class="canneng-index-title mb20">当前工程设备统计</view>
|
</view>
|
||||||
|
<view class="header-item" @click="jumpMessage(1)">
|
||||||
|
<view class="header-item-value">{{ devCount.harmonicCount || 0 }}</view>
|
||||||
|
<view class="header-item-label">稳态事件数</view>
|
||||||
|
</view>
|
||||||
|
<view class="header-item" @click="eningerNum">
|
||||||
|
<view class="header-item-value">{{ devCount.eningerCount || 0 }}</view>
|
||||||
|
<view class="header-item-label">工程个数</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- <view class="mt20"></view> -->
|
||||||
|
</template>
|
||||||
|
<!-- <view class="canneng-index-title mb20">当前工程设备统计</view>
|
||||||
<view class="header">
|
<view class="header">
|
||||||
<view class="header-item" @click="jump('nowEngineering')">
|
<view class="header-item" @click="jump('nowEngineering')">
|
||||||
<view class="header-item-value"
|
<view class="header-item-value"
|
||||||
@@ -34,135 +46,152 @@
|
|||||||
<view class="header-item-value">{{ devCount.currentOffLineDevCount || 0 }}</view>
|
<view class="header-item-value">{{ devCount.currentOffLineDevCount || 0 }}</view>
|
||||||
<view class="header-item-label">离线设备</view>
|
<view class="header-item-label">离线设备</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view> -->
|
||||||
<view class="canneng-index-title mt20">常用功能</view>
|
<view class="canneng-index-title mt20">常用功能</view>
|
||||||
<view style="padding: 20rpx 20rpx 0">
|
<view style="padding: 20rpx 20rpx 0">
|
||||||
<Cn-grid title="" :auto-fill="false">
|
<Cn-grid title="" :auto-fill="false">
|
||||||
<Cn-grid-item src="/static/device2.png" text="设备注册" @click="registerDevice(4)"></Cn-grid-item>
|
<Cn-grid-item src="/static/device2.png" text="设备注册" @click="registerDevice(4)"></Cn-grid-item>
|
||||||
<Cn-grid-item
|
<!-- <Cn-grid-item
|
||||||
src="/static/device2.png"
|
src="/static/device2.png"
|
||||||
text="功能调试"
|
text="功能调试"
|
||||||
@click="registerDevice(2)"
|
@click="registerDevice(2)"
|
||||||
v-if="config.feature"
|
v-if="config.feature"
|
||||||
></Cn-grid-item>
|
></Cn-grid-item>
|
||||||
<Cn-grid-item
|
<Cn-grid-item
|
||||||
src="/static/device2.png"
|
src="/static/device2.png"
|
||||||
text="出厂调试"
|
text="出厂调试"
|
||||||
@click="registerDevice(3)"
|
@click="registerDevice(3)"
|
||||||
v-if="config.factory"
|
v-if="config.factory"
|
||||||
></Cn-grid-item>
|
></Cn-grid-item> -->
|
||||||
<Cn-grid-item background="#fff" v-if="!config.feature"></Cn-grid-item>
|
<!-- <Cn-grid-item background="#fff" v-if="!config.feature"></Cn-grid-item>
|
||||||
<Cn-grid-item background="#fff" v-if="!config.factory"></Cn-grid-item>
|
<Cn-grid-item background="#fff" v-if="!config.factory"></Cn-grid-item> -->
|
||||||
<Cn-grid-item background="#fff"></Cn-grid-item>
|
<Cn-grid-item background="#fff"></Cn-grid-item>
|
||||||
<!-- <Cn-grid-item src="/static/gateway2.png" text="网关注册" @click="registerGateway"></Cn-grid-item> -->
|
<Cn-grid-item background="#fff"></Cn-grid-item>
|
||||||
<!-- <Cn-grid-item src="/static/feedback2.png" text="问题反馈" @click="submitFeedBack"></Cn-grid-item>-->
|
<Cn-grid-item background="#fff"></Cn-grid-item>
|
||||||
</Cn-grid>
|
<!-- <Cn-grid-item src="/static/gateway2.png" text="网关注册" @click="registerGateway"></Cn-grid-item> -->
|
||||||
</view>
|
<!-- <Cn-grid-item src="/static/feedback2.png" text="问题反馈" @click="submitFeedBack"></Cn-grid-item>-->
|
||||||
<uni-popup ref="popup" type="dialog" @maskClick="maskClick">
|
</Cn-grid>
|
||||||
<uni-popup-dialog
|
</view>
|
||||||
mode="base"
|
<uni-popup ref="popup" type="dialog" @maskClick="maskClick">
|
||||||
type="info"
|
<uni-popup-dialog
|
||||||
content="请选择设备类型"
|
mode="base"
|
||||||
:duration="0"
|
type="info"
|
||||||
confirmText="直连设备"
|
content="请选择设备类型"
|
||||||
cancelText="网关接入"
|
:duration="0"
|
||||||
cancelColor="#007aff"
|
confirmText="直连设备"
|
||||||
@close="close"
|
cancelText="网关接入"
|
||||||
@confirm="confirm"
|
cancelColor="#007aff"
|
||||||
></uni-popup-dialog>
|
@close="close"
|
||||||
</uni-popup>
|
@confirm="confirm"
|
||||||
</view>
|
></uni-popup-dialog>
|
||||||
|
</uni-popup>
|
||||||
|
</view>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
loading: true,
|
loading: true,
|
||||||
config: {
|
config: {
|
||||||
feature: true,
|
feature: true,
|
||||||
factory: true,
|
factory: true,
|
||||||
},
|
},
|
||||||
type: 0,
|
type: 0,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
devCount: {
|
devCount: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: {},
|
default: {},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.init()
|
this.init()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
init() {
|
init() {
|
||||||
console.log('工程init')
|
console.log('工程init')
|
||||||
let serverConfig = uni.getStorageSync(this.$cacheKey.serverConfig)
|
let serverConfig = uni.getStorageSync(this.$cacheKey.serverConfig)
|
||||||
serverConfig && (this.config = serverConfig)
|
serverConfig && (this.config = serverConfig)
|
||||||
},
|
},
|
||||||
submitFeedBack() {
|
submitFeedBack() {
|
||||||
uni.navigateTo({ url: '/pages/home/feedback' })
|
uni.navigateTo({ url: '/pages/home/feedback' })
|
||||||
},
|
},
|
||||||
registerDevice(type) {
|
registerDevice(type) {
|
||||||
this.type = type
|
this.type = type
|
||||||
this.$refs.popup.open()
|
this.$refs.popup.open()
|
||||||
// uni.showModal({
|
// uni.showModal({
|
||||||
// title: '提示',
|
// title: '提示',
|
||||||
// content: '请选择设备类型',
|
// content: '请选择设备类型',
|
||||||
// confirmText: '直连设备',
|
// confirmText: '直连设备',
|
||||||
// cancelText: '网关接入',
|
// cancelText: '网关接入',
|
||||||
// cancelColor: '#007aff',
|
// cancelColor: '#007aff',
|
||||||
// success: ({ confirm, cancel }) => {
|
// success: ({ confirm, cancel }) => {
|
||||||
// if (confirm) {
|
// if (confirm) {
|
||||||
// if (this.devCount.engineeringListLength > 0) {
|
// if (this.devCount.engineeringListLength > 0) {
|
||||||
// uni.navigateTo({
|
// uni.navigateTo({
|
||||||
// url: '/pages/device/new?type=' + type,
|
// url: '/pages/device/new?type=' + type,
|
||||||
// })
|
// })
|
||||||
// } else {
|
// } else {
|
||||||
// uni.navigateTo({
|
// uni.navigateTo({
|
||||||
// url: '/pages/engineering/new?from=index&type=' + type,
|
// url: '/pages/engineering/new?from=index&type=' + type,
|
||||||
// })
|
// })
|
||||||
// }
|
// }
|
||||||
// } else if (cancel) {
|
// } else if (cancel) {
|
||||||
// // uni.navigateTo({
|
// // uni.navigateTo({
|
||||||
// // url: '/pages/gateway/list',
|
// // url: '/pages/gateway/list',
|
||||||
// // })
|
// // })
|
||||||
// this.$util.toast('功能正在开发,敬请期待')
|
// this.$util.toast('功能正在开发,敬请期待')
|
||||||
// }
|
// }
|
||||||
// },
|
// },
|
||||||
// })
|
// })
|
||||||
},
|
},
|
||||||
maskClick() {
|
maskClick() {
|
||||||
this.$refs.popup.close()
|
this.$refs.popup.close()
|
||||||
},
|
},
|
||||||
close() {
|
close() {
|
||||||
this.$util.toast('功能正在开发,敬请期待')
|
this.$util.toast('功能正在开发,敬请期待')
|
||||||
this.$refs.popup.close()
|
this.$refs.popup.close()
|
||||||
},
|
},
|
||||||
confirm(value) {
|
confirm(value) {
|
||||||
if (this.devCount.engineeringListLength > 0) {
|
// if (this.devCount.engineeringListLength > 0) {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: '/pages/device/new?type=' + this.type,
|
url: '/pages/device/new?type=' + this.type,
|
||||||
})
|
})
|
||||||
} else {
|
// } else {
|
||||||
uni.navigateTo({
|
// uni.navigateTo({
|
||||||
url: '/pages/engineering/new?from=index&type=' + this.type,
|
// url: '/pages/engineering/new?from=index&type=' + this.type,
|
||||||
})
|
// })
|
||||||
}
|
// }
|
||||||
|
|
||||||
this.$refs.popup.close()
|
this.$refs.popup.close()
|
||||||
},
|
},
|
||||||
registerGateway() {
|
registerGateway() {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: '/pages/gateway/new',
|
url: '/pages/gateway/new',
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
jump(type) {
|
jump(type) {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: '/pages/device/list?type=' + type,
|
url: '/pages/device/list?type=' + type,
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
},
|
jumpMessage(type) {
|
||||||
|
uni.setStorageSync('messageParams', {
|
||||||
|
name: '',
|
||||||
|
id: '',
|
||||||
|
type: type,
|
||||||
|
})
|
||||||
|
uni.switchTab({
|
||||||
|
url: '/pages/index/message1',
|
||||||
|
})
|
||||||
|
},
|
||||||
|
eningerNum() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/engineering/list',
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss"></style>
|
<style lang="scss"></style>
|
||||||
|
|||||||
@@ -15,11 +15,11 @@
|
|||||||
<view class="header-item-value">{{ devCount.offLineDevCount || 0 }}</view>
|
<view class="header-item-value">{{ devCount.offLineDevCount || 0 }}</view>
|
||||||
<view class="header-item-label">离线设备</view>
|
<view class="header-item-label">离线设备</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="header-item" @click="jumpMessage">
|
<view class="header-item" @click="jumpMessage(2, false)">
|
||||||
<view class="header-item-value">{{ devCount.alarmCount || 0 }}</view>
|
<view class="header-item-value">{{ devCount.alarmCount || 0 }}</view>
|
||||||
<view class="header-item-label">告警数量</view>
|
<view class="header-item-label">告警数量</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="header-item" @click="jumpMessage">
|
<view class="header-item" @click="jumpMessage(0, false)">
|
||||||
<view class="header-item-value">{{
|
<view class="header-item-value">{{
|
||||||
devCount.eventCount + devCount.runCount + devCount.harmonicCount || 0
|
devCount.eventCount + devCount.runCount + devCount.harmonicCount || 0
|
||||||
}}</view>
|
}}</view>
|
||||||
@@ -48,11 +48,11 @@
|
|||||||
<view class="header-item-value">{{ devCount.currentOffLineDevCount || 0 }}</view>
|
<view class="header-item-value">{{ devCount.currentOffLineDevCount || 0 }}</view>
|
||||||
<view class="header-item-label">离线设备</view>
|
<view class="header-item-label">离线设备</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="header-item" @click="jumpMessage">
|
<view class="header-item" @click="jumpMessage(2, true)">
|
||||||
<view class="header-item-value">{{ devCount.currentAlarmCount || 0 }}</view>
|
<view class="header-item-value">{{ devCount.currentAlarmCount || 0 }}</view>
|
||||||
<view class="header-item-label">告警数量</view>
|
<view class="header-item-label">告警数量</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="header-item" @click="jumpMessage">
|
<view class="header-item" @click="jumpMessage(0, true)">
|
||||||
<view class="header-item-value">{{
|
<view class="header-item-value">{{
|
||||||
devCount.currentEventCount + devCount.currentRunCount + devCount.currentHarmonicCount || 0
|
devCount.currentEventCount + devCount.currentRunCount + devCount.currentHarmonicCount || 0
|
||||||
}}</view>
|
}}</view>
|
||||||
@@ -79,12 +79,17 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
jumpMessage(){
|
jumpMessage(type, flag) {
|
||||||
|
uni.setStorageSync('messageParams', {
|
||||||
|
name: flag ? uni.getStorageSync('engineering').name : '',
|
||||||
|
id: flag ? uni.getStorageSync('engineering').id : '',
|
||||||
|
type: type,
|
||||||
|
})
|
||||||
uni.switchTab({
|
uni.switchTab({
|
||||||
url: '/pages/index/message',
|
url: '/pages/index/message1',
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
eningerNum(){
|
eningerNum() {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: '/pages/engineering/list',
|
url: '/pages/engineering/list',
|
||||||
})
|
})
|
||||||
@@ -94,7 +99,7 @@ export default {
|
|||||||
url: '/pages/zhuanzhi/warning',
|
url: '/pages/zhuanzhi/warning',
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
projectNum() {
|
projectNum(now) {
|
||||||
console.log(now)
|
console.log(now)
|
||||||
if (now) {
|
if (now) {
|
||||||
let engineering = uni.getStorageSync('engineering')
|
let engineering = uni.getStorageSync('engineering')
|
||||||
|
|||||||
@@ -1,143 +1,158 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="index-zhuyonghu">
|
<view class="index-zhuyonghu">
|
||||||
<template v-if="devCount.engineeringListLength > 1">
|
<template v-if="devCount.engineeringListLength > 1">
|
||||||
<view class="canneng-index-title mb20">所有工程设备统计</view>
|
<view class="canneng-index-title mb20">所有工程设备统计</view>
|
||||||
<view class="header">
|
<view class="header">
|
||||||
<view class="header-item" @click="jump('allEngineering')">
|
<view class="header-item" @click="jump('allEngineering')">
|
||||||
<view class="header-item-value">{{ devCount.onLineDevCount + devCount.offLineDevCount || 0 }}</view>
|
<view class="header-item-value">{{ devCount.onLineDevCount + devCount.offLineDevCount || 0 }}</view>
|
||||||
<view class="header-item-label">设备总数</view>
|
<view class="header-item-label">设备总数</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="header-item" @click="jump('onLineDevs')">
|
<view class="header-item" @click="jump('onLineDevs')">
|
||||||
<view class="header-item-value">{{ devCount.onLineDevCount || 0 }}</view>
|
<view class="header-item-value">{{ devCount.onLineDevCount || 0 }}</view>
|
||||||
<view class="header-item-label">在线设备</view>
|
<view class="header-item-label">在线设备</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="header-item" @click="jump('offLineDevs')">
|
<view class="header-item" @click="jump('offLineDevs')">
|
||||||
<view class="header-item-value">{{ devCount.offLineDevCount || 0 }}</view>
|
<view class="header-item-value">{{ devCount.offLineDevCount || 0 }}</view>
|
||||||
<view class="header-item-label">离线设备</view>
|
<view class="header-item-label">离线设备</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="mt20"></view>
|
<view class="mt20"></view>
|
||||||
</template>
|
</template>
|
||||||
<view class="canneng-index-title mb20">当前工程设备统计</view>
|
<view class="canneng-index-title mb20">当前工程设备统计</view>
|
||||||
<view class="header">
|
<view class="header">
|
||||||
<view class="header-item" @click="jump('nowEngineering')">
|
<view class="header-item" @click="jump('nowEngineering')">
|
||||||
<view class="header-item-value"
|
<view class="header-item-value"
|
||||||
>{{ devCount.currentOnLineDevCount + devCount.currentOffLineDevCount || 0 }}
|
>{{ devCount.currentOnLineDevCount + devCount.currentOffLineDevCount || 0 }}
|
||||||
</view>
|
</view>
|
||||||
<view class="header-item-label">设备总数</view>
|
<view class="header-item-label">设备总数</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="header-item" @click="jump('currentOnLineDevs')">
|
<view class="header-item" @click="jump('currentOnLineDevs')">
|
||||||
<view class="header-item-value">{{ devCount.currentOnLineDevCount || 0 }}</view>
|
<view class="header-item-value">{{ devCount.currentOnLineDevCount || 0 }}</view>
|
||||||
<view class="header-item-label">在线设备</view>
|
<view class="header-item-label">在线设备</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="header-item" @click="jump('currentOffLineDevs')">
|
<view class="header-item" @click="jump('currentOffLineDevs')">
|
||||||
<view class="header-item-value">{{ devCount.currentOffLineDevCount || 0 }}</view>
|
<view class="header-item-value">{{ devCount.currentOffLineDevCount || 0 }}</view>
|
||||||
<view class="header-item-label">离线设备</view>
|
<view class="header-item-label">离线设备</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
<view class="header-item" @click="jumpMessage('0')">
|
||||||
<view class="canneng-index-title mt20">常用功能</view>
|
<view class="header-item-value">{{ devCount.eventCount || 0 }}</view>
|
||||||
<view style="padding: 20rpx 20rpx 0">
|
<view class="header-item-label">暂态事件数</view>
|
||||||
<Cn-grid title="">
|
</view>
|
||||||
<Cn-grid-item src="/static/device2.png" text="设备注册" @click="registerDevice"></Cn-grid-item>
|
<view class="header-item" @click="jumpMessage('1')">
|
||||||
<!-- <Cn-grid-item src="/static/gateway2.png" text="网关注册" @click="registerGateway"></Cn-grid-item> -->
|
<view class="header-item-value">{{ devCount.harmonicCount || 0 }}</view>
|
||||||
<Cn-grid-item src="/static/feedback2.png" text="问题反馈" @click="submitFeedBack"></Cn-grid-item>
|
<view class="header-item-label">稳态事件数</view>
|
||||||
</Cn-grid>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<uni-popup ref="popup" type="dialog" @maskClick='maskClick'>
|
<view class="canneng-index-title mt20">常用功能</view>
|
||||||
<uni-popup-dialog
|
<view style="padding: 20rpx 20rpx 0">
|
||||||
mode="base"
|
<Cn-grid title="">
|
||||||
type="info"
|
<Cn-grid-item src="/static/device2.png" text="设备注册" @click="registerDevice"></Cn-grid-item>
|
||||||
content="请选择设备类型"
|
<!-- <Cn-grid-item src="/static/gateway2.png" text="网关注册" @click="registerGateway"></Cn-grid-item> -->
|
||||||
:duration="0"
|
<Cn-grid-item src="/static/feedback2.png" text="问题反馈" @click="submitFeedBack"></Cn-grid-item>
|
||||||
confirmText="直连设备"
|
</Cn-grid>
|
||||||
cancelText="网关接入"
|
</view>
|
||||||
cancelColor= '#007aff'
|
<uni-popup ref="popup" type="dialog" @maskClick="maskClick">
|
||||||
@close="close"
|
<uni-popup-dialog
|
||||||
@confirm="confirm"
|
mode="base"
|
||||||
></uni-popup-dialog>
|
type="info"
|
||||||
|
content="请选择设备类型"
|
||||||
</uni-popup>
|
:duration="0"
|
||||||
</view>
|
confirmText="直连设备"
|
||||||
|
cancelText="网关接入"
|
||||||
|
cancelColor="#007aff"
|
||||||
|
@close="close"
|
||||||
|
@confirm="confirm"
|
||||||
|
></uni-popup-dialog>
|
||||||
|
</uni-popup>
|
||||||
|
</view>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
loading: false,
|
loading: false,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
devCount: {
|
devCount: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: {},
|
default: {},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
submitFeedBack() {
|
submitFeedBack() {
|
||||||
uni.navigateTo({ url: '/pages/home/feedback' })
|
uni.navigateTo({ url: '/pages/home/feedback' })
|
||||||
},
|
},
|
||||||
registerDevice() {
|
registerDevice() {
|
||||||
this.$refs.popup.open()
|
this.$refs.popup.open()
|
||||||
// uni.showModal({
|
// uni.showModal({
|
||||||
// title: '提示',
|
// title: '提示',
|
||||||
// content: '请选择设备类型',
|
// content: '请选择设备类型',
|
||||||
// confirmText: '直连设备',
|
// confirmText: '直连设备',
|
||||||
// cancelText: '网关接入',
|
// cancelText: '网关接入',
|
||||||
// cancelColor: '#007aff',
|
// cancelColor: '#007aff',
|
||||||
// success: ({confirm, cancel}) => {
|
// success: ({confirm, cancel}) => {
|
||||||
// if (confirm) {
|
// if (confirm) {
|
||||||
// if (this.devCount.engineeringListLength > 0) {
|
// if (this.devCount.engineeringListLength > 0) {
|
||||||
// uni.navigateTo({
|
// uni.navigateTo({
|
||||||
// url: '/pages/device/new?type=4',
|
// url: '/pages/device/new?type=4',
|
||||||
// })
|
// })
|
||||||
// } else {
|
// } else {
|
||||||
// uni.navigateTo({
|
// uni.navigateTo({
|
||||||
// url: '/pages/engineering/new?from=index'
|
// url: '/pages/engineering/new?from=index'
|
||||||
// })
|
// })
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// } else if (cancel) {
|
// } else if (cancel) {
|
||||||
// // uni.navigateTo({
|
// // uni.navigateTo({
|
||||||
// // url: '/pages/gateway/list',
|
// // url: '/pages/gateway/list',
|
||||||
// // })
|
// // })
|
||||||
// this.$util.toast('功能正在开发,敬请期待')
|
// this.$util.toast('功能正在开发,敬请期待')
|
||||||
// }
|
// }
|
||||||
// },
|
// },
|
||||||
// })
|
// })
|
||||||
},
|
},
|
||||||
maskClick(){
|
maskClick() {
|
||||||
this.$refs.popup.close()
|
this.$refs.popup.close()
|
||||||
},
|
},
|
||||||
close() {
|
close() {
|
||||||
this.$util.toast('功能正在开发,敬请期待')
|
this.$util.toast('功能正在开发,敬请期待')
|
||||||
this.$refs.popup.close()
|
this.$refs.popup.close()
|
||||||
},
|
},
|
||||||
confirm(value) {
|
confirm(value) {
|
||||||
|
// if (this.devCount.engineeringListLength > 0) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/device/new?type=4',
|
||||||
|
})
|
||||||
|
// } else {
|
||||||
|
// uni.navigateTo({
|
||||||
|
// url: '/pages/engineering/new?from=index',
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
|
||||||
if (this.devCount.engineeringListLength > 0) {
|
this.$refs.popup.close()
|
||||||
uni.navigateTo({
|
},
|
||||||
url: '/pages/device/new?type=4',
|
registerGateway() {
|
||||||
})
|
uni.navigateTo({
|
||||||
} else {
|
url: '/pages/gateway/new',
|
||||||
uni.navigateTo({
|
})
|
||||||
url: '/pages/engineering/new?from=index'
|
},
|
||||||
})
|
jump(type) {
|
||||||
}
|
uni.navigateTo({
|
||||||
|
url: '/pages/device/list?type=' + type,
|
||||||
|
})
|
||||||
this.$refs.popup.close()
|
},
|
||||||
},
|
jumpMessage(type) {
|
||||||
registerGateway() {
|
uni.setStorageSync('messageParams', {
|
||||||
uni.navigateTo({
|
name:'',
|
||||||
url: '/pages/gateway/new',
|
id: '',
|
||||||
})
|
type: type,
|
||||||
},
|
})
|
||||||
jump(type) {
|
uni.switchTab({
|
||||||
uni.navigateTo({
|
url: '/pages/index/message1',
|
||||||
url: '/pages/device/list?type=' + type,
|
})
|
||||||
})
|
},
|
||||||
},
|
},
|
||||||
},
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss"></style>
|
<style lang="scss"></style>
|
||||||
|
|||||||
@@ -15,15 +15,13 @@
|
|||||||
<view class="header-item-value">{{ devCount.offLineDevCount || 0 }}</view>
|
<view class="header-item-value">{{ devCount.offLineDevCount || 0 }}</view>
|
||||||
<view class="header-item-label">离线设备</view>
|
<view class="header-item-label">离线设备</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="header-item" @click="jumpMessage">
|
<view class="header-item" @click="jumpMessage(0, false)">
|
||||||
<view class="header-item-value">{{ devCount.alarmCount || 0 }}</view>
|
<view class="header-item-value">{{ devCount.eventCount || 0 }}</view>
|
||||||
<view class="header-item-label">告警数量</view>
|
<view class="header-item-label">暂态事件数</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="header-item" @click="jumpMessage">
|
<view class="header-item" @click="jumpMessage(1, false)">
|
||||||
<view class="header-item-value">{{
|
<view class="header-item-value">{{ devCount.harmonicCount || 0 }}</view>
|
||||||
devCount.eventCount + devCount.runCount + devCount.harmonicCount || 0
|
<view class="header-item-label">稳态事件数</view>
|
||||||
}}</view>
|
|
||||||
<view class="header-item-label">事件数量</view>
|
|
||||||
</view>
|
</view>
|
||||||
<view class="header-item" @click="eningerNum">
|
<view class="header-item" @click="eningerNum">
|
||||||
<view class="header-item-value">{{ devCount.eningerCount || 0 }}</view>
|
<view class="header-item-value">{{ devCount.eningerCount || 0 }}</view>
|
||||||
@@ -48,15 +46,13 @@
|
|||||||
<view class="header-item-value">{{ devCount.currentOffLineDevCount || 0 }}</view>
|
<view class="header-item-value">{{ devCount.currentOffLineDevCount || 0 }}</view>
|
||||||
<view class="header-item-label">离线设备</view>
|
<view class="header-item-label">离线设备</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="header-item" @click="jumpMessage">
|
<view class="header-item" @click="jumpMessage(0, true)">
|
||||||
<view class="header-item-value">{{ devCount.currentAlarmCount || 0 }}</view>
|
<view class="header-item-value">{{ devCount.currentEventCount || 0 }}</view>
|
||||||
<view class="header-item-label">告警数量</view>
|
<view class="header-item-label">暂态事件数</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="header-item" @click="jumpMessage">
|
<view class="header-item" @click="jumpMessage(1, true)">
|
||||||
<view class="header-item-value">{{
|
<view class="header-item-value">{{ devCount.currentHarmonicCount || 0 }}</view>
|
||||||
devCount.currentEventCount + devCount.currentRunCount + devCount.currentHarmonicCount || 0
|
<view class="header-item-label">稳态事件数</view>
|
||||||
}}</view>
|
|
||||||
<view class="header-item-label">事件数量</view>
|
|
||||||
</view>
|
</view>
|
||||||
<view class="header-item" @click="projectNum(true)">
|
<view class="header-item" @click="projectNum(true)">
|
||||||
<view class="header-item-value">{{ devCount.currentProjectCount || 0 }}</view>
|
<view class="header-item-value">{{ devCount.currentProjectCount || 0 }}</view>
|
||||||
@@ -89,9 +85,14 @@ export default {
|
|||||||
url: '/pages/engineering/list',
|
url: '/pages/engineering/list',
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
jumpMessage(){
|
jumpMessage(type, flag) {
|
||||||
|
uni.setStorageSync('messageParams', {
|
||||||
|
name: flag ? uni.getStorageSync('engineering').name : '',
|
||||||
|
id: flag ? uni.getStorageSync('engineering').id : '',
|
||||||
|
type: type,
|
||||||
|
})
|
||||||
uni.switchTab({
|
uni.switchTab({
|
||||||
url: '/pages/index/message',
|
url: '/pages/index/message1',
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
projectNum(now) {
|
projectNum(now) {
|
||||||
|
|||||||
292
pages/index/comp/steadyState.vue
Normal file
@@ -0,0 +1,292 @@
|
|||||||
|
<template>
|
||||||
|
<view class="dateReport">
|
||||||
|
<!-- <view class="pd20">
|
||||||
|
<uni-segmented-control
|
||||||
|
:current="curSub"
|
||||||
|
class="subsection"
|
||||||
|
active-color="#376cf3"
|
||||||
|
:values="subsectionList"
|
||||||
|
@clickItem="sectionChange"
|
||||||
|
/>
|
||||||
|
</view> -->
|
||||||
|
<view class="filterCriteria">
|
||||||
|
<!-- 筛选条件 -->
|
||||||
|
<Cn-filterCriteria @select="select" :singleChoice="true" :report="true"> </Cn-filterCriteria>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 卡片 -->
|
||||||
|
<scroll-view
|
||||||
|
scroll-y="true"
|
||||||
|
@refresherrefresh="refresherrefresh"
|
||||||
|
:refresher-triggered="triggered"
|
||||||
|
refresher-enabled="true"
|
||||||
|
class="event-list mt20"
|
||||||
|
v-if="eventList.length != 0"
|
||||||
|
:style="{ height: 'calc(100vh - ' + (navHeight + height) + 'px)', overflow: 'auto' }"
|
||||||
|
>
|
||||||
|
<!-- 循环渲染事件项 -->
|
||||||
|
<uni-card class="event-item" :class="item.type" v-for="(item, index) in store.data" :key="index">
|
||||||
|
<!-- 头部:图标 + 信息 + 操作 -->
|
||||||
|
<view class="event-header">
|
||||||
|
<view class="event-info">
|
||||||
|
<view class="event-title">
|
||||||
|
<text class="event-id">{{ item.lineName }}</text>
|
||||||
|
<view class="event-tags"
|
||||||
|
>{{ selectValue.report == 0 ? item.startTime : item.startTime + '至' + item.endTime }}
|
||||||
|
<view class="iconText ml10" @click="download(item)"
|
||||||
|
><uni-icons type="arrow-down" color="#fff" size="16"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 详情区域 -->
|
||||||
|
<view class="event-detail">
|
||||||
|
<text>{{ item.overLimitDesc == '' ? '该监测点暂无指标越限' : item.overLimitDesc }}</text>
|
||||||
|
</view>
|
||||||
|
<!-- <view class="downloadReport" @click="download">
|
||||||
|
<uni-icons type="download" size="16" color="#376cf3"></uni-icons>下载报告
|
||||||
|
</view> -->
|
||||||
|
</uni-card>
|
||||||
|
<uni-load-more
|
||||||
|
v-if="store.status == 'loading' || (store.data && store.data.length > 0)"
|
||||||
|
:status="store.status"
|
||||||
|
></uni-load-more>
|
||||||
|
<Cn-empty v-else style="top: 20%"></Cn-empty>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import list from '@/common/js/list'
|
||||||
|
import { downloadHarmonicReport } from '@/common/api/report.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
props: {
|
||||||
|
indexList: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
total: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
navHeight: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mixins: [list],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
status: 'noMore',
|
||||||
|
curSub: 0,
|
||||||
|
subsectionList: ['周报', '月报'],
|
||||||
|
eventList: [
|
||||||
|
{
|
||||||
|
id: '测试监测点',
|
||||||
|
tag: '2026-01-23至2026-01-23',
|
||||||
|
|
||||||
|
status: '1',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
thisSelectValue: {},
|
||||||
|
triggered: true,
|
||||||
|
height: 0,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {},
|
||||||
|
mounted() {
|
||||||
|
this.setHeight()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
setHeight() {
|
||||||
|
uni.createSelectorQuery()
|
||||||
|
.select('.filterCriteria')
|
||||||
|
.boundingClientRect((rect) => {
|
||||||
|
//
|
||||||
|
// #ifdef H5
|
||||||
|
this.height = rect?.height + 20 || 0
|
||||||
|
// #endif
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
this.height = rect?.height + 30 || 0
|
||||||
|
// #endif
|
||||||
|
})
|
||||||
|
.exec()
|
||||||
|
},
|
||||||
|
sectionChange(index) {
|
||||||
|
this.curSub = index.currentIndex
|
||||||
|
},
|
||||||
|
init() {
|
||||||
|
if (this.selectValue.lineId == '') return
|
||||||
|
|
||||||
|
this.store = this.DataSource('/cs-report-boot/csAppReport/reportList')
|
||||||
|
this.store.params.pageSize = 10000
|
||||||
|
this.store.params.timeType = this.selectValue.report
|
||||||
|
this.store.params.engineerId = this.selectValue.engineeringId
|
||||||
|
this.store.params.projectId = this.selectValue.projectId
|
||||||
|
this.store.params.devId = this.selectValue.deviceId
|
||||||
|
this.store.params.lineId = this.selectValue.lineId
|
||||||
|
this.store.params.time = this.selectValue.date
|
||||||
|
// this.store.params.startTime = this.selectValue.range[0]
|
||||||
|
// this.store.params.endTime = this.selectValue.range[1]
|
||||||
|
this.store.loadedCallback = () => {}
|
||||||
|
this.store.reload()
|
||||||
|
},
|
||||||
|
|
||||||
|
select(value) {
|
||||||
|
this.selectValue = value
|
||||||
|
this.init()
|
||||||
|
setTimeout(() => {
|
||||||
|
this.setHeight()
|
||||||
|
}, 100)
|
||||||
|
},
|
||||||
|
// 下载
|
||||||
|
download(item) {
|
||||||
|
uni.showLoading({
|
||||||
|
title: '下载中,请稍等...',
|
||||||
|
mask: true,
|
||||||
|
})
|
||||||
|
downloadHarmonicReport({
|
||||||
|
devId: this.selectValue.deviceId,
|
||||||
|
endTime: item.endTime,
|
||||||
|
engineerId: this.selectValue.engineeringId,
|
||||||
|
lineId: this.selectValue.lineId,
|
||||||
|
list: [],
|
||||||
|
projectId: this.selectValue.projectId,
|
||||||
|
startTime: item.startTime,
|
||||||
|
time: '',
|
||||||
|
timeType: this.selectValue.report,
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
// 下载文件资源到本地
|
||||||
|
uni.downloadFile({
|
||||||
|
url: res.data, // 后端返回的线上文件路径
|
||||||
|
success: function (res) {
|
||||||
|
if (res.statusCode === 200) {
|
||||||
|
// 文件到本地
|
||||||
|
uni.saveFile({
|
||||||
|
tempFilePath: res.tempFilePath, //临时路径
|
||||||
|
success: function (data) {
|
||||||
|
var savedFilePath = data.savedFilePath
|
||||||
|
// 在app端执行
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
let osname = plus.os.name
|
||||||
|
// 如果是安卓的话弹出提示
|
||||||
|
|
||||||
|
uni.showToast({
|
||||||
|
icon: 'success',
|
||||||
|
mask: true,
|
||||||
|
title: '下载成功!',
|
||||||
|
duration: 1000,
|
||||||
|
})
|
||||||
|
|
||||||
|
// #endif
|
||||||
|
//ios手机直接打开文件,手动存储文件到手机,Android手机从根目录创建文件夹,保存文件并改名
|
||||||
|
setTimeout(() => {
|
||||||
|
//打开文档查看
|
||||||
|
uni.openDocument({
|
||||||
|
filePath: data.savedFilePath,
|
||||||
|
success: function (ress) {
|
||||||
|
console.log('成功打开文件')
|
||||||
|
},
|
||||||
|
fail() {
|
||||||
|
console.log('打开文件失败')
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}, 500)
|
||||||
|
},
|
||||||
|
})
|
||||||
|
console.log('下载成功')
|
||||||
|
} else {
|
||||||
|
uni.showToast({
|
||||||
|
icon: 'none',
|
||||||
|
mask: true,
|
||||||
|
title: '下载失败!',
|
||||||
|
duration: 1000,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail: function (res) {},
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
uni.showToast({
|
||||||
|
icon: 'none',
|
||||||
|
mask: true,
|
||||||
|
title: err.message,
|
||||||
|
duration: 1000,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 下拉
|
||||||
|
refresherrefresh() {
|
||||||
|
this.triggered = true
|
||||||
|
uni.startPullDownRefresh()
|
||||||
|
setTimeout(() => {
|
||||||
|
this.triggered = false
|
||||||
|
}, 500)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import '@/pages/message1/index.scss';
|
||||||
|
.event-title {
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.event-tags {
|
||||||
|
display: flex;
|
||||||
|
font-size: 27rpx !important ;
|
||||||
|
line-height: 50rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-detail {
|
||||||
|
font-size: 25rpx !important;
|
||||||
|
// display: grid;
|
||||||
|
// grid-template-columns: 1fr 1fr;
|
||||||
|
}
|
||||||
|
.downloadReport {
|
||||||
|
width: 100%;
|
||||||
|
background: #376cf320;
|
||||||
|
height: 60rpx;
|
||||||
|
line-height: 60rpx;
|
||||||
|
color: #376cf3;
|
||||||
|
font-weight: 600;
|
||||||
|
border-radius: 15rpx;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.filterCriteria {
|
||||||
|
.nav {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
.choose1 {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
/deep/ .uni-checkbox-input {
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
}
|
||||||
|
font-size: 26rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/deep/ .uni-scroll-view-refresher {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.iconText {
|
||||||
|
width: 45rpx;
|
||||||
|
height: 45rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: $uni-theme-color;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 45rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
343
pages/index/comp/transient.vue
Normal file
@@ -0,0 +1,343 @@
|
|||||||
|
<template>
|
||||||
|
<view class="dateReport">
|
||||||
|
<view class="pd20">
|
||||||
|
<uni-segmented-control
|
||||||
|
:current="curSub"
|
||||||
|
class="subsection"
|
||||||
|
active-color="#376cf3"
|
||||||
|
:values="subsectionList"
|
||||||
|
@clickItem="sectionChange"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 申请报告 -->
|
||||||
|
<view v-show="curSub == 0">
|
||||||
|
<!-- apply -->
|
||||||
|
<Apply :navHeight="navHeight" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 申请记录 -->
|
||||||
|
<view v-if="curSub == 1">
|
||||||
|
<view class="filterCriteria">
|
||||||
|
<!-- 筛选条件 -->
|
||||||
|
<Cn-filterCriteria @select="select" :showQianTree="false"> </Cn-filterCriteria>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="record event-list mt20"
|
||||||
|
:style="{ height: 'calc(100vh - ' + (navHeight + height) + 'px)', overflow: 'auto' }"
|
||||||
|
>
|
||||||
|
<uni-card class="event-item" :class="item.type" v-for="(item, index) in store.data" :key="index">
|
||||||
|
<!-- 头部:图标 + 信息 + 操作 -->
|
||||||
|
<view class="event-header">
|
||||||
|
<view
|
||||||
|
class="event-icon"
|
||||||
|
:style="{ backgroundColor: item.isComplete == 1 ? '#10b98120' : '#FF000020' }"
|
||||||
|
>
|
||||||
|
<!-- 动态图标:根据类型切换 -->
|
||||||
|
<uni-icons
|
||||||
|
custom-prefix="iconfont"
|
||||||
|
type="icon-baogaoguanli"
|
||||||
|
size="40"
|
||||||
|
:color="item.isComplete == 1 ? '#10b981' : '#FF0000'"
|
||||||
|
></uni-icons>
|
||||||
|
</view>
|
||||||
|
<view class="event-info">
|
||||||
|
<view class="event-title">
|
||||||
|
<text class="event-id">{{ item.lineName }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="event-desc">
|
||||||
|
<text>工程名称:{{ item.engineeringName }}</text>
|
||||||
|
<text>项目名称:{{ item.projectName }}</text>
|
||||||
|
<text>设备名称:{{ item.deviceName }}</text>
|
||||||
|
<!-- <text>申请时间:{{ item.time }}</text>
|
||||||
|
<text>事件数:{{ item.eventNums }}</text> -->
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="event-action">
|
||||||
|
<view class="iconText" v-if="item.isComplete == 1" @click="download(item)"
|
||||||
|
><uni-icons type="arrow-down" color="#fff" size="16"></uni-icons>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="nav-menu nav-menu-btn"
|
||||||
|
v-else-if="userInfo.authorities === 'operation_manager'"
|
||||||
|
@click="generate(item)"
|
||||||
|
>生成报告
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 详情区域 -->
|
||||||
|
<view class="event-detail">
|
||||||
|
<!-- <view class="device-body"> -->
|
||||||
|
<view class="device-body-item">
|
||||||
|
<text>申请人:</text>
|
||||||
|
<text>{{ item.applyUser }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="device-body-item">
|
||||||
|
<text>申请时间:</text>
|
||||||
|
<text>{{ item.time }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="device-body-item">
|
||||||
|
<text>暂降事件:</text>
|
||||||
|
<text>{{ item.eventNums }}次</text>
|
||||||
|
</view>
|
||||||
|
<view class="device-body-item">
|
||||||
|
<text>申请状态:</text>
|
||||||
|
<text
|
||||||
|
:style="{ color: item.isComplete == 1 ? '#10b981' : '#FF0000' }"
|
||||||
|
style="font-weight: 700"
|
||||||
|
>{{ item.isComplete == 1 ? '已完成' : '未完成' }}</text
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- <view class="device-body-item">
|
||||||
|
<text>申请时间:</text>
|
||||||
|
<text>{{ item.time }}</text>
|
||||||
|
</view> -->
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- </view> -->
|
||||||
|
</uni-card>
|
||||||
|
<uni-load-more
|
||||||
|
v-if="store.status == 'loading' || (store.data && store.data.length > 0)"
|
||||||
|
:status="store.status"
|
||||||
|
></uni-load-more>
|
||||||
|
<Cn-empty v-else style="top: 30%"></Cn-empty>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import Apply from './apply.vue'
|
||||||
|
import list from '@/common/js/list'
|
||||||
|
import { createEventReport, downloadEventReport } from '@/common/api/report.js'
|
||||||
|
export default {
|
||||||
|
components: { Apply },
|
||||||
|
props: {
|
||||||
|
indexList: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
total: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
// status: {
|
||||||
|
// type: String,
|
||||||
|
// default: 'more',
|
||||||
|
// },
|
||||||
|
navHeight: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mixins: [list],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
value: ['0'],
|
||||||
|
content: 123,
|
||||||
|
curSub: 0,
|
||||||
|
subsectionList: ['申请报告', '申请记录'],
|
||||||
|
form: {
|
||||||
|
type: 0,
|
||||||
|
lindId: '',
|
||||||
|
},
|
||||||
|
userInfo: {},
|
||||||
|
height: 0,
|
||||||
|
selectValue: {},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {},
|
||||||
|
mounted() {
|
||||||
|
this.userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
methods: {
|
||||||
|
setHeight() {
|
||||||
|
uni.createSelectorQuery()
|
||||||
|
.select('.filterCriteria')
|
||||||
|
.boundingClientRect((rect) => {
|
||||||
|
//
|
||||||
|
// #ifdef H5
|
||||||
|
this.height = rect?.height + 115 || 0
|
||||||
|
// #endif
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
this.height = rect?.height + 10 || 0
|
||||||
|
// #endif
|
||||||
|
})
|
||||||
|
.exec()
|
||||||
|
},
|
||||||
|
init() {
|
||||||
|
this.store = this.DataSource('/cs-report-boot/csAppReport/getApplicationReport')
|
||||||
|
this.store.params.startTime = this.$util.getMonthFirstAndLastDay(this.selectValue.date).firstDay
|
||||||
|
this.store.params.endTime = this.$util.getMonthFirstAndLastDay(this.selectValue.date).lastDay
|
||||||
|
this.store.loadedCallback = () => {}
|
||||||
|
this.store.reload()
|
||||||
|
},
|
||||||
|
async select(val) {
|
||||||
|
this.selectValue = val
|
||||||
|
await this.init()
|
||||||
|
this.setHeight()
|
||||||
|
},
|
||||||
|
|
||||||
|
sectionChange(index) {
|
||||||
|
this.curSub = index.currentIndex
|
||||||
|
},
|
||||||
|
// 生成报告
|
||||||
|
generate(item) {
|
||||||
|
uni.showLoading({
|
||||||
|
title: '生成中,请稍等...',
|
||||||
|
mask: true,
|
||||||
|
})
|
||||||
|
createEventReport({
|
||||||
|
id: item.eventId,
|
||||||
|
}).then((res) => {
|
||||||
|
uni.showToast({
|
||||||
|
icon: 'success',
|
||||||
|
mask: true,
|
||||||
|
title: '生成事件报告成功!',
|
||||||
|
duration: 1000,
|
||||||
|
})
|
||||||
|
this.store.reload()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 下载报告
|
||||||
|
download(item) {
|
||||||
|
uni.showLoading({
|
||||||
|
title: '下载中,请稍等...',
|
||||||
|
mask: true,
|
||||||
|
})
|
||||||
|
downloadEventReport({
|
||||||
|
id: item.eventId,
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
// 下载文件资源到本地
|
||||||
|
uni.downloadFile({
|
||||||
|
url: res.data, // 后端返回的线上文件路径
|
||||||
|
success: function (res) {
|
||||||
|
if (res.statusCode === 200) {
|
||||||
|
// 文件到本地
|
||||||
|
uni.saveFile({
|
||||||
|
tempFilePath: res.tempFilePath, //临时路径
|
||||||
|
success: function (data) {
|
||||||
|
var savedFilePath = data.savedFilePath
|
||||||
|
// 在app端执行
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
let osname = plus.os.name
|
||||||
|
// 如果是安卓的话弹出提示
|
||||||
|
|
||||||
|
uni.showToast({
|
||||||
|
icon: 'success',
|
||||||
|
mask: true,
|
||||||
|
title: '下载成功!',
|
||||||
|
duration: 1000,
|
||||||
|
})
|
||||||
|
|
||||||
|
// #endif
|
||||||
|
//ios手机直接打开文件,手动存储文件到手机,Android手机从根目录创建文件夹,保存文件并改名
|
||||||
|
setTimeout(() => {
|
||||||
|
//打开文档查看
|
||||||
|
uni.openDocument({
|
||||||
|
filePath: data.savedFilePath,
|
||||||
|
success: function (ress) {
|
||||||
|
console.log('成功打开文件')
|
||||||
|
},
|
||||||
|
fail() {
|
||||||
|
console.log('打开文件失败')
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}, 500)
|
||||||
|
},
|
||||||
|
})
|
||||||
|
console.log('下载成功')
|
||||||
|
} else {
|
||||||
|
uni.showToast({
|
||||||
|
icon: 'none',
|
||||||
|
mask: true,
|
||||||
|
title: '下载失败!',
|
||||||
|
duration: 1000,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail: function (res) {},
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
uni.showToast({
|
||||||
|
icon: 'none',
|
||||||
|
mask: true,
|
||||||
|
title: err.message,
|
||||||
|
duration: 1000,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import '@/pages/message1/index.scss';
|
||||||
|
|
||||||
|
.event-detail {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1.2fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
// /deep/ .record {
|
||||||
|
// .uni-card__content {
|
||||||
|
// padding: 55rpx 20rpx 20rpx !important;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
.filterCriteria {
|
||||||
|
.nav {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
.choose1 {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
/deep/ .uni-checkbox-input {
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
}
|
||||||
|
font-size: 26rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// .device-body {
|
||||||
|
// padding: 10rpx 20rpx 20rpx;
|
||||||
|
|
||||||
|
.device-body-item {
|
||||||
|
display: flex;
|
||||||
|
// justify-content: space-between;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666666;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
// }
|
||||||
|
.iconText {
|
||||||
|
display: flex;
|
||||||
|
width: 45rpx;
|
||||||
|
height: 45rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: $uni-theme-color;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.nav-menu {
|
||||||
|
height: 40rpx;
|
||||||
|
padding: 6rpx 20rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
line-height: 40rpx;
|
||||||
|
background: #ebeaec;
|
||||||
|
color: #666;
|
||||||
|
&-active {
|
||||||
|
background: #dfe5f7;
|
||||||
|
color: $uni-theme-color;
|
||||||
|
}
|
||||||
|
&-btn {
|
||||||
|
background: $uni-theme-color;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -16,23 +16,38 @@
|
|||||||
</template>
|
</template>
|
||||||
<template slot="right">
|
<template slot="right">
|
||||||
<text class="hide-txt mr5" style="font-size: 28rpx"
|
<text class="hide-txt mr5" style="font-size: 28rpx"
|
||||||
>{{ select.engineeringName || emptyEngineeringName }}
|
>{{
|
||||||
|
userInfo.authorities === 'engineering_user'
|
||||||
|
? '创建工程'
|
||||||
|
: select.engineeringName || emptyEngineeringName
|
||||||
|
}}
|
||||||
</text>
|
</text>
|
||||||
<uni-icons type="bottom" size="16" color="#111" v-if="select.engineeringName"></uni-icons>
|
<uni-icons
|
||||||
|
type="bottom"
|
||||||
|
size="16"
|
||||||
|
color="#111"
|
||||||
|
v-if="select.engineeringName && userInfo.authorities != 'engineering_user'"
|
||||||
|
></uni-icons>
|
||||||
</template>
|
</template>
|
||||||
</uni-nav-bar>
|
</uni-nav-bar>
|
||||||
<view class="index">
|
<view class="index">
|
||||||
<!-- 运维 -->
|
<!-- 运维 -->
|
||||||
<YunWei :devCount="devCount" v-if="userInfo.authorities === 'operation_manager'" />
|
<YunWei :devCount="devCount" v-if="userInfo.authorities === 'operation_manager'" />
|
||||||
<!-- 专职 -->
|
<!-- 营销 -->
|
||||||
<ZhuanZhi :devCount="devCount" v-if="userInfo.authorities === 'market_user'" />
|
<ZhuanZhi :devCount="devCount" v-if="userInfo.authorities === 'market_user'" />
|
||||||
<!-- 工程 -->
|
<!-- 工程 -->
|
||||||
<GongCheng ref="gongCheng" :devCount="devCount" v-if="userInfo.authorities === 'engineering_user'" />
|
<GongCheng ref="gongCheng" :devCount="devCount" v-if="userInfo.authorities === 'engineering_user'" />
|
||||||
<!-- 主用户 -->
|
<!-- 正式 -->
|
||||||
<ZhuYongHu :devCount="devCount" v-if="userInfo.authorities === 'app_vip_user'" />
|
<ZhuYongHu :devCount="devCount" v-if="userInfo.authorities === 'app_vip_user'" />
|
||||||
<!-- 游客 -->
|
<!-- 游客 -->
|
||||||
<YouKe :devCount="devCount" v-if="userInfo.authorities === 'tourist'"></YouKe>
|
<YouKe :devCount="devCount" v-if="userInfo.authorities === 'tourist'"></YouKe>
|
||||||
<template v-show="engineeringList.length">
|
<!-- 工程列表 -->
|
||||||
|
<template v-show="engineeringList.length" v-if="userInfo.authorities === 'engineering_user'">
|
||||||
|
<view class="canneng-index-title mt20">工程列表</view>
|
||||||
|
<Engineering ref="engineering" :store="store" @refresh="store.search()" />
|
||||||
|
</template>
|
||||||
|
<!-- 设备列表 -->
|
||||||
|
<template v-else v-show="engineeringList.length">
|
||||||
<view class="canneng-index-title mt20">设备列表</view>
|
<view class="canneng-index-title mt20">设备列表</view>
|
||||||
<Device ref="device" :store="store" />
|
<Device ref="device" :store="store" />
|
||||||
</template>
|
</template>
|
||||||
@@ -47,6 +62,7 @@ import ZhuYongHu from './comp/indexZhuYongHu.vue'
|
|||||||
import ZhuanZhi from './comp/indexZhuanZhi.vue'
|
import ZhuanZhi from './comp/indexZhuanZhi.vue'
|
||||||
import YouKe from './comp/indexYouKe.vue'
|
import YouKe from './comp/indexYouKe.vue'
|
||||||
import Device from './comp/device.vue'
|
import Device from './comp/device.vue'
|
||||||
|
import Engineering from './comp/engineering.vue'
|
||||||
import list from '../../common/js/list'
|
import list from '../../common/js/list'
|
||||||
import { getDevCount } from '../../common/api/device.js'
|
import { getDevCount } from '../../common/api/device.js'
|
||||||
import { queryEngineering } from '@/common/api/engineering.js'
|
import { queryEngineering } from '@/common/api/engineering.js'
|
||||||
@@ -60,6 +76,7 @@ export default {
|
|||||||
ZhuanZhi,
|
ZhuanZhi,
|
||||||
YouKe,
|
YouKe,
|
||||||
Device,
|
Device,
|
||||||
|
Engineering,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@@ -88,7 +105,11 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
selectEngineering() {
|
selectEngineering() {
|
||||||
if (this.select.engineeringName) {
|
if (this.userInfo.authorities === 'engineering_user') {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/engineering/new',
|
||||||
|
})
|
||||||
|
} else if (this.select.engineeringName) {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: '/pages/home/selectEngineering',
|
url: '/pages/home/selectEngineering',
|
||||||
})
|
})
|
||||||
@@ -140,6 +161,7 @@ export default {
|
|||||||
console.log(this.$refs.device, 'this.$refs.device')
|
console.log(this.$refs.device, 'this.$refs.device')
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.$refs.device && this.$refs.device.init()
|
this.$refs.device && this.$refs.device.init()
|
||||||
|
this.$refs.engineering && this.$refs.engineering.init()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
this.$refs.gongCheng?.init()
|
this.$refs.gongCheng?.init()
|
||||||
@@ -154,10 +176,10 @@ export default {
|
|||||||
// console.log(`12312`,res)
|
// console.log(`12312`,res)
|
||||||
// Object.assign(this.devCount, res.data)
|
// Object.assign(this.devCount, res.data)
|
||||||
this.devCount = res.data
|
this.devCount = res.data
|
||||||
this.devCount.currentOffLineDevs.forEach((item) => {
|
this.devCount.currentOffLineDevs?.forEach((item) => {
|
||||||
item.runStatus = 1
|
item.runStatus = 1
|
||||||
})
|
})
|
||||||
this.devCount.offLineDevs.forEach((item) => {
|
this.devCount.offLineDevs?.forEach((item) => {
|
||||||
item.runStatus = 1
|
item.runStatus = 1
|
||||||
})
|
})
|
||||||
this.devCount.engineeringListLength = this.engineeringList.length
|
this.devCount.engineeringListLength = this.engineeringList.length
|
||||||
@@ -175,7 +197,7 @@ export default {
|
|||||||
if (messagePage) {
|
if (messagePage) {
|
||||||
uni.setTabBarBadge({
|
uni.setTabBarBadge({
|
||||||
index: 1,
|
index: 1,
|
||||||
text:messagePage ? (messagePage > 99 ? '99+' : messagePage + '') : '',
|
text: messagePage ? (messagePage > 99 ? '99+' : messagePage + '') : '',
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
uni.removeTabBarBadge({
|
uni.removeTabBarBadge({
|
||||||
@@ -197,8 +219,10 @@ export default {
|
|||||||
// #endif
|
// #endif
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
// 动态配置导航栏按钮
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
|
// 页面加载时,动态配置导航栏按钮
|
||||||
if (!uni.getStorageSync(this.$cacheKey.access_token)) {
|
if (!uni.getStorageSync(this.$cacheKey.access_token)) {
|
||||||
uni.reLaunch({
|
uni.reLaunch({
|
||||||
url: '/pages/user/login',
|
url: '/pages/user/login',
|
||||||
@@ -216,7 +240,11 @@ export default {
|
|||||||
}, 1000)
|
}, 1000)
|
||||||
}
|
}
|
||||||
this.timer = setInterval(this.getDevCount, 1000 * 60) // 定时请求
|
this.timer = setInterval(this.getDevCount, 1000 * 60) // 定时请求
|
||||||
this.store = this.DataSource('/cs-device-boot/EquipmentDelivery/queryEquipmentByProject')
|
|
||||||
|
this.store =
|
||||||
|
uni.getStorageSync(this.$cacheKey.userInfo).authorities === 'engineering_user'
|
||||||
|
? this.DataSource('/cs-harmonic-boot/homePage/getEngineeringHomePage')
|
||||||
|
: this.DataSource('/cs-device-boot/EquipmentDelivery/queryEquipmentByProject')
|
||||||
// #ifdef APP-PLUS
|
// #ifdef APP-PLUS
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
// 获取nav高度
|
// 获取nav高度
|
||||||
@@ -243,6 +271,22 @@ export default {
|
|||||||
this.init()
|
this.init()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
mounted() {
|
||||||
|
uni.setTabBarItem({
|
||||||
|
index: 2,
|
||||||
|
visible: true,
|
||||||
|
})
|
||||||
|
if (uni.getStorageSync(this.$cacheKey.userInfo).authorities === 'tourist') {
|
||||||
|
uni.setTabBarItem({
|
||||||
|
index: 2,
|
||||||
|
visible: false,
|
||||||
|
})
|
||||||
|
uni.showToast({
|
||||||
|
title: '已同步设备历史数据',
|
||||||
|
icon: 'none',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|||||||
316
pages/index/message1.vue
Normal file
@@ -0,0 +1,316 @@
|
|||||||
|
<template>
|
||||||
|
<Cn-page :loading="loading" class="messageBox" style="padding-top: 10px">
|
||||||
|
<view slot="body" class="message">
|
||||||
|
<view class="tabsBox">
|
||||||
|
<uni-segmented-control
|
||||||
|
:current="current"
|
||||||
|
:values="items"
|
||||||
|
style-type="text"
|
||||||
|
active-color="#376cf3"
|
||||||
|
@clickItem="onClickItem"
|
||||||
|
/>
|
||||||
|
<!-- 角标 -->
|
||||||
|
<view class="badge-container">
|
||||||
|
<span v-for="(item, index) in items" :key="index" class="badge">
|
||||||
|
<uni-badge :text="badgeCounts[index] > 99 ? '99+' : badgeCounts[index]" />
|
||||||
|
<!-- {{ badgeCounts[index] > 99 ? '99+' : badgeCounts[index] }} -->
|
||||||
|
</span>
|
||||||
|
</view>
|
||||||
|
<!-- 筛选条件 -->
|
||||||
|
<Cn-filterCriteria
|
||||||
|
ref="cnFilterCriteria"
|
||||||
|
:level="current === 0 ? 3 : current === 1 ? 3 : 2"
|
||||||
|
@select="select"
|
||||||
|
>
|
||||||
|
</Cn-filterCriteria>
|
||||||
|
</view>
|
||||||
|
<view class="content">
|
||||||
|
<Transient
|
||||||
|
ref="TransientRef"
|
||||||
|
v-if="current === 0"
|
||||||
|
:navHeight="navHeight"
|
||||||
|
:selectValue="selectValue"
|
||||||
|
@getDevCount="getDevCount"
|
||||||
|
/>
|
||||||
|
<SteadyState
|
||||||
|
ref="SteadyStateRef"
|
||||||
|
v-if="current === 1"
|
||||||
|
:navHeight="navHeight"
|
||||||
|
:selectValue="selectValue"
|
||||||
|
@getDevCount="getDevCount"
|
||||||
|
/>
|
||||||
|
<Alarm
|
||||||
|
ref="AlarmRef"
|
||||||
|
v-if="current === 2"
|
||||||
|
:navHeight="navHeight"
|
||||||
|
:selectValue="selectValue"
|
||||||
|
@getDevCount="getDevCount"
|
||||||
|
/>
|
||||||
|
<Run
|
||||||
|
ref="RunRef"
|
||||||
|
v-if="current === 3"
|
||||||
|
:navHeight="navHeight"
|
||||||
|
:selectValue="selectValue"
|
||||||
|
@getDevCount="getDevCount"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</Cn-page>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import Transient from '@/pages/message1/transient.vue'
|
||||||
|
import SteadyState from '@/pages/message1/steadyState.vue'
|
||||||
|
import Alarm from '@/pages/message1/alarm.vue'
|
||||||
|
import Run from '@/pages/message1/run.vue'
|
||||||
|
import { getDevCount } from '../../common/api/device.js'
|
||||||
|
import { updateStatus } from '@/common/api/message'
|
||||||
|
export default {
|
||||||
|
components: { Transient, SteadyState, Alarm, Run },
|
||||||
|
props: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
items: ['暂态事件', '稳态事件'], //'运行告警', '运行事件'
|
||||||
|
badgeCounts: [0, 0, 0, 0],
|
||||||
|
current: 0,
|
||||||
|
colorIndex: 0,
|
||||||
|
item: '',
|
||||||
|
loading: false,
|
||||||
|
width: 0,
|
||||||
|
navHeight: 0,
|
||||||
|
selectValue: {},
|
||||||
|
devCount: [],
|
||||||
|
// 筛选数据
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {},
|
||||||
|
mounted() {
|
||||||
|
this.setHeight()
|
||||||
|
},
|
||||||
|
onPullDownRefresh() {
|
||||||
|
this.refresh()
|
||||||
|
},
|
||||||
|
onNavigationBarButtonTap(e) {
|
||||||
|
uni.showModal({
|
||||||
|
title: '提示',
|
||||||
|
content: '确定要全部标记为已读吗?',
|
||||||
|
success: (res) => {
|
||||||
|
if (res.confirm) {
|
||||||
|
updateStatus({
|
||||||
|
// '暂态事件', 0
|
||||||
|
// '稳态事件', 1
|
||||||
|
// '运行告警', 3
|
||||||
|
// '运行事件' 2
|
||||||
|
type: this.current == 2 ? 3 : this.current == 3 ? 2 : this.current,
|
||||||
|
eventIds: [],
|
||||||
|
}).then(() => {
|
||||||
|
this.refresh()
|
||||||
|
this.getDevCount()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
onShow() {
|
||||||
|
if (uni.getStorageSync(this.$cacheKey.userInfo).authorities === 'operation_manager') {
|
||||||
|
this.items = ['暂态事件', '稳态事件', '运行告警', '运行事件']
|
||||||
|
}
|
||||||
|
const params = uni.getStorageSync('messageParams')
|
||||||
|
this.getDevCount()
|
||||||
|
this.$nextTick(() => {
|
||||||
|
if (params.type !== '') {
|
||||||
|
this.current = params.type - 0
|
||||||
|
}
|
||||||
|
if (params.name != '') {
|
||||||
|
this.$refs.cnFilterCriteria && this.$refs.cnFilterCriteria.external(params.name, params.id)
|
||||||
|
}
|
||||||
|
// this.refresh()
|
||||||
|
this.$refs.TransientRef && this.$refs.TransientRef.getConfig()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 页面销毁
|
||||||
|
onHide() {
|
||||||
|
uni.setStorageSync('messageParams', {
|
||||||
|
name: '',
|
||||||
|
id: '',
|
||||||
|
type: '',
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
setHeight() {
|
||||||
|
uni.createSelectorQuery()
|
||||||
|
.select('.tabsBox')
|
||||||
|
.boundingClientRect((rect) => {
|
||||||
|
this.width = rect.width
|
||||||
|
//
|
||||||
|
// #ifdef H5
|
||||||
|
this.navHeight = rect.height + 75
|
||||||
|
// #endif
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
this.navHeight = rect.height + 20
|
||||||
|
// #endif
|
||||||
|
})
|
||||||
|
.exec()
|
||||||
|
},
|
||||||
|
|
||||||
|
refresh() {
|
||||||
|
switch (this.current) {
|
||||||
|
case 0:
|
||||||
|
this.$refs.TransientRef.store.reload()
|
||||||
|
break
|
||||||
|
case 1:
|
||||||
|
this.$refs.SteadyStateRef.store.reload()
|
||||||
|
break
|
||||||
|
case 2:
|
||||||
|
this.$refs.AlarmRef.store.reload()
|
||||||
|
break
|
||||||
|
case 3:
|
||||||
|
this.$refs.RunRef.store.reload()
|
||||||
|
break
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onClickItem(e) {
|
||||||
|
if (this.current !== e.currentIndex) {
|
||||||
|
this.current = e.currentIndex
|
||||||
|
}
|
||||||
|
},
|
||||||
|
select(value) {
|
||||||
|
this.selectValue = value
|
||||||
|
setTimeout(() => {
|
||||||
|
this.setHeight()
|
||||||
|
}, 100)
|
||||||
|
},
|
||||||
|
// 设置角标
|
||||||
|
getDevCount() {
|
||||||
|
if (uni.getStorageSync('projectList')[1] != undefined) {
|
||||||
|
getDevCount(uni.getStorageSync('projectList')[1].engineeringId).then((res) => {
|
||||||
|
this.devCount = res.data
|
||||||
|
this.badgeCounts = [
|
||||||
|
this.devCount.eventCount,
|
||||||
|
this.devCount.harmonicCount,
|
||||||
|
this.devCount.alarmCount,
|
||||||
|
this.devCount.runCount,
|
||||||
|
]
|
||||||
|
uni.setStorage({
|
||||||
|
key: this.$cacheKey.messageCount,
|
||||||
|
data: this.devCount,
|
||||||
|
})
|
||||||
|
let messagePage =
|
||||||
|
this.devCount.runCount +
|
||||||
|
this.devCount.eventCount +
|
||||||
|
this.devCount.alarmCount +
|
||||||
|
this.devCount.harmonicCount
|
||||||
|
let minePage = this.devCount.feedBackCount
|
||||||
|
|
||||||
|
if (messagePage) {
|
||||||
|
uni.setTabBarBadge({
|
||||||
|
index: 1,
|
||||||
|
text: messagePage ? (messagePage > 99 ? '99+' : messagePage + '') : '',
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
uni.removeTabBarBadge({
|
||||||
|
index: 1,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (minePage) {
|
||||||
|
uni.setTabBarBadge({
|
||||||
|
index: 2,
|
||||||
|
text: minePage + '',
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
uni.removeTabBarBadge({
|
||||||
|
index: 2,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
plus.runtime.setBadgeNumber(messagePage + minePage)
|
||||||
|
// #endif
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 根据索引动态计算右侧偏移位置,使徽章对准每个标签的右上角
|
||||||
|
getBadgeRightPosition(index) {
|
||||||
|
if (this.items == 4) {
|
||||||
|
return (index + 1) * (this.width / 4) + 'px'
|
||||||
|
} else {
|
||||||
|
return (index + 0) * (this.width / 2) + 'px'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.messageBox {
|
||||||
|
overflow: hidden;
|
||||||
|
/deep/.tabsBox {
|
||||||
|
position: relative;
|
||||||
|
background-color: #fff;
|
||||||
|
.segmented-control {
|
||||||
|
// height: 40px;
|
||||||
|
background-color: #fff;
|
||||||
|
border-bottom: 1px solid #cccccc70;
|
||||||
|
.segmented-control__item {
|
||||||
|
align-items: baseline;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.segmented-control__text {
|
||||||
|
font-size: 30rpx !important;
|
||||||
|
color: rgb(96, 98, 102);
|
||||||
|
}
|
||||||
|
.segmented-control__item--text {
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 0 0 5rpx;
|
||||||
|
}
|
||||||
|
.choose {
|
||||||
|
// padding: 20rpx;
|
||||||
|
// display: flex;
|
||||||
|
// justify-content: space-between;
|
||||||
|
// align-items: center;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.subsection {
|
||||||
|
width: 90%;
|
||||||
|
margin: 20rpx auto;
|
||||||
|
}
|
||||||
|
.badge-container {
|
||||||
|
position: absolute;
|
||||||
|
top: -10rpx; /* 徽章向上偏移,与控件重叠 */
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
right: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 0;
|
||||||
|
pointer-events: none; /* 确保徽章不干扰点击事件 */
|
||||||
|
}
|
||||||
|
/deep/ .uni-badge--error {
|
||||||
|
background-color: #ff3b30;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
flex: 1;
|
||||||
|
// position: absolute;
|
||||||
|
// min-width: 18px;
|
||||||
|
// height: 16px;
|
||||||
|
// padding: 0 4px;
|
||||||
|
// background-color: #ff3b30; /* 红色徽章 */
|
||||||
|
// color: white;
|
||||||
|
// font-size: 22rpx;
|
||||||
|
// line-height: 16px;
|
||||||
|
// text-align: center;
|
||||||
|
// border-radius: 9px;
|
||||||
|
//
|
||||||
|
text-align: center;
|
||||||
|
// transform: translateX(-110%); /* 使徽章中心对齐右上角 */
|
||||||
|
.uni-badge--x {
|
||||||
|
left: 70rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -81,9 +81,10 @@
|
|||||||
<view class="mine-nav-label">关注工程配置</view>
|
<view class="mine-nav-label">关注工程配置</view>
|
||||||
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
|
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
|
||||||
</view>
|
</view>
|
||||||
<view class="mine-nav" @click="jump('serverSetting')" v-if="userInfo.authorities === 'engineering_user'">
|
<view class="mine-nav" @click="jump('transientSetting')" >
|
||||||
|
<!-- 调试内容配置 serverSetting-->
|
||||||
<image mode="aspectFill" class="mine-nav-icon" src="/static/server2.png" />
|
<image mode="aspectFill" class="mine-nav-icon" src="/static/server2.png" />
|
||||||
<view class="mine-nav-label">调试内容配置</view>
|
<view class="mine-nav-label">暂态事件</view>
|
||||||
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
|
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
|
||||||
</view>
|
</view>
|
||||||
<view class="mine-nav" @click="jump('setup')" style="border-bottom: none">
|
<view class="mine-nav" @click="jump('setup')" style="border-bottom: none">
|
||||||
@@ -379,4 +380,4 @@ export default {
|
|||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</style>
|
|
||||||
|
|||||||
174
pages/index/report.vue
Normal file
@@ -0,0 +1,174 @@
|
|||||||
|
<template>
|
||||||
|
<view :loading="loading" class="report" style="padding-top: 10px">
|
||||||
|
<view class="navReport">
|
||||||
|
<view class="tabsBox">
|
||||||
|
<uni-segmented-control
|
||||||
|
:current="curTabs"
|
||||||
|
:values="items"
|
||||||
|
style-type="text"
|
||||||
|
active-color="#376cf3"
|
||||||
|
@clickItem="onClickItem"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 稳态报表 -->
|
||||||
|
<SteadyState
|
||||||
|
v-if="curTabs == 0"
|
||||||
|
:indexList="indexList"
|
||||||
|
:total="total"
|
||||||
|
:status="status"
|
||||||
|
:navHeight="navHeight"
|
||||||
|
@scrolltolower="scrolltolower"
|
||||||
|
/>
|
||||||
|
<!-- 暂态报表 -->
|
||||||
|
<Transient
|
||||||
|
v-if="curTabs == 1"
|
||||||
|
:indexList="indexList"
|
||||||
|
:total="total"
|
||||||
|
:status="status"
|
||||||
|
:navHeight="navHeight"
|
||||||
|
@scrolltolower="scrolltolower"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import SteadyState from './comp/steadyState.vue'
|
||||||
|
import Transient from './comp/transient.vue'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
SteadyState,
|
||||||
|
Transient,
|
||||||
|
},
|
||||||
|
props: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
curTabs: 0,
|
||||||
|
|
||||||
|
total: 6,
|
||||||
|
loading: false,
|
||||||
|
items: ['稳态报表', '暂降报告'],
|
||||||
|
status: 'more', //more加载前 loading加载中 noMore加载后
|
||||||
|
|
||||||
|
navHeight: 0,
|
||||||
|
|
||||||
|
indexList: [
|
||||||
|
{
|
||||||
|
name: '测试监测点',
|
||||||
|
item: '2022-01-01至2022-01-01',
|
||||||
|
type: '1',
|
||||||
|
status: '1',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '测试监测点',
|
||||||
|
item: '2022-01-01至2022-01-01',
|
||||||
|
type: '2',
|
||||||
|
status: '1',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '测试监测点',
|
||||||
|
item: '2022-01-01至2022-01-01',
|
||||||
|
type: '1',
|
||||||
|
status: '1',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '测试监测点',
|
||||||
|
item: '2022-01-01至2022-01-01',
|
||||||
|
type: '1',
|
||||||
|
status: '0',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '测试监测点',
|
||||||
|
item: '2022-01-01至2022-01-01',
|
||||||
|
type: '1',
|
||||||
|
status: '0',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '测试监测点',
|
||||||
|
item: '2022-01-01至2022-01-01',
|
||||||
|
type: '1',
|
||||||
|
status: '0',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {},
|
||||||
|
mounted() {
|
||||||
|
uni.createSelectorQuery()
|
||||||
|
.select('.navReport')
|
||||||
|
.boundingClientRect((rect) => {
|
||||||
|
//
|
||||||
|
// #ifdef H5
|
||||||
|
this.navHeight = rect.height + 65
|
||||||
|
// #endif
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
this.navHeight = rect.height + 25
|
||||||
|
// #endif
|
||||||
|
})
|
||||||
|
.exec()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
onClickItem(e) {
|
||||||
|
if (this.curTabs !== e.currentIndex) {
|
||||||
|
this.curTabs = e.currentIndex
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
scrolltolower() {
|
||||||
|
if (this.total != this.indexList.length) {
|
||||||
|
this.status = 'loading'
|
||||||
|
this.info()
|
||||||
|
} else {
|
||||||
|
this.status = 'noMore'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
info() {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.status = 'more'
|
||||||
|
}, 1000)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.report {
|
||||||
|
overflow: hidden;
|
||||||
|
/deep/ .u-tabs__wrapper__nav {
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
/deep/ .u-tabs__wrapper__nav__item {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
/deep/ .u-tabs__wrapper__nav__line {
|
||||||
|
left: 80rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/ .u-u-subsection {
|
||||||
|
width: 80% !important;
|
||||||
|
}
|
||||||
|
/deep/.tabsBox {
|
||||||
|
.segmented-control {
|
||||||
|
// height: 40px;
|
||||||
|
background-color: #fff;
|
||||||
|
border-bottom: 1px solid #cccccc70;
|
||||||
|
.segmented-control__item {
|
||||||
|
align-items: baseline;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.segmented-control__text {
|
||||||
|
font-size: 30rpx !important;
|
||||||
|
color: rgb(96, 98, 102);
|
||||||
|
}
|
||||||
|
.segmented-control__item--text {
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 0 0 5rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -121,7 +121,7 @@ export default {
|
|||||||
font-size: 26rpx;
|
font-size: 26rpx;
|
||||||
|
|
||||||
.detail-content-title {
|
.detail-content-title {
|
||||||
font-size: 32rpx;
|
font-size: 28rpx;
|
||||||
color: #111;
|
color: #111;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@@ -28,7 +28,10 @@
|
|||||||
>
|
>
|
||||||
<!-- <view class="content-item-header-right-des">{{ item.subTitle }}</view> -->
|
<!-- <view class="content-item-header-right-des">{{ item.subTitle }}</view> -->
|
||||||
</view>
|
</view>
|
||||||
<view class="ml10" v-if="type === '0' || item.status != '1'">🔍</view>
|
<view class="ml10" v-if="type === '0' || item.status != '1'">
|
||||||
|
<!-- <uni-icons type="search" size="25" color="#376cf3"></uni-icons> -->
|
||||||
|
🔍
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="content-item-footer">{{ item.subTitle }}</view>
|
<view class="content-item-footer">{{ item.subTitle }}</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -115,7 +118,7 @@ export default {
|
|||||||
console.log(dictData)
|
console.log(dictData)
|
||||||
this.store = this.DataSource('/cs-harmonic-boot/eventUser/queryEventpage')
|
this.store = this.DataSource('/cs-harmonic-boot/eventUser/queryEventpage')
|
||||||
this.store.params.type = this.type
|
this.store.params.type = this.type
|
||||||
this.store.params.startTime = this.$util.getThreeMonthsAgo()
|
this.store.params.startTime = this.$util.getBeforeDays()
|
||||||
this.store.params.endTime = this.$util.getToday()
|
this.store.params.endTime = this.$util.getToday()
|
||||||
this.store.loadedCallback = () => {
|
this.store.loadedCallback = () => {
|
||||||
console.log(111, this.store.data)
|
console.log(111, this.store.data)
|
||||||
|
|||||||
@@ -82,7 +82,7 @@ export default {
|
|||||||
font-size: 26rpx;
|
font-size: 26rpx;
|
||||||
|
|
||||||
.detail-content-title {
|
.detail-content-title {
|
||||||
font-size: 32rpx;
|
font-size: 28rpx;
|
||||||
color: #111;
|
color: #111;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|||||||
149
pages/message1/alarm.vue
Normal file
@@ -0,0 +1,149 @@
|
|||||||
|
<template>
|
||||||
|
<view style="position: relative">
|
||||||
|
<!-- 运行告警 -->
|
||||||
|
|
||||||
|
<!-- 卡片 -->
|
||||||
|
<scroll-view
|
||||||
|
scroll-y="true"
|
||||||
|
@refresherrefresh="refresherrefresh"
|
||||||
|
:refresher-triggered="triggered"
|
||||||
|
refresher-enabled="true"
|
||||||
|
class="event-list"
|
||||||
|
:style="{ height: 'calc(100vh - ' + (navHeight + 10) + 'px)', overflow: 'auto' }"
|
||||||
|
>
|
||||||
|
<!-- 循环渲染事件项 -->
|
||||||
|
<uni-card
|
||||||
|
class="event-item"
|
||||||
|
:class="item.type"
|
||||||
|
v-for="(item, index) in this.store.data"
|
||||||
|
:key="index"
|
||||||
|
@click="jump(item)"
|
||||||
|
>
|
||||||
|
<!-- 头部:图标 + 信息 + 操作 -->
|
||||||
|
<view class="event-header">
|
||||||
|
<view class="event-icon">
|
||||||
|
<!-- 动态图标:根据类型切换 -->
|
||||||
|
<uni-icons
|
||||||
|
custom-prefix="iconfont"
|
||||||
|
type="icon-terminal-box-fill"
|
||||||
|
size="30"
|
||||||
|
color="#FF0000"
|
||||||
|
></uni-icons>
|
||||||
|
<view class="badge1" v-if="item.isRead == 0"> </view>
|
||||||
|
</view>
|
||||||
|
<view class="event-info">
|
||||||
|
<view class="event-title">
|
||||||
|
<text class="event-id">{{ item.date }}发生告警终端{{ item.warnNums }}台</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="event-action">
|
||||||
|
<!-- <uni-icons type="search" size="25" color="#376cf3"></uni-icons> -->
|
||||||
|
🔍
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</uni-card>
|
||||||
|
<uni-load-more
|
||||||
|
v-if="store.status == 'loading' || (store.data && store.data.length > 0)"
|
||||||
|
:status="store.status"
|
||||||
|
></uni-load-more>
|
||||||
|
<Cn-empty v-else style="top: 20%"></Cn-empty>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import list from '@/common/js/list'
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
props: {
|
||||||
|
navHeight: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
selectValue: {
|
||||||
|
type: Object,
|
||||||
|
// default: () => {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mixins: [list],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
triggered: true,
|
||||||
|
status: 'noMore', //more加载前 loading加载中 noMore加载后
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
init() {
|
||||||
|
this.store = this.DataSource('/cs-harmonic-boot/csAlarm/queryAlarmList')
|
||||||
|
this.store.params.pageSize = 10000
|
||||||
|
this.store.params.engineerId = this.selectValue.engineeringId
|
||||||
|
this.store.params.projectId = this.selectValue.projectId
|
||||||
|
this.store.params.devId = this.selectValue.deviceId
|
||||||
|
this.store.params.lineId = this.selectValue.lineId
|
||||||
|
this.store.params.time = this.selectValue.date
|
||||||
|
this.store.loadedCallback = () => {
|
||||||
|
this.loading = false
|
||||||
|
}
|
||||||
|
|
||||||
|
this.store.reload()
|
||||||
|
},
|
||||||
|
jump(item) {
|
||||||
|
let str = JSON.stringify(item).replace(/%/g, '百分比')
|
||||||
|
item.status = '1'
|
||||||
|
uni.navigateTo({ url: '/pages/message1/comp/alarmDetails?detail=' + encodeURIComponent(str) })
|
||||||
|
},
|
||||||
|
// 下拉
|
||||||
|
refresherrefresh() {
|
||||||
|
this.triggered = true
|
||||||
|
uni.startPullDownRefresh()
|
||||||
|
setTimeout(() => {
|
||||||
|
this.triggered = false
|
||||||
|
}, 500)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
selectValue: {
|
||||||
|
handler(val, oldVal) {
|
||||||
|
if (Object.keys(val).length === 0) return
|
||||||
|
this.init()
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import './index.scss';
|
||||||
|
/* 列表容器 */
|
||||||
|
.event-list {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
/* 头部:图标 + 信息 + 操作 */
|
||||||
|
.event-header {
|
||||||
|
margin-bottom: 0rpx;
|
||||||
|
}
|
||||||
|
.event-title {
|
||||||
|
margin-bottom: 0rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 图标区域(按类型区分背景色) */
|
||||||
|
.event-icon {
|
||||||
|
width: 70rpx;
|
||||||
|
height: 70rpx;
|
||||||
|
background-color: #ff000020;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 信息区域 */
|
||||||
|
.event-info {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/deep/ .uni-scroll-view-refresher {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
258
pages/message1/comp/F47.vue
Normal file
@@ -0,0 +1,258 @@
|
|||||||
|
<template>
|
||||||
|
<!-- ITIC -->
|
||||||
|
<view>
|
||||||
|
<l-echart v-if="status != 'loading'" ref="echartRef" @finished="initChart"></l-echart>
|
||||||
|
<uni-load-more v-else :status="status"></uni-load-more>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
const echarts = require('../../../uni_modules/lime-echart/static/echarts.min')
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
props: {
|
||||||
|
store: {
|
||||||
|
type: [Object],
|
||||||
|
},
|
||||||
|
filterValue: {
|
||||||
|
type: [String],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
option: {
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
grid: {
|
||||||
|
left: '10px',
|
||||||
|
right: '40rpx',
|
||||||
|
bottom: '40rpx',
|
||||||
|
top: '10px',
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['分割线', '可容忍事件', '不可容忍事件'],
|
||||||
|
right: '10px',
|
||||||
|
bottom: '10px',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 10,
|
||||||
|
},
|
||||||
|
itemWidth: 10,
|
||||||
|
itemHeight: 10,
|
||||||
|
itemGap: 8,
|
||||||
|
padding: [5, 5, 5, 10],
|
||||||
|
},
|
||||||
|
|
||||||
|
yAxis: {
|
||||||
|
type: 'log',
|
||||||
|
min: '0.001',
|
||||||
|
max: '1000',
|
||||||
|
name: 's',
|
||||||
|
inverse: true,
|
||||||
|
axisLabel: {
|
||||||
|
rotate: -90,
|
||||||
|
},
|
||||||
|
splitLine: { show: false },
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'value',
|
||||||
|
splitNumber: 10,
|
||||||
|
minInterval: 20,
|
||||||
|
position: 'top',
|
||||||
|
rotate: 90,
|
||||||
|
max: 140,
|
||||||
|
axisLabel: {
|
||||||
|
rotate: -90,
|
||||||
|
},
|
||||||
|
name: '%',
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '分割线',
|
||||||
|
type: 'line',
|
||||||
|
data: [
|
||||||
|
[0, 0.05],
|
||||||
|
[50, 0.05],
|
||||||
|
[50, 0.2],
|
||||||
|
[70, 0.2],
|
||||||
|
[70, 0.5],
|
||||||
|
[80, 0.5],
|
||||||
|
[80, 10],
|
||||||
|
[80, 1000],
|
||||||
|
],
|
||||||
|
showSymbol: false,
|
||||||
|
tooltips: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
color: '#DAA520',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '可容忍事件',
|
||||||
|
type: 'scatter',
|
||||||
|
symbol: 'circle',
|
||||||
|
// data: this.pointF,
|
||||||
|
data: [],
|
||||||
|
color: 'green',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '不可容忍事件',
|
||||||
|
type: 'scatter',
|
||||||
|
symbol: 'circle',
|
||||||
|
// data: this.pointFun,
|
||||||
|
data: [],
|
||||||
|
color: 'red',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
status: 'loading',
|
||||||
|
echartRef: null,
|
||||||
|
pointF: [],
|
||||||
|
pointFun: [],
|
||||||
|
data: [],
|
||||||
|
maxXAxis: 140,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// this.initChart()
|
||||||
|
// console.log('🚀 ~ props.data:', this.props.data)
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
init() {},
|
||||||
|
async initChart() {
|
||||||
|
if (!this.$refs.echartRef) return
|
||||||
|
try {
|
||||||
|
this.echartRef = await this.$refs.echartRef.init(echarts)
|
||||||
|
this.bindChartClickEvent()
|
||||||
|
this.echartRef.setOption(this.option, true)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('图表初始化失败:', error)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
gongfunction() {
|
||||||
|
var standF = 0
|
||||||
|
var unstandF = 0
|
||||||
|
this.pointF = []
|
||||||
|
this.pointFun = []
|
||||||
|
var total = 0
|
||||||
|
let dataList = [0]
|
||||||
|
total = this.data.length
|
||||||
|
if (total == 0) {
|
||||||
|
} else {
|
||||||
|
for (var i = 0; i < this.data.length; i++) {
|
||||||
|
var point = []
|
||||||
|
var xx = this.data[i].evtParamTm.replace(/s/g, '')
|
||||||
|
var yy = this.data[i].evtParamVVaDepth.replace(/%/g, '')
|
||||||
|
var time = this.data[i].startTime.replace('T', ' ')
|
||||||
|
dataList.push(yy)
|
||||||
|
point = [yy, xx, time, this.data[i]]
|
||||||
|
|
||||||
|
if (xx < 0.05) {
|
||||||
|
standF++
|
||||||
|
this.pointF.push({
|
||||||
|
value: point,
|
||||||
|
itemStyle: { normal: { color: 'green' } },
|
||||||
|
})
|
||||||
|
} else if (xx < 0.2) {
|
||||||
|
if (yy > 50) {
|
||||||
|
standF++
|
||||||
|
this.pointF.push({
|
||||||
|
value: point,
|
||||||
|
itemStyle: { normal: { color: 'green' } },
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
unstandF++
|
||||||
|
this.pointFun.push({
|
||||||
|
value: point,
|
||||||
|
itemStyle: { normal: { color: 'red' } },
|
||||||
|
})
|
||||||
|
}
|
||||||
|
} else if (xx < 0.5) {
|
||||||
|
if (yy > 70) {
|
||||||
|
standF++
|
||||||
|
this.pointF.push({
|
||||||
|
value: point,
|
||||||
|
itemStyle: { normal: { color: 'green' } },
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
unstandF++
|
||||||
|
this.pointFun.push({
|
||||||
|
value: point,
|
||||||
|
itemStyle: { normal: { color: 'red' } },
|
||||||
|
})
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (yy > 80) {
|
||||||
|
standF++
|
||||||
|
this.pointF.push({
|
||||||
|
value: point,
|
||||||
|
itemStyle: { normal: { color: 'green' } },
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
unstandF++
|
||||||
|
this.pointFun.push({
|
||||||
|
value: point,
|
||||||
|
itemStyle: { normal: { color: 'red' } },
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.option.xAxis.max = Math.max(
|
||||||
|
140,
|
||||||
|
Math.ceil(
|
||||||
|
Math.max(
|
||||||
|
...dataList
|
||||||
|
.filter((item) => {
|
||||||
|
return item !== '-' && !isNaN(Number(item))
|
||||||
|
})
|
||||||
|
.map((item) => Number(item)),
|
||||||
|
) / 10,
|
||||||
|
) * 10,
|
||||||
|
) //this.maxXAxis
|
||||||
|
|
||||||
|
this.option.series[1].data = this.pointF
|
||||||
|
this.option.series[2].data = this.pointFun
|
||||||
|
|
||||||
|
if (this.echartRef) {
|
||||||
|
this.echartRef.setOption(this.option, true)
|
||||||
|
} else {
|
||||||
|
this.initChart()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
bindChartClickEvent() {
|
||||||
|
if (!this.echartRef) return
|
||||||
|
this.echartRef.on('click', (params) => {
|
||||||
|
// 点击查看详情
|
||||||
|
let item = params.value[3]
|
||||||
|
let str = JSON.stringify(item).replace(/%/g, '百分比')
|
||||||
|
uni.navigateTo({ url: '/pages/message1/comp/transientDetails?detail=' + encodeURIComponent(str) })
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
store: {
|
||||||
|
handler(val, oldVal) {
|
||||||
|
this.status = val.status
|
||||||
|
this.data = (val.data || []).filter((k) =>
|
||||||
|
this.filterValue == '' ? k : k.showName == this.filterValue,
|
||||||
|
)
|
||||||
|
this.gongfunction()
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
|
filterValue: {
|
||||||
|
handler(val, oldVal) {
|
||||||
|
this.data = (this.store.data || []).filter((k) => (val == '' ? k : k.showName == val))
|
||||||
|
this.gongfunction()
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped></style>
|
||||||
250
pages/message1/comp/ITIC.vue
Normal file
@@ -0,0 +1,250 @@
|
|||||||
|
<template>
|
||||||
|
<!-- ITIC -->
|
||||||
|
<view>
|
||||||
|
<l-echart v-if="status != 'loading'" ref="echartRef" @finished="initChart"></l-echart>
|
||||||
|
<uni-load-more v-else :status="status"></uni-load-more>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
const echarts = require('../../../uni_modules/lime-echart/static/echarts.min')
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
props: {
|
||||||
|
store: {
|
||||||
|
type: [Object],
|
||||||
|
},
|
||||||
|
filterValue: {
|
||||||
|
type: [String],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
option: {
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
grid: {
|
||||||
|
left: '10px',
|
||||||
|
right: '40rpx',
|
||||||
|
bottom: '40rpx',
|
||||||
|
top: '10px',
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['上限', '下限', '可容忍事件', '不可容忍事件'],
|
||||||
|
right: '10px',
|
||||||
|
bottom: '10px',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 10,
|
||||||
|
},
|
||||||
|
itemWidth: 10,
|
||||||
|
itemHeight: 10,
|
||||||
|
itemGap: 8,
|
||||||
|
padding: [5, 5, 5, 10],
|
||||||
|
},
|
||||||
|
|
||||||
|
color: ['#FF8C00', '#00BFFF', 'green', 'red'],
|
||||||
|
yAxis: {
|
||||||
|
type: 'log',
|
||||||
|
min: '0.001',
|
||||||
|
max: '1000',
|
||||||
|
name: 's',
|
||||||
|
inverse: true,
|
||||||
|
axisLabel: {
|
||||||
|
rotate: -90,
|
||||||
|
},
|
||||||
|
splitLine: { show: false },
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'value',
|
||||||
|
splitNumber: 10,
|
||||||
|
minInterval: 3,
|
||||||
|
position: 'top',
|
||||||
|
rotate: 90,
|
||||||
|
axisLabel: {
|
||||||
|
rotate: 90,
|
||||||
|
},
|
||||||
|
name: '%',
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '上限',
|
||||||
|
type: 'line',
|
||||||
|
data: [
|
||||||
|
[200, 0.001],
|
||||||
|
[140, 0.003],
|
||||||
|
[120, 0.003],
|
||||||
|
[120, 0.5],
|
||||||
|
[110, 0.5],
|
||||||
|
[110, 10],
|
||||||
|
[110, 1000],
|
||||||
|
],
|
||||||
|
showSymbol: false,
|
||||||
|
tooltips: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
color: '#FF8C00',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '下限',
|
||||||
|
type: 'line',
|
||||||
|
data: [
|
||||||
|
[0, 0.02],
|
||||||
|
[70, 0.02],
|
||||||
|
[70, 0.5],
|
||||||
|
[80, 0.5],
|
||||||
|
[80, 10],
|
||||||
|
[90, 10],
|
||||||
|
[90, 1000],
|
||||||
|
],
|
||||||
|
showSymbol: false,
|
||||||
|
tooltips: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
color: '#00BFFF',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '可容忍事件',
|
||||||
|
type: 'scatter',
|
||||||
|
symbol: 'circle',
|
||||||
|
// data: this.pointI,
|
||||||
|
data: [],
|
||||||
|
color: 'green',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '不可容忍事件',
|
||||||
|
type: 'scatter',
|
||||||
|
symbol: 'circle',
|
||||||
|
// data: this.pointIun,
|
||||||
|
data: [],
|
||||||
|
color: 'red',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
status: 'loading',
|
||||||
|
echartRef: null,
|
||||||
|
pointI: [],
|
||||||
|
pointIun: [],
|
||||||
|
data: [],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// this.initChart()
|
||||||
|
// console.log('🚀 ~ props.data:', this.props.data)
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
init() {},
|
||||||
|
async initChart() {
|
||||||
|
if (!this.$refs.echartRef) return
|
||||||
|
try {
|
||||||
|
this.echartRef = await this.$refs.echartRef.init(echarts)
|
||||||
|
this.bindChartClickEvent()
|
||||||
|
this.echartRef.setOption(this.option, true)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('图表初始化失败:', error)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
gongfunction() {
|
||||||
|
// 初始化计数与数据数组
|
||||||
|
let normalCount = 0
|
||||||
|
let abnormalCount = 0
|
||||||
|
this.normalPoints = []
|
||||||
|
this.abnormalPoints = []
|
||||||
|
|
||||||
|
if (!this.data || this.data.length === 0) {
|
||||||
|
this.updateChartOption()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 缓存长度,遍历数据
|
||||||
|
const len = this.data.length
|
||||||
|
for (let i = 0; i < len; i++) {
|
||||||
|
const item = this.data[i]
|
||||||
|
// 建议确认正则意图,/s/g 仅移除字母 s,若去空格应为 /\s/g
|
||||||
|
const xx = parseFloat(item.evtParamTm.replace(/s/g, ''))
|
||||||
|
const yy = parseFloat(item.evtParamVVaDepth.replace(/%/g, ''))
|
||||||
|
const time = item.startTime.replace('T', ' ')
|
||||||
|
|
||||||
|
const pointData = [yy, xx, time, item]
|
||||||
|
const isNormal = this.checkPointStatus(xx, yy)
|
||||||
|
const pointObj = {
|
||||||
|
value: pointData,
|
||||||
|
itemStyle: { normal: { color: isNormal ? 'green' : 'red' } },
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isNormal) {
|
||||||
|
normalCount++
|
||||||
|
this.normalPoints.push(pointObj)
|
||||||
|
} else {
|
||||||
|
abnormalCount++
|
||||||
|
this.abnormalPoints.push(pointObj)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.updateChartOption()
|
||||||
|
},
|
||||||
|
|
||||||
|
// 提取判断逻辑为独立方法
|
||||||
|
checkPointStatus(xx, yy) {
|
||||||
|
if (xx <= 0.003) {
|
||||||
|
const line = 230 - 30000 * xx
|
||||||
|
return yy <= line
|
||||||
|
} else if (xx <= 0.02) {
|
||||||
|
return yy <= 120
|
||||||
|
} else if (xx <= 0.5) {
|
||||||
|
return yy > 70 && yy < 120
|
||||||
|
} else if (xx <= 10) {
|
||||||
|
return yy > 80 && yy < 110
|
||||||
|
} else {
|
||||||
|
return yy > 90 && yy < 110
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
updateChartOption() {
|
||||||
|
// 建议避免硬编码 series 索引,可通过 seriesName 查找
|
||||||
|
this.option.series[2].data = this.normalPoints
|
||||||
|
this.option.series[3].data = this.abnormalPoints
|
||||||
|
|
||||||
|
if (this.echartRef) {
|
||||||
|
this.echartRef.setOption(this.option, true)
|
||||||
|
} else {
|
||||||
|
this.initChart()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
bindChartClickEvent() {
|
||||||
|
if (!this.echartRef) return
|
||||||
|
this.echartRef.on('click', (params) => {
|
||||||
|
console.log('🚀 ~ params:', params.value[3])
|
||||||
|
// 点击查看详情
|
||||||
|
let item = params.value[3]
|
||||||
|
let str = JSON.stringify(item).replace(/%/g, '百分比')
|
||||||
|
uni.navigateTo({ url: '/pages/message1/comp/transientDetails?detail=' + encodeURIComponent(str) })
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
store: {
|
||||||
|
handler(val, oldVal) {
|
||||||
|
this.status = val.status
|
||||||
|
this.data = (val.data || []).filter((k) =>
|
||||||
|
this.filterValue == '' ? k : k.showName == this.filterValue,
|
||||||
|
)
|
||||||
|
this.gongfunction()
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
|
filterValue: {
|
||||||
|
handler(val, oldVal) {
|
||||||
|
this.data = (this.store.data || []).filter((k) => (val == '' ? k : k.showName == val))
|
||||||
|
this.gongfunction()
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped></style>
|
||||||
207
pages/message1/comp/alarmDetails.vue
Normal file
@@ -0,0 +1,207 @@
|
|||||||
|
<template>
|
||||||
|
<Cn-page :loading="loading">
|
||||||
|
<view class="detail" slot="body">
|
||||||
|
<view class="detail-content" style="font-size: 32rpx">
|
||||||
|
<!-- <view class="detail-content-title mb20">发生时间</view> -->
|
||||||
|
<view>{{ detail.date }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="detail-content" style="padding: 0px">
|
||||||
|
<view class="detail-content-title mb20 pt20 pl20">终端告警列表</view>
|
||||||
|
|
||||||
|
<!-- <uni-collapse accordion v-model="collapseValue">
|
||||||
|
<uni-collapse-item :title="item.devName" v-for="item in list">
|
||||||
|
<template v-slot:title>
|
||||||
|
<view class="collapseTop">
|
||||||
|
<view class="mb5 name"> {{ item.devName }}</view>
|
||||||
|
<view class="mb5 frequency">
|
||||||
|
<view class="mr20"> 告警次数: {{ item.warnCounts }} 次</view>
|
||||||
|
<view> 通讯中断: {{ item.interruptCounts }} 次</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<view>
|
||||||
|
<view class="mb10 ml12 frequency">
|
||||||
|
<view>项目名称:{{ item.projectName }} </view></view
|
||||||
|
>
|
||||||
|
<view class="mb10 ml12 frequency">
|
||||||
|
<view>工程名称:{{ item.engineeringName }}</view></view
|
||||||
|
>
|
||||||
|
<view class="mb10 ml12 frequency">
|
||||||
|
<view>通讯信息:</view>
|
||||||
|
<view style="flex: 1">
|
||||||
|
<view v-if="item.interruptCounts == 0">通讯正常</view>
|
||||||
|
<view v-else>通讯中断{{ item.interruptCounts }}次,具体如下所示:</view
|
||||||
|
><view v-for="date in item.interruptDetails" class="mt15 textBox">{{
|
||||||
|
date
|
||||||
|
}}</view></view
|
||||||
|
></view
|
||||||
|
>
|
||||||
|
<view class="mb10 ml12 frequency">
|
||||||
|
<view>告警信息:</view>
|
||||||
|
<view style="flex: 1">
|
||||||
|
<view v-if="item.warnCounts == 0">暂无终端告警信息</view>
|
||||||
|
<view v-else>终端告警{{ item.warnCounts }}次,具体如下所示:</view
|
||||||
|
><view v-for="val in item.warnDetails" class="mt15 textBox">
|
||||||
|
{{ val.warnEventTime + '发生' + val.warnEventDesc }}
|
||||||
|
</view></view
|
||||||
|
></view
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
</uni-collapse-item>
|
||||||
|
</uni-collapse> -->
|
||||||
|
<view class="event-list">
|
||||||
|
<uni-card class="event-item" :class="item.type" v-for="(item, index) in list" :key="index">
|
||||||
|
<!-- 头部:图标 + 信息 + 操作 -->
|
||||||
|
<view class="event-header">
|
||||||
|
<view class="event-icon">
|
||||||
|
<!-- 动态图标:根据类型切换 -->
|
||||||
|
<uni-icons
|
||||||
|
custom-prefix="iconfont"
|
||||||
|
type="icon-terminal-box-fill"
|
||||||
|
size="35"
|
||||||
|
color="#FF0000"
|
||||||
|
></uni-icons>
|
||||||
|
<view class="badge1" v-if="item.status == 0"> </view>
|
||||||
|
</view>
|
||||||
|
<view class="event-info">
|
||||||
|
<view class="event-title">
|
||||||
|
<text class="event-id">{{ item.devName }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="event-desc">
|
||||||
|
<text>工程名称:{{ item.engineeringName }}</text>
|
||||||
|
<text>项目名称:{{ item.projectName }}</text>
|
||||||
|
<!-- <text>事件时间:{{ item.startTime }}</text> -->
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 详情区域 -->
|
||||||
|
<view class="event-detail">
|
||||||
|
<uni-collapse>
|
||||||
|
<uni-collapse-item
|
||||||
|
:title="
|
||||||
|
item.interruptCounts == 0 ? '通讯正常' : `通讯中断 ${item.interruptCounts} 次`
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
v-for="date in String(item.interruptDetails || '').split(',')"
|
||||||
|
class="textBox mb10"
|
||||||
|
>{{ date }}</view
|
||||||
|
>
|
||||||
|
</uni-collapse-item>
|
||||||
|
<uni-collapse-item
|
||||||
|
:title="
|
||||||
|
item.warnCounts == 0 ? '暂无终端告警信息' : `终端告警 ${item.warnCounts} 次`
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<view v-for="val in item.warnDetails" class="textBox mb10">
|
||||||
|
{{ val.warnEventTime + '发生' + val.warnEventDesc }}
|
||||||
|
</view>
|
||||||
|
</uni-collapse-item>
|
||||||
|
</uni-collapse>
|
||||||
|
</view>
|
||||||
|
</uni-card>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</Cn-page>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { updateStatus, queryAlarmDetail } from '@/common/api/message'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading: true,
|
||||||
|
detail: {},
|
||||||
|
limit: '',
|
||||||
|
collapseValue: '0',
|
||||||
|
|
||||||
|
list: [],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
this.loading = true
|
||||||
|
this.detail = JSON.parse(decodeURIComponent(options.detail).replace(/百分比/g, '%'))
|
||||||
|
this.init()
|
||||||
|
if (this.detail.isRead != 1) {
|
||||||
|
updateStatus({
|
||||||
|
eventIds: [this.detail.eventId],
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init() {
|
||||||
|
queryAlarmDetail({
|
||||||
|
devList: this.detail.devIds,
|
||||||
|
time: this.detail.date,
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
this.list = res.data
|
||||||
|
this.loading = false
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
this.loading = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import '../index.scss';
|
||||||
|
.detail {
|
||||||
|
padding: 20rpx 0;
|
||||||
|
|
||||||
|
.detail-content {
|
||||||
|
padding: 20rpx;
|
||||||
|
background: #fff;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
|
||||||
|
.detail-content-title {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #111;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.collapseTop {
|
||||||
|
padding: 10rpx 0;
|
||||||
|
margin-left: 15px;
|
||||||
|
.name {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.frequency {
|
||||||
|
display: flex;
|
||||||
|
font-size: 26rpx;
|
||||||
|
// color: #666666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.textBox {
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666666;
|
||||||
|
text-indent: 2em;
|
||||||
|
}
|
||||||
|
.event-list {
|
||||||
|
background: #fff;
|
||||||
|
padding-bottom: 10rpx;
|
||||||
|
.event-icon {
|
||||||
|
width: 90rpx;
|
||||||
|
height: 90rpx;
|
||||||
|
background-color: #ff000020;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/deep/ .uni-collapse-item__title-box {
|
||||||
|
padding: 0 15px 0 0;
|
||||||
|
height: 56rpx;
|
||||||
|
line-height: 56rpx;
|
||||||
|
font-size: 26rpx !important;
|
||||||
|
color: #666666;
|
||||||
|
span {
|
||||||
|
font-size: 26rpx !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
431
pages/message1/comp/preview.vue
Normal file
@@ -0,0 +1,431 @@
|
|||||||
|
<template>
|
||||||
|
<view class="preview-container">
|
||||||
|
<!-- 右上角按钮组 -->
|
||||||
|
<view class="btn-group">
|
||||||
|
<!-- 缩小按钮 -->
|
||||||
|
<!-- <view class="btn zoom-out-btn" @click="zoomOut">
|
||||||
|
<text class="btn-icon">−</text>
|
||||||
|
</view> -->
|
||||||
|
|
||||||
|
<!-- 放大按钮 -->
|
||||||
|
<!-- <view class="btn zoom-in-btn" @click="zoomIn">
|
||||||
|
<text class="btn-icon">+</text>
|
||||||
|
</view> -->
|
||||||
|
|
||||||
|
<!-- 下载按钮 -->
|
||||||
|
<view class="btn download-btn" @click="downloadImage">
|
||||||
|
<text class="btn-icon">⬇</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 图片预览区域,使用movable-area和movable-view实现缩放移动 -->
|
||||||
|
<movable-area class="movable-area" :style="{ width: '100vw', height: '100vh' }">
|
||||||
|
<movable-view
|
||||||
|
class="movable-view"
|
||||||
|
direction="all"
|
||||||
|
:scale="true"
|
||||||
|
:scale-min="0.5"
|
||||||
|
:scale-max="3"
|
||||||
|
:scale-value="scaleValue"
|
||||||
|
|
||||||
|
@touchstart="onTouchStart"
|
||||||
|
@touchend="onTouchEnd"
|
||||||
|
:x="x"
|
||||||
|
:y="y"
|
||||||
|
:animation="true"
|
||||||
|
:animation-duration="300"
|
||||||
|
:style="{
|
||||||
|
width: rotatedWidth + 'px',
|
||||||
|
height: rotatedHeight + 'px',
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
class="image-wrapper"
|
||||||
|
:style="{
|
||||||
|
width: imgWidth + 'px',
|
||||||
|
height: imgHeight + 'px',
|
||||||
|
transform: 'rotate(90deg)',
|
||||||
|
transformOrigin: 'center center',
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<image
|
||||||
|
:src="imageUrl"
|
||||||
|
class="preview-img"
|
||||||
|
mode="aspectFill"
|
||||||
|
:style="{
|
||||||
|
width: imgWidth + 'px',
|
||||||
|
height: imgHeight + 'px',
|
||||||
|
}"
|
||||||
|
@load="onImageLoad"
|
||||||
|
></image>
|
||||||
|
</view>
|
||||||
|
</movable-view>
|
||||||
|
</movable-area>
|
||||||
|
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
onLoad(options) {
|
||||||
|
this.imageUrl = decodeURIComponent(options.url) // 接收传递的图片URL,需要解码
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
imageUrl: '',
|
||||||
|
// 缩放相关 - 默认0.5
|
||||||
|
scaleValue: 0.6,
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
// 图片原始尺寸
|
||||||
|
imgWidth: 0,
|
||||||
|
imgHeight: 0,
|
||||||
|
// 旋转后的尺寸(交换宽高)
|
||||||
|
rotatedWidth: 0,
|
||||||
|
rotatedHeight: 0,
|
||||||
|
// 提示显示控制
|
||||||
|
showScaleTip: false,
|
||||||
|
tipTimer: null,
|
||||||
|
// 屏幕尺寸
|
||||||
|
windowWidth: 0,
|
||||||
|
windowHeight: 0,
|
||||||
|
// 缩放步长
|
||||||
|
zoomStep: 0.2,
|
||||||
|
// 动画控制
|
||||||
|
isTouching: false,
|
||||||
|
animationTimer: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
// 获取屏幕尺寸
|
||||||
|
const systemInfo = uni.getSystemInfoSync()
|
||||||
|
this.windowWidth = systemInfo.windowWidth
|
||||||
|
this.windowHeight = systemInfo.windowHeight
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
// 图片加载完成后获取尺寸
|
||||||
|
onImageLoad(e) {
|
||||||
|
const { width, height } = e.detail
|
||||||
|
|
||||||
|
// 保存原始尺寸
|
||||||
|
this.imgWidth = width
|
||||||
|
this.imgHeight = height
|
||||||
|
|
||||||
|
// 旋转90度后,宽度和高度互换
|
||||||
|
this.rotatedWidth = height // 旋转后宽度 = 原高度
|
||||||
|
this.rotatedHeight = width // 旋转后高度 = 原宽度
|
||||||
|
|
||||||
|
// 计算初始位置居中(考虑0.5缩放)
|
||||||
|
this.resetPosition()
|
||||||
|
},
|
||||||
|
|
||||||
|
// 重置位置到中心(考虑当前缩放比例)
|
||||||
|
resetPosition() {
|
||||||
|
// 计算居中的偏移量,考虑缩放比例
|
||||||
|
const displayWidth = this.rotatedWidth * this.scaleValue
|
||||||
|
const displayHeight = this.rotatedHeight * this.scaleValue
|
||||||
|
|
||||||
|
this.x = (this.windowWidth - displayWidth) / 2
|
||||||
|
this.y = (this.windowHeight - displayHeight) / 2
|
||||||
|
},
|
||||||
|
|
||||||
|
// 触摸开始
|
||||||
|
onTouchStart() {
|
||||||
|
this.isTouching = true
|
||||||
|
},
|
||||||
|
|
||||||
|
// 触摸结束
|
||||||
|
onTouchEnd() {
|
||||||
|
this.isTouching = false
|
||||||
|
},
|
||||||
|
|
||||||
|
// 缩放事件处理
|
||||||
|
onScale(e) {
|
||||||
|
this.scaleValue = e.detail.scale
|
||||||
|
|
||||||
|
// 显示缩放提示
|
||||||
|
this.showScaleTip = true
|
||||||
|
if (this.tipTimer) {
|
||||||
|
clearTimeout(this.tipTimer)
|
||||||
|
}
|
||||||
|
this.tipTimer = setTimeout(() => {
|
||||||
|
this.showScaleTip = false
|
||||||
|
}, 1500)
|
||||||
|
},
|
||||||
|
|
||||||
|
// 放大
|
||||||
|
zoomIn() {
|
||||||
|
// 计算新的缩放值,不超过最大值
|
||||||
|
const newScale = Math.min(this.scaleValue + this.zoomStep, 3)
|
||||||
|
this.setScaleWithAnimation(newScale)
|
||||||
|
},
|
||||||
|
|
||||||
|
// 缩小
|
||||||
|
zoomOut() {
|
||||||
|
// 计算新的缩放值,不低于最小值
|
||||||
|
const newScale = Math.max(this.scaleValue - this.zoomStep, 0.5)
|
||||||
|
this.setScaleWithAnimation(newScale)
|
||||||
|
},
|
||||||
|
|
||||||
|
// 带动画的设置缩放值
|
||||||
|
setScaleWithAnimation(newScale) {
|
||||||
|
// 保存旧的缩放值用于动画
|
||||||
|
const oldScale = this.scaleValue
|
||||||
|
|
||||||
|
// 计算缩放中心点(屏幕中心)
|
||||||
|
const centerX = this.windowWidth / 2
|
||||||
|
const centerY = this.windowHeight / 2
|
||||||
|
|
||||||
|
// 计算当前图片中心点
|
||||||
|
const oldDisplayWidth = this.rotatedWidth * oldScale
|
||||||
|
const oldDisplayHeight = this.rotatedHeight * oldScale
|
||||||
|
const oldCenterX = this.x + oldDisplayWidth / 2
|
||||||
|
const oldCenterY = this.y + oldDisplayHeight / 2
|
||||||
|
|
||||||
|
// 计算偏移量,使缩放后图片中心保持在屏幕中心
|
||||||
|
const newDisplayWidth = this.rotatedWidth * newScale
|
||||||
|
const newDisplayHeight = this.rotatedHeight * newScale
|
||||||
|
const newX = centerX - newDisplayWidth / 2
|
||||||
|
const newY = centerY - newDisplayHeight / 2
|
||||||
|
|
||||||
|
// 更新缩放值和位置
|
||||||
|
this.scaleValue = newScale
|
||||||
|
this.x = newX
|
||||||
|
this.y = newY
|
||||||
|
|
||||||
|
// 显示缩放提示
|
||||||
|
this.showScaleTip = true
|
||||||
|
if (this.tipTimer) {
|
||||||
|
clearTimeout(this.tipTimer)
|
||||||
|
}
|
||||||
|
this.tipTimer = setTimeout(() => {
|
||||||
|
this.showScaleTip = false
|
||||||
|
}, 1500)
|
||||||
|
|
||||||
|
console.log('缩放:', {oldScale, newScale, x: this.x, y: this.y})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 下载图片
|
||||||
|
downloadImage() {
|
||||||
|
uni.showLoading({
|
||||||
|
title: '下载中,请稍等...',
|
||||||
|
mask: true,
|
||||||
|
})
|
||||||
|
|
||||||
|
// 先获取图片信息(如果是网络图片需要先下载)
|
||||||
|
uni.downloadFile({
|
||||||
|
url: this.imageUrl,
|
||||||
|
success: (res) => {
|
||||||
|
if (res.statusCode === 200) {
|
||||||
|
// 保存图片到相册
|
||||||
|
uni.saveImageToPhotosAlbum({
|
||||||
|
filePath: res.tempFilePath,
|
||||||
|
success: () => {
|
||||||
|
uni.hideLoading()
|
||||||
|
uni.showToast({
|
||||||
|
title: '保存成功',
|
||||||
|
icon: 'success',
|
||||||
|
})
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
uni.hideLoading()
|
||||||
|
console.error('保存失败', err)
|
||||||
|
|
||||||
|
// 处理用户拒绝权限的情况
|
||||||
|
if (err.errMsg.includes('auth deny')) {
|
||||||
|
uni.showModal({
|
||||||
|
title: '提示',
|
||||||
|
content: '需要您授权保存图片到相册',
|
||||||
|
success: (res) => {
|
||||||
|
if (res.confirm) {
|
||||||
|
uni.openSetting({
|
||||||
|
success: (settingRes) => {
|
||||||
|
console.log('打开设置页面', settingRes)
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
uni.showToast({
|
||||||
|
title: '保存失败',
|
||||||
|
icon: 'none',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
uni.hideLoading()
|
||||||
|
uni.showToast({
|
||||||
|
title: '下载失败',
|
||||||
|
icon: 'none',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
uni.hideLoading()
|
||||||
|
console.error('下载失败', err)
|
||||||
|
uni.showToast({
|
||||||
|
title: '下载失败',
|
||||||
|
icon: 'none',
|
||||||
|
})
|
||||||
|
},
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
// 页面返回前清理定时器
|
||||||
|
onUnload() {
|
||||||
|
if (this.tipTimer) {
|
||||||
|
clearTimeout(this.tipTimer)
|
||||||
|
}
|
||||||
|
if (this.animationTimer) {
|
||||||
|
cancelAnimationFrame(this.animationTimer)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.preview-container {
|
||||||
|
position: relative;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background: #000;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.movable-area {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.movable-view {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
// 添加硬件加速
|
||||||
|
transform: translateZ(0);
|
||||||
|
will-change: transform;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-wrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
// 添加硬件加速
|
||||||
|
transform: translateZ(0) rotate(90deg);
|
||||||
|
will-change: transform;
|
||||||
|
backface-visibility: hidden;
|
||||||
|
-webkit-backface-visibility: hidden;
|
||||||
|
transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-img {
|
||||||
|
display: block;
|
||||||
|
// 添加硬件加速
|
||||||
|
transform: translateZ(0);
|
||||||
|
will-change: transform;
|
||||||
|
backface-visibility: hidden;
|
||||||
|
-webkit-backface-visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 按钮组
|
||||||
|
.btn-group {
|
||||||
|
position: fixed;
|
||||||
|
top: 30rpx;
|
||||||
|
right: 30rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 20rpx;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 通用按钮样式
|
||||||
|
.btn {
|
||||||
|
width: 70rpx;
|
||||||
|
height: 70rpx;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
// 按钮不参与动画
|
||||||
|
transform: translateZ(0);
|
||||||
|
transition: background-color 0.2s ease;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background: rgba(0, 0, 0, 0.8);
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-icon {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 40rpx;
|
||||||
|
line-height: 1;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 缩小按钮
|
||||||
|
.zoom-out-btn {
|
||||||
|
.btn-icon {
|
||||||
|
font-size: 50rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 放大按钮
|
||||||
|
.zoom-in-btn {
|
||||||
|
.btn-icon {
|
||||||
|
font-size: 40rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 下载按钮
|
||||||
|
.download-btn {
|
||||||
|
.btn-icon {
|
||||||
|
font-size: 35rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 缩放提示
|
||||||
|
.scale-tip {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 100rpx;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%) translateZ(0);
|
||||||
|
background: rgba(0, 0, 0, 0.6);
|
||||||
|
color: #fff;
|
||||||
|
padding: 10rpx 30rpx;
|
||||||
|
border-radius: 40rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
z-index: 1000;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
animation: fadeInOut 1.5s ease;
|
||||||
|
// 提示不参与动画
|
||||||
|
will-change: opacity;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeInOut {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
15% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
85% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
153
pages/message1/comp/steadyStateDetails.vue
Normal file
@@ -0,0 +1,153 @@
|
|||||||
|
<template>
|
||||||
|
<Cn-page :loading="loading">
|
||||||
|
<view class="detail" slot="body">
|
||||||
|
<view class="detail-content" style="font-size: 32rpx">
|
||||||
|
<!-- <view class="detail-content-title mb20">发生时间</view> -->
|
||||||
|
<view>{{ detail.statisticsDate }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="detail-content">
|
||||||
|
<view class="detail-content-title mb20">基础信息</view>
|
||||||
|
<view class="mb5"> 监测点名称:{{ detail.lineName }}</view>
|
||||||
|
<view class="mb5"> 设备名称:{{ detail.devName }} </view>
|
||||||
|
<view class="mb5"> 项目名称:{{ detail.projectName }} </view>
|
||||||
|
<view class="mb5"> 工程名称:{{ detail.engineeringName }} </view>
|
||||||
|
<view class="mb5" style="display: flex">
|
||||||
|
越限详情:
|
||||||
|
<view style="flex: 1">{{ detail.overLimitDesc }}</view></view
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
<view class="detail-content">
|
||||||
|
<view class="detail-content-title mb20"
|
||||||
|
>指标越限详情<text class="prompt">(仅显示较为严重的10次)</text></view
|
||||||
|
>
|
||||||
|
|
||||||
|
<uni-collapse accordion v-model="collapseValue">
|
||||||
|
<uni-collapse-item :title="item.targetName" v-for="item in list">
|
||||||
|
<view class="data-table">
|
||||||
|
<view class="table-header">
|
||||||
|
<text>时间</text>
|
||||||
|
<text>数据类型</text>
|
||||||
|
<text v-if="!item.harmDetailList[0].hasT">A相</text>
|
||||||
|
<text v-if="!item.harmDetailList[0].hasT">B相</text>
|
||||||
|
<text v-if="!item.harmDetailList[0].hasT">C相</text>
|
||||||
|
<text v-if="item.harmDetailList[0].hasT">总相</text>
|
||||||
|
<text>限值</text>
|
||||||
|
</view>
|
||||||
|
<view class="table-row" v-for="value in item.harmDetailList">
|
||||||
|
<text>{{ value.statisticsTime }}</text>
|
||||||
|
<text>{{ value.valueType }}</text>
|
||||||
|
<text v-if="!value.hasT">{{ value.dataA }}</text>
|
||||||
|
<text v-if="!value.hasT">{{ value.dataB }}</text>
|
||||||
|
<text v-if="!value.hasT">{{ value.dataC }}</text>
|
||||||
|
<text v-if="value.hasT">{{ value.dataT }}</text>
|
||||||
|
<text>{{ value.overLimitData }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</uni-collapse-item>
|
||||||
|
</uni-collapse>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</Cn-page>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { updateStatus, queryHarmonicDetail } from '@/common/api/message'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading: true,
|
||||||
|
detail: {},
|
||||||
|
list: [],
|
||||||
|
collapseValue: '0',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
// console.log(options.detail)
|
||||||
|
this.detail = JSON.parse(decodeURIComponent(options.detail).replace(/百分比/g, '%'))
|
||||||
|
this.init()
|
||||||
|
if (this.detail.isRead != 1) {
|
||||||
|
updateStatus({
|
||||||
|
eventIds: [this.detail.eventId],
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init() {
|
||||||
|
queryHarmonicDetail({
|
||||||
|
lineId: this.detail.lineId,
|
||||||
|
time: this.detail.statisticsDate,
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
this.list = res.data
|
||||||
|
this.loading = false
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
this.loading = false
|
||||||
|
})
|
||||||
|
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.detail {
|
||||||
|
padding: 20rpx 0;
|
||||||
|
|
||||||
|
.detail-content {
|
||||||
|
padding: 20rpx;
|
||||||
|
background: #fff;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
|
||||||
|
.detail-content-title {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #111;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.limit {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: end;
|
||||||
|
width: 450rpx;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
.prompt {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #111;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.data-table {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
overflow: hidden;
|
||||||
|
.table-header,
|
||||||
|
.table-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 20rpx 0rpx;
|
||||||
|
border-bottom: 1rpx solid #eee;
|
||||||
|
text {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 26rpx;
|
||||||
|
// color: #333;
|
||||||
|
&:first-child {
|
||||||
|
// text-align: left;
|
||||||
|
flex: 1.2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.table-header {
|
||||||
|
padding: 0rpx;
|
||||||
|
padding-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/deep/ .uni-collapse-item__title-text {
|
||||||
|
font-weight: 700;
|
||||||
|
span {
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
98
pages/message1/comp/transientDetails.vue
Normal file
@@ -0,0 +1,98 @@
|
|||||||
|
<template>
|
||||||
|
<Cn-page :loading="loading">
|
||||||
|
<view class="detail" slot="body">
|
||||||
|
<view class="detail-content" style="font-size: 32rpx">
|
||||||
|
<!-- <view class="detail-content-title mb20">发生时间</view> -->
|
||||||
|
<view>{{ detail.startTime }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="detail-content">
|
||||||
|
<view class="detail-content-title mb20">基础信息</view>
|
||||||
|
<view class="mb5"> 设备名称:{{ detail.equipmentName }}</view>
|
||||||
|
<view class="mb5"> 项目名称:{{ detail.projectName }} </view>
|
||||||
|
<view class="mb5"> 工程名称:{{ detail.engineeringName }} </view>
|
||||||
|
<view class="mb5"> 暂态类型:{{ detail.showName }}</view>
|
||||||
|
<view class="mb5"> 持续时间:{{ detail.evtParamTm }}</view>
|
||||||
|
<view class="mb5"> 幅值:{{ detail.evtParamVVaDepth }}</view>
|
||||||
|
<view class="mb5"> 相别:{{ detail.evtParamPhase }}</view>
|
||||||
|
<!-- <view class="mb5" v-for="(item, textIndex) in detail.dataSet" :key="textIndex">
|
||||||
|
{{ item.showName + ':' + (item.value == 3.1415926 ? '-' : item.value) + (item.unit || '') }}
|
||||||
|
</view> -->
|
||||||
|
</view>
|
||||||
|
<view class="detail-content">
|
||||||
|
<view class="detail-content-title mb20">瞬时波形图</view>
|
||||||
|
<image
|
||||||
|
style="width: 100%"
|
||||||
|
:src="detail.instantPics"
|
||||||
|
mode="widthFix"
|
||||||
|
v-if="detail.instantPics"
|
||||||
|
@click="previewImage(detail.instantPics)"
|
||||||
|
/>
|
||||||
|
<text v-else>暂无</text>
|
||||||
|
</view>
|
||||||
|
<view class="detail-content">
|
||||||
|
<view class="detail-content-title mb20">RMS波形图</view>
|
||||||
|
<image
|
||||||
|
style="width: 100%"
|
||||||
|
:src="detail.rmsPics"
|
||||||
|
mode="widthFix"
|
||||||
|
v-if="detail.rmsPics"
|
||||||
|
@click="previewImage(detail.rmsPics)"
|
||||||
|
/>
|
||||||
|
<text v-else>暂无</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</Cn-page>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { updateStatus } from '@/common/api/message'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading: true,
|
||||||
|
detail: {},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
// console.log(options.detail)
|
||||||
|
this.detail = JSON.parse(decodeURIComponent(options.detail).replace(/百分比/g, '%'))
|
||||||
|
this.detail.rmsPics && (this.detail.rmsPics = this.$config.static + this.detail.rmsPics)
|
||||||
|
this.detail.instantPics && (this.detail.instantPics = this.$config.static + this.detail.instantPics)
|
||||||
|
|
||||||
|
this.loading = false
|
||||||
|
if (this.detail.status != 1) {
|
||||||
|
updateStatus({
|
||||||
|
eventIds: [this.detail.id],
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
previewImage(url) {
|
||||||
|
// uni.previewImage({
|
||||||
|
// urls: [url],
|
||||||
|
// })
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/message1/comp/preview?url=${encodeURIComponent(url)}`,
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.detail {
|
||||||
|
padding: 20rpx 0;
|
||||||
|
|
||||||
|
.detail-content {
|
||||||
|
padding: 20rpx;
|
||||||
|
background: #fff;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
|
||||||
|
.detail-content-title {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #111;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
197
pages/message1/index.scss
Normal file
@@ -0,0 +1,197 @@
|
|||||||
|
/* 整体容器:横向排列,间距均匀 */
|
||||||
|
.statistics {
|
||||||
|
display: flex;
|
||||||
|
gap: 20rpx; /* 盒子之间的间距 */
|
||||||
|
/* 通用盒子样式 */
|
||||||
|
.box {
|
||||||
|
flex: 1; /* 四个盒子等分宽度 */
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 130rpx;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 第一个盒子的特殊样式(蓝色背景) */
|
||||||
|
.box:first-child {
|
||||||
|
flex: 1.7;
|
||||||
|
}
|
||||||
|
.boxClick {
|
||||||
|
background-color: $uni-theme-color;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 数字样式 */
|
||||||
|
.num {
|
||||||
|
font-size: 38rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1.2;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 标签文字样式 */
|
||||||
|
.label {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: inherit; /* 继承父元素颜色,适配蓝色背景 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* 列表容器 */
|
||||||
|
.event-list {
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
box-sizing: border-box;
|
||||||
|
/* 通用项样式 */
|
||||||
|
/deep/ .uni-card:first-of-type {
|
||||||
|
margin-top: 0 !important;
|
||||||
|
}
|
||||||
|
/deep/ .uni-card {
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
/* 头部:图标 + 信息 + 操作 */
|
||||||
|
.event-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 图标区域(按类型区分背景色) */
|
||||||
|
.event-icon {
|
||||||
|
position: relative;
|
||||||
|
width: 120rpx;
|
||||||
|
height: 120rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
.badge1 {
|
||||||
|
position: absolute;
|
||||||
|
top: -10rpx;
|
||||||
|
right: -10rpx;
|
||||||
|
width: 20rpx;
|
||||||
|
height: 20rpx;
|
||||||
|
background-color: #ff3b30; /* 红色徽章 */
|
||||||
|
|
||||||
|
border-radius: 20rpx;
|
||||||
|
}
|
||||||
|
/* 电压暂降 - 蓝色系 */
|
||||||
|
.sag .event-icon {
|
||||||
|
background-color: #2563eb20;
|
||||||
|
}
|
||||||
|
/* 电压暂升 - 橙色系 */
|
||||||
|
.swell .event-icon {
|
||||||
|
background-color: #e6a23c20;
|
||||||
|
}
|
||||||
|
.interrupt .event-icon {
|
||||||
|
background-color: #00000020;
|
||||||
|
}
|
||||||
|
.transient .event-icon {
|
||||||
|
background-color: #8b5cf620;
|
||||||
|
}
|
||||||
|
.unknown .event-icon {
|
||||||
|
background-color: #6b728020;
|
||||||
|
}
|
||||||
|
.event-icon image {
|
||||||
|
width: 48rpx;
|
||||||
|
height: 48rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 信息区域 */
|
||||||
|
.event-info {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.event-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 5rpx;
|
||||||
|
flex-wrap: wrap; /* 适配小屏,防止文字溢出 */
|
||||||
|
}
|
||||||
|
.event-id {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #333333;
|
||||||
|
margin-right: 16rpx;
|
||||||
|
}
|
||||||
|
/* 标签样式(按类型区分) */
|
||||||
|
.event-tag {
|
||||||
|
font-size: 20rpx;
|
||||||
|
padding: 0rpx 10rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
color: #ffffff;
|
||||||
|
height: 38rpx;
|
||||||
|
}
|
||||||
|
.sag-tag {
|
||||||
|
background-color: #2563eb20;
|
||||||
|
color: #2563eb;
|
||||||
|
}
|
||||||
|
.swell-tag {
|
||||||
|
background-color: #e6a23c20;
|
||||||
|
color: #e6a23c;
|
||||||
|
}
|
||||||
|
.interrupt-tag {
|
||||||
|
background-color: #6b728020;
|
||||||
|
color: #6b7280;
|
||||||
|
}
|
||||||
|
.transient-tag {
|
||||||
|
background-color: #8b5cf620;
|
||||||
|
color: #8b5cf6;
|
||||||
|
}
|
||||||
|
.unknown-tag {
|
||||||
|
background-color: #6b728020;
|
||||||
|
color: #6b7280;
|
||||||
|
}
|
||||||
|
/* 描述文本 */
|
||||||
|
.event-desc {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8rpx;
|
||||||
|
}
|
||||||
|
.event-desc text {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666666;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 操作按钮 */
|
||||||
|
.event-action {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: #999999;
|
||||||
|
font-size: 40rpx;
|
||||||
|
/* 点击反馈 */
|
||||||
|
touch-action: manipulation;
|
||||||
|
}
|
||||||
|
.event-action:active {
|
||||||
|
color: #376cf3;
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 详情文本 */
|
||||||
|
.event-detail {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666666;
|
||||||
|
line-height: 1.5;
|
||||||
|
padding-top: 10rpx;
|
||||||
|
border-top: 1rpx solid #f0f0f0;
|
||||||
|
word-wrap: break-word; /* 自动换行,防止长文本溢出 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.smallLabel {
|
||||||
|
padding: 0 20rpx 20rpx 20rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
.segmented-control {
|
||||||
|
flex: 1;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
height: 58rpx;
|
||||||
|
}
|
||||||
|
.uni-input {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #2563eb;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
147
pages/message1/run.vue
Normal file
@@ -0,0 +1,147 @@
|
|||||||
|
<template>
|
||||||
|
<view style="position: relative">
|
||||||
|
<!-- 运行事件 -->
|
||||||
|
|
||||||
|
<!-- 卡片 -->
|
||||||
|
<scroll-view
|
||||||
|
scroll-y="true"
|
||||||
|
@refresherrefresh="refresherrefresh"
|
||||||
|
:refresher-triggered="triggered"
|
||||||
|
refresher-enabled="true"
|
||||||
|
class="event-list"
|
||||||
|
:style="{ height: 'calc(100vh - ' + (navHeight + 10) + 'px)', overflow: 'auto' }"
|
||||||
|
>
|
||||||
|
<!-- 循环渲染事件项 -->
|
||||||
|
<uni-card
|
||||||
|
class="event-item"
|
||||||
|
:class="item.type"
|
||||||
|
v-for="(item, index) in store.data"
|
||||||
|
:key="index"
|
||||||
|
@click="jump(item)"
|
||||||
|
>
|
||||||
|
<!-- 头部:图标 + 信息 + 操作 -->
|
||||||
|
<view class="event-header">
|
||||||
|
<view class="event-icon">
|
||||||
|
<!-- 动态图标:根据类型切换 -->
|
||||||
|
<uni-icons custom-prefix="iconfont" type="icon-shebei" size="35" color="#10B981"></uni-icons>
|
||||||
|
<view class="badge1" v-if="item.status == 0"> </view>
|
||||||
|
</view>
|
||||||
|
<view class="event-info">
|
||||||
|
<view class="event-title">
|
||||||
|
<text class="event-id">{{ item.equipmentName }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="event-desc">
|
||||||
|
<text>工程名称:{{ item.engineeringName }}</text>
|
||||||
|
<text>项目名称:{{ item.projectName }}</text>
|
||||||
|
<text>事件时间:{{ item.startTime }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 详情区域 -->
|
||||||
|
<view class="event-detail">
|
||||||
|
<text> {{ item.showName }} </text>
|
||||||
|
</view>
|
||||||
|
</uni-card>
|
||||||
|
<uni-load-more
|
||||||
|
v-if="store.status == 'loading' || (store.data && store.data.length > 0)"
|
||||||
|
:status="store.status"
|
||||||
|
></uni-load-more>
|
||||||
|
<Cn-empty v-else style="top: 20%"></Cn-empty>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import list from '@/common/js/list'
|
||||||
|
import { updateStatus } from '@/common/api/message'
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
props: {
|
||||||
|
navHeight: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
selectValue: {
|
||||||
|
type: Object,
|
||||||
|
// default: () => {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mixins: [list],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
triggered: true,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
// 查詢
|
||||||
|
init() {
|
||||||
|
this.store = this.DataSource('/cs-harmonic-boot/eventUser/queryEventpage')
|
||||||
|
this.store.params.type = 2
|
||||||
|
this.store.params.pageSize = 10000
|
||||||
|
this.store.params.sortField = this.sort
|
||||||
|
this.store.params.engineeringid = this.selectValue.engineeringId
|
||||||
|
this.store.params.projectId = this.selectValue.projectId
|
||||||
|
this.store.params.deviceId = this.selectValue.deviceId
|
||||||
|
this.store.params.lineId = this.selectValue.lineId
|
||||||
|
this.store.params.startTime = this.$util.getMonthFirstAndLastDay(this.selectValue.date).firstDay
|
||||||
|
this.store.params.endTime = this.$util.getMonthFirstAndLastDay(this.selectValue.date).lastDay
|
||||||
|
this.store.loadedCallback = () => {
|
||||||
|
this.loading = false
|
||||||
|
}
|
||||||
|
this.store.reload()
|
||||||
|
},
|
||||||
|
jump(item) {
|
||||||
|
if (item.status != '1') {
|
||||||
|
item.status = '1'
|
||||||
|
updateStatus({
|
||||||
|
eventIds: [item.id],
|
||||||
|
})
|
||||||
|
this.$emit('getDevCount')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 下拉
|
||||||
|
refresherrefresh() {
|
||||||
|
this.triggered = true
|
||||||
|
uni.startPullDownRefresh()
|
||||||
|
setTimeout(() => {
|
||||||
|
this.triggered = false
|
||||||
|
}, 500)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
selectValue: {
|
||||||
|
handler(val, oldVal) {
|
||||||
|
if (Object.keys(val).length === 0) return
|
||||||
|
this.init()
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import './index.scss';
|
||||||
|
/* 列表容器 */
|
||||||
|
.event-list {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
|
||||||
|
/* 头部:图标 + 信息 + 操作 */
|
||||||
|
|
||||||
|
/* 图标区域(按类型区分背景色) */
|
||||||
|
.event-icon {
|
||||||
|
// width: 90rpx;
|
||||||
|
// height: 90rpx;
|
||||||
|
|
||||||
|
background-color: #10b98120;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/deep/ .uni-scroll-view-refresher {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
205
pages/message1/steadyState.vue
Normal file
@@ -0,0 +1,205 @@
|
|||||||
|
<template>
|
||||||
|
<view style="position: relative">
|
||||||
|
<!-- 稳态 -->
|
||||||
|
<view class="transientBox">
|
||||||
|
<view class="statistics pd20">
|
||||||
|
<view class="box" :class="{ boxClick: item.label == '稳态数量' }" v-for="item in list">
|
||||||
|
<text class="num">{{ item.value }}</text>
|
||||||
|
<text class="label">{{ item.label }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 卡片 -->
|
||||||
|
<scroll-view
|
||||||
|
scroll-y="true"
|
||||||
|
@refresherrefresh="refresherrefresh"
|
||||||
|
:refresher-triggered="triggered"
|
||||||
|
refresher-enabled="true"
|
||||||
|
class="event-list"
|
||||||
|
:style="{ height: 'calc(100vh - ' + (navHeight + height) + 'px)', overflow: 'auto' }"
|
||||||
|
>
|
||||||
|
<!-- 循环渲染事件项 -->
|
||||||
|
<uni-card
|
||||||
|
class="event-item"
|
||||||
|
:class="item.type"
|
||||||
|
v-for="(item, index) in store.data"
|
||||||
|
:key="index"
|
||||||
|
@click="jump(item)"
|
||||||
|
>
|
||||||
|
<!-- 头部:图标 + 信息 + 操作 -->
|
||||||
|
<view class="event-header">
|
||||||
|
<view class="event-icon">
|
||||||
|
<!-- 动态图标:根据类型切换 -->
|
||||||
|
<uni-icons
|
||||||
|
custom-prefix="iconfont"
|
||||||
|
type="icon-kouanjiancedian"
|
||||||
|
size="40"
|
||||||
|
color="#E6A23C"
|
||||||
|
></uni-icons>
|
||||||
|
<view class="badge1" v-if="item.isRead == 0"> </view>
|
||||||
|
</view>
|
||||||
|
<view class="event-info">
|
||||||
|
<view class="event-title">
|
||||||
|
<text class="event-id">{{ item.lineName }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="event-desc">
|
||||||
|
<text>工程名称:{{ item.engineeringName }}</text>
|
||||||
|
<text>项目名称:{{ item.projectName }}</text>
|
||||||
|
<text>设备名称:{{ item.devName }}</text>
|
||||||
|
<!-- <text>统计日期:{{ item.statisticsDate }}</text> -->
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="event-action">
|
||||||
|
<!-- <uni-icons type="search" size="25" color="#376cf3"></uni-icons> -->
|
||||||
|
🔍
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 详情区域 -->
|
||||||
|
<view class="event-detail textBox">
|
||||||
|
<text>{{ item.statisticsDate }}发生 {{ item.overLimitDesc }} </text>
|
||||||
|
</view>
|
||||||
|
</uni-card>
|
||||||
|
|
||||||
|
<uni-load-more
|
||||||
|
v-if="store.status == 'loading' || (store.data && store.data.length > 0)"
|
||||||
|
:status="store.status"
|
||||||
|
></uni-load-more>
|
||||||
|
<Cn-empty v-else style="top: 20%"></Cn-empty>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import list from '@/common/js/list'
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
props: {
|
||||||
|
navHeight: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
selectValue: {
|
||||||
|
type: Object,
|
||||||
|
// default: () => {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mixins: [list],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
height: 0,
|
||||||
|
list: [
|
||||||
|
{ value: 0, label: '稳态数量' },
|
||||||
|
{ value: 0, label: '越限天数' },
|
||||||
|
{ value: 0, label: '越限测点数' },
|
||||||
|
],
|
||||||
|
triggered: true,
|
||||||
|
status: 'noMore', //more加载前 loading加载中 noMore加载后
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
uni.createSelectorQuery()
|
||||||
|
.select('.transientBox')
|
||||||
|
.boundingClientRect((rect) => {
|
||||||
|
//
|
||||||
|
// #ifdef H5
|
||||||
|
this.height = rect.height
|
||||||
|
// #endif
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
this.height = rect.height
|
||||||
|
// #endif
|
||||||
|
})
|
||||||
|
.exec()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
// "devId": "",
|
||||||
|
// "engineerId": "",
|
||||||
|
// "lineId": "",
|
||||||
|
// "projectId": "",
|
||||||
|
// "time": ""
|
||||||
|
// 查詢
|
||||||
|
init() {
|
||||||
|
this.store = this.DataSource('/cs-harmonic-boot/csHarmonic/queryHarmonicList')
|
||||||
|
this.store.params.pageSize = 10000
|
||||||
|
this.store.params.engineerId = this.selectValue.engineeringId
|
||||||
|
this.store.params.projectId = this.selectValue.projectId
|
||||||
|
this.store.params.devId = this.selectValue.deviceId
|
||||||
|
this.store.params.lineId = this.selectValue.lineId
|
||||||
|
this.store.params.time = this.selectValue.date
|
||||||
|
this.store.loadedCallback = () => {
|
||||||
|
this.list[0].value = this.store.copyData.harmonicNums
|
||||||
|
this.list[1].value = this.store.copyData.overDays
|
||||||
|
this.list[2].value = this.store.copyData.overLineNums
|
||||||
|
this.loading = false
|
||||||
|
}
|
||||||
|
this.store.reload()
|
||||||
|
},
|
||||||
|
|
||||||
|
jump(item) {
|
||||||
|
let str = JSON.stringify(item).replace(/%/g, '百分比')
|
||||||
|
item.status = '1'
|
||||||
|
|
||||||
|
uni.navigateTo({ url: '/pages/message1/comp/steadyStateDetails?detail=' + encodeURIComponent(str) })
|
||||||
|
},
|
||||||
|
// 下拉
|
||||||
|
refresherrefresh() {
|
||||||
|
this.triggered = true
|
||||||
|
uni.startPullDownRefresh()
|
||||||
|
setTimeout(() => {
|
||||||
|
this.triggered = false
|
||||||
|
}, 500)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
selectValue: {
|
||||||
|
handler(val, oldVal) {
|
||||||
|
if (Object.keys(val).length === 0) return
|
||||||
|
this.init()
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import './index.scss';
|
||||||
|
|
||||||
|
.box:first-child {
|
||||||
|
flex: 1.3 !important;
|
||||||
|
}
|
||||||
|
/* 列表容器 */
|
||||||
|
.event-list {
|
||||||
|
/* 头部:图标 + 信息 + 操作 */
|
||||||
|
.event-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 图标区域(按类型区分背景色) */
|
||||||
|
.event-icon {
|
||||||
|
background-color: #e6a23c20;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-tags {
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/deep/ .uni-scroll-view-refresher {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.textBox {
|
||||||
|
max-height: 110rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
/* 下面是溢出显示省略号关键样式 */
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 3; /* 控制最多显示几行,你可以改 2/3/4 */
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
299
pages/message1/transient.vue
Normal file
@@ -0,0 +1,299 @@
|
|||||||
|
<template>
|
||||||
|
<view style="position: relative">
|
||||||
|
<!-- 暂态 -->
|
||||||
|
<view class="transientBox">
|
||||||
|
<view class="statistics pd20">
|
||||||
|
<view
|
||||||
|
class="box"
|
||||||
|
:class="{ boxClick: filterValue == item.key }"
|
||||||
|
v-for="item in list"
|
||||||
|
@click="filterValue = item.key"
|
||||||
|
>
|
||||||
|
<!-- <text class="num">{{ item.value }}</text> -->
|
||||||
|
<text class="num">{{
|
||||||
|
store &&
|
||||||
|
store.data &&
|
||||||
|
store.data.filter((k) => (item.key == '' ? item : k.showName == item.key)).length
|
||||||
|
}}</text>
|
||||||
|
<text class="label">{{ item.label }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="smallLabel">
|
||||||
|
<uni-segmented-control
|
||||||
|
:current="curSub"
|
||||||
|
active-color="#376cf3"
|
||||||
|
:values="subsectionList"
|
||||||
|
@clickItem="sectionChange"
|
||||||
|
v-if="subsectionList.length > 1"
|
||||||
|
/>
|
||||||
|
<view style="width: 180rpx">
|
||||||
|
<picker @change="bindPickerChange" :value="sort" :range="array" v-if="curSub == 0">
|
||||||
|
<view class="uni-input"
|
||||||
|
>{{ array[sort] }}排序
|
||||||
|
<uni-icons
|
||||||
|
custom-prefix="iconfont"
|
||||||
|
type="icon-paixu1"
|
||||||
|
size="10"
|
||||||
|
color="#2563EB"
|
||||||
|
></uni-icons>
|
||||||
|
</view>
|
||||||
|
</picker>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 卡片 -->
|
||||||
|
<scroll-view
|
||||||
|
scroll-y="true"
|
||||||
|
@refresherrefresh="refresherrefresh"
|
||||||
|
:refresher-triggered="triggered"
|
||||||
|
refresher-enabled="true"
|
||||||
|
class="event-list"
|
||||||
|
v-if="curSub == 0"
|
||||||
|
:style="{ height: 'calc(100vh - ' + (navHeight + height) + 'px)', overflow: 'auto' }"
|
||||||
|
>
|
||||||
|
<!-- 循环渲染事件项 -->
|
||||||
|
<uni-card
|
||||||
|
class="event-item"
|
||||||
|
:class="judgment(item.showName).type"
|
||||||
|
v-for="(item, index) in (store.data || []).filter((k) =>
|
||||||
|
filterValue == '' ? k : k.showName == filterValue,
|
||||||
|
)"
|
||||||
|
:key="index"
|
||||||
|
@click="jump(item)"
|
||||||
|
>
|
||||||
|
<!-- 头部:图标 + 信息 + 操作 -->
|
||||||
|
<view class="event-header">
|
||||||
|
<view class="event-icon">
|
||||||
|
<!-- 动态图标:根据类型切换 -->
|
||||||
|
<uni-icons
|
||||||
|
:custom-prefix="'iconfont'"
|
||||||
|
:type="judgment(item.showName).icon"
|
||||||
|
:color="judgment(item.showName).color"
|
||||||
|
:size="judgment(item.showName).size"
|
||||||
|
></uni-icons>
|
||||||
|
<!-- 0未读 1已读 -->
|
||||||
|
<view class="badge1" v-if="item.status == 0"> </view>
|
||||||
|
</view>
|
||||||
|
<view class="event-info">
|
||||||
|
<view class="event-title">
|
||||||
|
<text class="event-id">{{ item.equipmentName }}</text>
|
||||||
|
<text class="event-tag" :class="`${judgment(item.showName).type}-tag`">{{
|
||||||
|
item.showName
|
||||||
|
}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="event-desc">
|
||||||
|
<text>工程名称:{{ item.engineeringName }}</text>
|
||||||
|
<text>项目名称:{{ item.projectName }}</text>
|
||||||
|
<text>监测点名称:{{ item.lineName }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="event-action">
|
||||||
|
<!-- <uni-icons type="search" size="25" color="#376cf3"></uni-icons> -->
|
||||||
|
🔍
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 详情区域 -->
|
||||||
|
<view class="event-detail">
|
||||||
|
<text>
|
||||||
|
发生时间:{{ item.startTime }},幅值:{{ item.evtParamVVaDepth }},持续时间:{{
|
||||||
|
item.evtParamTm
|
||||||
|
}},相别:{{ item.evtParamPhase }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</uni-card>
|
||||||
|
<uni-load-more
|
||||||
|
v-if="store.status == 'loading' || (store.data && store.data.length > 0)"
|
||||||
|
:status="store.status"
|
||||||
|
></uni-load-more>
|
||||||
|
<Cn-empty v-else style="top: 20%"></Cn-empty>
|
||||||
|
</scroll-view>
|
||||||
|
<!-- ITIC 列表 -->
|
||||||
|
<ITIC
|
||||||
|
v-if="subsectionList[curSub] == 'ITIC'"
|
||||||
|
:store="store"
|
||||||
|
:filterValue="filterValue"
|
||||||
|
:style="{ height: 'calc(100vh - ' + (navHeight + height) + 'px)', overflow: 'auto' }"
|
||||||
|
></ITIC>
|
||||||
|
<!-- F47 列表 -->
|
||||||
|
<F47
|
||||||
|
v-if="subsectionList[curSub] == 'F47'"
|
||||||
|
:store="store"
|
||||||
|
:filterValue="filterValue"
|
||||||
|
:style="{ height: 'calc(100vh - ' + (navHeight + height) + 'px)', overflow: 'auto' }"
|
||||||
|
></F47>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import list from '@/common/js/list'
|
||||||
|
import { queryUserPushConfig } from '@/common/api/mine'
|
||||||
|
import ITIC from './comp/ITIC.vue'
|
||||||
|
import F47 from './comp/F47.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: { ITIC, F47 },
|
||||||
|
props: {
|
||||||
|
navHeight: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
selectValue: {
|
||||||
|
type: Object,
|
||||||
|
// default: () => {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mixins: [list],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
height: 0,
|
||||||
|
filterValue: '',
|
||||||
|
list: [
|
||||||
|
{ value: 0, label: '暂态数量', key: '' },
|
||||||
|
{ value: 0, label: '暂降', key: '电压暂降' },
|
||||||
|
{ value: 0, label: '中断', key: '电压中断' },
|
||||||
|
{ value: 0, label: '暂升', key: '电压暂升' },
|
||||||
|
],
|
||||||
|
curSub: 0,
|
||||||
|
subsectionList: [], //'列表', 'ITIC', 'F47'
|
||||||
|
status: 'noMore', //more加载前 loading加载中 noMore加载后
|
||||||
|
sort: 0,
|
||||||
|
triggered: true,
|
||||||
|
// config: {},
|
||||||
|
array: ['发生时间', '暂降深度', '持续时间'],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.getConfig()
|
||||||
|
uni.createSelectorQuery()
|
||||||
|
.select('.transientBox')
|
||||||
|
.boundingClientRect((rect) => {
|
||||||
|
//
|
||||||
|
// #ifdef H5
|
||||||
|
this.height = rect?.height + 12 || 0
|
||||||
|
// #endif
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
this.height = rect?.height + 12 || 0
|
||||||
|
// #endif
|
||||||
|
})
|
||||||
|
.exec()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
// 查詢
|
||||||
|
init() {
|
||||||
|
this.store = this.DataSource('/cs-harmonic-boot/eventUser/queryEventpage')
|
||||||
|
this.store.params.type = 0
|
||||||
|
this.store.params.pageSize = 10000
|
||||||
|
this.store.params.sortField = this.sort
|
||||||
|
this.store.params.engineeringid = this.selectValue.engineeringId
|
||||||
|
this.store.params.projectId = this.selectValue.projectId
|
||||||
|
this.store.params.deviceId = this.selectValue.deviceId
|
||||||
|
this.store.params.lineId = this.selectValue.lineId
|
||||||
|
this.store.params.startTime = this.$util.getMonthFirstAndLastDay(this.selectValue.date).firstDay
|
||||||
|
this.store.params.endTime = this.$util.getMonthFirstAndLastDay(this.selectValue.date).lastDay
|
||||||
|
this.store.loadedCallback = () => {
|
||||||
|
this.filterValue = ''
|
||||||
|
this.loading = false
|
||||||
|
}
|
||||||
|
this.store.reload()
|
||||||
|
},
|
||||||
|
getConfig() {
|
||||||
|
queryUserPushConfig().then((res) => {
|
||||||
|
// this.config = res.data
|
||||||
|
let list = [
|
||||||
|
'列表',
|
||||||
|
res.data.iticFunction == 1 ? 'ITIC' : '',
|
||||||
|
res.data.f47Function == 1 ? 'F47' : '',
|
||||||
|
].filter((item) => item)
|
||||||
|
this.curSub = !list[this.curSub] ? 0 : this.curSub
|
||||||
|
this.subsectionList = JSON.parse(JSON.stringify(list))
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
judgment(val, key) {
|
||||||
|
switch (val) {
|
||||||
|
case '电压暂降':
|
||||||
|
return {
|
||||||
|
type: 'sag',
|
||||||
|
icon: 'icon-a-svg4',
|
||||||
|
color: '#2563eb',
|
||||||
|
size: '25',
|
||||||
|
}
|
||||||
|
case '电压暂升':
|
||||||
|
return {
|
||||||
|
type: 'swell',
|
||||||
|
icon: 'icon-a-svg5',
|
||||||
|
color: '#e6a23c',
|
||||||
|
size: '25',
|
||||||
|
}
|
||||||
|
case '电压中断':
|
||||||
|
return {
|
||||||
|
type: 'interrupt',
|
||||||
|
icon: 'icon-zhongduan2',
|
||||||
|
color: '#6b7280',
|
||||||
|
size: '35',
|
||||||
|
}
|
||||||
|
case '瞬态':
|
||||||
|
return {
|
||||||
|
type: 'transient',
|
||||||
|
icon: 'icon-shuntaishijian',
|
||||||
|
color: '#8b5cf6',
|
||||||
|
size: '40',
|
||||||
|
}
|
||||||
|
case '未知':
|
||||||
|
return {
|
||||||
|
type: 'unknown',
|
||||||
|
icon: 'icon-wenhao',
|
||||||
|
color: '#6b7280',
|
||||||
|
size: '45',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 点击查看详情
|
||||||
|
jump(item) {
|
||||||
|
let str = JSON.stringify(item).replace(/%/g, '百分比')
|
||||||
|
item.status = '1'
|
||||||
|
uni.navigateTo({ url: '/pages/message1/comp/transientDetails?detail=' + encodeURIComponent(str) })
|
||||||
|
},
|
||||||
|
// 切换排序
|
||||||
|
bindPickerChange(e) {
|
||||||
|
this.sort = e.detail.value
|
||||||
|
this.init()
|
||||||
|
},
|
||||||
|
sectionChange(e) {
|
||||||
|
this.curSub = e.currentIndex
|
||||||
|
},
|
||||||
|
// 下拉
|
||||||
|
refresherrefresh() {
|
||||||
|
this.triggered = true
|
||||||
|
uni.startPullDownRefresh()
|
||||||
|
setTimeout(() => {
|
||||||
|
this.triggered = false
|
||||||
|
}, 500)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
this.curSub = 0
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
selectValue: {
|
||||||
|
handler(val, oldVal) {
|
||||||
|
if (Object.keys(val).length === 0) return
|
||||||
|
this.init()
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import './index.scss';
|
||||||
|
/deep/ .uni-scroll-view-refresher {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,28 +1,48 @@
|
|||||||
<template>
|
<template>
|
||||||
<Cn-page :loading="loading">
|
<Cn-page :loading="loading">
|
||||||
<view class="mine" slot="body">
|
<view class="mine" slot="body">
|
||||||
<view class="mine-nav" style="margin-top: 20rpx">
|
<view class="mine-nav mt20" style="border-bottom: none">
|
||||||
<view class="mine-nav-label">运行事件</view>
|
|
||||||
<switch style="transform: scale(0.8)" color="#376cf3" @change="change('runInfo')" :checked="config.runInfo === 1"/>
|
|
||||||
</view>
|
|
||||||
<view class="mine-nav" style="border-bottom: none">
|
|
||||||
<view class="mine-nav-label">暂态事件</view>
|
<view class="mine-nav-label">暂态事件</view>
|
||||||
<switch style="transform: scale(0.8)" color="#376cf3" @change="change('eventInfo')" :checked="config.eventInfo === 1"/>
|
<switch
|
||||||
|
style="transform: scale(0.8)"
|
||||||
|
color="#376cf3"
|
||||||
|
@change="change('eventInfo')"
|
||||||
|
:checked="config.eventInfo === 1"
|
||||||
|
/>
|
||||||
</view>
|
</view>
|
||||||
<view class="mine-nav" style="border-bottom: none">
|
<view class="mine-nav" style="border-bottom: none">
|
||||||
<view class="mine-nav-label">稳态事件</view>
|
<view class="mine-nav-label">稳态事件</view>
|
||||||
<switch style="transform: scale(0.8)" color="#376cf3" @change="change('harmonicInfo')" :checked="config.harmonicInfo === 1"/>
|
<switch
|
||||||
|
style="transform: scale(0.8)"
|
||||||
|
color="#376cf3"
|
||||||
|
@change="change('harmonicInfo')"
|
||||||
|
:checked="config.harmonicInfo === 1"
|
||||||
|
/>
|
||||||
</view>
|
</view>
|
||||||
<view class="mine-nav" style="border-bottom: none">
|
<view class="mine-nav" style="border-bottom: none">
|
||||||
<view class="mine-nav-label">设备告警</view>
|
<view class="mine-nav-label">运行告警</view>
|
||||||
<switch style="transform: scale(0.8)" color="#376cf3" @change="change('alarmInfo')" :checked="config.alarmInfo === 1"/>
|
<switch
|
||||||
|
style="transform: scale(0.8)"
|
||||||
|
color="#376cf3"
|
||||||
|
@change="change('alarmInfo')"
|
||||||
|
:checked="config.alarmInfo === 1"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
<view class="mine-nav" >
|
||||||
|
<view class="mine-nav-label">运行事件</view>
|
||||||
|
<switch
|
||||||
|
style="transform: scale(0.8)"
|
||||||
|
color="#376cf3"
|
||||||
|
@change="change('runInfo')"
|
||||||
|
:checked="config.runInfo === 1"
|
||||||
|
/>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</Cn-page>
|
</Cn-page>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {queryUserPushConfig, updatePushConfig} from '@/common/api/mine'
|
import { queryUserPushConfig, updatePushConfig } from '@/common/api/mine'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
@@ -33,34 +53,32 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
init() {
|
init() {
|
||||||
queryUserPushConfig().then(res => {
|
queryUserPushConfig().then((res) => {
|
||||||
console.log(123123,res);
|
|
||||||
this.config = res.data
|
this.config = res.data
|
||||||
console.log(this.config)
|
|
||||||
|
|
||||||
this.loading = false
|
this.loading = false
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
change(type) {
|
change(type) {
|
||||||
this.config[type] = this.config[type] === 1 ? 0 : 1
|
this.config[type] = this.config[type] === 1 ? 0 : 1
|
||||||
updatePushConfig(this.config).then(res => {
|
// updatePushConfig(this.config).then((res) => {
|
||||||
let str = ''
|
// let str = ''
|
||||||
switch (type){
|
// switch (type) {
|
||||||
case 'runInfo':
|
// case 'runInfo':
|
||||||
str = '运行事件'
|
// str = '运行事件'
|
||||||
break
|
// break
|
||||||
case 'eventInfo':
|
// case 'eventInfo':
|
||||||
str = '暂态事件'
|
// str = '暂态事件'
|
||||||
break
|
// break
|
||||||
case 'harmonicInfo':
|
// case 'harmonicInfo':
|
||||||
str = '稳态事件'
|
// str = '稳态事件'
|
||||||
break
|
// break
|
||||||
case 'alarmInfo':
|
// case 'alarmInfo':
|
||||||
str = '设备告警'
|
// str = '设备告警'
|
||||||
break
|
// break
|
||||||
}
|
// }
|
||||||
this.$util.toast(`${str}推送${this.config[type] === 1 ? '开启' : '关闭'}成功`)
|
// this.$util.toast(`${str}推送${this.config[type] === 1 ? '开启' : '关闭'}成功`)
|
||||||
})
|
// })
|
||||||
},
|
},
|
||||||
jump(type) {
|
jump(type) {
|
||||||
switch (type) {
|
switch (type) {
|
||||||
@@ -81,6 +99,11 @@ export default {
|
|||||||
break
|
break
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
onUnload() {
|
||||||
|
updatePushConfig(this.config).then((res) => {
|
||||||
|
// this.$util.toast(`配置修改成功!`)
|
||||||
|
})
|
||||||
|
},
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
this.init()
|
this.init()
|
||||||
|
|||||||
129
pages/mine/transientSetting.vue
Normal file
@@ -0,0 +1,129 @@
|
|||||||
|
<template>
|
||||||
|
<Cn-page :loading="loading">
|
||||||
|
<view class="mine" slot="body">
|
||||||
|
<view class="mine-nav" style="margin-top: 20rpx">
|
||||||
|
<view class="mine-nav-label">ITIC</view>
|
||||||
|
<switch
|
||||||
|
style="transform: scale(0.8)"
|
||||||
|
color="#376cf3"
|
||||||
|
@change="change('iticFunction')"
|
||||||
|
:checked="config.iticFunction === 1"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
<view class="mine-nav" style="border-bottom: none">
|
||||||
|
<view class="mine-nav-label">F47</view>
|
||||||
|
<switch
|
||||||
|
style="transform: scale(0.8)"
|
||||||
|
color="#376cf3"
|
||||||
|
@change="change('f47Function')"
|
||||||
|
:checked="config.f47Function === 1"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</Cn-page>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { queryUserPushConfig, updatePushConfig } from '@/common/api/mine'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading: true,
|
||||||
|
config: {},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
this.init()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init() {
|
||||||
|
queryUserPushConfig().then((res) => {
|
||||||
|
this.config = res.data
|
||||||
|
this.loading = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
change(type) {
|
||||||
|
this.config[type] = this.config[type] === 1 ? 0 : 1
|
||||||
|
// updatePushConfig(this.config).then((res) => {
|
||||||
|
// let str = ''
|
||||||
|
// switch (type) {
|
||||||
|
// case 'iticFunction':
|
||||||
|
// str = 'ITIC'
|
||||||
|
// break
|
||||||
|
// case 'f47Function':
|
||||||
|
// str = 'F47'
|
||||||
|
// break
|
||||||
|
// }
|
||||||
|
// this.$util.toast(`${str}配置${this.config[type] === 1 ? '开启' : '关闭'}成功`)
|
||||||
|
// })
|
||||||
|
},
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
this.init()
|
||||||
|
},
|
||||||
|
onUnload() {
|
||||||
|
updatePushConfig(this.config).then((res) => {
|
||||||
|
// this.$util.toast(`配置修改成功!`)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.mine {
|
||||||
|
.title {
|
||||||
|
padding: 0 20rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mine-header {
|
||||||
|
padding: 200rpx 34rpx 34rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background: $uni-theme-white;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
box-shadow: 0 4rpx 8rpx #e7e7e74c;
|
||||||
|
|
||||||
|
.mine-header-head {
|
||||||
|
margin-right: 30rpx;
|
||||||
|
height: 128rpx;
|
||||||
|
width: 128rpx;
|
||||||
|
border-radius: $uni-theme-radius;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mine-header-name {
|
||||||
|
margin-right: 30rpx;
|
||||||
|
flex: 1;
|
||||||
|
font-size: 36rpx;
|
||||||
|
color: #111;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mine-nav {
|
||||||
|
padding: 34rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background: $uni-theme-white;
|
||||||
|
border-bottom: 1rpx solid #e8e8e8;
|
||||||
|
|
||||||
|
&-icon {
|
||||||
|
margin-right: 30rpx;
|
||||||
|
height: 44rpx;
|
||||||
|
width: 44rpx;
|
||||||
|
border-radius: $uni-theme-radius;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-label {
|
||||||
|
margin-right: 30rpx;
|
||||||
|
flex: 1;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #111;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -135,7 +135,8 @@ export default {
|
|||||||
return this.$util.toast('请输入手机号!')
|
return this.$util.toast('请输入手机号!')
|
||||||
}
|
}
|
||||||
uni.showLoading({
|
uni.showLoading({
|
||||||
title: '请稍等',
|
title: '请稍等...',
|
||||||
|
mask: true,
|
||||||
})
|
})
|
||||||
apiGetYms({
|
apiGetYms({
|
||||||
phone: type == 5 ? this.formData.phone : this.formData.phone2,
|
phone: type == 5 ? this.formData.phone : this.formData.phone2,
|
||||||
|
|||||||
@@ -107,7 +107,8 @@ export default {
|
|||||||
methods: {
|
methods: {
|
||||||
getCode() {
|
getCode() {
|
||||||
uni.showLoading({
|
uni.showLoading({
|
||||||
title: '请稍等',
|
title: '请稍等...',
|
||||||
|
mask: true,
|
||||||
})
|
})
|
||||||
apiGetYms({
|
apiGetYms({
|
||||||
phone: this.formData.phone,
|
phone: this.formData.phone,
|
||||||
@@ -225,7 +226,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.login-box-input-btn {
|
.login-box-input-btn {
|
||||||
padding:0 40rpx;
|
padding: 0 40rpx;
|
||||||
margin-left: 40rpx;
|
margin-left: 40rpx;
|
||||||
background: $uni-theme-color;
|
background: $uni-theme-color;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|||||||
@@ -114,7 +114,8 @@ export default {
|
|||||||
return this.$util.toast('请输入手机号!')
|
return this.$util.toast('请输入手机号!')
|
||||||
}
|
}
|
||||||
uni.showLoading({
|
uni.showLoading({
|
||||||
title: '请稍等',
|
title: '请稍等...',
|
||||||
|
mask: true,
|
||||||
})
|
})
|
||||||
apiGetYms({
|
apiGetYms({
|
||||||
phone: this.formData.phone,
|
phone: this.formData.phone,
|
||||||
|
|||||||
@@ -121,7 +121,8 @@ export default {
|
|||||||
return this.$util.toast('请输入手机号!')
|
return this.$util.toast('请输入手机号!')
|
||||||
}
|
}
|
||||||
uni.showLoading({
|
uni.showLoading({
|
||||||
title: '请稍等',
|
title: '请稍等...',
|
||||||
|
mask: true,
|
||||||
})
|
})
|
||||||
apiGetYms({
|
apiGetYms({
|
||||||
phone: this.phone,
|
phone: this.phone,
|
||||||
|
|||||||
@@ -135,7 +135,8 @@ export default {
|
|||||||
return this.$util.toast('请输入手机号!')
|
return this.$util.toast('请输入手机号!')
|
||||||
}
|
}
|
||||||
uni.showLoading({
|
uni.showLoading({
|
||||||
title: '请稍等',
|
title: '请稍等...',
|
||||||
|
mask: true,
|
||||||
})
|
})
|
||||||
apiGetYms({
|
apiGetYms({
|
||||||
phone: this.formData.phone,
|
phone: this.formData.phone,
|
||||||
|
|||||||
@@ -7,7 +7,7 @@
|
|||||||
v-for="(item, index) in deviceList" :key="index" thumbnail="/static/device.png">
|
v-for="(item, index) in deviceList" :key="index" thumbnail="/static/device.png">
|
||||||
<!-- <text>{{ item.project }} {{ item.type }}</text> -->
|
<!-- <text>{{ item.project }} {{ item.type }}</text> -->
|
||||||
</uni-card>
|
</uni-card>
|
||||||
<uni-load-more status="nomore"></uni-load-more>
|
<!-- <uni-load-more status="nomore"></uni-load-more> -->
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
BIN
static/background.png
Normal file
|
After Width: | Height: | Size: 32 KiB |
105
static/iconfont/iconfont.css
Normal file
@@ -0,0 +1,105 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: 'iconfont'; /* Project id 5126335 */
|
||||||
|
src: url('/static/iconfont/iconfont.ttf') format('truetype');
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconfont {
|
||||||
|
font-family: "iconfont" !important;
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-baogaoguanli:before {
|
||||||
|
content: "\e663";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-a-svg5:before {
|
||||||
|
content: "\e601";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-a-svg4:before {
|
||||||
|
content: "\e600";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-shebei4:before {
|
||||||
|
content: "\e719";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-shebeizhuangtai:before {
|
||||||
|
content: "\ec23";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-shebei3:before {
|
||||||
|
content: "\e62e";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-zj:before {
|
||||||
|
content: "\e79a";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-zs:before {
|
||||||
|
content: "\e79b";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-zhongduan2:before {
|
||||||
|
content: "\e6c8";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-wenhao:before {
|
||||||
|
content: "\e637";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-shuntaishijian:before {
|
||||||
|
content: "\e6ff";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-zaixianjianceshebei:before {
|
||||||
|
content: "\e683";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-shebei1:before {
|
||||||
|
content: "\e74b";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-shebei2:before {
|
||||||
|
content: "\e68c";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-paixu1:before {
|
||||||
|
content: "\e60c";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-gongcheng:before {
|
||||||
|
content: "\e61d";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-zhongduan1:before {
|
||||||
|
content: "\e6c2";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-shangsheng:before {
|
||||||
|
content: "\e6cd";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-xiajiang:before {
|
||||||
|
content: "\e799";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-shebei:before {
|
||||||
|
content: "\e665";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-zhongduan:before {
|
||||||
|
content: "\e6cf";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-terminal-box-fill:before {
|
||||||
|
content: "\e776";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-kouanjiancedian:before {
|
||||||
|
content: "\e672";
|
||||||
|
}
|
||||||
|
|
||||||
BIN
static/iconfont/iconfont.ttf
Normal file
BIN
static/reportIco.png
Normal file
|
After Width: | Height: | Size: 4.5 KiB |
BIN
static/reportIco1.png
Normal file
|
After Width: | Height: | Size: 4.7 KiB |
1
static/rotate_left.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1742364146698" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10793" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 992A480 480 0 0 1 32 512a32 32 0 0 1 64 0 415.36 415.36 0 1 0 64-224h121.6a32 32 0 0 1 0 64h-192A32 32 0 0 1 57.6 320V128a32 32 0 1 1 64 0v104.96A480 480 0 1 1 512 992z" fill="#ffffff" p-id="10794"></path></svg>
|
||||||
|
After Width: | Height: | Size: 550 B |
1
static/rotate_right.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1742364153829" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11007" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 992a480 480 0 1 1 390.4-759.04V128a32 32 0 0 1 64 0v192a32 32 0 0 1-32 32h-192a32 32 0 0 1 0-64h120.32a416 416 0 1 0 64 224 32 32 0 0 1 64 0A480 480 0 0 1 512 992z" fill="#ffffff" p-id="11008"></path></svg>
|
||||||
|
After Width: | Height: | Size: 545 B |
1
static/zoom_in.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1742365851977" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1652" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 1024C229.686652 1024 0 794.313348 0 512S229.686652 0 512 0s512 229.686652 512 512-229.686652 512-512 512z m0-967.541933C260.809348 56.458067 56.458067 260.809348 56.458067 512S260.809348 967.541933 512 967.541933 967.541933 763.190652 967.541933 512 763.190652 56.458067 512 56.458067z" fill="#ffffff" p-id="1653"></path><path d="M221.73627 483.776719h580.52746v56.458068H221.73627z" fill="#ffffff" p-id="1654"></path><path d="M483.776719 802.26373V221.73627h56.458068v580.52746z" fill="#ffffff" p-id="1655"></path></svg>
|
||||||
|
After Width: | Height: | Size: 859 B |
1
static/zoom_out.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1742365916587" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2693" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 0.006C229.233 0.006 0.006 229.233 0.006 512c0 282.766 229.228 511.993 511.994 511.993S1023.993 794.765 1023.993 512C1023.993 229.233 794.766 0.006 512 0.006z m319.607 831.601c-41.53 41.529-89.874 74.128-143.689 96.891-55.686 23.553-114.873 35.495-175.918 35.495s-120.233-11.942-175.918-35.495c-53.816-22.763-102.161-55.361-143.69-96.891-41.53-41.53-74.128-89.874-96.891-143.689C71.948 632.232 60.006 573.045 60.006 512s11.942-120.233 35.495-175.918c22.762-53.816 55.361-102.16 96.891-143.69s89.874-74.128 143.69-96.891C391.767 71.948 450.955 60.006 512 60.006s120.232 11.942 175.918 35.495c53.815 22.763 102.159 55.361 143.689 96.891 41.529 41.53 74.128 89.875 96.891 143.69 23.553 55.685 35.495 114.873 35.495 175.918s-11.942 120.232-35.495 175.918c-22.763 53.815-55.361 102.159-96.891 143.689z" p-id="2694" fill="#ffffff"></path><path d="M795.465 512c0 23.483-19.037 42.52-42.52 42.52h-481.89c-23.483 0-42.52-19.036-42.52-42.52 0-23.483 19.037-42.52 42.52-42.52h481.89c23.483 0 42.52 19.037 42.52 42.52z" p-id="2695" fill="#ffffff"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
27
uni.css
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
/**
|
||||||
|
* 这里是uni-app内置的常用样式变量
|
||||||
|
*
|
||||||
|
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
|
||||||
|
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
/**
|
||||||
|
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
|
||||||
|
*
|
||||||
|
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
|
||||||
|
*/
|
||||||
|
/* 颜色变量 */
|
||||||
|
/* 行为相关颜色 */
|
||||||
|
/* 文字基本颜色 */
|
||||||
|
/* 背景颜色 */
|
||||||
|
/* 边框颜色 */
|
||||||
|
/* 尺寸变量 */
|
||||||
|
/* 文字尺寸 */
|
||||||
|
/* 图片尺寸 */
|
||||||
|
/* Border Radius */
|
||||||
|
/* 水平间距 */
|
||||||
|
/* 垂直间距 */
|
||||||
|
/* 透明度 */
|
||||||
|
/* 文章场景相关 */
|
||||||
|
/* 全局配置 */
|
||||||
49
uni.scss
@@ -13,42 +13,48 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
/* 颜色变量 */
|
/* 颜色变量 */
|
||||||
|
@import 'uview-ui/theme.scss'; // 核心样式依赖此文
|
||||||
|
|
||||||
|
$u-primary: #376cf3;
|
||||||
|
$u-warning: #e8b956;
|
||||||
|
$u-success: #4cd964;
|
||||||
|
$u-error: #dd524d;
|
||||||
|
$u-info: #909399;
|
||||||
|
|
||||||
/* 行为相关颜色 */
|
/* 行为相关颜色 */
|
||||||
|
|
||||||
$uni-color-primary: #007aff;
|
$uni-color-primary: #007aff;
|
||||||
$uni-color-success: #4cd964;
|
$uni-color-success: #4cd964;
|
||||||
$uni-color-warning: #f0ad4e;
|
$uni-color-warning: #f0ad4e;
|
||||||
$uni-color-error: #dd524d;
|
$uni-color-error: #dd524d;
|
||||||
|
|
||||||
/* 文字基本颜色 */
|
/* 文字基本颜色 */
|
||||||
$uni-text-color:#333;//基本色
|
$uni-text-color: #333; //基本色
|
||||||
$uni-text-color-inverse:#fff;//反色
|
$uni-text-color-inverse: #fff; //反色
|
||||||
$uni-text-color-grey:#999;//辅助灰色,如加载更多的提示信息
|
$uni-text-color-grey: #999; //辅助灰色,如加载更多的提示信息
|
||||||
$uni-text-color-placeholder: #808080;
|
$uni-text-color-placeholder: #808080;
|
||||||
$uni-text-color-disable:#c0c0c0;
|
$uni-text-color-disable: #c0c0c0;
|
||||||
|
|
||||||
/* 背景颜色 */
|
/* 背景颜色 */
|
||||||
$uni-bg-color:#ffffff;
|
$uni-bg-color: #ffffff;
|
||||||
$uni-bg-color-grey:#f6f6f6;
|
$uni-bg-color-grey: #f6f6f6;
|
||||||
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
|
$uni-bg-color-hover: #f1f1f1; //点击状态颜色
|
||||||
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
|
$uni-bg-color-mask: rgba(0, 0, 0, 0.4); //遮罩颜色
|
||||||
|
|
||||||
/* 边框颜色 */
|
/* 边框颜色 */
|
||||||
$uni-border-color:#c8c7cc;
|
$uni-border-color: #c8c7cc;
|
||||||
|
|
||||||
/* 尺寸变量 */
|
/* 尺寸变量 */
|
||||||
|
|
||||||
/* 文字尺寸 */
|
/* 文字尺寸 */
|
||||||
$uni-font-size-sm:12px;
|
$uni-font-size-sm: 12px;
|
||||||
$uni-font-size-base:14px;
|
$uni-font-size-base: 14px;
|
||||||
$uni-font-size-lg:16;
|
$uni-font-size-lg: 16;
|
||||||
|
|
||||||
/* 图片尺寸 */
|
/* 图片尺寸 */
|
||||||
$uni-img-size-sm:20px;
|
$uni-img-size-sm: 20px;
|
||||||
$uni-img-size-base:26px;
|
$uni-img-size-base: 26px;
|
||||||
$uni-img-size-lg:40px;
|
$uni-img-size-lg: 40px;
|
||||||
|
|
||||||
/* Border Radius */
|
/* Border Radius */
|
||||||
$uni-border-radius-sm: 2px;
|
$uni-border-radius-sm: 2px;
|
||||||
@@ -70,13 +76,12 @@ $uni-spacing-col-lg: 12px;
|
|||||||
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
|
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
|
||||||
|
|
||||||
/* 文章场景相关 */
|
/* 文章场景相关 */
|
||||||
$uni-color-title: #2C405A; // 文章标题颜色
|
$uni-color-title: #2c405a; // 文章标题颜色
|
||||||
$uni-font-size-title:20px;
|
$uni-font-size-title: 20px;
|
||||||
$uni-color-subtitle: #555555; // 二级标题颜色
|
$uni-color-subtitle: #555555; // 二级标题颜色
|
||||||
$uni-font-size-subtitle:26px;
|
$uni-font-size-subtitle: 26px;
|
||||||
$uni-color-paragraph: #3F536E; // 文章段落颜色
|
$uni-color-paragraph: #3f536e; // 文章段落颜色
|
||||||
$uni-font-size-paragraph:15px;
|
$uni-font-size-paragraph: 15px;
|
||||||
|
|
||||||
|
|
||||||
/* 全局配置 */
|
/* 全局配置 */
|
||||||
|
|
||||||
|
|||||||
48
uni_modules/uni-collapse/changelog.md
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
## 1.4.8(2025-09-16)
|
||||||
|
- 修复 modelValue 修改会两次触发 change 事件的 Bug
|
||||||
|
## 1.4.7(2025-09-11)
|
||||||
|
- 修复 modelValue 修改不会触发更新的 Bug
|
||||||
|
## 1.4.6(2025-09-02)
|
||||||
|
- 修复 modelValue 修改不会触发 change 事件的 Bug
|
||||||
|
|
||||||
|
## 1.4.5(2025-09-02)
|
||||||
|
- 修复 非手风琴模式 不能设置 modeValue 为 [] 的 Bug (question/205130)
|
||||||
|
|
||||||
|
## 1.4.4(2024-03-20)
|
||||||
|
- 修复 titleBorder类型修正
|
||||||
|
## 1.4.3(2022-01-25)
|
||||||
|
- 修复 初始化的时候 ,open 属性失效的bug
|
||||||
|
## 1.4.2(2022-01-21)
|
||||||
|
- 修复 微信小程序resize后组件收起的bug
|
||||||
|
## 1.4.1(2021-11-22)
|
||||||
|
- 修复 vue3中个别scss变量无法找到的问题
|
||||||
|
## 1.4.0(2021-11-19)
|
||||||
|
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||||
|
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-collapse](https://uniapp.dcloud.io/component/uniui/uni-collapse)
|
||||||
|
## 1.3.3(2021-08-17)
|
||||||
|
- 优化 show-arrow 属性默认为true
|
||||||
|
## 1.3.2(2021-08-17)
|
||||||
|
- 新增 show-arrow 属性,控制是否显示右侧箭头
|
||||||
|
## 1.3.1(2021-07-30)
|
||||||
|
- 优化 vue3下小程序事件警告的问题
|
||||||
|
## 1.3.0(2021-07-30)
|
||||||
|
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||||
|
## 1.2.2(2021-07-21)
|
||||||
|
- 修复 由1.2.0版本引起的 change 事件返回 undefined 的Bug
|
||||||
|
## 1.2.1(2021-07-21)
|
||||||
|
- 优化 组件示例
|
||||||
|
## 1.2.0(2021-07-21)
|
||||||
|
- 新增 组件折叠动画
|
||||||
|
- 新增 value\v-model 属性 ,动态修改面板折叠状态
|
||||||
|
- 新增 title 插槽 ,可定义面板标题
|
||||||
|
- 新增 border 属性 ,显示隐藏面板内容分隔线
|
||||||
|
- 新增 title-border 属性 ,显示隐藏面板标题分隔线
|
||||||
|
- 修复 resize 方法失效的Bug
|
||||||
|
- 修复 change 事件返回参数不正确的Bug
|
||||||
|
- 优化 H5、App 平台自动更具内容更新高度,无需调用 reszie() 方法
|
||||||
|
## 1.1.7(2021-05-12)
|
||||||
|
- 新增 组件示例地址
|
||||||
|
## 1.1.6(2021-02-05)
|
||||||
|
- 优化 组件引用关系,通过uni_modules引用组件
|
||||||
|
## 1.1.5(2021-02-05)
|
||||||
|
- 调整为uni_modules目录规范
|
||||||
@@ -0,0 +1,402 @@
|
|||||||
|
<template>
|
||||||
|
<view class="uni-collapse-item">
|
||||||
|
<!-- onClick(!isOpen) -->
|
||||||
|
<view @click="onClick(!isOpen)" class="uni-collapse-item__title"
|
||||||
|
:class="{'is-open':isOpen &&titleBorder === 'auto' ,'uni-collapse-item-border':titleBorder !== 'none'}">
|
||||||
|
<view class="uni-collapse-item__title-wrap">
|
||||||
|
<slot name="title">
|
||||||
|
<view class="uni-collapse-item__title-box" :class="{'is-disabled':disabled}">
|
||||||
|
<image v-if="thumb" :src="thumb" class="uni-collapse-item__title-img" />
|
||||||
|
<text class="uni-collapse-item__title-text">{{ title }}</text>
|
||||||
|
</view>
|
||||||
|
</slot>
|
||||||
|
</view>
|
||||||
|
<view v-if="showArrow"
|
||||||
|
:class="{ 'uni-collapse-item__title-arrow-active': isOpen, 'uni-collapse-item--animation': showAnimation === true }"
|
||||||
|
class="uni-collapse-item__title-arrow">
|
||||||
|
<uni-icons :color="disabled?'#ddd':'#bbb'" size="14" type="bottom" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="uni-collapse-item__wrap" :class="{'is--transition':showAnimation}"
|
||||||
|
:style="{height: (isOpen?height:0) +'px'}">
|
||||||
|
<view :id="elId" ref="collapse--hook" class="uni-collapse-item__wrap-content"
|
||||||
|
:class="{open:isheight,'uni-collapse-item--border':border&&isOpen}">
|
||||||
|
<slot></slot>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
const dom = weex.requireModule('dom')
|
||||||
|
// #endif
|
||||||
|
/**
|
||||||
|
* CollapseItem 折叠面板子组件
|
||||||
|
* @description 折叠面板子组件
|
||||||
|
* @property {String} title 标题文字
|
||||||
|
* @property {String} thumb 标题左侧缩略图
|
||||||
|
* @property {String} name 唯一标志符
|
||||||
|
* @property {Boolean} open = [true|false] 是否展开组件
|
||||||
|
* @property {Boolean} titleBorder = [true|false] 是否显示标题分隔线
|
||||||
|
* @property {String} border = ['auto'|'show'|'none'] 是否显示分隔线
|
||||||
|
* @property {Boolean} disabled = [true|false] 是否展开面板
|
||||||
|
* @property {Boolean} showAnimation = [true|false] 开启动画
|
||||||
|
* @property {Boolean} showArrow = [true|false] 是否显示右侧箭头
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name: 'uniCollapseItem',
|
||||||
|
props: {
|
||||||
|
// 列表标题
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
name: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// 是否禁用
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
// 是否显示动画,app 端默认不开启动画,卡顿严重
|
||||||
|
showAnimation: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
// #endif
|
||||||
|
// #ifndef APP-PLUS
|
||||||
|
// 是否显示动画
|
||||||
|
showAnimation: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
// #endif
|
||||||
|
// 是否展开
|
||||||
|
open: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
// 缩略图
|
||||||
|
thumb: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// 标题分隔线显示类型
|
||||||
|
titleBorder: {
|
||||||
|
type: String,
|
||||||
|
default: 'auto'
|
||||||
|
},
|
||||||
|
border: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
showArrow: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
// TODO 随机生生元素ID,解决百度小程序获取同一个元素位置信息的bug
|
||||||
|
const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
|
||||||
|
return {
|
||||||
|
isOpen: false,
|
||||||
|
isheight: null,
|
||||||
|
height: 0,
|
||||||
|
elId,
|
||||||
|
nameSync: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
open(val) {
|
||||||
|
this.isOpen = val
|
||||||
|
this.onClick(val, 'init')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
updated(e) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.init(true)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.collapse = this.getCollapse()
|
||||||
|
this.oldHeight = 0
|
||||||
|
this.onClick(this.open, 'init')
|
||||||
|
},
|
||||||
|
// #ifndef VUE3
|
||||||
|
// TODO vue2
|
||||||
|
destroyed() {
|
||||||
|
if (this.__isUnmounted) return
|
||||||
|
this.uninstall()
|
||||||
|
},
|
||||||
|
// #endif
|
||||||
|
// #ifdef VUE3
|
||||||
|
// TODO vue3
|
||||||
|
unmounted() {
|
||||||
|
this.__isUnmounted = true
|
||||||
|
this.uninstall()
|
||||||
|
},
|
||||||
|
// #endif
|
||||||
|
mounted() {
|
||||||
|
if (!this.collapse) return
|
||||||
|
if (this.name !== '') {
|
||||||
|
this.nameSync = this.name
|
||||||
|
} else {
|
||||||
|
this.nameSync = this.collapse.childrens.length + ''
|
||||||
|
}
|
||||||
|
if (this.collapse.names.indexOf(this.nameSync) === -1) {
|
||||||
|
this.collapse.names.push(this.nameSync)
|
||||||
|
} else {
|
||||||
|
console.warn(`name 值 ${this.nameSync} 重复`);
|
||||||
|
}
|
||||||
|
if (this.collapse.childrens.indexOf(this) === -1) {
|
||||||
|
this.collapse.childrens.push(this)
|
||||||
|
}
|
||||||
|
this.init()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init(type) {
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
this.getCollapseHeight(type)
|
||||||
|
// #endif
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
this.getNvueHwight(type)
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
uninstall() {
|
||||||
|
if (this.collapse) {
|
||||||
|
this.collapse.childrens.forEach((item, index) => {
|
||||||
|
if (item === this) {
|
||||||
|
this.collapse.childrens.splice(index, 1)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.collapse.names.forEach((item, index) => {
|
||||||
|
if (item === this.nameSync) {
|
||||||
|
this.collapse.names.splice(index, 1)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onClick(isOpen, type) {
|
||||||
|
if (this.disabled) return
|
||||||
|
this.isOpen = isOpen
|
||||||
|
if (this.isOpen && this.collapse) {
|
||||||
|
this.collapse.setAccordion(this)
|
||||||
|
}
|
||||||
|
if (type !== 'init') {
|
||||||
|
this.collapse.onChange(isOpen, this)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getCollapseHeight(type, index = 0) {
|
||||||
|
const views = uni.createSelectorQuery().in(this)
|
||||||
|
views
|
||||||
|
.select(`#${this.elId}`)
|
||||||
|
.fields({
|
||||||
|
size: true
|
||||||
|
}, data => {
|
||||||
|
// TODO 百度中可能获取不到节点信息 ,需要循环获取
|
||||||
|
if (index >= 10) return
|
||||||
|
if (!data) {
|
||||||
|
index++
|
||||||
|
this.getCollapseHeight(false, index)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
this.height = data.height + 1
|
||||||
|
// #endif
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
this.height = data.height
|
||||||
|
// #endif
|
||||||
|
this.isheight = true
|
||||||
|
if (type) return
|
||||||
|
this.onClick(this.isOpen, 'init')
|
||||||
|
})
|
||||||
|
.exec()
|
||||||
|
},
|
||||||
|
getNvueHwight(type) {
|
||||||
|
const result = dom.getComponentRect(this.$refs['collapse--hook'], option => {
|
||||||
|
if (option && option.result && option.size) {
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
this.height = option.size.height + 1
|
||||||
|
// #endif
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
this.height = option.size.height
|
||||||
|
// #endif
|
||||||
|
this.isheight = true
|
||||||
|
if (type) return
|
||||||
|
this.onClick(this.open, 'init')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 获取父元素实例
|
||||||
|
*/
|
||||||
|
getCollapse(name = 'uniCollapse') {
|
||||||
|
let parent = this.$parent;
|
||||||
|
let parentName = parent.$options.name;
|
||||||
|
while (parentName !== name) {
|
||||||
|
parent = parent.$parent;
|
||||||
|
if (!parent) return false;
|
||||||
|
parentName = parent.$options.name;
|
||||||
|
}
|
||||||
|
return parent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.uni-collapse-item {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
/* #endif */
|
||||||
|
&__title {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
transition: border-bottom-color .3s;
|
||||||
|
|
||||||
|
// transition-property: border-bottom-color;
|
||||||
|
// transition-duration: 5s;
|
||||||
|
&-wrap {
|
||||||
|
width: 100%;
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&-box {
|
||||||
|
padding: 0 15px;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
height: 48px;
|
||||||
|
line-height: 48px;
|
||||||
|
background-color: #fff;
|
||||||
|
color: #303133;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 500;
|
||||||
|
/* #ifdef H5 */
|
||||||
|
cursor: pointer;
|
||||||
|
outline: none;
|
||||||
|
|
||||||
|
/* #endif */
|
||||||
|
&.is-disabled {
|
||||||
|
.uni-collapse-item__title-text {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&.uni-collapse-item-border {
|
||||||
|
border-bottom: 1px solid #ebeef5;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-open {
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-img {
|
||||||
|
height: 22px;
|
||||||
|
width: 22px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-text {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 14px;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
white-space: nowrap;
|
||||||
|
color: inherit;
|
||||||
|
/* #endif */
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
lines: 1;
|
||||||
|
/* #endif */
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-arrow {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
box-sizing: border-box;
|
||||||
|
/* #endif */
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
margin-right: 10px;
|
||||||
|
transform: rotate(0deg);
|
||||||
|
|
||||||
|
&-active {
|
||||||
|
transform: rotate(-180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&__wrap {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
will-change: height;
|
||||||
|
box-sizing: border-box;
|
||||||
|
/* #endif */
|
||||||
|
background-color: #fff;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
height: 0;
|
||||||
|
|
||||||
|
&.is--transition {
|
||||||
|
// transition: all 0.3s;
|
||||||
|
transition-property: height, border-bottom-width;
|
||||||
|
transition-duration: 0.3s;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
will-change: height;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
&-content {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #303133;
|
||||||
|
// transition: height 0.3s;
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
border-bottom-style: solid;
|
||||||
|
border-bottom-width: 0;
|
||||||
|
|
||||||
|
&.uni-collapse-item--border {
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
border-bottom-color: red;
|
||||||
|
border-bottom-color: #ebeef5;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.open {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--animation {
|
||||||
|
transition-property: transform;
|
||||||
|
transition-duration: 0.3s;
|
||||||
|
transition-timing-function: ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,147 @@
|
|||||||
|
<template>
|
||||||
|
<view class="uni-collapse">
|
||||||
|
<slot />
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* Collapse 折叠面板
|
||||||
|
* @description 展示可以折叠 / 展开的内容区域
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=23
|
||||||
|
* @property {String|Array} value 当前激活面板改变时触发(如果是手风琴模式,参数类型为string,否则为array)
|
||||||
|
* @property {Boolean} accordion = [true|false] 是否开启手风琴效果是否开启手风琴效果
|
||||||
|
* @event {Function} change 切换面板时触发,如果是手风琴模式,返回类型为string,否则为array
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name: 'uniCollapse',
|
||||||
|
emits:['change','activeItem','input','update:modelValue'],
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
type: [String, Array],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
modelValue: {
|
||||||
|
type: [String, Array],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
accordion: {
|
||||||
|
// 是否开启手风琴效果
|
||||||
|
type: [Boolean, String],
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
// TODO 兼容 vue2 和 vue3
|
||||||
|
dataValue() {
|
||||||
|
let value = (typeof this.value === 'string' && this.value === '') ||
|
||||||
|
(Array.isArray(this.value) && this.value.length === 0)
|
||||||
|
let modelValue = (typeof this.modelValue === 'string' && this.modelValue === '') ||
|
||||||
|
(Array.isArray(this.modelValue) && this.modelValue.length === 0)
|
||||||
|
if (value) {
|
||||||
|
return this.modelValue
|
||||||
|
}
|
||||||
|
if (modelValue) {
|
||||||
|
return this.value
|
||||||
|
}
|
||||||
|
|
||||||
|
return this.value
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
dataValue: {
|
||||||
|
handler(newVal) {
|
||||||
|
this.setOpen(newVal)
|
||||||
|
},
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.childrens = []
|
||||||
|
this.names = []
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$nextTick(()=>{
|
||||||
|
this.setOpen(this.dataValue)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
setOpen(val) {
|
||||||
|
const str = typeof val === 'string'
|
||||||
|
const arr = Array.isArray(val)
|
||||||
|
this.childrens.forEach((vm) => {
|
||||||
|
if (str) {
|
||||||
|
if (val === vm.nameSync) {
|
||||||
|
if (!this.accordion) {
|
||||||
|
console.warn('accordion 属性为 false ,v-model 类型应该为 array')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
vm.isOpen = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (arr) {
|
||||||
|
const isOpen = val.findIndex(v => v === vm.nameSync) !== -1
|
||||||
|
if (this.accordion && isOpen) {
|
||||||
|
console.warn('accordion 属性为 true ,v-model 类型应该为 string')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
vm.isOpen = isOpen
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.emit(val)
|
||||||
|
},
|
||||||
|
setAccordion(self) {
|
||||||
|
if (!this.accordion) return
|
||||||
|
this.childrens.forEach((vm, index) => {
|
||||||
|
if (self !== vm) {
|
||||||
|
vm.isOpen = false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
resize() {
|
||||||
|
this.childrens.forEach((vm, index) => {
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
vm.getCollapseHeight()
|
||||||
|
// #endif
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
vm.getNvueHwight()
|
||||||
|
// #endif
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onChange(isOpen, self) {
|
||||||
|
let activeItem = []
|
||||||
|
|
||||||
|
if (this.accordion) {
|
||||||
|
activeItem = isOpen ? self.nameSync : ''
|
||||||
|
} else {
|
||||||
|
this.childrens.forEach((vm, index) => {
|
||||||
|
if (vm.isOpen) {
|
||||||
|
activeItem.push(vm.nameSync)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
this.$emit('change', activeItem)
|
||||||
|
this.emit(activeItem)
|
||||||
|
},
|
||||||
|
emit(val){
|
||||||
|
this.$emit('input', val)
|
||||||
|
this.$emit('update:modelValue', val)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" >
|
||||||
|
.uni-collapse {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
flex: 1;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
106
uni_modules/uni-collapse/package.json
Normal file
@@ -0,0 +1,106 @@
|
|||||||
|
{
|
||||||
|
"id": "uni-collapse",
|
||||||
|
"displayName": "uni-collapse 折叠面板",
|
||||||
|
"version": "1.4.8",
|
||||||
|
"description": "Collapse 组件,可以折叠 / 展开的内容区域。",
|
||||||
|
"keywords": [
|
||||||
|
"uni-ui",
|
||||||
|
"折叠",
|
||||||
|
"折叠面板",
|
||||||
|
"手风琴"
|
||||||
|
],
|
||||||
|
"repository": "https://github.com/dcloudio/uni-ui",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": "",
|
||||||
|
"uni-app": "^4.07",
|
||||||
|
"uni-app-x": ""
|
||||||
|
},
|
||||||
|
"directories": {
|
||||||
|
"example": "../../temps/example_temps"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "无",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||||
|
"type": "component-vue",
|
||||||
|
"darkmode": "x",
|
||||||
|
"i18n": "x",
|
||||||
|
"widescreen": "x"
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": [
|
||||||
|
"uni-scss",
|
||||||
|
"uni-icons"
|
||||||
|
],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "x",
|
||||||
|
"aliyun": "x",
|
||||||
|
"alipay": "x"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"uni-app": {
|
||||||
|
"vue": {
|
||||||
|
"vue2": "√",
|
||||||
|
"vue3": "√"
|
||||||
|
},
|
||||||
|
"web": {
|
||||||
|
"safari": "√",
|
||||||
|
"chrome": "√"
|
||||||
|
},
|
||||||
|
"app": {
|
||||||
|
"vue": "√",
|
||||||
|
"nvue": "√",
|
||||||
|
"android": "√",
|
||||||
|
"ios": "√",
|
||||||
|
"harmony": "√"
|
||||||
|
},
|
||||||
|
"mp": {
|
||||||
|
"weixin": "√",
|
||||||
|
"alipay": "√",
|
||||||
|
"toutiao": "√",
|
||||||
|
"baidu": "√",
|
||||||
|
"kuaishou": "-",
|
||||||
|
"jd": "-",
|
||||||
|
"harmony": "-",
|
||||||
|
"qq": "√",
|
||||||
|
"lark": "-"
|
||||||
|
},
|
||||||
|
"quickapp": {
|
||||||
|
"huawei": "√",
|
||||||
|
"union": "√"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"uni-app-x": {
|
||||||
|
"web": {
|
||||||
|
"safari": "-",
|
||||||
|
"chrome": "-"
|
||||||
|
},
|
||||||
|
"app": {
|
||||||
|
"android": "-",
|
||||||
|
"ios": "-",
|
||||||
|
"harmony": "-"
|
||||||
|
},
|
||||||
|
"mp": {
|
||||||
|
"weixin": "-"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
12
uni_modules/uni-collapse/readme.md
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
|
||||||
|
|
||||||
|
## Collapse 折叠面板
|
||||||
|
> **组件名:uni-collapse**
|
||||||
|
> 代码块: `uCollapse`
|
||||||
|
> 关联组件:`uni-collapse-item`、`uni-icons`。
|
||||||
|
|
||||||
|
|
||||||
|
折叠面板用来折叠/显示过长的内容或者是列表。通常是在多内容分类项使用,折叠不重要的内容,显示重要内容。点击可以展开折叠部分。
|
||||||
|
|
||||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-collapse)
|
||||||
|
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
|
||||||
@@ -1,41 +1,111 @@
|
|||||||
|
## 2.2.42(2025-08-20)
|
||||||
|
- 修复 datetime-picker 小程序样式警告
|
||||||
|
## 2.2.41(2025-08-20)
|
||||||
|
- 修复 uni-datetime-picker组件时间对比报错问题
|
||||||
|
## 2.2.40(2025-04-14)
|
||||||
|
- 修复 绑定字符串值的时,日历面板选中状态未重置到默认值的问题
|
||||||
|
## 2.2.39(2025-04-14)
|
||||||
|
- 修复 在 iOS 微信小程序上type='daterange'时,传入'YYYY-MM-DD'格式不生效的问题
|
||||||
|
|
||||||
|
## 2.2.38(2024-10-15)
|
||||||
|
- 修复 微信小程序中的getSystemInfo警告
|
||||||
|
## 2.2.35(2024-09-21)
|
||||||
|
- 修复 没有选中日期时点击确定直接报错的Bug [详情](https://ask.dcloud.net.cn/question/198168)
|
||||||
|
## 2.2.34(2024-04-24)
|
||||||
|
- 新增 日期点击事件,在点击日期时会触发该事件。
|
||||||
|
## 2.2.33(2024-04-15)
|
||||||
|
- 修复 抖音小程序事件传递失效bug
|
||||||
|
## 2.2.32(2024-02-20)
|
||||||
|
- 修复 日历的close事件触发异常的bug [详情](https://github.com/dcloudio/uni-ui/issues/844)
|
||||||
|
## 2.2.31(2024-02-20)
|
||||||
|
- 修复 h5平台 右边日历的月份默认+1的bug [详情](https://github.com/dcloudio/uni-ui/issues/841)
|
||||||
|
## 2.2.30(2024-01-31)
|
||||||
|
- 修复 隐藏“秒”时,在IOS15及以下版本时出现 结束时间在开始时间之前 的bug [详情](https://github.com/dcloudio/uni-ui/issues/788)
|
||||||
|
## 2.2.29(2024-01-20)
|
||||||
|
- 新增 show事件,弹窗弹出时触发该事件 [详情](https://github.com/dcloudio/uni-app/issues/4694)
|
||||||
|
## 2.2.28(2024-01-18)
|
||||||
|
- 去除 noChange事件,当进行日期范围选择时,若只选了一天,则开始结束日期都为同一天 [详情](https://github.com/dcloudio/uni-ui/issues/815)
|
||||||
|
## 2.2.27(2024-01-10)
|
||||||
|
- 优化 增加noChange事件,当进行日期范围选择时,若有空值,则触发该事件 [详情](https://github.com/dcloudio/uni-ui/issues/815)
|
||||||
|
## 2.2.26(2024-01-08)
|
||||||
|
- 修复 字节小程序时间选择范围器失效问题 [详情](https://github.com/dcloudio/uni-ui/issues/834)
|
||||||
|
## 2.2.25(2023-10-18)
|
||||||
|
- 修复 PC端初次修改时间,开始时间未更新的Bug [详情](https://github.com/dcloudio/uni-ui/issues/737)
|
||||||
|
## 2.2.24(2023-06-02)
|
||||||
|
- 修复 部分情况修改时间,开始、结束时间显示异常的Bug [详情](https://ask.dcloud.net.cn/question/171146)
|
||||||
|
- 优化 当前月可以选择上月、下月的日期的Bug
|
||||||
|
## 2.2.23(2023-05-02)
|
||||||
|
- 修复 部分情况修改时间,开始时间未更新的Bug [详情](https://github.com/dcloudio/uni-ui/issues/737)
|
||||||
|
- 修复 部分平台及设备第一次点击无法显示弹框的Bug
|
||||||
|
- 修复 ios 日期格式未补零显示及使用异常的Bug [详情](https://ask.dcloud.net.cn/question/162979)
|
||||||
|
## 2.2.22(2023-03-30)
|
||||||
|
- 修复 日历 picker 修改年月后,自动选中当月1日的Bug [详情](https://ask.dcloud.net.cn/question/165937)
|
||||||
|
- 修复 小程序端 低版本 ios NaN的Bug [详情](https://ask.dcloud.net.cn/question/162979)
|
||||||
|
## 2.2.21(2023-02-20)
|
||||||
|
- 修复 firefox 浏览器显示区域点击无法拉起日历弹框的Bug [详情](https://ask.dcloud.net.cn/question/163362)
|
||||||
|
## 2.2.20(2023-02-17)
|
||||||
|
- 优化 值为空依然选中当天问题
|
||||||
|
- 优化 提供 default-value 属性支持配置选择器打开时默认显示的时间
|
||||||
|
- 优化 非范围选择未选择日期时间,点击确认按钮选中当前日期时间
|
||||||
|
- 优化 字节小程序日期时间范围选择,底部日期换行的Bug
|
||||||
|
## 2.2.19(2023-02-09)
|
||||||
|
- 修复 2.2.18 引起范围选择配置 end 选择无效的Bug [详情](https://github.com/dcloudio/uni-ui/issues/686)
|
||||||
|
## 2.2.18(2023-02-08)
|
||||||
|
- 修复 移动端范围选择change事件触发异常的Bug [详情](https://github.com/dcloudio/uni-ui/issues/684)
|
||||||
|
- 优化 PC端输入日期格式错误时返回当前日期时间
|
||||||
|
- 优化 PC端输入日期时间超出 start、end 限制的Bug
|
||||||
|
- 优化 移动端日期时间范围用法时间展示不完整问题
|
||||||
|
## 2.2.17(2023-02-04)
|
||||||
|
- 修复 小程序端绑定 Date 类型报错的Bug [详情](https://github.com/dcloudio/uni-ui/issues/679)
|
||||||
|
- 修复 vue3 time-picker 无法显示绑定时分秒的Bug
|
||||||
|
## 2.2.16(2023-02-02)
|
||||||
|
- 修复 字节小程序报错的Bug
|
||||||
|
## 2.2.15(2023-02-02)
|
||||||
|
- 修复 某些情况切换月份错误的Bug
|
||||||
|
## 2.2.14(2023-01-30)
|
||||||
|
- 修复 某些情况切换月份错误的Bug [详情](https://ask.dcloud.net.cn/question/162033)
|
||||||
|
## 2.2.13(2023-01-10)
|
||||||
|
- 修复 多次加载组件造成内存占用的Bug
|
||||||
|
## 2.2.12(2022-12-01)
|
||||||
|
- 修复 vue3 下 i18n 国际化初始值不正确的Bug
|
||||||
## 2.2.11(2022-09-19)
|
## 2.2.11(2022-09-19)
|
||||||
- 修复,支付宝小程序样式错乱,[详情](https://github.com/dcloudio/uni-app/issues/3861)
|
- 修复 支付宝小程序样式错乱的Bug [详情](https://github.com/dcloudio/uni-app/issues/3861)
|
||||||
## 2.2.10(2022-09-19)
|
## 2.2.10(2022-09-19)
|
||||||
- 修复,反向选择日期范围,日期显示异常,[详情](https://ask.dcloud.net.cn/question/153401?item_id=212892&rf=false)
|
- 修复 反向选择日期范围,日期显示异常的Bug [详情](https://ask.dcloud.net.cn/question/153401?item_id=212892&rf=false)
|
||||||
## 2.2.9(2022-09-16)
|
## 2.2.9(2022-09-16)
|
||||||
- 可以使用 uni-scss 控制主题色
|
- 可以使用 uni-scss 控制主题色
|
||||||
## 2.2.8(2022-09-08)
|
## 2.2.8(2022-09-08)
|
||||||
- 修复 close事件无效的 bug
|
- 修复 close事件无效的Bug
|
||||||
## 2.2.7(2022-09-05)
|
## 2.2.7(2022-09-05)
|
||||||
- 修复 移动端 maskClick 无效的 bug,详见:[https://ask.dcloud.net.cn/question/140824?item_id=209458&rf=false](https://ask.dcloud.net.cn/question/140824?item_id=209458&rf=false)
|
- 修复 移动端 maskClick 无效的Bug [详情](https://ask.dcloud.net.cn/question/140824)
|
||||||
## 2.2.6(2022-06-30)
|
## 2.2.6(2022-06-30)
|
||||||
- 优化 组件样式,调整了组件图标大小、高度、颜色等,与uni-ui风格保持一致
|
- 优化 组件样式,调整了组件图标大小、高度、颜色等,与uni-ui风格保持一致
|
||||||
## 2.2.5(2022-06-24)
|
## 2.2.5(2022-06-24)
|
||||||
- 修复 日历顶部年月及底部确认未国际化 bug
|
- 修复 日历顶部年月及底部确认未国际化的Bug
|
||||||
## 2.2.4(2022-03-31)
|
## 2.2.4(2022-03-31)
|
||||||
- 修复 Vue3 下动态赋值,单选类型未响应的 bug
|
- 修复 Vue3 下动态赋值,单选类型未响应的Bug
|
||||||
## 2.2.3(2022-03-28)
|
## 2.2.3(2022-03-28)
|
||||||
- 修复 Vue3 下动态赋值未响应的 bug
|
- 修复 Vue3 下动态赋值未响应的Bug
|
||||||
## 2.2.2(2021-12-10)
|
## 2.2.2(2021-12-10)
|
||||||
- 修复 clear-icon 属性在小程序平台不生效的 bug
|
- 修复 clear-icon 属性在小程序平台不生效的Bug
|
||||||
## 2.2.1(2021-12-10)
|
## 2.2.1(2021-12-10)
|
||||||
- 修复 日期范围选在小程序平台,必须多点击一次才能取消选中状态的 bug
|
- 修复 日期范围选在小程序平台,必须多点击一次才能取消选中状态的Bug
|
||||||
## 2.2.0(2021-11-19)
|
## 2.2.0(2021-11-19)
|
||||||
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
- 优化 组件UI,并提供设计资源 [详情](https://uniapp.dcloud.io/component/uniui/resource)
|
||||||
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-datetime-picker](https://uniapp.dcloud.io/component/uniui/uni-datetime-picker)
|
- 文档迁移 [https://uniapp.dcloud.io/component/uniui/uni-datetime-picker](https://uniapp.dcloud.io/component/uniui/uni-datetime-picker)
|
||||||
## 2.1.5(2021-11-09)
|
## 2.1.5(2021-11-09)
|
||||||
- 新增 提供组件设计资源,组件样式调整
|
- 新增 提供组件设计资源,组件样式调整
|
||||||
## 2.1.4(2021-09-10)
|
## 2.1.4(2021-09-10)
|
||||||
- 修复 hide-second 在移动端的 bug
|
- 修复 hide-second 在移动端的Bug
|
||||||
- 修复 单选赋默认值时,赋值日期未高亮的 bug
|
- 修复 单选赋默认值时,赋值日期未高亮的Bug
|
||||||
- 修复 赋默认值时,移动端未正确显示时间的 bug
|
- 修复 赋默认值时,移动端未正确显示时间的Bug
|
||||||
## 2.1.3(2021-09-09)
|
## 2.1.3(2021-09-09)
|
||||||
- 新增 hide-second 属性,支持只使用时分,隐藏秒
|
- 新增 hide-second 属性,支持只使用时分,隐藏秒
|
||||||
## 2.1.2(2021-09-03)
|
## 2.1.2(2021-09-03)
|
||||||
- 优化 取消选中时(范围选)直接开始下一次选择, 避免多点一次
|
- 优化 取消选中时(范围选)直接开始下一次选择, 避免多点一次
|
||||||
- 优化 移动端支持清除按钮,同时支持通过 ref 调用组件的 clear 方法
|
- 优化 移动端支持清除按钮,同时支持通过 ref 调用组件的 clear 方法
|
||||||
- 优化 调整字号大小,美化日历界面
|
- 优化 调整字号大小,美化日历界面
|
||||||
- 修复 因国际化导致的 placeholder 失效的 bug
|
- 修复 因国际化导致的 placeholder 失效的Bug
|
||||||
## 2.1.1(2021-08-24)
|
## 2.1.1(2021-08-24)
|
||||||
- 新增 支持国际化
|
- 新增 支持国际化
|
||||||
- 优化 范围选择器在 pc 端过宽的问题
|
- 优化 范围选择器在 pc 端过宽的问题
|
||||||
@@ -43,50 +113,50 @@
|
|||||||
- 新增 适配 vue3
|
- 新增 适配 vue3
|
||||||
## 2.0.19(2021-08-09)
|
## 2.0.19(2021-08-09)
|
||||||
- 新增 支持作为 uni-forms 子组件相关功能
|
- 新增 支持作为 uni-forms 子组件相关功能
|
||||||
- 修复 在 uni-forms 中使用时,选择时间报 NAN 错误的 bug
|
- 修复 在 uni-forms 中使用时,选择时间报 NAN 错误的Bug
|
||||||
## 2.0.18(2021-08-05)
|
## 2.0.18(2021-08-05)
|
||||||
- 修复 type 属性动态赋值无效的 bug
|
- 修复 type 属性动态赋值无效的Bug
|
||||||
- 修复 ‘确认’按钮被 tabbar 遮盖 bug
|
- 修复 ‘确认’按钮被 tabbar 遮盖 bug
|
||||||
- 修复 组件未赋值时范围选左、右日历相同的 bug
|
- 修复 组件未赋值时范围选左、右日历相同的Bug
|
||||||
## 2.0.17(2021-08-04)
|
## 2.0.17(2021-08-04)
|
||||||
- 修复 范围选未正确显示当前值的 bug
|
- 修复 范围选未正确显示当前值的Bug
|
||||||
- 修复 h5 平台(移动端)报错 'cale' of undefined 的 bug
|
- 修复 h5 平台(移动端)报错 'cale' of undefined 的Bug
|
||||||
## 2.0.16(2021-07-21)
|
## 2.0.16(2021-07-21)
|
||||||
- 新增 return-type 属性支持返回 date 日期对象
|
- 新增 return-type 属性支持返回 date 日期对象
|
||||||
## 2.0.15(2021-07-14)
|
## 2.0.15(2021-07-14)
|
||||||
- 修复 单选日期类型,初始赋值后不在当前日历的 bug
|
- 修复 单选日期类型,初始赋值后不在当前日历的Bug
|
||||||
- 新增 clearIcon 属性,显示框的清空按钮可配置显示隐藏(仅 pc 有效)
|
- 新增 clearIcon 属性,显示框的清空按钮可配置显示隐藏(仅 pc 有效)
|
||||||
- 优化 移动端移除显示框的清空按钮,无实际用途
|
- 优化 移动端移除显示框的清空按钮,无实际用途
|
||||||
## 2.0.14(2021-07-14)
|
## 2.0.14(2021-07-14)
|
||||||
- 修复 组件赋值为空,界面未更新的 bug
|
- 修复 组件赋值为空,界面未更新的Bug
|
||||||
- 修复 start 和 end 不能动态赋值的 bug
|
- 修复 start 和 end 不能动态赋值的Bug
|
||||||
- 修复 范围选类型,用户选择后再次选择右侧日历(结束日期)显示不正确的 bug
|
- 修复 范围选类型,用户选择后再次选择右侧日历(结束日期)显示不正确的Bug
|
||||||
## 2.0.13(2021-07-08)
|
## 2.0.13(2021-07-08)
|
||||||
- 修复 范围选择不能动态赋值的 bug
|
- 修复 范围选择不能动态赋值的Bug
|
||||||
## 2.0.12(2021-07-08)
|
## 2.0.12(2021-07-08)
|
||||||
- 修复 范围选择的初始时间在一个月内时,造成无法选择的bug
|
- 修复 范围选择的初始时间在一个月内时,造成无法选择的bug
|
||||||
## 2.0.11(2021-07-08)
|
## 2.0.11(2021-07-08)
|
||||||
- 优化 弹出层在超出视窗边缘定位不准确的问题
|
- 优化 弹出层在超出视窗边缘定位不准确的问题
|
||||||
## 2.0.10(2021-07-08)
|
## 2.0.10(2021-07-08)
|
||||||
- 修复 范围起始点样式的背景色与今日样式的字体前景色融合,导致日期字体看不清的 bug
|
- 修复 范围起始点样式的背景色与今日样式的字体前景色融合,导致日期字体看不清的Bug
|
||||||
- 优化 弹出层在超出视窗边缘被遮盖的问题
|
- 优化 弹出层在超出视窗边缘被遮盖的问题
|
||||||
## 2.0.9(2021-07-07)
|
## 2.0.9(2021-07-07)
|
||||||
- 新增 maskClick 事件
|
- 新增 maskClick 事件
|
||||||
- 修复 特殊情况日历 rpx 布局错误的 bug,rpx -> px
|
- 修复 特殊情况日历 rpx 布局错误的Bug,rpx -> px
|
||||||
- 修复 范围选择时清空返回值不合理的bug,['', ''] -> []
|
- 修复 范围选择时清空返回值不合理的bug,['', ''] -> []
|
||||||
## 2.0.8(2021-07-07)
|
## 2.0.8(2021-07-07)
|
||||||
- 新增 日期时间显示框支持插槽
|
- 新增 日期时间显示框支持插槽
|
||||||
## 2.0.7(2021-07-01)
|
## 2.0.7(2021-07-01)
|
||||||
- 优化 添加 uni-icons 依赖
|
- 优化 添加 uni-icons 依赖
|
||||||
## 2.0.6(2021-05-22)
|
## 2.0.6(2021-05-22)
|
||||||
- 修复 图标在小程序上不显示的 bug
|
- 修复 图标在小程序上不显示的Bug
|
||||||
- 优化 重命名引用组件,避免潜在组件命名冲突
|
- 优化 重命名引用组件,避免潜在组件命名冲突
|
||||||
## 2.0.5(2021-05-20)
|
## 2.0.5(2021-05-20)
|
||||||
- 优化 代码目录扁平化
|
- 优化 代码目录扁平化
|
||||||
## 2.0.4(2021-05-12)
|
## 2.0.4(2021-05-12)
|
||||||
- 新增 组件示例地址
|
- 新增 组件示例地址
|
||||||
## 2.0.3(2021-05-10)
|
## 2.0.3(2021-05-10)
|
||||||
- 修复 ios 下不识别 '-' 日期格式的 bug
|
- 修复 ios 下不识别 '-' 日期格式的Bug
|
||||||
- 优化 pc 下弹出层添加边框和阴影
|
- 优化 pc 下弹出层添加边框和阴影
|
||||||
## 2.0.2(2021-05-08)
|
## 2.0.2(2021-05-08)
|
||||||
- 修复 在 admin 中获取弹出层定位错误的bug
|
- 修复 在 admin 中获取弹出层定位错误的bug
|
||||||
@@ -97,7 +167,7 @@
|
|||||||
> 注意:此版本不向后兼容,不再支持单独时间选择(type=time)及相关的 hide-second 属性(时间选可使用内置组件 picker)
|
> 注意:此版本不向后兼容,不再支持单独时间选择(type=time)及相关的 hide-second 属性(时间选可使用内置组件 picker)
|
||||||
## 1.0.6(2021-03-18)
|
## 1.0.6(2021-03-18)
|
||||||
- 新增 hide-second 属性,时间支持仅选择时、分
|
- 新增 hide-second 属性,时间支持仅选择时、分
|
||||||
- 修复 选择跟显示的日期不一样的 bug
|
- 修复 选择跟显示的日期不一样的Bug
|
||||||
- 修复 chang事件触发2次的 bug
|
- 修复 chang事件触发2次的Bug
|
||||||
- 修复 分、秒 end 范围错误的 bug
|
- 修复 分、秒 end 范围错误的Bug
|
||||||
- 优化 更好的 nvue 适配
|
- 优化 更好的 nvue 适配
|
||||||
|
|||||||
@@ -13,10 +13,10 @@
|
|||||||
'uni-calendar-item--after-checked':weeks.afterMultiple,
|
'uni-calendar-item--after-checked':weeks.afterMultiple,
|
||||||
'uni-calendar-item--disable':weeks.disable,
|
'uni-calendar-item--disable':weeks.disable,
|
||||||
}">
|
}">
|
||||||
<text v-if="selected&&weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text>
|
<text v-if="selected && weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text>
|
||||||
<text class="uni-calendar-item__weeks-box-text uni-calendar-item__weeks-box-text-disable uni-calendar-item--checked-text">{{weeks.date}}</text>
|
<text class="uni-calendar-item__weeks-box-text uni-calendar-item__weeks-box-text-disable uni-calendar-item--checked-text">{{weeks.date}}</text>
|
||||||
</view>
|
</view>
|
||||||
<view :class="{'uni-calendar-item--isDay': weeks.isDay}"></view>
|
<view :class="{'uni-calendar-item--today': weeks.isToday}"></view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -41,10 +41,6 @@
|
|||||||
return []
|
return []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
lunar: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
checkHover: {
|
checkHover: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
@@ -83,11 +79,6 @@
|
|||||||
color: darken($color: $uni-primary, $amount: 40%);
|
color: darken($color: $uni-primary, $amount: 40%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-calendar-item__weeks-lunar-text {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-calendar-item__weeks-box-item {
|
.uni-calendar-item__weeks-box-item {
|
||||||
position: relative;
|
position: relative;
|
||||||
/* #ifndef APP-NVUE */
|
/* #ifndef APP-NVUE */
|
||||||
@@ -116,7 +107,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.uni-calendar-item__weeks-box .uni-calendar-item--disable {
|
.uni-calendar-item__weeks-box .uni-calendar-item--disable {
|
||||||
// background-color: rgba(249, 249, 249, $uni-opacity-disabled);
|
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -124,7 +114,7 @@
|
|||||||
color: #D1D1D1;
|
color: #D1D1D1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-calendar-item--isDay {
|
.uni-calendar-item--today {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 10px;
|
top: 10px;
|
||||||
right: 17%;
|
right: 17%;
|
||||||
|
|||||||
@@ -1,31 +1,37 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="uni-calendar" @mouseleave="leaveCale">
|
<view class="uni-calendar" @mouseleave="leaveCale">
|
||||||
<view v-if="!insert&&show" class="uni-calendar__mask" :class="{'uni-calendar--mask-show':aniMaskShow}"
|
|
||||||
@click="clean();maskClick()"></view>
|
<view v-if="!insert && show" class="uni-calendar__mask" :class="{'uni-calendar--mask-show':aniMaskShow}"
|
||||||
|
@click="maskClick"></view>
|
||||||
|
|
||||||
<view v-if="insert || show" class="uni-calendar__content"
|
<view v-if="insert || show" class="uni-calendar__content"
|
||||||
:class="{'uni-calendar--fixed':!insert,'uni-calendar--ani-show':aniMaskShow, 'uni-calendar__content-mobile': aniMaskShow}">
|
:class="{'uni-calendar--fixed':!insert,'uni-calendar--ani-show':aniMaskShow, 'uni-calendar__content-mobile': aniMaskShow}">
|
||||||
<view class="uni-calendar__header" :class="{'uni-calendar__header-mobile' :!insert}">
|
<view class="uni-calendar__header" :class="{'uni-calendar__header-mobile' :!insert}">
|
||||||
<view v-if="left" class="uni-calendar__header-btn-box" @click.stop="pre">
|
|
||||||
|
<view class="uni-calendar__header-btn-box" @click.stop="changeMonth('pre')">
|
||||||
<view class="uni-calendar__header-btn uni-calendar--left"></view>
|
<view class="uni-calendar__header-btn uni-calendar--left"></view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<picker mode="date" :value="date" fields="month" @change="bindDateChange">
|
<picker mode="date" :value="date" fields="month" @change="bindDateChange">
|
||||||
<text
|
<text
|
||||||
class="uni-calendar__header-text">{{ (nowDate.year||'') + yearText + ( nowDate.month||'') + monthText}}</text>
|
class="uni-calendar__header-text">{{ (nowDate.year||'') + yearText + ( nowDate.month||'') + monthText}}</text>
|
||||||
</picker>
|
</picker>
|
||||||
<view v-if="right" class="uni-calendar__header-btn-box" @click.stop="next">
|
|
||||||
|
<view class="uni-calendar__header-btn-box" @click.stop="changeMonth('next')">
|
||||||
<view class="uni-calendar__header-btn uni-calendar--right"></view>
|
<view class="uni-calendar__header-btn uni-calendar--right"></view>
|
||||||
</view>
|
</view>
|
||||||
<view v-if="!insert" class="dialog-close" @click="clean">
|
|
||||||
|
<view v-if="!insert" class="dialog-close" @click="maskClick">
|
||||||
<view class="dialog-close-plus" data-id="close"></view>
|
<view class="dialog-close-plus" data-id="close"></view>
|
||||||
<view class="dialog-close-plus dialog-close-rotate" data-id="close"></view>
|
<view class="dialog-close-plus dialog-close-rotate" data-id="close"></view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- <text class="uni-calendar__backtoday" @click="backtoday">回到今天</text> -->
|
|
||||||
</view>
|
</view>
|
||||||
<view class="uni-calendar__box">
|
<view class="uni-calendar__box">
|
||||||
|
|
||||||
<view v-if="showMonth" class="uni-calendar__box-bg">
|
<view v-if="showMonth" class="uni-calendar__box-bg">
|
||||||
<text class="uni-calendar__box-bg-text">{{nowDate.month}}</text>
|
<text class="uni-calendar__box-bg-text">{{nowDate.month}}</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="uni-calendar__weeks" style="padding-bottom: 7px;">
|
<view class="uni-calendar__weeks" style="padding-bottom: 7px;">
|
||||||
<view class="uni-calendar__weeks-day">
|
<view class="uni-calendar__weeks-day">
|
||||||
<text class="uni-calendar__weeks-day-text">{{SUNText}}</text>
|
<text class="uni-calendar__weeks-day-text">{{SUNText}}</text>
|
||||||
@@ -49,28 +55,29 @@
|
|||||||
<text class="uni-calendar__weeks-day-text">{{SATText}}</text>
|
<text class="uni-calendar__weeks-day-text">{{SATText}}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="uni-calendar__weeks" v-for="(item,weekIndex) in weeks" :key="weekIndex">
|
<view class="uni-calendar__weeks" v-for="(item,weekIndex) in weeks" :key="weekIndex">
|
||||||
<view class="uni-calendar__weeks-item" v-for="(weeks,weeksIndex) in item" :key="weeksIndex">
|
<view class="uni-calendar__weeks-item" v-for="(weeks,weeksIndex) in item" :key="weeksIndex">
|
||||||
<calendar-item class="uni-calendar-item--hook" :weeks="weeks" :calendar="calendar"
|
<calendar-item class="uni-calendar-item--hook" :weeks="weeks" :calendar="calendar" :selected="selected"
|
||||||
:selected="selected" :lunar="lunar" :checkHover="range" @change="choiceDate"
|
:checkHover="range" @change="choiceDate" @handleMouse="handleMouse">
|
||||||
@handleMouse="handleMouse">
|
|
||||||
</calendar-item>
|
</calendar-item>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view v-if="!insert && !range && typeHasTime" class="uni-date-changed uni-calendar--fixed-top"
|
|
||||||
|
<view v-if="!insert && !range && hasTime" class="uni-date-changed uni-calendar--fixed-top"
|
||||||
style="padding: 0 80px;">
|
style="padding: 0 80px;">
|
||||||
<view class="uni-date-changed--time-date">{{tempSingleDate ? tempSingleDate : selectDateText}}</view>
|
<view class="uni-date-changed--time-date">{{tempSingleDate ? tempSingleDate : selectDateText}}</view>
|
||||||
<time-picker type="time" :start="reactStartTime" :end="reactEndTime" v-model="time"
|
<time-picker type="time" :start="timepickerStartTime" :end="timepickerEndTime" v-model="time"
|
||||||
:disabled="!tempSingleDate" :border="false" :hide-second="hideSecond" class="time-picker-style">
|
:disabled="!tempSingleDate" :border="false" :hide-second="hideSecond" class="time-picker-style">
|
||||||
</time-picker>
|
</time-picker>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view v-if="!insert && range && typeHasTime" class="uni-date-changed uni-calendar--fixed-top">
|
<view v-if="!insert && range && hasTime" class="uni-date-changed uni-calendar--fixed-top">
|
||||||
<view class="uni-date-changed--time-start">
|
<view class="uni-date-changed--time-start">
|
||||||
<view class="uni-date-changed--time-date">{{tempRange.before ? tempRange.before : startDateText}}
|
<view class="uni-date-changed--time-date">{{tempRange.before ? tempRange.before : startDateText}}
|
||||||
</view>
|
</view>
|
||||||
<time-picker type="time" :start="reactStartTime" v-model="timeRange.startTime" :border="false"
|
<time-picker type="time" :start="timepickerStartTime" v-model="timeRange.startTime" :border="false"
|
||||||
:hide-second="hideSecond" :disabled="!tempRange.before" class="time-picker-style">
|
:hide-second="hideSecond" :disabled="!tempRange.before" class="time-picker-style">
|
||||||
</time-picker>
|
</time-picker>
|
||||||
</view>
|
</view>
|
||||||
@@ -79,15 +86,13 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="uni-date-changed--time-end">
|
<view class="uni-date-changed--time-end">
|
||||||
<view class="uni-date-changed--time-date">{{tempRange.after ? tempRange.after : endDateText}}</view>
|
<view class="uni-date-changed--time-date">{{tempRange.after ? tempRange.after : endDateText}}</view>
|
||||||
<time-picker type="time" :end="reactEndTime" v-model="timeRange.endTime" :border="false"
|
<time-picker type="time" :end="timepickerEndTime" v-model="timeRange.endTime" :border="false"
|
||||||
:hide-second="hideSecond" :disabled="!tempRange.after" class="time-picker-style">
|
:hide-second="hideSecond" :disabled="!tempRange.after" class="time-picker-style">
|
||||||
</time-picker>
|
</time-picker>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view v-if="!insert" class="uni-date-changed uni-date-btn--ok">
|
<view v-if="!insert" class="uni-date-changed uni-date-btn--ok">
|
||||||
<!-- <view class="uni-calendar__header-btn-box">
|
|
||||||
<text class="uni-calendar__button-text uni-calendar--fixed-width">{{okText}}</text>
|
|
||||||
</view> -->
|
|
||||||
<view class="uni-datetime-picker--btn" @click="confirm">{{confirmText}}</view>
|
<view class="uni-datetime-picker--btn" @click="confirm">{{confirmText}}</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -95,22 +100,27 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Calendar from './util.js';
|
import {
|
||||||
|
Calendar,
|
||||||
|
getDate,
|
||||||
|
getTime
|
||||||
|
} from './util.js';
|
||||||
import calendarItem from './calendar-item.vue'
|
import calendarItem from './calendar-item.vue'
|
||||||
import timePicker from './time-picker.vue'
|
import timePicker from './time-picker.vue'
|
||||||
|
|
||||||
import {
|
import {
|
||||||
initVueI18n
|
initVueI18n
|
||||||
} from '@dcloudio/uni-i18n'
|
} from '@dcloudio/uni-i18n'
|
||||||
import messages from './i18n/index.js'
|
import i18nMessages from './i18n/index.js'
|
||||||
const {
|
const {
|
||||||
t
|
t
|
||||||
} = initVueI18n(messages)
|
} = initVueI18n(i18nMessages)
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Calendar 日历
|
* Calendar 日历
|
||||||
* @description 日历组件可以查看日期,选择任意范围内的日期,打点操作。常用场景如:酒店日期预订、火车机票选择购买日期、上下班打卡等
|
* @description 日历组件可以查看日期,选择任意范围内的日期,打点操作。常用场景如:酒店日期预订、火车机票选择购买日期、上下班打卡等
|
||||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=56
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=56
|
||||||
* @property {String} date 自定义当前时间,默认为今天
|
* @property {String} date 自定义当前时间,默认为今天
|
||||||
* @property {Boolean} lunar 显示农历
|
|
||||||
* @property {String} startDate 日期选择范围-开始日期
|
* @property {String} startDate 日期选择范围-开始日期
|
||||||
* @property {String} endDate 日期选择范围-结束日期
|
* @property {String} endDate 日期选择范围-结束日期
|
||||||
* @property {Boolean} range 范围选择
|
* @property {Boolean} range 范围选择
|
||||||
@@ -120,16 +130,26 @@
|
|||||||
* @property {Boolean} clearDate = [true|false] 弹窗模式是否清空上次选择内容
|
* @property {Boolean} clearDate = [true|false] 弹窗模式是否清空上次选择内容
|
||||||
* @property {Array} selected 打点,期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}]
|
* @property {Array} selected 打点,期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}]
|
||||||
* @property {Boolean} showMonth 是否选择月份为背景
|
* @property {Boolean} showMonth 是否选择月份为背景
|
||||||
|
* @property {[String} defaultValue 选择器打开时默认显示的时间
|
||||||
* @event {Function} change 日期改变,`insert :ture` 时生效
|
* @event {Function} change 日期改变,`insert :ture` 时生效
|
||||||
* @event {Function} confirm 确认选择`insert :false` 时生效
|
* @event {Function} confirm 确认选择`insert :false` 时生效
|
||||||
* @event {Function} monthSwitch 切换月份时触发
|
* @event {Function} monthSwitch 切换月份时触发
|
||||||
* @example <uni-calendar :insert="true":lunar="true" :start-date="'2019-3-2'":end-date="'2019-5-20'"@change="change" />
|
* @example <uni-calendar :insert="true" :start-date="'2019-3-2'":end-date="'2019-5-20'"@change="change" />
|
||||||
*/
|
*/
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
calendarItem,
|
calendarItem,
|
||||||
timePicker
|
timePicker
|
||||||
},
|
},
|
||||||
|
|
||||||
|
options: {
|
||||||
|
// #ifdef MP-TOUTIAO
|
||||||
|
virtualHost: false,
|
||||||
|
// #endif
|
||||||
|
// #ifndef MP-TOUTIAO
|
||||||
|
virtualHost: true
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
props: {
|
props: {
|
||||||
date: {
|
date: {
|
||||||
type: String,
|
type: String,
|
||||||
@@ -151,10 +171,6 @@
|
|||||||
return []
|
return []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
lunar: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
startDate: {
|
startDate: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: ''
|
||||||
@@ -163,11 +179,19 @@
|
|||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: ''
|
||||||
},
|
},
|
||||||
|
startPlaceholder: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
endPlaceholder: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
range: {
|
range: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
},
|
},
|
||||||
typeHasTime: {
|
hasTime: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
},
|
},
|
||||||
@@ -183,14 +207,6 @@
|
|||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true
|
default: true
|
||||||
},
|
},
|
||||||
left: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
right: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
checkHover: {
|
checkHover: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true
|
default: true
|
||||||
@@ -209,6 +225,10 @@
|
|||||||
fulldate: ''
|
fulldate: ''
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
defaultValue: {
|
||||||
|
type: [String, Object, Array],
|
||||||
|
default: ''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
@@ -216,7 +236,7 @@
|
|||||||
show: false,
|
show: false,
|
||||||
weeks: [],
|
weeks: [],
|
||||||
calendar: {},
|
calendar: {},
|
||||||
nowDate: '',
|
nowDate: {},
|
||||||
aniMaskShow: false,
|
aniMaskShow: false,
|
||||||
firstEnter: true,
|
firstEnter: true,
|
||||||
time: '',
|
time: '',
|
||||||
@@ -234,7 +254,7 @@
|
|||||||
watch: {
|
watch: {
|
||||||
date: {
|
date: {
|
||||||
immediate: true,
|
immediate: true,
|
||||||
handler(newVal, oldVal) {
|
handler(newVal) {
|
||||||
if (!this.range) {
|
if (!this.range) {
|
||||||
this.tempSingleDate = newVal
|
this.tempSingleDate = newVal
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
@@ -245,33 +265,44 @@
|
|||||||
},
|
},
|
||||||
defTime: {
|
defTime: {
|
||||||
immediate: true,
|
immediate: true,
|
||||||
handler(newVal, oldVal) {
|
handler(newVal) {
|
||||||
if (!this.range) {
|
if (!this.range) {
|
||||||
this.time = newVal
|
this.time = newVal
|
||||||
} else {
|
} else {
|
||||||
// console.log('-----', newVal);
|
|
||||||
this.timeRange.startTime = newVal.start
|
this.timeRange.startTime = newVal.start
|
||||||
this.timeRange.endTime = newVal.end
|
this.timeRange.endTime = newVal.end
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
startDate(val) {
|
startDate(val) {
|
||||||
this.cale.resetSatrtDate(val)
|
// 字节小程序 watch 早于 created
|
||||||
|
if (!this.cale) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.cale.setStartDate(val)
|
||||||
this.cale.setDate(this.nowDate.fullDate)
|
this.cale.setDate(this.nowDate.fullDate)
|
||||||
this.weeks = this.cale.weeks
|
this.weeks = this.cale.weeks
|
||||||
},
|
},
|
||||||
endDate(val) {
|
endDate(val) {
|
||||||
this.cale.resetEndDate(val)
|
// 字节小程序 watch 早于 created
|
||||||
|
if (!this.cale) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.cale.setEndDate(val)
|
||||||
this.cale.setDate(this.nowDate.fullDate)
|
this.cale.setDate(this.nowDate.fullDate)
|
||||||
this.weeks = this.cale.weeks
|
this.weeks = this.cale.weeks
|
||||||
},
|
},
|
||||||
selected(newVal) {
|
selected(newVal) {
|
||||||
|
// 字节小程序 watch 早于 created
|
||||||
|
if (!this.cale) {
|
||||||
|
return
|
||||||
|
}
|
||||||
this.cale.setSelectInfo(this.nowDate.fullDate, newVal)
|
this.cale.setSelectInfo(this.nowDate.fullDate, newVal)
|
||||||
this.weeks = this.cale.weeks
|
this.weeks = this.cale.weeks
|
||||||
},
|
},
|
||||||
pleStatus: {
|
pleStatus: {
|
||||||
immediate: true,
|
immediate: true,
|
||||||
handler(newVal, oldVal) {
|
handler(newVal) {
|
||||||
const {
|
const {
|
||||||
before,
|
before,
|
||||||
after,
|
after,
|
||||||
@@ -294,11 +325,16 @@
|
|||||||
this.cale.lastHover = false
|
this.cale.lastHover = false
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
|
// 字节小程序 watch 早于 created
|
||||||
|
if (!this.cale) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
this.cale.setDefaultMultiple(before, after)
|
this.cale.setDefaultMultiple(before, after)
|
||||||
if (which === 'left') {
|
if (which === 'left' && before) {
|
||||||
this.setDate(before)
|
this.setDate(before)
|
||||||
this.weeks = this.cale.weeks
|
this.weeks = this.cale.weeks
|
||||||
} else {
|
} else if (after) {
|
||||||
this.setDate(after)
|
this.setDate(after)
|
||||||
this.weeks = this.cale.weeks
|
this.weeks = this.cale.weeks
|
||||||
}
|
}
|
||||||
@@ -309,15 +345,13 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
reactStartTime() {
|
timepickerStartTime() {
|
||||||
const activeDate = this.range ? this.tempRange.before : this.calendar.fullDate
|
const activeDate = this.range ? this.tempRange.before : this.calendar.fullDate
|
||||||
const res = activeDate === this.startDate ? this.selectableTimes.start : ''
|
return activeDate === this.startDate ? this.selectableTimes.start : ''
|
||||||
return res
|
|
||||||
},
|
},
|
||||||
reactEndTime() {
|
timepickerEndTime() {
|
||||||
const activeDate = this.range ? this.tempRange.after : this.calendar.fullDate
|
const activeDate = this.range ? this.tempRange.after : this.calendar.fullDate
|
||||||
const res = activeDate === this.endDate ? this.selectableTimes.end : ''
|
return activeDate === this.endDate ? this.selectableTimes.end : ''
|
||||||
return res
|
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* for i18n
|
* for i18n
|
||||||
@@ -368,17 +402,13 @@
|
|||||||
created() {
|
created() {
|
||||||
// 获取日历方法实例
|
// 获取日历方法实例
|
||||||
this.cale = new Calendar({
|
this.cale = new Calendar({
|
||||||
// date: new Date(),
|
|
||||||
selected: this.selected,
|
selected: this.selected,
|
||||||
startDate: this.startDate,
|
startDate: this.startDate,
|
||||||
endDate: this.endDate,
|
endDate: this.endDate,
|
||||||
range: this.range,
|
range: this.range,
|
||||||
// multipleStatus: this.pleStatus
|
|
||||||
})
|
})
|
||||||
// 选中某一天
|
// 选中某一天
|
||||||
// this.cale.setDate(this.date)
|
|
||||||
this.init(this.date)
|
this.init(this.date)
|
||||||
// this.setDay
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
leaveCale() {
|
leaveCale() {
|
||||||
@@ -407,14 +437,9 @@
|
|||||||
const [yearB, monthB] = B.split('-')
|
const [yearB, monthB] = B.split('-')
|
||||||
return yearA === yearB && monthA === monthB
|
return yearA === yearB && monthA === monthB
|
||||||
},
|
},
|
||||||
|
|
||||||
// 取消穿透
|
|
||||||
clean() {
|
|
||||||
this.close()
|
|
||||||
},
|
|
||||||
|
|
||||||
// 蒙版点击事件
|
// 蒙版点击事件
|
||||||
maskClick() {
|
maskClick() {
|
||||||
|
this.close()
|
||||||
this.$emit('maskClose')
|
this.$emit('maskClose')
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -433,33 +458,51 @@
|
|||||||
this.tempSingleDate = ''
|
this.tempSingleDate = ''
|
||||||
}
|
}
|
||||||
this.calendar.fullDate = ''
|
this.calendar.fullDate = ''
|
||||||
this.setDate()
|
this.setDate(new Date())
|
||||||
},
|
},
|
||||||
|
|
||||||
bindDateChange(e) {
|
bindDateChange(e) {
|
||||||
const value = e.detail.value + '-1'
|
const value = e.detail.value + '-1'
|
||||||
this.init(value)
|
this.setDate(value)
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* 初始化日期显示
|
* 初始化日期显示
|
||||||
* @param {Object} date
|
* @param {Object} date
|
||||||
*/
|
*/
|
||||||
init(date) {
|
init(date) {
|
||||||
this.cale.setDate(date)
|
// 字节小程序 watch 早于 created
|
||||||
|
if (!this.cale) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.cale.setDate(date || new Date())
|
||||||
this.weeks = this.cale.weeks
|
this.weeks = this.cale.weeks
|
||||||
this.nowDate = this.calendar = this.cale.getInfo(date)
|
this.nowDate = this.cale.getInfo(date)
|
||||||
|
this.calendar = {
|
||||||
|
...this.nowDate
|
||||||
|
}
|
||||||
|
if (!date) {
|
||||||
|
// 优化date为空默认不选中今天
|
||||||
|
this.calendar.fullDate = ''
|
||||||
|
if (this.defaultValue && !this.range) {
|
||||||
|
// 暂时只支持移动端非范围选择
|
||||||
|
const defaultDate = new Date(this.defaultValue)
|
||||||
|
const fullDate = getDate(defaultDate)
|
||||||
|
const year = defaultDate.getFullYear()
|
||||||
|
const month = defaultDate.getMonth() + 1
|
||||||
|
const date = defaultDate.getDate()
|
||||||
|
const day = defaultDate.getDay()
|
||||||
|
this.calendar = {
|
||||||
|
fullDate,
|
||||||
|
year,
|
||||||
|
month,
|
||||||
|
date,
|
||||||
|
day
|
||||||
|
},
|
||||||
|
this.tempSingleDate = fullDate
|
||||||
|
this.time = getTime(defaultDate, this.hideSecond)
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
// choiceDate(weeks) {
|
|
||||||
// if (weeks.disable) return
|
|
||||||
// this.calendar = weeks
|
|
||||||
// // 设置多选
|
|
||||||
// this.cale.setMultiple(this.calendar.fullDate, true)
|
|
||||||
// this.weeks = this.cale.weeks
|
|
||||||
// this.tempSingleDate = this.calendar.fullDate
|
|
||||||
// this.tempRange.before = this.cale.multipleStatus.before
|
|
||||||
// this.tempRange.after = this.cale.multipleStatus.after
|
|
||||||
// this.change()
|
|
||||||
// },
|
|
||||||
/**
|
/**
|
||||||
* 打开日历弹窗
|
* 打开日历弹窗
|
||||||
*/
|
*/
|
||||||
@@ -467,7 +510,6 @@
|
|||||||
// 弹窗模式并且清理数据
|
// 弹窗模式并且清理数据
|
||||||
if (this.clearDate && !this.insert) {
|
if (this.clearDate && !this.insert) {
|
||||||
this.cale.cleanMultipleStatus()
|
this.cale.cleanMultipleStatus()
|
||||||
// this.cale.setDate(this.date)
|
|
||||||
this.init(this.date)
|
this.init(this.date)
|
||||||
}
|
}
|
||||||
this.show = true
|
this.show = true
|
||||||
@@ -499,8 +541,8 @@
|
|||||||
/**
|
/**
|
||||||
* 变化触发
|
* 变化触发
|
||||||
*/
|
*/
|
||||||
change() {
|
change(isSingleChange) {
|
||||||
if (!this.insert) return
|
if (!this.insert && !isSingleChange) return
|
||||||
this.setEmit('change')
|
this.setEmit('change')
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
@@ -521,12 +563,20 @@
|
|||||||
* @param {Object} name
|
* @param {Object} name
|
||||||
*/
|
*/
|
||||||
setEmit(name) {
|
setEmit(name) {
|
||||||
|
if (!this.range) {
|
||||||
|
if (!this.calendar.fullDate) {
|
||||||
|
this.calendar = this.cale.getInfo(new Date())
|
||||||
|
this.tempSingleDate = this.calendar.fullDate
|
||||||
|
}
|
||||||
|
if (this.hasTime && !this.time) {
|
||||||
|
this.time = getTime(new Date(), this.hideSecond)
|
||||||
|
}
|
||||||
|
}
|
||||||
let {
|
let {
|
||||||
year,
|
year,
|
||||||
month,
|
month,
|
||||||
date,
|
date,
|
||||||
fullDate,
|
fullDate,
|
||||||
lunar,
|
|
||||||
extraInfo
|
extraInfo
|
||||||
} = this.calendar
|
} = this.calendar
|
||||||
this.$emit(name, {
|
this.$emit(name, {
|
||||||
@@ -537,7 +587,6 @@
|
|||||||
time: this.time,
|
time: this.time,
|
||||||
timeRange: this.timeRange,
|
timeRange: this.timeRange,
|
||||||
fulldate: fullDate,
|
fulldate: fullDate,
|
||||||
lunar,
|
|
||||||
extraInfo: extraInfo || {}
|
extraInfo: extraInfo || {}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
@@ -553,7 +602,6 @@
|
|||||||
this.cale.setMultiple(this.calendar.fullDate, true)
|
this.cale.setMultiple(this.calendar.fullDate, true)
|
||||||
this.weeks = this.cale.weeks
|
this.weeks = this.cale.weeks
|
||||||
this.tempSingleDate = this.calendar.fullDate
|
this.tempSingleDate = this.calendar.fullDate
|
||||||
const beforeStatus = this.cale.multipleStatus.before
|
|
||||||
const beforeDate = new Date(this.cale.multipleStatus.before).getTime()
|
const beforeDate = new Date(this.cale.multipleStatus.before).getTime()
|
||||||
const afterDate = new Date(this.cale.multipleStatus.after).getTime()
|
const afterDate = new Date(this.cale.multipleStatus.after).getTime()
|
||||||
if (beforeDate > afterDate && afterDate) {
|
if (beforeDate > afterDate && afterDate) {
|
||||||
@@ -563,46 +611,17 @@
|
|||||||
this.tempRange.before = this.cale.multipleStatus.before
|
this.tempRange.before = this.cale.multipleStatus.before
|
||||||
this.tempRange.after = this.cale.multipleStatus.after
|
this.tempRange.after = this.cale.multipleStatus.after
|
||||||
}
|
}
|
||||||
this.change()
|
this.change(true)
|
||||||
},
|
},
|
||||||
/**
|
changeMonth(type) {
|
||||||
* 回到今天
|
let newDate
|
||||||
*/
|
if (type === 'pre') {
|
||||||
backtoday() {
|
newDate = this.cale.getPreMonthObj(this.nowDate.fullDate).fullDate
|
||||||
let date = this.cale.getDate(new Date()).fullDate
|
} else if (type === 'next') {
|
||||||
// this.cale.setDate(date)
|
newDate = this.cale.getNextMonthObj(this.nowDate.fullDate).fullDate
|
||||||
this.init(date)
|
|
||||||
this.change()
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 比较时间大小
|
|
||||||
*/
|
|
||||||
dateCompare(startDate, endDate) {
|
|
||||||
// 计算截止时间
|
|
||||||
startDate = new Date(startDate.replace('-', '/').replace('-', '/'))
|
|
||||||
// 计算详细项的截止时间
|
|
||||||
endDate = new Date(endDate.replace('-', '/').replace('-', '/'))
|
|
||||||
if (startDate <= endDate) {
|
|
||||||
return true
|
|
||||||
} else {
|
|
||||||
return false
|
|
||||||
}
|
}
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 上个月
|
|
||||||
*/
|
|
||||||
pre() {
|
|
||||||
const preDate = this.cale.getDate(this.nowDate.fullDate, -1, 'month').fullDate
|
|
||||||
this.setDate(preDate)
|
|
||||||
this.monthSwitch()
|
|
||||||
|
|
||||||
},
|
this.setDate(newDate)
|
||||||
/**
|
|
||||||
* 下个月
|
|
||||||
*/
|
|
||||||
next() {
|
|
||||||
const nextDate = this.cale.getDate(this.nowDate.fullDate, +1, 'month').fullDate
|
|
||||||
this.setDate(nextDate)
|
|
||||||
this.monthSwitch()
|
this.monthSwitch()
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
@@ -618,7 +637,7 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" >
|
<style lang="scss">
|
||||||
$uni-primary: #007aff !default;
|
$uni-primary: #007aff !default;
|
||||||
|
|
||||||
.uni-calendar {
|
.uni-calendar {
|
||||||
@@ -862,6 +881,9 @@
|
|||||||
.uni-date-changed--time-date {
|
.uni-date-changed--time-date {
|
||||||
color: #999;
|
color: #999;
|
||||||
line-height: 50px;
|
line-height: 50px;
|
||||||
|
/* #ifdef MP-TOUTIAO */
|
||||||
|
font-size: 16px;
|
||||||
|
/* #endif */
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
// opacity: 0.6;
|
// opacity: 0.6;
|
||||||
}
|
}
|
||||||
@@ -920,5 +942,6 @@
|
|||||||
.uni-datetime-picker--btn:active {
|
.uni-datetime-picker--btn:active {
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* #endif */
|
/* #endif */
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"uni-datetime-picker.selectDate": "select date",
|
"uni-datetime-picker.selectDate": "select date",
|
||||||
"uni-datetime-picker.selectTime": "select time",
|
"uni-datetime-picker.selectTime": "select time",
|
||||||
"uni-datetime-picker.selectDateTime": "select datetime",
|
"uni-datetime-picker.selectDateTime": "select date and time",
|
||||||
"uni-datetime-picker.startDate": "start date",
|
"uni-datetime-picker.startDate": "start date",
|
||||||
"uni-datetime-picker.endDate": "end date",
|
"uni-datetime-picker.endDate": "end date",
|
||||||
"uni-datetime-picker.startTime": "start time",
|
"uni-datetime-picker.startTime": "start time",
|
||||||
|
|||||||
@@ -77,21 +77,20 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- #ifdef H5 -->
|
|
||||||
<!-- <keypress v-if="visible" @esc="tiggerTimePicker" @enter="setTime" /> -->
|
|
||||||
<!-- #endif -->
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// #ifdef H5
|
|
||||||
import keypress from './keypress'
|
|
||||||
// #endif
|
|
||||||
import {
|
import {
|
||||||
initVueI18n
|
initVueI18n
|
||||||
} from '@dcloudio/uni-i18n'
|
} from '@dcloudio/uni-i18n'
|
||||||
import messages from './i18n/index.js'
|
import i18nMessages from './i18n/index.js'
|
||||||
const { t } = initVueI18n(messages)
|
const {
|
||||||
|
t
|
||||||
|
} = initVueI18n(i18nMessages)
|
||||||
|
import {
|
||||||
|
fixIosDateFormat
|
||||||
|
} from './util'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* DatetimePicker 时间选择器
|
* DatetimePicker 时间选择器
|
||||||
@@ -108,11 +107,6 @@
|
|||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'UniDatetimePicker',
|
name: 'UniDatetimePicker',
|
||||||
components: {
|
|
||||||
// #ifdef H5
|
|
||||||
keypress
|
|
||||||
// #endif
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
indicatorStyle: `height: 50px;`,
|
indicatorStyle: `height: 50px;`,
|
||||||
@@ -146,6 +140,14 @@
|
|||||||
endSecond: 59,
|
endSecond: 59,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
options: {
|
||||||
|
// #ifdef MP-TOUTIAO
|
||||||
|
virtualHost: false,
|
||||||
|
// #endif
|
||||||
|
// #ifndef MP-TOUTIAO
|
||||||
|
virtualHost: true
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
props: {
|
props: {
|
||||||
type: {
|
type: {
|
||||||
type: String,
|
type: String,
|
||||||
@@ -185,10 +187,11 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
|
// #ifndef VUE3
|
||||||
value: {
|
value: {
|
||||||
handler(newVal, oldVal) {
|
handler(newVal) {
|
||||||
if (newVal) {
|
if (newVal) {
|
||||||
this.parseValue(this.fixIosDateFormat(newVal)) //兼容 iOS、safari 日期格式
|
this.parseValue(fixIosDateFormat(newVal))
|
||||||
this.initTime(false)
|
this.initTime(false)
|
||||||
} else {
|
} else {
|
||||||
this.time = ''
|
this.time = ''
|
||||||
@@ -197,6 +200,21 @@
|
|||||||
},
|
},
|
||||||
immediate: true
|
immediate: true
|
||||||
},
|
},
|
||||||
|
// #endif
|
||||||
|
// #ifdef VUE3
|
||||||
|
modelValue: {
|
||||||
|
handler(newVal) {
|
||||||
|
if (newVal) {
|
||||||
|
this.parseValue(fixIosDateFormat(newVal))
|
||||||
|
this.initTime(false)
|
||||||
|
} else {
|
||||||
|
this.time = ''
|
||||||
|
this.parseValue(Date.now())
|
||||||
|
}
|
||||||
|
},
|
||||||
|
immediate: true
|
||||||
|
},
|
||||||
|
// #endif
|
||||||
type: {
|
type: {
|
||||||
handler(newValue) {
|
handler(newValue) {
|
||||||
if (newValue === 'date') {
|
if (newValue === 'date') {
|
||||||
@@ -217,13 +235,13 @@
|
|||||||
},
|
},
|
||||||
start: {
|
start: {
|
||||||
handler(newVal) {
|
handler(newVal) {
|
||||||
this.parseDatetimeRange(this.fixIosDateFormat(newVal), 'start') //兼容 iOS、safari 日期格式
|
this.parseDatetimeRange(fixIosDateFormat(newVal), 'start')
|
||||||
},
|
},
|
||||||
immediate: true
|
immediate: true
|
||||||
},
|
},
|
||||||
end: {
|
end: {
|
||||||
handler(newVal) {
|
handler(newVal) {
|
||||||
this.parseDatetimeRange(this.fixIosDateFormat(newVal), 'end') //兼容 iOS、safari 日期格式
|
this.parseDatetimeRange(fixIosDateFormat(newVal), 'end')
|
||||||
},
|
},
|
||||||
immediate: true
|
immediate: true
|
||||||
},
|
},
|
||||||
@@ -527,7 +545,7 @@
|
|||||||
const day = now.getDate()
|
const day = now.getDate()
|
||||||
dateBase = year + '/' + month + '/' + day + ' '
|
dateBase = year + '/' + month + '/' + day + ' '
|
||||||
}
|
}
|
||||||
if (Number(value) && typeof value !== NaN) {
|
if (Number(value)) {
|
||||||
value = parseInt(value)
|
value = parseInt(value)
|
||||||
dateBase = 0
|
dateBase = 0
|
||||||
}
|
}
|
||||||
@@ -598,7 +616,7 @@
|
|||||||
pointType === 'start' ? this.startYear = this.year - 60 : this.endYear = this.year + 60
|
pointType === 'start' ? this.startYear = this.year - 60 : this.endYear = this.year + 60
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
if (Number(point) && Number(point) !== NaN) {
|
if (Number(point)) {
|
||||||
point = parseInt(point)
|
point = parseInt(point)
|
||||||
}
|
}
|
||||||
// datetime 的 end 没有时分秒, 则不限制
|
// datetime 的 end 没有时分秒, 则不限制
|
||||||
@@ -645,14 +663,6 @@
|
|||||||
return new Date(year, month, 0).getDate();
|
return new Date(year, month, 0).getDate();
|
||||||
},
|
},
|
||||||
|
|
||||||
//兼容 iOS、safari 日期格式
|
|
||||||
fixIosDateFormat(value) {
|
|
||||||
if (typeof value === 'string') {
|
|
||||||
value = value.replace(/-/g, '/')
|
|
||||||
}
|
|
||||||
return value
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 生成时间戳
|
* 生成时间戳
|
||||||
* @param {Object} time
|
* @param {Object} time
|
||||||
@@ -736,7 +746,7 @@
|
|||||||
*/
|
*/
|
||||||
initTimePicker() {
|
initTimePicker() {
|
||||||
if (this.disabled) return
|
if (this.disabled) return
|
||||||
const value = this.fixIosDateFormat(this.value)
|
const value = fixIosDateFormat(this.time)
|
||||||
this.initPickerValue(value)
|
this.initPickerValue(value)
|
||||||
this.visible = !this.visible
|
this.visible = !this.visible
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -1,27 +1,24 @@
|
|||||||
class Calendar {
|
class Calendar {
|
||||||
constructor({
|
constructor({
|
||||||
date,
|
|
||||||
selected,
|
selected,
|
||||||
startDate,
|
startDate,
|
||||||
endDate,
|
endDate,
|
||||||
range,
|
range,
|
||||||
// multipleStatus
|
|
||||||
} = {}) {
|
} = {}) {
|
||||||
// 当前日期
|
// 当前日期
|
||||||
this.date = this.getDate(new Date()) // 当前初入日期
|
this.date = this.getDateObj(new Date()) // 当前初入日期
|
||||||
// 打点信息
|
// 打点信息
|
||||||
this.selected = selected || [];
|
this.selected = selected || [];
|
||||||
// 范围开始
|
// 起始时间
|
||||||
this.startDate = startDate
|
this.startDate = startDate
|
||||||
// 范围结束
|
// 终止时间
|
||||||
this.endDate = endDate
|
this.endDate = endDate
|
||||||
|
// 是否范围选择
|
||||||
this.range = range
|
this.range = range
|
||||||
// 多选状态
|
// 多选状态
|
||||||
this.cleanMultipleStatus()
|
this.cleanMultipleStatus()
|
||||||
// 每周日期
|
// 每周日期
|
||||||
this.weeks = {}
|
this.weeks = {}
|
||||||
// this._getWeek(this.date.fullDate)
|
|
||||||
// this.multipleStatus = multipleStatus
|
|
||||||
this.lastHover = false
|
this.lastHover = false
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
@@ -29,8 +26,8 @@ class Calendar {
|
|||||||
* @param {Object} date
|
* @param {Object} date
|
||||||
*/
|
*/
|
||||||
setDate(date) {
|
setDate(date) {
|
||||||
this.selectDate = this.getDate(date)
|
const selectDate = this.getDateObj(date)
|
||||||
this._getWeek(this.selectDate.fullDate)
|
this.getWeeks(selectDate.fullDate)
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -44,93 +41,82 @@ class Calendar {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
setStartDate(startDate) {
|
||||||
* 重置开始日期
|
|
||||||
*/
|
|
||||||
resetSatrtDate(startDate) {
|
|
||||||
// 范围开始
|
|
||||||
this.startDate = startDate
|
this.startDate = startDate
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
setEndDate(endDate) {
|
||||||
* 重置结束日期
|
|
||||||
*/
|
|
||||||
resetEndDate(endDate) {
|
|
||||||
// 范围结束
|
|
||||||
this.endDate = endDate
|
this.endDate = endDate
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getPreMonthObj(date) {
|
||||||
|
date = fixIosDateFormat(date)
|
||||||
|
date = new Date(date)
|
||||||
|
|
||||||
|
const oldMonth = date.getMonth()
|
||||||
|
date.setMonth(oldMonth - 1)
|
||||||
|
const newMonth = date.getMonth()
|
||||||
|
if (oldMonth !== 0 && newMonth - oldMonth === 0) {
|
||||||
|
date.setMonth(newMonth - 1)
|
||||||
|
}
|
||||||
|
return this.getDateObj(date)
|
||||||
|
}
|
||||||
|
getNextMonthObj(date) {
|
||||||
|
date = fixIosDateFormat(date)
|
||||||
|
date = new Date(date)
|
||||||
|
|
||||||
|
const oldMonth = date.getMonth()
|
||||||
|
date.setMonth(oldMonth + 1)
|
||||||
|
const newMonth = date.getMonth()
|
||||||
|
if (newMonth - oldMonth > 1) {
|
||||||
|
date.setMonth(newMonth - 1)
|
||||||
|
}
|
||||||
|
return this.getDateObj(date)
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 获取任意时间
|
* 获取指定格式Date对象
|
||||||
*/
|
*/
|
||||||
getDate(date, AddDayCount = 0, str = 'day') {
|
getDateObj(date) {
|
||||||
if (!date) {
|
date = fixIosDateFormat(date)
|
||||||
date = new Date()
|
date = new Date(date)
|
||||||
}
|
|
||||||
if (typeof date !== 'object') {
|
|
||||||
date = date.replace(/-/g, '/')
|
|
||||||
}
|
|
||||||
const dd = new Date(date)
|
|
||||||
switch (str) {
|
|
||||||
case 'day':
|
|
||||||
dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
|
|
||||||
break
|
|
||||||
case 'month':
|
|
||||||
if (dd.getDate() === 31) {
|
|
||||||
dd.setDate(dd.getDate() + AddDayCount)
|
|
||||||
} else {
|
|
||||||
dd.setMonth(dd.getMonth() + AddDayCount) // 获取AddDayCount天后的日期
|
|
||||||
}
|
|
||||||
break
|
|
||||||
case 'year':
|
|
||||||
dd.setFullYear(dd.getFullYear() + AddDayCount) // 获取AddDayCount天后的日期
|
|
||||||
break
|
|
||||||
}
|
|
||||||
const y = dd.getFullYear()
|
|
||||||
const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期,不足10补0
|
|
||||||
const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号,不足10补0
|
|
||||||
return {
|
return {
|
||||||
fullDate: y + '-' + m + '-' + d,
|
fullDate: getDate(date),
|
||||||
year: y,
|
year: date.getFullYear(),
|
||||||
month: m,
|
month: addZero(date.getMonth() + 1),
|
||||||
date: d,
|
date: addZero(date.getDate()),
|
||||||
day: dd.getDay()
|
day: date.getDay()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 获取上月剩余天数
|
* 获取上一个月日期集合
|
||||||
*/
|
*/
|
||||||
_getLastMonthDays(firstDay, full) {
|
getPreMonthDays(amount, dateObj) {
|
||||||
let dateArr = []
|
const result = []
|
||||||
for (let i = firstDay; i > 0; i--) {
|
for (let i = amount - 1; i >= 0; i--) {
|
||||||
const beforeDate = new Date(full.year, full.month - 1, -i + 1).getDate()
|
const month = dateObj.month - 1
|
||||||
dateArr.push({
|
result.push({
|
||||||
date: beforeDate,
|
date: new Date(dateObj.year, month, -i).getDate(),
|
||||||
month: full.month - 1,
|
month,
|
||||||
disable: true
|
disable: true
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
return dateArr
|
return result
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
* 获取本月天数
|
* 获取本月日期集合
|
||||||
*/
|
*/
|
||||||
_currentMonthDys(dateData, full) {
|
getCurrentMonthDays(amount, dateObj) {
|
||||||
let dateArr = []
|
const result = []
|
||||||
let fullDate = this.date.fullDate
|
const fullDate = this.date.fullDate
|
||||||
for (let i = 1; i <= dateData; i++) {
|
for (let i = 1; i <= amount; i++) {
|
||||||
let isinfo = false
|
const currentDate = `${dateObj.year}-${dateObj.month}-${addZero(i)}`
|
||||||
let nowDate = full.year + '-' + (full.month < 10 ?
|
const isToday = fullDate === currentDate
|
||||||
full.month : full.month) + '-' + (i < 10 ?
|
|
||||||
'0' + i : i)
|
|
||||||
// 是否今天
|
|
||||||
let isDay = fullDate === nowDate
|
|
||||||
// 获取打点信息
|
// 获取打点信息
|
||||||
let info = this.selected && this.selected.find((item) => {
|
const info = this.selected && this.selected.find((item) => {
|
||||||
if (this.dateEqual(nowDate, item.date)) {
|
if (this.dateEqual(currentDate, item.date)) {
|
||||||
return item
|
return item
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@@ -139,62 +125,53 @@ class Calendar {
|
|||||||
let disableBefore = true
|
let disableBefore = true
|
||||||
let disableAfter = true
|
let disableAfter = true
|
||||||
if (this.startDate) {
|
if (this.startDate) {
|
||||||
// let dateCompBefore = this.dateCompare(this.startDate, fullDate)
|
disableBefore = dateCompare(this.startDate, currentDate)
|
||||||
// disableBefore = this.dateCompare(dateCompBefore ? this.startDate : fullDate, nowDate)
|
|
||||||
disableBefore = this.dateCompare(this.startDate, nowDate)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.endDate) {
|
if (this.endDate) {
|
||||||
// let dateCompAfter = this.dateCompare(fullDate, this.endDate)
|
disableAfter = dateCompare(currentDate, this.endDate)
|
||||||
// disableAfter = this.dateCompare(nowDate, dateCompAfter ? this.endDate : fullDate)
|
|
||||||
disableAfter = this.dateCompare(nowDate, this.endDate)
|
|
||||||
}
|
|
||||||
let multiples = this.multipleStatus.data
|
|
||||||
let checked = false
|
|
||||||
let multiplesStatus = -1
|
|
||||||
if (this.range) {
|
|
||||||
if (multiples) {
|
|
||||||
multiplesStatus = multiples.findIndex((item) => {
|
|
||||||
return this.dateEqual(item, nowDate)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
if (multiplesStatus !== -1) {
|
|
||||||
checked = true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
let data = {
|
|
||||||
fullDate: nowDate,
|
|
||||||
year: full.year,
|
|
||||||
date: i,
|
|
||||||
multiple: this.range ? checked : false,
|
|
||||||
beforeMultiple: this.isLogicBefore(nowDate, this.multipleStatus.before, this.multipleStatus.after),
|
|
||||||
afterMultiple: this.isLogicAfter(nowDate, this.multipleStatus.before, this.multipleStatus.after),
|
|
||||||
month: full.month,
|
|
||||||
disable: !(disableBefore && disableAfter),
|
|
||||||
isDay,
|
|
||||||
userChecked: false
|
|
||||||
}
|
|
||||||
if (info) {
|
|
||||||
data.extraInfo = info
|
|
||||||
}
|
}
|
||||||
|
|
||||||
dateArr.push(data)
|
let multiples = this.multipleStatus.data
|
||||||
|
let multiplesStatus = -1
|
||||||
|
if (this.range && multiples) {
|
||||||
|
multiplesStatus = multiples.findIndex((item) => {
|
||||||
|
return this.dateEqual(item, currentDate)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const checked = multiplesStatus !== -1
|
||||||
|
|
||||||
|
result.push({
|
||||||
|
fullDate: currentDate,
|
||||||
|
year: dateObj.year,
|
||||||
|
date: i,
|
||||||
|
multiple: this.range ? checked : false,
|
||||||
|
beforeMultiple: this.isLogicBefore(currentDate, this.multipleStatus.before, this.multipleStatus.after),
|
||||||
|
afterMultiple: this.isLogicAfter(currentDate, this.multipleStatus.before, this.multipleStatus.after),
|
||||||
|
month: dateObj.month,
|
||||||
|
disable: (this.startDate && !dateCompare(this.startDate, currentDate)) || (this.endDate && !dateCompare(
|
||||||
|
currentDate, this.endDate)),
|
||||||
|
isToday,
|
||||||
|
userChecked: false,
|
||||||
|
extraInfo: info
|
||||||
|
})
|
||||||
}
|
}
|
||||||
return dateArr
|
return result
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
* 获取下月天数
|
* 获取下一个月日期集合
|
||||||
*/
|
*/
|
||||||
_getNextMonthDays(surplus, full) {
|
_getNextMonthDays(amount, dateObj) {
|
||||||
let dateArr = []
|
const result = []
|
||||||
for (let i = 1; i < surplus + 1; i++) {
|
const month = dateObj.month + 1
|
||||||
dateArr.push({
|
for (let i = 1; i <= amount; i++) {
|
||||||
|
result.push({
|
||||||
date: i,
|
date: i,
|
||||||
month: Number(full.month) + 1,
|
month,
|
||||||
disable: true
|
disable: true
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
return dateArr
|
return result
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -205,58 +182,37 @@ class Calendar {
|
|||||||
if (!date) {
|
if (!date) {
|
||||||
date = new Date()
|
date = new Date()
|
||||||
}
|
}
|
||||||
const dateInfo = this.canlender.find(item => item.fullDate === this.getDate(date).fullDate)
|
const res = this.calendar.find(item => item.fullDate === this.getDateObj(date).fullDate)
|
||||||
return dateInfo
|
return res ? res : this.getDateObj(date)
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 比较时间大小
|
|
||||||
*/
|
|
||||||
dateCompare(startDate, endDate) {
|
|
||||||
// 计算截止时间
|
|
||||||
startDate = new Date(startDate.replace('-', '/').replace('-', '/'))
|
|
||||||
// 计算详细项的截止时间
|
|
||||||
endDate = new Date(endDate.replace('-', '/').replace('-', '/'))
|
|
||||||
if (startDate <= endDate) {
|
|
||||||
return true
|
|
||||||
} else {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 比较时间是否相等
|
* 比较时间是否相等
|
||||||
*/
|
*/
|
||||||
dateEqual(before, after) {
|
dateEqual(before, after) {
|
||||||
// 计算截止时间
|
before = new Date(fixIosDateFormat(before))
|
||||||
before = new Date(before.replace('-', '/').replace('-', '/'))
|
after = new Date(fixIosDateFormat(after))
|
||||||
// 计算详细项的截止时间
|
return before.valueOf() === after.valueOf()
|
||||||
after = new Date(after.replace('-', '/').replace('-', '/'))
|
|
||||||
if (before.getTime() - after.getTime() === 0) {
|
|
||||||
return true
|
|
||||||
} else {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 比较真实起始日期
|
* 比较真实起始日期
|
||||||
*/
|
*/
|
||||||
|
|
||||||
isLogicBefore(currentDay, before, after) {
|
isLogicBefore(currentDate, before, after) {
|
||||||
let logicBefore = before
|
let logicBefore = before
|
||||||
if (before && after) {
|
if (before && after) {
|
||||||
logicBefore = this.dateCompare(before, after) ? before : after
|
logicBefore = dateCompare(before, after) ? before : after
|
||||||
}
|
}
|
||||||
return this.dateEqual(logicBefore, currentDay)
|
return this.dateEqual(logicBefore, currentDate)
|
||||||
}
|
}
|
||||||
|
|
||||||
isLogicAfter(currentDay, before, after) {
|
isLogicAfter(currentDate, before, after) {
|
||||||
let logicAfter = after
|
let logicAfter = after
|
||||||
if (before && after) {
|
if (before && after) {
|
||||||
logicAfter = this.dateCompare(before, after) ? after : before
|
logicAfter = dateCompare(before, after) ? after : before
|
||||||
}
|
}
|
||||||
return this.dateEqual(logicAfter, currentDay)
|
return this.dateEqual(logicAfter, currentDate)
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -276,7 +232,7 @@ class Calendar {
|
|||||||
var unixDe = de.getTime() - 24 * 60 * 60 * 1000
|
var unixDe = de.getTime() - 24 * 60 * 60 * 1000
|
||||||
for (var k = unixDb; k <= unixDe;) {
|
for (var k = unixDb; k <= unixDe;) {
|
||||||
k = k + 24 * 60 * 60 * 1000
|
k = k + 24 * 60 * 60 * 1000
|
||||||
arr.push(this.getDate(new Date(parseInt(k))).fullDate)
|
arr.push(this.getDateObj(new Date(parseInt(k))).fullDate)
|
||||||
}
|
}
|
||||||
return arr
|
return arr
|
||||||
}
|
}
|
||||||
@@ -285,11 +241,12 @@ class Calendar {
|
|||||||
* 获取多选状态
|
* 获取多选状态
|
||||||
*/
|
*/
|
||||||
setMultiple(fullDate) {
|
setMultiple(fullDate) {
|
||||||
|
if (!this.range) return
|
||||||
|
|
||||||
let {
|
let {
|
||||||
before,
|
before,
|
||||||
after
|
after
|
||||||
} = this.multipleStatus
|
} = this.multipleStatus
|
||||||
if (!this.range) return
|
|
||||||
if (before && after) {
|
if (before && after) {
|
||||||
if (!this.lastHover) {
|
if (!this.lastHover) {
|
||||||
this.lastHover = true
|
this.lastHover = true
|
||||||
@@ -303,10 +260,11 @@ class Calendar {
|
|||||||
} else {
|
} else {
|
||||||
if (!before) {
|
if (!before) {
|
||||||
this.multipleStatus.before = fullDate
|
this.multipleStatus.before = fullDate
|
||||||
|
this.multipleStatus.after = undefined;
|
||||||
this.lastHover = false
|
this.lastHover = false
|
||||||
} else {
|
} else {
|
||||||
this.multipleStatus.after = fullDate
|
this.multipleStatus.after = fullDate
|
||||||
if (this.dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
|
if (dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
|
||||||
this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus
|
this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus
|
||||||
.after);
|
.after);
|
||||||
} else {
|
} else {
|
||||||
@@ -316,32 +274,33 @@ class Calendar {
|
|||||||
this.lastHover = true
|
this.lastHover = true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this._getWeek(fullDate)
|
this.getWeeks(fullDate)
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 鼠标 hover 更新多选状态
|
* 鼠标 hover 更新多选状态
|
||||||
*/
|
*/
|
||||||
setHoverMultiple(fullDate) {
|
setHoverMultiple(fullDate) {
|
||||||
let {
|
//抖音小程序点击会触发hover事件,需要避免一下
|
||||||
before,
|
// #ifndef MP-TOUTIAO
|
||||||
after
|
if (!this.range || this.lastHover) return
|
||||||
|
const {
|
||||||
|
before
|
||||||
} = this.multipleStatus
|
} = this.multipleStatus
|
||||||
|
|
||||||
if (!this.range) return
|
|
||||||
if (this.lastHover) return
|
|
||||||
|
|
||||||
if (!before) {
|
if (!before) {
|
||||||
this.multipleStatus.before = fullDate
|
this.multipleStatus.before = fullDate
|
||||||
} else {
|
} else {
|
||||||
this.multipleStatus.after = fullDate
|
this.multipleStatus.after = fullDate
|
||||||
if (this.dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
|
if (dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
|
||||||
this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus.after);
|
this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus.after);
|
||||||
} else {
|
} else {
|
||||||
this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus.before);
|
this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus.before);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this._getWeek(fullDate)
|
this.getWeeks(fullDate)
|
||||||
|
// #endif
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -351,12 +310,12 @@ class Calendar {
|
|||||||
this.multipleStatus.before = before
|
this.multipleStatus.before = before
|
||||||
this.multipleStatus.after = after
|
this.multipleStatus.after = after
|
||||||
if (before && after) {
|
if (before && after) {
|
||||||
if (this.dateCompare(before, after)) {
|
if (dateCompare(before, after)) {
|
||||||
this.multipleStatus.data = this.geDateAll(before, after);
|
this.multipleStatus.data = this.geDateAll(before, after);
|
||||||
this._getWeek(after)
|
this.getWeeks(after)
|
||||||
} else {
|
} else {
|
||||||
this.multipleStatus.data = this.geDateAll(after, before);
|
this.multipleStatus.data = this.geDateAll(after, before);
|
||||||
this._getWeek(before)
|
this.getWeeks(before)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -365,46 +324,98 @@ class Calendar {
|
|||||||
* 获取每周数据
|
* 获取每周数据
|
||||||
* @param {Object} dateData
|
* @param {Object} dateData
|
||||||
*/
|
*/
|
||||||
_getWeek(dateData) {
|
getWeeks(dateData) {
|
||||||
const {
|
const {
|
||||||
fullDate,
|
|
||||||
year,
|
year,
|
||||||
month,
|
month,
|
||||||
date,
|
} = this.getDateObj(dateData)
|
||||||
day
|
|
||||||
} = this.getDate(dateData)
|
const preMonthDayAmount = new Date(year, month - 1, 1).getDay()
|
||||||
let firstDay = new Date(year, month - 1, 1).getDay()
|
const preMonthDays = this.getPreMonthDays(preMonthDayAmount, this.getDateObj(dateData))
|
||||||
let currentDay = new Date(year, month, 0).getDate()
|
|
||||||
let dates = {
|
const currentMonthDayAmount = new Date(year, month, 0).getDate()
|
||||||
lastMonthDays: this._getLastMonthDays(firstDay, this.getDate(dateData)), // 上个月末尾几天
|
const currentMonthDays = this.getCurrentMonthDays(currentMonthDayAmount, this.getDateObj(dateData))
|
||||||
currentMonthDys: this._currentMonthDys(currentDay, this.getDate(dateData)), // 本月天数
|
|
||||||
nextMonthDays: [], // 下个月开始几天
|
const nextMonthDayAmount = 42 - preMonthDayAmount - currentMonthDayAmount
|
||||||
weeks: []
|
const nextMonthDays = this._getNextMonthDays(nextMonthDayAmount, this.getDateObj(dateData))
|
||||||
}
|
|
||||||
let canlender = []
|
const calendarDays = [...preMonthDays, ...currentMonthDays, ...nextMonthDays]
|
||||||
const surplus = 42 - (dates.lastMonthDays.length + dates.currentMonthDys.length)
|
|
||||||
dates.nextMonthDays = this._getNextMonthDays(surplus, this.getDate(dateData))
|
const weeks = new Array(6)
|
||||||
canlender = canlender.concat(dates.lastMonthDays, dates.currentMonthDys, dates.nextMonthDays)
|
for (let i = 0; i < calendarDays.length; i++) {
|
||||||
let weeks = {}
|
const index = Math.floor(i / 7)
|
||||||
// 拼接数组 上个月开始几天 + 本月天数+ 下个月开始几天
|
if (!weeks[index]) {
|
||||||
for (let i = 0; i < canlender.length; i++) {
|
weeks[index] = new Array(7)
|
||||||
if (i % 7 === 0) {
|
|
||||||
weeks[parseInt(i / 7)] = new Array(7)
|
|
||||||
}
|
}
|
||||||
weeks[parseInt(i / 7)][i % 7] = canlender[i]
|
weeks[index][i % 7] = calendarDays[i]
|
||||||
}
|
}
|
||||||
this.canlender = canlender
|
|
||||||
|
this.calendar = calendarDays
|
||||||
this.weeks = weeks
|
this.weeks = weeks
|
||||||
}
|
}
|
||||||
|
|
||||||
//静态方法
|
|
||||||
// static init(date) {
|
|
||||||
// if (!this.instance) {
|
|
||||||
// this.instance = new Calendar(date);
|
|
||||||
// }
|
|
||||||
// return this.instance;
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getDateTime(date, hideSecond) {
|
||||||
|
return `${getDate(date)} ${getTime(date, hideSecond)}`
|
||||||
|
}
|
||||||
|
|
||||||
export default Calendar
|
function getDate(date) {
|
||||||
|
date = fixIosDateFormat(date)
|
||||||
|
date = new Date(date)
|
||||||
|
const year = date.getFullYear()
|
||||||
|
const month = date.getMonth() + 1
|
||||||
|
const day = date.getDate()
|
||||||
|
return `${year}-${addZero(month)}-${addZero(day)}`
|
||||||
|
}
|
||||||
|
|
||||||
|
function getTime(date, hideSecond) {
|
||||||
|
date = fixIosDateFormat(date)
|
||||||
|
date = new Date(date)
|
||||||
|
const hour = date.getHours()
|
||||||
|
const minute = date.getMinutes()
|
||||||
|
const second = date.getSeconds()
|
||||||
|
return hideSecond ? `${addZero(hour)}:${addZero(minute)}` : `${addZero(hour)}:${addZero(minute)}:${addZero(second)}`
|
||||||
|
}
|
||||||
|
|
||||||
|
function addZero(num) {
|
||||||
|
if (num < 10) {
|
||||||
|
num = `0${num}`
|
||||||
|
}
|
||||||
|
return num
|
||||||
|
}
|
||||||
|
|
||||||
|
function getDefaultSecond(hideSecond) {
|
||||||
|
return hideSecond ? '00:00' : '00:00:00'
|
||||||
|
}
|
||||||
|
|
||||||
|
function dateCompare(startDate, endDate) {
|
||||||
|
startDate = new Date(fixIosDateFormat(typeof startDate === 'string' ? startDate.trim() : startDate))
|
||||||
|
endDate = new Date(fixIosDateFormat(typeof endDate === 'string' ? endDate.trim() : endDate))
|
||||||
|
return startDate <= endDate
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkDate(date) {
|
||||||
|
const dateReg = /((19|20)\d{2})(-|\/)\d{1,2}(-|\/)\d{1,2}/g
|
||||||
|
return date.match(dateReg)
|
||||||
|
}
|
||||||
|
//ios低版本15及以下,无法匹配 没有 ’秒‘ 时的情况,所以需要在末尾 秒 加上 问号
|
||||||
|
const dateTimeReg = /^\d{4}-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])( [0-5]?[0-9]:[0-5]?[0-9](:[0-5]?[0-9])?)?$/;
|
||||||
|
|
||||||
|
function fixIosDateFormat(value) {
|
||||||
|
if (typeof value === 'string' && dateTimeReg.test(value)) {
|
||||||
|
value = value.replace(/-/g, '/')
|
||||||
|
}
|
||||||
|
return value
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Calendar,
|
||||||
|
getDateTime,
|
||||||
|
getDate,
|
||||||
|
getTime,
|
||||||
|
addZero,
|
||||||
|
getDefaultSecond,
|
||||||
|
dateCompare,
|
||||||
|
checkDate,
|
||||||
|
fixIosDateFormat
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"id": "uni-datetime-picker",
|
"id": "uni-datetime-picker",
|
||||||
"displayName": "uni-datetime-picker 日期选择器",
|
"displayName": "uni-datetime-picker 日期选择器",
|
||||||
"version": "2.2.11",
|
"version": "2.2.42",
|
||||||
"description": "uni-datetime-picker 日期时间选择器,支持日历,支持范围选择",
|
"description": "uni-datetime-picker 日期时间选择器,支持日历,支持范围选择",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"uni-datetime-picker",
|
"uni-datetime-picker",
|
||||||
@@ -12,12 +12,14 @@
|
|||||||
],
|
],
|
||||||
"repository": "https://github.com/dcloudio/uni-ui",
|
"repository": "https://github.com/dcloudio/uni-ui",
|
||||||
"engines": {
|
"engines": {
|
||||||
"HBuilderX": ""
|
"HBuilderX": "",
|
||||||
|
"uni-app": "^4.07",
|
||||||
|
"uni-app-x": ""
|
||||||
},
|
},
|
||||||
"directories": {
|
"directories": {
|
||||||
"example": "../../temps/example_temps"
|
"example": "../../temps/example_temps"
|
||||||
},
|
},
|
||||||
"dcloudext": {
|
"dcloudext": {
|
||||||
"sale": {
|
"sale": {
|
||||||
"regular": {
|
"regular": {
|
||||||
"price": "0.00"
|
"price": "0.00"
|
||||||
@@ -35,51 +37,69 @@
|
|||||||
"permissions": "无"
|
"permissions": "无"
|
||||||
},
|
},
|
||||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||||
"type": "component-vue"
|
"type": "component-vue",
|
||||||
|
"darkmode": "x",
|
||||||
|
"i18n": "x",
|
||||||
|
"widescreen": "x"
|
||||||
},
|
},
|
||||||
"uni_modules": {
|
"uni_modules": {
|
||||||
"dependencies": [
|
"dependencies": [
|
||||||
"uni-scss",
|
"uni-scss",
|
||||||
"uni-icons"
|
"uni-icons"
|
||||||
],
|
],
|
||||||
"encrypt": [],
|
"encrypt": [],
|
||||||
"platforms": {
|
"platforms": {
|
||||||
"cloud": {
|
"cloud": {
|
||||||
"tcb": "y",
|
"tcb": "x",
|
||||||
"aliyun": "y"
|
"aliyun": "x",
|
||||||
|
"alipay": "x"
|
||||||
},
|
},
|
||||||
"client": {
|
"client": {
|
||||||
"App": {
|
"uni-app": {
|
||||||
"app-vue": "y",
|
"vue": {
|
||||||
"app-nvue": "n"
|
"vue2": "√",
|
||||||
|
"vue3": "√"
|
||||||
|
},
|
||||||
|
"web": {
|
||||||
|
"safari": "√",
|
||||||
|
"chrome": "√"
|
||||||
|
},
|
||||||
|
"app": {
|
||||||
|
"vue": "√",
|
||||||
|
"nvue": "√",
|
||||||
|
"android": "√",
|
||||||
|
"ios": "√",
|
||||||
|
"harmony": "√"
|
||||||
|
},
|
||||||
|
"mp": {
|
||||||
|
"weixin": "√",
|
||||||
|
"alipay": "√",
|
||||||
|
"toutiao": "√",
|
||||||
|
"baidu": "√",
|
||||||
|
"kuaishou": "-",
|
||||||
|
"jd": "-",
|
||||||
|
"harmony": "-",
|
||||||
|
"qq": "√",
|
||||||
|
"lark": "-"
|
||||||
|
},
|
||||||
|
"quickapp": {
|
||||||
|
"huawei": "√",
|
||||||
|
"union": "√"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"H5-mobile": {
|
"uni-app-x": {
|
||||||
"Safari": "y",
|
"web": {
|
||||||
"Android Browser": "y",
|
"safari": "-",
|
||||||
"微信浏览器(Android)": "y",
|
"chrome": "-"
|
||||||
"QQ浏览器(Android)": "y"
|
},
|
||||||
},
|
"app": {
|
||||||
"H5-pc": {
|
"android": "-",
|
||||||
"Chrome": "y",
|
"ios": "-",
|
||||||
"IE": "y",
|
"harmony": "-"
|
||||||
"Edge": "y",
|
},
|
||||||
"Firefox": "y",
|
"mp": {
|
||||||
"Safari": "y"
|
"weixin": "-"
|
||||||
},
|
}
|
||||||
"小程序": {
|
|
||||||
"微信": "y",
|
|
||||||
"阿里": "y",
|
|
||||||
"百度": "y",
|
|
||||||
"字节跳动": "y",
|
|
||||||
"QQ": "y"
|
|
||||||
},
|
|
||||||
"快应用": {
|
|
||||||
"华为": "u",
|
|
||||||
"联盟": "u"
|
|
||||||
},
|
|
||||||
"Vue": {
|
|
||||||
"vue2": "y",
|
|
||||||
"vue3": "y"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,3 +1,25 @@
|
|||||||
|
## 2.0.12(2025-08-26)
|
||||||
|
- 优化 uni-app x 下 size 类型问题
|
||||||
|
## 2.0.11(2025-08-18)
|
||||||
|
- 修复 图标点击事件返回
|
||||||
|
## 2.0.9(2024-01-12)
|
||||||
|
fix: 修复图标大小默认值错误的问题
|
||||||
|
## 2.0.8(2023-12-14)
|
||||||
|
- 修复 项目未使用 ts 情况下,打包报错的bug
|
||||||
|
## 2.0.7(2023-12-14)
|
||||||
|
- 修复 size 属性为 string 时,不加单位导致尺寸异常的bug
|
||||||
|
## 2.0.6(2023-12-11)
|
||||||
|
- 优化 兼容老版本icon类型,如 top ,bottom 等
|
||||||
|
## 2.0.5(2023-12-11)
|
||||||
|
- 优化 兼容老版本icon类型,如 top ,bottom 等
|
||||||
|
## 2.0.4(2023-12-06)
|
||||||
|
- 优化 uni-app x 下示例项目图标排序
|
||||||
|
## 2.0.3(2023-12-06)
|
||||||
|
- 修复 nvue下引入组件报错的bug
|
||||||
|
## 2.0.2(2023-12-05)
|
||||||
|
-优化 size 属性支持单位
|
||||||
|
## 2.0.1(2023-12-05)
|
||||||
|
- 新增 uni-app x 支持定义图标
|
||||||
## 1.3.5(2022-01-24)
|
## 1.3.5(2022-01-24)
|
||||||
- 优化 size 属性可以传入不带单位的字符串数值
|
- 优化 size 属性可以传入不带单位的字符串数值
|
||||||
## 1.3.4(2022-01-24)
|
## 1.3.4(2022-01-24)
|
||||||
|
|||||||
91
uni_modules/uni-icons/components/uni-icons/uni-icons.uvue
Normal file
@@ -0,0 +1,91 @@
|
|||||||
|
<template>
|
||||||
|
<text class="uni-icons" :style="styleObj">
|
||||||
|
<slot>{{unicode}}</slot>
|
||||||
|
</text>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { fontData, IconsDataItem } from './uniicons_file'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Icons 图标
|
||||||
|
* @description 用于展示 icon 图标
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=28
|
||||||
|
* @property {Number} size 图标大小
|
||||||
|
* @property {String} type 图标图案,参考示例
|
||||||
|
* @property {String} color 图标颜色
|
||||||
|
* @property {String} customPrefix 自定义图标
|
||||||
|
* @event {Function} click 点击 Icon 触发事件
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name: "uni-icons",
|
||||||
|
props: {
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
color: {
|
||||||
|
type: String,
|
||||||
|
default: '#333333'
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: 16
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
unicode() : string {
|
||||||
|
let codes = fontData.find((item : IconsDataItem) : boolean => { return item.font_class == this.type })
|
||||||
|
if (codes !== null) {
|
||||||
|
return codes.unicode
|
||||||
|
}
|
||||||
|
return ''
|
||||||
|
},
|
||||||
|
iconSize() : string {
|
||||||
|
const size = this.size
|
||||||
|
if (typeof size == 'string') {
|
||||||
|
const reg = /^[0-9]*$/g
|
||||||
|
return reg.test(size as string) ? '' + size + 'px' : '' + size;
|
||||||
|
// return '' + this.size
|
||||||
|
}
|
||||||
|
return this.getFontSize(size as number)
|
||||||
|
},
|
||||||
|
styleObj() : UTSJSONObject {
|
||||||
|
if (this.fontFamily !== '') {
|
||||||
|
return { color: this.color, fontSize: this.iconSize, fontFamily: this.fontFamily }
|
||||||
|
}
|
||||||
|
return { color: this.color, fontSize: this.iconSize }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() { },
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 字体大小
|
||||||
|
*/
|
||||||
|
getFontSize(size : number) : string {
|
||||||
|
return size + 'px';
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
@font-face {
|
||||||
|
font-family: UniIconsFontFamily;
|
||||||
|
src: url('./uniicons.ttf');
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-icons {
|
||||||
|
font-family: UniIconsFontFamily;
|
||||||
|
font-size: 18px;
|
||||||
|
font-style: normal;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,24 +1,28 @@
|
|||||||
<template>
|
<template>
|
||||||
<!-- #ifdef APP-NVUE -->
|
<!-- #ifdef APP-NVUE -->
|
||||||
<text :style="{ color: color, 'font-size': iconSize }" class="uni-icons" @click="_onClick">{{unicode}}</text>
|
<text :style="styleObj" class="uni-icons" @click="_onClick">{{unicode}}</text>
|
||||||
<!-- #endif -->
|
<!-- #endif -->
|
||||||
<!-- #ifndef APP-NVUE -->
|
<!-- #ifndef APP-NVUE -->
|
||||||
<text :style="{ color: color, 'font-size': iconSize }" class="uni-icons" :class="['uniui-'+type,customPrefix,customPrefix?type:'']" @click="_onClick"></text>
|
<text :style="styleObj" class="uni-icons" :class="['uniui-'+type,customPrefix,customPrefix?type:'']" @click="_onClick">
|
||||||
|
<slot></slot>
|
||||||
|
</text>
|
||||||
<!-- #endif -->
|
<!-- #endif -->
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import icons from './icons.js';
|
import { fontData } from './uniicons_file_vue.js';
|
||||||
|
|
||||||
const getVal = (val) => {
|
const getVal = (val) => {
|
||||||
const reg = /^[0-9]*$/g
|
const reg = /^[0-9]*$/g
|
||||||
return (typeof val === 'number' || reg.test(val) )? val + 'px' : val;
|
return (typeof val === 'number' || reg.test(val)) ? val + 'px' : val;
|
||||||
}
|
}
|
||||||
|
|
||||||
// #ifdef APP-NVUE
|
// #ifdef APP-NVUE
|
||||||
var domModule = weex.requireModule('dom');
|
var domModule = weex.requireModule('dom');
|
||||||
import iconUrl from './uniicons.ttf'
|
import iconUrl from './uniicons.ttf'
|
||||||
domModule.addRule('fontFace', {
|
domModule.addRule('fontFace', {
|
||||||
'fontFamily': "uniicons",
|
'fontFamily': "uniicons",
|
||||||
'src': "url('"+iconUrl+"')"
|
'src': "url('" + iconUrl + "')"
|
||||||
});
|
});
|
||||||
// #endif
|
// #endif
|
||||||
|
|
||||||
@@ -34,7 +38,7 @@
|
|||||||
*/
|
*/
|
||||||
export default {
|
export default {
|
||||||
name: 'UniIcons',
|
name: 'UniIcons',
|
||||||
emits:['click'],
|
emits: ['click'],
|
||||||
props: {
|
props: {
|
||||||
type: {
|
type: {
|
||||||
type: String,
|
type: String,
|
||||||
@@ -48,31 +52,41 @@
|
|||||||
type: [Number, String],
|
type: [Number, String],
|
||||||
default: 16
|
default: 16
|
||||||
},
|
},
|
||||||
customPrefix:{
|
customPrefix: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: ''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
icons: icons.glyphs
|
icons: fontData
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed:{
|
computed: {
|
||||||
unicode(){
|
unicode() {
|
||||||
let code = this.icons.find(v=>v.font_class === this.type)
|
let code = this.icons.find(v => v.font_class === this.type)
|
||||||
if(code){
|
if (code) {
|
||||||
return unescape(`%u${code.unicode}`)
|
return code.unicode
|
||||||
}
|
}
|
||||||
return ''
|
return ''
|
||||||
},
|
},
|
||||||
iconSize(){
|
iconSize() {
|
||||||
return getVal(this.size)
|
return getVal(this.size)
|
||||||
|
},
|
||||||
|
styleObj() {
|
||||||
|
if (this.fontFamily !== '') {
|
||||||
|
return `color: ${this.color}; font-size: ${this.iconSize}; font-family: ${this.fontFamily};`
|
||||||
|
}
|
||||||
|
return `color: ${this.color}; font-size: ${this.iconSize};`
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
_onClick() {
|
_onClick(e) {
|
||||||
this.$emit('click')
|
this.$emit('click', e)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -81,9 +95,10 @@
|
|||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
/* #ifndef APP-NVUE */
|
/* #ifndef APP-NVUE */
|
||||||
@import './uniicons.css';
|
@import './uniicons.css';
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: uniicons;
|
font-family: uniicons;
|
||||||
src: url('./uniicons.ttf') format('truetype');
|
src: url('./uniicons.ttf');
|
||||||
}
|
}
|
||||||
|
|
||||||
/* #endif */
|
/* #endif */
|
||||||
@@ -92,5 +107,4 @@
|
|||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
@@ -1,3 +1,12 @@
|
|||||||
|
|
||||||
|
.uniui-cart-filled:before {
|
||||||
|
content: "\e6d0";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-gift-filled:before {
|
||||||
|
content: "\e6c4";
|
||||||
|
}
|
||||||
|
|
||||||
.uniui-color:before {
|
.uniui-color:before {
|
||||||
content: "\e6cf";
|
content: "\e6cf";
|
||||||
}
|
}
|
||||||
@@ -58,10 +67,6 @@
|
|||||||
content: "\e6c3";
|
content: "\e6c3";
|
||||||
}
|
}
|
||||||
|
|
||||||
.uniui-gift-filled:before {
|
|
||||||
content: "\e6c4";
|
|
||||||
}
|
|
||||||
|
|
||||||
.uniui-fire-filled:before {
|
.uniui-fire-filled:before {
|
||||||
content: "\e6c5";
|
content: "\e6c5";
|
||||||
}
|
}
|
||||||
@@ -82,6 +87,18 @@
|
|||||||
content: "\e698";
|
content: "\e698";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.uniui-arrowthinleft:before {
|
||||||
|
content: "\e6d2";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-arrowthinup:before {
|
||||||
|
content: "\e6d3";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-arrowthindown:before {
|
||||||
|
content: "\e6d4";
|
||||||
|
}
|
||||||
|
|
||||||
.uniui-back:before {
|
.uniui-back:before {
|
||||||
content: "\e6b9";
|
content: "\e6b9";
|
||||||
}
|
}
|
||||||
@@ -94,55 +111,43 @@
|
|||||||
content: "\e6bb";
|
content: "\e6bb";
|
||||||
}
|
}
|
||||||
|
|
||||||
.uniui-arrowthinright:before {
|
|
||||||
content: "\e6bb";
|
|
||||||
}
|
|
||||||
|
|
||||||
.uniui-arrow-left:before {
|
.uniui-arrow-left:before {
|
||||||
content: "\e6bc";
|
content: "\e6bc";
|
||||||
}
|
}
|
||||||
|
|
||||||
.uniui-arrowthinleft:before {
|
|
||||||
content: "\e6bc";
|
|
||||||
}
|
|
||||||
|
|
||||||
.uniui-arrow-up:before {
|
.uniui-arrow-up:before {
|
||||||
content: "\e6bd";
|
content: "\e6bd";
|
||||||
}
|
}
|
||||||
|
|
||||||
.uniui-arrowthinup:before {
|
|
||||||
content: "\e6bd";
|
|
||||||
}
|
|
||||||
|
|
||||||
.uniui-arrow-down:before {
|
.uniui-arrow-down:before {
|
||||||
content: "\e6be";
|
content: "\e6be";
|
||||||
}
|
}
|
||||||
|
|
||||||
.uniui-arrowthindown:before {
|
.uniui-arrowthinright:before {
|
||||||
content: "\e6be";
|
content: "\e6d1";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-down:before {
|
||||||
|
content: "\e6b8";
|
||||||
}
|
}
|
||||||
|
|
||||||
.uniui-bottom:before {
|
.uniui-bottom:before {
|
||||||
content: "\e6b8";
|
content: "\e6b8";
|
||||||
}
|
}
|
||||||
|
|
||||||
.uniui-arrowdown:before {
|
.uniui-arrowright:before {
|
||||||
content: "\e6b8";
|
content: "\e6d5";
|
||||||
}
|
}
|
||||||
|
|
||||||
.uniui-right:before {
|
.uniui-right:before {
|
||||||
content: "\e6b5";
|
content: "\e6b5";
|
||||||
}
|
}
|
||||||
|
|
||||||
.uniui-arrowright:before {
|
.uniui-up:before {
|
||||||
content: "\e6b5";
|
|
||||||
}
|
|
||||||
|
|
||||||
.uniui-top:before {
|
|
||||||
content: "\e6b6";
|
content: "\e6b6";
|
||||||
}
|
}
|
||||||
|
|
||||||
.uniui-arrowup:before {
|
.uniui-top:before {
|
||||||
content: "\e6b6";
|
content: "\e6b6";
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -150,8 +155,8 @@
|
|||||||
content: "\e6b7";
|
content: "\e6b7";
|
||||||
}
|
}
|
||||||
|
|
||||||
.uniui-arrowleft:before {
|
.uniui-arrowup:before {
|
||||||
content: "\e6b7";
|
content: "\e6d6";
|
||||||
}
|
}
|
||||||
|
|
||||||
.uniui-eye:before {
|
.uniui-eye:before {
|
||||||
@@ -638,10 +643,6 @@
|
|||||||
content: "\e627";
|
content: "\e627";
|
||||||
}
|
}
|
||||||
|
|
||||||
.uniui-cart-filled:before {
|
|
||||||
content: "\e629";
|
|
||||||
}
|
|
||||||
|
|
||||||
.uniui-checkbox:before {
|
.uniui-checkbox:before {
|
||||||
content: "\e62b";
|
content: "\e62b";
|
||||||
}
|
}
|
||||||
|
|||||||
664
uni_modules/uni-icons/components/uni-icons/uniicons_file.ts
Normal file
@@ -0,0 +1,664 @@
|
|||||||
|
|
||||||
|
export type IconsData = {
|
||||||
|
id : string
|
||||||
|
name : string
|
||||||
|
font_family : string
|
||||||
|
css_prefix_text : string
|
||||||
|
description : string
|
||||||
|
glyphs : Array<IconsDataItem>
|
||||||
|
}
|
||||||
|
|
||||||
|
export type IconsDataItem = {
|
||||||
|
font_class : string
|
||||||
|
unicode : string
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export const fontData = [
|
||||||
|
{
|
||||||
|
"font_class": "arrow-down",
|
||||||
|
"unicode": "\ue6be"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "arrow-left",
|
||||||
|
"unicode": "\ue6bc"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "arrow-right",
|
||||||
|
"unicode": "\ue6bb"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "arrow-up",
|
||||||
|
"unicode": "\ue6bd"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "auth",
|
||||||
|
"unicode": "\ue6ab"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "auth-filled",
|
||||||
|
"unicode": "\ue6cc"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "back",
|
||||||
|
"unicode": "\ue6b9"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "bars",
|
||||||
|
"unicode": "\ue627"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "calendar",
|
||||||
|
"unicode": "\ue6a0"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "calendar-filled",
|
||||||
|
"unicode": "\ue6c0"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "camera",
|
||||||
|
"unicode": "\ue65a"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "camera-filled",
|
||||||
|
"unicode": "\ue658"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "cart",
|
||||||
|
"unicode": "\ue631"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "cart-filled",
|
||||||
|
"unicode": "\ue6d0"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "chat",
|
||||||
|
"unicode": "\ue65d"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "chat-filled",
|
||||||
|
"unicode": "\ue659"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "chatboxes",
|
||||||
|
"unicode": "\ue696"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "chatboxes-filled",
|
||||||
|
"unicode": "\ue692"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "chatbubble",
|
||||||
|
"unicode": "\ue697"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "chatbubble-filled",
|
||||||
|
"unicode": "\ue694"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "checkbox",
|
||||||
|
"unicode": "\ue62b"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "checkbox-filled",
|
||||||
|
"unicode": "\ue62c"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "checkmarkempty",
|
||||||
|
"unicode": "\ue65c"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "circle",
|
||||||
|
"unicode": "\ue65b"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "circle-filled",
|
||||||
|
"unicode": "\ue65e"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "clear",
|
||||||
|
"unicode": "\ue66d"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "close",
|
||||||
|
"unicode": "\ue673"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "closeempty",
|
||||||
|
"unicode": "\ue66c"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "cloud-download",
|
||||||
|
"unicode": "\ue647"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "cloud-download-filled",
|
||||||
|
"unicode": "\ue646"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "cloud-upload",
|
||||||
|
"unicode": "\ue645"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "cloud-upload-filled",
|
||||||
|
"unicode": "\ue648"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "color",
|
||||||
|
"unicode": "\ue6cf"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "color-filled",
|
||||||
|
"unicode": "\ue6c9"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "compose",
|
||||||
|
"unicode": "\ue67f"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "contact",
|
||||||
|
"unicode": "\ue693"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "contact-filled",
|
||||||
|
"unicode": "\ue695"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "down",
|
||||||
|
"unicode": "\ue6b8"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "bottom",
|
||||||
|
"unicode": "\ue6b8"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "download",
|
||||||
|
"unicode": "\ue68d"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "download-filled",
|
||||||
|
"unicode": "\ue681"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "email",
|
||||||
|
"unicode": "\ue69e"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "email-filled",
|
||||||
|
"unicode": "\ue69a"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "eye",
|
||||||
|
"unicode": "\ue651"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "eye-filled",
|
||||||
|
"unicode": "\ue66a"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "eye-slash",
|
||||||
|
"unicode": "\ue6b3"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "eye-slash-filled",
|
||||||
|
"unicode": "\ue6b4"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "fire",
|
||||||
|
"unicode": "\ue6a1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "fire-filled",
|
||||||
|
"unicode": "\ue6c5"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "flag",
|
||||||
|
"unicode": "\ue65f"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "flag-filled",
|
||||||
|
"unicode": "\ue660"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "folder-add",
|
||||||
|
"unicode": "\ue6a9"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "folder-add-filled",
|
||||||
|
"unicode": "\ue6c8"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "font",
|
||||||
|
"unicode": "\ue6a3"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "forward",
|
||||||
|
"unicode": "\ue6ba"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "gear",
|
||||||
|
"unicode": "\ue664"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "gear-filled",
|
||||||
|
"unicode": "\ue661"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "gift",
|
||||||
|
"unicode": "\ue6a4"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "gift-filled",
|
||||||
|
"unicode": "\ue6c4"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "hand-down",
|
||||||
|
"unicode": "\ue63d"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "hand-down-filled",
|
||||||
|
"unicode": "\ue63c"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "hand-up",
|
||||||
|
"unicode": "\ue63f"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "hand-up-filled",
|
||||||
|
"unicode": "\ue63e"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "headphones",
|
||||||
|
"unicode": "\ue630"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "heart",
|
||||||
|
"unicode": "\ue639"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "heart-filled",
|
||||||
|
"unicode": "\ue641"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "help",
|
||||||
|
"unicode": "\ue679"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "help-filled",
|
||||||
|
"unicode": "\ue674"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "home",
|
||||||
|
"unicode": "\ue662"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "home-filled",
|
||||||
|
"unicode": "\ue663"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "image",
|
||||||
|
"unicode": "\ue670"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "image-filled",
|
||||||
|
"unicode": "\ue678"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "images",
|
||||||
|
"unicode": "\ue650"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "images-filled",
|
||||||
|
"unicode": "\ue64b"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "info",
|
||||||
|
"unicode": "\ue669"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "info-filled",
|
||||||
|
"unicode": "\ue649"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "left",
|
||||||
|
"unicode": "\ue6b7"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "link",
|
||||||
|
"unicode": "\ue6a5"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "list",
|
||||||
|
"unicode": "\ue644"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "location",
|
||||||
|
"unicode": "\ue6ae"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "location-filled",
|
||||||
|
"unicode": "\ue6af"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "locked",
|
||||||
|
"unicode": "\ue66b"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "locked-filled",
|
||||||
|
"unicode": "\ue668"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "loop",
|
||||||
|
"unicode": "\ue633"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "mail-open",
|
||||||
|
"unicode": "\ue643"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "mail-open-filled",
|
||||||
|
"unicode": "\ue63a"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "map",
|
||||||
|
"unicode": "\ue667"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "map-filled",
|
||||||
|
"unicode": "\ue666"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "map-pin",
|
||||||
|
"unicode": "\ue6ad"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "map-pin-ellipse",
|
||||||
|
"unicode": "\ue6ac"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "medal",
|
||||||
|
"unicode": "\ue6a2"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "medal-filled",
|
||||||
|
"unicode": "\ue6c3"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "mic",
|
||||||
|
"unicode": "\ue671"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "mic-filled",
|
||||||
|
"unicode": "\ue677"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "micoff",
|
||||||
|
"unicode": "\ue67e"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "micoff-filled",
|
||||||
|
"unicode": "\ue6b0"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "minus",
|
||||||
|
"unicode": "\ue66f"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "minus-filled",
|
||||||
|
"unicode": "\ue67d"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "more",
|
||||||
|
"unicode": "\ue64d"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "more-filled",
|
||||||
|
"unicode": "\ue64e"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "navigate",
|
||||||
|
"unicode": "\ue66e"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "navigate-filled",
|
||||||
|
"unicode": "\ue67a"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "notification",
|
||||||
|
"unicode": "\ue6a6"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "notification-filled",
|
||||||
|
"unicode": "\ue6c1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "paperclip",
|
||||||
|
"unicode": "\ue652"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "paperplane",
|
||||||
|
"unicode": "\ue672"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "paperplane-filled",
|
||||||
|
"unicode": "\ue675"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "person",
|
||||||
|
"unicode": "\ue699"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "person-filled",
|
||||||
|
"unicode": "\ue69d"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "personadd",
|
||||||
|
"unicode": "\ue69f"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "personadd-filled",
|
||||||
|
"unicode": "\ue698"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "personadd-filled-copy",
|
||||||
|
"unicode": "\ue6d1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "phone",
|
||||||
|
"unicode": "\ue69c"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "phone-filled",
|
||||||
|
"unicode": "\ue69b"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "plus",
|
||||||
|
"unicode": "\ue676"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "plus-filled",
|
||||||
|
"unicode": "\ue6c7"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "plusempty",
|
||||||
|
"unicode": "\ue67b"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "pulldown",
|
||||||
|
"unicode": "\ue632"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "pyq",
|
||||||
|
"unicode": "\ue682"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "qq",
|
||||||
|
"unicode": "\ue680"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "redo",
|
||||||
|
"unicode": "\ue64a"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "redo-filled",
|
||||||
|
"unicode": "\ue655"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "refresh",
|
||||||
|
"unicode": "\ue657"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "refresh-filled",
|
||||||
|
"unicode": "\ue656"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "refreshempty",
|
||||||
|
"unicode": "\ue6bf"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "reload",
|
||||||
|
"unicode": "\ue6b2"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "right",
|
||||||
|
"unicode": "\ue6b5"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "scan",
|
||||||
|
"unicode": "\ue62a"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "search",
|
||||||
|
"unicode": "\ue654"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "settings",
|
||||||
|
"unicode": "\ue653"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "settings-filled",
|
||||||
|
"unicode": "\ue6ce"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "shop",
|
||||||
|
"unicode": "\ue62f"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "shop-filled",
|
||||||
|
"unicode": "\ue6cd"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "smallcircle",
|
||||||
|
"unicode": "\ue67c"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "smallcircle-filled",
|
||||||
|
"unicode": "\ue665"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "sound",
|
||||||
|
"unicode": "\ue684"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "sound-filled",
|
||||||
|
"unicode": "\ue686"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "spinner-cycle",
|
||||||
|
"unicode": "\ue68a"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "staff",
|
||||||
|
"unicode": "\ue6a7"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "staff-filled",
|
||||||
|
"unicode": "\ue6cb"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "star",
|
||||||
|
"unicode": "\ue688"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "star-filled",
|
||||||
|
"unicode": "\ue68f"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "starhalf",
|
||||||
|
"unicode": "\ue683"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "trash",
|
||||||
|
"unicode": "\ue687"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "trash-filled",
|
||||||
|
"unicode": "\ue685"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "tune",
|
||||||
|
"unicode": "\ue6aa"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "tune-filled",
|
||||||
|
"unicode": "\ue6ca"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "undo",
|
||||||
|
"unicode": "\ue64f"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "undo-filled",
|
||||||
|
"unicode": "\ue64c"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "up",
|
||||||
|
"unicode": "\ue6b6"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "top",
|
||||||
|
"unicode": "\ue6b6"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "upload",
|
||||||
|
"unicode": "\ue690"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "upload-filled",
|
||||||
|
"unicode": "\ue68e"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "videocam",
|
||||||
|
"unicode": "\ue68c"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "videocam-filled",
|
||||||
|
"unicode": "\ue689"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "vip",
|
||||||
|
"unicode": "\ue6a8"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "vip-filled",
|
||||||
|
"unicode": "\ue6c6"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "wallet",
|
||||||
|
"unicode": "\ue6b1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "wallet-filled",
|
||||||
|
"unicode": "\ue6c2"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "weibo",
|
||||||
|
"unicode": "\ue68b"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "weixin",
|
||||||
|
"unicode": "\ue691"
|
||||||
|
}
|
||||||
|
] as IconsDataItem[]
|
||||||
|
|
||||||
|
// export const fontData = JSON.parse<IconsDataItem>(fontDataJson)
|
||||||
649
uni_modules/uni-icons/components/uni-icons/uniicons_file_vue.js
Normal file
@@ -0,0 +1,649 @@
|
|||||||
|
|
||||||
|
export const fontData = [
|
||||||
|
{
|
||||||
|
"font_class": "arrow-down",
|
||||||
|
"unicode": "\ue6be"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "arrow-left",
|
||||||
|
"unicode": "\ue6bc"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "arrow-right",
|
||||||
|
"unicode": "\ue6bb"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "arrow-up",
|
||||||
|
"unicode": "\ue6bd"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "auth",
|
||||||
|
"unicode": "\ue6ab"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "auth-filled",
|
||||||
|
"unicode": "\ue6cc"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "back",
|
||||||
|
"unicode": "\ue6b9"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "bars",
|
||||||
|
"unicode": "\ue627"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "calendar",
|
||||||
|
"unicode": "\ue6a0"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "calendar-filled",
|
||||||
|
"unicode": "\ue6c0"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "camera",
|
||||||
|
"unicode": "\ue65a"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "camera-filled",
|
||||||
|
"unicode": "\ue658"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "cart",
|
||||||
|
"unicode": "\ue631"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "cart-filled",
|
||||||
|
"unicode": "\ue6d0"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "chat",
|
||||||
|
"unicode": "\ue65d"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "chat-filled",
|
||||||
|
"unicode": "\ue659"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "chatboxes",
|
||||||
|
"unicode": "\ue696"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "chatboxes-filled",
|
||||||
|
"unicode": "\ue692"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "chatbubble",
|
||||||
|
"unicode": "\ue697"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "chatbubble-filled",
|
||||||
|
"unicode": "\ue694"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "checkbox",
|
||||||
|
"unicode": "\ue62b"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "checkbox-filled",
|
||||||
|
"unicode": "\ue62c"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "checkmarkempty",
|
||||||
|
"unicode": "\ue65c"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "circle",
|
||||||
|
"unicode": "\ue65b"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "circle-filled",
|
||||||
|
"unicode": "\ue65e"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "clear",
|
||||||
|
"unicode": "\ue66d"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "close",
|
||||||
|
"unicode": "\ue673"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "closeempty",
|
||||||
|
"unicode": "\ue66c"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "cloud-download",
|
||||||
|
"unicode": "\ue647"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "cloud-download-filled",
|
||||||
|
"unicode": "\ue646"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "cloud-upload",
|
||||||
|
"unicode": "\ue645"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "cloud-upload-filled",
|
||||||
|
"unicode": "\ue648"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "color",
|
||||||
|
"unicode": "\ue6cf"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "color-filled",
|
||||||
|
"unicode": "\ue6c9"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "compose",
|
||||||
|
"unicode": "\ue67f"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "contact",
|
||||||
|
"unicode": "\ue693"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "contact-filled",
|
||||||
|
"unicode": "\ue695"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "down",
|
||||||
|
"unicode": "\ue6b8"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "bottom",
|
||||||
|
"unicode": "\ue6b8"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "download",
|
||||||
|
"unicode": "\ue68d"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "download-filled",
|
||||||
|
"unicode": "\ue681"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "email",
|
||||||
|
"unicode": "\ue69e"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "email-filled",
|
||||||
|
"unicode": "\ue69a"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "eye",
|
||||||
|
"unicode": "\ue651"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "eye-filled",
|
||||||
|
"unicode": "\ue66a"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "eye-slash",
|
||||||
|
"unicode": "\ue6b3"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "eye-slash-filled",
|
||||||
|
"unicode": "\ue6b4"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "fire",
|
||||||
|
"unicode": "\ue6a1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "fire-filled",
|
||||||
|
"unicode": "\ue6c5"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "flag",
|
||||||
|
"unicode": "\ue65f"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "flag-filled",
|
||||||
|
"unicode": "\ue660"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "folder-add",
|
||||||
|
"unicode": "\ue6a9"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "folder-add-filled",
|
||||||
|
"unicode": "\ue6c8"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "font",
|
||||||
|
"unicode": "\ue6a3"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "forward",
|
||||||
|
"unicode": "\ue6ba"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "gear",
|
||||||
|
"unicode": "\ue664"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "gear-filled",
|
||||||
|
"unicode": "\ue661"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "gift",
|
||||||
|
"unicode": "\ue6a4"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "gift-filled",
|
||||||
|
"unicode": "\ue6c4"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "hand-down",
|
||||||
|
"unicode": "\ue63d"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "hand-down-filled",
|
||||||
|
"unicode": "\ue63c"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "hand-up",
|
||||||
|
"unicode": "\ue63f"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "hand-up-filled",
|
||||||
|
"unicode": "\ue63e"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "headphones",
|
||||||
|
"unicode": "\ue630"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "heart",
|
||||||
|
"unicode": "\ue639"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "heart-filled",
|
||||||
|
"unicode": "\ue641"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "help",
|
||||||
|
"unicode": "\ue679"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "help-filled",
|
||||||
|
"unicode": "\ue674"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "home",
|
||||||
|
"unicode": "\ue662"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "home-filled",
|
||||||
|
"unicode": "\ue663"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "image",
|
||||||
|
"unicode": "\ue670"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "image-filled",
|
||||||
|
"unicode": "\ue678"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "images",
|
||||||
|
"unicode": "\ue650"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "images-filled",
|
||||||
|
"unicode": "\ue64b"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "info",
|
||||||
|
"unicode": "\ue669"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "info-filled",
|
||||||
|
"unicode": "\ue649"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "left",
|
||||||
|
"unicode": "\ue6b7"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "link",
|
||||||
|
"unicode": "\ue6a5"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "list",
|
||||||
|
"unicode": "\ue644"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "location",
|
||||||
|
"unicode": "\ue6ae"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "location-filled",
|
||||||
|
"unicode": "\ue6af"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "locked",
|
||||||
|
"unicode": "\ue66b"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "locked-filled",
|
||||||
|
"unicode": "\ue668"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "loop",
|
||||||
|
"unicode": "\ue633"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "mail-open",
|
||||||
|
"unicode": "\ue643"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "mail-open-filled",
|
||||||
|
"unicode": "\ue63a"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "map",
|
||||||
|
"unicode": "\ue667"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "map-filled",
|
||||||
|
"unicode": "\ue666"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "map-pin",
|
||||||
|
"unicode": "\ue6ad"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "map-pin-ellipse",
|
||||||
|
"unicode": "\ue6ac"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "medal",
|
||||||
|
"unicode": "\ue6a2"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "medal-filled",
|
||||||
|
"unicode": "\ue6c3"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "mic",
|
||||||
|
"unicode": "\ue671"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "mic-filled",
|
||||||
|
"unicode": "\ue677"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "micoff",
|
||||||
|
"unicode": "\ue67e"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "micoff-filled",
|
||||||
|
"unicode": "\ue6b0"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "minus",
|
||||||
|
"unicode": "\ue66f"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "minus-filled",
|
||||||
|
"unicode": "\ue67d"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "more",
|
||||||
|
"unicode": "\ue64d"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "more-filled",
|
||||||
|
"unicode": "\ue64e"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "navigate",
|
||||||
|
"unicode": "\ue66e"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "navigate-filled",
|
||||||
|
"unicode": "\ue67a"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "notification",
|
||||||
|
"unicode": "\ue6a6"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "notification-filled",
|
||||||
|
"unicode": "\ue6c1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "paperclip",
|
||||||
|
"unicode": "\ue652"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "paperplane",
|
||||||
|
"unicode": "\ue672"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "paperplane-filled",
|
||||||
|
"unicode": "\ue675"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "person",
|
||||||
|
"unicode": "\ue699"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "person-filled",
|
||||||
|
"unicode": "\ue69d"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "personadd",
|
||||||
|
"unicode": "\ue69f"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "personadd-filled",
|
||||||
|
"unicode": "\ue698"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "personadd-filled-copy",
|
||||||
|
"unicode": "\ue6d1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "phone",
|
||||||
|
"unicode": "\ue69c"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "phone-filled",
|
||||||
|
"unicode": "\ue69b"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "plus",
|
||||||
|
"unicode": "\ue676"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "plus-filled",
|
||||||
|
"unicode": "\ue6c7"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "plusempty",
|
||||||
|
"unicode": "\ue67b"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "pulldown",
|
||||||
|
"unicode": "\ue632"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "pyq",
|
||||||
|
"unicode": "\ue682"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "qq",
|
||||||
|
"unicode": "\ue680"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "redo",
|
||||||
|
"unicode": "\ue64a"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "redo-filled",
|
||||||
|
"unicode": "\ue655"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "refresh",
|
||||||
|
"unicode": "\ue657"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "refresh-filled",
|
||||||
|
"unicode": "\ue656"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "refreshempty",
|
||||||
|
"unicode": "\ue6bf"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "reload",
|
||||||
|
"unicode": "\ue6b2"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "right",
|
||||||
|
"unicode": "\ue6b5"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "scan",
|
||||||
|
"unicode": "\ue62a"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "search",
|
||||||
|
"unicode": "\ue654"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "settings",
|
||||||
|
"unicode": "\ue653"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "settings-filled",
|
||||||
|
"unicode": "\ue6ce"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "shop",
|
||||||
|
"unicode": "\ue62f"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "shop-filled",
|
||||||
|
"unicode": "\ue6cd"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "smallcircle",
|
||||||
|
"unicode": "\ue67c"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "smallcircle-filled",
|
||||||
|
"unicode": "\ue665"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "sound",
|
||||||
|
"unicode": "\ue684"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "sound-filled",
|
||||||
|
"unicode": "\ue686"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "spinner-cycle",
|
||||||
|
"unicode": "\ue68a"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "staff",
|
||||||
|
"unicode": "\ue6a7"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "staff-filled",
|
||||||
|
"unicode": "\ue6cb"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "star",
|
||||||
|
"unicode": "\ue688"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "star-filled",
|
||||||
|
"unicode": "\ue68f"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "starhalf",
|
||||||
|
"unicode": "\ue683"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "trash",
|
||||||
|
"unicode": "\ue687"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "trash-filled",
|
||||||
|
"unicode": "\ue685"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "tune",
|
||||||
|
"unicode": "\ue6aa"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "tune-filled",
|
||||||
|
"unicode": "\ue6ca"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "undo",
|
||||||
|
"unicode": "\ue64f"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "undo-filled",
|
||||||
|
"unicode": "\ue64c"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "up",
|
||||||
|
"unicode": "\ue6b6"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "top",
|
||||||
|
"unicode": "\ue6b6"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "upload",
|
||||||
|
"unicode": "\ue690"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "upload-filled",
|
||||||
|
"unicode": "\ue68e"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "videocam",
|
||||||
|
"unicode": "\ue68c"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "videocam-filled",
|
||||||
|
"unicode": "\ue689"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "vip",
|
||||||
|
"unicode": "\ue6a8"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "vip-filled",
|
||||||
|
"unicode": "\ue6c6"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "wallet",
|
||||||
|
"unicode": "\ue6b1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "wallet-filled",
|
||||||
|
"unicode": "\ue6c2"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "weibo",
|
||||||
|
"unicode": "\ue68b"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"font_class": "weixin",
|
||||||
|
"unicode": "\ue691"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
// export const fontData = JSON.parse<IconsDataItem>(fontDataJson)
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"id": "uni-icons",
|
"id": "uni-icons",
|
||||||
"displayName": "uni-icons 图标",
|
"displayName": "uni-icons 图标",
|
||||||
"version": "1.3.5",
|
"version": "2.0.12",
|
||||||
"description": "图标组件,用于展示移动端常见的图标,可自定义颜色、大小。",
|
"description": "图标组件,用于展示移动端常见的图标,可自定义颜色、大小。",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"uni-ui",
|
"uni-ui",
|
||||||
@@ -11,16 +11,14 @@
|
|||||||
],
|
],
|
||||||
"repository": "https://github.com/dcloudio/uni-ui",
|
"repository": "https://github.com/dcloudio/uni-ui",
|
||||||
"engines": {
|
"engines": {
|
||||||
"HBuilderX": "^3.2.14"
|
"HBuilderX": "^3.2.14",
|
||||||
|
"uni-app": "^4.08",
|
||||||
|
"uni-app-x": "^4.61"
|
||||||
},
|
},
|
||||||
"directories": {
|
"directories": {
|
||||||
"example": "../../temps/example_temps"
|
"example": "../../temps/example_temps"
|
||||||
},
|
},
|
||||||
"dcloudext": {
|
"dcloudext": {
|
||||||
"category": [
|
|
||||||
"前端组件",
|
|
||||||
"通用组件"
|
|
||||||
],
|
|
||||||
"sale": {
|
"sale": {
|
||||||
"regular": {
|
"regular": {
|
||||||
"price": "0.00"
|
"price": "0.00"
|
||||||
@@ -37,48 +35,75 @@
|
|||||||
"data": "无",
|
"data": "无",
|
||||||
"permissions": "无"
|
"permissions": "无"
|
||||||
},
|
},
|
||||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||||
|
"type": "component-vue",
|
||||||
|
"darkmode": "x",
|
||||||
|
"i18n": "x",
|
||||||
|
"widescreen": "x"
|
||||||
},
|
},
|
||||||
"uni_modules": {
|
"uni_modules": {
|
||||||
"dependencies": ["uni-scss"],
|
"dependencies": [
|
||||||
|
"uni-scss"
|
||||||
|
],
|
||||||
"encrypt": [],
|
"encrypt": [],
|
||||||
"platforms": {
|
"platforms": {
|
||||||
"cloud": {
|
"cloud": {
|
||||||
"tcb": "y",
|
"tcb": "x",
|
||||||
"aliyun": "y"
|
"aliyun": "x",
|
||||||
|
"alipay": "x"
|
||||||
},
|
},
|
||||||
"client": {
|
"client": {
|
||||||
"App": {
|
"uni-app": {
|
||||||
"app-vue": "y",
|
"vue": {
|
||||||
"app-nvue": "y"
|
"vue2": "√",
|
||||||
|
"vue3": "√"
|
||||||
|
},
|
||||||
|
"web": {
|
||||||
|
"safari": "√",
|
||||||
|
"chrome": "√"
|
||||||
|
},
|
||||||
|
"app": {
|
||||||
|
"vue": "√",
|
||||||
|
"nvue": "-",
|
||||||
|
"android": {
|
||||||
|
"extVersion": "",
|
||||||
|
"minVersion": "29"
|
||||||
|
},
|
||||||
|
"ios": "√",
|
||||||
|
"harmony": "√"
|
||||||
|
},
|
||||||
|
"mp": {
|
||||||
|
"weixin": "√",
|
||||||
|
"alipay": "√",
|
||||||
|
"toutiao": "√",
|
||||||
|
"baidu": "√",
|
||||||
|
"kuaishou": "-",
|
||||||
|
"jd": "-",
|
||||||
|
"harmony": "-",
|
||||||
|
"qq": "√",
|
||||||
|
"lark": "-"
|
||||||
|
},
|
||||||
|
"quickapp": {
|
||||||
|
"huawei": "√",
|
||||||
|
"union": "√"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"H5-mobile": {
|
"uni-app-x": {
|
||||||
"Safari": "y",
|
"web": {
|
||||||
"Android Browser": "y",
|
"safari": "√",
|
||||||
"微信浏览器(Android)": "y",
|
"chrome": "√"
|
||||||
"QQ浏览器(Android)": "y"
|
},
|
||||||
},
|
"app": {
|
||||||
"H5-pc": {
|
"android": {
|
||||||
"Chrome": "y",
|
"extVersion": "",
|
||||||
"IE": "y",
|
"minVersion": "29"
|
||||||
"Edge": "y",
|
},
|
||||||
"Firefox": "y",
|
"ios": "√",
|
||||||
"Safari": "y"
|
"harmony": "√"
|
||||||
},
|
},
|
||||||
"小程序": {
|
"mp": {
|
||||||
"微信": "y",
|
"weixin": "√"
|
||||||
"阿里": "y",
|
}
|
||||||
"百度": "y",
|
|
||||||
"字节跳动": "y",
|
|
||||||
"QQ": "y"
|
|
||||||
},
|
|
||||||
"快应用": {
|
|
||||||
"华为": "u",
|
|
||||||
"联盟": "u"
|
|
||||||
},
|
|
||||||
"Vue": {
|
|
||||||
"vue2": "y",
|
|
||||||
"vue3": "y"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
60
uni_modules/uni-swipe-action/changelog.md
Normal file
@@ -0,0 +1,60 @@
|
|||||||
|
## 1.3.17(2026-02-09)
|
||||||
|
- 修复 pc 触屏问题
|
||||||
|
## 1.3.16(2025-06-11)
|
||||||
|
- 修复 鸿蒙 next 浏览器上无法滑动的问题
|
||||||
|
## 1.3.14(2025-06-09)
|
||||||
|
- 优化 更新示例项目
|
||||||
|
## 1.3.13(2025-04-15)
|
||||||
|
- 修复 app 端 缺少leftOptions 或 rightOptions 时无法滑动的问题
|
||||||
|
## 1.3.12(2025-04-14)
|
||||||
|
- 修复 由上一个兼容版本引发的 安卓运行报错且无法回弹的问题
|
||||||
|
## 1.3.11(2025-04-08)
|
||||||
|
- 优化 兼容鸿蒙平台
|
||||||
|
- 修复 WEB 平台控制台报错
|
||||||
|
## 1.3.10(2024-01-17)
|
||||||
|
- 修复 点击按钮时,按钮会被点击穿透导致自动收缩的 bug(兼容阿里/百度/抖音小程序)
|
||||||
|
## 1.3.9(2024-01-17)
|
||||||
|
- 修复 点击按钮时,按钮会被点击穿透导致自动收缩的 bug
|
||||||
|
## 1.3.8(2023-04-13)
|
||||||
|
- 修复`uni-swipe-action`和`uni-swipe-action-item`不同时使用导致 closeOther 方法报错的 bug
|
||||||
|
## 1.3.7(2022-06-06)
|
||||||
|
- 修复 vue3 下使用组件不能正常运行的Bug
|
||||||
|
## 1.3.6(2022-05-31)
|
||||||
|
- 修复 h5端点击click触发两次的Bug
|
||||||
|
## 1.3.5(2022-05-23)
|
||||||
|
- 修复 isPC 找不到的Bug
|
||||||
|
## 1.3.4(2022-05-19)
|
||||||
|
- 修复 在 nvue 下 disabled 失效的bug
|
||||||
|
## 1.3.3(2022-03-31)
|
||||||
|
- 修复 按钮字体大小不能设置的bug
|
||||||
|
## 1.3.2(2022-03-16)
|
||||||
|
- 修复 h5和app端下报el错误的bug
|
||||||
|
## 1.3.1(2022-03-07)
|
||||||
|
- 修复 HBuilderX 1.4.X 版本中,h5和app端下报错的bug
|
||||||
|
## 1.3.0(2021-11-19)
|
||||||
|
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||||
|
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-swipe-action](https://uniapp.dcloud.io/component/uniui/uni-swipe-action)
|
||||||
|
## 1.2.4(2021-08-20)
|
||||||
|
- 优化 close-all 方法
|
||||||
|
## 1.2.3(2021-08-20)
|
||||||
|
- 新增 close-all 方法,关闭所有已打开的组件
|
||||||
|
## 1.2.2(2021-08-17)
|
||||||
|
- 新增 resize() 方法,在非微信小程序、h5、app-vue端出现不能滑动的问题的时候,重置组件
|
||||||
|
- 修复 app 端偶尔出现类似 Page[x][-x,xx;-x,xx,x,x-x] 的问题
|
||||||
|
- 优化 微信小程序、h5、app-vue 滑动逻辑,避免出现动态新增组件后不能滑动的问题
|
||||||
|
## 1.2.1(2021-07-30)
|
||||||
|
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||||
|
- 修复 跨页面修改组件数据 ,导致不能滑动的问题
|
||||||
|
## 1.1.10(2021-06-17)
|
||||||
|
- 修复 按钮点击执行两次的bug
|
||||||
|
## 1.1.9(2021-05-12)
|
||||||
|
- 新增 项目示例地址
|
||||||
|
## 1.1.8(2021-03-26)
|
||||||
|
- 修复 微信小程序 nv_navigator is not defined 报错的bug
|
||||||
|
## 1.1.7(2021-02-05)
|
||||||
|
- 调整为uni_modules目录规范
|
||||||
|
- 新增 左侧滑动
|
||||||
|
- 新增 插槽使用方式
|
||||||
|
- 新增 threshold 属性,可以控制滑动缺省值
|
||||||
|
- 优化 长列表滚动性能
|
||||||
|
- 修复 滚动页面时触发组件滑动的Bug
|
||||||
@@ -0,0 +1,302 @@
|
|||||||
|
let bindIngXMixins = {}
|
||||||
|
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
const BindingX = uni.requireNativePlugin('bindingx');
|
||||||
|
const dom = uni.requireNativePlugin('dom');
|
||||||
|
const animation = uni.requireNativePlugin('animation');
|
||||||
|
|
||||||
|
bindIngXMixins = {
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
show(newVal) {
|
||||||
|
if (this.autoClose) return
|
||||||
|
if (this.stop) return
|
||||||
|
this.stop = true
|
||||||
|
if (newVal) {
|
||||||
|
this.open(newVal)
|
||||||
|
} else {
|
||||||
|
this.close()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
leftOptions() {
|
||||||
|
this.getSelectorQuery()
|
||||||
|
this.init()
|
||||||
|
},
|
||||||
|
rightOptions(newVal) {
|
||||||
|
this.init()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.swipeaction = this.getSwipeAction()
|
||||||
|
if (this.swipeaction && Array.isArray(this.swipeaction.children)) {
|
||||||
|
this.swipeaction.children.push(this)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.box = this.getEl(this.$refs['selector-box--hock'])
|
||||||
|
this.selector = this.getEl(this.$refs['selector-content--hock']);
|
||||||
|
this.leftButton = this.getEl(this.$refs['selector-left-button--hock']);
|
||||||
|
this.rightButton = this.getEl(this.$refs['selector-right-button--hock']);
|
||||||
|
this.init()
|
||||||
|
},
|
||||||
|
// beforeDestroy() {
|
||||||
|
// this.swipeaction.children.forEach((item, index) => {
|
||||||
|
// if (item === this) {
|
||||||
|
// this.swipeaction.children.splice(index, 1)
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// },
|
||||||
|
methods: {
|
||||||
|
init() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.x = 0
|
||||||
|
this.button = {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
setTimeout(() => {
|
||||||
|
this.getSelectorQuery()
|
||||||
|
}, 200)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onClick(index, item, position) {
|
||||||
|
this.$emit('click', {
|
||||||
|
content: item,
|
||||||
|
index,
|
||||||
|
position
|
||||||
|
})
|
||||||
|
},
|
||||||
|
touchstart(e) {
|
||||||
|
// fix by mehaotian 禁止滑动
|
||||||
|
if (this.disabled) return
|
||||||
|
// 每次只触发一次,避免多次监听造成闪烁
|
||||||
|
if (this.stop) return
|
||||||
|
this.stop = true
|
||||||
|
if (this.autoClose && this.swipeaction) {
|
||||||
|
this.swipeaction.closeOther(this)
|
||||||
|
}
|
||||||
|
|
||||||
|
const leftWidth = this.button.left.width
|
||||||
|
const rightWidth = this.button.right.width
|
||||||
|
let expression = this.range(this.x, -rightWidth, leftWidth)
|
||||||
|
let leftExpression = this.range(this.x - leftWidth, -leftWidth, 0)
|
||||||
|
let rightExpression = this.range(this.x + rightWidth, 0, rightWidth)
|
||||||
|
|
||||||
|
this.eventpan = BindingX.bind({
|
||||||
|
anchor: this.box,
|
||||||
|
eventType: 'pan',
|
||||||
|
props: [{
|
||||||
|
element: this.selector,
|
||||||
|
property: 'transform.translateX',
|
||||||
|
expression
|
||||||
|
}, {
|
||||||
|
element: this.leftButton,
|
||||||
|
property: 'transform.translateX',
|
||||||
|
expression: leftExpression
|
||||||
|
}, {
|
||||||
|
element: this.rightButton,
|
||||||
|
property: 'transform.translateX',
|
||||||
|
expression: rightExpression
|
||||||
|
}, ]
|
||||||
|
}, (e) => {
|
||||||
|
// nope
|
||||||
|
if (e.state === 'end') {
|
||||||
|
this.x = e.deltaX + this.x;
|
||||||
|
this.isclick = true
|
||||||
|
this.bindTiming(e.deltaX)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
touchend(e) {
|
||||||
|
if (this.isopen !== 'none' && !this.isclick) {
|
||||||
|
this.open('none')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
bindTiming(x) {
|
||||||
|
const left = this.x
|
||||||
|
const leftWidth = this.button.left.width
|
||||||
|
const rightWidth = this.button.right.width
|
||||||
|
const threshold = this.threshold
|
||||||
|
if (!this.isopen || this.isopen === 'none') {
|
||||||
|
if (left > threshold) {
|
||||||
|
this.open('left')
|
||||||
|
} else if (left < -threshold) {
|
||||||
|
this.open('right')
|
||||||
|
} else {
|
||||||
|
this.open('none')
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if ((x > -leftWidth && x < 0) || x > rightWidth) {
|
||||||
|
if ((x > -threshold && x < 0) || (x - rightWidth > threshold)) {
|
||||||
|
this.open('left')
|
||||||
|
} else {
|
||||||
|
this.open('none')
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if ((x < threshold && x > 0) || (x + leftWidth < -threshold)) {
|
||||||
|
this.open('right')
|
||||||
|
} else {
|
||||||
|
this.open('none')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 移动范围
|
||||||
|
* @param {Object} num
|
||||||
|
* @param {Object} mix
|
||||||
|
* @param {Object} max
|
||||||
|
*/
|
||||||
|
range(num, mix, max) {
|
||||||
|
return `min(max(x+${num}, ${mix}), ${max})`
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 开启swipe
|
||||||
|
*/
|
||||||
|
open(type) {
|
||||||
|
this.animation(type)
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 关闭swipe
|
||||||
|
*/
|
||||||
|
close() {
|
||||||
|
this.animation('none')
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 开启关闭动画
|
||||||
|
* @param {Object} type
|
||||||
|
*/
|
||||||
|
animation(type) {
|
||||||
|
const time = 300
|
||||||
|
const leftWidth = this.button.left.width
|
||||||
|
const rightWidth = this.button.right.width
|
||||||
|
if (this.eventpan && this.eventpan.token) {
|
||||||
|
BindingX.unbind({
|
||||||
|
token: this.eventpan.token,
|
||||||
|
eventType: 'pan'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
switch (type) {
|
||||||
|
case 'left':
|
||||||
|
Promise.all([
|
||||||
|
this.move(this.selector, leftWidth),
|
||||||
|
this.move(this.leftButton, 0),
|
||||||
|
this.move(this.rightButton, rightWidth * 2)
|
||||||
|
]).then(() => {
|
||||||
|
this.setEmit(leftWidth, type)
|
||||||
|
})
|
||||||
|
break
|
||||||
|
case 'right':
|
||||||
|
Promise.all([
|
||||||
|
this.move(this.selector, -rightWidth),
|
||||||
|
this.move(this.leftButton, -leftWidth * 2),
|
||||||
|
this.move(this.rightButton, 0)
|
||||||
|
]).then(() => {
|
||||||
|
this.setEmit(-rightWidth, type)
|
||||||
|
})
|
||||||
|
break
|
||||||
|
default:
|
||||||
|
Promise.all([
|
||||||
|
this.move(this.selector, 0),
|
||||||
|
this.move(this.leftButton, -leftWidth),
|
||||||
|
this.move(this.rightButton, rightWidth)
|
||||||
|
]).then(() => {
|
||||||
|
this.setEmit(0, type)
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setEmit(x, type) {
|
||||||
|
const leftWidth = this.button.left.width
|
||||||
|
const rightWidth = this.button.right.width
|
||||||
|
this.isopen = this.isopen || 'none'
|
||||||
|
this.stop = false
|
||||||
|
this.isclick = false
|
||||||
|
// 只有状态不一致才会返回结果
|
||||||
|
if (this.isopen !== type && this.x !== x) {
|
||||||
|
if (type === 'left' && leftWidth > 0) {
|
||||||
|
this.$emit('change', 'left')
|
||||||
|
}
|
||||||
|
if (type === 'right' && rightWidth > 0) {
|
||||||
|
this.$emit('change', 'right')
|
||||||
|
}
|
||||||
|
if (type === 'none') {
|
||||||
|
this.$emit('change', 'none')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.x = x
|
||||||
|
this.isopen = type
|
||||||
|
},
|
||||||
|
move(ref, value) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
animation.transition(ref, {
|
||||||
|
styles: {
|
||||||
|
transform: `translateX(${value})`,
|
||||||
|
},
|
||||||
|
duration: 150, //ms
|
||||||
|
timingFunction: 'linear',
|
||||||
|
needLayout: false,
|
||||||
|
delay: 0 //ms
|
||||||
|
}, function(res) {
|
||||||
|
resolve(res)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取ref
|
||||||
|
* @param {Object} el
|
||||||
|
*/
|
||||||
|
getEl(el) {
|
||||||
|
return el.ref
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 获取节点信息
|
||||||
|
*/
|
||||||
|
getSelectorQuery() {
|
||||||
|
Promise.all([
|
||||||
|
this.getDom('left'),
|
||||||
|
this.getDom('right'),
|
||||||
|
]).then((data) => {
|
||||||
|
let show = 'none'
|
||||||
|
if (this.autoClose) {
|
||||||
|
show = 'none'
|
||||||
|
} else {
|
||||||
|
show = this.show
|
||||||
|
}
|
||||||
|
|
||||||
|
if (show === 'none') {
|
||||||
|
// this.close()
|
||||||
|
} else {
|
||||||
|
this.open(show)
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
getDom(str) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
dom.getComponentRect(this.$refs[`selector-${str}-button--hock`], (data) => {
|
||||||
|
if (data) {
|
||||||
|
this.button[str] = data.size
|
||||||
|
resolve(data)
|
||||||
|
} else {
|
||||||
|
reject()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
export default bindIngXMixins
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
export function isPC() {
|
||||||
|
var userAgentInfo = navigator.userAgent || '';
|
||||||
|
var info = typeof uni !== 'undefined' && uni.getSystemInfoSync ? uni.getSystemInfoSync() : null;
|
||||||
|
if (info && info.deviceType) {
|
||||||
|
if (info.deviceType === 'pc') return true;
|
||||||
|
if (info.deviceType === 'phone' || info.deviceType === 'pad') return false;
|
||||||
|
}
|
||||||
|
var isMobileUA = /Android|iPhone|SymbianOS|Windows Phone|iPad|iPod|Mobile|Harmony|HarmonyOS/i.test(userAgentInfo);
|
||||||
|
if (isMobileUA) return false;
|
||||||
|
var hasTouch = false;
|
||||||
|
if (typeof navigator.maxTouchPoints === 'number') {
|
||||||
|
hasTouch = navigator.maxTouchPoints > 0;
|
||||||
|
} else if (typeof window !== 'undefined') {
|
||||||
|
hasTouch = 'ontouchstart' in window;
|
||||||
|
}
|
||||||
|
if (hasTouch && typeof window !== 'undefined' && window.matchMedia) {
|
||||||
|
var finePointer = window.matchMedia('(pointer: fine)').matches;
|
||||||
|
var canHover = window.matchMedia('(hover: hover)').matches;
|
||||||
|
return finePointer || canHover;
|
||||||
|
}
|
||||||
|
return !hasTouch;
|
||||||
|
}
|
||||||
@@ -0,0 +1,195 @@
|
|||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
x: 0,
|
||||||
|
transition: false,
|
||||||
|
width: 0,
|
||||||
|
viewWidth: 0,
|
||||||
|
swipeShow: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
show(newVal) {
|
||||||
|
if (this.autoClose) return
|
||||||
|
if (newVal && newVal !== 'none') {
|
||||||
|
this.transition = true
|
||||||
|
this.open(newVal)
|
||||||
|
} else {
|
||||||
|
this.close()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.swipeaction = this.getSwipeAction()
|
||||||
|
if (this.swipeaction && Array.isArray(this.swipeaction.children)) {
|
||||||
|
this.swipeaction.children.push(this)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.isopen = false
|
||||||
|
setTimeout(() => {
|
||||||
|
this.getQuerySelect()
|
||||||
|
}, 50)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
appTouchStart(e) {
|
||||||
|
const {
|
||||||
|
clientX
|
||||||
|
} = e.changedTouches[0]
|
||||||
|
this.clientX = clientX
|
||||||
|
this.timestamp = new Date().getTime()
|
||||||
|
},
|
||||||
|
appTouchEnd(e, index, item, position) {
|
||||||
|
const {
|
||||||
|
clientX
|
||||||
|
} = e.changedTouches[0]
|
||||||
|
// fixed by xxxx 模拟点击事件,解决 ios 13 点击区域错位的问题
|
||||||
|
let diff = Math.abs(this.clientX - clientX)
|
||||||
|
let time = (new Date().getTime()) - this.timestamp
|
||||||
|
if (diff < 40 && time < 300) {
|
||||||
|
this.$emit('click', {
|
||||||
|
content: item,
|
||||||
|
index,
|
||||||
|
position
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 移动触发
|
||||||
|
* @param {Object} e
|
||||||
|
*/
|
||||||
|
onChange(e) {
|
||||||
|
this.moveX = e.detail.x
|
||||||
|
this.isclose = false
|
||||||
|
},
|
||||||
|
touchstart(e) {
|
||||||
|
this.transition = false
|
||||||
|
this.isclose = true
|
||||||
|
if (this.autoClose && this.swipeaction) {
|
||||||
|
this.swipeaction.closeOther(this)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
touchmove(e) {},
|
||||||
|
touchend(e) {
|
||||||
|
// 0的位置什么都不执行
|
||||||
|
if (this.isclose && this.isopen === 'none') return
|
||||||
|
if (this.isclose && this.isopen !== 'none') {
|
||||||
|
this.transition = true
|
||||||
|
this.close()
|
||||||
|
} else {
|
||||||
|
this.move(this.moveX + this.leftWidth)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 移动
|
||||||
|
* @param {Object} moveX
|
||||||
|
*/
|
||||||
|
move(moveX) {
|
||||||
|
// 打开关闭的处理逻辑不太一样
|
||||||
|
this.transition = true
|
||||||
|
// 未打开状态
|
||||||
|
if (!this.isopen || this.isopen === 'none') {
|
||||||
|
if (moveX > this.threshold) {
|
||||||
|
this.open('left')
|
||||||
|
} else if (moveX < -this.threshold) {
|
||||||
|
this.open('right')
|
||||||
|
} else {
|
||||||
|
this.close()
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (moveX < 0 && moveX < this.rightWidth) {
|
||||||
|
const rightX = this.rightWidth + moveX
|
||||||
|
if (rightX < this.threshold) {
|
||||||
|
this.open('right')
|
||||||
|
} else {
|
||||||
|
this.close()
|
||||||
|
}
|
||||||
|
} else if (moveX > 0 && moveX < this.leftWidth) {
|
||||||
|
const leftX = this.leftWidth - moveX
|
||||||
|
if (leftX < this.threshold) {
|
||||||
|
this.open('left')
|
||||||
|
} else {
|
||||||
|
this.close()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 打开
|
||||||
|
*/
|
||||||
|
open(type) {
|
||||||
|
this.x = this.moveX
|
||||||
|
this.animation(type)
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 关闭
|
||||||
|
*/
|
||||||
|
close() {
|
||||||
|
this.x = this.moveX
|
||||||
|
// TODO 解决 x 值不更新的问题,所以会多触发一次 nextTick ,待优化
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.x = -this.leftWidth
|
||||||
|
if (this.isopen !== 'none') {
|
||||||
|
this.$emit('change', 'none')
|
||||||
|
}
|
||||||
|
this.isopen = 'none'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 执行结束动画
|
||||||
|
* @param {Object} type
|
||||||
|
*/
|
||||||
|
animation(type) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
if (type === 'left') {
|
||||||
|
this.x = 0
|
||||||
|
} else {
|
||||||
|
this.x = -this.rightWidth - this.leftWidth
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.isopen !== type) {
|
||||||
|
this.$emit('change', type)
|
||||||
|
}
|
||||||
|
this.isopen = type
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
getSlide(x) {},
|
||||||
|
getQuerySelect() {
|
||||||
|
const query = uni.createSelectorQuery().in(this);
|
||||||
|
query.selectAll('.movable-view--hock').boundingClientRect(data => {
|
||||||
|
this.leftWidth = data[1].width
|
||||||
|
this.rightWidth = data[2].width
|
||||||
|
this.width = data[0].width
|
||||||
|
this.viewWidth = this.width + this.rightWidth + this.leftWidth
|
||||||
|
if (this.leftWidth === 0) {
|
||||||
|
// TODO 疑似bug ,初始化的时候如果x 是0,会导致移动位置错误,所以让元素超出一点
|
||||||
|
this.x = -0.1
|
||||||
|
} else {
|
||||||
|
this.x = -this.leftWidth
|
||||||
|
}
|
||||||
|
this.moveX = this.x
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.swipeShow = 1
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!this.buttonWidth) {
|
||||||
|
this.disabledView = true
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.autoClose) return
|
||||||
|
if (this.show !== 'none') {
|
||||||
|
this.transition = true
|
||||||
|
this.open(this.shows)
|
||||||
|
}
|
||||||
|
}).exec();
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,260 @@
|
|||||||
|
let otherMixins = {}
|
||||||
|
|
||||||
|
// #ifndef APP-PLUS|| MP-WEIXIN || H5
|
||||||
|
const MIN_DISTANCE = 10;
|
||||||
|
otherMixins = {
|
||||||
|
data() {
|
||||||
|
// TODO 随机生生元素ID,解决百度小程序获取同一个元素位置信息的bug
|
||||||
|
const elClass = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
|
||||||
|
return {
|
||||||
|
uniShow: false,
|
||||||
|
left: 0,
|
||||||
|
buttonShow: 'none',
|
||||||
|
ani: false,
|
||||||
|
moveLeft: '',
|
||||||
|
elClass
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
show(newVal) {
|
||||||
|
if (this.autoClose) return
|
||||||
|
this.openState(newVal)
|
||||||
|
},
|
||||||
|
left() {
|
||||||
|
this.moveLeft = `translateX(${this.left}px)`
|
||||||
|
},
|
||||||
|
buttonShow(newVal) {
|
||||||
|
if (this.autoClose) return
|
||||||
|
this.openState(newVal)
|
||||||
|
},
|
||||||
|
leftOptions() {
|
||||||
|
this.init()
|
||||||
|
},
|
||||||
|
rightOptions() {
|
||||||
|
this.init()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.swipeaction = this.getSwipeAction()
|
||||||
|
if (this.swipeaction && Array.isArray(this.swipeaction.children)) {
|
||||||
|
this.swipeaction.children.push(this)
|
||||||
|
}
|
||||||
|
this.init()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init() {
|
||||||
|
clearTimeout(this.timer)
|
||||||
|
this.timer = setTimeout(() => {
|
||||||
|
this.getSelectorQuery()
|
||||||
|
}, 100)
|
||||||
|
// 移动距离
|
||||||
|
this.left = 0
|
||||||
|
this.x = 0
|
||||||
|
},
|
||||||
|
|
||||||
|
closeSwipe(e) {
|
||||||
|
if (this.autoClose && this.swipeaction) {
|
||||||
|
this.swipeaction.closeOther(this)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
appTouchStart(e) {
|
||||||
|
const {
|
||||||
|
clientX
|
||||||
|
} = e.changedTouches[0]
|
||||||
|
this.clientX = clientX
|
||||||
|
this.timestamp = new Date().getTime()
|
||||||
|
},
|
||||||
|
appTouchEnd(e, index, item, position) {
|
||||||
|
const {
|
||||||
|
clientX
|
||||||
|
} = e.changedTouches[0]
|
||||||
|
// fixed by xxxx 模拟点击事件,解决 ios 13 点击区域错位的问题
|
||||||
|
let diff = Math.abs(this.clientX - clientX)
|
||||||
|
let time = (new Date().getTime()) - this.timestamp
|
||||||
|
if (diff < 40 && time < 300) {
|
||||||
|
this.$emit('click', {
|
||||||
|
content: item,
|
||||||
|
index,
|
||||||
|
position
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
touchstart(e) {
|
||||||
|
if (this.disabled) return
|
||||||
|
this.ani = false
|
||||||
|
this.x = this.left || 0
|
||||||
|
this.stopTouchStart(e)
|
||||||
|
this.autoClose && this.closeSwipe()
|
||||||
|
},
|
||||||
|
touchmove(e) {
|
||||||
|
if (this.disabled) return
|
||||||
|
// 是否可以滑动页面
|
||||||
|
this.stopTouchMove(e);
|
||||||
|
if (this.direction !== 'horizontal') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.move(this.x + this.deltaX)
|
||||||
|
return false
|
||||||
|
},
|
||||||
|
touchend() {
|
||||||
|
if (this.disabled) return
|
||||||
|
this.moveDirection(this.left)
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 设置移动距离
|
||||||
|
* @param {Object} value
|
||||||
|
*/
|
||||||
|
move(value) {
|
||||||
|
value = value || 0
|
||||||
|
const leftWidth = this.leftWidth
|
||||||
|
const rightWidth = this.rightWidth
|
||||||
|
// 获取可滑动范围
|
||||||
|
this.left = this.range(value, -rightWidth, leftWidth);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取范围
|
||||||
|
* @param {Object} num
|
||||||
|
* @param {Object} min
|
||||||
|
* @param {Object} max
|
||||||
|
*/
|
||||||
|
range(num, min, max) {
|
||||||
|
return Math.min(Math.max(num, min), max);
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 移动方向判断
|
||||||
|
* @param {Object} left
|
||||||
|
* @param {Object} value
|
||||||
|
*/
|
||||||
|
moveDirection(left) {
|
||||||
|
const threshold = this.threshold
|
||||||
|
const isopen = this.isopen || 'none'
|
||||||
|
const leftWidth = this.leftWidth
|
||||||
|
const rightWidth = this.rightWidth
|
||||||
|
if (this.deltaX === 0) {
|
||||||
|
this.openState('none')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if ((isopen === 'none' && rightWidth > 0 && -left > threshold) || (isopen !== 'none' && rightWidth >
|
||||||
|
0 && rightWidth +
|
||||||
|
left < threshold)) {
|
||||||
|
// right
|
||||||
|
this.openState('right')
|
||||||
|
} else if ((isopen === 'none' && leftWidth > 0 && left > threshold) || (isopen !== 'none' && leftWidth >
|
||||||
|
0 &&
|
||||||
|
leftWidth - left < threshold)) {
|
||||||
|
// left
|
||||||
|
this.openState('left')
|
||||||
|
} else {
|
||||||
|
// default
|
||||||
|
this.openState('none')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 开启状态
|
||||||
|
* @param {Boolean} type
|
||||||
|
*/
|
||||||
|
openState(type) {
|
||||||
|
const leftWidth = this.leftWidth
|
||||||
|
const rightWidth = this.rightWidth
|
||||||
|
let left = ''
|
||||||
|
this.isopen = this.isopen ? this.isopen : 'none'
|
||||||
|
switch (type) {
|
||||||
|
case "left":
|
||||||
|
left = leftWidth
|
||||||
|
break
|
||||||
|
case "right":
|
||||||
|
left = -rightWidth
|
||||||
|
break
|
||||||
|
default:
|
||||||
|
left = 0
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
if (this.isopen !== type) {
|
||||||
|
this.throttle = true
|
||||||
|
this.$emit('change', type)
|
||||||
|
}
|
||||||
|
|
||||||
|
this.isopen = type
|
||||||
|
// 添加动画类
|
||||||
|
this.ani = true
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.move(left)
|
||||||
|
})
|
||||||
|
// 设置最终移动位置,理论上只要进入到这个函数,肯定是要打开的
|
||||||
|
},
|
||||||
|
close() {
|
||||||
|
this.openState('none')
|
||||||
|
},
|
||||||
|
getDirection(x, y) {
|
||||||
|
if (x > y && x > MIN_DISTANCE) {
|
||||||
|
return 'horizontal';
|
||||||
|
}
|
||||||
|
if (y > x && y > MIN_DISTANCE) {
|
||||||
|
return 'vertical';
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 重置滑动状态
|
||||||
|
* @param {Object} event
|
||||||
|
*/
|
||||||
|
resetTouchStatus() {
|
||||||
|
this.direction = '';
|
||||||
|
this.deltaX = 0;
|
||||||
|
this.deltaY = 0;
|
||||||
|
this.offsetX = 0;
|
||||||
|
this.offsetY = 0;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 设置滑动开始位置
|
||||||
|
* @param {Object} event
|
||||||
|
*/
|
||||||
|
stopTouchStart(event) {
|
||||||
|
this.resetTouchStatus();
|
||||||
|
const touch = event.touches[0];
|
||||||
|
this.startX = touch.clientX;
|
||||||
|
this.startY = touch.clientY;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 滑动中,是否禁止打开
|
||||||
|
* @param {Object} event
|
||||||
|
*/
|
||||||
|
stopTouchMove(event) {
|
||||||
|
const touch = event.touches[0];
|
||||||
|
this.deltaX = touch.clientX - this.startX;
|
||||||
|
this.deltaY = touch.clientY - this.startY;
|
||||||
|
this.offsetX = Math.abs(this.deltaX);
|
||||||
|
this.offsetY = Math.abs(this.deltaY);
|
||||||
|
this.direction = this.direction || this.getDirection(this.offsetX, this.offsetY);
|
||||||
|
},
|
||||||
|
|
||||||
|
getSelectorQuery() {
|
||||||
|
const views = uni.createSelectorQuery().in(this)
|
||||||
|
views
|
||||||
|
.selectAll('.' + this.elClass)
|
||||||
|
.boundingClientRect(data => {
|
||||||
|
if (data.length === 0) return
|
||||||
|
let show = 'none'
|
||||||
|
if (this.autoClose) {
|
||||||
|
show = 'none'
|
||||||
|
} else {
|
||||||
|
show = this.show
|
||||||
|
}
|
||||||
|
this.leftWidth = data[0].width || 0
|
||||||
|
this.rightWidth = data[1].width || 0
|
||||||
|
this.buttonShow = show
|
||||||
|
})
|
||||||
|
.exec()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
export default otherMixins
|
||||||