大屏时间和天气
parent
15be279052
commit
a9e722a6a1
|
|
@ -1,11 +1,21 @@
|
|||
<template>
|
||||
<div class="statistical" id="bg-pan">
|
||||
<Header ></Header>
|
||||
<div id="alertOverlay" class="alert-active" ref="alertOverlay" >
|
||||
<Header></Header>
|
||||
<div id="alertOverlay" class="alert-active" ref="alertOverlay">
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<Map style="position: absolute; top: 0px; left: 0px;height: calc( 100vh - 0px);width:100%;z-index:0;" ref="MapboxComponent"></Map>
|
||||
|
||||
<Map
|
||||
style="
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: calc(100vh - 0px);
|
||||
width: 100%;
|
||||
z-index: 0;
|
||||
"
|
||||
ref="MapboxComponent"
|
||||
></Map>
|
||||
|
||||
<div class="statistical-left">
|
||||
<img
|
||||
|
|
@ -18,60 +28,54 @@
|
|||
left: '0px',
|
||||
}"
|
||||
/>
|
||||
<layerButton
|
||||
id="layerButton"
|
||||
@handlerLayerChange="handlerLayerChange"
|
||||
/>
|
||||
<layerButton id="layerButton" @handlerLayerChange="handlerLayerChange" />
|
||||
<statisticalType
|
||||
id="statisticalType"
|
||||
@handlerChangePolygonType="handlerChangePolygonType"
|
||||
:bi="bi"
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
bottom: '-10px',
|
||||
left: '48px',
|
||||
height: '180px',
|
||||
'z-index':'8'
|
||||
'z-index': '8',
|
||||
}"
|
||||
/>
|
||||
<county
|
||||
id="county"
|
||||
@countyClick="countyClick"
|
||||
:bi="bi"
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
bottom: '-3px',
|
||||
left: '320px',
|
||||
'z-index':'8'
|
||||
left: '520px',
|
||||
'z-index': '8',
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DataScreen :countyId="countyId" :currentCounty="currentCounty" @changeLandType="changeLandType"/>
|
||||
|
||||
|
||||
<DataScreen
|
||||
:countyId="countyId"
|
||||
:currentCounty="currentCounty"
|
||||
@changeLandType="changeLandType"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, onUnmounted, computed, watchEffect } from 'vue';
|
||||
import { ref, onMounted, onUnmounted, computed } from 'vue';
|
||||
import Map from './LargeScreenMap/index.vue';
|
||||
import layerButton from './mapComponent/left_layerButton.vue';
|
||||
import statisticalType from './mapComponent/left_statisticalType.vue';
|
||||
import county from './mapComponent/left_county.vue';
|
||||
import DataScreen from './dataScreen/index.vue'
|
||||
import Header from './mapComponent/top_title.vue'
|
||||
import axios from 'axios';
|
||||
import dayjs from 'dayjs';
|
||||
import DataScreen from './dataScreen/index.vue';
|
||||
import Header from './mapComponent/top_title.vue';
|
||||
|
||||
//
|
||||
const MapboxComponent = ref();
|
||||
const countyId = ref();
|
||||
|
||||
|
||||
// 控制图层
|
||||
function handlerLayerChange(type:number){
|
||||
switch(type){
|
||||
function handlerLayerChange(type: number) {
|
||||
switch (type) {
|
||||
case 1:
|
||||
MapboxComponent.value.handlerChangeLayerVisible('historyLayerLine', true);
|
||||
MapboxComponent.value.handlerChangeLayerVisible('historyLayerFill', true);
|
||||
|
|
@ -113,66 +117,10 @@
|
|||
MapboxComponent.value.handlerLoadPolygon(currentCounty.value['code'], data);
|
||||
}
|
||||
|
||||
|
||||
// 切换图斑类型
|
||||
function changeLandType(type):void{
|
||||
MapboxComponent.value.handlerLoadPolygon(currentCounty.value['code'], "",type);
|
||||
function changeLandType(type): void {
|
||||
MapboxComponent.value.handlerLoadPolygon(currentCounty.value['code'], '', type);
|
||||
}
|
||||
|
||||
// 等比例放大缩小
|
||||
let layerSiderWidth = 210;
|
||||
const viewportWidth = ref(window.innerWidth - layerSiderWidth);
|
||||
const referenceWidth = ref(window.innerWidth - 210);
|
||||
const updateWindowSize = () => {
|
||||
setTimeout(() => {
|
||||
let layerSiderElement: any = document.querySelector('.ant-layout-sider-children');
|
||||
layerSiderWidth = layerSiderElement?.offsetWidth ? layerSiderElement?.offsetWidth : 0;
|
||||
referenceWidth.value = 1920 - 210;
|
||||
let layerElement: any = document.querySelector('.ant-tabs-nav');
|
||||
viewportWidth.value = layerElement?.offsetWidth;
|
||||
}, 100);
|
||||
};
|
||||
|
||||
const bi = computed(() => {
|
||||
return viewportWidth.value / referenceWidth.value;
|
||||
});
|
||||
|
||||
// 时间和天气
|
||||
const currentTime = ref(dayjs().format('YYYY年M月D日 ddd HH:mm:ss'));
|
||||
const Weather = ref('');
|
||||
function getWeather() {
|
||||
// http://www.tianqiapi.com/index/doc?version=v63
|
||||
// 若次数试用用尽，注册账号后，切换appid和appsecret即可
|
||||
axios({
|
||||
method:"get",
|
||||
url:`http://v0.yiketianqi.com/api?unescape=1&version=v63&appid=88136471&appsecret=Hw4GLOcA&city=临沂`,
|
||||
}).then(res => {
|
||||
Weather.value = res.data.wea;
|
||||
|
||||
})
|
||||
}
|
||||
function updateTime() {
|
||||
currentTime.value = dayjs().format('YYYY年M月D日 ddd HH:mm');
|
||||
}
|
||||
|
||||
// 监听每一秒更新时间
|
||||
watchEffect(() => {
|
||||
const intervalId = setInterval(updateTime, 1000);
|
||||
// 清除定时器
|
||||
onUnmounted(() => clearInterval(intervalId));
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getWeather();
|
||||
window.addEventListener('resize', updateWindowSize);
|
||||
updateWindowSize();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', updateWindowSize);
|
||||
updateTime();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
@ -185,79 +133,78 @@
|
|||
user-select: none;
|
||||
}
|
||||
|
||||
#bg-pan{
|
||||
|
||||
#bg-pan {
|
||||
}
|
||||
#alertOverlay::before,#alertOverlay::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#alertOverlay div::before,#alertOverlay div::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
#alertOverlay::before {
|
||||
background: linear-gradient(to right, rgba(0, 0, 0,0.8), transparent);
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
#alertOverlay::after {
|
||||
background: linear-gradient(to left, rgba(0, 0, 0,0.8), transparent);
|
||||
top: 0%;
|
||||
left: 100%;
|
||||
transform: rotate(0deg) translate(calc(-1 * 50px), 0px);
|
||||
}
|
||||
|
||||
#alertOverlay div::before {
|
||||
background: linear-gradient(to top, rgba(0, 0, 0,0.8), transparent);
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
#alertOverlay div::after {
|
||||
background: linear-gradient(to top, rgba(0, 0, 0,0.8), transparent);
|
||||
top: 100%;
|
||||
left: 0;
|
||||
transform: rotate(0deg) translate(0px, calc(-1 * 50px));
|
||||
}
|
||||
|
||||
#alertOverlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
opacity: 1;
|
||||
transition: opacity 0.5s;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.alert-active{
|
||||
animation: blink 0s infinite;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0% {
|
||||
opacity: 0;
|
||||
#alertOverlay::before,
|
||||
#alertOverlay::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 100%;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#alertOverlay div::before,
|
||||
#alertOverlay div::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
</style>
|
||||
#alertOverlay::before {
|
||||
background: linear-gradient(to right, rgba(0, 0, 0, 0.8), transparent);
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
#alertOverlay::after {
|
||||
background: linear-gradient(to left, rgba(0, 0, 0, 0.8), transparent);
|
||||
top: 0%;
|
||||
left: 100%;
|
||||
transform: rotate(0deg) translate(calc(-1 * 50px), 0px);
|
||||
}
|
||||
|
||||
#alertOverlay div::before {
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
#alertOverlay div::after {
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
|
||||
top: 100%;
|
||||
left: 0;
|
||||
transform: rotate(0deg) translate(0px, calc(-1 * 50px));
|
||||
}
|
||||
|
||||
#alertOverlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
opacity: 1;
|
||||
transition: opacity 0.5s;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.alert-active {
|
||||
animation: blink 0s infinite;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,78 +1,30 @@
|
|||
<template>
|
||||
<div class="county">
|
||||
<div
|
||||
class="county_div"
|
||||
:style="{
|
||||
width: `${840 * props.bi}px`,
|
||||
bottom: `${10 * props.bi}px`,
|
||||
}"
|
||||
>
|
||||
<img
|
||||
class="county_div_leftButton"
|
||||
:src="scrollImgLeft"
|
||||
:style="{
|
||||
top: `${42 * props.bi}px`,
|
||||
left: `${-4 * props.bi}px`,
|
||||
height: `${31 * props.bi}px`,
|
||||
width: `${31 * props.bi}px`,
|
||||
}"
|
||||
@click="scrollToElement('left')"
|
||||
/>
|
||||
<div class="county_div">
|
||||
<img class="county_div_leftButton" :src="scrollImgLeft" @click="scrollToElement('left')" />
|
||||
<div ref="countyList" class="county_div_list">
|
||||
<div
|
||||
v-for="item in list"
|
||||
:key="item.id"
|
||||
:id="item.id"
|
||||
:style="{
|
||||
width: `${770 * props.bi}px`,
|
||||
}"
|
||||
@click="clickCounty(item)"
|
||||
>
|
||||
<span
|
||||
:style="{
|
||||
top: `${20 * props.bi}px`,
|
||||
width: `${110 * props.bi}px`,
|
||||
}"
|
||||
>{{ item.name }}</span
|
||||
>
|
||||
<div v-for="item in list" :key="item.id" :id="item.id" @click="clickCounty(item)">
|
||||
<span v-if="!item.isClick" class="county_div_list_span_nochoose">{{ item.name }}</span>
|
||||
<img
|
||||
class="county_div_list_nochoose"
|
||||
v-if="!item.isClick"
|
||||
src="/statistical/left_county_nochoose.png"
|
||||
:style="{
|
||||
top: `${-7 * props.bi}px`,
|
||||
width: `${87 * props.bi}px`,
|
||||
marginLeft: `${11.5 * props.bi}px`,
|
||||
marginRight: `${11.5 * props.bi}px`,
|
||||
}"
|
||||
/>
|
||||
<span v-if="item.isClick" class="county_div_list_span_choose">{{ item.name }}</span>
|
||||
<img
|
||||
class="county_div_list_choose"
|
||||
v-if="item.isClick"
|
||||
src="/statistical/left_county_choose.png"
|
||||
:style="{
|
||||
width: `${110 * props.bi}px`,
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<img
|
||||
class="county_div_rightButton"
|
||||
:src="scrollImgRight"
|
||||
:style="{
|
||||
top: `${42 * props.bi}px`,
|
||||
left: `${4 * props.bi}px`,
|
||||
height: `${31 * props.bi}px`,
|
||||
width: `${31 * props.bi}px`,
|
||||
}"
|
||||
@click="scrollToElement('right')"
|
||||
/>
|
||||
<img class="county_div_rightButton" :src="scrollImgRight" @click="scrollToElement('right')" />
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
src="/statistical/left_decorative_bottom.png"
|
||||
:style="{
|
||||
width: `${840 * props.bi}px`,
|
||||
width: '840px',
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -95,17 +47,17 @@
|
|||
const scrollToElement = async (type) => {
|
||||
if (countyList.value) {
|
||||
if (type == 'left') {
|
||||
countyList.value.scrollLeft = countyList.value.scrollLeft - countyWidth * props.bi;
|
||||
countyList.value.scrollLeft = countyList.value.scrollLeft - countyWidth;
|
||||
}
|
||||
if (type == 'right') {
|
||||
countyList.value.scrollLeft = countyList.value.scrollLeft + countyWidth * props.bi;
|
||||
countyList.value.scrollLeft = countyList.value.scrollLeft + countyWidth;
|
||||
}
|
||||
if (countyList.value.scrollLeft == 0) {
|
||||
scrollImgLeft.value = '/statistical/left_direction_left1.png';
|
||||
} else {
|
||||
scrollImgLeft.value = '/statistical/left_direction_left2.png';
|
||||
}
|
||||
if (countyList.value.scrollLeft > 7 * countyWidth * props.bi) {
|
||||
if (countyList.value.scrollLeft > 7 * countyWidth) {
|
||||
scrollImgRight.value = '/statistical/left_direction_right1.png';
|
||||
} else {
|
||||
scrollImgRight.value = '/statistical/left_direction_right2.png';
|
||||
|
|
@ -125,7 +77,6 @@
|
|||
emit('countyClick', record);
|
||||
}
|
||||
|
||||
|
||||
// 初始数据
|
||||
const list = ref();
|
||||
async function getOptions() {
|
||||
|
|
@ -137,12 +88,11 @@
|
|||
});
|
||||
list.value = data;
|
||||
let linyishi = {
|
||||
id:"",
|
||||
name:"临沂市"
|
||||
id: '',
|
||||
name: '临沂市',
|
||||
};
|
||||
list.value.unshift(linyishi)
|
||||
list.value.unshift(linyishi);
|
||||
clickCounty(linyishi);
|
||||
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
|
@ -157,27 +107,27 @@
|
|||
&_div {
|
||||
display: flex;
|
||||
position: relative;
|
||||
// width: 840 * bi px;
|
||||
// bottom: 10 * bi px;
|
||||
width: 840px;
|
||||
bottom: 10px;
|
||||
|
||||
&_leftButton {
|
||||
position: relative;
|
||||
// top: 42 * bi px;
|
||||
// left: -4 * bi px;
|
||||
// height: 31 * bi px;
|
||||
// width: 31 * bi px;
|
||||
top: 42px;
|
||||
left: -4px;
|
||||
height: 31px;
|
||||
width: 31px;
|
||||
}
|
||||
|
||||
&_list {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
// width: 770 * bi px;
|
||||
width: 770px;
|
||||
|
||||
span {
|
||||
&_span_nochoose {
|
||||
position: relative;
|
||||
// top: 20 * bi px;
|
||||
// width: 110 * bi px;
|
||||
z-index:999;
|
||||
top: 30px;
|
||||
width: 110px;
|
||||
z-index: 999;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
|
|
@ -196,24 +146,39 @@
|
|||
|
||||
&_nochoose {
|
||||
position: relative;
|
||||
// top: -7 * bi px;
|
||||
// width: 87 * bi px;
|
||||
// margin-left: 11.5 * bi px;
|
||||
// margin-right: 11.5 * bi px;
|
||||
top: -7px;
|
||||
width: 87px;
|
||||
margin-left: 11.5px;
|
||||
margin-right: 11.5px;
|
||||
}
|
||||
|
||||
&_span_choose {
|
||||
position: relative;
|
||||
top: 30px;
|
||||
width: 110px;
|
||||
z-index: 999;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
color: #014ce2;
|
||||
}
|
||||
|
||||
&_choose {
|
||||
position: relative;
|
||||
// width: 110 * bi px;
|
||||
width: 110px;
|
||||
}
|
||||
}
|
||||
|
||||
&_rightButton {
|
||||
position: relative;
|
||||
// top: 42 * bi px;
|
||||
// left: 4 * bi px;
|
||||
// height: 31 * bi px;
|
||||
// width: 31 * bi px;
|
||||
top: 42px;
|
||||
left: 4px;
|
||||
height: 31px;
|
||||
width: 31px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,45 +3,41 @@
|
|||
<div
|
||||
class="layerbutton_div"
|
||||
:style="{
|
||||
marginBottom: `${15 * props.bi}px`,
|
||||
marginBottom: '15px',
|
||||
}"
|
||||
>
|
||||
<img
|
||||
id="left_layerButton_1"
|
||||
:src="button_1 ? '/statistical/layer-btn1-active.png':'/statistical/layer-btn1.png'"
|
||||
:src="button_1 ? '/statistical/layer-btn1-active.png' : '/statistical/layer-btn1.png'"
|
||||
@click="handlerLayerChange(1)"
|
||||
/>
|
||||
</div>
|
||||
<div class="layerbutton_div">
|
||||
<img
|
||||
id="left_layerButton_2"
|
||||
:src="button_2 ? '/statistical/layer-btn2-active.png':'/statistical/layer-btn2.png'"
|
||||
:src="button_2 ? '/statistical/layer-btn2-active.png' : '/statistical/layer-btn2.png'"
|
||||
@click="handlerLayerChange(2)"
|
||||
/>
|
||||
</div>
|
||||
<div class="layerbutton_div">
|
||||
<img
|
||||
id="left_layerButton_2"
|
||||
:src="button_3 ? '/statistical/layer-btn3-active.png':'/statistical/layer-btn3.png'"
|
||||
:src="button_3 ? '/statistical/layer-btn3-active.png' : '/statistical/layer-btn3.png'"
|
||||
@click="handlerLayerChange(3)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, defineEmits, defineProps } from 'vue';
|
||||
// emit
|
||||
const emit = defineEmits(['handlerLayerChange']);
|
||||
|
||||
const props = defineProps(['bi']);
|
||||
|
||||
const button_1 = ref(false);
|
||||
const button_2 = ref(true);
|
||||
const button_3 = ref(false);
|
||||
// 控制图层
|
||||
function handlerLayerChange(type:number){
|
||||
switch(type){
|
||||
function handlerLayerChange(type: number) {
|
||||
switch (type) {
|
||||
case 1:
|
||||
button_1.value = true;
|
||||
button_2.value = false;
|
||||
|
|
@ -58,22 +54,20 @@
|
|||
button_3.value = true;
|
||||
break;
|
||||
}
|
||||
emit("handlerLayerChange",type);
|
||||
|
||||
emit('handlerLayerChange', type);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.layerbutton {
|
||||
position:absolute;
|
||||
top:130px;
|
||||
left:60px;
|
||||
.layerbutton_div{
|
||||
margin-bottom:14px;
|
||||
cursor:pointer;
|
||||
img{
|
||||
width:60px;
|
||||
position: absolute;
|
||||
top: 130px;
|
||||
left: 60px;
|
||||
.layerbutton_div {
|
||||
margin-bottom: 14px;
|
||||
cursor: pointer;
|
||||
img {
|
||||
width: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,138 +1,31 @@
|
|||
<template>
|
||||
<div class="statistical">
|
||||
<img
|
||||
src="/statistical/left_statistical.png"
|
||||
:style="{
|
||||
height: `${100 * props.bi}px`,
|
||||
width: `${200 * props.bi}px`,
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
class="statistical_div"
|
||||
:style="{
|
||||
top: `${-75 * props.bi}px`,
|
||||
left: `${30 * props.bi}px`,
|
||||
}"
|
||||
>
|
||||
<img src="/statistical/left_statistical.png" />
|
||||
<div class="statistical_div">
|
||||
<a-row>
|
||||
<a-col :span="10" @click="handlerChangePolygonType('违法')">
|
||||
<span
|
||||
class="statistical_div_dot"
|
||||
:style="{
|
||||
background: '#fda1a1',
|
||||
width: `${5 * props.bi}px`,
|
||||
height: `${5 * props.bi}px`,
|
||||
left: `${-5 * props.bi}px`,
|
||||
top: `${-2 * props.bi}px`,
|
||||
marginRight: `${5 * props.bi}px`,
|
||||
marginBottom: `${20 * props.bi}px`,
|
||||
}"
|
||||
/>
|
||||
<span
|
||||
class="statistical_div_span"
|
||||
:style="{
|
||||
top: `${-20 * props.bi}px`,
|
||||
fontSize: `${13 * props.bi}px`,
|
||||
}"
|
||||
>
|
||||
违法
|
||||
</span>
|
||||
<span class="statistical_div_dot" style="background: #fda1a1" />
|
||||
<span class="statistical_div_span"> 违法 </span>
|
||||
</a-col>
|
||||
<a-col :span="10" @click="handlerChangePolygonType('补办手续')">
|
||||
<span
|
||||
class="statistical_div_dot"
|
||||
:style="{
|
||||
background: '#abfcff',
|
||||
width: `${5 * props.bi}px`,
|
||||
height: `${5 * props.bi}px`,
|
||||
left: `${-5 * props.bi}px`,
|
||||
top: `${-2 * props.bi}px`,
|
||||
marginRight: `${5 * props.bi}px`,
|
||||
marginBottom: `${20 * props.bi}px`,
|
||||
}"
|
||||
/>
|
||||
<span
|
||||
class="statistical_div_span"
|
||||
:style="{
|
||||
top: `${-20 * props.bi}px`,
|
||||
fontSize: `${13 * props.bi}px`,
|
||||
}"
|
||||
>
|
||||
补办手续
|
||||
</span>
|
||||
<span class="statistical_div_dot" style="background: #abfcff" />
|
||||
<span class="statistical_div_span"> 补办手续 </span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="10" @click="handlerChangePolygonType('合法')">
|
||||
<span
|
||||
class="statistical_div_dot"
|
||||
:style="{
|
||||
background: '#ffecb9',
|
||||
width: `${5 * props.bi}px`,
|
||||
height: `${5 * props.bi}px`,
|
||||
left: `${-5 * props.bi}px`,
|
||||
top: `${-2 * props.bi}px`,
|
||||
marginRight: `${5 * props.bi}px`,
|
||||
marginBottom: `${20 * props.bi}px`,
|
||||
}"
|
||||
/>
|
||||
<span
|
||||
class="statistical_div_span"
|
||||
:style="{
|
||||
top: `${-20 * props.bi}px`,
|
||||
fontSize: `${13 * props.bi}px`,
|
||||
}"
|
||||
>
|
||||
合法
|
||||
</span>
|
||||
<span class="statistical_div_dot" style="background: #ffecb9" />
|
||||
<span class="statistical_div_span"> 合法 </span>
|
||||
</a-col>
|
||||
<a-col :span="10" @click="handlerChangePolygonType('拆除复耕')">
|
||||
<span
|
||||
class="statistical_div_dot"
|
||||
:style="{
|
||||
background: '#c2b3fb',
|
||||
width: `${5 * props.bi}px`,
|
||||
height: `${5 * props.bi}px`,
|
||||
left: `${-5 * props.bi}px`,
|
||||
top: `${-2 * props.bi}px`,
|
||||
marginRight: `${5 * props.bi}px`,
|
||||
marginBottom: `${20 * props.bi}px`,
|
||||
}"
|
||||
/>
|
||||
<span
|
||||
class="statistical_div_span"
|
||||
:style="{
|
||||
top: `${-20 * props.bi}px`,
|
||||
fontSize: `${13 * props.bi}px`,
|
||||
}"
|
||||
>
|
||||
拆除复耕
|
||||
</span>
|
||||
<span class="statistical_div_dot" style="background: #c2b3fb" />
|
||||
<span class="statistical_div_span"> 拆除复耕 </span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="10" @click="handlerChangePolygonType('其他')">
|
||||
<span
|
||||
class="statistical_div_dot"
|
||||
:style="{
|
||||
background: '#c7ffbc',
|
||||
width: `${5 * props.bi}px`,
|
||||
height: `${5 * props.bi}px`,
|
||||
left: `${-5 * props.bi}px`,
|
||||
top: `${-2 * props.bi}px`,
|
||||
marginRight: `${5 * props.bi}px`,
|
||||
marginBottom: `${20 * props.bi}px`,
|
||||
}"
|
||||
/>
|
||||
<span
|
||||
class="statistical_div_span"
|
||||
:style="{
|
||||
top: `${-20 * props.bi}px`,
|
||||
fontSize: `${13 * props.bi}px`,
|
||||
}"
|
||||
>
|
||||
其他
|
||||
</span>
|
||||
<span class="statistical_div_dot" style="background: #c7ffbc" />
|
||||
<span class="statistical_div_span"> 其他 </span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
|
|
@ -155,6 +48,8 @@
|
|||
|
||||
img {
|
||||
position: relative;
|
||||
height: 100px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
&_div {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,13 @@
|
|||
<template>
|
||||
<div class="screen-header-container">
|
||||
|
||||
<div class="screen-title">
|
||||
<img src="/public/statistical/logo.png" alt="" > {{t("sys.subject.header_title")}}</div>
|
||||
<div class="left-category-container">
|
||||
<span class="screen-currentTime">
|
||||
<span class="time">{{ currentTime }}</span>
|
||||
<span class="separator"></span>
|
||||
<span class="weather">{{ Weather }}</span>
|
||||
</span>
|
||||
<div class="left-category-container">
|
||||
<div class="category-item" v-for="(item,index) in left_categorys"
|
||||
:style="{left:-index*26+'px'}"
|
||||
@click="getHome(item)"
|
||||
|
|
@ -18,7 +22,9 @@
|
|||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, defineEmits,onMounted } from 'vue';
|
||||
import { ref, defineEmits, onMounted, onUnmounted, watchEffect } from 'vue';
|
||||
import axios from 'axios';
|
||||
import dayjs from 'dayjs';
|
||||
import { useI18n } from '@/hooks/web/useI18n';
|
||||
const { t } = useI18n();
|
||||
import {message} from 'ant-design-vue'
|
||||
|
|
@ -67,9 +73,36 @@
|
|||
}
|
||||
}
|
||||
|
||||
// 时间和天气
|
||||
const currentTime = ref(dayjs().locale('zh-cn').format('YYYY年M月D日 dddd HH:mm:ss'));
|
||||
const Weather = ref('');
|
||||
function getWeather() {
|
||||
// http://www.tianqiapi.com/index/doc?version=v63
|
||||
// 若次数试用用尽，注册账号后，切换appid和appsecret即可
|
||||
axios({
|
||||
method: 'get',
|
||||
url: `http://v0.yiketianqi.com/api?unescape=1&version=v63&appid=88136471&appsecret=Hw4GLOcA&city=临沂`,
|
||||
}).then((res) => {
|
||||
Weather.value = res.data.wea;
|
||||
});
|
||||
}
|
||||
function updateTime() {
|
||||
currentTime.value = dayjs().locale('zh-cn').format('YYYY年M月D日 dddd HH:mm');
|
||||
}
|
||||
|
||||
// 监听每一秒更新时间
|
||||
watchEffect(() => {
|
||||
const intervalId = setInterval(updateTime, 1000);
|
||||
// 清除定时器
|
||||
onUnmounted(() => clearInterval(intervalId));
|
||||
});
|
||||
|
||||
onMounted(()=>{
|
||||
onUnmounted(() => {
|
||||
updateTime();
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getWeather();
|
||||
getMenu();
|
||||
})
|
||||
</script>
|
||||
|
|
@ -102,6 +135,30 @@
|
|||
top:-5px;
|
||||
}
|
||||
}
|
||||
|
||||
.screen-currentTime {
|
||||
position: relative;
|
||||
left: 50px;
|
||||
top: -60px;
|
||||
|
||||
width: 344px;
|
||||
height: 14px;
|
||||
font-family: DengXian;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #8BD8FF;
|
||||
line-height: 3px;
|
||||
font-style: italic;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.time,
|
||||
.weather {
|
||||
display: inline-block;
|
||||
}
|
||||
.separator {
|
||||
margin: 0 50px;
|
||||
}
|
||||
.left-category-container{
|
||||
position:absolute;
|
||||
top:50px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue