小程序 打开方式 页面效果 表单页面 点击跳到详情页 图标 获取后台数据 进行页面渲染

 请求地址：geecg-uniapp 同源策略 数据请求 获取后台数据 ui库安装 冲突解决（3）-CSDN博客

一.uniapp转小程序  

(1)  运行微信开发工具

（2） 配置id  然后运行

 打开小程序  路径  E:\通\uniapp-jeecg\unpackage\dist\dev\mp-weixin

（5）运行

二.表单页面

<template><view><cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="content">额外加工</block></cu-custom><uni-section title=" "><view style="margin: 0 20px;"><uni-forms ref="customForm" :rules="customRules" :modelValue="customFormData"><uni-forms-item label="类型" required name="seType"><uni-data-select v-model="customFormData.seType" :localdata="range" style="width: 215px; "@change="select"></uni-data-select></uni-forms-item><uni-forms-item label="石材编号" required name="seRknum"><uni-data-select style="width: 215px; " v-model="customFormData.seRknum" :localdata="candidates"></uni-data-select></uni-forms-item><uni-forms-item label="日期时间" required name="seDate"><uni-datetime-picker style="width: 215px; " type="datetime" return-type="timestamp" v-model="customFormData.seDate" /></uni-forms-item><uni-forms-item label="长" required name="seLong"><!-- <input  v-model="customFormData.seLong"   placeholder="请输入长" type="number"  /> --><input class="uni-input " name="input" v-model="customFormData.seLong" placeholder="请输入长"@input="fpNumInput" /></uni-forms-item><uni-forms-item label="宽" required name="seWeight"><input class="uni-input " name="input" v-model="customFormData.seWeight" placeholder="请输入宽"type="number" @input="fpNumInputseWeight" /></uni-forms-item><uni-forms-item label="高" required name="seHeight"><input class="uni-input " name="input" v-model="customFormData.seHeight" placeholder="请输入高"type="number" @input="fpNumInputseHeight" /></uni-forms-item><uni-forms-item label="数量" required name="seNum"><input class="uni-input " name="input" v-model="customFormData.seNum" placeholder="请输入数量"type="number" @input="fpNumInputseNum" /></uni-forms-item><uni-forms-item label="面积" required name="seMj"><input class="uni-input " name="input" v-model="customFormData.seMj" placeholder="请输入面积"type="number" @input="fpNumInputseMj" /></uni-forms-item><uni-forms-item label="体积" required name="seTj"><input class="uni-input " name="input" v-model="customFormData.seTj" placeholder="请输入体积"type="number" @input="fpNumInputseTj" /></uni-forms-item><uni-forms-item label="额外加工" required name="sePromed"><uni-data-select style="width: 215px; " v-model="customFormData.sePromed" :localdata="sePromed"></uni-data-select></uni-forms-item><uni-forms-item label="机组" required name="seSet"><uni-data-select style="width: 215px; " v-model="customFormData.seSet" :localdata="seSets"></uni-data-select></uni-forms-item><uni-forms-item label="单价" required name="sePrice"><input class="uni-input " name="input" v-model="customFormData.sePrice" placeholder="请输入单价"type="number" @input="fpNumInputsePrice" /></uni-forms-item><uni-forms-item label="总价"><input class="uni-input " name="input" v-model="customFormData.seZprice" placeholder="请输入总价"type="number" @input="fpNumInputseZprice" /></uni-forms-item><uni-forms-item label="人员" required name="sePerson"><uni-data-select style="width: 215px; " v-model="customFormData.sePerson" :localdata="sePerson"></uni-data-select></uni-forms-item><uni-forms-item label="操作人"><uni-easyinput v-model="customFormData.seOpuser" placeholder="请输入操作人" disabled  style="width: 215px; "/><!-- <input class="uni-input " v-model="customFormData.seOpuser" placeholder="请输入操作人" disabled /> --></uni-forms-item><uni-forms-item label="图片" required name="sePic"><uni-file-picker v-model="imageValue" fileMediatype="image" mode="grid" @select="upload"@delete="delIMG" title="最多选择3张图片" :auto-upload='false' limit="3"></uni-file-picker></uni-forms-item><uni-forms-item label="备注"><uni-easyinput style="width: 215px; " type="textarea" v-model="customFormData.seRemake" placeholder="请输入备注" /></uni-forms-item></uni-forms><button type="primary" @click="submit('customForm')" style='background-color: blue;'>提交</button></view></uni-section></view>
</template>
<script>
export default {data() {return {imgURL: '',imageValue: [],imageUrls: [],tableDatafinish: [],// 定义初始数据  绑定类型   :localdata="range"range: [{value: 1,text: "荒料"},{value: 2,text: "板材成品"},{value: 3,text: "板材半成品"},{value: 4,text: "路边石成品"},{value: 5,text: "路边石半成品"},{value: 6,text: "界石成品"},{value: 7,text: "界石半成品"}],// 定义初始数据  绑定石材编号   :localdata="candidates"candidates: [],// 定义初始数据  绑定机组   :localdata="seSet"seSets: [],// 定义初始数据  绑定机组   :localdata="seSet"sePerson: [],sePromed: [],// 定义初始数据  绑定输入框  获取输入数据   v-model="customFormData.xxx" aacustomFormData: {seType: '',seRknum: '',seDate: new Date(),seLong: '',seWeight: '',seHeight: '',seNum: '',seMj: '',seTj: '',sePromed: '',seSet: '',sePrice: '',seZprice: '',sePerson: '',seOpuser: '',seRemake: '',sePic: ''},customRules: {seType: {rules: [{required: true,errorMessage: '石材编号不能为空'}]},seRknum: {rules: [{required: true,errorMessage: '石材编号不能为空'}]},seDate: {rules: [{required: true,errorMessage: '时间不能为空'}]},seLong: {rules: [{required: true,errorMessage: '长度不能为空'}]},// seLong: [// 		 { required: true, message: '请再次输入密码', trigger: 'blur' },// 		          { pattern: /^\S{6,15}$/, message: '请输入 6 ~ 15 位的非空字符', trigger: 'blur' },// ],seWeight: {rules: [{required: true,errorMessage: '宽度不能为空'}]},seHeight: {rules: [{required: true,errorMessage: '高度不能为空'}]},seNum: {rules: [{required: true,errorMessage: '数量不能为空'}]},seMj: {rules: [{required: true,errorMessage: '面积不能为空'}]},seTj: {rules: [{required: true,errorMessage: '体积不能为空'}]},sePromed: {rules: [{required: true,errorMessage: '额外加工不能为空'}]},seSet: {rules: [{required: true,errorMessage: '机组不能为空'}]},sePrice: {rules: [{required: true,errorMessage: '单价不能为空'}]},sePerson: {rules: [{required: true,errorMessage: '人员不能为空'}]},},}},mounted() {// 机组let url33 = '/ewjg/smsEwjg/gztj';this.$http.get(url33).then(res => {console.log(res.data.result)res.data.result.records.forEach(value => { //循环 添加到 candidatesthis.seSets.push({value: value.seSet,text: value.seSet_dictText})})res.data.result.records.forEach(value => { //循环 添加到 candidatesthis.sePerson.push({value: value.sePerson,text: value.sePerson_dictText})})res.data.result.records.forEach(value => { //循环 添加到 candidatesthis.sePromed.push({value: value.sePromed,text: value.sePromed_dictText})})})},methods: {fpNumInput(e) {const o = e.target;const inputRule = /[^\d]/gthis.$nextTick(function() {this.customFormData.seLong = o.value.replace(inputRule, '');})},fpNumInputseWeight(e) {const o = e.target;const inputRule = /[^\d]/gthis.$nextTick(function() {this.customFormData.seWeight = o.value.replace(inputRule, '');})},fpNumInputseHeight(e) {const o = e.target;const inputRule = /[^\d]/gthis.$nextTick(function() {this.customFormData.seHeight = o.value.replace(inputRule, '');})},fpNumInputseNum(e) {const o = e.target;const inputRule = /[^\d]/gthis.$nextTick(function() {this.customFormData.seNum = o.value.replace(inputRule, '');})},fpNumInputseMj(e) {const o = e.target;const inputRule = /[^\d]/gthis.$nextTick(function() {this.customFormData.seMj = o.value.replace(inputRule, '');})},fpNumInputseTj(e) {const o = e.target;const inputRule = /[^\d]/gthis.$nextTick(function() {this.customFormData.seTj = o.value.replace(inputRule, '');})},fpNumInputsePrice(e) {const o = e.target;const inputRule = /[^\d]/gthis.$nextTick(function() {this.customFormData.sePrice = o.value.replace(inputRule, '');})},fpNumInputseZprice(e) {const o = e.target;const inputRule = /[^\d]/gthis.$nextTick(function() {this.customFormData.seZprice = o.value.replace(inputRule, '');})},// 获取上传状态upload(e) {this.imageValue.push(e.tempFiles[0])},delIMG(e) {const index = this.imageValue.findIndex(v => v.url === e.tempFilePath);if (index !== -1) {this.imageValue.splice(index, 1);}},submitImage() {if (this.imageValue.length != 0) {const uploadPromises = this.imageValue.map(val => {const formData = {biz: 'temp',};return new Promise((resolve, reject) => {uni.uploadFile({url: 'http://43.138.31.228:1888/jeecg-boot/sys/common/upload',formData: formData,filePath: val.path,name: 'file',fileType: 'image',fileName: val.name,success: (uploadFileRes) => {var jsonObject = JSON.parse(uploadFileRes.data);const imageUrl = jsonObject.message;this.imageUrls.push(imageUrl); // 将每次上传的图片链接添加到数组中if (this.imageUrls.length > 1) {this.customFormData.sePic = this.imageUrls.join(',');} else {this.customFormData.sePic = imageUrl}resolve();},fail: (err) => {reject(err);}});});});this.imageUrls = []return Promise.all(uploadPromises)} else {this.customFormData.sePic = '';return Promise.resolve(); // 如果没有上传图片，直接返回一个已解决的Promise对象}},select() {let url3 = '/cwkhfk/cwKhfk/scxxList';let params = {type: this.value //定义 this.value 赋值给type  最后parmas}this.$http.get(url3, {params: params //定义赋值  params = parmas}).then(res => {// this.candidates = res.data.resultres.data.result.forEach(value => { //循环 添加到 candidatesthis.candidates.push({value: value.number,text: value.number})})})},async submit(ref) {console.log('tijiao')// await this.submitImage();// console.log(this.customFormData.sePic)// //添加上传// let customFormData = this.customFormData// // 获取数据进行添加// let url = '/ewjg/smsEwjg/add';// var params = customFormData //定义赋值  params = customFormData  后端带着parmas去后端// this.$http.post(url, params).then(res => {//   this.customFormData = res.data.result// })// this.customFormData = ''// this.$refs[ref].validate().then(res => {//   console.log('success', res);//   uni.showToast({//     title: `校验通过`//   })// }).catch(err => {//   console.log('err', err);// })},}
}
</script><style>
.uni-input {width: 215px;font-size: 12px;height: 35px;border: 1px solid #dedede;padding: 0 5px;border-radius: 5px;
}
</style>

二. 点击跳到详情页

 父页面

<template><view class="order-list"><cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="content">荒料管理</block></cu-custom><view class="" ><!-- 订单展示 --><mescroll-uni ref="mescrollRef" @init="mescrollInit" top="60rpx" @down="downCallback" @up="upCallback"><!-- 数据列表 --><view class="data-list" style=" margin-top: 2rem;"><!-- 空内容展示--><u-empty :text="textNoMore" v-if="dataList.length==0" mode="list"></u-empty><!-- 空内容展示End--><view class="order margin-top-sm" v-for="(item, aindex) in dataList" :key="item.id"@click="jumpToOrder(item)"><view class='bg-white padding-sm flex padding-right-zero flex-between'><view class='flex-sub  radius text-left text-xs margin-top-xs'><image src="../../static/common/huang.png"style="width: 100rpx;height: 80rpx;margin-top: -10px;"></image></view><view class='flex-sub  radius text-left text-xs margin-top-xs'style="margin-left: -200px;font-size: 12px;">编号：{{ item.sbwWarehousingNumber}}</view></view><view class="bg-white padding-sm solid-top" ><view class='padding-top-sm text-sm flex'><view class="left-title"  style="font-size: 12px;">日期：</view><view class="right-content"  style="font-size: 12px;">{{ item.sbwWarehousingDate}}</view>					</view><view class='padding-top-sm text-sm flex'></view></view></view><!-- 返回顶部 --><u-back-top :scroll-top="scrollTop" top="600"></u-back-top><!-- 返回顶部End --></view></mescroll-uni></view><!-- 订单展示完毕End --></view></template><script>import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";import configService from '@/common/service/config.service.js';export default {mixins: [MescrollMixin],data() {return {pageable: {pageIndex: 0,pageSize: 10},list: [{complainantStatus: '0',name: '待解决'}, {complainantStatus: '10',name: '已解决'}],textNoMore :'-- 没有更多数据了 --',tabCurrent: 0,scrollTop: 0,dataList: [],}},methods: {//下拉刷新downCallback() {this.mescroll.scrollTo(0, 0)this.mescroll.resetUpScroll();},//上拉加载async upCallback(pages) {let pageIndex = pages.num // 页码, 默认从1开始let pageSize = pages.size // 页长, 默认每页10条this.pageable.pageIndex = pageIndexthis.pageable.pageSize = pageSizelet data = await this.getOrder(this.pageable)console.log("data" + data)const curPageData = data.records || []if (data && curPageData.length > 0) {const curPageLen = curPageData.length // 当前数据长度const totalPage = data.total // 获取接口总共有多少页this.mescroll.endByPage(curPageLen, totalPage);} else {this.mescroll.endErr()}},//订单列表async getOrder(pageable) {let that = thislet params = {openid: uni.getStorageSync("openId"),complainantStatus: this.list[this.tabCurrent].complainantStatus,pageNo: pageable.pageIndex,pageSize: pageable.pageSize}// console.log(params)let preData = {records: []}// 获取列表数据 await that.$http.get('/block/smsBlockWarehousing/list', {params: params}).then(res => {console.log(res)if (res.data.success !== true) {that.$tip.alert(res.data.message)} else {if (pageable.pageIndex < 2)that.dataList = [] // 如果是第一页需手动置空列表that.dataList.push(...res.data.result.records)  //数据添加到dataListconsole.log(res.data.result)preData = res.data.result;}}).catch(err => {// that.$tip.alert("网络波动，请重试！")console.log("err")})console.log(preData)return preData},// 点击跳转到huangliao页面 携带当前点击的id 过去jumpToOrder(item) {// console.log(item, 'adad')uni.navigateTo({url: '/pages/common/huangliao?id=' + item.id})},}}</script>

子页面


<template><view style="background-color: #ffffff;"><cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="content">荒料详情</block></cu-custom><u-form :model="form" ref="uForm"><view class="container"><view style="margin-top: 5px; font-size: 13px;padding:10px 15px ; display: flex;">入库编号 ：<spanstyle="color:#666;">{{form.sbwWarehousingNumber}}</span></view><view style="border: #e5e5e5 1px solid; margin: 10px;"></view><view style="margin-top: 5px; font-size: 13px;padding:10px 15px ;">入库日期 ：<spanstyle="color:#666;">{{form.sbwWarehousingDate}}</span></view><view style="border: #e5e5e5 1px solid; margin: 10px;;"></view><view style="margin-top: 5px; font-size: 13px;padding:10px 15px ;">荒料种类 ：<spanstyle="color:#666;">{{form.sbwName_dictText}}</span></view><view style="border: #e5e5e5 1px solid; margin: 10px;;"></view><view style="margin-top: 5px; font-size: 13px;padding:10px 15px ;">长 ：<spanstyle="color:#666;">{{form.sbwLong}}</span></view><view style="border: #e5e5e5 1px solid; margin: 10px;;"></view><view style="margin-top: 5px; font-size: 13px;padding:10px 15px ;">宽 ：<spanstyle="color:#666;">{{form.sbwWidth}}</span></view><view style="border: #e5e5e5 1px solid; margin: 10px;;"></view><view style="margin-top: 5px; font-size: 13px;padding:10px 15px ;">高 ：<spanstyle="color:#666;">{{form.sbwTall}}</span></view><view style="border: #e5e5e5 1px solid; margin: 10px;;"></view><view style="margin-top: 5px; font-size: 13px;padding:10px 15px ;">体积 ：<spanstyle="color:#666;">{{form.sbwSbwVolume}}</span></view><view style="border: #e5e5e5 1px solid; margin: 10px;;"></view><view style="margin-top: 5px; font-size: 13px;padding:10px 15px ;">颜色 ：<spanstyle="color:#666;">{{form.sbwColor_dictText}}</span></view><view style="border: #e5e5e5 1px solid; margin: 10px;;"></view><view style="margin-top: 5px; font-size: 13px;padding:10px 15px ;">价格 ：<spanstyle="color:#666;">{{form.sbwPrice}}</span></view><view style="border: #e5e5e5 1px solid; margin: 10px;;"></view><view style="margin-top: 5px; font-size: 13px;padding:10px 15px ;">数量 ：<spanstyle="color:#666;">{{form.sbwNum}}</span></view><view style="border: #e5e5e5 1px solid; margin: 10px;;"></view><view style="margin-top: 5px; font-size: 13px;padding:10px 15px ;">运单单价 ：<spanstyle="color:#666;">{{form.sbwFreightPrice}}</span></view><view style="border: #e5e5e5 1px solid; margin: 10px;;"></view><view style="margin-top: 5px; font-size: 13px;padding:10px 15px ;">运费 ：<spanstyle="color:#666;">{{form.sbwFreight}}</span></view><view style="border: #e5e5e5 1px solid; margin: 10px;;"></view><view style="margin-top: 5px; font-size: 13px;padding:10px 15px ;">运输人 ：<spanstyle="color:#666;">{{form.sbwTransporter_dictText}}</span></view><view style="border: #e5e5e5 1px solid; margin: 10px;;"></view><view style="margin-top: 5px; font-size: 13px;padding:10px 15px ;">总价 ：<spanstyle="color:#666;">{{form.sbwNum}}</span></view><view style="border: #e5e5e5 1px solid; margin: 10px;;"></view><view style="margin-top: 5px; font-size: 13px;padding:10px 15px ;">料场 ：<spanstyle="color:#666;">{{form.sbwFreight}}</span></view><view style="border: #e5e5e5 1px solid; margin: 10px;;"></view><view style="margin-top: 5px; font-size: 13px;padding:10px 15px ;">操作员 ：<spanstyle="color:#666;">{{form.sbwTransporter_dictText}}</span></view><view style="border: #e5e5e5 1px solid; margin: 10px;;"></view><view style="margin-top: 5px; font-size: 13px;padding:10px 15px ;">图片 ：<!-- <spanstyle="color:#666;">{{form.sbwPic}}</span> --><image src="form.sbwPic" mode=""></image></view><view style="border: #e5e5e5 1px solid; margin: 10px;;"></view><view style="margin-top: 5px; font-size: 13px;padding:10px 15px ;">文件 ：<spanstyle="color:#666;">{{form.sbwFile}}</span></view><view style="border: #e5e5e5 1px solid; margin: 10px;;"></view><view style="margin-top: 5px; font-size: 13px;padding:10px 15px ;">备注 ：<spanstyle="color:#666;">{{form.sbwRemake}}</span></view><view style="border: #e5e5e5 1px solid; margin: 10px;;"></view></view></u-form></view>
</template><script>export default {data() {return {form: {sbwWarehousingDate: '',sbwWarehousingNumber: '',sbwName_dictText: '',sbwLong: '',sbwWidth: '',sbwTall: '',sbwSbwVolume: '',sbwColor_dictText: '',sbwPrice: '',sbwNum: '',sbwFreightPrice: '',sbwFreight: '',sbwTransporter_dictText: '',sbwTotalPrice: '',sbwStockyard_dictText: '',sbwPic: '',sbwFile: '',sbwRemake: ''},}},onLoad: function(options) {this.getOrderDetail()},methods: {// 接受数据async getOrderDetail() {let that = thislet params = {id: this.id}console.log(params)//return await this.$http.get('/block/smsBlockWarehousing/list', {params: params}).then(res => {console.log("get RES")console.log(res.data.result.records[0], '马甲的喇嘛是的')if (res.data.success !== true) {that.form = res.data.result.records[0]that.$tip.alert(res.data.message)} else {that.form = res.data.result.records[0]if (that.form.complaintFileString) {that.fileList = that.form.complaintFileString.split(",")}console.log(that.fileList)}}).catch(err => {// that.$tip.alert("网络波动，请重试！")console.log(err)})},}}
</script>

三.图标

<template><view><cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="content">出库统计图</block></cu-custom><view><uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button" activeColor="#3a82f8"></uni-segmented-control></view><view class="charts-box"><qiun-data-charts type="pie":opts="opts":chartData="chartData"/><qiun-data-chartstype="mount":opts="opt":chartData="chartData"/></view></view>
</template><script>
import { forEach } from '../../common/luch-request/utils';
export default {data() {return {items: ['日', '月', '年'],current: 0,chartData: {},//您可以通过修改 config-ucharts.js 文件中下标为 ['pie'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。// 饼图opts: {color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],// padding: [15,5,5,5],// enableScroll: false,// legend: {// 	show:true,// 	lineHeight:20// },// extra: {//   pie: {//     activeOpacity: 0.5,//     activeRadius: 10,//     offsetAngle: 0,//     labelWidth: 15,//     border: true,//     borderWidth: 3,//     borderColor: "#FFFFFF"//   }// }},// 条形图opt: {color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],//        padding: [15,10,0,5],//        enableScroll: false,//        legend: {//   show:false,//  },//        xAxis: {//          disableGrid: true,// rotateLabel:true,// rotateAngle:"45",//        },//        yAxis: {//          data: [//            {//              min: 0//            }//          ]//        },//        extra: {//          mount: {//            type: "bar",//            widthRatio: 0.3,//            borderWidth: 0,//            barBorderRadius: [//              50,//              50,//              50,//              50//            ],//            linearType: "custom"//          }//        }}};},mounted() {var today = new Date();   // 日var yesterday = new Date(today.getTime()); // 月this.getServerData(yesterday.getFullYear() + "-" + (yesterday.getMonth() + 1) + "-" + yesterday.getDate(),'0') //年},methods: {// 定义方法  和值 (item,type)async getServerData(item,type) {let that = thislet params = {item: item,  //自己定义的值  和后端的值要对应  问后端type: type}// 请求数据  携带 paramsawait that.$http.get('/totalView/totalView/PieChuKu',{params: params}).then(res => {// 计算总值  reduce 累加  // 在括号内的箭头函数(acc, item) => acc + item.value是reduce方法所接受的函数。这个箭头函数接收两个参数，acc表示累加器（accumulator），item表示当前正在处理的数组元素。箭头函数的功能是将累加器acc和当前元素的value属性相加，并返回相加的结果。//最后的, 0表示reduce方法的初始值为0。这意味着在开始累加之前，累加器acc的初始值为0。const totalValue = res.data.result.reduce((acc, item) => acc + item.value, 0);// console.log(totalValue,'asasasasa')// 计算占比并更新数组// console.log(res.data.result,'dadsada')// 判断数据 要是是0  要么是有数值// 如果totalValue值 等于0  就循环遍历渲染if(totalValue==0){res.data.result.forEach(item => {item.labelText = '0%';  //强制数值变成0%  不写的话 就平均分成6份   因为有6份});}else{// 如果不是  就截取后两位  拼接上%res.data.result.forEach(item => {const percentage = (item.value / totalValue) * 100;  //获取的数值× 100item.labelText = percentage.toFixed(2)+"%";   //然后 拼接上%});}// ress是一个包含series属性的对象。
// series是一个包含一个对象的数组。
// 这个对象包含一个名为data的属性，其值为res.data.result，假设res是一个包含data属性的对象，而data属性包含一个名为result的数组。let ress = {series: [{data:res.data.result}]};this.chartData = JSON.parse(JSON.stringify(ress));}).catch(err => {console.log(err,"err")})},onClickItem(e) {if (this.current != e.currentIndex) {this.current = e.currentIndex;if(this.current=="0"){// var today = new Date(); 创建了一个Date对象，表示当前的日期和时间。它会将当前的日期和时间信息存储在today变量中。// console.log(today,'sasasasa') 打印出了today的值，以及额外的字符串sasasasa到控制台。这里主要是用来调试和查看today的值。// var yesterday = new Date(today.getTime()); 创建了另一个Date对象，其时间戳（以毫秒为单位的时间值）与today相同。这意味着yesterday代表的是和today相同的日期和时间。// this.getServerData(yesterday.getFullYear() + "-" + (yesterday.getMonth() + 1) + "-" + yesterday.getDate(),'2'); 这行代码调用了一个名为getServerData的方法，并传递了两个参数。第一个参数是一个表示日期的字符串，格式为"年-月-日"，通过yesterday.getFullYear() + "-" + (yesterday.getMonth() + 1) + "-" + yesterday.getDate()获取。第二个参数是字符串'2'。var today = new Date();var yesterday = new Date(today.getTime());this.getServerData(yesterday.getFullYear() + "-" + (yesterday.getMonth() + 1) + "-" + yesterday.getDate(),'0')}if(this.current=="1"){var today = new Date();var yesterday = new Date(today.getTime());this.getServerData(yesterday.getFullYear() + "-" + (yesterday.getMonth() + 1) + "-" + yesterday.getDate(),'1');}if(this.current=="2"){var today = new Date();  //显示console.log(today,'sasasasa')var yesterday = new Date(today.getTime());this.getServerData(yesterday.getFullYear() + "-" + (yesterday.getMonth() + 1) + "-" + yesterday.getDate(),'2');}  }}}
};
</script><style scoped>/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */.charts-box {width: 100%;height: 230px;}
</style>

地址：演示 - uCharts跨平台图表库 

 五，获取后台数据 进行页面渲染

案例一

（1）代码展示
<template><view><cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="content">荒料管理</block></cu-custom><view class="uni-container"><uni-table border stripe emptyText="暂无更多数据"><uni-tr style="background-color:#ebebeb;"><uni-th width="150" align="center">序号</uni-th><uni-th width="150" align="center">入库编号</uni-th><uni-th align="center">日期</uni-th><uni-th align="center">荒料种类</uni-th><uni-th align="center">长</uni-th><uni-th align="center">宽</uni-th><uni-th align="center">高</uni-th><uni-th align="center">体积</uni-th><uni-th align="center">颜色</uni-th><uni-th align="center">价格</uni-th><uni-th align="center">数量</uni-th><uni-th align="center">运单单价</uni-th><uni-th align="center">运费</uni-th><uni-th width="204" align="center">运输人</uni-th><uni-th width="204" align="center">总价</uni-th><uni-th width="204" align="center">料场</uni-th><uni-th align="center">操作员</uni-th><uni-th align="center">图片</uni-th><uni-th align="center">文件</uni-th><uni-th align="center">备注</uni-th></uni-tr><uni-tr v-for="(item, index) in tableData" :key="index"><uni-td>{{index+1}}</uni-td><uni-td><view class="name">{{ item.sbwWarehousingNumber}}</view></uni-td><uni-td align="center">{{ item.sbwWarehousingDate}}</uni-td><uni-td align="center">{{ item.sbwName_dictText }}</uni-td><uni-td align="center">{{ item.sbwLong }}</uni-td><uni-td align="center">{{ item.sbwWidth }}</uni-td><uni-td align="center">{{ item.sbwTall }}</uni-td><uni-td align="center">{{ item.sbwSbwVolume }}</uni-td><uni-td align="center">{{ item.sbwColor_dictText }}</uni-td><uni-td align="center">{{ item.sbwPrice }}</uni-td><uni-td align="center">{{ item.sbwNum }}</uni-td><uni-td align="center">{{ item.sbwFreightPrice }}</uni-td><uni-td align="center">{{ item.sbwFreight }}</uni-td><uni-td align="center">{{ item.sbwTransporter_dictText }}</uni-td><uni-td align="center">{{ item.sbwTotalPrice }}</uni-td><uni-td align="center">{{ item.sbwStockyard_dictText }}</uni-td><uni-td align="center">{{ item.sbwTransporter_dictText }}</uni-td><uni-td align="center">{{ item.sbwPic }}</uni-td><uni-td align="center">{{ item.sbwFile }}</uni-td><uni-td align="center">{{ item.sbwRemake }}</uni-td></uni-tr></uni-table><p>总数据量{{this.total}}</p><view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent":total="total" @change="change" /></view></view></view></template><script>export default {data() {return {searchVal: '',tableData: [],// 每页数据量pageSize: 10,// 当前页pageCurrent: 1,// 数据总量total: 0,}},onLoad() {this.selectedIndexs = []this.getData(1)  //初始化默认第一页},methods: {// 分页触发change(e) {// this.selectedIndexs.length = 0this.getData(e.current)  //点击出发 :current="pageCurrent"  当前页},// 获取数据getData(pageCurrent) {// 定义请求数据  然后通过路径带到后端返回需要的数据this.pageCurrent = pageCurrentlet pageNo=this.pageCurrent  //当前页let pageSize=this.pageSize //每页数据量// 路径拼接数据 发送到后端 获取翻页的数据和效果let url = '/block/smsBlockWarehousing/list?pageNo='+pageNo+"&pageSize="+pageSize;this.$http.get(url).then(res => {this.tableData = res.data.result.recordsthis.total=res.data.result.total;  //总数据量// console.log('结果', res.data.result.records)})},}}</script>
（2）页面展示

案例二

（1）代码展示
<template><view><cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="content">路边石管理</block></cu-custom><uni-section title=""><view><uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" /></view><view class="content"><view v-if="current === 0"><uni-table border stripe emptyText="暂无更多数据"><uni-tr style="background-color:#ebebeb;"><uni-th width="100" align="center">序号</uni-th><uni-th width="204" align="center">入库编号</uni-th><uni-th align="center" width="204">库存日期</uni-th><uni-th width="150" align="center">长（m）</uni-th><uni-th width="150" align="center">宽（m）</uni-th><uni-th width="150" align="center">高（m）</uni-th><uni-th width="150" align="center">数量</uni-th><uni-th width="150" align="center">单价</uni-th><uni-th width="150" align="center">体积（㎡）</uni-th><uni-th width="204" align="center">加工费</uni-th><uni-th width="150" align="center">颜色</uni-th><uni-th width="150" align="center">机组</uni-th><uni-th width="150" align="center">人员</uni-th><uni-th width="204" align="center">操作员</uni-th><uni-th width="204" align="center">图片</uni-th><uni-th width="150" align="center">文件</uni-th><uni-th width="204" align="center">备注</uni-th></uni-tr><uni-tr v-for="(item, index) in tableData" :key="index"><uni-td>{{index+1}}</uni-td><uni-td align="center">{{ item.sskwRkid }}</uni-td><uni-td align="center">{{ item.sskwDate }}</uni-td><uni-td align="center">{{ item.sskwLong }}</uni-td><uni-td align="center">{{ item.sskwWight }}</uni-td><uni-td align="center">{{ item.sskwHight }}</uni-td><uni-td align="center">{{ item.sskwNum }}</uni-td><uni-td align="center">{{ item.sskwPrice }}</uni-td><uni-td align="center">{{ item.sskwVolume }}</uni-td><uni-td align="center">{{ item.sskwWages }}</uni-td><uni-td align="center">{{item.sskwColor_dictText}}</uni-td><uni-td align="center">{{item.sskwSet_dictText}}</uni-td><uni-td align="center">{{ item.sskwPromed_dictText }}</uni-td><uni-td align="center">{{ item.sskwOpuser }}</uni-td><uni-td align="center"><img :src="item.sabwPic" /></uni-td><uni-td align="center">{{ item.sskwFile }}</uni-td><uni-td align="center">{{ item.sskwRemake }}</uni-td></uni-tr></uni-table><view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize":current="pageCurrent" :total="total" @change="change" /></view></view><view v-if="current === 1"><uni-table border stripe emptyText="暂无更多数据"><uni-tr style="background-color:#ebebeb;"><uni-th width="100" align="center">序号</uni-th><uni-th width="204" align="center">入库编号</uni-th><uni-th align="center" width="204">库存日期</uni-th><uni-th width="150" align="center">长（m）</uni-th><uni-th width="150" align="center">宽（m）</uni-th><uni-th width="150" align="center">高（m）</uni-th><uni-th width="150" align="center">数量</uni-th><uni-th width="150" align="center">单价</uni-th><uni-th width="150" align="center">体积（㎡）</uni-th><uni-th width="204" align="center">加工费</uni-th><uni-th width="150" align="center">颜色</uni-th><uni-th width="150" align="center">机组</uni-th><uni-th width="150" align="center">人员</uni-th><uni-th width="204" align="center">操作员</uni-th><uni-th width="150" align="center">加工方式</uni-th><uni-th width="204" align="center">图片</uni-th><uni-th width="150" align="center">文件</uni-th><uni-th width="204" align="center">备注</uni-th></uni-tr><uni-tr v-for="(item, index) in tableData2" :key="index"><uni-td>{{index+1}}</uni-td><uni-td><view class="name">{{ item.skwRkid }}</view></uni-td><uni-td align="center">{{ item.skwDate }}</uni-td><uni-td align="center">{{ item.skwLong }}</uni-td><uni-td align="center">{{ item.skwWight}}</uni-td><uni-td align="center">{{ item.skwHight }}</uni-td><uni-td align="center">{{ item.skwNum }}</uni-td><uni-td align="center">{{ item.skwPrice}}</uni-td><uni-td align="center">{{ item.skwVolume }}</uni-td><uni-td align="center">{{ item.skwWages }}</uni-td><uni-td align="center">{{item.skwColor_dictText}}</uni-td><uni-td align="center">{{item.skwSet_dictText}}</uni-td><uni-td align="center">{{ item.skwPerson_dictText }}</uni-td><uni-td align="center">{{ item.skwOpuser }}</uni-td><uni-td align="center">{{ item.skwPromed_dictText}}</uni-td><uni-td align="center"><img :src="item.skwPic" /></uni-td><uni-td align="center">{{ item.skwFile }}</uni-td><uni-td align="center">{{ item.skwRemake }}</uni-td></uni-tr></uni-table><view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize2":current="pageCurrent2" :total="total2" @change="changeChengpin" /></view></view></view></uni-section></view>
</template><script>export default {data() {return {tableData: [], //半成品获取数据tableData2: [], //成品获取数据// 每页数据量pageSize: 7,pageSize2: 7,// 当前页pageCurrent: 1,pageCurrent2: 1,// 数据总量total: 0,total2:0,loading: false,current: 0,current2: 0,items: ['半成品展示', '成品展示'],}},// 初始值onLoad() {// this.getRemote()this.selectedIndexs = []this.getData(1)this.getData2(1)},// 方法methods: {// 点击切换展示页面onClickItem(e) {if (this.current !== e.currentIndex) {this.current = e.currentIndex}},// 分页触发change(e) {// this.$refs.table.clearSelection()this.selectedIndexs.length = 0this.getData(e.current) //半成品},changeChengpin(e) {// this.$refs.table.clearSelection()this.selectedIndexs.length = 0this.getData2(e.current) //成品},// 半成品获取数据getData(pageCurrent) {this.loading = truethis.pageCurrent = pageCurrentlet pageNo = this.pageCurrentlet pageSize = this.pageSizelet url = '/sakerb/smsSaKerbWarehousing/list?pageNo=' + pageNo + "&pageSize=" + pageSize;this.$http.get(url).then(res => {this.tableData = res.data.result.recordsthis.total = res.data.result.total;// console.log('结果', res.data.result.records)});},// 成品获取数据getData2(pageCurrent2) {this.loading = truethis.pageCurrent2 = pageCurrent2let pageNo = this.pageCurrent2let pageSize = this.pageSize2let url2 = '/kerb/smsKerbWarehousing/list?pageNo=' + pageNo + "&pageSize=" + pageSize;this.$http.get(url2).then(res => {this.tableData2 = res.data.result.recordsthis.total2 = res.data.result.total;// console.log('结果', res.data.result.records)})}// 成品伪request请求 }}
</script>
（2）页面展示

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/186795.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【JavaEE初阶】 TCP三次握手四次挥手（超详细版）

【JavaEE初阶】 TCP三次握手四次挥手（超详细版）

文章目录 &#x1f334;三次握手四次挥手总览&#x1f6eb;三次握手&#xff08;建立连接&#xff09;&#x1f6a9;为什么要三次握手&#x1f4cc;解决彼此双发彼此认同的问题&#x1f4cc;验证双方的接听发送能力是否正常 &#x1f6a9;建立连接阶段涉及到的两个重要状态: &a…
阅读更多...
盘点10个地推拉新和网推拉新app推广接单平台，免费一手渠道平台

盘点10个地推拉新和网推拉新app推广接单平台，免费一手渠道平台

首推&#xff1a;”聚量推客“ 一手官签服务商 官方邀请码 000000 在地推行业里&#xff0c;每个人心中的第一的地推拉新app推广接单平台可能不一样&#xff0c;但之所以会把相关的地推拉新app推广平台推上第一的宝座&#xff0c;就是因为这些地推平台有过人的优势。因此本篇文…
阅读更多...
electron安装报错：Electron failed to install correctly...解决方案

electron安装报错：Electron failed to install correctly...解决方案

问题描述&#xff1a; 按照官方文档在yarn dev时报错&#xff1a; 一般遇到Electron failed to install correctly&#xff0c;please delete node_moules/electron and try installing again这种错误时&#xff0c;就是electron本体没有下载成功 解决方案&#xff1a; 1、…
阅读更多...
【技术驿站】分布式基础与常见面试问题

【技术驿站】分布式基础与常见面试问题

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…
阅读更多...
Java / Android 多线程和 synchroized 锁

Java / Android 多线程和 synchroized 锁

s AsyncTask 在Android R中标注了废弃 synchronized 同步 Thread: thread.start() public synchronized void start() {/*** This method is not invoked for the main method thread or "system"* group threads created/set up by the VM. Any new functionali…
阅读更多...
JVM垃圾回收机制

JVM垃圾回收机制

JVM 可达性分析法 1. 垃圾回收器的基本概念 什么是垃圾回收器&#xff1a;JVM 为 Java 提供了垃圾回收机制&#xff0c;其实是一种偏自动的内存管理机制。简单来说&#xff0c;垃圾回收器会自动追踪所有正在使用的对象&#xff0c;并将其余未被使用的对象标记为垃圾&#xff…
阅读更多...
IntelliJ Idea 撤回git已经push的操作

IntelliJ Idea 撤回git已经push的操作

最初的样子 现在的样子 解决方案 第一步&#xff0c;commit到本地撤回&#xff1a; 打开提交历史记录&#xff0c;选中回退的版本右键&#xff0c;点击“Reset Current Branch to Here…”,然后选中“Mixed”&#xff0c;点击Reset后&#xff0c;之前commit的代码会在本地显…
阅读更多...
【Proteus仿真】【Arduino单片机】LCD1602-IIC液晶显示

【Proteus仿真】【Arduino单片机】LCD1602-IIC液晶显示

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用Proteus8仿真Arduino单片机控制器&#xff0c;使用PCF8574、LCD1602液晶等。 主要功能&#xff1a; 系统运行后&#xff0c;LCD1602液晶显示各种效果。 二、软件设计 /* 作者&#xff1a;嗨小…
阅读更多...
STM32笔记—EXTI外部中断

STM32笔记—EXTI外部中断

一、简介 中断&#xff1a;在主程序运行过程中&#xff0c;出现了特定的中断触发条件&#xff08;中断源&#xff09;&#xff0c;使得CPU暂停当前正在运行的程序&#xff0c;转而去处理中断程序&#xff0c;处理完成后又返回原来被暂停的位置继续运行&#xff1b; 中断优先级&…
阅读更多...
线程池创建、执行、销毁的原理解析

线程池创建、执行、销毁的原理解析

目录 线程池的执行原理线程执行参考&#xff1a; 线程池的执行原理 假设最大核心数是2&#xff0c;非核心线程数为1&#xff0c;队列长度是3 来第一个任务的时候&#xff0c;没有工作线程在工作&#xff0c;需要创建一个 来第二个任务的时候&#xff0c;发现当前核心线程数…
阅读更多...
Win10共享打印机，别人连接不上出现无法连接到打印机错误码0x0000011b

Win10共享打印机，别人连接不上出现无法连接到打印机错误码0x0000011b

环境&#xff1a; Win10 专业版 惠普L1119 问题描述&#xff1a; Win10共享打印机&#xff0c;别人连接不上出现无法连接到打印机错误码0x0000011b 解决方案&#xff1a; 1.打开我这台电脑的注册表找到 HKEY_LOCAL_MACHINE\System\CurrentControlSet\Control\Print在右侧…
阅读更多...
牛客出bug（华为机试HJ71）

牛客出bug（华为机试HJ71）

Hj71&#xff1a;字符串通配符 描述 问题描述&#xff1a;在计算机中&#xff0c;通配符一种特殊语法&#xff0c;广泛应用于文件搜索、数据库、正则表达式等领域。现要求各位实现字符串通配符的算法。 要求&#xff1a; 实现如下2个通配符&#xff1a; *&#xff1a;匹配0个…
阅读更多...
Vue 组件化编程 和 生命周期

Vue 组件化编程 和 生命周期

目录 一、组件化编程 1.基本介绍 : 2.原理示意图 : 3.全局组件示例 : 4.局部组件示例 : 5.全局组件和局部组件的区别 : 二、生命周期 1.基本介绍 : 2.生命周期示意图 : 3.实例测试 : 一、组件化编程 1.基本介绍 : (1) 开发大型应用的时候&#xff0c;页面往往划分成…
阅读更多...
Java用Jsoup库实现的多线程爬虫代码

Java用Jsoup库实现的多线程爬虫代码

因为没有提供具体的Python多线程跑数据的内容&#xff0c;所以我们将假设你想要爬取的网站是一个简单的URL。以下是一个基本的Java爬虫程序&#xff0c;使用了Jsoup库来解析HTML和爬虫ip信息。 import org.jsoup.Jsoup; import org.jsoup.nodes.Document; import org.jsoup.nod…
阅读更多...
开设自己的网站系类01购买服务器

开设自己的网站系类01购买服务器

开始建设自己的网站吧&#xff01; 编者买了一个服务器打算自己构建一个网站&#xff0c;用于记录生活。网站大概算是一个个人博客吧。记录创建过程的一些步骤 要开设自己的网站&#xff0c;需要执行以下关键步骤 以下只是初步列出了建立自己的网站的大概步骤&#xff0c;后…
阅读更多...
【PHP网页应用】MySQL数据库增删改查 基础版

【PHP网页应用】MySQL数据库增删改查 基础版

使用PHP编写一个简单的网页&#xff0c;实现对MySQL数据库的增删改和展示操作 页面实现在index.php&#xff0c;其中basic.php为没有css美化的原始人版本 函数实现在database.php 目录 功能基本实现版 CSS美化版 basicindex.php index.php database.php 代码讲解 功能基…
阅读更多...
2023年9月少儿编程 中国电子学会图形化编程等级考试Scratch编程二级真题解析（选择题）

2023年9月少儿编程 中国电子学会图形化编程等级考试Scratch编程二级真题解析（选择题）

2023年9月scratch编程等级考试二级真题 选择题（共25题，每题2分，共50分） 1、点击绿旗，运行程序后，舞台上的图形是 A、画笔粗细为4的三角形 B、画笔粗细为5的六边形 C、画笔粗细为4的六角形 D、画笔粗细为5的三角形 答案：D 考点分析：考查积木综合使用，重点考查画笔…
阅读更多...
数字滤波器分析---频率响应

数字滤波器分析---频率响应

数字滤波器分析---频率响应 幅值、相位、冲激和阶跃响应、相位和群延迟、零极点分析。 分析滤波器的频域和时域响应。可视化复平面中的滤波器极点和零点。 频率响应 数字域 freqz 使用基于 FFT 的算法来计算数字滤波器的 Z 变换频率响应。具体来说&#xff0c;语句 [h,w]…
阅读更多...
如何构建并提高自己的核心竞争力？

如何构建并提高自己的核心竞争力？

上一篇文章聊到了软件工程师的核心竞争力主要分为三个方面&#xff1a;快速学习能力、解决问题能力和个人影响力&#xff0c;且核心竞争力的培养和提高需要长时间实践和积累&#xff0c;并不是短时间就可以达到的。这篇文章&#xff0c; 来聊聊如何培养和提高自己的核心竞争力。…
阅读更多...
2023年云计算发展趋势浅析

2023年云计算发展趋势浅析

​​​​​​​ 云计算的概念 云计算是一种通过互联网提供计算资源和服务的模式。它允许用户通过网络访问和使用共享的计算资源&#xff0c;而无需拥有或管理这些资源的物理设备。云计算的核心理念是将计算能力、存储资源和应用程序提供给用户&#xff0c;以便随时随地根据需要…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023