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

 请求地址：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.mzph.cn/news/136774.shtml

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

相关文章

linux之进程控制

linux之进程控制

进程创建&fork函数 fork函数之前就已经提到,它从已存在进程中创建一个新进程,新进程为子进程,而原进程为父进程。 调用接口&#xff1a;fork() 头文件&#xff1a;unistd.h 功能&#xff1a;创建一个子进程&#xff0c;给子进程返回0&#xff0c;父进程返回子进程pid …
阅读更多...
ChatGPT付费创作系统V2.4.9独立版 +WEB端+ H5端 + 小程序端系统测试安装教程

ChatGPT付费创作系统V2.4.9独立版 +WEB端+ H5端 + 小程序端系统测试安装教程

播资源提供的GPT付费体验系统最新版系统是一款基于ThinkPHP框架开发的AI问答小程序&#xff0c;是基于国外很火的ChatGPT进行开发的Ai智能问答小程序。当前全民热议ChatGPT&#xff0c;流量超级大&#xff0c;引流不要太简单&#xff01;一键下单即可拥有自己的GPT&#xff01;…
阅读更多...
【计算机网络笔记】网络层服务模型——数据报网络

【计算机网络笔记】网络层服务模型——数据报网络

系列文章目录 什么是计算机网络&#xff1f; 什么是网络协议&#xff1f; 计算机网络的结构 数据交换之电路交换 数据交换之报文交换和分组交换 分组交换 vs 电路交换 计算机网络性能&#xff08;1&#xff09;——速率、带宽、延迟 计算机网络性能&#xff08;2&#xff09;…
阅读更多...
掌动智能：UI自动化测试工具的五大功能

掌动智能：UI自动化测试工具的五大功能

在现代软件开发中&#xff0c;保证应用程序的质量和性能至关重要。UI自动化测试工具是一种关键的资源&#xff0c;它们能够有效地检查应用程序的用户界面&#xff0c;确保它们在各种情况下都能正常运行。本文将探讨UI自动化测试工具的功能有哪些! UI自动化测试工具的五大功能&a…
阅读更多...
性价比高的照明品牌，五款经济实惠的照明品牌推荐

性价比高的照明品牌，五款经济实惠的照明品牌推荐

很多家长有时候会说孩子觉得家里的台灯灯光刺眼&#xff0c;看书看久了就不舒服。这不仅要看光线亮度是否柔和&#xff0c;还要考虑台灯是不是有做遮光式设计。没有遮光式设计的台灯&#xff0c;光源外露&#xff0c;灯光会直射孩子头部&#xff0c;孩子视线较低&#xff0c;很…
阅读更多...
基于鱼鹰算法的无人机航迹规划-附代码

基于鱼鹰算法的无人机航迹规划-附代码

基于鱼鹰算法的无人机航迹规划 文章目录 基于鱼鹰算法的无人机航迹规划1.鱼鹰搜索算法2.无人机飞行环境建模3.无人机航迹规划建模4.实验结果4.1地图创建4.2 航迹规划 5.参考文献6.Matlab代码 摘要&#xff1a;本文主要介绍利用鱼鹰算法来优化无人机航迹规划。 1.鱼鹰搜索算法 …
阅读更多...
Linux - 实现一个简单的 shell

Linux - 实现一个简单的 shell

前言 之前我们对进程的替换&#xff0c;进程地址空间等等的概念进行了说明&#xff0c;本篇博客会基于这些知识点来 实现一个简单的 shell &#xff0c;如有疑问&#xff0c;可以参考下述博客&#xff1a;Linux - 进程程序替换 - C/C 如何实现与各个语言之间的相互调用 - 替换…
阅读更多...
后台管理系统解决方案-中大型-Vben Admin

后台管理系统解决方案-中大型-Vben Admin

后台管理系统解决方案-中大型-Vben Admin 官网 Vben Admin 在线演示 Vben Admin 为什么选择它 github现有20K星&#xff0c;并且它有个可视化生成表单&#xff0c;我很喜欢 快速开始 # 拉取代码 git clone https://github.com/vbenjs/vue-vben-admin-doc# 安装依赖 yarn#…
阅读更多...
访问控制列表

访问控制列表

目录 ACL ACL原理 ACL包过滤方式 ACL通用命令 查看ACL表命令 删除整张表命令 接口配置ACL ACL分类 标准ACL 标准ACL的动作与条件 通配符掩码 扩展ACL 扩展ACL的动作与条件 命名ACL 前言 书写方式 ACL 含义&#xff1a;访问控制列表&#xff0c;其是一种包过滤…
阅读更多...
竞赛 行人重识别(person reid) - 机器视觉 深度学习 opencv python

竞赛 行人重识别(person reid) - 机器视觉 深度学习 opencv python

