zmj
/
screenControl
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add

This commit is contained in:
zmj 2024-02-23 14:30:30 +08:00
parent 0ec3177837
commit 01b962d963
4 changed files with 162 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

249
src/view/breedScreen/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div style="text-align: center;" class="head-title">养殖溯源可视化大屏</div> <!-- <div style="text-align: center;" class="head-title">养殖溯源可视化大屏</div> -->
<!-- <el-select v-model="areaCode" class="m-2" @change="changeArea" placeholder="Select" size="large"> <!-- <el-select v-model="areaCode" class="m-2" @change="changeArea" placeholder="Select" size="large">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select>
<el-select v-model="townCode" class="m-2" @change="changeTown" placeholder="Select" size="large"> <el-select v-model="townCode" class="m-2" @change="changeTown" placeholder="Select" size="large">
@ -15,28 +15,27 @@
<button @click="sendFn('back', { name: '泸县' }), townCode = ''">返回首页</button> <button @click="sendFn('back', { name: '泸县' }), townCode = ''">返回首页</button>
<button @click="sendFn('more_order')">更多订单</button> <button @click="sendFn('more_order')">更多订单</button>
</div> --> </div> -->
<div style="height: 100vh;"> <img src="/static/img/tradeScreen/FH.png" @click="router.go(-1)" class="back-btn" alt="">
<div class="menu" v-if="flag"> <div class="cont" v-if="flag">
<div class="menu-li sy"></div> <div class="card" v-for="item in 9">
<div class="menu-li sc"></div> <div class="card-tit">
<div class="menu-li sc"></div> 究极公司
<div class="menu-li sc"></div>
<div class="menu-li sc"></div>
</div> </div>
<div v-if="!flag"> <div class="card-cotnet">
<areaChose channel="user-breed-datav"></areaChose> <div>商户姓名: 为对方</div>
<div class="login">查看详情</div>
</div> </div>
</div> </div>
<div class="area" @click="flag=!flag"> </div>
<div class="area-top"> <areaChose v-else></areaChose>
<div class="town">江陽區</div> <div class="area" @click="flag = !flag">
<div class="town">江陽區</div> <div class="area-top">
</div> <div class="town">江陽區</div>
<div class="area-bottom"></div> <div class="town">江陽區</div>
</div> </div>
<div class="area-bottom"></div>
</div>
</template> </template>
<script setup scoped> <script setup scoped>
import { ref, reactive } from "vue" import { ref, reactive } from "vue"
@ -46,38 +45,38 @@ import { vehicleListApi } from "@/api.js"
import areaChose from "@/view/components/areaChose.vue" import areaChose from "@/view/components/areaChose.vue"
const nowPages = ref('index'); const nowPages = ref('index');
const flag=ref(true) const flag = ref(true)
// 镇列表 // 镇列表
const options = [ const options = [
{ {
value: '510502', value: '510502',
label: '江阳区', label: '江阳区',
}, },
{ {
value: '510503', value: '510503',
label: '纳溪区', label: '纳溪区',
}, },
{ {
value: '510504', value: '510504',
label: '龙马潭区', label: '龙马潭区',
}, },
{ {
value: '510521', value: '510521',
label: '泸县', label: '泸县',
}, },
{ {
value: '510522', value: '510522',
label: '合江县 ', label: '合江县 ',
}, },
{ {
value: '510524', value: '510524',
label: '叙永县 ', label: '叙永县 ',
}, },
{ {
value: '510525', value: '510525',
label: '古蔺县 ', label: '古蔺县 ',
}, },
] ]
// 区列表 // 区列表
const townOptions = [] const townOptions = []
@ -87,71 +86,141 @@ const areaCode = ref('510521')
const townCode = ref("") const townCode = ref("")
const changeArea = (e) => { const changeArea = (e) => {
townCode.value = '' townCode.value = ''
getTownList() getTownList()
options.forEach(item => { options.forEach(item => {
if (item.value == e) { if (item.value == e) {
sendFn('choserArea', { name: item.label, code: item.value }) sendFn('choserArea', { name: item.label, code: item.value })
} }
}) })
} }
const changeTown = (e) => { const changeTown = (e) => {
console.log(e) console.log(e)
townOptions.forEach(item => { townOptions.forEach(item => {
if (item.value == e) { if (item.value == e) {
sendFn('choseTown', { name: item.label }) sendFn('choseTown', { name: item.label })
} }
}) })
} }
const getTownList = () => { const getTownList = () => {
townOptions.splice(0, 99999999) townOptions.splice(0, 99999999)
axios.get(`https://crmeb-test.shop.lihaink.cn/api/city/get_street?area_code=${areaCode.value}`) axios.get(`https://crmeb-test.shop.lihaink.cn/api/city/get_street?area_code=${areaCode.value}`)
.then(function (res) { .then(function (res) {
res.data.data.forEach(item => { res.data.data.forEach(item => {
townOptions.push({ townOptions.push({
value: item.code, value: item.code,
label: item.name label: item.name
}) })
}) })
}) })
} }
const vehicleList=ref([]) const vehicleList = ref([])
const getLandList = async () => { const getLandList = async () => {
let res = await vehicleListApi({ let res = await vehicleListApi({
areaCode: areaCode.value, areaCode: areaCode.value,
streetCode: townCode.value streetCode: townCode.value
}) })
vehicleList.value=res.data.list vehicleList.value = res.data.list
} }
getTownList() getTownList()
getLandList() getLandList()
// 发送消息 // 发送消息
const page = ref(1) const page = ref(1)
const sendFn = (event, data = '') => { const sendFn = (event, data = '') => {
if (data.page) page.value = data.page; if (data.page) page.value = data.page;
sendMsg({ channel: 'user-breed-datav', event, data }) sendMsg({ channel: 'user-breed-datav', event, data })
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss">
button { .cont {
padding: 10px; height: 500px;
margin: 10px; width: 90vw;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
overflow-y: auto;
.card {
width: 378px;
height: 223px;
margin-bottom: 10px;
background-image: url('/static/img/breedScreen/bg.png');
background-size: 100% 100%;
font-size: 16px;
padding: 10px;
color: white;
position: relative;
.card-tit {
color: #00D6DD;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
}
.card-cotnet {
margin-top: 50px;
.login {
width: 170px;
height: 34px;
text-align: center;
line-height: 34px;
background-image: url('/static/img/tradeScreen/DL.png');
background-size: 100% 100%;
margin-top: 20px;
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
}
}
// background-color: red;
} }
.head-title{
color: #fff; .cont::-webkit-scrollbar {
font-size: 20px; width: 10px;
padding-top: 5vh; background-color: #153041;
} }
.cont::-webkit-scrollbar-track {
background-color: #153041;
}
::-webkit-scrollbar-thumb {
background-color: #084D89;
border-radius: 5px;
}
.back-btn {
width: 86.21px;
height: 31px;
position: absolute;
top: 70px;
left: 60.96px;
z-index: 9;
}
.area { .area {
position: absolute; position: absolute;
font-size: 20px; font-size: 20px;

2
src/view/index.vue
View File

@ -6,7 +6,7 @@
</div> </div>
<div class="menu-li ylsq" @click="navgo('plantScreen')"> <div class="menu-li ylsq" @click="navgo('plantScreen')">
</div> </div>
<div class="menu-li ylyz" @click="navgo('plantScreen')"> <div class="menu-li ylyz" @click="navgo('breedScreen')">
</div> </div>
</div> </div>
</template> </template>

3
src/view/tradeScreen/storeLogin.vue
View File

@ -4,7 +4,7 @@
<div class="card" v-for="item in 9"> <div class="card" v-for="item in 9">
<div class="card-tit"> <div class="card-tit">
究极公司 究极公司
<span style="font-size: 16px;">2024-01-21</span> <span style="font-size: 16px;color: white;">2024-01-21</span>
</div> </div>
<div class="card-cotnet"> <div class="card-cotnet">
<div>商户姓名: 为对方</div> <div>商户姓名: 为对方</div>
@ -52,6 +52,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-top: 10px;
} }
.card-cotnet{ .card-cotnet{
margin-top: 25px; margin-top: 25px;

BIN
static/img/breedScreen/bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB