更新

package-lock.json

@@ -17,14 +17,12 @@
         "element-plus": "^2.4.4",
         "mitt": "^3.0.1",
         "pinia": "^2.1.7",
-        "postcss-pxtorem": "^5.1.1",
         "vue": "^3.3.8",
         "vue-router": "^4.2.5"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^4.5.0",
         "@vitejs/plugin-vue-jsx": "^3.1.0",
-        "postcss-pxtorem": "^6.0.0",
         "sass": "^1.69.5",
         "sass-loader": "^13.3.2",
         "vite": "^5.0.0"
@@ -2584,15 +2582,6 @@
         "node": "^10 || ^12 || >=14"
       }
     },
-    "node_modules/postcss-pxtorem": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmmirror.com/postcss-pxtorem/-/postcss-pxtorem-6.0.0.tgz",
-      "integrity": "sha512-ZRXrD7MLLjLk2RNGV6UA4f5Y7gy+a/j1EqjAfp9NdcNYVjUMvg5HTYduTjSkKBkRkfqbg/iKrjMO70V4g1LZeg==",
-      "dev": true,
-      "peerDependencies": {
-        "postcss": "^8.0.0"
-      }
-    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -4963,13 +4952,6 @@
         "source-map-js": "^1.0.2"
       }
     },
-    "postcss-pxtorem": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmmirror.com/postcss-pxtorem/-/postcss-pxtorem-6.0.0.tgz",
-      "integrity": "sha512-ZRXrD7MLLjLk2RNGV6UA4f5Y7gy+a/j1EqjAfp9NdcNYVjUMvg5HTYduTjSkKBkRkfqbg/iKrjMO70V4g1LZeg==",
-      "dev": true,
-      "requires": {}
-    },
     "proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",

src/router/index.js

@@ -22,6 +22,11 @@ const routes = [
                 name: 'plantScreen',
                 component: () => import('@/view/plantScreen/index.vue'),
             },
+            {
+                path: '/logisticsScreen',
+                name: 'logisticsScreen',
+                component: () => import('@/view/logisticsScreen/index.vue'),
+            },
 
         ]
     },

src/view/index.vue

@@ -15,6 +15,12 @@
 
         </router-link>
 
+        <router-link to="/logisticsScreen" style="color: white;">
+            <div class="menu-li"> 物流溯源可视化大屏 </div>
+
+
+        </router-link>
+
 
     </div>
 </template> 

src/view/logisticsScreen/index.vue

@@ -0,0 +1,120 @@
+<template>
+    <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>
+    <el-select v-model="townCode" class="m-2" @change="changeTown" placeholder="Select" size="large">
+        <el-option v-for="item in townOptions" :key="item.value" :label="item.label" :value="item.value" />
+    </el-select>
+    <button @click="sendFn('back', { name: '泸县' }), townCode = ''">返回首页</button>
+    <button @click="sendFn('refresh'), townCode = ''">刷新</button>
+    <button @click="sendFn('choseLand', { landName: item.title,id:item.id })" v-for="item in landList"> {{ item.title }}</button>
+    <button @click="sendFn('backHome', { name: '泸县' }), townCode = ''">返回首页</button>
+    <button @click="sendFn('detail', { name: item.title,id:item.id })" v-for="item in landList"> {{ item.title }}</button>
+
+    <p>地块</p>
+</template>
+<script setup scoped>
+import { ref, reactive } from "vue"
+import { sendMsg } from "@/api.js"
+import axios from "axios"
+import { landListApi } from "@/api.js"
+
+
+// 镇列表
+const options = [
+    {
+        value: '510502',
+        label: '江阳区',
+    },
+    {
+        value: '510503',
+        label: '纳溪区',
+    },
+    {
+        value: '510504',
+        label: '龙马潭区',
+    },
+    {
+        value: '510521',
+        label: '泸县',
+    },
+    {
+        value: '510522',
+        label: '合江县 ',
+    },
+    {
+        value: '510524',
+        label: '叙永县 ',
+    }, {
+        value: '510525',
+        label: '古蔺县 ',
+    },
+]
+// 区列表
+const townOptions = []
+
+const areaCode = ref('510521')
+
+const townCode = ref("")
+
+const changeArea = (e) => {
+    townCode.value = ''
+    getTownList()
+    options.forEach(item => {
+        if (item.value == e) {
+            sendFn('choserArea', { name: item.label, code: item.value })
+        }
+    })
+}
+
+const changeTown = (e) => {
+    townOptions.forEach(item => {
+        if (item.value == e) {
+            sendFn('choseTown', { name: item.label })
+        }
+    })
+
+    getLandList()
+}
+
+const getTownList = () => {
+    townOptions.splice(0, 99999999)
+    axios.get(`https://crmeb-test.shop.lihaink.cn/api/city/get_street?area_code=${areaCode.value}`)
+        .then(function (res) {
+            res.data.data.forEach(item => {
+                townOptions.push({
+                    value: item.code,
+                    label: item.name
+                })
+            })
+
+        })
+}
+
+const landList=ref([])
+const getLandList = async () => {
+    let res = await landListApi({
+        areaCode: areaCode.value,
+        streetCode: townCode.value
+    })
+    landList.value=res.data.list
+
+
+
+}
+
+getTownList()
+// 发送消息
+const page = ref(1)
+const sendFn = (event, data = '') => {
+    if (data.page) page.value = data.page;
+    sendMsg({ channel: 'user-5', event, data })
+}
+</script>
+<style lang="scss" scoped>
+button {
+    padding: 10px;
+    margin: 10px;
+}
+</style>