文章目录 0 前言1 技术背景2 技术介绍3 重识别技术实现3.1 数据集3.2 Person REID3.2.1 算法原理3.2.2 算法流程图 4 实现效果5 部分代码6 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 深度学习行人重识别(person reid)系统 该项目…
阅读更多...
【C++】STL容器适配器——queue类的使用指南（含代码使用）（18）

【C++】STL容器适配器——queue类的使用指南（含代码使用）（18）

前言 大家好吖&#xff0c;欢迎来到 YY 滴C系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过C的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; 目录 一、queue 类——基本介绍二、queue 类…
阅读更多...
【赠书第3期】用ChatGPT轻松玩转机器学习与深度学习

【赠书第3期】用ChatGPT轻松玩转机器学习与深度学习

文章目录 前言 1 机器学习 2 深度学习 3 使用ChatGPT进行机器学习和深度学习 4 推荐图书 5 粉丝福利 前言 机器学习和深度学习是当前最热门的技术领域之一&#xff0c;这些技术正在不断地改变我们的生活和工作方式。ChatGPT 是一款基于大规模预训练模型的自然语言处理工…
阅读更多...
【Python基础】 Python设计模式之单例模式介绍

【Python基础】 Python设计模式之单例模式介绍

单例模式 1.设计模式2.单例设计模式的应用场景3.new方法4. Python 中的单例 1.设计模式 设计模式 是 前人工作的总结和提炼&#xff0c;通常&#xff0c;被人们广泛流传的设计模式都是针对 某一特定问题 的成熟的解决方案使用 设计模式 是为了可重用代码、让代码更容易被他人理…
阅读更多...
python解析xmind统计测试用例/测试点 个数及执行情况

python解析xmind统计测试用例/测试点 个数及执行情况

前言&#xff1a;统计的是每个分支最后一个节点的状态 xmind版本 23.0911172 标记打开位置 标记规则如下 解释&#xff1a; res {"total": 0, "pass": 0, "fail": 0, "no_result": 0, "unfinished": 0, "now_fail…
阅读更多...
深度学习检测小目标常用方法

深度学习检测小目标常用方法

前言 在深度学习目标检测中&#xff0c;特别是人脸检测中&#xff0c;小目标、小人脸的检测由于分辨率低&#xff0c;图片模糊&#xff0c;信息少&#xff0c;噪音多&#xff0c;所以一直是一个实际且常见的困难问题。不过在这几年的发展中&#xff0c;也涌现了一些提高小目标…
阅读更多...
机器/深度学习模型最优化问题详解及优化算法汇总

机器/深度学习模型最优化问题详解及优化算法汇总

前言 其实最优化问题&#xff0c;从小学开始学习数学的时候就可以说已经接触到了&#xff0c;在我印象中有个问题&#xff0c;用一个平底锅煎饼&#xff0c;每次只能放2只饼&#xff0c;煎一只饼要2分钟&#xff08;正反各用1分钟&#xff09;&#xff0c;煎三只饼要几分钟。这…
阅读更多...
C语言--汉诺塔【内容超级详细】

C语言--汉诺塔【内容超级详细】

今天与大家分享一下如何用C语言解决汉诺塔问题。 目录 一.前言 二.找规律⭐ 三.总结⭐⭐⭐ 四.代码实现⭐⭐ 一.前言 有一部很好看的电影《猩球崛起》⭐&#xff0c;说呀&#xff0c;人类为了抗击癌症发明了一种药物&#x1f357;&#xff0c;然后给猩猩做了实验&#xff0…
阅读更多...
【Java】I/O流—缓冲流的基础入门和文件拷贝的实战应用

【Java】I/O流—缓冲流的基础入门和文件拷贝的实战应用

&#x1f33a;个人主页&#xff1a;Dawn黎明开始 &#x1f380;系列专栏&#xff1a;Java ⭐每日一句&#xff1a;你能坚持到什么程度&#xff0c;决定你能达到什么高度 &#x1f4e2;欢迎大家关注&#x1f50d;点赞&#x1f44d;收藏⭐️留言&#x1f4dd; 文章目录 一.&…
阅读更多...
基于springboot实现福聚苑社区团购平台系统项目【项目源码】

基于springboot实现福聚苑社区团购平台系统项目【项目源码】

基于springboot实现福聚苑社区团购平台系统演示 Javar技术 Java是一种网络脚本语言&#xff0c;广泛运用于web应用开发&#xff0c;可以用来添加网页的格式动态效果&#xff0c;该语言不用进行预编译就直接运行&#xff0c;可以直接嵌入HTML语言中&#xff0c;写成js语言&…
阅读更多...
git增加右键菜单

git增加右键菜单

有次不小心清理系统垃圾&#xff0c;把git右击菜单搞没了&#xff0c;下面是恢复方法 将下面代码存为.reg文件&#xff0c;双击后导出生效&#xff0c;注意&#xff0c;你安装的git必须是默认C盘的&#xff0c;如果换了地方要改下面注册表文件中相关的位置 Windows Registry …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023