This commit is contained in:
weipengfei 2024-02-23 18:20:04 +08:00
parent 11cc3a8914
commit 40418a998c
1 changed files with 142 additions and 7 deletions

View File

@ -1,5 +1,5 @@
<template>
<div style="text-align: center;">物流溯源可视化大屏</div>
<!-- <div style="text-align: center;">物流溯源可视化大屏</div>
<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-select>
@ -14,10 +14,29 @@
<div v-else>
<button @click="sendFn('back', { name: '泸县' }), townCode = ''">返回首页</button>
<button @click="sendFn('more_order')">更多订单</button>
</div>
</div> -->
<img src="/static/img/tradeScreen/FH.png" @click="router.go(-1)" class="back-btn" alt="">
<div class="cont" v-if="flag">
<div class="card" v-for="(item, index) in farmList" :key="index">
<div class="card-tit">
{{ item.farm_name }}
</div>
<div class="card-cotnet">
<div>商户姓名: {{ item.master }}</div>
<div class="login" @click="lookFarmDetail(item)">查看详情</div>
</div>
</div>
</div>
<areaChose v-else channel="user-logistics-datav" @handTown="handTown"></areaChose>
<div class="area" @click="flag = !flag">
<div class="area-top">
<div class="town">江陽區</div>
<div class="town">江陽區</div>
</div>
<div class="area-bottom"></div>
</div>
</template>
@ -25,9 +44,13 @@
import { ref, reactive } from "vue"
import { sendMsg } from "@/api.js"
import axios from "axios"
import areaChose from "@/view/components/areaChose.vue"
import { vehicleListApi } from "@/api.js"
import {useRouter} from "vue-router"
const router = useRouter()
const nowPages = ref('index');
const flag = ref(true);
//
const options = [
@ -87,6 +110,10 @@ const changeTown = (e) => {
}
const handTown = (a, s)=>{
}
const getTownList = () => {
townOptions.splice(0, 99999999)
axios.get(`https://crmeb-test.shop.lihaink.cn/api/city/get_street?area_code=${areaCode.value}`)
@ -120,12 +147,120 @@ getLandList()
const page = ref(1)
const sendFn = (event, data = '') => {
if (data.page) page.value = data.page;
sendMsg({ channel: 'user-5', event, data })
sendMsg({ channel: 'user-logistics-datav', event, data })
}
</script>
<style lang="scss" scoped>
button {
padding: 10px;
margin: 10px;
.cont {
height: 500px;
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;
}
.cont::-webkit-scrollbar {
width: 10px;
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 {
position: absolute;
font-size: 20px;
color: white;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
width: 558px;
.area-top {
display: flex;
justify-content: space-around;
.town {
background-image: url('/static/img/tradeScreen/areaA.png');
background-size: 100% 100%;
width: 160.12px;
height: 30.94px;
text-align: center;
line-height: 10px;
}
}
}
.area-bottom {
background-image: url('/static/img/tradeScreen/areaB.png');
width: 558px;
height: 57px;
background-size: 100% 100%;
transform: translateY(-20px);
}
</style>