父组件代码：
<template>
<view class="page">
<view class="b-nav-bar"
<view @click="nativeBack" v-show="showBackIcon" class="iconfont icon-zuofanhui nBack ml15"></view>
<scroll-view scroll-x="true" class="title">
<view>{{navTitle}}</view>
</scroll-view>
<text class="iconfont icon-caozuozhiyin" @click="showExplainPopup"
v-if="top10Config.nodeExplain && showBackIcon"></text>
<text class="iconfont icon-shaixuan1" @click="filterEcharts" v-show="showBackIcon"></text>
<view class="sx-txt mr30" @click="filterEcharts" v-show="showBackIcon">筛选</view>
</view>
<!-- 无数据图片 -->
<view class="noDataBox" v-if="showNoData">
<view class="noDataImg"></view>
<view class="noDataText">
抱歉，暂无数据~
</view>
</view>
<!-- echarts图表 -->
<echarts ref="dataChart" v-else :style="mainStyle"></echarts>
<!-- 点击筛选按钮弹出筛选框 -->
<u-popup :overlayStyle="overStyle" :show="filterShow" mode="top" :customStyle="customStyle_"
background-color="#fff" :is-mask-click="false" class="filterPopup">
<!-- 时间，行业，概念，省份筛选框 -->
<view v-for="(item,index) in optionSetList" :key="item.id">
<view @click="showOtherPopup(item,index)" class="timeInput" :class="item.isSubShow ? 'active' : ''">
{{ item.name }}
<u-icon :name="item.isSubShow ? 'arrow-up-fill' : 'arrow-down-fill'" size="12"
:color="item.isSubShow ? '#fff' : '#999'" class="rightIcon"></u-icon>
</view>
<!-- 时间筛选组件 -->
<view v-if="item.isSubShow && item.name == '时间'">
<timeFilter v-if="!isStatic"
:startTime1="search.dateRange[0]" :endTime1="search.dateRange[1]"
:endTimeText1="top10Config.endTime" :startTimeText1="top10Config.startTime"
:frequency="top10Config.frequency" @getQuery="getTimeQuery"></timeFilter>
<timeSelect v-else :startTime1="search.date" :startTimeText1="top10Config.startTime" :endTimeText1="top10Config.endTime" :frequency="top10Config.frequency" @getQuery="getTimeParams"></timeSelect>
</view>
<!-- 搜索组件 -->
<view v-if="item.name != '时间'">
<u-search placeholder="请输入关键词搜索" shape="square" :showAction="false" v-model="searchKeyword"
:clearabled="true" @change="searchArea(item,index)" class="searchBox" v-show="item.isSubShow">
</u-search>
<!-- 单选筛选组件 -->
<scroll-view scroll-y="true" style="margin: 38rpx 5% 34rpx;height: 300rpx;overflow-y: scroll;" v-show="item.isSubShow">
<u-radio-group v-model="search.optionDTO[item.id]" placement="column"
@change="($event)=>handleOptionChange($event,item)">
<u-radio :customStyle="{marginBottom: '16rpx'}" activeColor="#3849B4" label="全部" name="">
</u-radio>
<u-radio :customStyle="{marginBottom: '16rpx'}" activeColor="#3849B4"
v-for="option of item.options" :key="option.key" :label="option.value"
:name="option.key">
</u-radio>
</u-radio-group>
</scroll-view>
</view>
</view>
<view class="btnOptions">
<u-button text="取消" class="cancelBtn" @click="filterClose"></u-button>
<u-button type="primary" text="排名分析" class="creatBtn" @click="refreshChart"></u-button>
</view>
</u-popup>
<!-- 点击问号说明弹窗 -->
<u-popup :show="showExplain" mode="bottom" :round="10" class="explainPopup">
<view class="explainHeader">
<scroll-view class="explainTitle" scroll-x="true">
<view style="display: inline-block;">{{navTitle}}</view>
</scroll-view>
<view class="explainIcon" @click="canclePopup">
<text class="iconfont icon-shanchu1"></text>
</view>
</view>
<view class="explainContent">
{{ top10Config.nodeExplain }}
</view>
</u-popup>
</view>
</template>
<script>
import top10Mixin from './component/top10Mixin.js'
import {
mapState
} from 'vuex';
export default {
mixins: [top10Mixin],
data() {
return {
navTitle: "", // 标题
nodeId: null, // 三级节点id
option: {}, // 图表数据
customStyle_: { //筛选框样式
marginTop: '88rpx'
},
mainStyle: { //图表样式
height: '',
marginTop: ''
},
overStyle: { //遮罩层样式
top: '44rpx'
},
filterShow: false, // 是否显示筛选框
showTimeIcon: true, // 是否显示时间下拉图标
timePopup: false, // 是否显示时间筛选弹框组件
showExplain: false, // 是否显示问号注释
showBackIcon: true, //是否显示返回按钮
searchKeyword: '', // 搜索值
urlFrom: '', // 任务中心跳转链接参数
}
},
onLoad(options) {
this.navTitle = options.nodeName
this.nodeId = options.nodeId
this.urlFrom = options.urlFrom
},
computed: {
...mapState(['stabarHeight'])
},
mounted() {
this.$nextTick(() => {
this.mainStyle.height = `calc(100% - 44px - ${this.stabarHeight}rpx)`
this.mainStyle.marginTop = `${this.stabarHeight}rpx`
this.customStyle_ = {
marginTop: this.stabarHeight + 88 + 'rpx'
}
this.overStyle = {
top: this.stabarHeight + 88 + 'rpx'
}
})
this.requestTop10Config()
},
methods: {
// 返回上一页
nativeBack() {
uni.navigateBack({
delta: 1, //返回层数，2则上上页
})
},
// 点击显示筛选框
filterEcharts() {
// 每次打开弹窗重置打开内容详情
this.optionSetList.forEach(i => {
i.isSubShow = false
})
this.filterShow = true
this.showBackIcon = false
},
// 筛选弹框关闭
filterClose() {
this.search.dateRange = this.search.dateRange.map(String)
this.filterShow = false
this.showBackIcon = true
},
// 关闭说明弹窗
canclePopup() {
this.showExplain = false
},
// 点击问号显示说明弹窗
showExplainPopup() {
this.showExplain = true
},
// 显示时间筛选框
showTimePopup() {
this.timePopup = !this.timePopup
this.showTimeIcon = !this.showTimeIcon
},
// 点击显示对应筛选框
showOtherPopup(item, index) {
//设置勾选
this.optionSetList.forEach(i => {
if (i.isSubShow !== this.optionSetList[index].isSubShow) {
i.isSubShow = false
}
})
item.isSubShow = !item.isSubShow
this.timePopup = false
this.showTimeIcon = false
},
// 获取时间插件选择的开始、结束时间
getTimeQuery(value) {
this.search.dateRange[0] = value[0]
this.search.dateRange[1] = value[1]
},
// 获取时间插件单个时间
getTimeParams(value) {
this.search.date = value
},
// 生成图表
refreshChart() {
if (this.validParams1()) {
this.search.dateRange = this.search.dateRange.map(String)
this.requestData()
this.filterShow = false
this.showBackIcon = true
}
}
}
}
</script>
<style lang="scss" scoped>
uni-page-body,
uni-page-refresh {
height: 100%;
overflow: hidden;
}
.b-nav-bar {
height: 88rpx;
display: flex;
align-items: center;
.title {
font-size: 32rpx;
height: 100%;
width: 440rpx;
background-color: #fff !important;
text-align: center;
line-height: 88rpx;
}
.icon-caozuozhiyin {
color: #999999;
font-size: 26rpx;
margin: 0 36rpx 0 15rpx;
}
.nBack {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.icon-shaixuan1 {
font-size: 26rpx;
margin-right: 8rpx;
}
.sx-txt {
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
}
}
.page {
background: #ffffff;
height: 100%;
.main-content {
position: relative;
display: flex;
flex-direction: column;
.chart-warp-box {
background-color: #FFF;
margin-bottom: 20rpx;
border-top: 1rpx solid #DCDEE3;
flex-shrink: 0;
ul {
list-style-type: none;
line-height: 40rpx;
margin: 20rpx 0;
padding: 0;
padding-left: 65rpx;
}
.chart-tab {
color: #999;
font-size: 20rpx;
.text {
color: #999;
font-size: 20rpx;
display: inline-block;
}
.text2 {
opacity: .6;
}
.tab-color {
width: 40rpx;
height: 16rpx;
border-radius: 3rpx;
display: inline-block;
margin-right: 10rpx;
}
.no-show-color {
background: #999 !important;
opacity: .6;
}
.tab-color2 {
width: 40rpx;
height: 8rpx;
display: inline-block;
border-bottom: 2rpx solid #333;
margin-right: 10rpx;
vertical-align: 10rpx;
}
.no-show-color2 {
border-bottom-color: #999 !important;
opacity: .6;
}
}
}
}
}
.noDataBox {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.noDataImg {
width: 320rpx;
height: 268rpx;
background-image: url('@/static/images/noData.png');
background-size: 100% 100%;
}
.noDataText {
color: #999999;
font-size: 26rpx;
margin-top: 53rpx;
text-align: center;
}
}
/deep/ .header_content {
border-bottom: 1rpx solid #DCDEE3;
}
.explainPopup {
width: 100%;
background-color: #fff;
.explainHeader {
width: 100%;
height: 100rpx;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1rpx solid #DCDEE3;
.explainTitle {
font-size: 30rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
margin-left: 30rpx;
width: 80%;
height: 100rpx;
line-height: 100rpx;
white-space: nowrap;
}
.explainIcon {
width: 44rpx;
height: 44rpx;
background-color: #F4F4F4;
margin-right: 30rpx;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
.icon-shanchu1 {
font-size: 32rpx;
color: #C0C0C0;
}
}
}
.explainContent {
padding: 38rpx 57rpx 38rpx 30rpx;
font-size: 24rpx;
line-height: 50rpx;
color: #666666;
}
}
.filterPopup {
width: 100%;
.timeInput {
background-color: #F1F2F4;
margin: 44rpx 5% 0;
height: 70rpx;
color: #999999;
font-size: 28rpx;
line-height: 158rpx;
padding: 0rpx 30rpx;
display: flex;
align-items: center;
position: relative;
border-radius: 10rpx;
.rightIcon {
position: absolute;
top: 20rpx;
right: 20rpx;
}
&.active {
background-color: #3849B4;
color: #fff;
}
}
.btnOptions {
display: flex;
margin-top: 44rpx;
.cancelBtn {
border-radius: 0;
background-color: #F1F2F4;
color: #666666;
border: none;
}
.creatBtn {
border-radius: 0;
background-color: #3849B4;
border: none;
}
}
.indicatorText {
font-size: 22rpx;
font-family: PingFang SC;
font-weight: 500;
color: #C0C0C0;
margin-left: 5%;
margin-bottom: 38rpx;
}
.indicatorCheckbox {
margin: 0 5% 34rpx;
height: 300rpx;
overflow-y: scroll;
}
.searchBox {
width: 90%;
margin: 30rpx 0 24rpx 5% !important;
background-color: #fff;
border: 1rpx solid #DCDEE3;
border-radius: 8rpx;
height: 70rpx;
}
}
/deep/ .u-radio {
margin-bottom: 46rpx !important;
}
/deep/ .u-checkbox {
margin-bottom: 46rpx !important;
}
/deep/ .u-search__content {
background-color: #fff !important;
}
/deep/ .u-search__content__input {
background-color: #fff !important;
height: 0rpx !important;
}
/deep/ .u-popup__content {
border: 1rpx solid #DCDEE3;
}
</style>
top10Mixin.js文件代码：
import {
queryTopData,
queryTopConfig,
queryTopOptionData
} from '@/api/chart.js' // 后端接口
import {
transformWeekQuarter,
fuzzySearch,
dateDiff
} from '@/common/common.js'
import echarts from './top10Chart.vue'
import timeFilter from './timeFilter.vue'
import timeSelect from './timeSelect.vue'
import {
initDefaultTime,
limitRangeObj
} from './top10DateSetting'
function defaultConfig() {
return {
name: '',
chartType: '', // 静态/动态
nodeExplain: '', // 三级节点说明
optionSet: '', // 筛选项配置
startTime: '', // 开始时间
endTime: '', // 结束时间
frequency: '', // 搜索频率
dataFrequency: '', // 数据频率
priceUnit: ''
}
}
function defaultQueryForm() {
return {
nodeId: '',
dateRange: [], // 时间区间模式使用
date: '', // 单选时间模式使用
optionDTO: {} // 筛选项配置,请求时要转化为数组
}
}
function getOptionItemParams(item, sourceValue) {
const {
filterField,
sourceField,
sourceType,
tableNamePhy
} = item
return {
filterField,
sourceField,
sourceType,
sourceValue,
tableNamePhy
}
}
export default {
components: {
echarts, // 图表
timeFilter, // 时间范围筛选组件
timeSelect, // 单个时间筛选组件
},
data() {
this.queryForm = null
return {
showNoData: false, // 是否显示无数据图片
search: defaultQueryForm(),
top10Config: defaultConfig(), // 图表配置信息
optionSetList: [], // 三个筛选组件值
filterOptions: [], //筛选清空的选项
}
},
computed: {
// 是否是静态图 1.静图 2.动图
isStatic() {
return this.top10Config.chartType == '1'
}
},
methods: {
// 获取top10配置信息包含选项
async requestTop10Config() {
this.search.nodeId = this.nodeId
const res = await queryTopConfig(this.nodeId)
this.initChartConfig(res.data)
},
// 初始化时间和筛选项
async initDateOptions() {
let {
startTime,
endTime
} = this.top10Config
const {
optionSetList
} = this
let date = ''
let dateRange = []
const optionDTO = {}
if (this.isStatic) {
date = endTime
} else {
const {
frequency,
dataFrequency
} = this.top10Config
dateRange = initDefaultTime(startTime, endTime, frequency, dataFrequency)
}
let obj = {
id: 1,
name: '时间'
}
optionSetList.unshift(obj)
if (optionSetList && optionSetList.length) {
// 默认获取一级筛选项候选项
for (let i = 0, l = optionSetList.length; i < l; i++) {
const item = optionSetList[i]
this.$set(item, 'isSubShow', false)
const {
id
} = item
optionDTO[id] = ''
if (!item.isChild) {
this.getLevel1OptionData(item)
}
}
}
this.$set(this.search, 'dateRange', dateRange)
this.$set(this.search, 'date', date)
this.$set(this.search, 'optionDTO', optionDTO)
this.requestData(false)
},
// 初始化图表配置信息
initChartConfig(res) {
res = res || {}
const {
chartType,
nodeExplain,
nodeName: name,
tableSet,
optionSet = []
} = res
const {
startTime,
endTime,
frequency,
dataFrequency,
priceUnit
} = tableSet || {}
// 转换为一维数组
const optionSetList = optionSet.reduce((pre, cur) => {
const {
dataTopSetVo,
...others
} = cur
pre.push(others)
if (dataTopSetVo) {
others.hasChild = true
pre.push({
...dataTopSetVo,
isChild: true,
fId: others.id
})
}
return pre
}, [])
const top10Config = {
name,
chartType,
nodeExplain,
optionSet,
startTime,
endTime,
frequency,
dataFrequency,
priceUnit
}
Object.assign(this.top10Config, top10Config)
this.optionSetList = optionSetList
// 初始化参数
this.initDateOptions()
},
// 获取一级筛选项候选项并赋值
async getLevel1OptionData(item) {
const {
tableNamePhy,
sourceType,
tableFilter,
sourceField
} = item
const params = JSON.stringify({
tableNamePhy,
sourceType,
tableFilter,
sourceField
})
const options = await this.requestOptionData(params)
this.$set(item, 'options', options)
this.$set(item, 'optionsAll', options)
},
// 获取筛选项候选项数据
async requestOptionData(params) {
const res = await queryTopOptionData(params)
return res.data || []
},
// 获取二级节点候选项
async handleOptionChange(n, item) {
if (item.hasChild) {
const {
optionSetList
} = this
const child = optionSetList.find(({
fId
}) => fId === item.id)
this.search.optionDTO[child.id] = ''
let options = []
if (n) {
const {
tableNamePhy,
sourceType,
tableFilter,
sourceField
} = child
const params = JSON.stringify({
tableNamePhy,
sourceType,
tableFilter,
sourceField,
parentField: item.sourceField,
parentFieldValue: n
})
options = await this.requestOptionData(params)
}
this.$set(child, 'options', options)
}
},
// 获得请求参数
handleRequestParams(flow = true) {
const {
nodeId
} = this.search
let startTime = this.search.date
let endTime = this.search.date
if (!this.isStatic) {
startTime = this.search.dateRange[0]
endTime = this.search.dateRange[1]
}
// 处理选项
const optionDTOList = this.handleOptionParams()
const hasAuth = flow
return {
nodeId,
startTime,
endTime,
optionDTOList,
hasAuth
}
},
// 处理筛选项条件
handleOptionParams() {
const {
optionDTO
} = this.search
const {
optionSet
} = this.top10Config
const res = []
if (optionSet.length > 0) {
optionSet.forEach((item) => {
const sourceValue = optionDTO[item.id]
if (sourceValue) {
const {
dataTopSetVo
} = item
const optionItemParams = getOptionItemParams(item, sourceValue)
if (dataTopSetVo) {
const sourceValue = optionDTO[dataTopSetVo.id]
if (sourceValue) {
optionItemParams.dataTopOptionDTO = getOptionItemParams(dataTopSetVo,
sourceValue)
}
}
res.push(optionItemParams)
}
})
}
return res
},
// 获取图表数据
async requestData(flow = true) {
this.handleClearData()
const queryForm = this.handleRequestParams(flow)
this.queryForm = queryForm
//显示加载框
uni.showLoading({
title: '加载中',
mask: true
});
const res = await queryTopData(queryForm)
if (res.data) {
this.setChartData(res.data)
uni.hideLoading()
} else {
uni.hideLoading()
uni.$u.toast(res.msg)
if (res.code == -3110) {
let timer = setTimeout(() => {
uni.navigateBack({
delta: 1, //返回层数，2则上上页
})
}, 3000)
}
}
},
// 设置图表和表格数据
setChartData(res) {
const {
$refs: {
dataChart
}
} = this
if (dataChart) {
const {
chartType,
priceUnit
} = this.top10Config
const data = res || []
if (data.length) {
dataChart.initChartOption({
data,
chartType,
priceUnit
})
} else {
this.showNoData = true
}
this.$nextTick(() => {
uni.hideLoading()
})
} else {
this.$nextTick(() => {
this.setChartData(res)
})
}
},
// 筛选数据校验
validParams1() { // 1.日度 60天 2.周度 1年 3.月度 3年 4.季度 5年 5.半年度 10年 6.年度 20年 7.不定期 1年
if (this.top10Config.dataFrequency == '1') {
if (this.top10Config.frequency == '0') { // 日频
if (dateDiff(this.search.dateRange[0], this.search.dateRange[1], "d") > 60) {
uni.$u.toast('选择时间间隔不能超过60天')
return false
}
}
} else if (this.top10Config.dataFrequency == '2') {
if (this.top10Config.frequency == '0') { // 日频
if (dateDiff(this.search.dateRange[0], this.search.dateRange[1], "y") > 1) {
uni.$u.toast('选择时间间隔不能超过1年')
return false
}
} else if (this.top10Config.frequency == '4') {// 周频
if (dateDiff(transformWeekQuarter('4', this.search.dateRange[0]), transformWeekQuarter('4', this.search.dateRange[1]), "y") > 1) {
uni.$u.toast('选择时间间隔不能超过1年')
return false
}
}
} else if (this.top10Config.dataFrequency == '3') {
if (this.top10Config.frequency == '0') { // 日频
if (dateDiff(this.search.dateRange[0], this.search.dateRange[1], "y") > 3) {
uni.$u.toast('选择时间间隔不能超过3年')
return false
}
} else if (this.top10Config.frequency == '1') {// 月频
if (dateDiff(this.search.dateRange[0], this.search.dateRange[1], "y") > 3) {
uni.$u.toast('选择时间间隔不能超过3年')
return false
}
}
} else if (this.top10Config.dataFrequency == '4') {
if (this.top10Config.frequency == '0') { // 日频
if (dateDiff(this.search.dateRange[0], this.search.dateRange[1], "y") > 5) {
uni.$u.toast('选择时间间隔不能超过5年')
return false
}
} else if (this.top10Config.frequency == '1') {// 月频
if (dateDiff(this.search.dateRange[0], this.search.dateRange[1], "y") > 5) {
uni.$u.toast('选择时间间隔不能超过5年')
return false
}
} else if (this.top10Config.frequency == '2') {// 季频
if (dateDiff(transformWeekQuarter('2', this.search.dateRange[0]), transformWeekQuarter('2', this.search.dateRange[1]), "y") > 5) {
uni.$u.toast('选择时间间隔不能超过5年')
return false
}
} else if (this.top10Config.frequency == '4') {// 周频
if (dateDiff(transformWeekQuarter('4', this.search.dateRange[0]), transformWeekQuarter('4', this.search.dateRange[1]), "y") > 5) {
uni.$u.toast('选择时间间隔不能超过5年')
return false
}
}
} else if (this.top10Config.dataFrequency == '5') {
if (this.top10Config.frequency == '0') { // 日频
if (dateDiff(this.search.dateRange[0], this.search.dateRange[1], "y") > 10) {
uni.$u.toast('选择时间间隔不能超过10年')
return false
}
} else if (this.top10Config.frequency == '1') {// 月频
if (dateDiff(this.search.dateRange[0], this.search.dateRange[1], "y") > 10) {
uni.$u.toast('选择时间间隔不能超过10年')
return false
}
} else if (this.top10Config.frequency == '2') {// 季频
if (dateDiff(transformWeekQuarter('2', this.search.dateRange[0]), transformWeekQuarter('2', this.search.dateRange[1]), "y") > 10) {
uni.$u.toast('选择时间间隔不能超过10年')
return false
}
}
} else if (this.top10Config.dataFrequency == '6') {
if (this.top10Config.frequency == '0') { // 日频
if (dateDiff(this.search.dateRange[0], this.search.dateRange[1], "y") > 19) {
uni.$u.toast('选择时间间隔不能超过20年')
return false
}
} else if (this.top10Config.frequency == '1') {// 月频
if (dateDiff(this.search.dateRange[0], this.search.dateRange[1], "y") > 19) {
uni.$u.toast('选择时间间隔不能超过20年')
return false
}
} else if (this.top10Config.frequency == '2') {// 季频
if (dateDiff(transformWeekQuarter('2', this.search.dateRange[0]), transformWeekQuarter('2', this.search.dateRange[1]), "y") > 19) {
uni.$u.toast('选择时间间隔不能超过20年')
return false
}
} else if (this.top10Config.frequency == '3') {// 年频
let dateRange = this.search.dateRange.map(Number)
if (dateRange[1] - dateRange[0] > 19) {
uni.$u.toast('选择时间间隔不能超过20年')
return false
}
}
} else if (this.top10Config.dataFrequency == '7') {
if (this.top10Config.frequency == '0') { // 日频
if (dateDiff(this.search.dateRange[0], this.search.dateRange[1], "y") > 1) {
uni.$u.toast('选择时间间隔不能超过1年')
return false
}
}
}
if (this.search.dateRange[0] == '' || this.search.dateRange[1] == '') {
uni.$u.toast(`请选择${this.search.dateRange[0] == '' ? '开始' : '结束'}时间`)
this.filterShow = true
this.showBackIcon = false
return false
}
if (this.search.dateRange[0] > this.search.dateRange[1]) {
uni.$u.toast('开始选择时间不能大于结束选择时间')
this.filterShow = true
this.showBackIcon = false
return false
}
return true
},
// 验证输入框不能输入表情符
validParams() {
let iconRule = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig
if (iconRule.test(this.searchKeyword) == true) {
uni.$u.toast('不能输入表情符')
return false
}
return true
},
// 搜索
searchArea(item,index) {
if (item.isSubShow == true) {
if (this.searchKeyword.trim() == '') {
this.optionSetList.forEach((res,index1)=> {
if(index == index1) {
item.options = res.optionsAll
}
})
} else if(this.searchKeyword.trim() != '' && this.validParams()) {
let arr = fuzzySearch(item.optionsAll, this.searchKeyword.trim())
let arr1 = arr.slice(0, 500)
if (arr.length > 500) { //当搜索的数据超500条时候，默认显示前500条数据，避免页面卡死
item.options = arr1
} else {
item.options = arr
}
}
}
},
// 清除数据
handleClearData() {
this.showNoData = false
this.option = {}
},
}
}
top10DateSetting.js代码：
const dayTime = 24 * 60 * 60 * 1000
const weekTime = 7 * dayTime
function lowerMonth (year, month, date) {
return Date.UTC(Number(year), month ? Number(month) - 1 : 0, date ? Number(date) : 1)
}
/**
* 根据周数获取日期
* @param {String} timeStr 时间字符串:2021-11
* @param {Boolean} isLast 是否是周最后一天,false为第一天
* @returns {Number} 时间戳
*/
export function getTimeFromWeek (timeStr, isLast = true) {
let [year, week] = timeStr.split('-')
year = +year
week = +week
const first = isLast ? getFirstWeekLastDay(year) : Date.UTC(year, 0, 1)
let res = ((week - 1) * weekTime + first)
if (isLast) {
const yearLastDay = Date.UTC(year + 1, 0, 0)
if (res > yearLastDay) {
res = yearLastDay
}
}
return res
}
/**
* 获取第一周最后一天
* @param {Number|String} year
* @returns {Number} 时间戳
*/
export function getFirstWeekLastDay (year) {
// 当前年份第一天
let first = Date.UTC(year, 0, 1)
const day = new Date(first).getDay() || 7
// 证明第一周不是从周一开始
if (day > 1) {
first = Date.UTC(year, 0, 7 - day + 1)
} else {
first = Date.UTC(year, 0, 7)
}
return first
}
/**
* 转化季/周为年月日格式
* @param {String} frequency 频率2|4
* @param {String} dateString 格式化时间
* @returns {Array} 年-月-日格式开始/结束时间
*/
export function transformWeekQuarter (frequency, dateString) {
// 把季频和周频转为年月日格式
if (frequency === '2') {
const [year, season] = dateString.split('-')
const d = new Date(Date.UTC(year, Number(season) - 1))
return d.getUTCFullYear() + '-' + (d.getUTCMonth() + 1) + '-' + d.getUTCDate()
} else if (frequency === '4') {
const d = new Date(getTimeFromWeek(dateString))
return d.getUTCFullYear() + '-' + (d.getUTCMonth() + 1) + '-' + d.getUTCDate()
}
return dateString
}
/**
* 判断日期为当年的第几周
* @param {String|Number|Date} time
* @returns {Number}
*/
export function getWeek (time) {
if (!time) {
return 0
}
let date = time
if (typeof time === 'string') {
date = lowerMonth(...date.split('-'))
} else if (time instanceof Date) {
date = time.getTime()
}
let week = 1
const year = new Date(date).getUTCFullYear()
const first = getFirstWeekLastDay(year)
const interval = Math.ceil((date - first) / weekTime)
week += interval
return week
}
/**
* 获取某年总有多少周
* @param {String|Number} year
* @returns {Number}
*/
export function getTotalWeek (year) {
year = year ? +year : new Date().getUTCFullYear()
const date = new Date(year + 1, 0, 0)
const res = getWeek(date)
return res
}
// Date根据频率转化对应格式
export function formatDateToString (frequency, date) {
let res = ''
switch (frequency) {
case '1': // 月
res = date.getUTCFullYear() + '-' + String('0' + (date.getUTCMonth() + 1)).slice(-2)
break
case '2': // 季
{
let month = date.getUTCMonth() + 1
month = Math.ceil(month / 3) * 3
res = date.getUTCFullYear() + '-' + String('0' + month).slice(-2)
}
break
case '3': // 年
res = String(date.getUTCFullYear())
break
case '4': // 周
res = date.getUTCFullYear() + '-' + String('0' + getWeek(date)).slice(-2)
break
case '6':
case '0': // 日
res = date.getUTCFullYear() + '-' + String('0' + (date.getUTCMonth() + 1)).slice(-2) + '-' + String('0' + date.getUTCDate()).slice(-2)
}
return res
}
/**
* 转化周/季/月/日/年为Date
* @param {String} frequency 频率
* @param {String} dateString 格式时间
* @returns {Array} 处理后的开始/结束时间
*/
export function transformToDate (frequency, dateString) {
let date = transformWeekQuarter(frequency, dateString)
date = new Date(lowerMonth(...date.split('-')))
return date
}
// 获取时间交集
export function getUniteRange (frequency, first, second) {
// 当前表无频率
if (frequency === '5') {
return null
}
const firstStart = transformToDate(frequency, first[0])
const firstEnd = transformToDate(frequency, first[1])
const secondStart = transformToDate(frequency, second[0])
const secondEnd = transformToDate(frequency, second[1])
// 无交集
if (firstStart > secondEnd || secondStart > firstEnd) {
return null
}
let start = Math.max(firstStart.getTime(), secondStart.getTime())
let end = Math.min(firstEnd.getTime(), secondEnd.getTime())
// 对开始/结束时间格式化
start = new Date(start)
end = new Date(end)
start = formatDateToString(frequency, start)
end = formatDateToString(frequency, end)
return [start, end]
}
// 找到同频率两个时间字符串最小日期和最大日期
export function getMaxMin (first, second) {
const firstStr = first.split('-').join('')
const secondStr = second.split('-').join('')
const firstToNumber = +firstStr
const secondToNumber = +secondStr
const isFirstGtSecond = firstToNumber > secondToNumber
let min = isFirstGtSecond ? second : first
let max = isFirstGtSecond ? first : second
return {
min,
max
}
}
/**
* 跳转当前时间几个月/几年前/后日期
* @param {Date} date 时间对象
* @param {String} type 间隔类型(0:年,1:月,其他:日)
* @param {Number} num 间隔
* @param {Boolean} isPre 是否是向前间隔(默认为false)
*/
export function goToIntervalDate (date, type, num, isPre = false) {
const curYear = date.getUTCFullYear()
const curMonth = date.getUTCMonth()
const curDate = date.getUTCDate()
if (['0', '1'].includes(type)) {
// 月
if (type === '1') {
const targetMonth = isPre ? curMonth - num : curMonth + num
date.setUTCMonth(targetMonth)
// 年
} else {
const targetYear = isPre ? curYear - num : curYear + num
date.setUTCFullYear(targetYear)
}
/**
* 如果日期不对 比如
* 2020-03-31向前一个月变成2020-03-02问题
* 2020-01-31向后一个月变成2020-03-02问题
* 2020-02-29向前一年变成2019-03-01问题
* 2020-02-29向后一年变成2021-03-01问题
*/
if (date.getUTCDate() !== curDate) {
date.setUTCDate(0)
}
// 日
} else {
const targetDate = isPre ? curDate - num : curDate + num
date.setUTCDate(targetDate)
}
}
/**
* 获取当前频率下时间后面时间
* @param {Date} dateInstance 时间
* @param {String} frequency 频率
* @returns {Number}
*/
export function toNextUnitTime (dateInstance, frequency) {
switch (frequency) {
case '1': // 月 向后推一个月
goToIntervalDate(dateInstance, '1', 1); break
case '2': // 季 向后推三个月
goToIntervalDate(dateInstance, '1', 3); break
case '3': // 年
goToIntervalDate(dateInstance, '0', 1); break
case '4': // 周
goToIntervalDate(dateInstance, '', 7); break
default: // 日
goToIntervalDate(dateInstance, '', 1)
}
return dateInstance.getTime()
}
// 默认时间区间
const defaultRangeObj = {
1: 10, // 日度30天
2: 60, // 周度60天
3: 1, // 月度1年
4: 3, // 季度3年
5: 5, // 半年度5年
6: 10 // 年度10年
}
/**
*
* @param {String} startTime 开始时间
* @param {String} endTime 结束时间
* @param {Sting} frequency 搜索频率
* @param {String} dataFrequency 数据频率
* @returns
*/
export function initDefaultTime (start, end, frequency, dataFrequency) {
let startTime = transformToDate(frequency, start)
let endTime = transformToDate(frequency, end)
const num = defaultRangeObj[dataFrequency]
/*
来源数据表的数据频率（非时间插件频率）=年度时，默认展示此来源数据表近10年数据（当可查询时间区间不足10年时，取实际的）；每次最多查询50年数据；
来源数据表的数据频率（非时间插件频率）=半年度时，默认展示此来源数据表近5年数据（当可查询时间区间不足5年时，取实际的）；每次最多查询30年数据；
来源数据表的数据频率（非时间插件频率）=季度时，默认展示此来源数据表近3年数据（当可查询时间区间不足3年时，取实际的）；每次最多查询20年数据；
来源数据表的数据频率（非时间插件频率）=月度时，默认展示此来源数据表近1年数据（当可查询时间区间不足1年时，取实际的）；每次最多查询5年数据；
来源数据表的数据频率（非时间插件频率）=周度时，默认展示此来源数据表近60天数据（当可查询时间区间不足60天时，取实际的）；每次最多查询1年数据；
来源数据表的数据频率（非时间插件频率）=日度时，默认展示此来源数据表近10天数据（当可查询时间区间不足10天时，取实际的）；每次最多查询60天数据；
*/
let type = '0'
switch (dataFrequency) {
case '1':
case '2':
type = ''
break;
default:
type = '0'
}
goToIntervalDate(endTime, type, num, true)
toNextUnitTime(endTime, frequency)
// 根据数据频率判断区间是否符合
startTime = Math.max(startTime.getTime(), endTime.getTime())
start = formatDateToString(frequency, new Date(startTime))
return [start, end]
}
top10Chart子组件代码：
<template>
<view class="echarts">
<view id="dataChart" ref="dataChart"></view>
</view>
</template>
<script>
import echarts from '@/static/common/js/echarts.min.js'
import {
getMaxMinInterval,
computeStrOccupyLength,
moneyFormat,
bigNumberTransform,
handleMaxMinValue,
handleAmendInfoMaxMin
} from '@/common/common.js'
const barItemColors = [
"#588df1",
"#fbbe5d",
"#76f9c0",
"#d48265",
"#fe9dc5",
"#289898",
"#9866bc",
"#73caec",
"#7565f8",
"#61d9aa",
]
function defaultOption({
priceUnit,
labelWidth,
max,
min,
interval
}) {
priceUnit = priceUnit || ''
return {
tooltip: {
confine:true
},
xAxis: {
type: "value",
name: priceUnit.length > 3 ? priceUnit.substr(0, 3) + '...' : priceUnit,
max,
min,
interval,
axisLabel: {
rotate:"45", //表示的角度倾斜45度
interval: 0,
formatter: function(value, index) {
return bigNumberTransform(value)
}
}
},
grid: {
top: 20,
left: labelWidth,
right: priceUnit.length > 3 ? 70 : 58
},
yAxis: {
type: "category",
inverse: true,
axisTick: {
alignWithLabel: true
}
},
series: [{
type: 'bar',
barMaxWidth: 30,
itemStyle: {
color: function(param) {
return barItemColors[param.dataIndex] || barItemColors[0]
}
},
label: {
show: true,
align: 'left',
color:'#000',
formatter(params) {
return moneyFormat(params.value)
}
}
}]
}
}
export default {
data() {
this.myChart = null
this.currentIndex = 0
this.timelineLength = 0
return {
}
},
mounted() {
},
methods: {
// 初始化echart配置
initChartOption(chartOption) {
const {
chartType,
data
} = chartOption
const hasTimeline = chartType === '2' && data.length > 1
let option = null
if (hasTimeline) {
option = this.getTimeLineOption(chartOption)
} else {
option = this.getNormalOption(chartOption)
}
if (this.myChart != null && this.myChart != "" && this.myChart != undefined) {
this.myChart.dispose(); //销毁
}
this.option = option
this.myChart = echarts.init(document.getElementById('dataChart'))
this.myChart.setOption(this.option)
this.myChart.on('timelineplaychanged', this.timelinePlayChange)
this.myChart.on('timelinechanged', this.timelineChange)
},
// 静态图
getNormalOption (chartOption) {
const { data, priceUnit } = chartOption
const yAxisData = []
const seriesData = []
const { datas = [], date } = data[0] || {}
const mainYInfo = { // 主轴信息
max: -Infinity, // 最大刻度
min: Infinity, // 最小刻度
maxName: '' // 最长单位
}
datas.forEach((item) => {
const { sortFieldName, sortField, value } = item
const name = sortFieldName ? `${sortFieldName}（${sortField}）` : sortField
yAxisData.push(name)
seriesData.push(value)
if (name.length > mainYInfo.maxName.length) {
mainYInfo.maxName = name
}
if (value) {
handleMaxMinValue([value], mainYInfo)
}
})
handleAmendInfoMaxMin(mainYInfo)
const { interval, max, min } = getMaxMinInterval(7, mainYInfo.max, mainYInfo.min)
const labelLength = computeStrOccupyLength(mainYInfo.maxName)
const labelWidth = Math.max(labelLength * 14 + 10, 40)
const option = defaultOption({ priceUnit, max, min, interval, labelWidth })
option.yAxis.data = yAxisData
option.series[0].data = seriesData
option.grid.bottom = 80
option.graphic = {
elements: [
{
type: 'text',
right: '12%',
bottom: 120,
style: {
text: date,
font: 'bolder 20px monospace',
fill: 'rgba(221, 221, 221, 1)'
},
z: 100
}
]
}
return option
},
// 动图
getTimeLineOption (chartOption) {
const { data, priceUnit } = chartOption
const timelineData = []
const timelineOptions = []
this.currentIndex = 0
this.timelineLength = data.length
const mainYInfo = { // 主轴信息
max: -Infinity, // 最大刻度
min: Infinity, // 最小刻度
maxName: '' // 最长单位
}
for (let i = 0, l = data.length; i < l; i++) {
const item = data[i]
const { datas, date } = item
timelineData.push(date)
const optionItem = []
const yAxisData = []
for (let j = 0, k = datas.length; j < k; j++) {
const dataItem = datas[j]
const { sortFieldName, sortField, value } = dataItem
const name = sortFieldName ? `${sortFieldName}（${sortField}）` : sortField
yAxisData.push(name)
if (name.length > mainYInfo.maxName.length) {
mainYInfo.maxName = name
}
if (value) {
handleMaxMinValue([value], mainYInfo)
}
optionItem.push({
name,
value
})
}
timelineOptions.push({
series: {
data: optionItem
},
yAxis: {
data: yAxisData
},
graphic: {
elements: [
{
type: 'text',
right: '12%',
bottom: 130,
style: {
text: date,
font: 'bolder 20px monospace',
fill: 'rgba(221, 221, 221, 1)'
},
z: 100
}
]
}
})
}
handleAmendInfoMaxMin(mainYInfo)
const { interval, max, min } = getMaxMinInterval(7, mainYInfo.max, mainYInfo.min)
const labelLength = computeStrOccupyLength(mainYInfo.maxName)
const labelWidth = Math.max(labelLength * 14 + 10, 40)
const option = defaultOption({ priceUnit, max, min, interval, labelWidth })
option.timeline = {
axisType: 'category',
loop: false,
bottom: 30,
height: 40,
autoPlay: true,
width:'80%',
playInterval: 1200,
left: '10%',
right: '10%',
data: timelineData
}
Object.assign(option.yAxis, {
animationDuration: 400,
animationDurationUpdate: 400
})
option.grid.bottom = 120
option.series[0].realtimeSort = true
Object.assign(option, {
animationDuration: 0,
animationDurationUpdate: 400,
animationEasing: 'linear',
animationEasingUpdate: 'linear',
calculable: true,
options: timelineOptions
})
return option
},
// 播放状态下
timelinePlayChange({
playState
}) {
if (playState === true) {
// 播放完成后点击播放从头播放
if (this.currentIndex + 1 === this.timelineLength) {
this.myChart.dispatchAction({
type: 'timelineChange',
currentIndex: 0
})
this.currentIndex = 0
}
}
},
timelineChange({
currentIndex
}) {
this.currentIndex = currentIndex
},
}
}
</script>
<style lang="scss" scoped>
.echarts {
height: 100%;
padding: 35rpx 0rpx;
background-color: #fff;
#dataChart {
height: 96%;
}
}
</style>
timeFilter子组件代码：
<template>
<!-- 时间筛选弹框 -->
<view class="timePopup">
<!-- 时间展示 -->
<view class="timeShow">
<view class="timeLeft">
<view class="topText">
开始时间
</view>
<view class="bottomText">
{{startTime}}
</view>
</view>
<view class="line">
</view>
<view class="timeLeft">
<view class="topText">
结束时间
</view>
<view class="bottomText">
{{endTime}}
</view>
</view>
</view>
<!-- 时间插件 -->
<template>
<view class="timeComponent">
<text class="iconfont icon-zuoqiehuan" :class="enventClass1" @click="subtractTime"></text>
<text class="timeText">{{ allTimeText }}</text>
<text class="iconfont icon-youqiehuan" :class="enventClass2" @click="addTime"></text>
</view>
<scroll-view scroll-y="true" class="timeList">
<text class="itemTime" v-for="(item,index) in timeList" :key="index" :class="isActive(item)" :style="item.itemStyle" @click="selectTime(item)">{{item.time}}</text>
</scroll-view>
</template>
</view>
</template>
<script>
// import { getYearBetween } from './../../../common/common.js'
export default {
props:{
startTime1:{
type: String,
default: ''
},
endTime1:{
type: String,
default: ''
},
startTimeText1:{
type: String,
default: ''
},
endTimeText1:{
type: String,
default: ''
},
frequency:{
type: String,
default: ''
}
},
data() {
return {
timeList:[
{
itemStyle:{}
}
],
startTime: this.startTime1,// 避免直接修改props
endTime: this.endTime1,
startTimeText: this.startTimeText1,// 避免直接修改props
endTimeText: this.endTimeText1,
dateTime: new Date().getFullYear(),
startTimeCopy: this.startTime1,
endTimeCopy: this.endTime1,
allTimeText: '',
timeText:'', //日频显示的时间
year: '', //年份
timeStart:'',
timeEnd:'',
enventClass1:'',
enventClass2:'',
weekNum: 0 // 周数
}
},
created() {
this.getTime()
},
methods: {
getTime() {
// 日频
if(this.frequency == '0') {
this.allTimeText = this.startTime.substr(0,7)
this.timeText = this.allTimeText.substr(5,2)
this.year = this.startTime.substr(0,4)
this.getDayTime()
this.$emit('getQuery',[this.startTime,this.endTime])
} else if (this.frequency == '1') { // 月频
this.allTimeText = this.startTime.substr(0,4)
this.getMonthTime()
this.$emit('getQuery',[this.startTime,this.endTime])
} else if (this.frequency == '2') { // 季频
this.allTimeText = this.startTime.substr(0,4)
this.getQuarterTime()
this.$emit('getQuery',[this.startTime,this.endTime])
} else if (this.frequency == '3') { // 年频
this.startTimeText = 2020 -19; //获取完整的年份(4位)
this.endTimeText = 2020; //获取完整的年份(4位)
this.allTimeText = this.startTimeText + '-' + this.endTimeText
this.getYearTime()
this.timeList.shift()
this.$emit('getQuery',[this.startTime,this.endTime])
} else if (this.frequency == '4') { // 周频
this.allTimeText = this.startTime.substr(0,4)
this.getWeekTime()
this.$emit('getQuery',[this.startTime,this.endTime])
}else { // 没有
this.timeList = []
}
},
getItmeStyle() {
if (this.frequency == '0') {
this.startTimeText = this.startTimeText.substr(0,7)
this.endTimeText = this.endTimeText.substr(0,7)
if ( this.startTimeText == this.allTimeText) {
this.enventClass1 = 'enventStop'
if (this.startTimeText1.substr(8,2) >= 10){
this.timeStart = this.startTimeText1.substr(8,2)
} else {
this.timeStart = this.startTimeText1.substr(9,2)
}
this.timeList.forEach((res,index)=>{
if(res.time < this.timeStart){
res.itemStyle = {'color': 'rgb(192, 196, 204)','pointer-events': 'none'}
}else{
res.itemStyle = {}
}
})
} else {
this.enventClass1 = ''
this.itemStyle = {}
}
if (this.endTimeText == this.allTimeText) {
this.enventClass2 = 'enventStop'
if (this.endTimeText1.substr(8,2) >= 10){
this.timeEnd = this.endTimeText1.substr(8,2)
} else {
this.timeEnd = this.endTimeText1.substr(9,2)
}
this.timeList.forEach((res,index)=>{
if(res.time > this.timeEnd){
res.itemStyle = {'color': 'rgb(192, 196, 204)','pointer-events': 'none'}
}else{
res.itemStyle = {}
}
})
} else {
this.enventClass2 = ''
this.itemStyle = {}
}
} else if (this.frequency == '3') {
this.timeStart = this.startTimeText1
this.timeList.forEach((res,index)=>{
if(res.time < this.timeStart){
res.itemStyle = {'color': 'rgb(192, 196, 204)','pointer-events': 'none'}
if (this.startTimeText <= 1801) {
this.enventClass1 = 'enventStop'
}
}else{
res.itemStyle = {}
this.enventClass1 = ''
}
})
let currentYear = new Date().getFullYear()
if (this.endTimeText >= currentYear) {
this.enventClass2 = 'enventStop'
this.timeEnd = this.endTimeText1
this.timeList.forEach((res,index)=>{
if(res.time > this.timeEnd){
res.itemStyle = {'color': 'rgb(192, 196, 204)','pointer-events': 'none'}
}else{
res.itemStyle = {}
}
})
} else {
this.enventClass2 = ''
this.itemStyle = {}
}
} else {
this.startTimeText = this.startTimeText.substr(0,4)
this.endTimeText = this.endTimeText.substr(0,4)
if ( this.startTimeText == this.allTimeText) {
this.enventClass1 = 'enventStop'
if (this.startTimeText1.substr(5,2) >= 10){
this.timeStart = this.startTimeText1.substr(5,2)
} else {
this.timeStart = this.startTimeText1.substr(6,2)
}
this.timeList.forEach((res,index)=>{
if(res.time < this.timeStart){
res.itemStyle = {'color': 'rgb(192, 196, 204)','pointer-events': 'none'}
}else{
res.itemStyle = {}
}
})
} else {
this.enventClass1 = ''
this.itemStyle = {}
}
if (this.endTimeText == this.allTimeText) {
this.enventClass2 = 'enventStop'
if (this.endTimeText1.substr(5,2) >= 10){
this.timeEnd = this.endTimeText1.substr(5,2)
} else {
this.timeEnd = this.endTimeText1.substr(6,2)
}
this.timeList.forEach((res,index)=>{
if(res.time > this.timeEnd){
res.itemStyle = {'color': 'rgb(192, 196, 204)','pointer-events': 'none'}
}else{
res.itemStyle = {}
}
})
} else {
this.enventClass2 = ''
this.itemStyle = {}
}
}
},
//获取日
getDayTime() {
if(this.timeText == 1 || this.timeText == 3 || this.timeText == 5 || this.timeText == 7 || this.timeText == 8 || this.timeText == 10 || this.timeText == 12) {
this.timeList = [{time:1},{time:2},{time:3},{time:4},{time:5},{time:6},{time:7},{time:8},{time:9},{time:10},{time:11},{time:12},{time:13},{time:14},{time:15},{time:16},{time:17},{time:18},{time:19},{time:20},{time:21},{time:22},{time:23},{time:24},{time:25},{time:26},{time:27},{time:28},{time:29},{time:30},{time:31}]
} else if(this.timeText == 4 || this.timeText == 6 || this.timeText == 9 || this.timeText == 11) {
this.timeList = [{time:1},{time:2},{time:3},{time:4},{time:5},{time:6},{time:7},{time:8},{time:9},{time:10},{time:11},{time:12},{time:13},{time:14},{time:15},{time:16},{time:17},{time:18},{time:19},{time:20},{time:21},{time:22},{time:23},{time:24},{time:25},{time:26},{time:27},{time:28},{time:29},{time:30}]
} else {
if(this.year %4==0&& this.year %100!=0|| this.year %400==0){
this.timeList = [{time:1},{time:2},{time:3},{time:4},{time:5},{time:6},{time:7},{time:8},{time:9},{time:10},{time:11},{time:12},{time:13},{time:14},{time:15},{time:16},{time:17},{time:18},{time:19},{time:20},{time:21},{time:22},{time:23},{time:24},{time:25},{time:26},{time:27},{time:28}];
} else {
this.timeList = [{time:1},{time:2},{time:3},{time:4},{time:5},{time:6},{time:7},{time:8},{time:9},{time:10},{time:11},{time:12},{time:13},{time:14},{time:15},{time:16},{time:17},{time:18},{time:19},{time:20},{time:21},{time:22},{time:23},{time:24},{time:25},{time:26},{time:27},{time:28},{time:29}];
}
}
this.getItmeStyle()
},
//获取月
getMonthTime() {
this.timeList = [
{time:1},
{time:2},
{time:3},
{time:4},
{time:5},
{time:6},
{time:7},
{time:8},
{time:9},
{time:10},
{time:11},
{time:12}]
this.getItmeStyle()
},
//获取季度
getQuarterTime() {
this.timeList = [{time:3},{time:6},{time:9},{time:12}]
this.getItmeStyle()
},
//获取年度
getYearTime() {
for (let i = Number(this.startTimeText); i <= this.endTimeText; i++) {
this.timeList.push({ time : i })
}
this.getItmeStyle()
},
// 获取周
getWeekTime() {
this.timeList = [{time:1},{time:2},{time:3},{time:4},{time:5},{time:6},{time:7},{time:8},{time:9},{time:10},{time:11},{time:12},{time:13},{time:14},{time:15},{time:16},{time:17},{time:18},{time:19},{time:20},{time:21},{time:22},{time:23},{time:24},{time:25},{time:26},{time:27},{time:28},{time:29},{time:30},{time:31},{time:32},{time:33},{time:34},{time:35},{time:36},{time:37},{time:38},{time:39},{time:40},{time:41},{time:42},{time:43},{time:44},{time:45},{time:46},{time:47},{time:48},{time:49},{time:50},{time:51},{time:52},{time:53}]
this.getItmeStyle()
},
subtractTime() {
if(this.frequency == '0') { // 日频
this.timeText --
if (this.timeText >=10){
this.allTimeText = this.year + '-' + this.timeText
} else if(this.timeText < 10 && this.timeText >0 &&this.timeText != 0) {
this.allTimeText = this.year + '-0' + this.timeText
} else if (this.timeText <= 1 || this.timeText == 0){
this.timeText = 12
this.year = this.year -1
this.allTimeText = this.year + '-' + this.timeText
}
this.getDayTime()
} else if (this.frequency == '1') { // 月频
this.allTimeText --
this.getMonthTime()
} else if (this.frequency == '2') { // 季频
this.allTimeText --
this.getQuarterTime()
} else if (this.frequency == '3') { // 年频
this.timeList = []
this.startTimeText = this.startTimeText - 20
this.endTimeText = this.endTimeText -20
this.allTimeText = this.startTimeText + '-' + this.endTimeText
this.getYearTime()
} else if (this.frequency == '4') { // 周频
this.allTimeText --
this.getWeekTime()
}
},
addTime() {
// 日频
if(this.frequency == '0') {
if (this.timeText == 12){
this.timeText = 1
this.year = Number(this.year) + 1
this.allTimeText = this.year + '-0' + this.timeText
} else if (this.timeText >= 10 && this.timeText < 12) {
this.timeText ++
this.allTimeText = this.year + '-' + this.timeText
} else if (this.timeText < 10) {
this.timeText ++
if (this.timeText == 10){
this.allTimeText = this.year + '-' + this.timeText
} else {
this.allTimeText = this.year + '-0' + this.timeText
}
}
this.getDayTime()
} else if (this.frequency == '1') { // 月频
this.allTimeText ++
this.getMonthTime()
} else if (this.frequency == '2') { // 季频
this.allTimeText ++
this.getQuarterTime()
} else if (this.frequency == '3') { // 年频
this.timeList = []
this.startTimeText = this.startTimeText + 20
this.endTimeText = this.endTimeText + 20
this.allTimeText = this.startTimeText + '-' + this.endTimeText
this.getYearTime()
} else if (this.frequency == '4') { // 周频
this.allTimeText ++
this.getWeekTime()
}
},
selectTime(item) {
if (this.startTimeCopy && this.endTimeCopy) {
if(this.frequency == '0') {
if (item.time >= 10) {
this.startTimeCopy = this.allTimeText + '-' + item.time
} else {
this.startTimeCopy = this.allTimeText + '-0' + item.time
}
this.endTimeCopy = ''
this.$emit('getQuery',[this.startTimeCopy,this.endTimeCopy])
} else if (this.frequency == '1') {
if (item.time >= 10) {
this.startTimeCopy = this.allTimeText + '-' + item.time
} else {
this.startTimeCopy = this.allTimeText + '-0' + item.time
}
this.endTimeCopy = ''
this.$emit('getQuery',[this.startTimeCopy,this.endTimeCopy])
} else if (this.frequency == '2') {
if (item.time >= 10) {
this.startTimeCopy = this.allTimeText + '-' + item.time
} else {
this.startTimeCopy = this.allTimeText + '-0' + item.time
}
this.endTimeCopy = ''
this.$emit('getQuery',[this.startTimeCopy,this.endTimeCopy])
} else if (this.frequency == '3') {
this.startTimeCopy = item.time
this.endTimeCopy = ''
this.$emit('getQuery',[this.startTimeCopy,this.endTimeCopy])
} else if (this.frequency == '4') {
if (item.time >= 10) {
this.startTimeCopy = this.allTimeText + '-' + item.time
} else {
this.startTimeCopy = this.allTimeText + '-0' + item.time
}
this.endTimeCopy = ''
this.$emit('getQuery',[this.startTimeCopy,this.endTimeCopy])
}
} else if (this.startTimeCopy) {
if(this.frequency == '0') {
if (item.time >= 10) {
this.endTimeCopy = this.allTimeText + '-' + item.time
} else {
this.endTimeCopy = this.allTimeText + '-0' + item.time
}
this.startTime = this.startTimeCopy
this.endTime = this.endTimeCopy
this.$emit('getQuery',[this.startTime,this.endTime])
} else if (this.frequency == '1') {
if (item.time >= 10) {
this.endTimeCopy = this.allTimeText + '-' + item.time
} else {
this.endTimeCopy = this.allTimeText + '-0' + item.time
}
this.startTime = this.startTimeCopy
this.endTime = this.endTimeCopy
this.$emit('getQuery',[this.startTime,this.endTime])
} else if (this.frequency == '2') {
if (item.time >= 10) {
this.endTimeCopy = this.allTimeText + '-' + item.time
} else {
this.endTimeCopy = this.allTimeText + '-0' + item.time
}
this.startTime = this.startTimeCopy
this.endTime = this.endTimeCopy
this.$emit('getQuery',[this.startTime,this.endTime])
} else if (this.frequency == '3') {
this.endTimeCopy = item.time
this.startTime = this.startTimeCopy
this.endTime = this.endTimeCopy
this.$emit('getQuery',[this.startTime,this.endTime])
// this.allTimeText = this.startTime + '-' + this.endTime
} else if (this.frequency == '4') {
if (item.time >= 10) {
this.endTimeCopy = this.allTimeText + '-' + item.time
} else {
this.endTimeCopy = this.allTimeText + '-0' + item.time
}
this.startTime = this.startTimeCopy
this.endTime = this.endTimeCopy
this.$emit('getQuery',[this.startTime,this.endTime])
}
if (this.endTimeCopy < this.startTimeCopy) {
uni.$u.toast('开始选择时间不能大于结束选择时间')
}
}
},
isActive({time}){
if(this.endTimeCopy){
if(this.frequency == '0') {
if (time >= 10) {
time = this.allTimeText + '-' + time
} else {
time = this.allTimeText + '-0' + time
}
return Number(new Date(time)) >= Number(new Date(this.startTimeCopy)) && Number(new Date(time)) <= Number(new Date(this.endTimeCopy)) ? 'addClass' : ''
} else if (this.frequency == '1') {
if (time >= 10) {
time = this.allTimeText + '-' + time
} else {
time = this.allTimeText + '-0' + time
}
return Number(new Date(time)) >= Number(new Date(this.startTimeCopy)) && Number(new Date(time)) <= Number(new Date(this.endTimeCopy)) ? 'addClass' : ''
} else if (this.frequency == '2') {
if (time >= 10) {
time = this.allTimeText + '-' + time
} else {
time = this.allTimeText + '-0' + time
}
return Number(new Date(time)) >= Number(new Date(this.startTimeCopy)) && Number(new Date(time)) <= Number(new Date(this.endTimeCopy)) ? 'addClass' : ''
} else if (this.frequency == '3') {
return time >= this.startTimeCopy && time <= this.endTimeCopy ? 'addClass' : ''
} else if (this.frequency == '4') {
if (time >= 10) {
time = this.allTimeText + '-' + time
} else {
time = this.allTimeText + '-0' + time
}
return time >= this.startTimeCopy && time <= this.endTimeCopy ? 'addClass' : ''
}
}else if(this.startTimeCopy){
if(this.frequency == '0') {
if (time >= 10) {
time = this.allTimeText + '-' + time
} else {
time = this.allTimeText + '-0' + time
}
return Number(new Date(time)) == Number(new Date(this.startTimeCopy)) ? 'addClass' : ''
} else if (this.frequency == '1') {
if (time >= 10) {
time = this.allTimeText + '-' + time
} else {
time = this.allTimeText + '-0' + time
}
return Number(new Date(time)) == Number(new Date(this.startTimeCopy)) ? 'addClass' : ''
} else if (this.frequency == '2') {
if (time >= 10) {
time = this.allTimeText + '-' + time
} else {
time = this.allTimeText + '-0' + time
}
return Number(new Date(time)) == Number(new Date(this.startTimeCopy)) ? 'addClass' : ''
} else if (this.frequency == '3') {
return time == this.startTimeCopy ? 'addClass' : ''
} else if (this.frequency == '4') {
if (time >= 10) {
time = this.allTimeText + '-' + time
} else {
time = this.allTimeText + '-0' + time
}
return time == this.startTimeCopy ? 'addClass' : ''
}
}else {
return ''
}
}
},
}
</script>
<style lang="scss" scoped>
.timePopup {
width: 90%;
padding: 0 5%;
margin-top: 40rpx;
.timeShow {
background-color: #F7F7F8;
margin: 0rpx 0 44rpx;
display: flex;
align-items: center;
justify-content: space-between;
height: 130rpx;
border-radius: 10rpx;
.timeLeft {
width: 50%;
display: flex;
justify-content: space-between;
flex-direction: column;
align-items: center;
.topText {
font-size: 28rpx;
font-weight: 500;
color: #999999;
}
.bottomText {
font-size: 28rpx;
color: #3849B4;
font-weight: 500;
margin-top: 20rpx;
}
}
.line {
height: 80rpx;
width: 2rpx;
background-color: #D0D2D8;
}
}
.timeComponent {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 38rpx 38rpx;
.iconfont {
font-size: 30rpx;
color: #333333;
}
.enventStop {
color: rgb(192, 196, 204);
pointer-events: none;
}
.timeText {
font-size: 30rpx;
font-weight: 500;
color: #333333;
}
}
.timeList {
width: 100%;
// margin: auto 5%;
display: flex;
flex-wrap: wrap;
margin-bottom: 19rpx;
height: 240rpx;
overflow-y: scroll;
.itemTime {
font-size: 28rpx;
color: #666666;
padding: 0rpx 15rpx;
margin-bottom: 31rpx;
display: inline-block;
text-align: center;
line-height: 60rpx;
width: 80rpx;
height: 60rpx;
// &:nth-child(6n){
// padding-right: 0;
// }
}
.addClass {
background-color: #F1F2F4 ;
color: #3849B4;
font-weight: 500;
}
}
}
</style>
timeSelect子组件代码：
<template>
<!-- 时间筛选弹框 -->
<view class="timePopup">
<!-- 时间展示 -->
<view class="timeShow">
<view class="timeLeft">
<view class="topText">
选择时间
</view>
</view>
<view class="line">
</view>
<view class="timeLeft">
<view class="bottomText">
{{startTime}}
</view>
</view>
</view>
<!-- 时间插件 -->
<template>
<view class="timeComponent">
<text class="iconfont icon-zuoqiehuan" :class="enventClass1" @click="subtractTime"></text>
<text class="timeText">{{ allTimeText }}</text>
<text class="iconfont icon-youqiehuan" :class="enventClass2" @click="addTime"></text>
</view>
<scroll-view scroll-y="true" class="timeList">
<text class="itemTime" v-for="(item,index) in timeList" :key="index" :class="isActive(item)" :style="item.itemStyle" @click="selectTime(item)">{{item.time}}</text>
</scroll-view>
</template>
</view>
</template>
<script>
// import { getYearBetween } from './../../../common/common.js'
export default {
props:{
startTime1:{
type: String,
default: ''
},
startTimeText1:{
type: String,
default: ''
},
endTimeText1:{
type: String,
default: ''
},
frequency:{
type: String,
default: ''
}
},
data() {
return {
timeList:[
{
itemStyle:{}
}
],
startTime: this.startTime1,// 避免直接修改props
startTimeText: this.startTimeText1,// 避免直接修改props
endTimeText: this.endTimeText1,
dateTime: new Date().getFullYear(),
startTimeCopy: this.startTime1,
allTimeText: '',
timeText:'', //日频显示的时间
year: '', //年份
timeStart:'',
timeEnd:'',
enventClass1:'',
enventClass2:'',
weekNum: 0 // 周数
}
},
created() {
this.getTime()
},
methods: {
getTime() {
// 日频
if(this.frequency == '0') {
this.allTimeText = this.startTime.substr(0,7)
this.timeText = this.allTimeText.substr(5,2)
this.year = this.startTime.substr(0,4)
this.getDayTime()
this.$emit('getQuery',this.startTime)
} else if (this.frequency == '1') { // 月频
this.allTimeText = this.startTime.substr(0,4)
this.getMonthTime()
this.$emit('getQuery',this.startTime)
} else if (this.frequency == '2') { // 季频
this.allTimeText = this.startTime.substr(0,4)
this.getQuarterTime()
this.$emit('getQuery',this.startTime)
} else if (this.frequency == '3') { // 年频
this.startTimeText = 2020 -19; //获取完整的年份(4位)
this.endTimeText = 2020; //获取完整的年份(4位)
this.allTimeText = this.startTimeText + '-' + this.endTimeText
this.getYearTime()
this.timeList.shift()
this.$emit('getQuery',this.startTime)
} else if (this.frequency == '4') { // 周频
this.allTimeText = this.startTime.substr(0,4)
this.getWeekTime()
this.$emit('getQuery',this.startTime)
}else { // 没有
this.timeList = []
}
},
getItmeStyle() {
if (this.frequency == '0') {
this.startTimeText = this.startTimeText.substr(0,7)
this.endTimeText = this.endTimeText.substr(0,7)
if ( this.startTimeText == this.allTimeText) {
this.enventClass1 = 'enventStop'
if (this.startTimeText1.substr(8,2) >= 10){
this.timeStart = this.startTimeText1.substr(8,2)
} else {
this.timeStart = this.startTimeText1.substr(9,2)
}
this.timeList.forEach((res,index)=>{
if(res.time < this.timeStart){
res.itemStyle = {'color': 'rgb(192, 196, 204)','pointer-events': 'none'}
}else{
res.itemStyle = {}
}
})
} else {
this.enventClass1 = ''
this.itemStyle = {}
}
if (this.endTimeText == this.allTimeText) {
this.enventClass2 = 'enventStop'
if (this.endTimeText1.substr(8,2) >= 10){
this.timeEnd = this.endTimeText1.substr(8,2)
} else {
this.timeEnd = this.endTimeText1.substr(9,2)
}
this.timeList.forEach((res,index)=>{
if(res.time > this.timeEnd){
res.itemStyle = {'color': 'rgb(192, 196, 204)','pointer-events': 'none'}
}else{
res.itemStyle = {}
}
})
} else {
this.enventClass2 = ''
this.itemStyle = {}
}
} else if (this.frequency == '3') {
this.timeStart = this.startTimeText1
this.timeList.forEach((res,index)=>{
if(res.time < this.timeStart){
res.itemStyle = {'color': 'rgb(192, 196, 204)','pointer-events': 'none'}
if (this.startTimeText <= 1801) {
this.enventClass1 = 'enventStop'
}
}else{
res.itemStyle = {}
this.enventClass1 = ''
}
})
let currentYear = new Date().getFullYear()
if (this.endTimeText >= currentYear) {
this.enventClass2 = 'enventStop'
this.timeEnd = this.endTimeText1
this.timeList.forEach((res,index)=>{
if(res.time > this.timeEnd){
res.itemStyle = {'color': 'rgb(192, 196, 204)','pointer-events': 'none'}
}else{
res.itemStyle = {}
}
})
} else {
this.enventClass2 = ''
this.itemStyle = {}
}
} else {
this.startTimeText = this.startTimeText.substr(0,4)
this.endTimeText = this.endTimeText.substr(0,4)
if ( this.startTimeText == this.allTimeText) {
this.enventClass1 = 'enventStop'
if (this.startTimeText1.substr(5,2) >= 10){
this.timeStart = this.startTimeText1.substr(5,2)
} else {
this.timeStart = this.startTimeText1.substr(6,2)
}
this.timeList.forEach((res,index)=>{
if(res.time < this.timeStart){
res.itemStyle = {'color': 'rgb(192, 196, 204)','pointer-events': 'none'}
}else{
res.itemStyle = {}
}
})
} else {
this.enventClass1 = ''
this.itemStyle = {}
}
if (this.endTimeText == this.allTimeText) {
this.enventClass2 = 'enventStop'
if (this.endTimeText1.substr(5,2) >= 10){
this.timeEnd = this.endTimeText1.substr(5,2)
} else {
this.timeEnd = this.endTimeText1.substr(6,2)
}
this.timeList.forEach((res,index)=>{
if(res.time > this.timeEnd){
res.itemStyle = {'color': 'rgb(192, 196, 204)','pointer-events': 'none'}
}else{
res.itemStyle = {}
}
})
} else {
this.enventClass2 = ''
this.itemStyle = {}
}
}
},
//获取日
getDayTime() {
if(this.timeText == 1 || this.timeText == 3 || this.timeText == 5 || this.timeText == 7 || this.timeText == 8 || this.timeText == 10 || this.timeText == 12) {
this.timeList = [{time:1},{time:2},{time:3},{time:4},{time:5},{time:6},{time:7},{time:8},{time:9},{time:10},{time:11},{time:12},{time:13},{time:14},{time:15},{time:16},{time:17},{time:18},{time:19},{time:20},{time:21},{time:22},{time:23},{time:24},{time:25},{time:26},{time:27},{time:28},{time:29},{time:30},{time:31}]
} else if(this.timeText == 4 || this.timeText == 6 || this.timeText == 9 || this.timeText == 11) {
this.timeList = [{time:1},{time:2},{time:3},{time:4},{time:5},{time:6},{time:7},{time:8},{time:9},{time:10},{time:11},{time:12},{time:13},{time:14},{time:15},{time:16},{time:17},{time:18},{time:19},{time:20},{time:21},{time:22},{time:23},{time:24},{time:25},{time:26},{time:27},{time:28},{time:29},{time:30}]
} else {
if(this.year %4==0&& this.year %100!=0|| this.year %400==0){
this.timeList = [{time:1},{time:2},{time:3},{time:4},{time:5},{time:6},{time:7},{time:8},{time:9},{time:10},{time:11},{time:12},{time:13},{time:14},{time:15},{time:16},{time:17},{time:18},{time:19},{time:20},{time:21},{time:22},{time:23},{time:24},{time:25},{time:26},{time:27},{time:28}];
} else {
this.timeList = [{time:1},{time:2},{time:3},{time:4},{time:5},{time:6},{time:7},{time:8},{time:9},{time:10},{time:11},{time:12},{time:13},{time:14},{time:15},{time:16},{time:17},{time:18},{time:19},{time:20},{time:21},{time:22},{time:23},{time:24},{time:25},{time:26},{time:27},{time:28},{time:29}];
}
}
this.getItmeStyle()
},
//获取月
getMonthTime() {
this.timeList = [
{time:1},
{time:2},
{time:3},
{time:4},
{time:5},
{time:6},
{time:7},
{time:8},
{time:9},
{time:10},
{time:11},
{time:12}]
this.getItmeStyle()
},
//获取季度
getQuarterTime() {
this.timeList = [{time:3},{time:6},{time:9},{time:12}]
this.getItmeStyle()
},
//获取年度
getYearTime() {
for (let i = Number(this.startTimeText); i <= this.endTimeText; i++) {
this.timeList.push({ time : i })
}
this.getItmeStyle()
},
// 获取周
getWeekTime() {
this.timeList = [{time:1},{time:2},{time:3},{time:4},{time:5},{time:6},{time:7},{time:8},{time:9},{time:10},{time:11},{time:12},{time:13},{time:14},{time:15},{time:16},{time:17},{time:18},{time:19},{time:20},{time:21},{time:22},{time:23},{time:24},{time:25},{time:26},{time:27},{time:28},{time:29},{time:30},{time:31},{time:32},{time:33},{time:34},{time:35},{time:36},{time:37},{time:38},{time:39},{time:40},{time:41},{time:42},{time:43},{time:44},{time:45},{time:46},{time:47},{time:48},{time:49},{time:50},{time:51},{time:52},{time:53}]
this.getItmeStyle()
},
subtractTime() {
if(this.frequency == '0') { // 日频
this.timeText --
if (this.timeText >=10){
this.allTimeText = this.year + '-' + this.timeText
} else if(this.timeText < 10 && this.timeText >0 &&this.timeText != 0) {
this.allTimeText = this.year + '-0' + this.timeText
} else if (this.timeText <= 1 || this.timeText == 0){
this.timeText = 12
this.year = this.year -1
this.allTimeText = this.year + '-' + this.timeText
}
this.getDayTime()
} else if (this.frequency == '1') { // 月频
this.allTimeText --
this.getMonthTime()
} else if (this.frequency == '2') { // 季频
this.allTimeText --
this.getQuarterTime()
} else if (this.frequency == '3') { // 年频
this.timeList = []
this.startTimeText = this.startTimeText - 20
this.endTimeText = this.endTimeText -20
this.allTimeText = this.startTimeText + '-' + this.endTimeText
this.getYearTime()
} else if (this.frequency == '4') { // 周频
this.allTimeText --
this.getWeekTime()
}
},
addTime() {
// 日频
if(this.frequency == '0') {
if (this.timeText == 12){
this.timeText = 1
this.year = Number(this.year) + 1
this.allTimeText = this.year + '-0' + this.timeText
} else if (this.timeText >= 10 && this.timeText < 12) {
this.timeText ++
this.allTimeText = this.year + '-' + this.timeText
} else if (this.timeText < 10) {
this.timeText ++
if (this.timeText == 10){
this.allTimeText = this.year + '-' + this.timeText
} else {
this.allTimeText = this.year + '-0' + this.timeText
}
}
this.getDayTime()
} else if (this.frequency == '1') { // 月频
this.allTimeText ++
this.getMonthTime()
} else if (this.frequency == '2') { // 季频
this.allTimeText ++
this.getQuarterTime()
} else if (this.frequency == '3') { // 年频
this.timeList = []
this.startTimeText = this.startTimeText + 20
this.endTimeText = this.endTimeText + 20
this.allTimeText = this.startTimeText + '-' + this.endTimeText
this.getYearTime()
} else if (this.frequency == '4') { // 周频
this.allTimeText ++
this.getWeekTime()
}
},
selectTime(item) {
if (this.startTimeCopy) {
if(this.frequency == '0') {
if (item.time >= 10) {
this.startTimeCopy = this.allTimeText + '-' + item.time
} else {
this.startTimeCopy = this.allTimeText + '-0' + item.time
}
this.startTime = this.startTimeCopy
this.$emit('getQuery',this.startTimeCopy)
} else if (this.frequency == '1') {
if (item.time >= 10) {
this.startTimeCopy = this.allTimeText + '-' + item.time
} else {
this.startTimeCopy = this.allTimeText + '-0' + item.time
}
this.startTime = this.startTimeCopy
this.$emit('getQuery',this.startTimeCopy)
} else if (this.frequency == '2') {
if (item.time >= 10) {
this.startTimeCopy = this.allTimeText + '-' + item.time
} else {
this.startTimeCopy = this.allTimeText + '-0' + item.time
}
this.startTime = this.startTimeCopy
this.$emit('getQuery',this.startTimeCopy)
} else if (this.frequency == '3') {
this.startTimeCopy = item.time
this.startTime = this.startTimeCopy
this.$emit('getQuery',this.startTimeCopy)
} else if (this.frequency == '4') {
if (item.time >= 10) {
this.startTimeCopy = this.allTimeText + '-' + item.time
} else {
this.startTimeCopy = this.allTimeText + '-0' + item.time
}
this.startTime = this.startTimeCopy
this.$emit('getQuery',this.startTimeCopy)
}
}
},
isActive({time}){
if(this.startTimeCopy){
if(this.frequency == '0') {
if (time >= 10) {
time = this.allTimeText + '-' + time
} else {
time = this.allTimeText + '-0' + time
}
return Number(new Date(time)) == Number(new Date(this.startTimeCopy)) ? 'addClass' : ''
} else if (this.frequency == '1') {
if (time >= 10) {
time = this.allTimeText + '-' + time
} else {
time = this.allTimeText + '-0' + time
}
return Number(new Date(time)) == Number(new Date(this.startTimeCopy)) ? 'addClass' : ''
} else if (this.frequency == '2') {
if (time >= 10) {
time = this.allTimeText + '-' + time
} else {
time = this.allTimeText + '-0' + time
}
return Number(new Date(time)) == Number(new Date(this.startTimeCopy)) ? 'addClass' : ''
} else if (this.frequency == '3') {
return time == this.startTimeCopy ? 'addClass' : ''
} else if (this.frequency == '4') {
if (time >= 10) {
time = this.allTimeText + '-' + time
} else {
time = this.allTimeText + '-0' + time
}
return time == this.startTimeCopy ? 'addClass' : ''
}
}else {
return ''
}
}
},
}
</script>
<style lang="scss" scoped>
.timePopup {
width: 90%;
padding: 0 5%;
margin-top: 40rpx;
.timeShow {
background-color: #F7F7F8;
margin: 0rpx 0 44rpx;
display: flex;
align-items: center;
justify-content: space-between;
height: 130rpx;
border-radius: 10rpx;
.timeLeft {
width: 50%;
display: flex;
flex-direction: column;
align-items: center;
.topText {
font-size: 28rpx;
font-weight: 500;
color: #999999;
}
.bottomText {
font-size: 28rpx;
color: #3849B4;
font-weight: 500;
margin-top: 20rpx;
}
}
.line {
height: 80rpx;
width: 2rpx;
background-color: #D0D2D8;
}
}
.timeComponent {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 38rpx 38rpx;
.iconfont {
font-size: 30rpx;
color: #333333;
}
.enventStop {
color: rgb(192, 196, 204);
pointer-events: none;
}
.timeText {
font-size: 30rpx;
font-weight: 500;
color: #333333;
}
}
.timeList {
width: 100%;
// margin: auto 5%;
display: flex;
flex-wrap: wrap;
margin-bottom: 19rpx;
height: 240rpx;
overflow-y: scroll;
.itemTime {
font-size: 28rpx;
color: #666666;
padding: 0rpx 15rpx;
margin-bottom: 31rpx;
display: inline-block;
text-align: center;
line-height: 60rpx;
width: 80rpx;
height: 60rpx;
// &:nth-child(6n){
// padding-right: 0;
// }
}
.addClass {
background-color: #F1F2F4 ;
color: #3849B4;
font-weight: 500;
}
}
}
</style>
common.js文件代码：
// 模糊搜索直接展示列表
/**
* 使用test方法实现模糊查询
* @param {Array} list 原数组
* @param {String} keyWord 查询的关键词
* @return {Array} 查询的结果
*/
export const fuzzySearch = (list,keyWord)=>{
let arr = [];
if(list.length != 0 && keyWord){
let str = `\S*${keyWord}\S*`;
let reg = new RegExp(str,'i');//不区分大小写
for (var i = 0; i < list.length; i++) {
if (reg.test(list[i].value)) {
arr.push(list[i]);
}
}
}
return arr;
}
// 图表类方法处理
// 对传入值格式为大于等于10的正整数并记录10的乘幂
export function formatNumInteger (number) {
let power = 0
let num = number
let extra = 0
if (num >= 1) {
while (num >= 10) {
num /= 10
power += 1
}
} else {
power = -1
while (num < 0.1) {
num *= 10
power -= 1
}
}
let formatNumber = number
// 原本是小数
if (power < 0) {
formatNumber = number * Math.pow(10, Math.abs(power))
// 带有小数部分
}
if (formatNumber < 10) {
extra = 1
formatNumber = formatNumber * Math.pow(10, 1)
}
formatNumber = Math.ceil(formatNumber)
return {
formatNumber,
power,
extra
}
}
/** 计算获取轴刻度最大值最小值和间隔
* @param {Number} 分割成几个刻度
* @param {Number} 最大值(可能为负值)
* @param {Number} 负值或者0
*/
export function getMaxMinInterval (rangeCount, maxNumber, minNumber) {
// 如果最大值和最小值一样,不计算
maxNumber = maxNumber || 0
minNumber = minNumber || 0
if (maxNumber === minNumber) {
if (maxNumber === 0) {
return {
max: 0,
min: 0,
interval: 0
}
}
if (maxNumber >= 0) {
minNumber = 0
} else {
maxNumber = 0
}
}
let resultDelta = BigNumber(0)
let isFind = false
let flag = 1
let maxValue = maxNumber
let minValue = minNumber
/**
* 1. 最大值为正,最小值为0 flag:1
* 2. 最大值为正,最小值为正(此时同1) flag:1
* 3. 最大值为正,最小值为负 flag:2 // 多一个0刻度
* 4. 最大值为0,最小值为负 flag:3
* 5. 最大值为负,最小值为负 flag:3
*/
// 首先计算刻度总长度(先假定以0为起点)
if (minValue > 0) {
minValue = 0
} else if (minValue < 0) {
if (maxValue > 0) {
flag = 2
} else {
maxValue = 0
flag = 3
}
}
maxValue = BigNumber(maxValue)
minValue = BigNumber(minValue)
let valueDistance = maxValue.minus(minValue).toNumber()
valueDistance = Math.abs(valueDistance)
const reallyCount = rangeCount - 1
let { formatNumber, power, extra } = formatNumInteger(valueDistance)
formatNumber = BigNumber(formatNumber)
let delta = formatNumber.div(reallyCount)
let shift = Math.pow(10, power + extra - 1)
do {
for (let i = 0; i < 10; i += 0.05) {
resultDelta = BigNumber(i).times(shift).toFixed(1)
resultDelta = BigNumber(resultDelta)
if ([0, 1].includes(resultDelta.comparedTo(delta))) {
// 如果最大值为正,最小值为负(在0刻度两侧)
if (flag === 2) {
const tmp = formatNumber.div(valueDistance).div(resultDelta)
const gtInterval = Math.ceil(Math.abs(maxValue.times(tmp).toNumber()))
const ltInterval = Math.ceil(Math.abs(minValue.times(tmp).toNumber()))
if ((gtInterval + ltInterval) <= reallyCount) {
isFind = true
}
} else {
isFind = true
}
if (isFind) {
break
}
}
}
if (!isFind) {
shift *= 10
}
} while (!isFind)
// 计算间隔真实长度
valueDistance = Math.ceil(resultDelta.times(reallyCount).toNumber())
let res = getLengthInterval(valueDistance, reallyCount)
valueDistance = res.length
let interval = res.interval
// 当最大值/最小值都为正或负数是,拿最小值对比每一个刻度,找到最小刻度
let min = BigNumber(0)
if (flag !== 2) {
let minPowerNum = flag === 1 ? minNumber : Math.abs(maxNumber)
minPowerNum = BigNumber(minPowerNum).times(Math.pow(10, extra))
if (minPowerNum.comparedTo(interval) === 1) {
let i = 1
while (minPowerNum.comparedTo(interval.times(i + 1)) === 1) {
i++
}
min = interval.times(i)
res = getLengthInterval(interval.times(reallyCount - i).toNumber(), reallyCount)
interval = res.interval
valueDistance = min.plus(res.length)
}
}
// 原本是小数
if (power < 0) {
valueDistance = valueDistance.div(Math.pow(10, Math.abs(power) + extra))
interval = interval.div(Math.pow(10, Math.abs(power) + extra))
min = min.div(Math.pow(10, Math.abs(power) + extra))
// 小于10大于1
} else if (extra) {
valueDistance = BigNumber(valueDistance.div(Math.pow(10, extra)).toFixed(2))
interval = BigNumber(interval.div(Math.pow(10, extra)).toFixed(2))
min = BigNumber(min.div(Math.pow(10, extra)).toFixed(2))
}
// 计算生成的间隔长度
let max = valueDistance.toNumber()
min = min.toNumber()
interval = interval.toNumber()
// // 如果最小值是0,则直接根据正负计算最大值/间隔
if (flag === 2) {
// 计算最大值和最小值
let maxCount = Math.ceil(maxValue.div(interval))
let minCount = Math.ceil(Math.abs(minValue.div(interval).toNumber()))
if (maxCount + minCount < reallyCount) {
maxCount += Math.ceil((reallyCount - maxCount - minCount) / 2)
minCount = reallyCount - maxCount
}
max = BigNumber(maxCount).times(interval).toNumber()
min = BigNumber(0).minus(BigNumber(minCount).times(interval)).toNumber()
} else if (flag === 3) {
const tmp = -min
min = -max
max = tmp
}
return {
max,
min,
interval
}
}
// 获取一段长度均分刻度
function getLengthInterval (length, count) {
let surplus = 0
let interval = 0
if (length < count) {
surplus = count - length
let surplusPower = 1
while (surplus > 10) {
surplusPower + 1
surplus -= 10
}
length = BigNumber(length).times(Math.pow(10, surplusPower))
surplus = length.mod(count).toNumber()
if (surplus !== 0) {
length = length.plus(count).minus(surplus)
}
length = length.div(Math.pow(10, surplusPower))
interval = length.div(count)
} else {
length = BigNumber(length)
surplus = length.mod(count).toNumber()
if (surplus !== 0) {
length = length.plus(count).minus(surplus)
}
interval = length.div(count)
}
return {
length,
interval
}
}
// 处理最大值和最小值
export function handleMaxMinValue (data, infoObj) {
data = data || []
const effectiveValue = data.filter((val) => ![undefined, null, '', 'null'].includes(val))
if (effectiveValue.length) {
infoObj.max = Math.max(...effectiveValue, infoObj.max)
infoObj.min = Math.min(...effectiveValue, infoObj.min)
}
}
// 修正最大值和最小值
export function handleAmendInfoMaxMin (info) {
const { max, min } = info
info.max = max === -Infinity ? 0 : max
info.min = min === Infinity ? 0 : min
}
// 数值小数部分从有效数字算起保留指定位
/**
*
* @param {Number} num 需要处理的数值
* @param {Number} digits 小数部分从有效数字算起保留多少位
* @returns
*/
export function decimalFiexed (num, digits = 2) {
let res = num
if (typeof res !== 'number') {
res = Number(num)
}
if (Number.isNaN(res)) {
return num
}
const numArr = String(res).split('.')
if (numArr.length !== 1) {
const decimalArr = numArr[1].split('')
let index = 0
while (decimalArr[index] === '0') {
index++
if (decimalArr[index] !== '0') {
break
}
}
res = Number(res.toFixed(index + digits))
}
return res
}
// 获取图表Y轴label宽度
export function getLabelWidth (max, min, maxName, defaultWidth = 40) {
const maxLength = String(max).length
const minLength = String(min).length
const nameLength = computeStrOccupyLength(maxName) / 2
return Math.max(maxLength * 10, minLength * 10, nameLength * 12, defaultWidth)
}
/**
* 大数字转换，将大额数字转换为万、千万、亿等
* @param value 数字值
*/
export function bigNumberTransform(value_) {
let value = Math.abs(value_) //1
const newValue = ['', '', '']
let fr = 1000
let num = 3
let text1 = ''
let fm = 1
while (value / fr >= 1) {
fr *= 10
num += 1
}
if (num <= 4) { // 千
newValue[0] = value
// newValue[0] = parseInt(value / 1000) + ''
// newValue[1] = '千'
} else if (num <= 8) { // 万
text1 = parseInt(num - 4) / 3 > 1 ? '千万' : '万'
// tslint:disable-next-line:no-shadowed-variable
fm = text1 === '万' ? 10000 : 10000000
if (value % fm === 0) {
newValue[0] = parseInt(value / fm) + ''
} else {
newValue[0] = parseFloat(value / fm).toFixed(2) + ''
}
newValue[1] = text1
} else if (num <= 16) { // 亿
text1 = (num - 8) / 3 > 1 ? '千亿' : '亿'
text1 = (num - 8) / 4 > 1 ? '万亿' : text1
text1 = (num - 8) / 7 > 1 ? '千万亿' : text1
// tslint:disable-next-line:no-shadowed-variable
fm = 1
if (text1 === '亿') {
fm = 100000000
} else if (text1 === '千亿') {
fm = 100000000000
} else if (text1 === '万亿') {
fm = 1000000000000
} else if (text1 === '千万亿') {
fm = 1000000000000000
}
if (value % fm === 0) {
newValue[0] = parseInt(value / fm) + ''
} else {
newValue[0] = parseFloat(value / fm).toFixed(2) + ''
}
newValue[1] = text1
}
if (value < 1000) {
newValue[0] = value + ''
newValue[1] = ''
}
let text = newValue.join('')
if (value_ < 0) {
text = "-" + text
}
return text
}
// 数字格式化，每三位数字隔开一个逗号。如200,000
export function moneyFormat(num) {
if (num === undefined || num === null) {
return num
}
return (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
}
// 计算字符串占用长度
export function computeStrOccupyLength(str) {
let num = 0
str.split('').forEach((s) => {
if (/[0-9a-z]|[.?()-:/\\]|\s/.test(s)) {
num += 0.5
} else if (/[A-Z]/.test(s)) {
num += 0.7
} else {
num += 1
}
})
return num
}
const dayTime = 24 * 60 * 60 * 1000
const weekTime = 7 * dayTime
/**
* 转化季/周为年月日格式
* @param {String} frequency 频率2|4
* @param {String} dateString 格式化时间
* @returns {Array} 年/月/日格式开始/结束时间
*/
export function transformWeekQuarter(frequency, dateString) {
// 把季频和周频转为年月日格式
if (frequency === '2') {
const [year, season] = dateString.split('-')
const d = new Date(Date.UTC(year, Number(season) - 1))
return d.getUTCFullYear() + '/' + (d.getUTCMonth() + 1) + '/' + d.getUTCDate()
} else if (frequency === '4') {
const d = new Date(getTimeFromWeek(dateString))
return d.getUTCFullYear() + '/' + (d.getUTCMonth() + 1) + '/' + d.getUTCDate()
}
return dateString
}
/**
* 根据周数获取日期
* @param {String} timeStr 时间字符串:2021-11
* @param {Boolean} isLast 是否是周最后一天,false为第一天
* @returns {Number} 时间戳
*/
export function getTimeFromWeek(timeStr, isLast = true) {
let [year, week] = timeStr.split('-')
year = +year
week = +week
const first = isLast ? getFirstWeekLastDay(year) : Date.UTC(year, 0, 1)
let res = ((week - 1) * weekTime + first)
if (isLast) {
const yearLastDay = Date.UTC(year + 1, 0, 0)
if (res > yearLastDay) {
res = yearLastDay
}
}
return res
}
/**
* 获取第一周最后一天
* @param {Number|String} year
* @returns {Number} 时间戳
*/
export function getFirstWeekLastDay(year) {
// 当前年份第一天
let first = Date.UTC(year, 0, 1)
const day = new Date(first).getDay() || 7
// 证明第一周不是从周一开始
if (day > 1) {
first = Date.UTC(year, 0, 7 - day + 1)
} else {
first = Date.UTC(year, 0, 7)
}
return first
}
/**
* 计算两个日期时间相差的年数、月数、天数、小时数、分钟数、秒数
* dateDiff(开始时间,结束时间,[单位])，单位可以是 "y" 、"M"、"d"、"h"、"m"、"s"'
* console.log(dateDiff('2019-6-30 13:20:00', '2020-10-01 11:20:32', 's'))
*/
export const dateDiff = function(startTime, endTime, unit) {
// 判断当前月天数
function getDays(mouth, year) {
let days = 30
if (mouth === 2) {
days = year % 4 === 0 ? 29 : 28
} else if (mouth === 1 || mouth === 3 || mouth === 5 || mouth === 7 || mouth === 8 || mouth === 10 ||
mouth === 12) {
// 月份为：1,3,5,7,8,10,12 时，为大月.则天数为31；
days = 31
}
return days
}
const start = new Date(startTime)
const end = new Date(endTime)
// 计算时间戳的差
const diffValue = end - start
// 获取年
const startYear = start.getFullYear()
const endYear = end.getFullYear()
// 获取月
const startMouth = start.getMonth() + 1
const endMouth = end.getMonth() + 1
// 获取日
const startDay = start.getDate()
const endDay = end.getDate()
// 获取小时
const startHours = start.getHours()
const endHours = end.getHours()
// 获取分
const startMinutes = start.getMinutes()
const endMinutes = end.getMinutes()
// 获取秒
const startSeconds = start.getSeconds()
const endSeconds = end.getSeconds()
// 下方注释两行为调试用
// console.log('start:', startYear, startMouth, startDay, startHours, startMinutes, startSeconds)
// console.log('end:', endYear, endMouth, endDay, endHours, endMinutes, endSeconds)
if (unit === 'y' || unit === 'M') {
// 相差年份月份
const diffYear = endYear - startYear
// 获取当前月天数
const startDays = getDays(startMouth, startYear)
const endDays = getDays(endMouth, endYear)
const diffStartMouth = (startDays - (startDay + ((startHours * 60 + startMinutes + startSeconds / 60) / 60 /
24) - 1)) / startDays
const diffEndMouth = (endDay + ((endHours * 60 + endMinutes + endSeconds / 60) / 60 / 24) - 1) / endDays
const diffMouth = diffStartMouth + diffEndMouth + (12 - startMouth - 1) + endMouth + (diffYear - 1) * 12
if (unit === 'y') {
return Math.floor(diffMouth / 12 * 100) / 100
} else {
return diffMouth
}
} else if (unit === 'd') {
const d = parseInt(diffValue / 1000 / 60 / 60 / 24)
return d
} else if (unit === 'h') {
const h = parseInt(diffValue / 1000 / 60 / 60)
return h
} else if (unit === 'm') {
const m = parseInt(diffValue / 1000 / 60)
return m
} else if (unit === 's') {
const s = parseInt(diffValue / 1000)
return s
} else {
console.log('请输入正确的单位')
}
}
// 处理数据为table数据(方便前端生成xlsx下载)
/**
* @param {Array} columns 表格列名称
* @param {String} xName X轴名称
* @param {Array} xAxisData X轴数据
* @param {Object} seriesDataObj 图表系列中数据(即表格的Y轴数据)
*/
export function transfromToTableData(columns, xName, xAxisData, seriesDataObj) {
const tableData = []
const xAxisDataLength = xAxisData.length
const columnsLength = columns.length
for (let i = 0; i < xAxisDataLength; i++) {
const obj = {}
for (let j = 0; j < columnsLength; j++) {
const key = columns[j]
let value = key === xName ? xAxisData[i] : (seriesDataObj[key][i] != null ? bigNumberTransform(
seriesDataObj[key][i]) : seriesDataObj[key][i])
value = [null, undefined].includes(value) ? '' : value
obj[key] = value
}
tableData.push(obj)
}
return tableData
}
// 日期排序
export function dateSort(arr){
arr.sort(function(a,b){
// return a > b?1:-1; //升序排列
return a > b ? -1 : 1; //降序排列
})
return arr;
}
/**
*
* @param {Any} 需判断是否引用类型数据(简化版,目前数组/对象/map)
* @returns Boolean
*/
function isQuoteType (source) {
let flag = Object.prototype.toString.call(source).toLowerCase()
flag = (/\[object (\w+)\]/.exec(flag))[1]
const isQuote = ['object', 'array', 'map'].includes(flag)
return {
isQuote,
flag
}
}
/**
*
* @param {Any} source 需深度克隆的数据(简化版,目前递归数组/对象/map)
* @returns
*/
export function deepClone (source) {
const { isQuote, flag } = isQuoteType(source)
if (isQuote) {
const isMap = flag.includes('map')
const isObj = flag.includes('object')
const target = isMap ? new Map() : isObj ? {} : []
if (isObj) {
Object.keys(source).forEach((key) => {
if (isQuoteType(source[key])) {
target[key] = deepClone(source[key])
} else {
target[key] = source[key]
}
})
} else {
source.forEach((item, key) => {
if (isQuoteType(item)) {
if (isMap) {
target.set(key, deepClone(item))
} else {
target[key] = deepClone(item)
}
} else {
target[key] = item
}
})
}
return target
} else {
return source
}
}
705
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
