更新

src/api.js

@@ -7,42 +7,61 @@ import router from "./router";
 
 // 创建axios 实例
 const instacne = axios.create({
-    baseURL: "http://192.168.1.22:8686/index",
+    baseURL: "http://192.168.1.24:8686/index",
     timeout: 30000,
 });
 
-instacne.interceptors.request.use(
-    (config) => {
-        // 在发送请求之前做什么
 
-      
 
-        return config;
+const instacnePlant = axios.create({
-    },
+    baseURL: "https://suyuan.lihaink.cn/",
-    (err) => {
+    timeout: 30000,
-        return Promise.reject(err);
+});
-    }
-);
 
-// 响应拦截
-instacne.interceptors.response.use(
-    (res) => {
 
-        // if (res.data.status != 200) {
+const instacneTrade = axios.create({
-        //     ElMessage({
+    baseURL: "http://192.168.1.24:8686/index",
-        //         message: res.data.message,
+    timeout: 30000,
-        //         type: 'warning',
+});
-        //     })
-        //     return Promise.reject(res.data.message);
 
-        // }
+const configInstacne=(ins)=>{
-        // 对响应的数据做什么
+    ins.interceptors.request.use(
-        return res.data;
+        (config) => {
-    },
+            // 在发送请求之前做什么
-    (err) => {
+    
-        return Promise.reject(err);
+          
-    }
+    
-);
+            return config;
+        },
+        (err) => {
+            return Promise.reject(err);
+        }
+    );
+    // 响应拦截
+    ins.interceptors.response.use(
+        (res) => {
+    
+            // if (res.data.status != 200) {
+            //     ElMessage({
+            //         message: res.data.message,
+            //         type: 'warning',
+            //     })
+            //     return Promise.reject(res.data.message);
+    
+            // }
+            // 对响应的数据做什么
+            return res.data;
+        },
+        (err) => {
+            return Promise.reject(err);
+        }
+    );
+    
+}
+
+configInstacne(instacne)
+configInstacne(instacnePlant)
+configInstacne(instacneTrade)
 
 
 
@@ -51,6 +70,10 @@ export function sendMsg(params) {
     return instacne.get('/dataviewTouchPush', { params })
 }
 
+export function landListApi(params) {
+    return instacnePlant.get('/api/dataview.land/landList', { params })
+}
+
 
 
 

src/router/index.js

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

src/view/index.vue

@@ -1,29 +1,36 @@
 <template>
     <div class="menu">
-        
-    <router-link to="/tradeScreen" style="color: white;">
 
-        <div class="menu-li">  数据之眼可视化大屏 </div>
+        <router-link to="/tradeScreen" style="color: white;">
+
+            <div class="menu-li"> 数据之眼可视化大屏 </div>
 
 
-    </router-link>
+        </router-link>
-         <div class="menu-li">  种植溯源可视化大屏 </div>
+
+
+        <router-link to="/plantScreen" style="color: white;">
+            <div class="menu-li"> 种植溯源可视化大屏 </div>
+
+
+        </router-link>
+
 
     </div>
-        
 </template> 
 <script setup>
 
 </script>
 <style lang="scss">
-.menu{
+.menu {
     width: 720px;
     background-color: black;
     min-height: 100vh;
     color: white;
     font-family: 'FZCYJ';
     padding: 30px 0;
-    .menu-li{
+
+    .menu-li {
         text-align: center;
         margin: 2vh;
         cursor: pointer;
@@ -31,7 +38,4 @@
     }
 
 }
-
-
-
 </style>

src/view/plantScreen/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-3', event, data })
+}
+</script>
+<style lang="scss" scoped>
+button {
+    padding: 10px;
+    margin: 10px;
+}
+</style>

src/view/plantScreen/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>

src/view/tradeScreen/index.vue

@@ -1,23 +1,24 @@
 <template>
-    <div style="text-align: center;">数据之眼可视化大屏</div>
+  <div style="text-align: center;">数据之眼可视化大屏</div>
-    <div>
+  <div>
-        <button @click="sendFn('header1', { page: 1 })">首页</button>
+    <button @click="sendFn('header1', { page: 1 })">首页</button>
-        <button @click="sendFn('header2', { page: 2 })">商品</button>
+    <button @click="sendFn('header2', { page: 2 })">商品</button>
-        <button @click="sendFn('header3', { page: 3 })">商户</button>
+    <button @click="sendFn('header3', { page: 3 })">商户</button>
-        <button @click="sendFn('header4', { page: 4 })">订单</button>
+    <button @click="sendFn('header4', { page: 4 })">订单</button>
-        <button @click="sendFn('header5', { page: 5 })">财务</button>
+    <button @click="sendFn('header5', { page: 5 })">财务</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('header7', { id: 510521107, name: '玄潭镇' })">玄潭镇</button> -->
+  </div>
+  <div v-if="page == 1">
 
-        <el-select v-model="areaCode" class="m-2" @change="changeArea" placeholder="Select" size="large">
+    <!-- <button @click="sendFn('indextopleft', { num: 1 })">地方店铺统计1</button>
-            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-        </el-select>
-
-
-    </div>
-    <div v-if="page == 1">
-
-        <button @click="sendFn('indextopleft', { num: 1 })">地方店铺统计1</button>
         <button @click="sendFn('indextopleft', { num: 2 })">地方店铺统计2</button>
         <button @click="sendFn('indextopleft', { num: 3 })">地方店铺统计3</button>
         <button @click="sendFn('indextopleft', { num: 3 })">商品销售排行</button>
@@ -26,56 +27,56 @@
         <button @click="sendFn('indextopright-2')">店铺销量排行</button>
         <button @click="sendFn('indextopright', { num: 1 })"> 平台用户数量1</button>
         <button @click="sendFn('indextopright', { num: 2 })"> 平台用户数量2</button>
-        <button @click="sendFn('indextopright', { num: 3 })"> 平台用户数量3</button>
+        <button @click="sendFn('indextopright', { num: 3 })"> 平台用户数量3</button> -->
 
 
 
 
 
-    </div>
+  </div>
-    <div v-if="page == 2">
+  <div v-if="page == 2">
 
-        <button @click="sendFn('header2-1', { num: 2 })"> 商品分类</button>
+    <!-- <button @click="sendFn('header2-1', { num: 2 })"> 商品分类</button>
         <button @click="sendFn('header2-2', { num: 2 })"> 积分管理</button>
         <button @click="sendFn('header2-2-1', { type: 1 })"> 出售中的商品</button>
         <button @click="sendFn('header2-2-2', { type: 2 })"> 仓库中商品</button>
         <button @click="sendFn('header2-2-3', { type: 6 })"> 待审核商品</button>
-        <button @click="sendFn('header2-2-4', { type: 7 })"> 审核未通过商品</button>
+        <button @click="sendFn('header2-2-4', { type: 7 })"> 审核未通过商品</button> -->
 
-    </div>
+  </div>
-    <div v-if="page == 3">
+  <div v-if="page == 3">
 
-        <button @click="sendFn('header3-1')"> 开启的商户</button>
+    <!-- <button @click="sendFn('header3-1')"> 开启的商户</button>
         <button @click="sendFn('header3-2')"> 关闭的商户</button>
-        <button @click="sendFn('header3-3', { id: 42 })"> 登录42</button>
+        <button @click="sendFn('header3-3', { id: 42 })"> 登录42</button> -->
-
-    </div>
-    <div v-if="page == 4">
 
+  </div>
+  <div v-if="page == 4">
+    <!-- 
         <button @click="sendFn('header4-1')"> 订单列表</button>
         <button @click="sendFn('header4-1-1', { index: 4 })"> 订单详情</button>
         <button @click="sendFn('header4-2')"> 退款单</button>
-        <button @click="sendFn('header4-3',)"> 核销订单</button>
+        <button @click="sendFn('header4-3',)"> 核销订单</button> -->
 
-    </div>
+  </div>
-    <div v-if="page == 5">
+  <div v-if="page == 5">
 
-        <button @click="sendFn('header5-1')"> 提现记录</button>
+    <!-- <button @click="sendFn('header5-1')"> 提现记录</button>
         <button @click="sendFn('header5-2', { index: 4 })"> 资金记录</button>
         <button @click="sendFn('header5-3')"> 账单管理</button>
         <button @click="sendFn('header5-3-1',)"> 日账单</button>
         <button @click="sendFn('header5-3-2',)"> 月账单</button>
-        <button @click="sendFn('header5-3-3',)"> 详情</button>
+        <button @click="sendFn('header5-3-3', {time:'2023-11-16'})"> 详情</button>
+        <button @click="sendFn('header5-3-4')"> 关闭弹窗</button> -->
 
-    </div>
+  </div>
-  
 </template>
 
-
-
 <script setup scoped>
 import { ref, reactive } from "vue"
 import { sendMsg } from "@/api.js"
+import axios from "axios"
+
 const options = [
   {
     value: '510502',
@@ -105,16 +106,46 @@ const options = [
     label: '古蔺县 ',
   },
 ]
-const areaCode=ref('510521')
+
-const changeArea=(e)=>{
+const townOptions = []
-    console.log(e)
+
-    options.forEach(item=>{
+const areaCode = ref('510521')
-        if(item.value==e){
+const townCode = ref("")
-            sendFn('choserArea', { name: item.label, code: item.value })
+
-        }
+
-    })
+
+const changeArea = (e) => {
+  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('header7', { id: item.value, name: item.label })
+            // 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
+                })
+            })
+
+        })
+}
 
 
 
@@ -123,18 +154,14 @@ const page = ref(1)
 
 
 const sendFn = (event, data = '') => {
-    if (data.page) page.value = data.page;
+  if (data.page) page.value = data.page;
-    sendMsg({ event, data })
+  sendMsg({ channel: 'user-2', event, data })
 }
 
-
-// http://192.168.1.22:8686/index/dataviewTouchPush?event=header2
-
-
 </script>
 <style lang="scss" scoped>
 button {
-    padding: 10px;
+  padding: 10px;
-    margin: 10px;
+  margin: 10px;
 }
 </style>