From fac7123cd11769851a290edc18bc73964913f072 Mon Sep 17 00:00:00 2001 From: Miao_Spring <539943419@qq.com> Date: Fri, 10 Nov 2023 23:16:22 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E9=99=A4=E4=B8=AA=E6=80=A7?= =?UTF-8?q?=E5=8C=96=E5=A4=96=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- miniprogram/pages/index/index.scss | 226 ++++++++++++++++++++++++++ miniprogram/pages/index/index.ts | 253 +++++++++++++++++++++++------ miniprogram/pages/index/index.wxml | 65 ++++++-- 3 files changed, 480 insertions(+), 64 deletions(-) diff --git a/miniprogram/pages/index/index.scss b/miniprogram/pages/index/index.scss index 142264e..b2e2a8b 100644 --- a/miniprogram/pages/index/index.scss +++ b/miniprogram/pages/index/index.scss @@ -282,6 +282,7 @@ height: 200rpx; width: auto; margin:15rpx 20rpx 15rpx 10rpx; + box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; .node_content{ position: relative; display: block; @@ -593,6 +594,7 @@ height: 200rpx; width: auto; margin:10rpx 20rpx 10rpx 10rpx; + box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; .node_content{ position: relative; display: block; @@ -733,6 +735,7 @@ background-color: rgba($color: #ffffff, $alpha: 1.0); border-radius: 50rpx; .content{ + position: relative; display: flex; flex-direction:row; justify-content: center; @@ -744,6 +747,10 @@ margin:30rpx; border-radius: 25rpx; box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; + display: flex; + justify-content: center; + align-items: center; + font-size: 150rpx; } .result_circle{ background-color: #bfdfd7; @@ -766,6 +773,225 @@ transform: rotate(45deg); } } + .result_content{ + display: flex; + flex-direction: column; + padding-top: 20rpx; + position: absolute; + top: 380rpx; + left: 0; + width: 100%; + height: auto; + // padding-bottom: 40rpx; + .lib_search{ + margin-bottom: 20rpx; + // .lib_search_input{ + // // background-color: yellow; + // } + } + .node{ + background-color: rgba($color: #ffffff, $alpha: 1); + border-radius: 15rpx; + height: 200rpx; + width: auto; + margin:15rpx 20rpx 15rpx 10rpx; + box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; + .node_content{ + position: relative; + display: block; + height: 100%; + width: auto; + margin-left: 25rpx; + border-radius: 15rpx; + background-color: rgba($color: #ffffff, $alpha: 1); + // overflow: hidden; + ::-webkit-scrollbar { + width: 0; + height: 0; + color: transparent; + } + // .node_nameBar{ + // background-color: teal; + // position: absolute; + // top:20rpx; + // left:20rpx; + // overflow: scroll; + // height: 500rpx; + // width: 350rpx; + // display:flex; + // // flex-direction: column; + // justify-content: center; + // align-items: flex-start; + // } + .node_name{ + font-size: 31rpx; + height:50rpx; + width:max-content; + background-color: rgba(150, 145, 138, 0.5); + padding:0rpx 10rpx; + display: flex; + align-items: center; + border-radius: 15rpx; + position: absolute; + top:15rpx; + left:20rpx; + max-width: 230rpx; + overflow: scroll; + white-space: nowrap; + // justify-content: center; + } + .node_name_en{ + height:45rpx; + position: absolute; + top:80rpx; + left:20rpx; + max-width: 338rpx; + } + .node_adi{ + font-size: 31rpx; + height:45rpx; + max-width:338rpx; + // background-color: rgba(150, 145, 138, 0.5); + // padding:0rpx 10rpx; + display: flex; + align-items: center; + border-radius: 15rpx; + position: absolute; + bottom:20rpx; + left:20rpx; + overflow: scroll; + white-space: nowrap; + .adi_title{ + height:45rpx; + background-color:salmon; + padding:0rpx 10rpx; + } + .adi_content{ + height:45rpx; + background-color:rgb(224, 224, 224); + padding:0rpx 10rpx; + } + } + .node_danger{ + font-size: 31rpx; + height:50rpx; + width: 80rpx; + background-color: rgba(150, 145, 138, 0.5); + position: absolute; + left:299rpx; + top:15rpx; + // padding: 10rpx; + display: flex; + align-items: center; + justify-content: center; + border-radius: 15rpx; + background-color: tomato; + // view{ + // position: relative; + // top:-0.5rpx; + // } + } + .node_safe{ + font-size: 31rpx; + height:50rpx; + width: 80rpx; + background-color: rgba(150, 145, 138, 0.5); + position: absolute; + left:299rpx; + top:15rpx; + // padding: 10rpx; + display: flex; + align-items: center; + justify-content: center; + border-radius: 15rpx; + background-color:springgreen; + // view{ + // position: relative; + // top:-0.5rpx; + // } + } + .node_scores{ + font-size: 31rpx; + height:50rpx; + width: 135rpx; + background-color: rgba(150, 145, 138, 0.5); + position: absolute; + left:399rpx; + top:15rpx; + // padding: 4rpx 0rpx 6rpx 10rpx; + // padding-left: 10rpx; + display: flex; + align-items: center; + // justify-content: center; + border-radius: 15rpx; + overflow: hidden; + .scores_title{ + height:50rpx; + width: 80rpx; + background-color:salmon; + display: flex; + align-items: center; + justify-content: center; + } + .scores_num{ + height:50rpx; + width: 65rpx; + background-color:rgb(224, 224, 224); + display: flex; + align-items: center; + justify-content: center; + } + } + .node_risk{ + font-size: 31rpx; + height:50rpx; + width: 120rpx; + position: absolute; + left:560rpx; + top:15rpx; + // padding: 0rpx 6rpx 6rpx 13rpx; + display: flex; + align-items: center; + justify-content: center; + border-radius: 15rpx; + overflow: hidden; + } + ::-webkit-scrollbar { + width: 0; + height: 0; + color: transparent; + } + .node_extra{ + height:95rpx; + width: 256rpx; + background-color: white; + border: 3rpx solid rgba(0, 0, 0, 0.356); + position: absolute; + left:400rpx; + bottom:15rpx; + padding: 5rpx 10rpx 10rpx 10rpx; + border-radius: 15rpx; + display: flex; + flex-direction: column; + align-items: center; + overflow: scroll; + .node_extra_empty{ + margin: auto; + font-size: 45rpx; + } + .node_ex_content{ + margin:5rpx; + height: 40rpx; + width: 240rpx; + display: flex; + border-radius: 15rpx; + align-items: center; + justify-content: center; + } + } + } + } + } } } diff --git a/miniprogram/pages/index/index.ts b/miniprogram/pages/index/index.ts index 3f3bb46..ae84c40 100644 --- a/miniprogram/pages/index/index.ts +++ b/miniprogram/pages/index/index.ts @@ -2,18 +2,7 @@ // 获取应用实例 const app = getApp() - -// wx.showLoading({ -// title: '数据加载中...', -// mask: true -// }) - -// class stack{ -// data=[] -// push=(d: any) =>{ -// this.data.push(d); -// } -// } +const serverAddr = "127.0.0.1:5000" Page({ data: { @@ -45,7 +34,7 @@ Page({ data_history: { "2023.2.30": [ { - imgUrl:"https://tse3-mm.cn.bing.net/th/id/OIP-C.qM9D7c-Ow-C-xLARJdSwQwHaIO?pid=ImgDet&rs=1" , res:{scores: 1, arr: []} + imgUrl:"https://tse3-mm.cn.bing.net/th/id/OIP-C.qM9D7c-Ow-C-xLARJdSwQwHaIO?pid=ImgDet&rs=1" , res:{scores: 1, arr: ["山梨酸钾","山梨酸钾","山梨酸钾","山梨酸钾","山梨酸钾","山梨酸钾","山梨酸钾","山梨酸钾","山梨酸钾","山梨酸钾","山梨酸钾","山梨酸钾","山梨酸钾","山梨酸钾","山梨酸钾","山梨酸钾",]} },{ imgUrl:"https://tse3-mm.cn.bing.net/th/id/OIP-C.qM9D7c-Ow-C-xLARJdSwQwHaIO?pid=ImgDet&rs=1" , res:{scores: 75, arr: []} },{ @@ -80,15 +69,15 @@ Page({ data_collect: [ { "date": "2023.15.16", - "scores": "99", + "res":{scores: 99, arr: []} , "imgUrl": "./static/icons/history.svg", "remark": "方师傅康便面", "riskBgColor": "springgreen", - "riskStr": "低风险" + "riskStr": "低风险", }, { "date": "2023.5.6", - "scores": "1", + "res":{scores: 99, arr: []} , "imgUrl": "./static/icons/history.svg", "remark": "一二三四五六七", "riskBgColor": "sandybrown", @@ -96,7 +85,7 @@ Page({ }, { "date": "2023.5.6", - "scores": "100", + "res":{scores: 99, arr: []} , "imgUrl": "./static/icons/history.svg", "remark": "一二三四五六七", "riskBgColor": "tomato", @@ -104,7 +93,7 @@ Page({ }, { "date": "2023.15.16", - "scores": "99", + "res":{scores: 99, arr: []} , "imgUrl": "./static/icons/history.svg", "remark": "方师傅康便面", "riskBgColor": "springgreen", @@ -112,7 +101,7 @@ Page({ }, { "date": "2023.5.6", - "scores": "1", + "res":{scores: 1, arr: []} , "imgUrl": "./static/icons/history.svg", "remark": "一二三四五六七", "riskBgColor": "tomato", @@ -120,7 +109,7 @@ Page({ }, { "date": "2023.5.6", - "scores": "100", + "res":{scores: 99, arr: []} , "imgUrl": "./static/icons/history.svg", "remark": "一二三四五六七", "riskBgColor": "tomato", @@ -140,6 +129,70 @@ Page({ extra: [], ADI: "", + // 搜索用，前端赋值 + hidden: false, + + //前端赋值 + "riskBgColor": "springgreen", + "riskStr": "低风险" + }, { + name: { + zh: "李宁", + en: "L.N.G.N.M.S.L." + }, + scores: 45, + info: "HAHA", + extra: [ + { type: "safe", name: "LPL" }, + { type: "unsafe", name: "飞舞" }, + { type: "unsafe", name: "精忠报国" }, + ], + ADI: "", + hidden: false, + riskBgColor: "sandybrown", + riskStr: "中风险" + }, { + name: { + zh: "丁基羟基茴香醚", + en: "Butyl hydroxyanisole（BHA）" + }, + scores: 21, + info: "丁基羟基茴香醚（BHA），又名叔丁基-4-羟基茴香醚，化学式为C11H16O2，有两种异构体：3-BHA和2-BHA，一般指二者的混合物。2017年10月27日，世界卫生组织国际癌症研究机构公布的致癌物清单初步整理参考，叔丁基对羟基茴香醚（BHA）在2B类致癌物清单中。", + extra: [ + { type: "unsafe", name: "2B类致癌物" } + ], + ADI: "0~0.5mg/kg bw", + hidden: false, + riskBgColor: "tomato", + riskStr: "高风险" + } + ], + + // 知识库搜索用 + hidden_lib:{}, + + // 查询结果搜索用 + hidden_result:{}, + + + data_lib_map:{}, + + //查询展示用 + data_resultPage: { + scores: 65, + + circleClip: "", + circleColor: "", + arr: [{ + name: { + zh: "山梨酸钾", + en: "Potassium sorbate" + }, + scores: 73, + info: "山梨酸钾，又名2，4-己二烯酸钾，是山梨酸的钾盐，分子式为C6H7O2K，无色或白色鳞片状结晶或结晶性粉末。 [1] 无臭或微有臭味，长期暴露在空气中易吸潮、被氧化分解而变色。易溶于水（67.6g／100mL 20℃），溶于丙二醇（5．8g／100mL）和乙醇（0．3g／10 mL）。山梨酸钾和山梨酸是常用的有机防腐剂，广泛用于食品、化状品、饲料的防腐。易于被人体吸收代谢，在体内无残留，无毒性。", + extra: [], + ADI: "", + // 搜索用 hidden: false, @@ -176,21 +229,59 @@ Page({ hidden: false, riskBgColor: "tomato", riskStr: "高风险" - } - ], + },{ + name: { + zh: "山梨酸钾", + en: "Potassium sorbate" + }, + scores: 73, + info: "山梨酸钾，又名2，4-己二烯酸钾，是山梨酸的钾盐，分子式为C6H7O2K，无色或白色鳞片状结晶或结晶性粉末。 [1] 无臭或微有臭味，长期暴露在空气中易吸潮、被氧化分解而变色。易溶于水（67.6g／100mL 20℃），溶于丙二醇（5．8g／100mL）和乙醇（0．3g／10 mL）。山梨酸钾和山梨酸是常用的有机防腐剂，广泛用于食品、化状品、饲料的防腐。易于被人体吸收代谢，在体内无残留，无毒性。", + extra: [], + ADI: "", + // 搜索用 + hidden: false, - data_resultPage: { - scores: 60.5, - circleClip: "", - circleColor: "", - arr: [], + //前端赋值 + "riskBgColor": "springgreen", + "riskStr": "低风险" + }, { + name: { + zh: "李宁", + en: "L.N.G.N.M.S.L." + }, + scores: 45, + info: "HAHA", + extra: [ + { type: "safe", name: "LPL" }, + { type: "unsafe", name: "飞舞" }, + { type: "unsafe", name: "精忠报国" }, + ], + ADI: "", + hidden: false, + riskBgColor: "sandybrown", + riskStr: "中风险" + }, { + name: { + zh: "丁基羟基茴香醚", + en: "Butyl hydroxyanisole（BHA）" + }, + scores: 21, + info: "丁基羟基茴香醚（BHA），又名叔丁基-4-羟基茴香醚，化学式为C11H16O2，有两种异构体：3-BHA和2-BHA，一般指二者的混合物。2017年10月27日，世界卫生组织国际癌症研究机构公布的致癌物清单初步整理参考，叔丁基对羟基茴香醚（BHA）在2B类致癌物清单中。", + extra: [ + { type: "unsafe", name: "2B类致癌物" } + ], + ADI: "0~0.5mg/kg bw", + hidden: false, + riskBgColor: "tomato", + riskStr: "高风险" + }], }, - + // 收到的查询结果信息 data_rcv: { scores: 1, - arr: [], + arr: ["山梨酸钾"], }, @@ -206,7 +297,7 @@ Page({ // 启动时获取session async onLoad() { // wx.authorize() - // await this.updateSession() + await this.updateSession() // setInterval(()=>{ // this.updateSession() // },60*1000*5) @@ -357,7 +448,14 @@ Page({ this.startPage_Bottons_in() this.animate('#page_lib', [ { opacity: 1, translateY: "-100%" }, { opacity: 0, translateY: "0", ease: 'ease-in-out' }, - ], 1000) + ], 1000, ()=>{ + // for(var n of this.data.data_lib){ + // n.hidden=false + // } + // this.setData( + // {"data.data_lib":this.data.data_lib} + // ) + }) }, popup_style() { @@ -402,16 +500,6 @@ Page({ //查询结果页面相关 popup_result() { - // wx.getUserProfile({ - // desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写 - // success: (res) => { - // console.log(res) - // this.setData({ - // userInfo: res.userInfo, - // hasUserInfo: true, - // }) - // } - // }) this.data.data_resultPage.circleClip = this.calculate_clip_path(this.data.data_resultPage.scores * 3.6) this.data.data_resultPage.circleColor = this.scores2map(this.data.data_resultPage.scores).color this.setData({ @@ -423,7 +511,7 @@ Page({ ], 600) }, - // + exit_result() { this.hide_curtain() this.animate('#page_result', [ @@ -431,6 +519,32 @@ Page({ ], 600) }, + + // 根据传入的包含scores和arr的object更新this.data.data_resultPage并popup_result + show_result(res: { scores: any,arr:Array }) { + console.log(res) + var data_resultPage={ + scores: res.scores, + arr: []} + for(var name of res.arr){ + // 有时间去写个时间复杂度更低的，不过感觉也够用了 + for(var n of this.data.data_lib){ + if(n.name.zh.includes(name) || n.name.en.includes(name)){ + data_resultPage.arr.push(n) + break + } + } + } + this.setData({ + "data_resultPage":data_resultPage + }) + this.popup_result() + }, + show_result_wxml(e:any){ + var res=e.currentTarget.dataset.index; + this.show_result(res) + }, + // 根据角度计算剪切路径，错了不怪我。。 calculate_clip_path(deg: number) { var res = "polygon(50% 50%,0 0" @@ -468,7 +582,7 @@ Page({ //更新成分数据 updateLib(){ wx.request({ - url: 'http://127.0.0.1:5000/getLib', //仅为示例，并非真实的接口地址 + url: 'http://'+serverAddr+'/getLib', //仅为示例，并非真实的接口地址 data: { }, method:"GET", @@ -500,7 +614,7 @@ Page({ //更新历史记录 updateHistory(){ wx.request({ - url: 'http://127.0.0.1:5000/getHistory', //仅为示例，并非真实的接口地址 + url: 'http://'+serverAddr+'/getHistory', //仅为示例，并非真实的接口地址 data: { userCode:this.data.sessionKey }, @@ -526,7 +640,7 @@ Page({ return new Promise((resolve, reject)=>{ this.getCode().then(code => { wx.request({ - url: 'http://127.0.0.1:5000/updateSession', //仅为示例，并非真实的接口地址 + url: 'http://'+serverAddr+'/updateSession', //仅为示例，并非真实的接口地址 data: { userCode:code }, @@ -545,7 +659,7 @@ Page({ }, fail:res=>{ console.log(res) - setTimeout(this.updateSession,1000) + // setTimeout(this.updateSession,1000) reject() } }) @@ -571,7 +685,7 @@ Page({ console.log('data:image/png;base64,' + res.data) const imgBase64 = res.data wx.request({ - url: 'http://127.0.0.1:5000/rcvImg', //仅为示例，并非真实的接口地址 + url: 'http://'+serverAddr+'/rcvImg', //仅为示例，并非真实的接口地址 data: { imgBase64:imgBase64 }, @@ -611,7 +725,7 @@ Page({ const imgBase64 = res.data // 发送图片 wx.request({ - url: 'http://127.0.0.1:5000/rcvImg', //仅为示例，并非真实的接口地址 + url: 'http://'+serverAddr+'/rcvImg', //仅为示例，并非真实的接口地址 data: { imgBase64:imgBase64 }, @@ -661,13 +775,46 @@ Page({ for (var n of this.data.data_lib) { // console.log(n) if (n.name.zh.includes(key) || n.name.en.toLowerCase().includes(key.toLowerCase()) || exf(n, key)) { - n.hidden = false; + // n.hidden = false; + this.data.hidden_lib[n.name.zh] = false // console.log(n.name.zh) } else { - n.hidden = true; + // n.hidden = true; + this.data.hidden_lib[n.name.zh] = true } } - this.setData({ data_lib: this.data.data_lib }) + this.setData({ hidden_lib: this.data.hidden_lib }) + // console.log(this.data.data_lib) + }, + + readInput_result(e: any) { + //其他搜索内容 + var exf = (o: any, keyw: string) => { + //搜索额外信息 + for (var i of o.extra) { + if (i.name.includes(keyw)) { + return true + } + } + //搜索风险 + if (o.riskStr.includes(keyw)) { + return true + } + return false + } + var key = e.detail.value + for (var n of this.data.data_lib) { + // console.log(n) + if (n.name.zh.includes(key) || n.name.en.toLowerCase().includes(key.toLowerCase()) || exf(n, key)) { + // n.hidden = false; + this.data.hidden_result[n.name.zh] = false + // console.log(n.name.zh) + } else { + // n.hidden = true; + this.data.hidden_result[n.name.zh] = true + } + } + this.setData({ hidden_result: this.data.hidden_result }) // console.log(this.data.data_lib) }, @@ -761,7 +908,7 @@ Page({ const tempFilePaths = res.tempFilePaths console.log(tempFilePaths) wx.uploadFile({ - url: 'http://127.0.0.1:5000/rcvImg', //仅为示例，非真实的接口地址 + url: 'http://'+serverAddr+'/rcvImg', //仅为示例，非真实的接口地址 filePath: tempFilePaths[0], name: 'Img', formData: { @@ -775,7 +922,7 @@ Page({ } }) // wx.request({ - // url: 'http://127.0.0.1:5000/rcvImg', //仅为示例，并非真实的接口地址 + // url: 'http://'+serverAddr+'/rcvImg', //仅为示例，并非真实的接口地址 // data: { // a:123212 // }, diff --git a/miniprogram/pages/index/index.wxml b/miniprogram/pages/index/index.wxml index 8540619..a051035 100644 --- a/miniprogram/pages/index/index.wxml +++ b/miniprogram/pages/index/index.wxml @@ -65,7 +65,7 @@ -