src/view/logisticsScreen/index1.vue

@@ -0,0 +1,172 @@
+<template>
+  <div style="text-align: center;">数据之眼可视化大屏</div>
+
+  <!-- <button @click="sendFn('indexlefttop', { index: 2 })"> 告警详情</button> -->
+  <!-- <button @click="sendFn('indexlefttop-1',)"> 关闭</button> -->
+  <!-- <button @click="sendFn('indexcenterbottom', { index: 1 })"> 预警详情</button> -->
+  <!-- <button @click="sendFn('indexcenterbottom-1',)"> 关闭</button> -->
+  <!-- <button @click="sendFn('indexrightbottom', { item })" v-for="item, index in lanList" :key="index"> {{ item.title
+  }}</button> -->
+
+  <!-- 镇 -->
+  <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>
+  <!-- 区 -->
+  <el-select v-model="townCode" class="m-2" @change="changeTown" placeholder="Select" size="large">
+    <el-option v-for="item in townOptions" :key="item.value" :label="item.label" :value="item.value" />
+  </el-select>
+
+  <button @click="sendFn('back', { name: '泸县' }), townCode = ''">返回首页</button>
+
+
+  <button @click="sendFn('choseTown', { name: '海潮镇 ' })"> 海潮镇</button>
+</template>
+<script setup scoped>
+import { ref, reactive } from "vue"
+import { sendMsg } from "@/api.js"
+import { landListApi } from "@/api.js"
+import axios from "axios"
+// import { plantProductCountApi } from "@/api.js"
+// import { deviceAlarmCountApi } from "@/api.js"
+// import { landCollectionListApi } from "@/api.js"
+
+
+// const lanList = ref([])
+// landListApi({
+//   areaCode: 510521
+
+// }).then(res => {
+//   lanList.value = res.data.list
+// })
+
+// 镇列表
+const options = [
+  {
+    value: '510502',
+    label: '江阳区',
+  },
+  {
+    value: '510503',
+    label: '纳溪区',
+  },
+  {
+    value: '510504',
+    label: '龙马潭区',
+  },
+  {
+    value: '510521',
+    label: '泸县',
+  },
+  {
+    value: '510522',
+    label: '合江县 ',
+  },
+  {
+    value: '510524',
+    label: '叙永县 ',
+  }, {
+    value: '510525',
+    label: '古蔺县 ',
+  },
+]
+// 区列表
+const townOptions = []
+
+
+const areaCode = ref('510521')
+
+const townCode = ref("")
+
+const changeArea = (e) => {
+  townCode.value = ''
+  getTownList()
+  options.forEach(item => {
+    if (item.value == e) {
+      sendFn('choserArea', { name: item.label, code: item.value })
+    }
+  })
+}
+
+const changeTown = (e) => {
+  townOptions.forEach(item => {
+    if (item.value == e) {
+      sendFn('choseTown', { name: item.label })
+    }
+  })
+}
+
+const getTownList = () => {
+  townOptions.splice(0, 99999999)
+  axios.get(`https://crmeb-test.shop.lihaink.cn/api/city/get_street?area_code=${areaCode.value}`)
+    .then(function (res) {
+      res.data.data.forEach(item => {
+        townOptions.push({
+          value: item.code,
+          label: item.name
+        })
+      })
+
+    })
+}
+
+
+const initRequest=async (api,list)=>{
+  let res=await api({
+    areaCode: areaCode.value,
+    streetCode: townCode.value
+  })
+  console.log(res)
+
+}
+
+// 设备告警信息
+const getdeviceAlarmCount = async() => {
+ let res=await deviceAlarmCountApi({
+    areaCode: areaCode.value,
+    streetCode: townCode.value
+  })
+
+}
+// 预警信息
+const getlandCollectionList=async ()=>{
+  let res=await landCollectionListApi({
+    areaCode:areaCode.value,
+    townCode:townCode.value,
+  })
+}
+const getplantProductList = async () => {
+
+  let res = await plantProductCountApi({
+    areaCode: areaCode.value,
+    streetCode: townCode.value
+  })
+  console.log(res, 'res4')
+
+}
+
+// 请求初始化
+const init=()=>{
+
+  // initRequest(landCollectionListApi,[])
+  // initRequest(deviceAlarmCountApi,[])
+  // initRequest(landListApi,[])
+
+
+
+}
+
+init()
+// 发送消息
+const page = ref(1)
+const sendFn = (event, data = '') => {
+  if (data.page) page.value = data.page;
+  sendMsg({ channel: 'user-3', event, data })
+}
+</script>
+<style lang="scss" scoped>
+button {
+  padding: 10px;
+  margin: 10px;
+}
+</style>