Merge branch 'master' of http://git.scdxtc.com/chen/flying-monkey
commit
eaeb85862c
|
|
@ -105,6 +105,7 @@ const request = (method, url, options) => {
|
|||
// 上传文件 封装请求
|
||||
const uploadFile = (url, options) => {
|
||||
let tempData = options || {}
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.uploadFile({
|
||||
url: `${uni.getStorageSync('hostapi')}${url}`,
|
||||
|
|
|
|||
127
pages.json
127
pages.json
|
|
@ -88,7 +88,7 @@
|
|||
"path": "pages/project/details",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationStyle": "custom" //禁用原生导航栏，微信小程序可用
|
||||
"navigationStyle": "custom" //禁用原生导航栏，微信小程序可用
|
||||
}
|
||||
|
||||
},
|
||||
|
|
@ -105,43 +105,110 @@
|
|||
"path": "pages/feedback/feedback",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationStyle": "custom", //禁用原生导航栏，微信小程序可用
|
||||
"navigationStyle": "custom", //禁用原生导航栏，微信小程序可用
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "pages/workOrder/workOrder",
|
||||
"style" :
|
||||
{
|
||||
}, {
|
||||
"path": "pages/workOrder/workOrder",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationStyle": "custom", //禁用原
|
||||
"navigationStyle": "custom", //禁用原
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "pages/workOrder/workorderTwo",
|
||||
"style" :
|
||||
{
|
||||
}, {
|
||||
"path": "pages/workOrder/workorderTwo",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationStyle": "custom", //禁用原生导航栏，微信小程序可用
|
||||
"navigationStyle": "custom", //禁用原生导航栏，微信小程序可用
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "pages/workOrder/workOrderLlsit",
|
||||
"style" :
|
||||
{
|
||||
}, {
|
||||
"path": "pages/workOrder/workOrderLlsit",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationStyle": "custom", //禁用原生导航栏，微信小程序可用
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}, {
|
||||
"path": "pages/workOrder/workOrderThree",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}, {
|
||||
"path": "pages/workOrder/details",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}, {
|
||||
"path": "pages/workOrder/payReturnVisit",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}, {
|
||||
"path": "pages/peopleManagement/peopleManagement",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}, {
|
||||
"path": "pages/mountingsList/mountingsList",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}, {
|
||||
"path": "pages/appreciationServe/appreciationServe",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}, {
|
||||
"path": "pages/dataQuery/dataQuery",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}, {
|
||||
"path": "pages/dataQuery/client",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
},
|
||||
{
|
||||
"path" : "pages/dataQuery/details",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
{
|
||||
"path": "pages/workOrder/pay-return-visit",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationStyle": "custom", //禁用原生导航栏，微信小程序可用
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "pages/workOrder/workOrderThree",
|
||||
"path" : "pages/dataQuery/projectQuery",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
|
|
@ -150,7 +217,7 @@
|
|||
|
||||
}
|
||||
,{
|
||||
"path" : "pages/workOrder/details",
|
||||
"path" : "pages/dataQuery/projectDetails",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
|
|
@ -159,7 +226,7 @@
|
|||
|
||||
}
|
||||
,{
|
||||
"path" : "pages/workOrder/pay-return-visit",
|
||||
"path" : "pages/dataQuery/queryFunction",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
|
|
@ -260,12 +327,12 @@
|
|||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarBackgroundColor": "#FFFFFF", //导航栏背景色
|
||||
"backgroundColor": "#FFFFFF" ,//窗口背景色
|
||||
"navigationStyle": "custom" ,//禁用原生导航栏，微信小程序可用
|
||||
"app-plus": {
|
||||
"titleNView": false, //禁用原生导航栏，APP和H5可用
|
||||
"bounce": "none",
|
||||
"scrollIndicator": "none"
|
||||
}
|
||||
"backgroundColor": "#FFFFFF", //窗口背景色
|
||||
"navigationStyle": "custom", //禁用原生导航栏，微信小程序可用
|
||||
"app-plus": {
|
||||
"titleNView": false, //禁用原生导航栏，APP和H5可用
|
||||
"bounce": "none",
|
||||
"scrollIndicator": "none"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,284 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<statusNav navBarTitle="增值服务"></statusNav>
|
||||
<view class="select-type">
|
||||
<view class="text">
|
||||
选择类型
|
||||
</view>
|
||||
<view class="type">
|
||||
<view class="li" @click="typeIndexFun(index)" :class="index==typeIndex?'on':''"
|
||||
v-for="(item,index) in typeData">
|
||||
{{item.title}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="appreciationServe-from">
|
||||
<view class="li">
|
||||
<view class="title">
|
||||
*产品名称
|
||||
</view>
|
||||
<input class="input" type="text" value="全彩LED显示屏" />
|
||||
</view>
|
||||
<view class="li">
|
||||
<view class="title">
|
||||
*规格型号
|
||||
</view>
|
||||
<input class="input" type="text" value="p2.5" />
|
||||
</view>
|
||||
<view class="li">
|
||||
<view class="title">
|
||||
产品品牌
|
||||
</view>
|
||||
<input class="input" type="text" value="" placeholder="请输入品牌" />
|
||||
</view>
|
||||
<view class="li">
|
||||
<view class="title">
|
||||
*产品尺寸
|
||||
</view>
|
||||
<input class="input" type="text" value="宽:38.5m x 高14.5m" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="supplementTitle">
|
||||
补充信息
|
||||
</view>
|
||||
<view class="supplement-from">
|
||||
<view class="li">
|
||||
<view class="title">
|
||||
*联系人
|
||||
</view>
|
||||
<input type="text" class="input" value="王富贵" />
|
||||
</view>
|
||||
<view class="li">
|
||||
<view class="">
|
||||
*联系电话
|
||||
</view>
|
||||
<input type="text" class="input" value="18256666666" />
|
||||
</view>
|
||||
<view class="li">
|
||||
<view class="">
|
||||
*预约时间
|
||||
</view>
|
||||
<input type="text" class="input" value="2022-02-16" />
|
||||
</view>
|
||||
<view class="li-textarea">
|
||||
<view class="title">
|
||||
*详细地址
|
||||
</view>
|
||||
<textarea class="textarea" value="湖南省株洲市荷塘区红旗中路456号五矿二十三冶综合楼" placeholder="" />
|
||||
</view>
|
||||
|
||||
<view class="scene-img">
|
||||
<view class="title">
|
||||
现场图片
|
||||
</view>
|
||||
<view class="img-content">
|
||||
<image class="img" src="../../static/del/微信图片_20220113152400.png" mode=""></image>
|
||||
<image class="img" src="../../static/del/微信图片_20220113152400.png" mode=""></image>
|
||||
</view>
|
||||
<view class="iocn-content">
|
||||
<image class="icon" src="../../static/iocn/jia.png" mode=""></image>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<button class="submit-button" type="default">确认提交</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import statusNav from '../../components/status-nav.vue';
|
||||
export default {
|
||||
components: {
|
||||
statusNav,
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
typeIndex: 0,
|
||||
typeData: [{
|
||||
title: '巡检',
|
||||
state: false
|
||||
},
|
||||
{
|
||||
title: '保养',
|
||||
state: false
|
||||
},
|
||||
{
|
||||
title: '移屏',
|
||||
state: false
|
||||
},
|
||||
{
|
||||
title: '拆屏',
|
||||
state: false
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
typeIndexFun(index) {
|
||||
this.typeIndex = index
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
padding-top: 80rpx;
|
||||
}
|
||||
|
||||
.select-type {
|
||||
display: flex;
|
||||
margin-top: 10rpx;
|
||||
height: 80rpx;
|
||||
background-color: #FFFFFF;
|
||||
align-items: center;
|
||||
padding: 0rpx 28rpx;
|
||||
}
|
||||
.submit-button {
|
||||
width: 686rpx;
|
||||
border-radius: 50rpx;
|
||||
height: 90rpx;
|
||||
background-color: #02A2ea;
|
||||
line-height: 90rpx;
|
||||
color: #FFFFFF;
|
||||
margin-top: 60rpx;
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.select-type .text {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
margin-right: 34rpx;
|
||||
}
|
||||
|
||||
.select-type .type {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.select-type .type .li {
|
||||
width: 106rpx;
|
||||
line-height: 44rpx;
|
||||
text-align: center;
|
||||
height: 44rpx;
|
||||
border-radius: 50rpx;
|
||||
font-size: 24rpx;
|
||||
border: solid 2rpx #99999b;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.select-type .type .on {
|
||||
background-color: #0051ff;
|
||||
border: none;
|
||||
color: #FFFFFF;
|
||||
box-shadow: 2rpx 2px 10rpx rgba(0, 81, 255, 0.5);
|
||||
}
|
||||
|
||||
.appreciationServe-from {
|
||||
padding: 0rpx 25rpx;
|
||||
background-color: #FFFFFF;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.appreciationServe-from .li {
|
||||
display: flex;
|
||||
height: 80rpx;
|
||||
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.appreciationServe-from .li .title {
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
margin-right: 28rpx;
|
||||
width: 118rpx;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
||||
.appreciationServe-from .li .input {
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.supplementTitle {
|
||||
padding: 20rpx 25rpx;
|
||||
font-size: 26rpx;
|
||||
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.supplement-from {
|
||||
background-color: #FFFFFF;
|
||||
padding: 0rpx 25rpx;
|
||||
}
|
||||
|
||||
.supplement-from .li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
height: 80rpx;
|
||||
font-size: 27rpx;
|
||||
border-bottom: 2rpx solid #f5f5f7;
|
||||
line-height: 27rpx;
|
||||
justify-content: space-between;
|
||||
color: #333333;
|
||||
}
|
||||
.supplement-from .li .input{
|
||||
text-align: right;
|
||||
}
|
||||
.supplement-from .li-textarea {
|
||||
font-size: 27rpx;
|
||||
line-height: 27rpx;
|
||||
justify-content: space-between;
|
||||
color: #333333;
|
||||
padding-bottom: 13rpx;
|
||||
}
|
||||
|
||||
.supplement-from .li-textarea .title{
|
||||
padding-top: 26rpx;
|
||||
padding-bottom: 17rpx;
|
||||
}
|
||||
.supplement-from .li-textarea .textarea{
|
||||
width: 100%;
|
||||
height: 127rpx;
|
||||
background-color: #F5F5F5;
|
||||
box-sizing: border-box;
|
||||
padding: 20rpx;
|
||||
font-size: 24rpx
|
||||
}
|
||||
.scene-img{
|
||||
display: flex;
|
||||
margin-top: 27rpx;
|
||||
padding-bottom: 30rpx;
|
||||
}
|
||||
.scene-img .title{
|
||||
margin-right: 28rpx;
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.scene-img .img-content .img{
|
||||
width: 170rpx;
|
||||
height: 130rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
.scene-img .iocn-content{
|
||||
width: 135rpx;
|
||||
height: 135rpx;
|
||||
background-color: #DCDCDC;
|
||||
display: flex;align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.scene-img .iocn-content .icon{
|
||||
|
||||
width: 62rpx;
|
||||
height: 62rpx;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<statusNav navBarTitle="客户(查询结果列表)"></statusNav>
|
||||
|
||||
<view class="client-content">
|
||||
<view class="li">
|
||||
<view class="li-content">
|
||||
<view class="">
|
||||
<view class="title">
|
||||
湖南争鸣光电科技有限公司
|
||||
</view>
|
||||
<view class="code">
|
||||
编号：KH20220304-002
|
||||
</view>
|
||||
<view class="label-content">
|
||||
<view class="label">
|
||||
弱电安防
|
||||
</view>
|
||||
<view class="label">
|
||||
弱电安防
|
||||
</view>
|
||||
<view class="label">
|
||||
弱电安防
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="icon">
|
||||
13
|
||||
</view>
|
||||
</view>
|
||||
<view class="address">
|
||||
<image class="img" src="../../static/iocn/dizi.png" mode=""></image>
|
||||
<view class="text">
|
||||
湖南省长沙市高新开发区谷园路109号像素大厦1205
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import statusNav from '../../components/status-nav.vue';
|
||||
export default {
|
||||
components: {
|
||||
statusNav
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
.content{
|
||||
padding-top: 80rpx;
|
||||
}
|
||||
.client-content .li{
|
||||
background-color: #FFFFFF;
|
||||
margin-top: 20rpx;
|
||||
padding: 30rpx 34rpx 30rpx 53rpx;
|
||||
}
|
||||
.client-content .li .title{
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
margin-bottom: 25rpx;
|
||||
}
|
||||
.client-content .li .code{
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 25rpx;
|
||||
color: #666666;
|
||||
}
|
||||
.client-content .li .label-content{
|
||||
display: flex;
|
||||
padding-bottom: 22rpx;
|
||||
}
|
||||
.client-content .li .label-content .label{
|
||||
padding: 10rpx 21rpx;
|
||||
background-color: #EDEDED;margin-right: 12rpx;
|
||||
color: #999999;
|
||||
font-size: 24rpx;
|
||||
border-radius: 5rpx;
|
||||
}
|
||||
.client-content .li .li-content{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 2rpx solid #EDEDED;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.client-content .li .li-content .icon{
|
||||
width: 71rpx;
|
||||
height: 66rpx;
|
||||
background-color: #00A2E9;
|
||||
box-shadow: -5rpx 5rpx 10rpx rgba(0,0,0,0.2);
|
||||
font-size: 36rpx;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.client-content .li .address{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 20rpx;
|
||||
color: #666666;
|
||||
font-size: 24rpx
|
||||
}
|
||||
.client-content .li .address .img{
|
||||
width: 17rpx;
|
||||
height: 24rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,132 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<statusNav navBarTitle="(备品)查询结果"></statusNav>
|
||||
<view class="dataQuery-content">
|
||||
<view class="li">
|
||||
<view class="title">
|
||||
项目名称：湖南工业大学生化学院三楼会议室
|
||||
</view>
|
||||
<view class="text-content">
|
||||
<view class="left">
|
||||
<view class="text">
|
||||
核心品牌：海康威视
|
||||
</view>
|
||||
<view class="text">
|
||||
规格型号：DS-CK18FI-H
|
||||
</view>
|
||||
<view class="text">
|
||||
批 次 号：2210122
|
||||
</view>
|
||||
</view>
|
||||
<view class="rigth">
|
||||
<view class="text">
|
||||
备品数量：<text class="cor">3张</text>
|
||||
</view>
|
||||
<view class="text cor1">
|
||||
备品尺寸：320*160
|
||||
</view>
|
||||
<view class="text cor1">
|
||||
入库时间：2021-04-06 16:45:45
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="icon" v-if="true">
|
||||
<text class="icon-text">正常</text>
|
||||
</view>
|
||||
<view class="icon1" v-else>
|
||||
<text class="icon-text">待维修</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import statusNav from '../../components/status-nav.vue';
|
||||
export default {
|
||||
components: {
|
||||
statusNav
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.content{
|
||||
padding-top: 80rpx;
|
||||
}
|
||||
.dataQuery-content {
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
margin-top: 15rpx;
|
||||
}
|
||||
.dataQuery-content .li{
|
||||
background-color: #FFFFFF;
|
||||
padding: 26rpx 28rpx;
|
||||
}
|
||||
|
||||
.dataQuery-content .li {
|
||||
position: relative;
|
||||
}
|
||||
.dataQuery-content .li .text-content{
|
||||
display: flex;
|
||||
|
||||
}
|
||||
.dataQuery-content .li .text-content .left{
|
||||
width: 48%;
|
||||
}
|
||||
.dataQuery-content .li .text-content .text{
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.cor{
|
||||
color: #ff9000;
|
||||
}
|
||||
.cor1{
|
||||
color: #999999;
|
||||
}
|
||||
.dataQuery-content .li .icon{
|
||||
background-image: url(../../static/iocn/zc.png);
|
||||
width: 125rpx;
|
||||
height: 91rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
background-size: 100%;
|
||||
padding-left:30rpx;
|
||||
right: 20rpx;
|
||||
top: 20rpx;
|
||||
position: absolute;
|
||||
}
|
||||
.dataQuery-content .li .icon .icon-text{
|
||||
transform: rotateZ(20deg);
|
||||
color: #53e5d0;
|
||||
|
||||
}
|
||||
|
||||
.dataQuery-content .li .icon1{
|
||||
background-image: url(../../static/iocn/dwx.png);
|
||||
width: 125rpx;
|
||||
height: 91rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
background-size: 100%;
|
||||
padding-left:30rpx;
|
||||
right: 20rpx;
|
||||
top: 20rpx;
|
||||
position: absolute;
|
||||
}
|
||||
.dataQuery-content .li .icon1 .icon-text{
|
||||
transform: rotateZ(20deg);
|
||||
color: #ff0006;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,331 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<statusNav navBarTitle="客户详情"></statusNav>
|
||||
|
||||
<view class="details-nav">
|
||||
<view class="li">
|
||||
<image class="icon" src="../../static/iocn/ty.png" mode=""></image>
|
||||
<view class="text">
|
||||
基本信息
|
||||
</view>
|
||||
</view>
|
||||
<view class="li">
|
||||
<image class="icon" src="../../static/iocn/kh.png" mode=""></image>
|
||||
<view class="text">
|
||||
联系人
|
||||
</view>
|
||||
</view>
|
||||
<view class="li">
|
||||
<image class="icon" src="../../static/iocn/xs.png" mode=""></image>
|
||||
<view class="text">
|
||||
项目列表
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="details-content">
|
||||
<view class="title">
|
||||
<image class="img" src="../../static/iocn/dn.png" mode=""></image>
|
||||
<text class="text">基本信息</text>
|
||||
</view>
|
||||
|
||||
<view class="text-content">
|
||||
<view class="li">
|
||||
客户名称：<text class="cor">长沙警校</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
客户编号：<text class="cor">xxxxxxxxx</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
客户等级：<text class="cor">VIP1</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
所属行业：<text class="cor">安防</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
客户类型：<text class="cor">xxxx</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
入库时间：<text class="cor">2022.3.1</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
项目数量：<text class="cor1">50</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
所属区域：<text class="cor">长沙</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
详细地址：<text class="cor">长沙xxxxx</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="details-content">
|
||||
<view class="title">
|
||||
<image class="img" src="../../static/iocn/lxr.png" mode=""></image>
|
||||
<text class="text">联系人</text>
|
||||
</view>
|
||||
|
||||
<view class="text-content">
|
||||
<view class="li">
|
||||
姓名：<text class="cor">Eveal</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
所属部门：<text class="cor">产品研发部</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
职务：<text class="cor">经理</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
电话：<text class="cor">154751787</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
微信：<text class="cor">14250</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
qq：<text class="cor">9090000</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
邮箱：<text class="cor1">1216311@qq.com</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
负责时间段：<text class="cor">xxxxx </text>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="project-list">
|
||||
<view class="title-content">
|
||||
<view class="title">
|
||||
<image class="icon" src="../../static/iocn/xmlb.png" mode=""></image>
|
||||
<view class="text">
|
||||
项目列表
|
||||
</view>
|
||||
</view>
|
||||
<picker mode="date" :value="time" @change="bindTimeChange">
|
||||
<view class="date">
|
||||
选择年份 <image class="icon" src="../../static/iocn/sjx.png" mode=""></image>
|
||||
</view>
|
||||
</picker>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="project-list-content">
|
||||
<view class="li">
|
||||
<view class="text">
|
||||
南城校区液晶显示屏
|
||||
</view>
|
||||
<view class="date">
|
||||
2022/3/1
|
||||
</view>
|
||||
</view>
|
||||
<view class="li">
|
||||
<view class="text">
|
||||
南城校区液晶显示屏
|
||||
</view>
|
||||
<view class="date">
|
||||
2022/3/1
|
||||
</view>
|
||||
</view>
|
||||
<view class="li">
|
||||
<view class="text">
|
||||
南城校区液晶显示屏
|
||||
</view>
|
||||
<view class="date">
|
||||
2022/3/1
|
||||
</view>
|
||||
</view>
|
||||
<view class="li">
|
||||
<view class="text">
|
||||
南城校区液晶显示屏
|
||||
</view>
|
||||
<view class="date">
|
||||
2022/3/1
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="contact-way">
|
||||
<view class="title">
|
||||
客户微信
|
||||
</view>
|
||||
<image class="icon" src="../../static/iocn/wx.png" mode=""></image>
|
||||
</view>
|
||||
<view class="contact-way">
|
||||
<view class="title">
|
||||
客户电话
|
||||
</view>
|
||||
<image class="icon1" src="../../static/iocn/dh.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import statusNav from '../../components/status-nav.vue';
|
||||
export default {
|
||||
components: {
|
||||
statusNav
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
time: '12:01'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
bindTimeChange() {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
padding-top: 80rpx;
|
||||
padding-right: 27rpx;
|
||||
padding-left: 27rpx;
|
||||
}
|
||||
|
||||
.details-nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 23rpx 63rpx;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.details-nav .li .icon {
|
||||
width: 79rpx;
|
||||
height: 79rpx;
|
||||
}
|
||||
|
||||
.details-nav .li {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.details-nav .li .text {
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.details-content {
|
||||
margin-top: 20rpx;
|
||||
background-color: #FFFFFF;
|
||||
padding: 20rpx 18rpx;
|
||||
border-bottom: 2rpx solid #DFDFDF;
|
||||
border-radius:0rpx 0rpx 10rpx 10rpx;
|
||||
}
|
||||
|
||||
.details-content .title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 15rpx;
|
||||
border-bottom: 2rpx solid #E5E5E5;
|
||||
}
|
||||
|
||||
.details-content .title .img {
|
||||
width: 27rpx;
|
||||
height: 26rpx;
|
||||
margin-right: 9rpx;
|
||||
}
|
||||
|
||||
.details-content .title .text {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
|
||||
}
|
||||
|
||||
.text-content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.text-content .li {
|
||||
width: 50%;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
margin-top: 22rpx;
|
||||
}
|
||||
|
||||
.cor {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.cor1 {
|
||||
color: #FF4C4C;
|
||||
}
|
||||
.project-list{
|
||||
background-color: #FFFFFF;
|
||||
padding: 22rpx 18rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.project-list .title-content{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 16rpx;
|
||||
font-size: 24rpx;
|
||||
border-bottom: 2rpx solid #E5E5E5;
|
||||
color: #999999;
|
||||
}
|
||||
.project-list .title-content .title{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.project-list .title-content .title .icon{
|
||||
width: 23rpx;
|
||||
height: 25rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
.project-list .title-content .date{
|
||||
width: 120rpx;
|
||||
height: 40rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 10rpx;
|
||||
border: 2rpx solid #999999;
|
||||
font-size: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.project-list .title-content .date .icon{
|
||||
width: 12rpx;
|
||||
height: 18rpx;
|
||||
margin-left: 5rpx;
|
||||
}
|
||||
.project-list-content .li{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 2rpx solid #E5E5E5;
|
||||
padding: 18rpx;
|
||||
}
|
||||
.project-list-content .li .text{
|
||||
font-weight: bold;
|
||||
color: #4ca5ff;
|
||||
font-size: 24rpx
|
||||
}
|
||||
.project-list-content .li .date{
|
||||
color: #888888;
|
||||
font-size: 24rpx
|
||||
}
|
||||
|
||||
.contact-way{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 40rpx 20rpx 34rpx;
|
||||
color: #696666;
|
||||
justify-content: space-between;
|
||||
font-size: 28rpx;
|
||||
border-bottom: 2rpx solid #E5E5E5;
|
||||
}
|
||||
|
||||
.contact-way .icon{
|
||||
width: 41rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
.contact-way .icon1{
|
||||
width: 35rpx;
|
||||
height: 39rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,671 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<statusNav navBarTitle="项目详情"></statusNav>
|
||||
<view class="details-head">
|
||||
<view class="swiper-head">
|
||||
<swiper class="swiper" @change="changeAutoplay" :autoplay="autoplay" :interval="interval"
|
||||
:duration="duration">
|
||||
<swiper-item>
|
||||
<view class="swiper-item uni-bg-red">
|
||||
<image class="img" src="../../static/del/项目图片.png" mode="aspectFill"></image>
|
||||
</view>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<view class="swiper-item uni-bg-red">
|
||||
<image class="img" src="../../static/del/项目图片.png" mode="aspectFill"></image>
|
||||
</view>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<view class="swiper-item uni-bg-red">
|
||||
<image class="img" src="../../static/del/项目图片.png" mode="aspectFill"></image>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<view class="indication-point ">
|
||||
{{index}}/3
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="title">
|
||||
湖南工业大学生化学院会议室P2.5全彩LED显示屏
|
||||
</view>
|
||||
<view class="code">
|
||||
XM20220108-1001
|
||||
</view>
|
||||
|
||||
<view class="address">
|
||||
<image class="img" src="../../static/iocn/im.png" mode=""></image>
|
||||
<view class="text">
|
||||
湖南省长沙市高新开发区谷园路109号像素大厦1205
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="last-date">
|
||||
<view class="last-date-content">
|
||||
<image class="icon" src="../../static/iocn/gzzt.png" mode=""></image>
|
||||
<view class="text">
|
||||
最近一次故障时间：2021-11-18 17：00：16
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="project-message-title">
|
||||
<view class="icon">
|
||||
|
||||
</view>
|
||||
<view class="text">
|
||||
项目概况
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="project-message-content">
|
||||
<view class="li">
|
||||
<view class="title-one">
|
||||
客户名称
|
||||
</view>
|
||||
<view class="text">
|
||||
：上海弘焱电子科技有限公司
|
||||
</view>
|
||||
</view>
|
||||
<view class="li">
|
||||
<view class="title-one">
|
||||
竣工日期
|
||||
</view>
|
||||
<view class="text">
|
||||
：2022/2/26
|
||||
</view>
|
||||
</view>
|
||||
<view class="li">
|
||||
<view class="title-one">
|
||||
质保年限
|
||||
</view>
|
||||
<view class="text">
|
||||
：1 年
|
||||
</view>
|
||||
</view>
|
||||
<view class="li">
|
||||
<view class="title-one">
|
||||
产品品类：
|
||||
</view>
|
||||
<view class="text">
|
||||
单色LED屏
|
||||
</view>
|
||||
</view>
|
||||
<view class="li">
|
||||
<view class="title-one">
|
||||
品牌
|
||||
</view>
|
||||
<view class="text">
|
||||
：海康威视
|
||||
</view>
|
||||
</view>
|
||||
<view class="li">
|
||||
<view class="title-one">
|
||||
|
||||
维保次数
|
||||
</view>
|
||||
<view class="text">
|
||||
：4 次
|
||||
</view>
|
||||
</view>
|
||||
<view class="li">
|
||||
<view class="title">
|
||||
规格型号
|
||||
</view>
|
||||
<view class="text">
|
||||
：DS-CK15FI
|
||||
</view>
|
||||
</view>
|
||||
<view class="li">
|
||||
<view class="title">
|
||||
尺寸
|
||||
</view>
|
||||
<view class="text">
|
||||
：4.57m*2.88m
|
||||
</view>
|
||||
</view>
|
||||
<view class="li">
|
||||
<view class="title">
|
||||
合同类型：
|
||||
</view>
|
||||
<view class="text">
|
||||
制作安装
|
||||
</view>
|
||||
</view>
|
||||
<view class="li">
|
||||
<view class="title">
|
||||
合同开始
|
||||
</view>
|
||||
<view class="text">
|
||||
： 2021/02/26
|
||||
</view>
|
||||
</view>
|
||||
<view class="li">
|
||||
<view class="title">
|
||||
合同结束
|
||||
</view>
|
||||
<view class="text">
|
||||
：2021/02/2
|
||||
</view>
|
||||
</view>
|
||||
<view class="li">
|
||||
<view class="title">
|
||||
应用场景 </view>
|
||||
<view class="text">
|
||||
：会议室
|
||||
</view>
|
||||
</view>
|
||||
<view class="li">
|
||||
<view class="title">
|
||||
安装位置
|
||||
|
||||
</view>
|
||||
<view class="text">
|
||||
：地下负二层总控电机室
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="project-message-title">
|
||||
<view class="icon">
|
||||
|
||||
</view>
|
||||
<view class="text">
|
||||
项目材料
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="project-materials-content">
|
||||
<view class="project-materials-title">
|
||||
<view class="text">
|
||||
名称
|
||||
</view>
|
||||
<view class="text">
|
||||
品牌
|
||||
</view>
|
||||
<view class="text">
|
||||
型号
|
||||
</view>
|
||||
<view class="text">
|
||||
批次
|
||||
</view>
|
||||
<view class="text">
|
||||
尺寸
|
||||
</view>
|
||||
<view class="text">
|
||||
数量
|
||||
</view>
|
||||
</view>
|
||||
<view class="project-materials-text">
|
||||
<view class="text">
|
||||
接收卡
|
||||
</view>
|
||||
<view class="text">
|
||||
卡莱特
|
||||
</view>
|
||||
<view class="text">
|
||||
5A-75E
|
||||
</view>
|
||||
<view class="text">
|
||||
1033876
|
||||
</view>
|
||||
<view class="text">
|
||||
*
|
||||
</view>
|
||||
<view class="text">
|
||||
1台
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="record-nav">
|
||||
<view class="li" @click="recordNav(index)" :class="item.state?'on':''" v-for="(item,index) in recordState">
|
||||
{{item.title}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="record-content">
|
||||
<view class="title">
|
||||
维修追踪
|
||||
</view>
|
||||
<view class="list">
|
||||
<view class="li on">
|
||||
<view class="icon">
|
||||
<view class="icon-con">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="con">
|
||||
<view class="text clips1">
|
||||
“黑屏”故障 【某某】已处理。
|
||||
</view>
|
||||
<view class="date">
|
||||
2020-05-15 16:00
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="li">
|
||||
<view class="icon">
|
||||
|
||||
</view>
|
||||
<view class="con">
|
||||
<view class="text clips1">
|
||||
“黑屏”故障 【某某】已处理。
|
||||
</view>
|
||||
<view class="date">
|
||||
2020-05-15 16:00
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="li">
|
||||
<view class="icon">
|
||||
|
||||
</view>
|
||||
<view class="con">
|
||||
<view class="text clips1">
|
||||
“黑屏”故障 【某某】已处理。
|
||||
</view>
|
||||
<view class="date">
|
||||
2020-05-15 16:00
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="li">
|
||||
<view class="icon">
|
||||
|
||||
</view>
|
||||
<view class="con">
|
||||
<view class="text clips1">
|
||||
“黑屏”故障 【某某】已处理。
|
||||
</view>
|
||||
<view class="date">
|
||||
2020-05-15 16:00
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="li">
|
||||
<view class="icon">
|
||||
|
||||
</view>
|
||||
<view class="con">
|
||||
<view class="text clips1">
|
||||
“黑屏”故障 【某某】已处理。
|
||||
</view>
|
||||
<view class="date">
|
||||
2020-05-15 16:00
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="li">
|
||||
<view class="icon">
|
||||
|
||||
</view>
|
||||
<view class="con">
|
||||
<view class="text">
|
||||
“黑屏”故障 【某某】已处理。
|
||||
</view>
|
||||
<view class="date">
|
||||
2020-05-15 16:00
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="li">
|
||||
<view class="icon">
|
||||
|
||||
</view>
|
||||
<view class="con">
|
||||
<view class="text clips1">
|
||||
“黑屏”故障 【某某】已处理。
|
||||
</view>
|
||||
<view class="date">
|
||||
2020-05-15 16:00
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import statusNav from "../../components/status-nav.vue"
|
||||
export default {
|
||||
components:{
|
||||
statusNav
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
autoplay: true,
|
||||
interval: 3000,
|
||||
index: 1,
|
||||
recordState: [{
|
||||
title: '维修记录',
|
||||
state: true
|
||||
},
|
||||
{
|
||||
title: '保养记录',
|
||||
state: false
|
||||
},
|
||||
{
|
||||
title: '巡检记录',
|
||||
state: false
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeAutoplay(data) {
|
||||
console.log()
|
||||
this.index = data.detail.current - 0 + 1
|
||||
},
|
||||
recordNav(index) {
|
||||
for (var i = 0; i < this.recordState.length; i++) {
|
||||
this.recordState[i].state = false
|
||||
}
|
||||
this.recordState[index].state = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background-color: #F7F7F7;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 16rpx 0;
|
||||
padding-top: 100rpx;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
width: 100%;
|
||||
height: 500rpx;
|
||||
}
|
||||
|
||||
.swiper .img {
|
||||
height: 500rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.details-head {
|
||||
width: 725rpx;
|
||||
margin: auto;
|
||||
padding: 24rpx 12rpx;
|
||||
box-sizing: border-box;
|
||||
height: 682rpx;
|
||||
background-color: #FFFFFF;
|
||||
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.swiper-head {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.indication-point {
|
||||
width: 102rpx;
|
||||
height: 46rpx;
|
||||
border-radius: 26rpx 0 0 0;
|
||||
right: 0px;
|
||||
bottom: 0rpx;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
background-color: #e64545;
|
||||
}
|
||||
|
||||
.details-head .title {
|
||||
font-size: 28rpx;
|
||||
padding: 13rpx 0rpx;
|
||||
}
|
||||
|
||||
.details-head .code {
|
||||
font-size: 24rpx;
|
||||
padding: 0rpx 0rpx 13rpx 0rpx;
|
||||
color: #ff8800;
|
||||
}
|
||||
|
||||
.address {
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.address .img {
|
||||
width: 18rpx;
|
||||
margin-right: 14rpx;
|
||||
height: 24rpx;
|
||||
}
|
||||
|
||||
.address .text {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.last-date {
|
||||
width: 100%;
|
||||
padding: 10rpx 13rpx 10rpx;
|
||||
box-shadow: 0rpx 5rpx 3rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.last-date-content {
|
||||
width: 100%;
|
||||
height: 57rpx;
|
||||
display: flex;
|
||||
padding-left: 20rpx;
|
||||
align-items: center;
|
||||
border-radius: 10rpx;
|
||||
background: linear-gradient(to right, #FFEBEB, #F7F7F7);
|
||||
}
|
||||
|
||||
.last-date-content .icon {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.last-date-content .text {
|
||||
font-size: 22rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.project-message-title {
|
||||
display: flex;
|
||||
padding: 0 33rpx;
|
||||
align-items: center;
|
||||
border-top:2rpx solid #ebebeb;
|
||||
border-bottom: 2rpx solid #ebebeb;
|
||||
padding-top: 23rpx;
|
||||
padding-bottom: 21rpx;
|
||||
}
|
||||
|
||||
.project-message-title .icon {
|
||||
width: 8rpx;
|
||||
height: 27rpx;
|
||||
margin-right: 15rpx;
|
||||
border-radius: 50rpx;
|
||||
background: linear-gradient(#00A2e9, #bbe6f9);
|
||||
}
|
||||
|
||||
.project-message-title .text {
|
||||
font-size: 13rpx
|
||||
}
|
||||
|
||||
.project-message-content {
|
||||
display: flex;
|
||||
box-shadow: 0rpx 5rpx 5rpx rgba(0, 0, 0, 0.1);
|
||||
padding: 30rpx 25rpx 0rpx;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 8rpx;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.project-message-content .title-one {
|
||||
color: #4d4c4c;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
}
|
||||
|
||||
.project-message-content .li {
|
||||
display: flex;
|
||||
margin-bottom: 31rpx;
|
||||
}
|
||||
|
||||
.project-message-content .title {
|
||||
color: #4d4c4c;
|
||||
font-weight: bold;
|
||||
font-size: 24rpx
|
||||
}
|
||||
|
||||
.project-message-content .text {
|
||||
color: #4d4c4c;
|
||||
font-size: 24rpx
|
||||
}
|
||||
|
||||
.record-nav {
|
||||
padding: 55rpx 50rpx 33rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 2rpx solid #D5D4D4;
|
||||
}
|
||||
|
||||
.record-nav .li {
|
||||
font-size: 24rpx;
|
||||
width: 128rpx;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.record-nav .on {
|
||||
color: #00b1ff;
|
||||
}
|
||||
|
||||
.record-nav .on::after {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 2rpx;
|
||||
position: absolute;
|
||||
background-color: #00B1FF;
|
||||
top: 65rpx;
|
||||
left: 0rpx;
|
||||
}
|
||||
|
||||
.record-content {
|
||||
margin-top: 33rpx;
|
||||
padding: 0 52rpx;
|
||||
}
|
||||
|
||||
.record-content .title {
|
||||
color: #333333;
|
||||
margin-left: 12rpx;
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 33rpx;
|
||||
}
|
||||
|
||||
.record-content .list .li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.record-content .list .li .icon {
|
||||
width: 14rpx;
|
||||
height: 14rpx;
|
||||
margin-right: 50rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #999999;
|
||||
margin-left: 5rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.record-content .list .li .icon::after {
|
||||
content: "";
|
||||
width: 1rpx;
|
||||
position: absolute;
|
||||
left: 7rpx;
|
||||
height: 102rpx;
|
||||
background-color: #999999;
|
||||
top: 14rpx;
|
||||
}
|
||||
|
||||
.record-content .list .li .con {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.record-content .list .on .icon {
|
||||
background-color: #5caefb;
|
||||
width: 21rpx;
|
||||
height: 21rpx;
|
||||
margin-left: 1rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.record-content .list .on .icon .icon-con{
|
||||
background-color: #0084ff;
|
||||
width: 13rpx;
|
||||
height: 13rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.record-content .list .on .icon::after {
|
||||
content: "";
|
||||
width: 1rpx;
|
||||
position: absolute;
|
||||
left: 9rpx;
|
||||
height: 186rpx;
|
||||
z-index: -1;
|
||||
background-color: #0084ff;
|
||||
top: 20rpx;
|
||||
}
|
||||
.record-content .list .on .con{
|
||||
display: block;
|
||||
color: #0084ff;
|
||||
}
|
||||
.record-content .list .on .con .text{
|
||||
margin-bottom: 35rpx;
|
||||
}
|
||||
.record-content .list .on .con .date{
|
||||
margin-bottom: 35rpx;
|
||||
}
|
||||
.record-content .list .on{
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.project-materials-title{
|
||||
display: flex;
|
||||
color: #00a2e9;
|
||||
font-size: 24rpx;
|
||||
border-bottom: 2rpx solid #EDEDED;
|
||||
|
||||
font-weight: bold;
|
||||
padding: 26rpx 20rpx;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.project-materials-title .text{
|
||||
width: 16%;
|
||||
text-align: center;
|
||||
}
|
||||
.project-materials-text{
|
||||
display: flex;
|
||||
border-bottom: 2rpx solid #EDEDED;
|
||||
padding: 26rpx 20rpx;
|
||||
font-size: 24rpx;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.project-materials-text .text{
|
||||
width: 16%;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,355 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<statusNav navBarTitle="(项目)查询结果"></statusNav>
|
||||
|
||||
<view class="project-list">
|
||||
<view class="li" @click="projectDetailsFun()">
|
||||
<view class="message">
|
||||
<image class="img" src="../../static/del/项目图片.png" mode="aspectFill"></image>
|
||||
|
||||
<view class="text">
|
||||
<view class="title">
|
||||
湖南工业大学化工学院会议室P2.5全彩LED显示屏
|
||||
</view>
|
||||
<view class="serial-number">
|
||||
项目编号：20220108-1001
|
||||
</view>
|
||||
<view class="specification">
|
||||
规格型号：DS-CK25FI/H
|
||||
</view>
|
||||
<view class="specification">
|
||||
产品尺寸：3.94ｍ*2.02ｍ
|
||||
</view>
|
||||
<view class="installation-site">
|
||||
安装位置：xxx综合楼2楼会议室
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="project-list-address">
|
||||
<view class="address">
|
||||
<image class="img" src="../../static/iocn/im.png" mode="aspectFill"></image>
|
||||
<view class="text">
|
||||
湖南省长沙市高新开发区谷园路109号像素大厦1205
|
||||
</view>
|
||||
</view>
|
||||
<view class="date">
|
||||
2022/01/08
|
||||
</view>
|
||||
</view>
|
||||
<view class="icon iconBer">
|
||||
质保到期
|
||||
</view>
|
||||
</view>
|
||||
<view class="li">
|
||||
<view class="message">
|
||||
<image class="img" src="../../static/del/项目图片.png" mode="aspectFill"></image>
|
||||
|
||||
<view class="text">
|
||||
<view class="title">
|
||||
湖南工业大学化工学院会议室P2.5全彩LED显示屏
|
||||
</view>
|
||||
<view class="serial-number">
|
||||
项目编号：20220108-1001
|
||||
</view>
|
||||
<view class="specification">
|
||||
规格型号：DS-CK25FI/H
|
||||
</view>
|
||||
<view class="specification">
|
||||
产品尺寸：3.94ｍ*2.02ｍ
|
||||
</view>
|
||||
<view class="installation-site">
|
||||
安装位置：xxx综合楼2楼会议室
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="project-list-address">
|
||||
<view class="address">
|
||||
<image class="img" src="../../static/iocn/im.png" mode="aspectFill"></image>
|
||||
<view class="text">
|
||||
湖南省长沙市高新开发区谷园路109号像素大厦1205
|
||||
</view>
|
||||
</view>
|
||||
<view class="date">
|
||||
2022/01/08
|
||||
</view>
|
||||
</view>
|
||||
<view class="icon iconBera">
|
||||
质保中
|
||||
</view>
|
||||
</view>
|
||||
<view class="li">
|
||||
<view class="message">
|
||||
<image class="img" src="../../static/del/项目图片.png" mode="aspectFill"></image>
|
||||
|
||||
<view class="text">
|
||||
<view class="title">
|
||||
湖南工业大学化工学院会议室P2.5全彩LED显示屏
|
||||
</view>
|
||||
<view class="serial-number">
|
||||
项目编号：20220108-1001
|
||||
</view>
|
||||
<view class="specification">
|
||||
规格型号：DS-CK25FI/H
|
||||
</view>
|
||||
<view class="specification">
|
||||
产品尺寸：3.94ｍ*2.02ｍ
|
||||
</view>
|
||||
<view class="installation-site">
|
||||
安装位置：xxx综合楼2楼会议室
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="project-list-address">
|
||||
<view class="address">
|
||||
<image class="img" src="../../static/iocn/im.png" mode="aspectFill"></image>
|
||||
<view class="text">
|
||||
湖南省长沙市高新开发区谷园路109号像素大厦1205
|
||||
</view>
|
||||
</view>
|
||||
<view class="date">
|
||||
2022/01/08
|
||||
</view>
|
||||
</view>
|
||||
<view class="icon iconBerb">
|
||||
临时项目
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<footTabOne :current="1"></footTabOne>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import statusNav from '../../components/status-nav.vue';
|
||||
import footTabOne from "../../components/foot-tabs/foot-tab-one.vue"
|
||||
export default {
|
||||
components:{
|
||||
footTabOne,
|
||||
statusNav
|
||||
},
|
||||
data() {
|
||||
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
projectDetailsFun(){
|
||||
uni.navigateTo({
|
||||
url:"/pages/project/details"
|
||||
})
|
||||
},
|
||||
bindPickerChange(data){
|
||||
console.log(data)
|
||||
},
|
||||
bindDateChange(date){
|
||||
console.log(date)
|
||||
},
|
||||
getDate(type) {
|
||||
const date = new Date();
|
||||
let year = date.getFullYear();
|
||||
let month = date.getMonth() + 1;
|
||||
let day = date.getDate();
|
||||
|
||||
if (type === 'start') {
|
||||
year = year - 60;
|
||||
} else if (type === 'end') {
|
||||
year = year + 2;
|
||||
}
|
||||
month = month > 9 ? month : '0' + month;
|
||||
day = day > 9 ? day : '0' + day;
|
||||
console.log(year,month,day)
|
||||
return `${year}-${month}-${day}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
page {
|
||||
background-color: #F7F7F7;
|
||||
}
|
||||
|
||||
.content{
|
||||
padding-top: 100rpx;
|
||||
}
|
||||
.project-list-input {
|
||||
width: 100%;
|
||||
height: 114rpx;
|
||||
position: relative;
|
||||
padding: 20rpx 16rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #FFFFFF
|
||||
}
|
||||
|
||||
.project-list-input .int {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #F7F7F7;
|
||||
padding: 0 25rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 36rpx;
|
||||
}
|
||||
|
||||
.project-list-input .search {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
position: absolute;
|
||||
right: 43rpx;
|
||||
top: 50%;
|
||||
margin-top: -14rpx;
|
||||
}
|
||||
|
||||
.screen {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 46rpx 20rpx;
|
||||
}
|
||||
|
||||
.screen .li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.screen .li .text {
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.screen .li .img {
|
||||
width: 14rpx;
|
||||
height: 8rpx;
|
||||
}
|
||||
|
||||
.screen .li .imgA {
|
||||
width: 24rpx;
|
||||
height: 23rpx;
|
||||
}
|
||||
|
||||
.project-list .li {
|
||||
width: 710rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #FFFFFF;
|
||||
position: relative;
|
||||
|
||||
margin: auto;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 33rpx 23rpx;
|
||||
}
|
||||
|
||||
.project-list .li .icon {
|
||||
width: 135rpx;
|
||||
height: 40rpx;
|
||||
position: absolute;
|
||||
font-size: 24rpx;
|
||||
color: #FFFFFF;
|
||||
right: 23rpx;
|
||||
line-height: 40rpx;
|
||||
text-align: center;
|
||||
background-size: 100% 100%;
|
||||
top: -10rpx;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.project-list .li .iconBer {
|
||||
background-image: url(../../static/iocn/za.png);
|
||||
}
|
||||
|
||||
.project-list .li .iconBera {
|
||||
background-image: url(../../static/iocn/zac.png);
|
||||
}
|
||||
.project-list .li .iconBerb {
|
||||
background-image: url(../../static/iocn/lsxm.png);
|
||||
}
|
||||
.project-list .li .message {
|
||||
display: flex;
|
||||
|
||||
}
|
||||
|
||||
.project-list .li .message .img {
|
||||
width: 230rpx;
|
||||
margin-right: 11rpx;
|
||||
height: 180rpx;
|
||||
|
||||
}
|
||||
|
||||
.project-list .li .message .text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.project-list .li .message .text .title {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
margin-bottom: 15rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 29rpx;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.project-list .li .message .serial-number {
|
||||
color: #ff8800;
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 15rpx;
|
||||
line-height: 24rpx;
|
||||
}
|
||||
|
||||
.project-list .li .message .specification {
|
||||
color: #00b1ff;
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 15rpx;
|
||||
line-height: 24rpx;
|
||||
}
|
||||
|
||||
.project-list .li .message .installation-site {
|
||||
color: #6b6a6a;
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 15rpx;
|
||||
line-height: 24rpx;
|
||||
}
|
||||
|
||||
.project-list-address {
|
||||
display: flex;
|
||||
/* justify-content: space-between; */
|
||||
}
|
||||
|
||||
.project-list-address .text {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.project-list-address .date {
|
||||
font-size: 24rpx;
|
||||
text-align: right;
|
||||
margin-left: 20rpx;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
|
||||
.project-list-address .img {
|
||||
width: 23rpx;
|
||||
height: 28rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.project-list-address .address {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.pickerDate {
|
||||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,193 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="head">
|
||||
<view class="text">
|
||||
查询功能
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="queryFunction-head-content">
|
||||
<view class="queryFunction-head-nav">
|
||||
<view class="li" @click="navIndex(index)" :class="[dataIndex==0?'li1':'',dataIndex==1?'li2':'',dataIndex==2?'li3':'' ]"
|
||||
|
||||
v-for="(item,index) in dataList">
|
||||
{{item.title}}
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="queryFunction-head-Fun">
|
||||
<input type="text" placeholder="请输入关键字查询" class="queryFunction-head-input" value="" />
|
||||
<view class="button">
|
||||
查询
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
<view class="recently-query-title">
|
||||
最后查询
|
||||
</view>
|
||||
|
||||
<view class="recently-query-content">
|
||||
<view class="li">
|
||||
<image class="icon" src="../../static/iocn/jfd.png" mode=""></image>
|
||||
<view class="text-content">
|
||||
<view class="title">
|
||||
湖南争鸣光电科技有限公司
|
||||
</view>
|
||||
<view class="text">
|
||||
编号：FRID23123141123321124
|
||||
</view>
|
||||
<view class="text">
|
||||
2121-1-8 12:23
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dataIndex:0,
|
||||
dataList:[
|
||||
{
|
||||
title:"客户查询",
|
||||
},
|
||||
{
|
||||
title:"项目查询",
|
||||
},
|
||||
{
|
||||
title:"备品查询",
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
navIndex(index){
|
||||
this.dataIndex=index
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.head{
|
||||
width: 100%;
|
||||
height: 344rpx;
|
||||
padding: 0 35rpx;
|
||||
padding-top: 107rpx;
|
||||
background-color: #00A2E9;
|
||||
box-sizing: border-box;
|
||||
|
||||
}
|
||||
|
||||
.head .text{
|
||||
font-size: 41rpx;color: #FFFFFF;
|
||||
}
|
||||
.queryFunction-head-content{
|
||||
width: 676rpx;
|
||||
height: 400rpx;
|
||||
background-color: #FFFFFF;
|
||||
margin: auto;
|
||||
border-radius: 15rpx;
|
||||
margin-top: -130rpx;
|
||||
}
|
||||
.queryFunction-head-nav{
|
||||
display: flex;
|
||||
border-radius: 15rpx 15rpx 0 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.queryFunction-head-nav .li{
|
||||
width: 233rpx;
|
||||
color: #505050;
|
||||
height: 102rpx;
|
||||
|
||||
background-color: #F5F5F5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 35rpx;
|
||||
justify-content: center;
|
||||
}
|
||||
.queryFunction-head-nav .li1:nth-child(2){
|
||||
border-radius: 15rpx 0rpx 0rpx 15rpx;
|
||||
}
|
||||
.queryFunction-head-nav .li1:nth-child(1){
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
.queryFunction-head-nav .li2:nth-child(2){
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
.queryFunction-head-nav .li2:nth-child(1){
|
||||
border-radius: 0rpx 15rpx 15rpx 0rpx;
|
||||
}
|
||||
.queryFunction-head-nav .li2:nth-child(3){
|
||||
border-radius: 15rpx 0rpx 0rpx 15rpx;
|
||||
}
|
||||
.queryFunction-head-nav .li3:nth-child(2){
|
||||
border-radius: 0rpx 15rpx 15rpx 0rpx;
|
||||
}
|
||||
.queryFunction-head-nav .li3:nth-child(3){
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
.queryFunction-head-input{
|
||||
height: 116rpx;
|
||||
width: 100%;
|
||||
border-bottom: 2rpx solid #eeeeee;
|
||||
|
||||
}
|
||||
.queryFunction-head-Fun{
|
||||
padding: 0 32rpx;
|
||||
|
||||
}
|
||||
|
||||
.queryFunction-head-Fun .button{
|
||||
background-color: #00A2E9;border-radius: 15rpx;
|
||||
height: 80rpx;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
margin-top: 34rpx;
|
||||
line-height: 80rpx;
|
||||
}
|
||||
|
||||
.recently-query-title {
|
||||
color: #040b26;
|
||||
font-weight: bold;
|
||||
padding: 50rpx 34rpx 44rpx;
|
||||
}
|
||||
.recently-query-content{
|
||||
padding: 0 34rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.recently-query-content .li{
|
||||
width: 100%;
|
||||
height: 232rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #FFFFFF;border-radius: 15rpx;
|
||||
padding-top: 30rpx;
|
||||
padding-left: 40rpx;
|
||||
margin-bottom: 37rpx;
|
||||
display: flex;
|
||||
}
|
||||
.recently-query-content .li .icon{
|
||||
width: 37rpx;
|
||||
height: 37rpx;
|
||||
margin-right: 40rpx;
|
||||
}
|
||||
.recently-query-content .li .text-content .title{
|
||||
color: #30364c;
|
||||
font-size: 33rpx;
|
||||
margin-bottom: 25rpx;
|
||||
}
|
||||
.recently-query-content .li .text-content .text{
|
||||
color: #b5b5b5;
|
||||
font-size: 27rpx;
|
||||
margin-bottom: 25rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,290 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<statusNav navBarTitle="配件列表"></statusNav>
|
||||
<view class="mountingsList-input">
|
||||
<input type="text" class="int" value="" placeholder="请输入关键字" />
|
||||
<image class="search" src="../../static/iocn/ss.png" mode=""></image>
|
||||
</view>
|
||||
|
||||
<view class="mountings-list">
|
||||
<view class="li" v-for="(item,index) in dataList">
|
||||
<view class="textCon">
|
||||
<view class="imgCon">
|
||||
<image src="../../static/del/接收卡-图片.png" class="img" mode="aspectFill"></image>
|
||||
</view>
|
||||
|
||||
<view class="text">
|
||||
<view class="title">
|
||||
<view class="">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<view class="ispitchOn" @click="ispitchOnFun(item)">
|
||||
<image v-if="item.isJob" src="../../static/iocn/pxz.png" class="icon1" mode=""></image>
|
||||
<view v-else class="icon">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="brand p">
|
||||
配件品牌：卡莱特
|
||||
</view>
|
||||
<view class="model p">
|
||||
规格型号：5A-75E
|
||||
</view>
|
||||
<view class="num p">
|
||||
|
||||
<view class="">
|
||||
已用数量：109张
|
||||
</view>
|
||||
<view class="numBtn">
|
||||
<view class="subtract" @click="subtractFun(item)">
|
||||
-
|
||||
</view>
|
||||
<view class="sum">
|
||||
{{item.num}}
|
||||
</view>
|
||||
<view class="add" @click="addFun(item)">
|
||||
+
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom">
|
||||
<view class="p">
|
||||
*请注意规格型号的选择，不同型号不同价格。
|
||||
</view>
|
||||
<view class="sum">
|
||||
费用合计：¥{{item.sum}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<button class="submit-button" type="default">确认提交</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import statusNav from '../../components/status-nav.vue';
|
||||
export default {
|
||||
components: {
|
||||
statusNav,
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataList: [{
|
||||
title: "全彩LED显示屏接收卡",
|
||||
state: true,
|
||||
isJob: true,
|
||||
num: 1,
|
||||
price: 2500,
|
||||
sum: 2500,
|
||||
},
|
||||
{
|
||||
title: "全彩LED显示屏接收卡",
|
||||
state: false,
|
||||
isJob: true,
|
||||
num: 1,
|
||||
price: 2500,
|
||||
sum: 2500,
|
||||
},
|
||||
{
|
||||
title: "全彩LED显示屏接收卡",
|
||||
state: true,
|
||||
num: 1,
|
||||
price: 2500,
|
||||
sum: 2500,
|
||||
isJob: false,
|
||||
},
|
||||
{
|
||||
title: "全彩LED显示屏接收卡",
|
||||
state: true,
|
||||
num: 1,
|
||||
price: 2500,
|
||||
sum: 2500,
|
||||
isJob: false,
|
||||
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
ispitchOnFun(item) {
|
||||
item.isJob = !item.isJob
|
||||
},
|
||||
subtractFun(item) {
|
||||
if (item.num >= 1) {
|
||||
item.num--
|
||||
item.sum = item.price * item.num
|
||||
}
|
||||
|
||||
},
|
||||
addFun(item) {
|
||||
item.num++
|
||||
item.sum = item.price * item.num
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
padding-top: 80rpx;
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
width: 686rpx;
|
||||
border-radius: 50rpx;
|
||||
height: 90rpx;
|
||||
background-color: #02A2ea;
|
||||
line-height: 90rpx;
|
||||
color: #FFFFFF;
|
||||
margin-top: 60rpx;
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.mountingsList-input {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
padding: 40rpx 16rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #FFFFFF
|
||||
}
|
||||
|
||||
.mountingsList-input .int {
|
||||
width: 100%;
|
||||
background-color: #F7F7F7;
|
||||
padding: 0 25rpx;
|
||||
height: 67rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 36rpx;
|
||||
}
|
||||
|
||||
.mountingsList-input .search {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
position: absolute;
|
||||
right: 43rpx;
|
||||
top: 50%;
|
||||
margin-top: -14rpx;
|
||||
}
|
||||
|
||||
.mountings-list .li {
|
||||
width: 680rpx;
|
||||
margin: auto;
|
||||
|
||||
margin-top: 20rpx;
|
||||
background-color: #FFFFFF;
|
||||
padding: 30rpx 20rpx 0rpx;
|
||||
}
|
||||
|
||||
.mountings-list .li .textCon {
|
||||
display: flex;
|
||||
border-bottom: 2rpx solid #F5F5F5;
|
||||
}
|
||||
|
||||
.mountings-list .li .imgCon {
|
||||
width: 217rpx;
|
||||
height: 137rpx;
|
||||
background-color: #CCCCCC;
|
||||
border-radius: 5rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 18rpx;
|
||||
}
|
||||
|
||||
.mountings-list .li .text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.mountings-list .li .imgCon .img {
|
||||
width: 169rpx;
|
||||
height: 104rpx;
|
||||
}
|
||||
|
||||
.mountings-list .li .title {
|
||||
font-weight: bold;
|
||||
font-size: 24rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.mountings-list .li .title .ispitchOn .icon {
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
border: 2rpx solid #CCCCCC;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.mountings-list .li .title .ispitchOn .icon1 {
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.mountings-list .li .text .p {
|
||||
color: #999999;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.mountings-list .li .text .num {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.mountings-list .li .text {
|
||||
padding-bottom: 22rpx;
|
||||
}
|
||||
|
||||
.numBtn {
|
||||
display: flex;
|
||||
|
||||
}
|
||||
|
||||
.numBtn .subtract {
|
||||
border: 2rpx solid #F5F5F5;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
line-height: 35rpx;
|
||||
font-size: 36rpx
|
||||
}
|
||||
|
||||
.numBtn .sum {
|
||||
color: #333333;
|
||||
padding: 0 15rpx;
|
||||
}
|
||||
|
||||
.numBtn .add {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
line-height: 35rpx;
|
||||
font-size: 35rpx;
|
||||
background-color: #f82a34;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.mountings-list .li .bottom {
|
||||
padding: 14rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.mountings-list .li .bottom .p {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.mountings-list .li .bottom .sum {
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,268 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<statusNav navBarTitle="人员状态"></statusNav>
|
||||
<view class="peopleManagement-input">
|
||||
<input type="text" class="int" value="" placeholder="请输入关键字" />
|
||||
<image class="search" src="../../static/iocn/ss.png" mode=""></image>
|
||||
</view>
|
||||
|
||||
<view class="peopleManagement-content">
|
||||
<view class="li" v-for="(item,index) in dataList">
|
||||
<view class="head">
|
||||
<view class="name" @click="listStateFun(item)">
|
||||
<view class="icon" v-if="item.state">
|
||||
|
||||
</view>
|
||||
<image class="iconImg" v-else src="../../static/iocn/pxz.png" mode=""></image>
|
||||
<view class="">
|
||||
{{item.title}}<text class="cor" v-if="item.isJob">(正在作业)</text>
|
||||
<text class="cor1" v-else>(空闲中)</text>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="state">
|
||||
已审核
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="con">
|
||||
<image class="img" src="../../static/del/500478055.png" mode=""></image>
|
||||
|
||||
<view class="text">
|
||||
<view class="code">
|
||||
<view class="">
|
||||
编号: YG20211207-001
|
||||
</view>
|
||||
<view class="iconCon">
|
||||
<view v-for="(item,index) in 5">
|
||||
<image class="icon" v-if="index==2" src="../../static/iocn/6.png" mode=""></image>
|
||||
<image class="icon" v-else src="../../static/iocn/7.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="p">
|
||||
<view class="">
|
||||
待处理：1单
|
||||
</view>
|
||||
|
||||
<view class="">
|
||||
已处理：1305单
|
||||
</view>
|
||||
</view>
|
||||
<view class="address">
|
||||
当前定位：湖南省株洲市xxxxxxxx小区1栋202室
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="bottom">
|
||||
<view class="">
|
||||
|
||||
联系电话： <text class="cor3">157xxxx8279</text>
|
||||
</view>
|
||||
<view class="">
|
||||
|
||||
注册时间： <text class="cor3">2018-12-12</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<button class="submit-button" type="default">派发工单</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import statusNav from '../../components/status-nav.vue';
|
||||
export default {
|
||||
components: {
|
||||
statusNav,
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataList: [{
|
||||
title: "陈志远",
|
||||
state: true,
|
||||
isJob: true,
|
||||
|
||||
},
|
||||
{
|
||||
title: "瓜皮",
|
||||
state: false,
|
||||
isJob: true,
|
||||
},
|
||||
{
|
||||
title: "瓜娃子",
|
||||
state: true,
|
||||
isJob: false,
|
||||
},
|
||||
{
|
||||
title: "憨批",
|
||||
state: true,
|
||||
isJob: false,
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
listStateFun(item){
|
||||
item.state=!item.state
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
padding-top: 80rpx;
|
||||
}
|
||||
.submit-button {
|
||||
width: 686rpx;
|
||||
border-radius: 50rpx;
|
||||
height: 90rpx;
|
||||
background-color: #02A2ea;
|
||||
line-height: 90rpx;
|
||||
color: #FFFFFF;
|
||||
margin-top: 60rpx;
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.peopleManagement-input {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
padding: 40rpx 16rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #FFFFFF
|
||||
}
|
||||
|
||||
.peopleManagement-input .int {
|
||||
width: 100%;
|
||||
background-color: #F7F7F7;
|
||||
padding: 0 25rpx;
|
||||
height: 67rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 36rpx;
|
||||
}
|
||||
|
||||
.peopleManagement-input .search {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
position: absolute;
|
||||
right: 43rpx;
|
||||
top: 50%;
|
||||
margin-top: -14rpx;
|
||||
}
|
||||
|
||||
.peopleManagement-content .li {
|
||||
background-color: #FFFFFF;
|
||||
padding-right: 30rpx;
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
|
||||
.peopleManagement-content .li .head {
|
||||
display: flex;
|
||||
padding: 22rpx 0rpx;
|
||||
padding-left: 40rpx;
|
||||
border-bottom: 2rpx solid #eaeaea;
|
||||
justify-content: space-between;
|
||||
padding-right: 30rpx;
|
||||
}
|
||||
|
||||
.peopleManagement-content .li .head .name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #333333;
|
||||
font-size: 27rpx;
|
||||
font-weight: bold;
|
||||
|
||||
}
|
||||
|
||||
.peopleManagement-content .li .head .name .icon {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
margin-right: 12rpx;
|
||||
border: solid #969696 2rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.peopleManagement-content .li .head .name .iconImg{
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
margin-right: 12rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.cor {
|
||||
color: #1c9bdb;
|
||||
}
|
||||
|
||||
.cor1 {
|
||||
color: #ff424d;
|
||||
}
|
||||
|
||||
.peopleManagement-content .li .head .state {
|
||||
color: #1c9bdb;
|
||||
font-size: 27rpx;
|
||||
}
|
||||
|
||||
.peopleManagement-content .li .con {
|
||||
padding: 20rpx 0rpx;
|
||||
padding-left: 52rpx;
|
||||
border-bottom: 2rpx solid #eaeaea;
|
||||
display: flex;
|
||||
|
||||
}
|
||||
|
||||
.peopleManagement-content .li .con .img {
|
||||
width: 186rpx;
|
||||
height: 124rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.peopleManagement-content .li .con .text {
|
||||
flex: 1;
|
||||
padding-right: 30rpx;
|
||||
}
|
||||
|
||||
.peopleManagement-content .li .con .text .iconCon {
|
||||
font-size: 0rpx;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.peopleManagement-content .li .con .text .icon {
|
||||
width: 24rpx;
|
||||
height: 21rpx;
|
||||
}
|
||||
|
||||
.peopleManagement-content .li .con .text .code {
|
||||
font-size: 24rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: #333333;
|
||||
}
|
||||
.peopleManagement-content .li .con .text .p{
|
||||
color: #7a7979;
|
||||
display: flex;
|
||||
font-size: 24rpx;
|
||||
padding: 22rpx 0rpx;
|
||||
}
|
||||
.peopleManagement-content .li .con .text .address{
|
||||
color: #7a7979;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.peopleManagement-content .li .bottom{
|
||||
display: flex;
|
||||
padding: 30rpx 0rpx;
|
||||
padding-left: 40rpx;
|
||||
color: #333333;
|
||||
font-size: 24rpx;
|
||||
display: flex;
|
||||
padding-right: 22rpx
|
||||
;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.peopleManagement-content .li .bottom .cor3{
|
||||
color: #666666;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
<statusNav navBarTitle="项目列表"></statusNav>
|
||||
<view class="project-list-input">
|
||||
<input type="text" class="int" value="" placeholder="请输入关键字" />
|
||||
<image class="search" src="../../static/ss.png" mode=""></image>
|
||||
<image class="search" src="../../static/iocn/ss.png" mode=""></image>
|
||||
</view>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,143 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<statusNav navBarTitle="工单回访"></statusNav>
|
||||
<view class="hint">
|
||||
客户服务，重在回访仔细倾听，以服务质量求发展
|
||||
</view>
|
||||
<view class="payReturnVisit-from">
|
||||
<view class="payReturnVisit-input">
|
||||
<view class="title">
|
||||
<text>联</text>
|
||||
<text>系</text>
|
||||
<text>人</text>
|
||||
</view>
|
||||
<input class="input" placeholder="请填写联系人称呼" type="text" value="" />
|
||||
</view>
|
||||
<view class="payReturnVisit-input">
|
||||
<view class="title">
|
||||
联系电话
|
||||
</view>
|
||||
<input class="input" placeholder="请输入手机号码" type="text" value="" />
|
||||
</view>
|
||||
<view class="payReturnVisit-input">
|
||||
<view class="title">
|
||||
<text>微</text>
|
||||
<text>信</text>
|
||||
<text>号</text>
|
||||
</view>
|
||||
<input class="input" placeholder="请输入微信号码" type="text" value="" />
|
||||
</view>
|
||||
|
||||
<view class="payReturnVisit-textarea">
|
||||
<view class="title">
|
||||
回访内容
|
||||
</view>
|
||||
<textarea class="textarea" value="" placeholder="请输入回访内容" />
|
||||
</view>
|
||||
<view class="payReturnVisit-input">
|
||||
<view class="title">
|
||||
客服电话
|
||||
</view>
|
||||
<input class="input" placeholder="400-765-9876" type="text" value="" />
|
||||
</view>
|
||||
<view class="payReturnVisit-input">
|
||||
<view class="title">
|
||||
联系电话
|
||||
</view>
|
||||
<input class="input" placeholder="2022/02/13 14:18:00" type="text" value="" />
|
||||
</view>
|
||||
</view>
|
||||
<button class="submit-button" type="default">确认发送</button>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import statusNav from '../../components/status-nav.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
statusNav,
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.content{
|
||||
padding-top: 80rpx;
|
||||
}
|
||||
.hint {
|
||||
color: #358ff0;
|
||||
font-size: 24rpx;
|
||||
padding: 25rpx 30rpx;
|
||||
}
|
||||
.submit-button {
|
||||
width: 686rpx;
|
||||
border-radius: 50rpx;
|
||||
height: 90rpx;
|
||||
background-color: #02A2ea;
|
||||
line-height: 90rpx;
|
||||
color: #FFFFFF;
|
||||
margin-top: 60rpx;
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.payReturnVisit-input {
|
||||
background-color: #FFFFFF;
|
||||
height: 103rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 700rpx;
|
||||
border-bottom: 2rpx solid #f4f4f4;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.payReturnVisit-input .title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
width: 120rpx;
|
||||
color: #333333;
|
||||
margin-right: 40rpx;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.payReturnVisit-input .input {
|
||||
flex: 1;
|
||||
font-size: 30rpx;
|
||||
margin-top: 2rpx;
|
||||
}
|
||||
.payReturnVisit-from{
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
.payReturnVisit-textarea{
|
||||
width: 700rpx;
|
||||
border-bottom: 2rpx solid #f4f4f4;
|
||||
margin: auto;
|
||||
padding-bottom: 30rpx;
|
||||
}
|
||||
.payReturnVisit-textarea .title{
|
||||
padding: 30rpx 0rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.payReturnVisit-textarea .textarea{
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
background-color: #F5F5F5;
|
||||
border-radius: 10rpx;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
<statusNav navBarTitle="工单列表"></statusNav>
|
||||
<view class="project-list-input">
|
||||
<input type="text" class="int" value="" placeholder="请输入关键字" />
|
||||
<image class="search" src="../../static/ss.png" mode=""></image>
|
||||
<image class="search" src="../../static/iocn/ss.png" mode=""></image>
|
||||
</view>
|
||||
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 456 B |
Binary file not shown.
|
After Width: | Height: | Size: 426 B |
Binary file not shown.
|
After Width: | Height: | Size: 589 B |
Binary file not shown.
|
After Width: | Height: | Size: 573 B |
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 290 B |
Binary file not shown.
|
After Width: | Height: | Size: 678 B |
Binary file not shown.
|
After Width: | Height: | Size: 951 B |
Binary file not shown.
|
After Width: | Height: | Size: 177 B |
|
Before Width: | Height: | Size: 714 B After Width: | Height: | Size: 714 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 854 B |
Binary file not shown.
|
After Width: | Height: | Size: 407 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 292 B |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
|
|
@ -0,0 +1,189 @@
|
|||
## 2.3.7-20220122（2022-01-22）
|
||||
## 重要！使用vue3编译，请使用cli模式并升级至最新依赖，HbuilderX编译需要使用3.3.8以上版本
|
||||
- uCharts.js 修复uni-app平台组件模式使用vue3编译到小程序报错的bug。
|
||||
## 2.3.7-20220118（2022-01-18）
|
||||
## 注意，使用vue3的前提是需要3.3.8.20220114-alpha版本的HBuilder！
|
||||
## 2.3.67-20220118（2022-01-18）
|
||||
- 秋云图表组件 组件初步支持vue3，全端编译会有些问题，具体详见下面修改：
|
||||
1. 小程序端运行时，在uni_modules文件夹的qiun-data-charts.js中搜索 new uni_modules_qiunDataCharts_js_sdk_uCharts_uCharts.uCharts，将.uCharts去掉。
|
||||
2. 小程序端发行时，在uni_modules文件夹的qiun-data-charts.js中搜索 new e.uCharts，将.uCharts去掉，变为 new e。
|
||||
3. 如果觉得上述步骤比较麻烦，如果您的项目只编译到小程序端，可以修改u-charts.js最后一行导出方式，将 export default uCharts;变更为 export default { uCharts: uCharts }; 这样变更后，H5和App端的renderjs会有问题，请开发者自行选择。（此问题非组件问题，请等待DC官方修复Vue3的小程序端）
|
||||
## 2.3.6-20220111（2022-01-11）
|
||||
- 秋云图表组件 修改组件 props 属性中的 background 默认值为 rgba(0,0,0,0)
|
||||
## 2.3.6-20211201（2021-12-01）
|
||||
- uCharts.js 修复bar条状图开启圆角模式时，值很小时圆角渲染错误的bug
|
||||
## 2.3.5-20211014（2021-10-15）
|
||||
- uCharts.js 增加vue3的编译支持（仅原生uCharts，qiun-data-charts组件后续会支持，请关注更新）
|
||||
## 2.3.4-20211012（2021-10-12）
|
||||
- 秋云图表组件 修复 mac os x 系统 mouseover 事件丢失的 bug
|
||||
## 2.3.3-20210706（2021-07-06）
|
||||
- uCharts.js 增加雷达图开启数据点值（opts.dataLabel）的显示
|
||||
## 2.3.2-20210627（2021-06-27）
|
||||
- 秋云图表组件 修复tooltipCustom个别情况下传值不正确报错TypeError: Cannot read property 'name' of undefined的bug
|
||||
## 2.3.1-20210616（2021-06-16）
|
||||
- uCharts.js 修复圆角柱状图使用4角圆角时，当数值过大时不正确的bug
|
||||
## 2.3.0-20210612（2021-06-12）
|
||||
- uCharts.js 【重要】uCharts增加nvue兼容，可在nvue项目中使用gcanvas组件渲染uCharts，[详见码云uCharts-demo-nvue](https://gitee.com/uCharts/uCharts)
|
||||
- 秋云图表组件 增加tapLegend属性，是否开启图例点击交互事件
|
||||
- 秋云图表组件 getIndex事件中增加返回uCharts实例中的opts参数，以便在页面中调用参数
|
||||
- 示例项目 pages/other/other.vue增加app端自定义tooltip的方法，详见showOptsTooltip方法
|
||||
## 2.2.1-20210603（2021-06-03）
|
||||
- uCharts.js 修复饼图、圆环图、玫瑰图，当起始角度不为0时，tooltip位置不准确的bug
|
||||
- uCharts.js 增加温度计式柱状图开启顶部半圆形的配置
|
||||
## 2.2.0-20210529（2021-05-29）
|
||||
- uCharts.js 增加条状图type="bar"
|
||||
- 示例项目 pages/ucharts/ucharts.vue增加条状图的demo
|
||||
## 2.1.7-20210524（2021-05-24）
|
||||
- uCharts.js 修复大数据量模式下曲线图不平滑的bug
|
||||
## 2.1.6-20210523（2021-05-23）
|
||||
- 秋云图表组件 修复小程序端开启滚动条更新数据后滚动条位置不符合预期的bug
|
||||
## 2.1.5-2021051702（2021-05-17）
|
||||
- uCharts.js 修复自定义Y轴min和max值为0时不能正确显示的bug
|
||||
## 2.1.5-20210517（2021-05-17）
|
||||
- uCharts.js 修复Y轴自定义min和max时，未按指定的最大值最小值显示坐标轴刻度的bug
|
||||
## 2.1.4-20210516（2021-05-16）
|
||||
- 秋云图表组件 优化onWindowResize防抖方法
|
||||
- 秋云图表组件 修复APP端uCharts更新数据时，清空series显示loading图标后再显示图表，图表抖动的bug
|
||||
- uCharts.js 修复开启canvas2d后，x轴、y轴、series自定义字体大小未按比例缩放的bug
|
||||
- 示例项目 修复format-e.vue拼写错误导致app端使用uCharts渲染图表
|
||||
## 2.1.3-20210513（2021-05-13）
|
||||
- 秋云图表组件 修改uCharts变更chartData数据为updateData方法，支持带滚动条的数据动态打点
|
||||
- 秋云图表组件 增加onWindowResize防抖方法 fix by ど誓言，如尘般染指流年づ
|
||||
- 秋云图表组件 H5或者APP变更chartData数据显示loading图表时，原数据闪现的bug
|
||||
- 秋云图表组件 props增加errorReload禁用错误点击重新加载的方法
|
||||
- uCharts.js 增加tooltip显示category（x轴对应点位）标题的功能，opts.extra.tooltip.showCategory，默认为false
|
||||
- uCharts.js 修复mix混合图只有柱状图时，tooltip的分割线显示位置不正确的bug
|
||||
- uCharts.js 修复开启滚动条，图表在拖动中动态打点，滚动条位置不正确的bug
|
||||
- uCharts.js 修复饼图类数据格式为echarts数据格式，series为空数组报错的bug
|
||||
- 示例项目 修改uCharts.js更新到v2.1.2版本后，@getIndex方法获取索引值变更为e.currentIndex.index
|
||||
- 示例项目 pages/updata/updata.vue增加滚动条拖动更新（数据动态打点）的demo
|
||||
- 示例项目 pages/other/other.vue增加errorReload禁用错误点击重新加载的demo
|
||||
## 2.1.2-20210509（2021-05-09）
|
||||
秋云图表组件 修复APP端初始化时就传入chartData或lacaldata不显示图表的bug
|
||||
## 2.1.1-20210509（2021-05-09）
|
||||
- 秋云图表组件 变更ECharts的eopts配置在renderjs内执行，支持在config-echarts.js配置文件内写function配置。
|
||||
- 秋云图表组件 修复APP端报错Prop being mutated: "onmouse"错误的bug。
|
||||
- 秋云图表组件 修复APP端报错Error: Not Found：Page[6][-1,27] at view.umd.min.js:1的bug。
|
||||
## 2.1.0-20210507（2021-05-07）
|
||||
- 秋云图表组件 修复初始化时就有数据或者数据更新的时候loading加载动画闪动的bug
|
||||
- uCharts.js 修复x轴format方法categories为字符串类型时返回NaN的bug
|
||||
- uCharts.js 修复series.textColor、legend.fontColor未执行全局默认颜色的bug
|
||||
## 2.1.0-20210506（2021-05-06）
|
||||
- 秋云图表组件 修复极个别情况下报错item.properties undefined的bug
|
||||
- 秋云图表组件 修复极个别情况下关闭加载动画reshow不起作用，无法显示图表的bug
|
||||
- 示例项目 pages/ucharts/ucharts.vue 增加时间轴折线图（type="tline"）、时间轴区域图（type="tarea"）、散点图（type="scatter"）、气泡图demo（type="bubble"）、倒三角形漏斗图（opts.extra.funnel.type="triangle"）、金字塔形漏斗图（opts.extra.funnel.type="pyramid"）
|
||||
- 示例项目 pages/format-u/format-u.vue 增加X轴format格式化示例
|
||||
- uCharts.js 升级至v2.1.0版本
|
||||
- uCharts.js 修复 玫瑰图面积模式点击tooltip位置不正确的bug
|
||||
- uCharts.js 修复 玫瑰图点击图例，只剩一个类别显示空白的bug
|
||||
- uCharts.js 修复 饼图类图点击图例，其他图表tooltip位置某些情况下不准的bug
|
||||
- uCharts.js 修复 x轴为矢量轴（时间轴）情况下，点击tooltip位置不正确的bug
|
||||
- uCharts.js 修复 词云图获取点击索引偶尔不准的bug
|
||||
- uCharts.js 增加 直角坐标系图表X轴format格式化方法（原生uCharts.js用法请使用formatter）
|
||||
- uCharts.js 增加 漏斗图扩展配置，倒三角形（opts.extra.funnel.type="triangle"），金字塔形（opts.extra.funnel.type="pyramid"）
|
||||
- uCharts.js 增加 散点图（opts.type="scatter"）、气泡图（opts.type="bubble"）
|
||||
- 后期计划 完善散点图、气泡图，增加markPoints标记点，增加横向条状图。
|
||||
## 2.0.0-20210502（2021-05-02）
|
||||
- uCharts.js 修复词云图获取点击索引不正确的bug
|
||||
## 2.0.0-20210501（2021-05-01）
|
||||
- 秋云图表组件 修复QQ小程序、百度小程序在关闭动画效果情况下，v-for循环使用图表，显示不正确的bug
|
||||
## 2.0.0-20210426（2021-04-26）
|
||||
- 秋云图表组件 修复QQ小程序不支持canvas2d的bug
|
||||
- 秋云图表组件 修复钉钉小程序某些情况点击坐标计算错误的bug
|
||||
- uCharts.js 增加 extra.column.categoryGap 参数，柱状图类每个category点位（X轴点）柱子组之间的间距
|
||||
- uCharts.js 增加 yAxis.data[i].titleOffsetY 参数，标题纵向偏移距离，负数为向上偏移，正数向下偏移
|
||||
- uCharts.js 增加 yAxis.data[i].titleOffsetX 参数，标题横向偏移距离，负数为向左偏移，正数向右偏移
|
||||
- uCharts.js 增加 extra.gauge.labelOffset 参数，仪表盘标签文字径向便宜距离，默认13px
|
||||
## 2.0.0-20210422-2（2021-04-22）
|
||||
秋云图表组件 修复 formatterAssign 未判断 args[key] == null 的情况导致栈溢出的 bug
|
||||
## 2.0.0-20210422（2021-04-22）
|
||||
- 秋云图表组件 修复H5、APP、支付宝小程序、微信小程序canvas2d模式下横屏模式的bug
|
||||
## 2.0.0-20210421（2021-04-21）
|
||||
- uCharts.js 修复多行图例的情况下，图例在上方或者下方时，图例float为左侧或者右侧时，第二行及以后的图例对齐方式不正确的bug
|
||||
## 2.0.0-20210420（2021-04-20）
|
||||
- 秋云图表组件 修复微信小程序开启canvas2d模式后，windows版微信小程序不支持canvas2d模式的bug
|
||||
- 秋云图表组件 修改非uni_modules版本为v2.0版本qiun-data-charts组件
|
||||
## 2.0.0-20210419（2021-04-19）
|
||||
## v1.0版本已停更，建议转uni_modules版本组件方式调用，点击右侧绿色【使用HBuilderX导入插件】即可使用，示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
|
||||
## 初次使用如果提示未注册<qiun-data-charts>组件，请重启HBuilderX，如仍不好用，请重启电脑；
|
||||
## 如果是cli项目，请尝试清理node_modules，重新install，还不行就删除项目，再重新install。
|
||||
## 此问题已于DCloud官方确认，HBuilderX下个版本会修复。
|
||||
## 其他图表不显示问题详见[常见问题选项卡](https://demo.ucharts.cn)
|
||||
## <font color=#FF0000> 新手请先完整阅读帮助文档及常见问题3遍，右侧蓝色按钮示例项目请看2遍！ </font>
|
||||
## [DEMO演示及在线生成工具（v2.0文档）https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||
## [图表组件在项目中的应用参见 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||
- uCharts.js 修复混合图中柱状图单独设置颜色不生效的bug
|
||||
- uCharts.js 修复多Y轴单独设置fontSize时，开启canvas2d后，未对应放大字体的bug
|
||||
## 2.0.0-20210418（2021-04-18）
|
||||
- 秋云图表组件 增加directory配置，修复H5端history模式下如果发布到二级目录无法正确加载echarts.min.js的bug
|
||||
## 2.0.0-20210416（2021-04-16）
|
||||
## v1.0版本已停更，建议转uni_modules版本组件方式调用，点击右侧绿色【使用HBuilderX导入插件】即可使用，示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
|
||||
## 初次使用如果提示未注册<qiun-data-charts>组件，请重启HBuilderX，如仍不好用，请重启电脑；
|
||||
## 如果是cli项目，请尝试清理node_modules，重新install，还不行就删除项目，再重新install。
|
||||
## 此问题已于DCloud官方确认，HBuilderX下个版本会修复。
|
||||
## 其他图表不显示问题详见[常见问题选项卡](https://demo.ucharts.cn)
|
||||
## <font color=#FF0000> 新手请先完整阅读帮助文档及常见问题3遍，右侧蓝色按钮示例项目请看2遍！ </font>
|
||||
## [DEMO演示及在线生成工具（v2.0文档）https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||
## [图表组件在项目中的应用参见 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||
- 秋云图表组件 修复APP端某些情况下报错`Not Found Page`的bug，fix by 高级bug开发技术员
|
||||
- 示例项目 修复APP端v-for循环某些情况下报错`Not Found Page`的bug，fix by 高级bug开发技术员
|
||||
- uCharts.js 修复非直角坐标系tooltip提示窗右侧超出未变换方向显示的bug
|
||||
## 2.0.0-20210415（2021-04-15）
|
||||
- 秋云图表组件 修复H5端发布到二级目录下echarts无法加载的bug
|
||||
- 秋云图表组件 修复某些情况下echarts.off('finished')移除监听事件报错的bug
|
||||
## 2.0.0-20210414（2021-04-14）
|
||||
## v1.0版本已停更，建议转uni_modules版本组件方式调用，点击右侧绿色【使用HBuilderX导入插件】即可使用，示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
|
||||
## 初次使用如果提示未注册<qiun-data-charts>组件，请重启HBuilderX，如仍不好用，请重启电脑；
|
||||
## 如果是cli项目，请尝试清理node_modules，重新install，还不行就删除项目，再重新install。
|
||||
## 此问题已于DCloud官方确认，HBuilderX下个版本会修复。
|
||||
## 其他图表不显示问题详见[常见问题选项卡](https://demo.ucharts.cn)
|
||||
## <font color=#FF0000> 新手请先完整阅读帮助文档及常见问题3遍，右侧蓝色按钮示例项目请看2遍！ </font>
|
||||
## [DEMO演示及在线生成工具（v2.0文档）https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||
## [图表组件在项目中的应用参见 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||
- 秋云图表组件 修复H5端在cli项目下ECharts引用地址错误的bug
|
||||
- 示例项目 增加ECharts的formatter用法的示例(详见示例项目format-e.vue)
|
||||
- uCharts.js 增加圆环图中心背景色的配置extra.ring.centerColor
|
||||
- uCharts.js 修复微信小程序安卓端柱状图开启透明色后显示不正确的bug
|
||||
## 2.0.0-20210413（2021-04-13）
|
||||
- 秋云图表组件 修复百度小程序多个图表真机未能正确获取根元素dom尺寸的bug
|
||||
- 秋云图表组件 修复百度小程序横屏模式方向不正确的bug
|
||||
- 秋云图表组件 修改ontouch时，@getTouchStart@getTouchMove@getTouchEnd的触发条件
|
||||
- uCharts.js 修复饼图类数据格式series属性不生效的bug
|
||||
- uCharts.js 增加时序区域图 详见示例项目中ucharts.vue
|
||||
## 2.0.0-20210412-2（2021-04-12）
|
||||
## v1.0版本已停更，建议转uni_modules版本组件方式调用，点击右侧绿色【使用HBuilderX导入插件】即可使用，示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
|
||||
## 初次使用如果提示未注册<qiun-data-charts>组件，请重启HBuilderX。如仍不好用，请重启电脑，此问题已于DCloud官方确认，HBuilderX下个版本会修复。
|
||||
## [DEMO演示及在线生成工具（v2.0文档）https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||
## [图表组件在uniCloudAdmin中的应用 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||
- 秋云图表组件 修复uCharts在APP端横屏模式下不能正确渲染的bug
|
||||
- 示例项目 增加ECharts柱状图渐变色、圆角柱状图、横向柱状图（条状图）的示例
|
||||
## 2.0.0-20210412（2021-04-12）
|
||||
- 秋云图表组件 修复created中判断echarts导致APP端无法识别，改回mounted中判断echarts初始化
|
||||
- uCharts.js 修复2d模式下series.textOffset未乘像素比的bug
|
||||
## 2.0.0-20210411（2021-04-11）
|
||||
## v1.0版本已停更，建议转uni_modules版本组件方式调用，点击右侧绿色【使用HBuilderX导入插件】即可使用，示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
|
||||
## 初次使用如果提示未注册<qiun-data-charts>组件，请重启HBuilderX，并清空小程序开发者工具缓存。
|
||||
## [DEMO演示及在线生成工具（v2.0文档）https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||
## [图表组件在uniCloudAdmin中的应用 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||
- uCharts.js 折线图区域图增加connectNulls断点续连的功能，详见示例项目中ucharts.vue
|
||||
- 秋云图表组件 变更初始化方法为created，变更type2d默认值为true，优化2d模式下组件初始化后dom获取不到的bug
|
||||
- 秋云图表组件 修复左右布局时，右侧图表点击坐标错误的bug，修复tooltip柱状图自定义颜色显示object的bug
|
||||
## 2.0.0-20210410（2021-04-10）
|
||||
- 修复左右布局时，右侧图表点击坐标错误的bug，修复柱状图自定义颜色tooltip显示object的bug
|
||||
- 增加标记线及柱状图自定义颜色的demo
|
||||
## 2.0.0-20210409（2021-04-08）
|
||||
## v1.0版本已停更，建议转uni_modules版本组件方式调用，点击右侧【使用HBuilderX导入插件】即可体验，DEMO演示及在线生成工具（v2.0文档）[https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||
## 图表组件在uniCloudAdmin中的应用 [UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||
- uCharts.js 修复钉钉小程序百度小程序measureText不准确的bug，修复2d模式下饼图类activeRadius为按比例放大的bug
|
||||
- 修复组件在支付宝小程序端点击位置不准确的bug
|
||||
## 2.0.0-20210408（2021-04-07）
|
||||
- 修复组件在支付宝小程序端不能显示的bug（目前支付宝小程不能点击交互，后续修复）
|
||||
- uCharts.js 修复高分屏下柱状图类，圆弧进度条 自定义宽度不能按比例放大的bug
|
||||
## 2.0.0-20210407（2021-04-06）
|
||||
## v1.0版本已停更，建议转uni_modules版本组件方式调用，点击右侧【使用HBuilderX导入插件】即可体验，DEMO演示及在线生成工具（v2.0文档）[https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||
## 增加 通过tofix和unit快速格式化y轴的demo add by `howcode`
|
||||
## 增加 图表组件在uniCloudAdmin中的应用 [UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||
## 2.0.0-20210406（2021-04-05）
|
||||
# 秋云图表组件+uCharts v2.0版本同步上线，使用方法详见https://demo.ucharts.cn帮助页
|
||||
## 2.0.0（2021-04-05）
|
||||
# 秋云图表组件+uCharts v2.0版本同步上线，使用方法详见https://demo.ucharts.cn帮助页
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,162 @@
|
|||
<template>
|
||||
<view class="container loading1">
|
||||
<view class="shape shape1"></view>
|
||||
<view class="shape shape2"></view>
|
||||
<view class="shape shape3"></view>
|
||||
<view class="shape shape4"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'loading1',
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped="true">
|
||||
.container {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
}
|
||||
.container.loading1 {
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.container .shape {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.container .shape.shape1 {
|
||||
left: 0;
|
||||
background-color: #1890FF;
|
||||
}
|
||||
.container .shape.shape2 {
|
||||
right: 0;
|
||||
background-color: #91CB74;
|
||||
}
|
||||
.container .shape.shape3 {
|
||||
bottom: 0;
|
||||
background-color: #FAC858;
|
||||
}
|
||||
.container .shape.shape4 {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #EE6666;
|
||||
}
|
||||
|
||||
.loading1 .shape1 {
|
||||
-webkit-animation: animation1shape1 0.5s ease 0s infinite alternate;
|
||||
animation: animation1shape1 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation1shape1 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(16px, 16px);
|
||||
transform: translate(16px, 16px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation1shape1 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(16px, 16px);
|
||||
transform: translate(16px, 16px);
|
||||
}
|
||||
}
|
||||
.loading1 .shape2 {
|
||||
-webkit-animation: animation1shape2 0.5s ease 0s infinite alternate;
|
||||
animation: animation1shape2 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation1shape2 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-16px, 16px);
|
||||
transform: translate(-16px, 16px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation1shape2 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-16px, 16px);
|
||||
transform: translate(-16px, 16px);
|
||||
}
|
||||
}
|
||||
.loading1 .shape3 {
|
||||
-webkit-animation: animation1shape3 0.5s ease 0s infinite alternate;
|
||||
animation: animation1shape3 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation1shape3 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(16px, -16px);
|
||||
transform: translate(16px, -16px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation1shape3 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(16px, -16px);
|
||||
transform: translate(16px, -16px);
|
||||
}
|
||||
}
|
||||
.loading1 .shape4 {
|
||||
-webkit-animation: animation1shape4 0.5s ease 0s infinite alternate;
|
||||
animation: animation1shape4 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation1shape4 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-16px, -16px);
|
||||
transform: translate(-16px, -16px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation1shape4 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-16px, -16px);
|
||||
transform: translate(-16px, -16px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,170 @@
|
|||
<template>
|
||||
<view class="container loading2">
|
||||
<view class="shape shape1"></view>
|
||||
<view class="shape shape2"></view>
|
||||
<view class="shape shape3"></view>
|
||||
<view class="shape shape4"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'loading2',
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped="true">
|
||||
.container {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container.loading2 {
|
||||
-webkit-transform: rotate(10deg);
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
.container.loading2 .shape {
|
||||
border-radius: 5px;
|
||||
}
|
||||
.container.loading2{
|
||||
-webkit-animation: rotation 1s infinite;
|
||||
animation: rotation 1s infinite;
|
||||
}
|
||||
|
||||
.container .shape {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.container .shape.shape1 {
|
||||
left: 0;
|
||||
background-color: #1890FF;
|
||||
}
|
||||
.container .shape.shape2 {
|
||||
right: 0;
|
||||
background-color: #91CB74;
|
||||
}
|
||||
.container .shape.shape3 {
|
||||
bottom: 0;
|
||||
background-color: #FAC858;
|
||||
}
|
||||
.container .shape.shape4 {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #EE6666;
|
||||
}
|
||||
|
||||
|
||||
.loading2 .shape1 {
|
||||
-webkit-animation: animation2shape1 0.5s ease 0s infinite alternate;
|
||||
animation: animation2shape1 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation2shape1 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(20px, 20px);
|
||||
transform: translate(20px, 20px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation2shape1 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(20px, 20px);
|
||||
transform: translate(20px, 20px);
|
||||
}
|
||||
}
|
||||
.loading2 .shape2 {
|
||||
-webkit-animation: animation2shape2 0.5s ease 0s infinite alternate;
|
||||
animation: animation2shape2 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation2shape2 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-20px, 20px);
|
||||
transform: translate(-20px, 20px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation2shape2 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-20px, 20px);
|
||||
transform: translate(-20px, 20px);
|
||||
}
|
||||
}
|
||||
.loading2 .shape3 {
|
||||
-webkit-animation: animation2shape3 0.5s ease 0s infinite alternate;
|
||||
animation: animation2shape3 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation2shape3 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(20px, -20px);
|
||||
transform: translate(20px, -20px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation2shape3 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(20px, -20px);
|
||||
transform: translate(20px, -20px);
|
||||
}
|
||||
}
|
||||
.loading2 .shape4 {
|
||||
-webkit-animation: animation2shape4 0.5s ease 0s infinite alternate;
|
||||
animation: animation2shape4 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation2shape4 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-20px, -20px);
|
||||
transform: translate(-20px, -20px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation2shape4 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-20px, -20px);
|
||||
transform: translate(-20px, -20px);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,173 @@
|
|||
<template>
|
||||
<view class="container loading3">
|
||||
<view class="shape shape1"></view>
|
||||
<view class="shape shape2"></view>
|
||||
<view class="shape shape3"></view>
|
||||
<view class="shape shape4"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'loading3',
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped="true">
|
||||
.container {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container.loading3 {
|
||||
-webkit-animation: rotation 1s infinite;
|
||||
animation: rotation 1s infinite;
|
||||
}
|
||||
.container.loading3 .shape1 {
|
||||
border-top-left-radius: 10px;
|
||||
}
|
||||
.container.loading3 .shape2 {
|
||||
border-top-right-radius: 10px;
|
||||
}
|
||||
.container.loading3 .shape3 {
|
||||
border-bottom-left-radius: 10px;
|
||||
}
|
||||
.container.loading3 .shape4 {
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
|
||||
.container .shape {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.container .shape.shape1 {
|
||||
left: 0;
|
||||
background-color: #1890FF;
|
||||
}
|
||||
.container .shape.shape2 {
|
||||
right: 0;
|
||||
background-color: #91CB74;
|
||||
}
|
||||
.container .shape.shape3 {
|
||||
bottom: 0;
|
||||
background-color: #FAC858;
|
||||
}
|
||||
.container .shape.shape4 {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #EE6666;
|
||||
}
|
||||
|
||||
.loading3 .shape1 {
|
||||
-webkit-animation: animation3shape1 0.5s ease 0s infinite alternate;
|
||||
animation: animation3shape1 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation3shape1 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(5px, 5px);
|
||||
transform: translate(5px, 5px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation3shape1 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(5px, 5px);
|
||||
transform: translate(5px, 5px);
|
||||
}
|
||||
}
|
||||
.loading3 .shape2 {
|
||||
-webkit-animation: animation3shape2 0.5s ease 0s infinite alternate;
|
||||
animation: animation3shape2 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation3shape2 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-5px, 5px);
|
||||
transform: translate(-5px, 5px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation3shape2 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-5px, 5px);
|
||||
transform: translate(-5px, 5px);
|
||||
}
|
||||
}
|
||||
.loading3 .shape3 {
|
||||
-webkit-animation: animation3shape3 0.5s ease 0s infinite alternate;
|
||||
animation: animation3shape3 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation3shape3 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(5px, -5px);
|
||||
transform: translate(5px, -5px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation3shape3 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(5px, -5px);
|
||||
transform: translate(5px, -5px);
|
||||
}
|
||||
}
|
||||
.loading3 .shape4 {
|
||||
-webkit-animation: animation3shape4 0.5s ease 0s infinite alternate;
|
||||
animation: animation3shape4 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation3shape4 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-5px, -5px);
|
||||
transform: translate(-5px, -5px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation3shape4 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-5px, -5px);
|
||||
transform: translate(-5px, -5px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,222 @@
|
|||
<template>
|
||||
<view class="container loading5">
|
||||
<view class="shape shape1"></view>
|
||||
<view class="shape shape2"></view>
|
||||
<view class="shape shape3"></view>
|
||||
<view class="shape shape4"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'loading5',
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped="true">
|
||||
.container {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container.loading5 .shape {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.container .shape {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.container .shape.shape1 {
|
||||
left: 0;
|
||||
background-color: #1890FF;
|
||||
}
|
||||
.container .shape.shape2 {
|
||||
right: 0;
|
||||
background-color: #91CB74;
|
||||
}
|
||||
.container .shape.shape3 {
|
||||
bottom: 0;
|
||||
background-color: #FAC858;
|
||||
}
|
||||
.container .shape.shape4 {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #EE6666;
|
||||
}
|
||||
|
||||
.loading5 .shape1 {
|
||||
animation: animation5shape1 2s ease 0s infinite reverse;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation5shape1 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(0, 15px);
|
||||
transform: translate(0, 15px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(15px, 15px);
|
||||
transform: translate(15px, 15px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(15px, 0);
|
||||
transform: translate(15px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation5shape1 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(0, 15px);
|
||||
transform: translate(0, 15px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(15px, 15px);
|
||||
transform: translate(15px, 15px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(15px, 0);
|
||||
transform: translate(15px, 0);
|
||||
}
|
||||
}
|
||||
.loading5 .shape2 {
|
||||
animation: animation5shape2 2s ease 0s infinite reverse;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation5shape2 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(-15px, 0);
|
||||
transform: translate(-15px, 0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(-15px, 15px);
|
||||
transform: translate(-15px, 15px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(0, 15px);
|
||||
transform: translate(0, 15px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation5shape2 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(-15px, 0);
|
||||
transform: translate(-15px, 0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(-15px, 15px);
|
||||
transform: translate(-15px, 15px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(0, 15px);
|
||||
transform: translate(0, 15px);
|
||||
}
|
||||
}
|
||||
.loading5 .shape3 {
|
||||
animation: animation5shape3 2s ease 0s infinite reverse;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation5shape3 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(15px, 0);
|
||||
transform: translate(15px, 0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(15px, -15px);
|
||||
transform: translate(15px, -15px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(0, -15px);
|
||||
transform: translate(0, -15px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation5shape3 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(15px, 0);
|
||||
transform: translate(15px, 0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(15px, -15px);
|
||||
transform: translate(15px, -15px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(0, -15px);
|
||||
transform: translate(0, -15px);
|
||||
}
|
||||
}
|
||||
.loading5 .shape4 {
|
||||
animation: animation5shape4 2s ease 0s infinite reverse;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation5shape4 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(0, -15px);
|
||||
transform: translate(0, -15px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(-15px, -15px);
|
||||
transform: translate(-15px, -15px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(-15px, 0);
|
||||
transform: translate(-15px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation5shape4 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(0, -15px);
|
||||
transform: translate(0, -15px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(-15px, -15px);
|
||||
transform: translate(-15px, -15px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(-15px, 0);
|
||||
transform: translate(-15px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,229 @@
|
|||
<template>
|
||||
<view class="container loading6">
|
||||
<view class="shape shape1"></view>
|
||||
<view class="shape shape2"></view>
|
||||
<view class="shape shape3"></view>
|
||||
<view class="shape shape4"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'loading6',
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped="true">
|
||||
.container {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container.loading6 {
|
||||
-webkit-animation: rotation 1s infinite;
|
||||
animation: rotation 1s infinite;
|
||||
}
|
||||
.container.loading6 .shape {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.container .shape {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.container .shape.shape1 {
|
||||
left: 0;
|
||||
background-color: #1890FF;
|
||||
}
|
||||
.container .shape.shape2 {
|
||||
right: 0;
|
||||
background-color: #91CB74;
|
||||
}
|
||||
.container .shape.shape3 {
|
||||
bottom: 0;
|
||||
background-color: #FAC858;
|
||||
}
|
||||
.container .shape.shape4 {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #EE6666;
|
||||
}
|
||||
|
||||
|
||||
.loading6 .shape1 {
|
||||
-webkit-animation: animation6shape1 2s linear 0s infinite normal;
|
||||
animation: animation6shape1 2s linear 0s infinite normal;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation6shape1 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(0, 18px);
|
||||
transform: translate(0, 18px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(18px, 18px);
|
||||
transform: translate(18px, 18px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(18px, 0);
|
||||
transform: translate(18px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation6shape1 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(0, 18px);
|
||||
transform: translate(0, 18px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(18px, 18px);
|
||||
transform: translate(18px, 18px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(18px, 0);
|
||||
transform: translate(18px, 0);
|
||||
}
|
||||
}
|
||||
.loading6 .shape2 {
|
||||
-webkit-animation: animation6shape2 2s linear 0s infinite normal;
|
||||
animation: animation6shape2 2s linear 0s infinite normal;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation6shape2 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(-18px, 0);
|
||||
transform: translate(-18px, 0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(-18px, 18px);
|
||||
transform: translate(-18px, 18px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(0, 18px);
|
||||
transform: translate(0, 18px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation6shape2 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(-18px, 0);
|
||||
transform: translate(-18px, 0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(-18px, 18px);
|
||||
transform: translate(-18px, 18px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(0, 18px);
|
||||
transform: translate(0, 18px);
|
||||
}
|
||||
}
|
||||
.loading6 .shape3 {
|
||||
-webkit-animation: animation6shape3 2s linear 0s infinite normal;
|
||||
animation: animation6shape3 2s linear 0s infinite normal;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation6shape3 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(18px, 0);
|
||||
transform: translate(18px, 0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(18px, -18px);
|
||||
transform: translate(18px, -18px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(0, -18px);
|
||||
transform: translate(0, -18px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation6shape3 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(18px, 0);
|
||||
transform: translate(18px, 0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(18px, -18px);
|
||||
transform: translate(18px, -18px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(0, -18px);
|
||||
transform: translate(0, -18px);
|
||||
}
|
||||
}
|
||||
.loading6 .shape4 {
|
||||
-webkit-animation: animation6shape4 2s linear 0s infinite normal;
|
||||
animation: animation6shape4 2s linear 0s infinite normal;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation6shape4 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(0, -18px);
|
||||
transform: translate(0, -18px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(-18px, -18px);
|
||||
transform: translate(-18px, -18px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(-18px, 0);
|
||||
transform: translate(-18px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation6shape4 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(0, -18px);
|
||||
transform: translate(0, -18px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(-18px, -18px);
|
||||
transform: translate(-18px, -18px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(-18px, 0);
|
||||
transform: translate(-18px, 0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<template>
|
||||
<view>
|
||||
<Loading1 v-if="loadingType==1"/>
|
||||
<Loading2 v-if="loadingType==2"/>
|
||||
<Loading3 v-if="loadingType==3"/>
|
||||
<Loading4 v-if="loadingType==4"/>
|
||||
<Loading5 v-if="loadingType==5"/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Loading1 from "./loading1.vue";
|
||||
import Loading2 from "./loading2.vue";
|
||||
import Loading3 from "./loading3.vue";
|
||||
import Loading4 from "./loading4.vue";
|
||||
import Loading5 from "./loading5.vue";
|
||||
export default {
|
||||
components:{Loading1,Loading2,Loading3,Loading4,Loading5},
|
||||
name: 'qiun-loading',
|
||||
props: {
|
||||
loadingType: {
|
||||
type: Number,
|
||||
default: 2
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,422 @@
|
|||
/*
|
||||
* uCharts®
|
||||
* 高性能跨平台图表库，支持H5、APP、小程序（微信/支付宝/百度/头条/QQ/360）、Vue、Taro等支持canvas的框架平台
|
||||
* Copyright (c) 2021 QIUN®秋云 https://www.ucharts.cn All rights reserved.
|
||||
* Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
|
||||
* 复制使用请保留本段注释，感谢支持开源！
|
||||
*
|
||||
* uCharts®官方网站
|
||||
* https://www.uCharts.cn
|
||||
*
|
||||
* 开源地址:
|
||||
* https://gitee.com/uCharts/uCharts
|
||||
*
|
||||
* uni-app插件市场地址：
|
||||
* http://ext.dcloud.net.cn/plugin?id=271
|
||||
*
|
||||
*/
|
||||
|
||||
// 通用配置项
|
||||
|
||||
// 主题颜色配置：如每个图表类型需要不同主题，请在对应图表类型上更改color属性
|
||||
const color = ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'];
|
||||
|
||||
const cfe = {
|
||||
//demotype为自定义图表类型
|
||||
"type": ["pie", "ring", "rose", "funnel", "line", "column", "area", "radar", "gauge","candle","demotype"],
|
||||
//增加自定义图表类型，如果需要categories，请在这里加入您的图表类型例如最后的"demotype"
|
||||
"categories": ["line", "column", "area", "radar", "gauge", "candle","demotype"],
|
||||
//instance为实例变量承载属性，option为eopts承载属性，不要删除
|
||||
"instance": {},
|
||||
"option": {},
|
||||
//下面是自定义format配置，因除H5端外的其他端无法通过props传递函数，只能通过此属性对应下标的方式来替换
|
||||
"formatter":{
|
||||
"tooltipDemo1":function(res){
|
||||
let result = ''
|
||||
for (let i in res) {
|
||||
if (i == 0) {
|
||||
result += res[i].axisValueLabel + '年销售额'
|
||||
}
|
||||
let value = '--'
|
||||
if (res[i].data !== null) {
|
||||
value = res[i].data
|
||||
}
|
||||
// #ifdef H5
|
||||
result += '\n' + res[i].seriesName + '：' + value + ' 万元'
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
result += '<br/>' + res[i].marker + res[i].seriesName + '：' + value + ' 万元'
|
||||
// #endif
|
||||
}
|
||||
return result;
|
||||
},
|
||||
legendFormat:function(name){
|
||||
return "自定义图例+"+name;
|
||||
},
|
||||
yAxisFormatDemo:function (value, index) {
|
||||
return value + '元';
|
||||
},
|
||||
seriesFormatDemo:function(res){
|
||||
return res.name + '年' + res.value + '元';
|
||||
}
|
||||
},
|
||||
//这里演示了自定义您的图表类型的option，可以随意命名，之后在组件上 type="demotype" 后，组件会调用这个花括号里的option，如果组件上还存在eopts参数，会将demotype与eopts中option合并后渲染图表。
|
||||
"demotype":{
|
||||
"color": color,
|
||||
//在这里填写echarts的option即可
|
||||
|
||||
},
|
||||
//下面是自定义配置，请添加项目所需的通用配置
|
||||
"column": {
|
||||
"color": color,
|
||||
"title": {
|
||||
"text": ''
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": 'axis'
|
||||
},
|
||||
"grid": {
|
||||
"top": 30,
|
||||
"bottom": 50,
|
||||
"right": 15,
|
||||
"left": 40
|
||||
},
|
||||
"legend": {
|
||||
"bottom": 'left',
|
||||
},
|
||||
"toolbox": {
|
||||
"show": false,
|
||||
},
|
||||
"xAxis": {
|
||||
"type": 'category',
|
||||
"axisLabel": {
|
||||
"color": '#666666'
|
||||
},
|
||||
"axisLine": {
|
||||
"lineStyle": {
|
||||
"color": '#CCCCCC'
|
||||
}
|
||||
},
|
||||
"boundaryGap": true,
|
||||
"data": []
|
||||
},
|
||||
"yAxis": {
|
||||
"type": 'value',
|
||||
"axisTick": {
|
||||
"show": false,
|
||||
},
|
||||
"axisLabel": {
|
||||
"color": '#666666'
|
||||
},
|
||||
"axisLine": {
|
||||
"lineStyle": {
|
||||
"color": '#CCCCCC'
|
||||
}
|
||||
},
|
||||
},
|
||||
"seriesTemplate": {
|
||||
"name": '',
|
||||
"type": 'bar',
|
||||
"data": [],
|
||||
"barwidth": 20,
|
||||
"label": {
|
||||
"show": true,
|
||||
"color": "#666666",
|
||||
"position": 'top',
|
||||
},
|
||||
},
|
||||
},
|
||||
"line": {
|
||||
"color": color,
|
||||
"title": {
|
||||
"text": ''
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": 'axis'
|
||||
},
|
||||
"grid": {
|
||||
"top": 30,
|
||||
"bottom": 50,
|
||||
"right": 15,
|
||||
"left": 40
|
||||
},
|
||||
"legend": {
|
||||
"bottom": 'left',
|
||||
},
|
||||
"toolbox": {
|
||||
"show": false,
|
||||
},
|
||||
"xAxis": {
|
||||
"type": 'category',
|
||||
"axisLabel": {
|
||||
"color": '#666666'
|
||||
},
|
||||
"axisLine": {
|
||||
"lineStyle": {
|
||||
"color": '#CCCCCC'
|
||||
}
|
||||
},
|
||||
"boundaryGap": true,
|
||||
"data": []
|
||||
},
|
||||
"yAxis": {
|
||||
"type": 'value',
|
||||
"axisTick": {
|
||||
"show": false,
|
||||
},
|
||||
"axisLabel": {
|
||||
"color": '#666666'
|
||||
},
|
||||
"axisLine": {
|
||||
"lineStyle": {
|
||||
"color": '#CCCCCC'
|
||||
}
|
||||
},
|
||||
},
|
||||
"seriesTemplate": {
|
||||
"name": '',
|
||||
"type": 'line',
|
||||
"data": [],
|
||||
"barwidth": 20,
|
||||
"label": {
|
||||
"show": true,
|
||||
"color": "#666666",
|
||||
"position": 'top',
|
||||
},
|
||||
},
|
||||
},
|
||||
"area": {
|
||||
"color": color,
|
||||
"title": {
|
||||
"text": ''
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": 'axis'
|
||||
},
|
||||
"grid": {
|
||||
"top": 30,
|
||||
"bottom": 50,
|
||||
"right": 15,
|
||||
"left": 40
|
||||
},
|
||||
"legend": {
|
||||
"bottom": 'left',
|
||||
},
|
||||
"toolbox": {
|
||||
"show": false,
|
||||
},
|
||||
"xAxis": {
|
||||
"type": 'category',
|
||||
"axisLabel": {
|
||||
"color": '#666666'
|
||||
},
|
||||
"axisLine": {
|
||||
"lineStyle": {
|
||||
"color": '#CCCCCC'
|
||||
}
|
||||
},
|
||||
"boundaryGap": true,
|
||||
"data": []
|
||||
},
|
||||
"yAxis": {
|
||||
"type": 'value',
|
||||
"axisTick": {
|
||||
"show": false,
|
||||
},
|
||||
"axisLabel": {
|
||||
"color": '#666666'
|
||||
},
|
||||
"axisLine": {
|
||||
"lineStyle": {
|
||||
"color": '#CCCCCC'
|
||||
}
|
||||
},
|
||||
},
|
||||
"seriesTemplate": {
|
||||
"name": '',
|
||||
"type": 'line',
|
||||
"data": [],
|
||||
"areaStyle": {},
|
||||
"label": {
|
||||
"show": true,
|
||||
"color": "#666666",
|
||||
"position": 'top',
|
||||
},
|
||||
},
|
||||
},
|
||||
"pie": {
|
||||
"color": color,
|
||||
"title": {
|
||||
"text": ''
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": 'item'
|
||||
},
|
||||
"grid": {
|
||||
"top": 40,
|
||||
"bottom": 30,
|
||||
"right": 15,
|
||||
"left": 15
|
||||
},
|
||||
"legend": {
|
||||
"bottom": 'left',
|
||||
},
|
||||
"seriesTemplate": {
|
||||
"name": '',
|
||||
"type": 'pie',
|
||||
"data": [],
|
||||
"radius": '50%',
|
||||
"label": {
|
||||
"show": true,
|
||||
"color": "#666666",
|
||||
"position": 'top',
|
||||
},
|
||||
},
|
||||
},
|
||||
"ring": {
|
||||
"color": color,
|
||||
"title": {
|
||||
"text": ''
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": 'item'
|
||||
},
|
||||
"grid": {
|
||||
"top": 40,
|
||||
"bottom": 30,
|
||||
"right": 15,
|
||||
"left": 15
|
||||
},
|
||||
"legend": {
|
||||
"bottom": 'left',
|
||||
},
|
||||
"seriesTemplate": {
|
||||
"name": '',
|
||||
"type": 'pie',
|
||||
"data": [],
|
||||
"radius": ['40%', '70%'],
|
||||
"avoidLabelOverlap": false,
|
||||
"label": {
|
||||
"show": true,
|
||||
"color": "#666666",
|
||||
"position": 'top',
|
||||
},
|
||||
"labelLine": {
|
||||
"show": true
|
||||
},
|
||||
},
|
||||
},
|
||||
"rose": {
|
||||
"color": color,
|
||||
"title": {
|
||||
"text": ''
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": 'item'
|
||||
},
|
||||
"legend": {
|
||||
"top": 'bottom'
|
||||
},
|
||||
"seriesTemplate": {
|
||||
"name": '',
|
||||
"type": 'pie',
|
||||
"data": [],
|
||||
"radius": "55%",
|
||||
"center": ['50%', '50%'],
|
||||
"rosetype": 'area',
|
||||
},
|
||||
},
|
||||
"funnel": {
|
||||
"color": color,
|
||||
"title": {
|
||||
"text": ''
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": 'item',
|
||||
"formatter": "{b} : {c}%"
|
||||
},
|
||||
"legend": {
|
||||
"top": 'bottom'
|
||||
},
|
||||
"seriesTemplate": {
|
||||
"name": '',
|
||||
"type": 'funnel',
|
||||
"left": '10%',
|
||||
"top": 60,
|
||||
"bottom": 60,
|
||||
"width": '80%',
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"minSize": '0%',
|
||||
"maxSize": '100%',
|
||||
"sort": 'descending',
|
||||
"gap": 2,
|
||||
"label": {
|
||||
"show": true,
|
||||
"position": 'inside'
|
||||
},
|
||||
"labelLine": {
|
||||
"length": 10,
|
||||
"lineStyle": {
|
||||
"width": 1,
|
||||
"type": 'solid'
|
||||
}
|
||||
},
|
||||
"itemStyle": {
|
||||
"bordercolor": '#fff',
|
||||
"borderwidth": 1
|
||||
},
|
||||
"emphasis": {
|
||||
"label": {
|
||||
"fontSize": 20
|
||||
}
|
||||
},
|
||||
"data": [],
|
||||
},
|
||||
},
|
||||
"gauge": {
|
||||
"color": color,
|
||||
"tooltip": {
|
||||
"formatter": '{a} <br/>{b} : {c}%'
|
||||
},
|
||||
"seriesTemplate": {
|
||||
"name": '业务指标',
|
||||
"type": 'gauge',
|
||||
"detail": {"formatter": '{value}%'},
|
||||
"data": [{"value": 50, "name": '完成率'}]
|
||||
},
|
||||
},
|
||||
"candle": {
|
||||
"xAxis": {
|
||||
"data": []
|
||||
},
|
||||
"yAxis": {},
|
||||
"color": color,
|
||||
"title": {
|
||||
"text": ''
|
||||
},
|
||||
"dataZoom": [{
|
||||
"type": 'inside',
|
||||
"xAxisIndex": [0, 1],
|
||||
"start": 10,
|
||||
"end": 100
|
||||
},
|
||||
{
|
||||
"show": true,
|
||||
"xAxisIndex": [0, 1],
|
||||
"type": 'slider',
|
||||
"bottom": 10,
|
||||
"start": 10,
|
||||
"end": 100
|
||||
}
|
||||
],
|
||||
"seriesTemplate": {
|
||||
"name": '',
|
||||
"type": 'k',
|
||||
"data": [],
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export default cfe;
|
||||
|
|
@ -0,0 +1,582 @@
|
|||
/*
|
||||
* uCharts®
|
||||
* 高性能跨平台图表库，支持H5、APP、小程序（微信/支付宝/百度/头条/QQ/360）、Vue、Taro等支持canvas的框架平台
|
||||
* Copyright (c) 2021 QIUN®秋云 https://www.ucharts.cn All rights reserved.
|
||||
* Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
|
||||
* 复制使用请保留本段注释，感谢支持开源！
|
||||
*
|
||||
* uCharts®官方网站
|
||||
* https://www.uCharts.cn
|
||||
*
|
||||
* 开源地址:
|
||||
* https://gitee.com/uCharts/uCharts
|
||||
*
|
||||
* uni-app插件市场地址：
|
||||
* http://ext.dcloud.net.cn/plugin?id=271
|
||||
*
|
||||
*/
|
||||
|
||||
// 主题颜色配置：如每个图表类型需要不同主题，请在对应图表类型上更改color属性
|
||||
const color = ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'];
|
||||
|
||||
//事件转换函数，主要用作格式化x轴为时间轴，根据需求自行修改
|
||||
const formatDateTime = (timeStamp, returnType)=>{
|
||||
var date = new Date();
|
||||
date.setTime(timeStamp * 1000);
|
||||
var y = date.getFullYear();
|
||||
var m = date.getMonth() + 1;
|
||||
m = m < 10 ? ('0' + m) : m;
|
||||
var d = date.getDate();
|
||||
d = d < 10 ? ('0' + d) : d;
|
||||
var h = date.getHours();
|
||||
h = h < 10 ? ('0' + h) : h;
|
||||
var minute = date.getMinutes();
|
||||
var second = date.getSeconds();
|
||||
minute = minute < 10 ? ('0' + minute) : minute;
|
||||
second = second < 10 ? ('0' + second) : second;
|
||||
if(returnType == 'full'){return y + '-' + m + '-' + d + ' '+ h +':' + minute + ':' + second;}
|
||||
if(returnType == 'y-m-d'){return y + '-' + m + '-' + d;}
|
||||
if(returnType == 'h:m'){return h +':' + minute;}
|
||||
if(returnType == 'h:m:s'){return h +':' + minute +':' + second;}
|
||||
return [y, m, d, h, minute, second];
|
||||
}
|
||||
|
||||
const cfu = {
|
||||
//demotype为自定义图表类型，一般不需要自定义图表类型，只需要改根节点上对应的类型即可
|
||||
"type":["pie","ring","rose","word","funnel","map","arcbar","line","column","bar","area","radar","gauge","candle","mix","tline","tarea","scatter","bubble","demotype"],
|
||||
"range":["饼状图","圆环图","玫瑰图","词云图","漏斗图","地图","圆弧进度条","折线图","柱状图","条状图","区域图","雷达图","仪表盘","K线图","混合图","时间轴折线","时间轴区域","散点图","气泡图","自定义类型"],
|
||||
//增加自定义图表类型，如果需要categories，请在这里加入您的图表类型，例如最后的"demotype"
|
||||
//自定义类型时需要注意"tline","tarea","scatter","bubble"等时间轴（矢量x轴）类图表，没有categories，不需要加入categories
|
||||
"categories":["line","column","bar","area","radar","gauge","candle","mix","demotype"],
|
||||
//instance为实例变量承载属性，不要删除
|
||||
"instance":{},
|
||||
//option为opts及eopts承载属性，不要删除
|
||||
"option":{},
|
||||
//下面是自定义format配置，因除H5端外的其他端无法通过props传递函数，只能通过此属性对应下标的方式来替换
|
||||
"formatter":{
|
||||
"yAxisDemo1":function(val){return val+'元'},
|
||||
"yAxisDemo2":function(val){return val.toFixed(2)},
|
||||
"xAxisDemo1":function(val){return val+'年'},
|
||||
"xAxisDemo2":function(val){return formatDateTime(val,'h:m')},
|
||||
"seriesDemo1":function(val){return val+'元'},
|
||||
"tooltipDemo1":function(item, category, index, opts){
|
||||
if(index==0){
|
||||
return '随便用'+item.data+'年'
|
||||
}else{
|
||||
return '其他我没改'+item.data+'天'
|
||||
}
|
||||
},
|
||||
"pieDemo":function(val, index, series){
|
||||
if(index !== undefined){
|
||||
return series[index].name+'：'+series[index].data+'元'
|
||||
}
|
||||
},
|
||||
},
|
||||
//这里演示了自定义您的图表类型的option，可以随意命名，之后在组件上 type="demotype" 后，组件会调用这个花括号里的option，如果组件上还存在opts参数，会将demotype与opts中option合并后渲染图表。
|
||||
"demotype":{
|
||||
//我这里把曲线图当做了自定义图表类型，您可以根据需要随意指定类型或配置
|
||||
"type": "line",
|
||||
"color": color,
|
||||
"padding": [15,10,0,15],
|
||||
"xAxis": {
|
||||
"disableGrid": true,
|
||||
},
|
||||
"yAxis": {
|
||||
"gridType": "dash",
|
||||
"dashLength": 2,
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"line": {
|
||||
"type": "curve",
|
||||
"width": 2
|
||||
},
|
||||
}
|
||||
},
|
||||
//下面是自定义配置，请添加项目所需的通用配置
|
||||
"pie":{
|
||||
"type": "pie",
|
||||
"color": color,
|
||||
"padding": [5,5,5,5],
|
||||
"extra": {
|
||||
"pie": {
|
||||
"activeOpacity": 0.5,
|
||||
"activeRadius": 10,
|
||||
"offsetAngle": 0,
|
||||
"labelWidth": 15,
|
||||
"border": true,
|
||||
"borderWidth": 3,
|
||||
"borderColor": "#FFFFFF"
|
||||
},
|
||||
}
|
||||
},
|
||||
"ring":{
|
||||
"type": "ring",
|
||||
"color": color,
|
||||
"padding": [5,5,5,5],
|
||||
"rotate": false,
|
||||
"dataLabel": true,
|
||||
"legend": {
|
||||
"show": true,
|
||||
"position": "right",
|
||||
"lineHeight": 25,
|
||||
},
|
||||
"title": {
|
||||
"name": "收益率",
|
||||
"fontSize": 15,
|
||||
"color": "#666666"
|
||||
},
|
||||
"subtitle": {
|
||||
"name": "70%",
|
||||
"fontSize": 25,
|
||||
"color": "#7cb5ec"
|
||||
},
|
||||
"extra": {
|
||||
"ring": {
|
||||
"ringWidth":30,
|
||||
"activeOpacity": 0.5,
|
||||
"activeRadius": 10,
|
||||
"offsetAngle": 0,
|
||||
"labelWidth": 15,
|
||||
"border": true,
|
||||
"borderWidth": 3,
|
||||
"borderColor": "#FFFFFF"
|
||||
},
|
||||
},
|
||||
},
|
||||
"rose":{
|
||||
"type": "rose",
|
||||
"color": color,
|
||||
"padding": [5,5,5,5],
|
||||
"legend": {
|
||||
"show": true,
|
||||
"position": "left",
|
||||
"lineHeight": 25,
|
||||
},
|
||||
"extra": {
|
||||
"rose": {
|
||||
"type": "area",
|
||||
"minRadius": 50,
|
||||
"activeOpacity": 0.5,
|
||||
"activeRadius": 10,
|
||||
"offsetAngle": 0,
|
||||
"labelWidth": 15,
|
||||
"border": false,
|
||||
"borderWidth": 2,
|
||||
"borderColor": "#FFFFFF"
|
||||
},
|
||||
}
|
||||
},
|
||||
"word":{
|
||||
"type": "word",
|
||||
"color": color,
|
||||
"extra": {
|
||||
"word": {
|
||||
"type": "normal",
|
||||
"autoColors": false
|
||||
}
|
||||
}
|
||||
},
|
||||
"funnel":{
|
||||
"type": "funnel",
|
||||
"color": color,
|
||||
"padding": [15,15,0,15],
|
||||
"extra": {
|
||||
"funnel": {
|
||||
"activeOpacity": 0.3,
|
||||
"activeWidth": 10,
|
||||
"border": true,
|
||||
"borderWidth": 2,
|
||||
"borderColor": "#FFFFFF",
|
||||
"fillOpacity": 1,
|
||||
"labelAlign": "right"
|
||||
},
|
||||
}
|
||||
},
|
||||
"map":{
|
||||
"type": "map",
|
||||
"color": color,
|
||||
"padding": [0,0,0,0],
|
||||
"dataLabel": true,
|
||||
"extra": {
|
||||
"map": {
|
||||
"border": true,
|
||||
"borderWidth": 1,
|
||||
"borderColor": "#666666",
|
||||
"fillOpacity": 0.6,
|
||||
"activeBorderColor": "#F04864",
|
||||
"activeFillColor": "#FACC14",
|
||||
"activeFillOpacity": 1
|
||||
},
|
||||
}
|
||||
},
|
||||
"arcbar":{
|
||||
"type": "arcbar",
|
||||
"color": color,
|
||||
"title": {
|
||||
"name": "百分比",
|
||||
"fontSize": 25,
|
||||
"color": "#00FF00"
|
||||
},
|
||||
"subtitle": {
|
||||
"name": "默认标题",
|
||||
"fontSize": 15,
|
||||
"color": "#666666"
|
||||
},
|
||||
"extra": {
|
||||
"arcbar": {
|
||||
"type": "default",
|
||||
"width": 12,
|
||||
"backgroundColor": "#E9E9E9",
|
||||
"startAngle": 0.75,
|
||||
"endAngle": 0.25,
|
||||
"gap": 2
|
||||
}
|
||||
}
|
||||
},
|
||||
"line":{
|
||||
"type": "line",
|
||||
"color": color,
|
||||
"padding": [15,10,0,15],
|
||||
"xAxis": {
|
||||
"disableGrid": true,
|
||||
},
|
||||
"yAxis": {
|
||||
"gridType": "dash",
|
||||
"dashLength": 2,
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"line": {
|
||||
"type": "straight",
|
||||
"width": 2
|
||||
},
|
||||
}
|
||||
},
|
||||
"tline":{
|
||||
"type": "line",
|
||||
"color": color,
|
||||
"padding": [15,10,0,15],
|
||||
"xAxis": {
|
||||
"disableGrid": false,
|
||||
"boundaryGap":"justify",
|
||||
},
|
||||
"yAxis": {
|
||||
"gridType": "dash",
|
||||
"dashLength": 2,
|
||||
"data":[
|
||||
{
|
||||
"min":0,
|
||||
"max":80
|
||||
}
|
||||
]
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"line": {
|
||||
"type": "curve",
|
||||
"width": 2
|
||||
},
|
||||
}
|
||||
},
|
||||
"tarea":{
|
||||
"type": "area",
|
||||
"color": color,
|
||||
"padding": [15,10,0,15],
|
||||
"xAxis": {
|
||||
"disableGrid": true,
|
||||
"boundaryGap":"justify",
|
||||
},
|
||||
"yAxis": {
|
||||
"gridType": "dash",
|
||||
"dashLength": 2,
|
||||
"data":[
|
||||
{
|
||||
"min":0,
|
||||
"max":80
|
||||
}
|
||||
]
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"area": {
|
||||
"type": "curve",
|
||||
"opacity": 0.2,
|
||||
"addLine": true,
|
||||
"width": 2,
|
||||
"gradient": true
|
||||
},
|
||||
}
|
||||
},
|
||||
"column":{
|
||||
"type": "column",
|
||||
"color": color,
|
||||
"padding": [15,15,0,5],
|
||||
"xAxis": {
|
||||
"disableGrid": true,
|
||||
},
|
||||
"yAxis": {
|
||||
"data":[{"min":0}]
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"column": {
|
||||
"type": "group",
|
||||
"width": 30,
|
||||
"activeBgColor": "#000000",
|
||||
"activeBgOpacity": 0.08
|
||||
},
|
||||
}
|
||||
},
|
||||
"bar":{
|
||||
"type": "bar",
|
||||
"color": color,
|
||||
"padding": [15,30,0,5],
|
||||
"xAxis": {
|
||||
"boundaryGap":"justify",
|
||||
"disableGrid":false,
|
||||
"min":0,
|
||||
"axisLine":false
|
||||
},
|
||||
"yAxis": {
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"bar": {
|
||||
"type": "group",
|
||||
"width": 30,
|
||||
"meterBorde": 1,
|
||||
"meterFillColor": "#FFFFFF",
|
||||
"activeBgColor": "#000000",
|
||||
"activeBgOpacity": 0.08
|
||||
},
|
||||
}
|
||||
},
|
||||
"area":{
|
||||
"type": "area",
|
||||
"color": color,
|
||||
"padding": [15,15,0,15],
|
||||
"xAxis": {
|
||||
"disableGrid": true,
|
||||
},
|
||||
"yAxis": {
|
||||
"gridType": "dash",
|
||||
"dashLength": 2,
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"area": {
|
||||
"type": "straight",
|
||||
"opacity": 0.2,
|
||||
"addLine": true,
|
||||
"width": 2,
|
||||
"gradient": false
|
||||
},
|
||||
}
|
||||
},
|
||||
"radar":{
|
||||
"type": "radar",
|
||||
"color": color,
|
||||
"padding": [5,5,5,5],
|
||||
"dataLabel": false,
|
||||
"legend": {
|
||||
"show": true,
|
||||
"position": "right",
|
||||
"lineHeight": 25,
|
||||
},
|
||||
"extra": {
|
||||
"radar": {
|
||||
"gridType": "radar",
|
||||
"gridColor": "#CCCCCC",
|
||||
"gridCount": 3,
|
||||
"opacity": 0.2,
|
||||
"max": 200
|
||||
},
|
||||
}
|
||||
},
|
||||
"gauge":{
|
||||
"type": "gauge",
|
||||
"color": color,
|
||||
"title": {
|
||||
"name": "66Km/H",
|
||||
"fontSize": 25,
|
||||
"color": "#2fc25b",
|
||||
"offsetY": 50
|
||||
},
|
||||
"subtitle": {
|
||||
"name": "实时速度",
|
||||
"fontSize": 15,
|
||||
"color": "#1890ff",
|
||||
"offsetY": -50
|
||||
},
|
||||
"extra": {
|
||||
"gauge": {
|
||||
"type": "default",
|
||||
"width": 30,
|
||||
"labelColor": "#666666",
|
||||
"startAngle": 0.75,
|
||||
"endAngle": 0.25,
|
||||
"startNumber": 0,
|
||||
"endNumber": 100,
|
||||
"labelFormat": "",
|
||||
"splitLine": {
|
||||
"fixRadius": 0,
|
||||
"splitNumber": 10,
|
||||
"width": 30,
|
||||
"color": "#FFFFFF",
|
||||
"childNumber": 5,
|
||||
"childWidth": 12
|
||||
},
|
||||
"pointer": {
|
||||
"width": 24,
|
||||
"color": "auto"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"candle":{
|
||||
"type": "candle",
|
||||
"color": color,
|
||||
"padding": [15,15,0,15],
|
||||
"enableScroll": true,
|
||||
"enableMarkLine": true,
|
||||
"dataLabel": false,
|
||||
"xAxis": {
|
||||
"labelCount": 4,
|
||||
"itemCount": 40,
|
||||
"disableGrid": true,
|
||||
"gridColor": "#CCCCCC",
|
||||
"gridType": "solid",
|
||||
"dashLength": 4,
|
||||
"scrollShow": true,
|
||||
"scrollAlign": "left",
|
||||
"scrollColor": "#A6A6A6",
|
||||
"scrollBackgroundColor": "#EFEBEF"
|
||||
},
|
||||
"yAxis": {
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"candle": {
|
||||
"color": {
|
||||
"upLine": "#f04864",
|
||||
"upFill": "#f04864",
|
||||
"downLine": "#2fc25b",
|
||||
"downFill": "#2fc25b"
|
||||
},
|
||||
"average": {
|
||||
"show": true,
|
||||
"name": ["MA5","MA10","MA30"],
|
||||
"day": [5,10,20],
|
||||
"color": ["#1890ff","#2fc25b","#facc14"]
|
||||
}
|
||||
},
|
||||
"markLine": {
|
||||
"type": "dash",
|
||||
"dashLength": 5,
|
||||
"data": [
|
||||
{
|
||||
"value": 2150,
|
||||
"lineColor": "#f04864",
|
||||
"showLabel": true
|
||||
},
|
||||
{
|
||||
"value": 2350,
|
||||
"lineColor": "#f04864",
|
||||
"showLabel": true
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"mix":{
|
||||
"type": "mix",
|
||||
"color": color,
|
||||
"padding": [15,15,0,15],
|
||||
"xAxis": {
|
||||
"disableGrid": true,
|
||||
},
|
||||
"yAxis": {
|
||||
"disabled": false,
|
||||
"disableGrid": false,
|
||||
"splitNumber": 5,
|
||||
"gridType": "dash",
|
||||
"dashLength": 4,
|
||||
"gridColor": "#CCCCCC",
|
||||
"padding": 10,
|
||||
"showTitle": true,
|
||||
"data": []
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"mix": {
|
||||
"column": {
|
||||
"width": 20
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
"scatter":{
|
||||
"type": "scatter",
|
||||
"color":color,
|
||||
"padding":[15,15,0,15],
|
||||
"dataLabel":false,
|
||||
"xAxis": {
|
||||
"disableGrid": false,
|
||||
"gridType":"dash",
|
||||
"splitNumber":5,
|
||||
"boundaryGap":"justify",
|
||||
"min":0
|
||||
},
|
||||
"yAxis": {
|
||||
"disableGrid": false,
|
||||
"gridType":"dash",
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"scatter": {
|
||||
},
|
||||
}
|
||||
},
|
||||
"bubble":{
|
||||
"type": "bubble",
|
||||
"color":color,
|
||||
"padding":[15,15,0,15],
|
||||
"xAxis": {
|
||||
"disableGrid": false,
|
||||
"gridType":"dash",
|
||||
"splitNumber":5,
|
||||
"boundaryGap":"justify",
|
||||
"min":0,
|
||||
"max":250
|
||||
},
|
||||
"yAxis": {
|
||||
"disableGrid": false,
|
||||
"gridType":"dash",
|
||||
"data":[{
|
||||
"min":0,
|
||||
"max":150
|
||||
}]
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"bubble": {
|
||||
"border":2,
|
||||
"opacity": 0.5,
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default cfu;
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
# uCharts JSSDK说明
|
||||
1、如不使用uCharts组件，可直接引用u-charts.js，打包编译后会`自动压缩`，压缩后体积约为`98kb`。
|
||||
2、如果100kb的体积仍需压缩，请手动删除u-charts.js内您不需要的图表类型，如k线图candle。
|
||||
3、config-ucharts.js为uCharts组件的用户配置文件，升级前请`自行备份config-ucharts.js`文件，以免被强制覆盖。
|
||||
3、config-echarts.js为ECharts组件的用户配置文件，升级前请`自行备份config-echarts.js`文件，以免被强制覆盖。
|
||||
|
||||
# v1.0转v2.0注意事项
|
||||
1、opts.colors变更为opts.color
|
||||
2、ring圆环图的扩展配置由extra.pie变更为extra.ring
|
||||
3、混合图借用的扩展配置由extra.column变更为extra.mix.column
|
||||
4、全部涉及到format的格式化属性变更为formatter
|
||||
5、不需要再传canvasId及$this参数，如果通过uChats获取context，可能会导致this实例混乱，导致小程序开发者工具报错。如果不使用qiun-data-charts官方组件，需要在new uCharts()实例化之前，自行获取canvas的上下文context（ctx），并传入new中的context（opts.context）。为了能跨更多的端，给您带来的不便敬请谅解。
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,201 @@
|
|||
Apache License
|
||||
Version 2.0, January 2004
|
||||
http://www.apache.org/licenses/
|
||||
|
||||
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
||||
|
||||
1. Definitions.
|
||||
|
||||
"License" shall mean the terms and conditions for use, reproduction,
|
||||
and distribution as defined by Sections 1 through 9 of this document.
|
||||
|
||||
"Licensor" shall mean the copyright owner or entity authorized by
|
||||
the copyright owner that is granting the License.
|
||||
|
||||
"Legal Entity" shall mean the union of the acting entity and all
|
||||
other entities that control, are controlled by, or are under common
|
||||
control with that entity. For the purposes of this definition,
|
||||
"control" means (i) the power, direct or indirect, to cause the
|
||||
direction or management of such entity, whether by contract or
|
||||
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
||||
outstanding shares, or (iii) beneficial ownership of such entity.
|
||||
|
||||
"You" (or "Your") shall mean an individual or Legal Entity
|
||||
exercising permissions granted by this License.
|
||||
|
||||
"Source" form shall mean the preferred form for making modifications,
|
||||
including but not limited to software source code, documentation
|
||||
source, and configuration files.
|
||||
|
||||
"Object" form shall mean any form resulting from mechanical
|
||||
transformation or translation of a Source form, including but
|
||||
not limited to compiled object code, generated documentation,
|
||||
and conversions to other media types.
|
||||
|
||||
"Work" shall mean the work of authorship, whether in Source or
|
||||
Object form, made available under the License, as indicated by a
|
||||
copyright notice that is included in or attached to the work
|
||||
(an example is provided in the Appendix below).
|
||||
|
||||
"Derivative Works" shall mean any work, whether in Source or Object
|
||||
form, that is based on (or derived from) the Work and for which the
|
||||
editorial revisions, annotations, elaborations, or other modifications
|
||||
represent, as a whole, an original work of authorship. For the purposes
|
||||
of this License, Derivative Works shall not include works that remain
|
||||
separable from, or merely link (or bind by name) to the interfaces of,
|
||||
the Work and Derivative Works thereof.
|
||||
|
||||
"Contribution" shall mean any work of authorship, including
|
||||
the original version of the Work and any modifications or additions
|
||||
to that Work or Derivative Works thereof, that is intentionally
|
||||
submitted to Licensor for inclusion in the Work by the copyright owner
|
||||
or by an individual or Legal Entity authorized to submit on behalf of
|
||||
the copyright owner. For the purposes of this definition, "submitted"
|
||||
means any form of electronic, verbal, or written communication sent
|
||||
to the Licensor or its representatives, including but not limited to
|
||||
communication on electronic mailing lists, source code control systems,
|
||||
and issue tracking systems that are managed by, or on behalf of, the
|
||||
Licensor for the purpose of discussing and improving the Work, but
|
||||
excluding communication that is conspicuously marked or otherwise
|
||||
designated in writing by the copyright owner as "Not a Contribution."
|
||||
|
||||
"Contributor" shall mean Licensor and any individual or Legal Entity
|
||||
on behalf of whom a Contribution has been received by Licensor and
|
||||
subsequently incorporated within the Work.
|
||||
|
||||
2. Grant of Copyright License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
copyright license to reproduce, prepare Derivative Works of,
|
||||
publicly display, publicly perform, sublicense, and distribute the
|
||||
Work and such Derivative Works in Source or Object form.
|
||||
|
||||
3. Grant of Patent License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
(except as stated in this section) patent license to make, have made,
|
||||
use, offer to sell, sell, import, and otherwise transfer the Work,
|
||||
where such license applies only to those patent claims licensable
|
||||
by such Contributor that are necessarily infringed by their
|
||||
Contribution(s) alone or by combination of their Contribution(s)
|
||||
with the Work to which such Contribution(s) was submitted. If You
|
||||
institute patent litigation against any entity (including a
|
||||
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
||||
or a Contribution incorporated within the Work constitutes direct
|
||||
or contributory patent infringement, then any patent licenses
|
||||
granted to You under this License for that Work shall terminate
|
||||
as of the date such litigation is filed.
|
||||
|
||||
4. Redistribution. You may reproduce and distribute copies of the
|
||||
Work or Derivative Works thereof in any medium, with or without
|
||||
modifications, and in Source or Object form, provided that You
|
||||
meet the following conditions:
|
||||
|
||||
(a) You must give any other recipients of the Work or
|
||||
Derivative Works a copy of this License; and
|
||||
|
||||
(b) You must cause any modified files to carry prominent notices
|
||||
stating that You changed the files; and
|
||||
|
||||
(c) You must retain, in the Source form of any Derivative Works
|
||||
that You distribute, all copyright, patent, trademark, and
|
||||
attribution notices from the Source form of the Work,
|
||||
excluding those notices that do not pertain to any part of
|
||||
the Derivative Works; and
|
||||
|
||||
(d) If the Work includes a "NOTICE" text file as part of its
|
||||
distribution, then any Derivative Works that You distribute must
|
||||
include a readable copy of the attribution notices contained
|
||||
within such NOTICE file, excluding those notices that do not
|
||||
pertain to any part of the Derivative Works, in at least one
|
||||
of the following places: within a NOTICE text file distributed
|
||||
as part of the Derivative Works; within the Source form or
|
||||
documentation, if provided along with the Derivative Works; or,
|
||||
within a display generated by the Derivative Works, if and
|
||||
wherever such third-party notices normally appear. The contents
|
||||
of the NOTICE file are for informational purposes only and
|
||||
do not modify the License. You may add Your own attribution
|
||||
notices within Derivative Works that You distribute, alongside
|
||||
or as an addendum to the NOTICE text from the Work, provided
|
||||
that such additional attribution notices cannot be construed
|
||||
as modifying the License.
|
||||
|
||||
You may add Your own copyright statement to Your modifications and
|
||||
may provide additional or different license terms and conditions
|
||||
for use, reproduction, or distribution of Your modifications, or
|
||||
for any such Derivative Works as a whole, provided Your use,
|
||||
reproduction, and distribution of the Work otherwise complies with
|
||||
the conditions stated in this License.
|
||||
|
||||
5. Submission of Contributions. Unless You explicitly state otherwise,
|
||||
any Contribution intentionally submitted for inclusion in the Work
|
||||
by You to the Licensor shall be under the terms and conditions of
|
||||
this License, without any additional terms or conditions.
|
||||
Notwithstanding the above, nothing herein shall supersede or modify
|
||||
the terms of any separate license agreement you may have executed
|
||||
with Licensor regarding such Contributions.
|
||||
|
||||
6. Trademarks. This License does not grant permission to use the trade
|
||||
names, trademarks, service marks, or product names of the Licensor,
|
||||
except as required for reasonable and customary use in describing the
|
||||
origin of the Work and reproducing the content of the NOTICE file.
|
||||
|
||||
7. Disclaimer of Warranty. Unless required by applicable law or
|
||||
agreed to in writing, Licensor provides the Work (and each
|
||||
Contributor provides its Contributions) on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
||||
implied, including, without limitation, any warranties or conditions
|
||||
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
||||
PARTICULAR PURPOSE. You are solely responsible for determining the
|
||||
appropriateness of using or redistributing the Work and assume any
|
||||
risks associated with Your exercise of permissions under this License.
|
||||
|
||||
8. Limitation of Liability. In no event and under no legal theory,
|
||||
whether in tort (including negligence), contract, or otherwise,
|
||||
unless required by applicable law (such as deliberate and grossly
|
||||
negligent acts) or agreed to in writing, shall any Contributor be
|
||||
liable to You for damages, including any direct, indirect, special,
|
||||
incidental, or consequential damages of any character arising as a
|
||||
result of this License or out of the use or inability to use the
|
||||
Work (including but not limited to damages for loss of goodwill,
|
||||
work stoppage, computer failure or malfunction, or any and all
|
||||
other commercial damages or losses), even if such Contributor
|
||||
has been advised of the possibility of such damages.
|
||||
|
||||
9. Accepting Warranty or Additional Liability. While redistributing
|
||||
the Work or Derivative Works thereof, You may choose to offer,
|
||||
and charge a fee for, acceptance of support, warranty, indemnity,
|
||||
or other liability obligations and/or rights consistent with this
|
||||
License. However, in accepting such obligations, You may act only
|
||||
on Your own behalf and on Your sole responsibility, not on behalf
|
||||
of any other Contributor, and only if You agree to indemnify,
|
||||
defend, and hold each Contributor harmless for any liability
|
||||
incurred by, or claims asserted against, such Contributor by reason
|
||||
of your accepting any such warranty or additional liability.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
||||
APPENDIX: How to apply the Apache License to your work.
|
||||
|
||||
To apply the Apache License to your work, attach the following
|
||||
boilerplate notice, with the fields enclosed by brackets "[]"
|
||||
replaced with your own identifying information. (Don't include
|
||||
the brackets!) The text should be enclosed in the appropriate
|
||||
comment syntax for the file format. We also recommend that a
|
||||
file or class name and description of purpose be included on the
|
||||
same "printed page" as the copyright notice for easier
|
||||
identification within third-party archives.
|
||||
|
||||
Copyright [yyyy] [name of copyright owner]
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
{
|
||||
"id": "qiun-data-charts",
|
||||
"displayName": "秋云 ucharts echarts 高性能跨全端图表组件",
|
||||
"version": "2.3.7-20220122",
|
||||
"description": "uCharts v2.3.7支持Vue3！全新官方图表组件，支持H5及APP用ECharts渲染图表，uniapp可视化首选组件",
|
||||
"keywords": [
|
||||
"ucharts",
|
||||
"echarts",
|
||||
"f2",
|
||||
"图表",
|
||||
"可视化"
|
||||
],
|
||||
"repository": "https://gitee.com/uCharts/uCharts",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.3.8"
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"前端组件",
|
||||
"通用组件"
|
||||
],
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": "474119"
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "插件不采集任何数据",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@qiun/ucharts"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "y",
|
||||
"联盟": "y"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,447 @@
|
|||
## [uCharts官方网站](https://www.ucharts.cn)
|
||||
## [DEMO演示及在线生成工具（v2.0文档）https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||
## [优秀的nvue全端组件与模版库nPro](https://ext.dcloud.net.cn/plugin?id=5169)
|
||||
## [图表组件在项目中的应用 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||
## [如何安装、更新 uni_modules 插件点这里，必看，必看，必看](https://uniapp.dcloud.io/uni_modules?id=%e4%bd%bf%e7%94%a8-uni_modules-%e6%8f%92%e4%bb%b6)
|
||||
## 点击右侧绿色【使用HBuilderX导入插件】即可使用，示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
|
||||
## 初次使用不显示问题详见[常见问题选项卡](https://demo.ucharts.cn)
|
||||
## <font color=#FF0000> 新手请先完整阅读【帮助文档】及【常见问题】3遍，右侧蓝色按钮【示例项目】请看2遍！ </font>
|
||||
## <font color=#FF0000> 关于NVUE兼容的说明： </font> uCharts.js从2.3.0开始支持nuve（暂时只能通过原生canvas写法调用uCharts，nuve版本组件请见码云示例项目[uCharts-demo-nvue](https://gitee.com/uCharts/uCharts)），因其渲染方式是通过nvue的gcanvas组件来渲染，理论上性能不及renderjs的qiun-data-charts组件性能。官方仍然建议NVUE使用图表的页面改为vue页面，在App端，从性能来讲，由于通讯阻塞的问题，nvue的canvas性能不可能达到使用renderjs的vue页面的canvas。在App端，仍然推荐使用qiun-data-charts组件。[详见uni-app官方说明](https://uniapp.dcloud.io/component/canvas?id=canvas)
|
||||
|
||||
[](https://gitee.com/uCharts/uCharts)
|
||||
|
||||
## 秋云图表组件使用帮助
|
||||
|
||||
全新图表组件，全端全平台支持，开箱即用，可选择uCharts引擎全端渲染，也可指定PC端或APP端`单独使用ECharts`引擎渲染图表。支持极简单的调用方式，只需指定图表类型及传入符合标准的图表数据即可，使开发者只需专注业务及数据。同时也支持datacom组件读取uniClinetDB，无需关心如何拼接数据等不必要的重复工作，大大缩短开发时间。
|
||||
|
||||
## 为何使用官方封装的组件？
|
||||
|
||||
封装组件并不难，谁都会，但组件调试却是一件令人掉头发的事，尤其是canvas封装成组件会带来一系列问题：例如封装后不显示，图表多次初始化导致抖动问题，单页面多个图表点击事件错乱，组件放在scroll-view中无法点击，在图表上滑动时页面无法滚动等等一系列问题。为解决开发者使用可视化组件的困扰，uCharts官方特推出可视化通用组件，本组件具备以下特点：
|
||||
|
||||
- 极简单的调用方式，默认配置下只需要传入`图表类型`及`图表数据`即可全端显示。
|
||||
- 提供强大的`在线配置生成工具`，可视化中的可视化，鼠标点一点就可以生成图表，可视化从此不再难配。
|
||||
- 兼容ECharts，可选择`PC端或APP端单独使用ECharts`引擎渲染图表。
|
||||
- H5及App采用`renderjs`渲染图表，动画流畅、性能翻倍。
|
||||
- 根据父容器尺寸`弹性显示图表`，再也不必为宽高匹配及多端适配问题发愁。
|
||||
- 支持`加载状态loading及error展示`，避免数据读取显示空白的尴尬。
|
||||
- chartData`配置与数据解耦`，即便使用ECharts引擎也不必担心拼接option的困扰。
|
||||
- localdata`后端数据直接渲染`，无需自行拼接chartData的categories及series，从后端拿回的数据简单处理即可生成图表。
|
||||
- 小程序端不必担心包体积过大问题，ECharts引擎将不会编译到各小程序端，u-charts.js编译后`仅为93kb`。
|
||||
- 未来将支持通过HbuilderX的[schema2code自动生成全端全平台图表](https://ext.dcloud.net.cn/plugin?id=4684)，敬请期待！！！
|
||||
- uCharts官方拥有4个2000人的QQ群支持，庞大的用户量证明我们一直在努力，本组件将持续更新，请各位放心使用，您的宝贵建议是我们努力的动力！！
|
||||
|
||||
|
||||
## 致开发者
|
||||
|
||||
感谢各位开发者`三年`来对秋云及uCharts的支持，uCharts的进步离不开各位开发者的鼓励与贡献，为更好的帮助各位开发者在uni-app生态系统更好的应用图表，uCharts始终坚持开源，并提供社群帮助开发者解决问题。 为确保您能更好的应用图表组件，建议您先`仔细阅读本页文档`以及uCharts官方文档，而不是下载下来`直接使用`。 如遇到问题请先阅读文档，如仍然不能解决，请加入QQ群咨询，如群友均不能解决或者您有特殊需求，请在群内私聊我，因工作原因，回复不一定很及时，您可直接说问题，有时间一定会回复您。
|
||||
|
||||
uCharts的开源图表组件的开发，付出了大量的个人时间与精力，经过两年来的考验，不会有比较明显的bug，请各位放心使用。不求您5星评价，也不求您赞赏，`只求您对开源贡献的支持态度`，所以，当您想给`1星评价`的时候，秋云真的会`含泪希望您绕路而行……`。如果您有更好的想法，可以在`码云提交Pull Requests`以帮助更多开发者完成需求，再次感谢各位对uCharts的鼓励与支持！
|
||||
|
||||
## 快速体验
|
||||
|
||||
一套代码编到7个平台，依次扫描二维码，亲自体验uCharts图表跨平台效果！IOS因demo比较简单无法上架，请自行编译。
|
||||
|
||||
|
||||
## 快速上手
|
||||
### <font color=#FF0000> 注意前提条件【版本要求：HBuilderX 3.1.0+】 </font>
|
||||
- 1、插件市场点击右侧绿色按钮【使用HBuilderX导入插件】，或者【使用HBuilderX导入示例项目】查看完整示例工程
|
||||
- 2、依赖uniapp的vue-cli项目：请将uni-modules目录复制到src目录，即src/uni_modules。（请升级uniapp依赖为最新版本）
|
||||
- 3、页面中直接按下面用法直接调用即可，无需在页面中注册组件qiun-data-charts
|
||||
- 4、注意父元素class='charts-box'这个样式需要有宽高
|
||||
|
||||
## 基本用法
|
||||
|
||||
- template代码：（[建议使用在线工具生成](https://demo.ucharts.cn)）
|
||||
|
||||
```
|
||||
<view class="charts-box">
|
||||
<qiun-data-charts type="column" :chartData="chartData" />
|
||||
</view>
|
||||
```
|
||||
|
||||
- 标准数据格式1：（折线图、柱状图、区域图等需要categories的直角坐标系图表类型）
|
||||
|
||||
```
|
||||
chartData:{
|
||||
categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
|
||||
series: [{
|
||||
name: "目标值",
|
||||
data: [35, 36, 31, 33, 13, 34]
|
||||
}, {
|
||||
name: "完成量",
|
||||
data: [18, 27, 21, 24, 6, 28]
|
||||
}]
|
||||
}
|
||||
```
|
||||
|
||||
- 标准数据格式2：（饼图、圆环图、漏斗图等不需要categories的图表类型）
|
||||
|
||||
```
|
||||
chartData:{
|
||||
series: [{
|
||||
data: [
|
||||
{
|
||||
name: "一班",
|
||||
value: 50
|
||||
}, {
|
||||
name: "二班",
|
||||
value: 30
|
||||
}, {
|
||||
name: "三班",
|
||||
value: 20
|
||||
}, {
|
||||
name: "四班",
|
||||
value: 18
|
||||
}, {
|
||||
name: "五班",
|
||||
value: 8
|
||||
}
|
||||
]
|
||||
}]
|
||||
}
|
||||
```
|
||||
|
||||
注：其他特殊图表类型，请参考mockdata文件夹下的数据格式，v2.0版本的uCharts已兼容ECharts的数据格式，v2.0版本仍然支持v1.0版本的数据格式。
|
||||
|
||||
## localdata数据渲染用法
|
||||
|
||||
- 使用localdata数据格式渲染图表的优势：数据结构简单，无需自行拼接chartData的categories及series，从后端拿回的数据简单处理即可生成图表。
|
||||
- localdata数据的缺点：并不是所有的图表类型均可通过localdata渲染图表，例如混合图，组件并不能识别哪个series分组需要渲染成折线还是柱状图，涉及到复杂的图表，仍需要由chartData传入。
|
||||
|
||||
- template代码：（[建议使用在线工具生成](https://demo.ucharts.cn)）
|
||||
|
||||
```
|
||||
<view class="charts-box">
|
||||
<qiun-data-charts type="column" :localdata="localdata" />
|
||||
</view>
|
||||
```
|
||||
|
||||
|
||||
- 标准数据格式1：（折线图、柱状图、区域图等需要categories的直角坐标系图表类型）
|
||||
|
||||
其中value代表数据的数值，text代表X轴的categories数据点，group代表series分组的类型名称即series[i].name。
|
||||
|
||||
```
|
||||
localdata:[
|
||||
{value:35, text:"2016", group:"目标值"},
|
||||
{value:18, text:"2016", group:"完成量"},
|
||||
{value:36, text:"2017", group:"目标值"},
|
||||
{value:27, text:"2017", group:"完成量"},
|
||||
{value:31, text:"2018", group:"目标值"},
|
||||
{value:21, text:"2018", group:"完成量"},
|
||||
{value:33, text:"2019", group:"目标值"},
|
||||
{value:24, text:"2019", group:"完成量"},
|
||||
{value:13, text:"2020", group:"目标值"},
|
||||
{value:6, text:"2020", group:"完成量"},
|
||||
{value:34, text:"2021", group:"目标值"},
|
||||
{value:28, text:"2021", group:"完成量"}
|
||||
]
|
||||
```
|
||||
|
||||
- 标准数据格式2：（饼图、圆环图、漏斗图等不需要categories的图表类型）
|
||||
|
||||
其中value代表数据的数值，text代表value数值对应的描述。
|
||||
|
||||
```
|
||||
localdata:[
|
||||
{value:50, text:"一班"},
|
||||
{value:30, text:"二班"},
|
||||
{value:20, text:"三班"},
|
||||
{value:18, text:"四班"},
|
||||
{value:8, text:"五班"},
|
||||
]
|
||||
```
|
||||
|
||||
- 注意，localdata的数据格式必需要符合datacom组件规范[【详见datacom组件】](https://uniapp.dcloud.io/component/datacom?id=mixindatacom)。
|
||||
|
||||
## 进阶用法读取uniCloud数据库并渲染图表
|
||||
|
||||
- 组件基于uniCloud的[clientDB](https://uniapp.dcloud.net.cn/uniCloud/clientdb)技术，无需云函数，在前端对数据库通过where查询条件及group和count统计即可渲染图表。
|
||||
- 具体可参考/pages/unicloud/unicloud.vue中的demo例子，使用前，请先关联云服务空间，然后在uniCloud/database/db_init.json文件上点右键，初始化云数据库，当控制台显示“初始化云数据库完成”即完成示例数据的导入，之后方可运行uniCloud的demo。
|
||||
|
||||
- template代码：
|
||||
|
||||
```
|
||||
<qiun-data-charts
|
||||
type="line"
|
||||
:chartData="demoData"
|
||||
collection="uni-id-users"
|
||||
field="register_date,status"
|
||||
:where="'publish_date >= ' + new Date(startDate).getTime() + ' && publish_date <= ' + new Date(endDate).getTime()"
|
||||
groupby="dateToString(add(new Date(0),register_date),'%Y-%m-%d','+0800') as text,status as group"
|
||||
group-field="count(*) as value"
|
||||
/>
|
||||
```
|
||||
|
||||
- 注意，从uniCloud读取出的数据，需要符合localdata的标准结果数据格式（参考上部分localdata），并需要把输出的字段as成规定的别名（value、text、group）。
|
||||
|
||||
|
||||
## 示例文件地址：
|
||||
|
||||
### <font color=#FF0000> 强烈建议先看本页帮助，再看下面示例文件源码！</font>
|
||||
|
||||
```
|
||||
/pages/ucharts/ucharts.vue（展示用uCharts全端运行的例子）
|
||||
|
||||
/pages/echarts/echarts.vue（展示H5和App用ECharts，小程序端用uCharts的例子）
|
||||
|
||||
/pages/unicloud/unicloud.vue（展示读取uniCloud数据库后直接渲染图表的例子）
|
||||
|
||||
/pages/updata/updata.vue（展示动态更新图表数据的例子）
|
||||
|
||||
/pages/other/other.vue（展示图表交互的例子：动态更新图表数据，渲染完成事件，获取点击索引，自定义tooltip，图表保存为图片，强制展示错误信息等）
|
||||
|
||||
/pages/format-u/format-u.vue（展示uCharts的formatter用法的例子）
|
||||
|
||||
/pages/format-e/format-e.vue（展示ECharts的formatter用法的例子）
|
||||
|
||||
/pages/tab/tab.vue（展示再tab选项卡中用法的例子，即父容器采用v-show或v-if时需要注意的问题）
|
||||
|
||||
/pages/layout/layout.vue（展示特殊布局用法的例子：swiper、scroll-view、绝对定位等布局）
|
||||
|
||||
/pages/canvas/canvas.vue（展示uCharts v2.0版本原生js用法的例子）
|
||||
|
||||
```
|
||||
|
||||
|
||||
## 组件基本API参数
|
||||
|
||||
|属性名|类型|默认值|必填|说明|
|
||||
| -- | -- | -- | -- | -- |
|
||||
|type|String|null|`是`|图表类型，如全端用uCharts，可选值为pie、ring、rose、word、funnel、map、arcbar、line、column、bar、area、radar、gauge、candle、mix、tline、tarea、scatter、bubble <font color=#FF0000>（您也可以根据需求自定义新图表类型，需要在config-ucharts.js或config-echarts.js内添加，可参考config-ucharts.js内的"demotype"类型）</font>|
|
||||
|chartData|Object|见说明|`是`|图表数据，常用的标准数据格式为{categories: [],series: []}，请按不同图表类型传入对应的标准数据。|
|
||||
|localdata|Array|[]|`是`|图表数据，如果您觉得拼接上面chartData比较繁琐，可以通过使用localdata渲染，组件会根据传入的type类型，自动拼接categories或series数据（使用localdata就不必再传入chartData，详见 /pages/other/other.vue 中使用localdata渲染图表的例子）。【localdata和collection（uniCloud数据库）同时存在，优先使用localdata；如果localdata和chartData同时存在，优先使用chartData。<font color=#FF0000> 即chartData>localdata>collection的优先级</font>渲染图表】。|
|
||||
|opts|Object|{}|否|uCharts图表配置参数(option)，请参考[【在线生成工具】](https://demo.ucharts.cn)<font color=#FF0000>注：传入的opts会覆盖默认config-ucharts.js中的配置，只需传入与config-ucharts.js中属性不一致的opts即可实现【同类型的图表显示不同的样式】。</font>|
|
||||
|eopts|Object|{}|否|ECharts图表配置参数(option)，请参考[【ECharts配置手册】](https://echarts.apache.org/zh/option.html)传入eopts。<font color=#FF0000>注：1、传入的eopts会覆盖默认config-echarts.js中的配置，以实现同类型的图表显示不同的样式。2、eopts不能传递function，如果option配置参数需要function，请将option写在config-echarts.js中即可实现。</font>|
|
||||
|loadingType|Number|2|否|加载动画样式，0为不显示加载动画，1-5为不同的样式，见下面示例。|
|
||||
|errorShow|Boolean|true|否|是否在页面上显示错误提示，true为显示错误提示图片，false时会显示空白区域|
|
||||
|errorReload|Boolean|true|否|是否启用点击错误提示图表重新加载，true为允许点击重新加载，false为禁用点击重新加载事件|
|
||||
|errorMessage|String|null|否|自定义错误信息，强制显示错误图片及错误信息，当上面errorShow为true时可用。（组件会监听该属性的变化，只要有变化，就会强制显示错误信息！）。说明：1、一般用于页面网络不好或其他情况导致图表loading动画一直显示，可以传任意(不为null或者"null"或者空"")字符串强制显示错误图片及说明。2、如果组件使用了data-come属性读取uniCloud数据，组件会自动判断错误状态并展示错误图标，不必使用此功能。3、当状态从非null改变为null或者空时，会强制调用reload重新加载并渲染图表数据。|
|
||||
|echartsH5|Boolean|false|否|是否在H5端使用ECharts引擎渲染图表|
|
||||
|directory|String|'/'|否|二级目录名称，如果开启上面echartsH5即H5端用ECharts引擎渲染图表，并且项目未发布在website根目录，需要填写此项配置。例如二级目录是h5，则需要填写`/h5/`，左右两侧需要带`/`，发布到三级或更多层目录示例`/web/v2/h5/`|
|
||||
|echartsApp|Boolean|false|否|是否在APP端使用ECharts引擎渲染图表|
|
||||
|canvasId|String|见说明|否|默认生成32位随机字符串。如果指定canvasId，可方便后面调用指定图表实例，否则需要通过渲染完成事件获取自动生成随机的canvasId|
|
||||
|canvas2d|Boolean|false|否|是否开启canvas2d模式，用于解决微信小程序层级过高问题，仅微信小程序端可用，其他端会强制关闭canvas2d模式。<font color=#FF0000>注：开启canvas2d模式，必须要传入上面的canvasId（随机字符串，不能是动态绑定的值，不能是数字），否则微信小程序可能会获取不到dom导致无法渲染图表！**开启后，开发者工具显示不正常，预览正常（不能“真机调试”,不能“真机调试”,不能“真机调试”）**</font>|
|
||||
|background|String|none|否|背景颜色，默认透明none，可选css的16进制color值，如#FFFFFF|
|
||||
|animation|Boolean|true|否|是否开启图表动画效果|
|
||||
|inScrollView|Boolean|false|否|图表组件是否在scroll-view中，如果在请传true，否则会出现点击事件坐标不准确的现象|
|
||||
|pageScrollTop|Number|0|否|如果图表组件是在scroll-view中，并且整个页面还存在滚动条，这个值应为绑定为页面滚动条滚动的距离，否则会出现点击事件坐标不准确的现象|
|
||||
|reshow|Boolean|false|否|强制重新渲染属性，如果图表组件父级用v-show包裹，初始化的时候会获取不到元素的宽高值，导致渲染失败，此时需要把父元素的v-show方法复制到reshow中，组件检测到reshow值变化并且为true的时候会强制重新渲染|
|
||||
|reload|Boolean|false|否|强制重新加载属性，与上面的reshow区别在于：1、reload会重新显示loading动画；2、如果组件绑定了uniCloud数据查询，通过reload会重新执行SQL语句查询，重新请求网络。而reshow则不会显示loading动画，只是应用现有的chartData数据进行重新渲染|
|
||||
|disableScroll|Boolean|false|否|当在canvas中移动时，且有绑定手势事件时，禁止屏幕滚动以及下拉刷新（赋值为true时，在图表区域内无法拖动页面滚动）|
|
||||
|tooltipShow|Boolean|true|否|点击或者鼠标经过图表时，是否显示tooltip提示窗，默认显示|
|
||||
|tooltipFormat|String|undefined|否|自定义格式化Tooltip显示内容，详见下面【tooltipFormat格式化】|
|
||||
|tooltipCustom|Object|undefined|否|（仅uCharts）如果以上系统自带的Tooltip格式化方案仍然不满足您，您可以用此属性实现更多需求，详见下面【tooltipCustom自定义】|
|
||||
|startDate|String|undefined|否|需为标准时间格式，例如"2021-02-14"。用于配合uniClinetDB自动生成categories使用|
|
||||
|endDate|String|undefined|否|需为标准时间格式，例如"2021-03-31"。用于配合uniClinetDB自动生成categories使用|
|
||||
|groupEnum|Array|[]|否|当使用到uniCloud数据库时，group字段属性如果遇到统计枚举属性的字段，需要通过将DB Schema中的enum的描述定义指派给该属性，具体格式为[{value: 1,text: "男"},{value: 2,text: "女"}]|
|
||||
|textEnum|Array|[]|否|当使用到uniCloud数据库时，text字段属性如果遇到统计枚举属性的字段，需要通过将DB Schema中的enum的描述定义指派给该属性，具体格式为[{value: 1,text: "男"},{value: 2,text: "女"}]|
|
||||
|ontap|Boolean|true|否|是否监听@tap@cilck事件，禁用后不会触发组件点击事件|
|
||||
|ontouch|Boolean|false|否|（仅uCharts）是否监听@touchstart@touchmove@touchend事件（赋值为true时，非PC端在图表区域内无法拖动页面滚动）|
|
||||
|onmouse|Boolean|true|否|是否监听@mousedown@mousemove@mouseup事件，禁用后鼠标经过图表上方不会显示tooltip|
|
||||
|on movetip|Boolean|false|否|（仅uCharts）是否开启跟手显示tooltip功能（前提条件，1、需要开启touch功能，即:ontouch="true"；2、并且opts.enableScroll=false即关闭图表的滚动条功能）（建议微信小程序开启canvas2d功能，否则原生canvas组件会很卡）|
|
||||
|tapLegend|Boolean|true|否|（仅uCharts）是否开启图例点击交互事件 |
|
||||
|
||||
## 组件事件及方法
|
||||
|
||||
|事件名|说明|
|
||||
| --| --|
|
||||
|@complete|图表渲染完成事件，渲染完成会返回图表实例{complete: true, id:"xxxxx"(canvasId), type:"complete"}。可以引入config-ucharts.js/config-echarts.js来根据返回的id，调用uCharts或者ECharts实例的相关方法，详见other.vue其他图表高级应用。|
|
||||
|@getIndex|获取点击数据索引，点击后返回图表索引currentIndex，图例索引（仅uCharts）legendIndex，等信息。返回数据：{type: "getIndex", currentIndex: 3, legendIndex: -1, id:"xxxxx"(canvasId), event: {x: 100, y: 100}（点击坐标值）}|
|
||||
|@error|当组件发生错误时会触发该事件。返回数据：返回数据：{type:"error",errorShow:true/false(组件props中的errorShow状态值) , msg:"错误消息xxxx", id: "xxxxx"(canvasId)}|
|
||||
|@getTouchStart|（仅uCharts）拖动开始监听事件。返回数据：{type:"touchStart",event:{x: 100, y: 100}（点击坐标值）,id:"xxxxx"(canvasId)}|
|
||||
|@getTouchMove|（仅uCharts）拖动中监听事件。返回数据：{type:"touchMove",event:{x: 100, y: 100}（点击坐标值）,id:"xxxxx"(canvasId)}|
|
||||
|@getTouchEnd|（仅uCharts）拖动结束监听事件。返回数据：{type:"touchEnd",event:{x: 100, y: 100}（点击坐标值）,id:"xxxxx"(canvasId)}|
|
||||
|@scrollLeft|（仅uCharts）开启滚动条后，滚动条到最左侧触发的事件，用于动态打点，需要自行编写防抖方法。返回数据：{type:"scrollLeft", scrollLeft: true, id: "xxxxx"(canvasId)}|
|
||||
|@scrollRight|（仅uCharts）开启滚动条后，滚动条到最右侧触发的事件，用于动态打点，需要自行编写防抖方法。返回数据：返回数据：{type:"scrollRight", scrollRight: true, id: "xxxxx"(canvasId)}|
|
||||
|
||||
## tooltipFormat格式化（uCharts和ECharts）
|
||||
|
||||
tooltipFormat类型为string字符串类型，需要指定config-ucharts.js/config-echarts.js中formatter下的属性值。因各小程序及app端通过组件均不能传递function类型参数，因此请先在config-ucharts.js/config-echarts.js内定义您想格式化的数据，然后在这里传入formatter下的key值，组件会自动匹配与其对应的function。如不定义该属性，组件会调用默认的tooltip方案，标准的tooltipFormat使用姿势如下：
|
||||
|
||||
```
|
||||
<qiun-data-charts
|
||||
type="column"
|
||||
:chartData="chartData"
|
||||
tooltipFormat="tooltipDemo1"
|
||||
⁄>
|
||||
==================
|
||||
config-ucharts.js
|
||||
formatter:{
|
||||
tooltipDemo1:function(item, category, index, opts){return item.data+'天'}
|
||||
}
|
||||
==================
|
||||
config-echarts.js
|
||||
formatter:{
|
||||
tooltipDemo1:function(){
|
||||
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
注意，config-ucharts.js内的formatter下的function需要携带(item, category, index, opts)参数，这4个参数都是uCharts实例内传递过来的数据，具体定义如下：
|
||||
|
||||
|属性名|说明|
|
||||
| -- | -- |
|
||||
|item|组件内计算好的当前点位的series[index]数据，其属性有data(继承series[index].format属性),color,type,style,pointShape,disableLegend,name,show|
|
||||
|category|当前点位的X轴categories[index]分类名称（如果图表类型没有category，其值则为undefined）|
|
||||
|index|当前点位的索引值|
|
||||
|opts|全部uCharts的opts配置，包含categories、series等一切你需要的都在里面，可以根据index索引值获取其他相关数据。您可以在渲染完成后打印一下opts，看看里面都有什么，也可以自定义一些你需要的挂载到opts上，这样就可以根据需求更方便的显示自定义内容了。|
|
||||
|
||||
## tooltipCustom自定义（仅uCharts）
|
||||
|
||||
上面仅仅展示了Tooltip的自定义格式化，如果仍然仍然还不能还不能满足您的需求，只能看这里的方法了。tooltipCustom可以自定义在任何位置显示任何内容的文本，当然tooltipCustom可以和tooltipFormat格式化同时使用以达到更多不同的需求，下面展示了tooltip固定位置显示的方法：
|
||||
|
||||
```
|
||||
<qiun-data-charts
|
||||
type="column"
|
||||
:chartData="chartData"
|
||||
:tooltipCustom="{x:10,y:10}"
|
||||
/>
|
||||
```
|
||||
|
||||
tooltipCustom属性如下：
|
||||
|
||||
|属性名|类型|默认值|说明|
|
||||
| -- | -- | -- | -- |
|
||||
|x|Number|undefined|tooltip左上角相对于画布的X坐标|
|
||||
|y|Number|undefined|tooltip左上角相对于画布的Y坐标|
|
||||
|index|Number|undefined|相对于series或者categories中的索引值。当没有定义index或者index定义为undefined的时候，组件会自动获取当前点击的索引，并根据上面的xy位置绘制tooltip提示框。如果为0及以上的数字时，会根据您传的索引自动计算x轴方向的偏移量（仅直角坐标系有效）|
|
||||
|textList|Array.Object|undefined|多对象数组，tooltip的文字组。当没有定义textList或者textList定义为undefined的时候，会调自动获取点击索引并拼接相应的textList。如传递[{text:'默认显示的tooltip',color:null},{text:'类别1：某个值xxx',color:'#2fc25b'},{text:'类别2：某个值xxx',color:'#facc14'},{text:'类别3：某个值xxx',color:'#f04864'}]这样定义好的数组，则会只显示该数组。|
|
||||
|textList[i].text|String| |显示的文字|
|
||||
|textList[i].color|Color| |左侧图表颜色|
|
||||
|
||||
## datacome属性及说明
|
||||
|
||||
- 通过配置datacome属性，可直接获取uniCloud云数据，并快速自动生成图表，使开发者只需专注业务及数据，无需关心如何拼接数据等不必要的重复工作，大大缩短开发时间。datacome属性及说明，详见[datacom组件规范](https://uniapp.dcloud.io/component/datacom?id=mixindatacom)
|
||||
|
||||
|属性名|类型|默认值|说明|
|
||||
| -- | -- | -- | -- |
|
||||
|collection|String| |表名。支持输入多个表名，用 , 分割|
|
||||
|field|String| |查询字段，多个字段用 , 分割|
|
||||
|where|String| |查询条件，内容较多，另见jql文档：[详情](https://uniapp.dcloud.net.cn/uniCloud/uni-clientDB?id=jsquery)|
|
||||
|orderby|String| |排序字段及正序倒叙设置|
|
||||
|groupby|String| |对数据进行分组|
|
||||
|group-field|String| |对数据进行分组统计|
|
||||
|distinct|Boolean|false|是否对数据查询结果中重复的记录进行去重|
|
||||
|action|string| |云端执行数据库查询的前或后，触发某个action函数操作，进行预处理或后处理，详情。场景：前端无权操作的数据，比如阅读数+1|
|
||||
|page-data|string|add|分页策略选择。值为 add 代表下一页的数据追加到之前的数据中，常用于滚动到底加载下一页；值为 replace 时则替换当前data数据，常用于PC式交互，列表底部有页码分页按钮|
|
||||
|page-current|Number|0|当前页|
|
||||
|page-size|Number|0|每页数据数量|
|
||||
|getcount|Boolean|false|是否查询总数据条数，默认 false，需要分页模式时指定为 true|
|
||||
|getone|Boolean|false|指定查询结果是否仅返回数组第一条数据，默认 false。在false情况下返回的是数组，即便只有一条结果，也需要[0]的方式获取。在值为 true 时，直接返回结果数据，少一层数组。一般用于非列表页，比如详情页|
|
||||
|gettree|Boolean|false|是否查询树状数据，默认 false|
|
||||
|startwith|String|''|gettree的第一层级条件，此初始条件可以省略，不传startWith时默认从最顶级开始查询|
|
||||
|limitlevel|Number|10|gettree查询返回的树的最大层级。超过设定层级的节点不会返回。默认10级，最大15，最小1|
|
||||
|
||||
## uni_modules目录说明
|
||||
|
||||
```
|
||||
├── components
|
||||
│ └── qiun-data-chatrs──────────# 组件主入口模块
|
||||
│ └── qiun-error────────────────# 加载动画组件文件目录（可以修改错误提示图标以减少包体积）
|
||||
│ └── qiun-loading──────────────# 加载动画组件文件目录（可以删除您不需要的动画效果以减少包体积）
|
||||
├── js_skd
|
||||
│ └── u-charts
|
||||
│ ── └──config-echarts.js ──────# ECharts默认配置文件（非APP端内可作为实例公用中转）
|
||||
│ ── └──config-ucharts.js ──────# uCharts默认配置文件（非APP端内可作为实例公用中转）
|
||||
│ ── └──u-charts-v2.0.0.js──────# uCharts基础库v2.0.0版本，部分API与之前版本不同
|
||||
├── static
|
||||
│ └── app-plus──────────────────# 条件编译目录，仅编译到APP端
|
||||
│ ── └──echarts.min.js──────────# Echarts基础库v4.2.1
|
||||
│ └── h5────────────────────────# 条件编译目录，仅编译到H5端
|
||||
│ ── └──echarts.min.js──────────# Echarts基础库v4.2.1
|
||||
```
|
||||
|
||||
|
||||
## 加载动画及错误提示
|
||||
- 为保证编译后的包体积，加载动画引用作者wkiwi提供的[w-loading](https://ext.dcloud.net.cn/plugin?id=504)中选取5种，如需其他样式请看下面说明。
|
||||
- loading的展示逻辑：
|
||||
* 1、如果是uniCloud数据，从发送网络请求到返回数据期间展示。
|
||||
* 2、如果是自行传入的chartData，当chartData.series=[]空数组的时候展示loading，也就是说初始化图表的时候，如果您没有数据，可以通过先传个空数组来展示loading效果，当chartData.series有数据后会自动隐藏loading图标。
|
||||
- <font color=#FF0000>如您修改了qiun-data-charts.vue组件文件，请务必在升级前备份您的文件，以免被覆盖！！！建议将加载状态显示做成组件，避免下次升级时丢失后无法找到。</font>
|
||||
|
||||
|
||||
## 配置文件说明
|
||||
|
||||
- <font color=#FF0000>注意，config-echarts.js和config-ucharts.js内只需要配置符合您项目整体UI的整体默认配置，根据需求，先用[【在线工具】](http://demo.ucharts.cn)调试好默认配置，并粘贴到配置文件中。</font>
|
||||
- <font color=#FF0000>如果需要与configjs中不同的配置，只需要在组件上绑定:opts或者:eopts传入与默认配置不同的某个属性及值即可覆盖默认配置，极大降低了代码量。</font>
|
||||
|
||||
- ECharts默认配置文件：config-echarts.js
|
||||
|
||||
i、<font color=#FF0000>如您修改了默认配置文件，请务必在升级前备份您的配置文件，以免被覆盖！！！</font>
|
||||
|
||||
ii、ECharts配置手册：[https://echarts.apache.org/zh/option.html](https://echarts.apache.org/zh/option.html)
|
||||
|
||||
iii、"type"及"categories"属性为支持的图表属性，您可参照ECharts配置手册，配置您更多的图表类型，并将对应的图表配置添加至下面
|
||||
|
||||
iv、"formatter"属性，因各小程序及app端通过组件均不能传递function类型参数，因此请先在此属性下定义您想格式化的数据，组件会自动匹配与其对应的function
|
||||
|
||||
v、"seriesTemplate"属性，因ECharts的大部分配置均在series内，seriesTemplate作为series的模板，这样只需要在这里做好模板配置，组件的数组层chartData（或者localdata或者collection）的series会自动挂载模板配置。如需临时或动态改变seriesTemplate，可在:eopts中传递seriesTemplate，详见pages/echarts/echarts.vue中的曲线图。
|
||||
|
||||
vi、ECharts配置仅可用于H5或者APP端，并且配置`echartsH5`或`echartsApp`为`true`时可用
|
||||
|
||||
- uCharts默认配置文件：config-ucharts.js
|
||||
|
||||
i、<font color=#FF0000>如您修改了默认配置文件，请务必在升级前备份您的配置文件，以免被覆盖！！！</font>
|
||||
|
||||
ii、v2版本后的uCharts基础库不提供配置手册，您可以使用在线配置生成工具来快速生成配置：[http://demo.ucharts.cn](http://demo.ucharts.cn)
|
||||
|
||||
iii、"type"及"categories"属性为支持的图表属性，不支持添加uCharts基础库没有的图表类型
|
||||
|
||||
iv、"formatter"属性因各小程序及app端通过组件均不能传递function类型参数，因此请先在此属性下定义您想格式化的数据，组件会自动匹配与其对应的function
|
||||
|
||||
v、uCharts配置可跨全端使用
|
||||
|
||||
|
||||
## 常见问题及注意事项
|
||||
|
||||
- `图表无法显示问题`：
|
||||
* 请先检查您的HBuilderX版本，要求高于3.1.0+。
|
||||
* 1、如果是首次导入插件不显示，或者报以下未注册`qiun-data-charts`的错误：
|
||||
> Unknown custom element: < qiun-data-charts > - did you register the component correctly? For recursive components, make sure to provide the "name" option.
|
||||
* 2、<font color=#FF0000>请【重启HBuilderX】或者【重启项目】或者【重启开发者工具】或者【删除APP基座】重新运行，避免缓存问题导致不能显示。</font>
|
||||
* 3、如果是基于uniapp的vue-cli项目，1、请 npm update 升级uniapp依赖为最新版本；2、请尝试清理node-modules，重新install，还不行就删除项目，再重新install。如果仍然不行，请检查uniapp依赖是否为最新版本，再重试以上步骤。如果仍然不行，请使用<font color=#FF0000>【非uni_modules版本】</font>组件，最新非uni_modules版本在码云发布，[点击此处获取](https://gitee.com/uCharts/uCharts/tree/master/qiun-data-charts%EF%BC%88%E9%9D%9Euni-modules%EF%BC%89)。。
|
||||
* 4、请检查控制台是否有报错或提示信息，如果没有报错，也没有提示信息，并且检查视图中class="charts-box"这个元素的宽高均为0，请修改父元素的css样式或进行下面第4步检查。
|
||||
* 5、检查父级是否使用了v-show来控制显示。如果页面初始化时组件处于隐藏状态，组件则无法正确获取宽高尺寸，此时<font color=#FF0000>需要组件内绑定reshow属性（逻辑应与父级的v-show的逻辑相同）</font>，强制重新渲染图表，例如:reshow="父级v-show绑定的事件"。
|
||||
* 6、如果在微信小程序端开启了canvas2d模式<font color=#FF0000>（不能使用真机调试，请直接预览）</font>不显示图表：
|
||||
* a、请务必在组件上定义canvasId，不能为纯数字、不能为变量、不能重复、尽量长一些。
|
||||
* b、请检查微信小程序的基础库，修改至2.16.0或者最新版本的基础库。
|
||||
* c、请检查父元素或父组件是否用v-if来控制显示，如有请改为v-show，并将v-show的逻辑绑定至组件。
|
||||
- `formatter格式化问题`：无论是uCharts还是ECharts，因为组件不能传递function，所有的formatter均需要变成别名format来定义，并在config-ucharts.js或config-echarts.js配置对应的formatter方法，组件会根据format的值自动替换配置文件中的formatter方法。（参考示例项目pages/format/format.vue）
|
||||
- `图表抖动问题`：如果开启了animation动画效果，由于组件内开启了chartData和opts的监听，当数据变化时会重新渲染图表，<font color=#FF0000>建议整体改变chartData及opts的属性值</font>，而不要通过循环或遍历来改变this实例下的chartData及opts，例如先定义一个临时变量，拼接好数据后再整体赋值。（参考示例项目pages/updata/updata.vue）
|
||||
- `微信小程序报错Maximum call stack size exceeded问题`:由于组件内开启了chartData和opts的监听，当数据变化时会重新渲染图表，<font color=#FF0000>建议整体改变chartData及opts的属性值</font>，而不要通过循环或遍历来改变this实例下的chartData及opts，例如先定义一个临时变量，拼接好数据后再整体赋值。（参考示例项目pages/updata/updata.vue）
|
||||
- `Loading状态问题`：如不使用uniClinetDB获取数据源，并且需要展示Loading状态，请先清空series，使组件变更为Loading状态，即this.chartData.series=[]即可展示，然后再从服务端获取数据，拼接完成后再传入this.chartData。如果不需要展示Loading状态，则不需要以上步骤，获取到数据，拼接好标准格式后，直接赋值即可。
|
||||
- `微信小程序图表层级过高问题`：因canvas在微信小程序是原生组件，如果使用自定义tabbar或者自定义导航栏，图表则会超出预期，此时需要给组件的canvas2d传值true来使用type='2d'的功能，开启此模式后，<font color=#FF0000>一定要在组件上自定义canvasId，不能为数字，不能动态绑定，要为随机字符串！不能“真机调试”，不能“真机调试”，不能“真机调试”</font>开发者工具显示不正常，图表层级会变高，而正常预览或者发布上线则是正常状态，开发者不必担心，一切以真机预览为准（因微信开发者工具显示不正确，canvas2d这种模式下给调试带来了困难，开发时，可以先用:canvas2d="false"来调试，预览无误后再改成true）。
|
||||
- `开启canvas2d后图表不显示问题`：开启canvas2d后，需要手动指定canvasId，并且父元素不能含有v-if，否则会导致获取不到dom节点问题，请将v-if改成v-show，更多开启canvas2d不显示问题，请参考示例项目pages/layout/layout.vue文件，对照示例项目修改您的项目。
|
||||
- `MiniPorgramError U.createEvent is ot a function`：此问题一般是微信小程序开启了canvas2d，并点击了“真机调试导致”，参考上面【微信小程序图表层级过高问题】解决办法，开启2d后，不可以真机调试，只能开发者工具调试或者扫二维码“预览”。
|
||||
- `在图表上滑动无法使页面滚动问题`：此问题是因为监听了touchstart、touchmove和touchend三个事件，或者开启了disableScroll属性，如果您的图表不需要开启图表内的滚动条功能，请禁用这三个方法的监听，即:ontouch="false"或者:disableScroll="false"即可（此时图表组件默认通过@tap事件来监听点击，可正常显示Tooltip提示窗）。
|
||||
- `开启滚动条无法拖动图表问题`：此问题正与以上问题相反，是因为禁用了监听touchstart、touchmove和touchend三个事件，请启用这三个方法的监听，即在组件上加入 :ontouch="true" 即可。注意，不要忘记在opts里需要配置enableScroll:true，另外如果需要显示滚动条，需要在xAxis中配置scrollShow:ture，及itemCount（单屏数据密度）数量的配置。
|
||||
- `开启滚动条后图表两侧有白边问题`：此问题是因为组件上的background为none或者没有指定，请在组件上加入background="#000000"(您的背景色)。如果父元素为图片，尽量不要开启滚动条，此时图表是透明色，可以显示父元素背景图片。
|
||||
- `开启滚动条后动态打点更新数据滚动条位置问题`：开启滚动条后动态打点，需要把opts中update需要赋值为true，来启用uCharts的updateData方法来更新视图，详见示例项目pages/updata/updata.vue。
|
||||
- `地图变形问题`：此问题是因为您引用的geojson地图数据的坐标系可能是地球坐标(WGS84)导致，需要开启【是否进行WGS84转墨卡托投影】功能。开启后因大量的数据运算tooltip可能会不跟手，建议自行转换为墨卡托坐标系，可参照源码内function lonlat2mercator()。其他地图数据下载地址：[http://datav.aliyun.com/tools/atlas/](http://datav.aliyun.com/tools/atlas/)
|
||||
- `支付宝（钉钉）小程序无法点击问题`：请检查支付宝小程序开发者工具中，点击【详情】，在弹出的【项目详情】中【取消】启用小程序基础库 2.0 构建，一定不要勾选此项。
|
||||
- `uni-simple-router中使用问题`：如果使用uni-simple-router路由插件，H5开启完全路由模式（即h5:{vueRouterDev:true}）时，会导致组件内uni.xxx部分方法失效，引发节点获取不正常报错，请使用普通模式即可。
|
||||
- `Y轴刻度标签数字重复问题`：此问题一般是series数据内数值较小，而Y轴网格数量较多，并且Y轴刻度点显示整数导致。解决方法1，Y轴刻度值保留两位小数，组件上传值 :opts="{yAxis:{data:[{tofix:2}]}}"；解决方法2，修改Y轴网格数量为series中的最大值的数量，例如series中最大值为3，那么修改yAxis.splitNumber=3即可；解决方法3，根据Y轴网格数量修改Y轴最大值 :opts="{yAxis:{data:[{max:5}]}}"。
|
||||
- `柱状图柱子高度不符合预期问题`：此问题是Y轴最小值未默认为0的问题导致，组件上传值 :opts="{yAxis:{data:[{min:0}]}}"即可解决。
|
||||
- `饼图类百分比改其他文案的问题`：参考示例项目pages/format-u/format-u.vue，在chartData的series中使用format。
|
||||
|
||||
## [更多常见问题以官方网站【常见问题】为准](http://demo.ucharts.cn)
|
||||
|
||||
## QQ群号码
|
||||
## <font color=#FF0000> 请先完整阅读【帮助文档】及【常见问题】3遍，右侧蓝色按钮【示例项目】请看2遍！不看文档不看常见问题进群就问的拒绝回答问题！咨询量太大请理解作者！ </font>
|
||||
- 交流群1：371774600（已满）
|
||||
- 交流群2：619841586
|
||||
- 交流群3：955340127（已满）
|
||||
- 交流群4：641669795
|
||||
- 口令`uniapp`
|
||||
|
||||
|
||||
## 相关链接
|
||||
- [DCloud插件市场地址](https://ext.dcloud.net.cn/plugin?id=271)
|
||||
- [uCharts官网](https://www.ucharts.cn)
|
||||
- [uCharts码云开源托管地址](https://gitee.com/uCharts/uCharts) [](https://gitee.com/uCharts/uCharts/stargazers)
|
||||
- [图表组件在项目中的应用 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||
- [ECharts官网](https://echarts.apache.org/zh/index.html)
|
||||
- [ECharts配置手册](https://echarts.apache.org/zh/option.html)
|
||||
- [`wkiwi`提供的w-loading组件地址](https://ext.dcloud.net.cn/plugin?id=504)
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue