This commit is contained in:
parent
d7013e1d36
commit
ed4e9542ea
|
@ -2,7 +2,7 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<link rel="icon" type="image/svg+xml" href="/static/index/DW.png" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>数据之眼可视化大屏</title>
|
<title>数据之眼可视化大屏</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
55
src/App.vue
55
src/App.vue
|
@ -5,22 +5,22 @@ import { Push } from '@/common/push'
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
var ws = new WebSocket("ws://192.168.106.167:8080");
|
// var ws = new WebSocket("ws://192.168.106.167:8080");
|
||||||
|
|
||||||
//当WebSocket创建成功时,触发onopen事件
|
// //当WebSocket创建成功时,触发onopen事件
|
||||||
ws.onopen = function () {
|
// ws.onopen = function () {
|
||||||
console.log("open");
|
// console.log("open");
|
||||||
}
|
// }
|
||||||
//当客户端收到服务端发来的消息时,触发onmessage事件,参数e.data包含server传递过来的数据
|
// //当客户端收到服务端发来的消息时,触发onmessage事件,参数e.data包含server传递过来的数据
|
||||||
ws.onmessage = function (e) {
|
// ws.onmessage = function (e) {
|
||||||
|
|
||||||
let data =JSON.parse(e.data)
|
// let data =JSON.parse(e.data)
|
||||||
|
|
||||||
globalEventBus.emit(data.event, data.data ||'')
|
// globalEventBus.emit(data.event, data.data ||'')
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@ -29,26 +29,27 @@ ws.onmessage = function (e) {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// var connection = new Push({
|
var connection = new Push({
|
||||||
// url: 'ws://192.168.1.22:3131/', // websocket地址
|
url: 'ws://192.168.1.22:3131/', // websocket地址
|
||||||
// app_key: 'aaea61749929eb53a4bd75a1474c1d27',
|
app_key: 'aaea61749929eb53a4bd75a1474c1d27',
|
||||||
// });
|
});
|
||||||
// // 假设用户uid为1
|
// 假设用户uid为1
|
||||||
// var uid = 2;
|
var uid = 2;
|
||||||
// // 浏览器监听user-2频道的消息,也就是用户uid为1的用户消息
|
// 浏览器监听user-2频道的消息,也就是用户uid为1的用户消息
|
||||||
// var user_channel = connection.subscribe('user-' + uid);
|
var user_channel = connection.subscribe('user-' + uid);
|
||||||
|
|
||||||
// // 当user-2频道有message事件的消息时
|
// 当user-2频道有message事件的消息时
|
||||||
// user_channel.on('message', function (data) {
|
user_channel.on('message', function (data) {
|
||||||
// if (data.content.event == 'header2') {
|
globalEventBus.emit(data.content.event, data.content.data)
|
||||||
// globalEventBus.emit('newTask', "data")
|
|
||||||
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
// // 断线事件
|
|
||||||
// user_channel.on('close', function () {
|
|
||||||
|
|
||||||
// });
|
console.log("收到消息",data)
|
||||||
|
|
||||||
|
});
|
||||||
|
// 断线事件
|
||||||
|
user_channel.on('close', function () {
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<Transition>
|
<Transition>
|
||||||
<div class="address" v-if="props.choseArea">
|
<div class="address" v-if="props.choseArea">
|
||||||
|
|
||||||
<div class="address-li" @click="choseAreaFn">泸县 </div>
|
<div class="address-li" @click="choseAreaFn">{{ areaStore.area.name||"泸县" }} </div>
|
||||||
|
|
||||||
<div class="address-li" @click="choseTownFn(item.code, item.name)" v-for="( item, index ) in areaList ">{{
|
<div class="address-li" @click="choseTownFn(item.code, item.name)" v-for="( item, index ) in areaList ">{{
|
||||||
item.name }}
|
item.name }}
|
||||||
|
@ -12,14 +12,13 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { defineProps, defineEmits, onMounted, reactive, watch } from "vue"
|
import { defineProps, defineEmits, onMounted, reactive, watch ,ref} from "vue"
|
||||||
import { useRouter, useRoute } from 'vue-router'
|
import { useRouter, useRoute } from 'vue-router'
|
||||||
import { areaObj } from '@/store/index.js'
|
import { areaObj } from '@/store/index.js'
|
||||||
import axios from "axios"
|
import axios from "axios"
|
||||||
import { globalEventBus } from '@/common/eventBus'
|
import { globalEventBus } from '@/common/eventBus'
|
||||||
|
|
||||||
|
|
||||||
let areaStore = areaObj()
|
let areaStore = areaObj()
|
||||||
|
const areaName=ref("泸县")
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const emit = defineEmits(['offAreaList'])
|
const emit = defineEmits(['offAreaList'])
|
||||||
|
@ -31,7 +30,8 @@ let areaList = reactive([])
|
||||||
const choseTownFn = (id, name) => {
|
const choseTownFn = (id, name) => {
|
||||||
areaStore.changeArea({
|
areaStore.changeArea({
|
||||||
areaCode: areaStore.area.areaCode,
|
areaCode: areaStore.area.areaCode,
|
||||||
streetCode: id
|
streetCode: id,
|
||||||
|
name:areaStore.area.name
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -48,16 +48,22 @@ const choseTownFn = (id, name) => {
|
||||||
const choseAreaFn = () => {
|
const choseAreaFn = () => {
|
||||||
areaStore.changeArea({
|
areaStore.changeArea({
|
||||||
areaCode: areaStore.area.areaCode,
|
areaCode: areaStore.area.areaCode,
|
||||||
streetCode: null
|
streetCode: null,
|
||||||
|
name:areaStore.area.name
|
||||||
})
|
})
|
||||||
props.choseArea = false
|
props.choseArea = false
|
||||||
|
|
||||||
emit('offAreaList', "泸县")
|
emit('offAreaList',areaStore.area.name)
|
||||||
router.replace('/')
|
router.replace('/')
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
axios.get(`https://crmeb-test.shop.lihaink.cn/api/city/get_street?area_code=${areaStore.area.areaCode}`)
|
axios.get(`https://crmeb-test.shop.lihaink.cn/api/city/get_street?area_code=${areaStore.area.areaCode}`)
|
||||||
.then(function (response) {
|
.then(function (response) {
|
||||||
|
|
|
@ -56,9 +56,13 @@
|
||||||
<div class="rigth-li" @click="choseAreaFn"> <img style="width: 1VW;height:1VW;margin-right: 0.5vw;"
|
<div class="rigth-li" @click="choseAreaFn"> <img style="width: 1VW;height:1VW;margin-right: 0.5vw;"
|
||||||
src="/static/index/DW.png" alt=""> {{ area }}
|
src="/static/index/DW.png" alt=""> {{ area }}
|
||||||
</div>
|
</div>
|
||||||
<areaList :choseArea="choseArea" @offAreaList="offAreaList" style="left: 12vw;"></areaList>
|
<areaList :choseArea="choseArea" @offAreaList="offAreaList" style="left: 12vw;" :key="areaStore.area.areaCode">
|
||||||
|
</areaList>
|
||||||
|
|
||||||
|
|
||||||
<div class="right-line">
|
<div class="right-line">
|
||||||
<span></span>
|
<span>
|
||||||
|
</span>
|
||||||
<span></span>
|
<span></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="rigth-li" id="time">15:33:26</div>
|
<div class="rigth-li" id="time">15:33:26</div>
|
||||||
|
@ -100,7 +104,7 @@ import { globalEventBus } from '@/common/eventBus'
|
||||||
|
|
||||||
|
|
||||||
const areaStore = areaObj()
|
const areaStore = areaObj()
|
||||||
let area = ref('')
|
let area = ref(areaStore.area.name || '')
|
||||||
let userinfo = JSON.parse(localStorage.getItem('TRADE_USER'))
|
let userinfo = JSON.parse(localStorage.getItem('TRADE_USER'))
|
||||||
let role = ref(userinfo.role)
|
let role = ref(userinfo.role)
|
||||||
|
|
||||||
|
@ -127,8 +131,27 @@ const showFn = (index, src) => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const backUrl = ref('/')
|
|
||||||
// alert(zz3)
|
|
||||||
|
const changeArea = (name, code) => {
|
||||||
|
areaStore.changeArea({
|
||||||
|
areaCode: code,
|
||||||
|
streetCode: null,
|
||||||
|
name,
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// router.go(0)
|
||||||
|
|
||||||
|
router.replace('/')
|
||||||
|
console.log(areaStore.area)
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => route.path,
|
() => route.path,
|
||||||
|
@ -138,7 +161,7 @@ watch(
|
||||||
|
|
||||||
if (value == '/index') {
|
if (value == '/index') {
|
||||||
showFn(0)
|
showFn(0)
|
||||||
area.value = '泸县'
|
area.value = areaStore.area.name || '泸县'
|
||||||
}
|
}
|
||||||
if (value == '/townDetail') {
|
if (value == '/townDetail') {
|
||||||
showFn(0)
|
showFn(0)
|
||||||
|
@ -167,10 +190,6 @@ watch(
|
||||||
|
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const choseAreaFn = () => {
|
const choseAreaFn = () => {
|
||||||
|
|
||||||
if (role.value == 2) {
|
if (role.value == 2) {
|
||||||
|
@ -190,9 +209,6 @@ const offAreaList = (name) => {
|
||||||
area.value = name
|
area.value = name
|
||||||
}
|
}
|
||||||
const out = () => {
|
const out = () => {
|
||||||
//@ts-ignore
|
|
||||||
// window.open("about:blank", "_top").close()
|
|
||||||
|
|
||||||
localStorage.removeItem('TRADE_USER')
|
localStorage.removeItem('TRADE_USER')
|
||||||
router.replace('/login')
|
router.replace('/login')
|
||||||
}
|
}
|
||||||
|
@ -221,12 +237,10 @@ const updateTime = () => {
|
||||||
document.getElementById("time").innerHTML = currentTime;
|
document.getElementById("time").innerHTML = currentTime;
|
||||||
document.getElementById("days").innerHTML = currentDays;
|
document.getElementById("days").innerHTML = currentDays;
|
||||||
}
|
}
|
||||||
|
const SCREEN_TYPE=JSON.parse(localStorage.getItem('SCREEN_TYPE'))
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
setInterval(updateTime, 1000)
|
setInterval(updateTime, 1000)
|
||||||
// MapLoader().then(res => {
|
localStorage.setItem("SCREEN_TYPE",JSON.stringify(route.query)||'' )
|
||||||
// area.value = res.addressComponent.district
|
|
||||||
// })
|
|
||||||
|
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -234,25 +248,46 @@ onMounted(() => {
|
||||||
|
|
||||||
|
|
||||||
globalEventBus.on('compheader1', data => {
|
globalEventBus.on('compheader1', data => {
|
||||||
showFn(0, '/')
|
if (SCREEN_TYPE.type == 'r') {
|
||||||
|
showFn(0, '/')
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
globalEventBus.on('compheader2', data => {
|
globalEventBus.on('compheader2', data => {
|
||||||
showFn(1, '/commodity')
|
if (SCREEN_TYPE.type == 'r'){
|
||||||
|
showFn(1, '/commodity')
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
globalEventBus.on('compheader3', data => {
|
globalEventBus.on('compheader3', data => {
|
||||||
showFn(2, '/Businesses')
|
|
||||||
|
if (SCREEN_TYPE.type == 'r'){
|
||||||
|
showFn(2, '/Businesses')
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
})
|
})
|
||||||
globalEventBus.on('compheader4', data => {
|
globalEventBus.on('compheader4', data => {
|
||||||
showFn(3, '/order')
|
|
||||||
|
if (SCREEN_TYPE.type == 'r'){
|
||||||
|
showFn(3, '/order')
|
||||||
|
}
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
globalEventBus.on('compheader5', data => {
|
globalEventBus.on('compheader5', data => {
|
||||||
showFn(4, '/finance')
|
if (SCREEN_TYPE.type == 'r'){
|
||||||
|
showFn(4, '/finance')
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
|
globalEventBus.on('choserArea', data => {
|
||||||
|
changeArea(data.name, data.code)
|
||||||
|
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -324,7 +324,8 @@ const pageFN = (Num) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
globalEventBus.on('indextopleft', data => {
|
globalEventBus.on('indextopleft', data => {
|
||||||
pageFN(data.num)
|
console.log("houdao",data)
|
||||||
|
pageFN(Number(data.num) )
|
||||||
})
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -260,7 +260,7 @@ const pageFN = (Num) => {
|
||||||
|
|
||||||
|
|
||||||
globalEventBus.on('indextopright', data => {
|
globalEventBus.on('indextopright', data => {
|
||||||
pageFN(data.num)
|
pageFN( Number(data.num) )
|
||||||
})
|
})
|
||||||
|
|
||||||
globalEventBus.on('indextopright-1', data => {
|
globalEventBus.on('indextopright-1', data => {
|
||||||
|
|
|
@ -16,13 +16,8 @@ import { globalEventBus } from '@/common/eventBus'
|
||||||
for (let i = 1; i < 6; i++) {
|
for (let i = 1; i < 6; i++) {
|
||||||
globalEventBus.on('header' + i, data => {
|
globalEventBus.on('header' + i, data => {
|
||||||
globalEventBus.emit('compheader' + i, data)
|
globalEventBus.emit('compheader' + i, data)
|
||||||
console.log(i)
|
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
console.log("wcnm")
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -6,24 +6,24 @@
|
||||||
<div class="box" :style="{ opacity: showLoading ? 0 : 1 }">
|
<div class="box" :style="{ opacity: showLoading ? 0 : 1 }">
|
||||||
<div class="body">
|
<div class="body">
|
||||||
<div class="l">
|
<div class="l">
|
||||||
<topLeft :areaCodes="areaCodes" />
|
<topLeft :areaCodes="areaCodes" :key="areaCodes.areaCode" />
|
||||||
</div>
|
</div>
|
||||||
<div class="c" id="">
|
<div class="c" id="">
|
||||||
<topCenter :areaCodes="areaCodes"></topCenter>
|
<topCenter :areaCodes="areaCodes" :key="areaCodes.areaCode"></topCenter>
|
||||||
</div>
|
</div>
|
||||||
<div class="r">
|
<div class="r">
|
||||||
<topRight :areaCodes="areaCodes"></topRight>
|
<topRight :areaCodes="areaCodes" :key="areaCodes.areaCode"></topRight>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="foot">
|
<div class="foot">
|
||||||
<div class="foot-l">
|
<div class="foot-l">
|
||||||
<bottomLeft :areaCodes="areaCodes"></bottomLeft>
|
<bottomLeft :areaCodes="areaCodes" :key="areaCodes.areaCode"></bottomLeft>
|
||||||
</div>
|
</div>
|
||||||
<div class="c">
|
<div class="c">
|
||||||
<bottomCenter :areaCodes="areaCodes"></bottomCenter>
|
<bottomCenter :areaCodes="areaCodes" :key="areaCodes.areaCode"></bottomCenter>
|
||||||
</div>
|
</div>
|
||||||
<div class="r">
|
<div class="r">
|
||||||
<bottomRight :areaCodes="areaCodes"></bottomRight>
|
<bottomRight :areaCodes="areaCodes" :key="areaCodes.areaCode"></bottomRight>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -48,7 +48,7 @@ const areaStore = areaObj()
|
||||||
const areaCodes = reactive({
|
const areaCodes = reactive({
|
||||||
...areaStore.area
|
...areaStore.area
|
||||||
})
|
})
|
||||||
|
console.log(areaCodes,'areacodes')
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
showLoading.value = false
|
showLoading.value = false
|
||||||
|
|
Loading…
Reference in New Issue