updata
This commit is contained in:
parent
6a1fbee12c
commit
56b6e695b4
|
|
@ -15,6 +15,7 @@
|
|||
"echarts": "^5.4.3",
|
||||
"echarts-gl": "^2.0.9",
|
||||
"flv.js": "^1.6.2",
|
||||
"pinia": "^2.1.7",
|
||||
"postcss-pxtorem": "^5.1.1",
|
||||
"vue": "^3.3.8",
|
||||
"vue-router": "^4.2.5"
|
||||
|
|
@ -1681,6 +1682,50 @@
|
|||
"node": ">=8.6"
|
||||
}
|
||||
},
|
||||
"node_modules/pinia": {
|
||||
"version": "2.1.7",
|
||||
"resolved": "https://registry.npmmirror.com/pinia/-/pinia-2.1.7.tgz",
|
||||
"integrity": "sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==",
|
||||
"dependencies": {
|
||||
"@vue/devtools-api": "^6.5.0",
|
||||
"vue-demi": ">=0.14.5"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@vue/composition-api": "^1.4.0",
|
||||
"typescript": ">=4.4.4",
|
||||
"vue": "^2.6.14 || ^3.3.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
},
|
||||
"typescript": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/pinia/node_modules/vue-demi": {
|
||||
"version": "0.14.6",
|
||||
"resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.6.tgz",
|
||||
"integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
|
||||
"hasInstallScript": true,
|
||||
"bin": {
|
||||
"vue-demi-fix": "bin/vue-demi-fix.js",
|
||||
"vue-demi-switch": "bin/vue-demi-switch.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@vue/composition-api": "^1.0.0-rc.1",
|
||||
"vue": "^3.0.0-0 || ^2.6.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/postcss": {
|
||||
"version": "8.4.31",
|
||||
"resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.31.tgz",
|
||||
|
|
@ -3394,6 +3439,23 @@
|
|||
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
|
||||
"dev": true
|
||||
},
|
||||
"pinia": {
|
||||
"version": "2.1.7",
|
||||
"resolved": "https://registry.npmmirror.com/pinia/-/pinia-2.1.7.tgz",
|
||||
"integrity": "sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==",
|
||||
"requires": {
|
||||
"@vue/devtools-api": "^6.5.0",
|
||||
"vue-demi": ">=0.14.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue-demi": {
|
||||
"version": "0.14.6",
|
||||
"resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.6.tgz",
|
||||
"integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
|
||||
"requires": {}
|
||||
}
|
||||
}
|
||||
},
|
||||
"postcss": {
|
||||
"version": "8.4.31",
|
||||
"resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.31.tgz",
|
||||
|
|
|
|||
|
|
@ -18,7 +18,9 @@
|
|||
"flv.js": "^1.6.2",
|
||||
"postcss-pxtorem": "^5.1.1",
|
||||
"vue": "^3.3.8",
|
||||
"vue-router": "^4.2.5"
|
||||
"vue-router": "^4.2.5",
|
||||
"pinia": "^2.1.7"
|
||||
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^4.5.0",
|
||||
|
|
|
|||
|
|
@ -4,6 +4,13 @@ import Header from "@/components/Header.vue"
|
|||
import Login from "@/view/login.vue"
|
||||
let Token =localStorage.getItem('TOKEN')
|
||||
|
||||
import { areaObj } from "@/store/index.js"
|
||||
const userInfoStore=areaObj()
|
||||
|
||||
userInfoStore.changeUserInfoFn(510524)
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<!-- <div>sadas</div> -->
|
||||
|
|
|
|||
|
|
@ -71,4 +71,10 @@ export function deviceCountLandApi(params) {
|
|||
return instacne.get('/api/dataview.land/deviceCount', { params })
|
||||
}
|
||||
|
||||
|
||||
export function centralCountApi(params) {
|
||||
return instacne.get('/api/dataview.land/centralCount', { params })
|
||||
}
|
||||
|
||||
// /api/dataview.land/centralCount?areaCode=510521&streetCode=510521100
|
||||
// /api/dataview.land/deviceCount?areaCode=510521&streetCode=510521100&land_id=18
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<Transition>
|
||||
<div class="address" v-if="props.choseArea">
|
||||
<div class="address-li" @click="choseTownFn({name:'泸县'})"> 泸县</div>
|
||||
<div class="address-li" @click="choseTownFn({ name: '泸县', code: 510521, isArea: true })"> 泸县</div>
|
||||
<div class="address-li" @click="choseTownFn(item)" v-for="( item, index ) in areaList ">{{ item.name }}</div>
|
||||
</div>
|
||||
</Transition>
|
||||
|
|
@ -9,36 +9,44 @@
|
|||
|
||||
<script setup>
|
||||
import { defineProps, defineEmits } from "vue"
|
||||
import { useRouter } from 'vue-router'
|
||||
import {reactive} from "vue"
|
||||
import { reactive } from "vue"
|
||||
import axios from "axios"
|
||||
const router = useRouter()
|
||||
import { areaObj } from "@/store/index.js"
|
||||
const userInfoStore = areaObj()
|
||||
const emit = defineEmits(['offAreaList'])
|
||||
const props = defineProps({
|
||||
choseArea: Boolean,
|
||||
})
|
||||
const areaList=reactive([])
|
||||
const areaList = reactive([])
|
||||
|
||||
// 选额镇
|
||||
const choseTownFn = (item) => {
|
||||
if (item.isArea) userInfoStore.changeUserInfoFn( item.code ,null )
|
||||
else { userInfoStore.changeUserInfoFn(510524, Number(item.code)) }
|
||||
|
||||
|
||||
props.choseArea = false
|
||||
emit('offAreaList',item)
|
||||
emit('offAreaList', item)
|
||||
|
||||
|
||||
|
||||
|
||||
// router.replace('/townDetail?id=' + id)
|
||||
}
|
||||
|
||||
axios.get(`https://crmeb-test.shop.lihaink.cn/api/city/get_street?area_code=${510524}`)
|
||||
.then(function (response) {
|
||||
response.data.data.forEach(item => {
|
||||
areaList.push(item)
|
||||
})
|
||||
axios.get(`https://crmeb-test.shop.lihaink.cn/api/city/get_street?area_code=${510521}`)
|
||||
.then(function (response) {
|
||||
response.data.data.forEach(item => {
|
||||
areaList.push(item)
|
||||
})
|
||||
|
||||
})
|
||||
.catch(function (error) {
|
||||
// 处理错误情况
|
||||
})
|
||||
.finally(function () {
|
||||
// 总是会执行
|
||||
});
|
||||
})
|
||||
.catch(function (error) {
|
||||
// 处理错误情况
|
||||
})
|
||||
.finally(function () {
|
||||
// 总是会执行
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
<template>
|
||||
<div>监控设备总数: <span class="num">1528</span> 台</div>
|
||||
<div>监控设备总数: <span class="num color-font">{{ totalNum }}</span> 台</div>
|
||||
<div class="cont">
|
||||
<div style="display: flex;justify-content: space-between;align-items: center;margin-top: 3vh;">
|
||||
<img src="/static/index/JYZ.png" style="width: 2.8vw; height: 4vw;" alt="">
|
||||
|
||||
<div class="circle">
|
||||
<img src="/static/detail/bk.png" class="act-img" alt="">
|
||||
<div style="width: 110px;height: 110px;" class="online" id="online"></div>
|
||||
|
|
@ -12,37 +11,306 @@
|
|||
<img src="/static/detail/bk.png" class="act-img" alt="">
|
||||
<div style="width: 110px;height: 110px;" class="online" id="offline"></div>
|
||||
</div>
|
||||
|
||||
<img src="/static/index/JTY.png" style="width: 2.8vw; height: 4vw;" alt="">
|
||||
</div>
|
||||
|
||||
<div class="eqNum">
|
||||
<div>
|
||||
<img src="/static/index/Q.png" alt="" style="transform: translateY(2px);"> 在线设备统计：<span class="num"
|
||||
style="margin-left: 10px;">1418</span> 台
|
||||
<img src="/static/index/Q.png" alt="" style="transform: translateY(2px);"> 在线设备统计：<span
|
||||
class="num color-font" style="margin-left: 10px;">{{ onlineNum }}</span> 台
|
||||
</div>
|
||||
<div>
|
||||
<img src="/static/index/Q.png" style="transform: translateY(2px);"> 离线设备统计：<span class="num"
|
||||
style="margin-left: 10px;">1418</span>
|
||||
<img src="/static/index/Q.png" style="transform: translateY(2px);"> 离线设备统计：<span class="num color-font"
|
||||
style="margin-left: 10px;">{{ offlineNum }}</span>
|
||||
台
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import {ref,reactive,onMounted} from "vue"
|
||||
import * as echarts from 'echarts';
|
||||
import options from "@/view/option.js"
|
||||
import {deviceCountLandApi} from "@/api.js"
|
||||
// deviceCountLandApi(
|
||||
// {
|
||||
// areaCode:510521,
|
||||
// streetCode:510521100,
|
||||
// land_id:18
|
||||
// }
|
||||
// ).then(res=>{
|
||||
// console.log(res.data)
|
||||
// })
|
||||
import { ref, reactive, onMounted } from "vue"
|
||||
import { deviceCountLandApi } from "@/api.js"
|
||||
const totalNum = ref(0)
|
||||
const onlineNum = ref(0)
|
||||
const offlineNum = ref(0)
|
||||
const setOnlineFn = (data) => {
|
||||
const onLine = reactive(
|
||||
{
|
||||
title: [
|
||||
|
||||
{
|
||||
text: (data.value / data.total * 100) + '%',
|
||||
x: 'center',
|
||||
top: '42%',
|
||||
textStyle: {
|
||||
fontSize: 13,
|
||||
color: '#00f0ff',
|
||||
foontWeight: '500',
|
||||
},
|
||||
},
|
||||
],
|
||||
polar: {
|
||||
radius: ['44%', '50%'],
|
||||
center: ['50%', '50%'],
|
||||
},
|
||||
angleAxis: {
|
||||
max: 100,
|
||||
show: false,
|
||||
},
|
||||
radiusAxis: {
|
||||
type: 'category',
|
||||
show: true,
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
startAngle: 90,
|
||||
radius: ['60%', '80%'],
|
||||
center: ['50%', '50%'],
|
||||
data: [
|
||||
{
|
||||
name: '数量',
|
||||
value: data.value,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#1598DC",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '剩下',
|
||||
value: (data.total - data.value),
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(31, 110, 255, 0)',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
hoverAnimation: false,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'pie',
|
||||
startAngle: (90 + (1 - data.rate) * 360),
|
||||
radius: ['62%', '77%'],
|
||||
center: ['50%', '50%'],
|
||||
data: [
|
||||
{
|
||||
name: '数量',
|
||||
value: (data.total - data.value),
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#1C3C65',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '剩下',
|
||||
value: data.value,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#1598DC',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
hoverAnimation: false,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
type: 'pie',
|
||||
startAngle: 90,
|
||||
radius: '45%',
|
||||
animation: false,
|
||||
hoverAnimation: false,
|
||||
center: ['50%', '50%'],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(50,171,241, 1)',
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(55,70,130, 0)',
|
||||
},
|
||||
]),
|
||||
shadowBlur: 10,
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 100,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
)
|
||||
|
||||
return onLine
|
||||
}
|
||||
const setOffLineFn = (data) => {
|
||||
const offLine = reactive(
|
||||
{
|
||||
// backgroundColor: '#0F141B',
|
||||
title: [
|
||||
|
||||
{
|
||||
text: (data.value / data.total * 100).toFixed(2) + '%',
|
||||
x: 'center',
|
||||
top: '42%',
|
||||
textStyle: {
|
||||
fontSize: 13,
|
||||
color: '#35BFCA',
|
||||
foontWeight: '500',
|
||||
},
|
||||
},
|
||||
],
|
||||
polar: {
|
||||
radius: ['44%', '50%'],
|
||||
center: ['50%', '50%'],
|
||||
},
|
||||
angleAxis: {
|
||||
max: 100,
|
||||
show: false,
|
||||
},
|
||||
radiusAxis: {
|
||||
type: 'category',
|
||||
show: true,
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
startAngle: 90,
|
||||
radius: ['60%', '80%'],
|
||||
center: ['50%', '50%'],
|
||||
data: [
|
||||
{
|
||||
name: '数量',
|
||||
value: data.value,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#35BFCA",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '剩下',
|
||||
value: (data.total - data.value),
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#1C3D69',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
hoverAnimation: false,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'pie',
|
||||
startAngle: (90 + (1 - data.rate) * 360),
|
||||
radius: ['62%', '77%'],
|
||||
center: ['50%', '50%'],
|
||||
data: [
|
||||
{
|
||||
name: '数量',
|
||||
value: (data.total - data.value),
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#1C3D69',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '剩下',
|
||||
value: data.value,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#35BFCA',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
hoverAnimation: false,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
type: 'pie',
|
||||
startAngle: 90,
|
||||
radius: '45%',
|
||||
animation: false,
|
||||
hoverAnimation: false,
|
||||
center: ['50%', '50%'],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(50,171,241, 1)',
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(55,70,130, 0)',
|
||||
},
|
||||
]),
|
||||
shadowBlur: 10,
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 100,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
|
||||
return offLine
|
||||
}
|
||||
|
||||
// 图表
|
||||
const initCharts = (tag, option) => {
|
||||
|
|
@ -50,32 +318,60 @@ const initCharts = (tag, option) => {
|
|||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(option);
|
||||
}
|
||||
deviceCountLandApi({
|
||||
areaCode: 510521, streetCode: 510521100,land_id:18
|
||||
}).then(res => {
|
||||
totalNum.value = res.data.total
|
||||
onlineNum.value = res.data.online
|
||||
offlineNum.value = res.data.offline
|
||||
let result = {}
|
||||
result.total = res.data.total
|
||||
result.value = res.data.online
|
||||
result.rate = result.value / result.total.toFixed(4);
|
||||
initCharts('online', setOnlineFn(result))
|
||||
let result2 = {}
|
||||
result2.total = res.data.total
|
||||
result2.value = res.data.offline
|
||||
result2.rate = result2.value / result2.total.toFixed(4);
|
||||
initCharts('offline', setOffLineFn(result2))
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
document.getElementById("online").removeAttribute('_echarts_instance_');
|
||||
document.getElementById("offline").removeAttribute('_echarts_instance_');
|
||||
initCharts('online', options.onLine)
|
||||
initCharts('offline', options.offLine)
|
||||
// scrollTableFn()
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.num {
|
||||
|
||||
font-size: 20px;
|
||||
font-family: FZCYJ;
|
||||
color: #E5EFFF;
|
||||
background: linear-gradient(to bottom, #DAE8FE 30%, #53A0FF 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
margin-left: 30px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.cont {
|
||||
height: 70%;
|
||||
|
||||
|
|
@ -87,6 +383,8 @@ onMounted(() => {
|
|||
background-image: url('/static/index/BTBG.png');
|
||||
background-size: 100% 100%;
|
||||
|
||||
// text-align: ;
|
||||
|
||||
}
|
||||
|
||||
.circle {
|
||||
|
|
|
|||
|
|
@ -7,6 +7,9 @@ import warnDetail from "@/components/warnDetail.vue"
|
|||
import scrollTable from "@/components/scrollTable.vue"
|
||||
import { ref, reactive,onMounted } from "vue"
|
||||
import {deviceAlarmCountApi} from "@/api.js"
|
||||
import { areaObj } from "@/store/index.js"
|
||||
|
||||
const userInfoStore=areaObj()
|
||||
|
||||
const showWarnDeatil = ref(false)
|
||||
|
||||
|
|
@ -49,11 +52,9 @@ const config3 = reactive({
|
|||
onMounted( ()=>{
|
||||
deviceAlarmCountApi(
|
||||
{
|
||||
areaCode:510521,
|
||||
streetCode:510521100
|
||||
...userInfoStore.userInfo
|
||||
}
|
||||
).then(res=>{
|
||||
|
||||
res.data.list.forEach(item => {
|
||||
config3.data.push(
|
||||
[item.device_name, item.device_code, item.update_time, `<span style="color:#2562AD"> 详情 </span>`,],
|
||||
|
|
|
|||
|
|
@ -3,13 +3,19 @@ import App from './App.vue'
|
|||
import dataV from '@jiaminghi/data-view'
|
||||
import router from "./router";
|
||||
|
||||
|
||||
import {
|
||||
createPinia
|
||||
} from 'pinia'
|
||||
|
||||
import 'amfe-flexible'
|
||||
import "/public/jessibuca.js"
|
||||
const app = createApp(App)
|
||||
const pinia = createPinia()
|
||||
|
||||
app.use(router)
|
||||
app.use(dataV)
|
||||
app.use(pinia)
|
||||
|
||||
app.mount('#app')
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,24 @@
|
|||
import {
|
||||
defineStore
|
||||
} from 'pinia'
|
||||
|
||||
export const areaObj = defineStore('counter', {
|
||||
state: () => ({
|
||||
userInfo: {
|
||||
|
||||
areaCode:'',
|
||||
streetCode:'',
|
||||
|
||||
},
|
||||
|
||||
|
||||
}),
|
||||
getters: {},
|
||||
actions: {
|
||||
changeUserInfoFn(areaCode,streetCode='') {
|
||||
this.userInfo.areaCode = areaCode
|
||||
this.userInfo.streetCode = streetCode||''
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
|
|
@ -15,11 +15,11 @@
|
|||
<div class="top">
|
||||
<div class="c-top-tit">
|
||||
<div class="c-top-li">种植面积 <span class="color-font"
|
||||
style="font-size: 18px;margin-left: 1vw; ">45454</span> m</div>
|
||||
style="font-size: 18px;margin-left: 1vw; ">{{ centerData.totalArea }}</span> ㎡</div>
|
||||
<div class="c-top-li">种植种类 <span class="color-font"
|
||||
style="font-size: 18px;margin-left: 1vw; ">45454</span> 种</div>
|
||||
style="font-size: 18px;margin-left: 1vw; ">{{ centerData.plantCount }}</span> 种</div>
|
||||
<div class="c-top-li">地块数量 <span class="color-font"
|
||||
style="font-size: 18px;margin-left: 1vw; ">45454</span> 块</div>
|
||||
style="font-size: 18px;margin-left: 1vw; ">{{ centerData.landCount }}</span> 块</div>
|
||||
</div>
|
||||
<div class="map">
|
||||
<areaMap></areaMap>
|
||||
|
|
@ -55,22 +55,38 @@ import leftCenter from "../components/index/leftCenter.vue"
|
|||
import leftBottom from "../components/index/leftBottom.vue"
|
||||
import centerBottom from "../components/index/centerBottom.vue"
|
||||
import JessibucaDemo from "@/components/videoFlv.vue"
|
||||
import { useRouter } from "vue-router";
|
||||
// import { useRouter } from "vue-router";
|
||||
import { centralCountApi } from "@/api.js"
|
||||
import areaMap from "@/components/areaMap.vue"
|
||||
import {landListApi} from "@/api.js"
|
||||
import { landListApi } from "@/api.js"
|
||||
import rightTop from "../components/index/rightTop.vue"
|
||||
|
||||
|
||||
centralCountApi({
|
||||
areaCode: 510521,
|
||||
streetCode: 510521100
|
||||
}).then(res => {
|
||||
console.log(res.data)
|
||||
|
||||
for (let key in centerData){
|
||||
centerData[key]=res.data[key]
|
||||
}
|
||||
})
|
||||
|
||||
const centerData = reactive({
|
||||
landCount: "",
|
||||
plantCount: "",
|
||||
totalArea: "",
|
||||
|
||||
})
|
||||
// 地块
|
||||
const landlist=reactive([])
|
||||
const landlist = reactive([])
|
||||
|
||||
landListApi( {
|
||||
areaCode:510521,
|
||||
streetCode:510521100
|
||||
}).then(res=>{
|
||||
res.data.list.forEach( item=>{ landlist.push(item) })
|
||||
landListApi({
|
||||
areaCode: 510521,
|
||||
streetCode: 510521100
|
||||
}).then(res => {
|
||||
res.data.list.forEach(item => { landlist.push(item) })
|
||||
|
||||
})
|
||||
|
||||
|
|
@ -110,7 +126,7 @@ landListApi( {
|
|||
.center {
|
||||
background-image: url('/static/index/JCSBSLTJ.png');
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -193,8 +209,9 @@ landListApi( {
|
|||
flex-wrap: wrap;
|
||||
font-size: 14px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.land-li {
|
||||
|
||||
|
||||
padding: 2px 20px;
|
||||
margin-right: 10px;
|
||||
background-image: url('/static/index/DK.png');
|
||||
|
|
|
|||
Loading…
Reference in New Issue