bonus
/
BigScreenUI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化

This commit is contained in:
13218645326 2023-11-30 19:45:08 +08:00
parent d90568e4b8
commit 1cb5730580
3 changed files with 130 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
env.d.ts vendored
View File

@ -1,3 +1,10 @@
/// <reference types="vite/client" />
declare module "nprogress"
declare module "BMap"
declare module "BMap"
declare module '*.vue' {
import type { DefineComponent } from 'vue'
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
const component: DefineComponent<{}, {}, any>
export default component
}

114
src/components/customCom/equipmentLeasing.vue
View File

@ -18,9 +18,34 @@
</mapEcharts>
</div>
</div>
<equipmentDialog></equipmentDialog>
</div>
<div class="type_list">
<div class="type_list_item">
<div class="out_dot1">
<div class="dot">
<div class="inner_dot"></div>
</div>
</div>
自有
</div>
<div class="type_list_item">
<div class="out_dot2">
<div class="dot">
<div class="inner_dot"></div>
</div>
</div>
待租
</div>
<div class="type_list_item">
<div class="out_dot3">
<div class="dot">
<div class="inner_dot"></div>
</div>
</div>
在租
</div>
</div>
<equipmentDialog></equipmentDialog>
</div>
</template>
<script setup lang="ts">
@ -183,6 +208,7 @@ const mapDataByProvice = (provinceName: String) => {
height: 504px;
background-image: url('../../assets/img/map_bg.png');
background-color: linear-gradient(180deg, #011B37 0%, #000525 7%, rgba(0, 2, 37, 0) 100%);
position: relative;
}
.top_title {
@ -222,4 +248,86 @@ const mapDataByProvice = (provinceName: String) => {
width: 822px;
height: 447px;
}
.type_list {
display: flex;
justify-content: flex-start;
position: absolute;
left: 40px;
bottom: 16px;
.out_dot1,
.out_dot2,
.out_dot3 {
width: 14px;
height: 14px;
background-color: rgba($color: #FA0000, $alpha: 0.3);
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
margin-right: 3px;
.dot {
width: 7px;
height: 7px;
background-color: rgba($color: #FA0000, $alpha: 0.4);
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
.inner_dot {
width: 3px;
height: 3px;
background-color: #FA0000;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
}
}
}
.out_dot1 {
background-color: rgba($color: #FA0000, $alpha: 0.3);
.dot {
background-color: rgba($color: #FA0000, $alpha: 0.4);
.inner_dot {
background-color: #FA0000;
}
}
}
.out_dot2 {
background-color: rgba($color: #00FF31, $alpha: 0.3);
.dot {
background-color: rgba($color: #00FF31, $alpha: 0.4);
.inner_dot {
background-color: #00FF31;
}
}
}
.out_dot3 {
background-color: rgba($color: #FAD300, $alpha: 0.3);
.dot {
background-color: rgba($color: #FAD300, $alpha: 0.4);
.inner_dot {
background-color: #FAD300;
}
}
}
}
.type_list_item{
display: flex;
justify-content: flex-start;
font-size: 13px;
color: #fff;
padding-right: 10px;
}
</style>

60
src/views/screen/sharePlatform.vue
View File

@ -104,10 +104,12 @@
<div class="bottom_row_center">
<div class="bottom_row_center_map">
<equipmentLeasing></equipmentLeasing>
</div>
<div class="bottom_row_center_bar">
<div class="bottom_row_center_bar_left">
<div class="total_count">
总人数：3188
</div>
<barCom :domId="1" :title="barComProps.title" :titleStyle="barComProps.titleStyle"
:xAxisData="barComProps.xAxisData" :yAxisProps="barComProps.yAxisProps"
:seriseData="barComProps.seriseData" :emphasisItemStyle="barComProps.emphasisItemStyle"
@ -124,7 +126,6 @@
:stackLabel="barComPropsSimple.stackLabel" :borderRadius="barComPropsSimple.borderRadius"
:barWidth="barComProps.barWidth" :formatCallBack="barComPropsSimple.formatCallBack"></barCom>
</div>
</div>
</div>
<div class="bottom_row_right">
@ -144,53 +145,6 @@
</div>
</div>
<!-- <div class="echart_row_1">
<div class="echart_cell">
<lineCom :title="lineComProps.title" :legendDataList="lineComProps.legendDataList"
:FeatureList="lineComProps.FeatureList" :xAxisData="lineComProps.xAxisData"
:seriesMultipleFlag="lineComProps.seriesMultipleFlag"
:seriseMultipleName="lineComProps.seriseMultipleName"
:seriseMultipleData="lineComProps.seriseMultipleData" :xAxisProps="lineComProps.xAxisProps"
:formatCallBack="lineComProps.formatCallBack"></lineCom>
<barCom :domId="3" :title="barComPropsHorizontal.title" :xAxisProps="barComPropsHorizontal.xAxisProps"
:xAxisData="barComPropsHorizontal.xAxisData" :yAxisData="barComPropsHorizontal.yAxisData"
:yAxisProps="barComPropsHorizontal.yAxisProps" :seriseData="barComPropsHorizontal.seriseData"
:emphasisItemStyle="barComPropsHorizontal.emphasisItemStyle"
:itemStyle="barComPropsHorizontal.itemStyle" :stackFlag="barComPropsHorizontal.stackFlag"
:stackLabel="barComPropsHorizontal.stackLabel" :borderRadius="barComPropsHorizontal.borderRadius"
:formatCallBack="barComPropsHorizontal.formatCallBack">
</barCom>
</div>
<div class="echart_cell">
<mapEcharts></mapEcharts>
</div>
</div>
<div class="echart_row2">
<div class="echart_cell">
<barCom :domId="1" :title="barComProps.title" :xAxisData="barComProps.xAxisData"
:yAxisProps="barComProps.yAxisProps" :seriseData="barComProps.seriseData"
:emphasisItemStyle="barComProps.emphasisItemStyle" :itemStyle="barComProps.itemStyle"
:stackFlag="barComProps.stackFlag" :stackLabel="barComProps.stackLabel"
:borderRadius="barComProps.borderRadius" :formatCallBack="barComProps.formatCallBack"></barCom>
</div>
<div class="echart_cell">
<barCom :domId="2" :title="barComPropsSimple.title" :xAxisData="barComPropsSimple.xAxisData"
:yAxisProps="barComPropsSimple.yAxisProps" :seriseData="barComPropsSimple.seriseData"
:emphasisItemStyle="barComPropsSimple.emphasisItemStyle" :itemStyle="barComPropsSimple.itemStyle"
:stackFlag="barComPropsSimple.stackFlag" :stackLabel="barComPropsSimple.stackLabel"
:borderRadius="barComPropsSimple.borderRadius" :formatCallBack="barComPropsSimple.formatCallBack">
</barCom>
</div>
</div>
<div class="echart_row3">
<div class="echart_cell">
<Pie3dCom></Pie3dCom>
</div>
<div class="echart_cell">
</div>
</div> -->
</div>
</template>
@ -638,6 +592,14 @@ const barComPropsHorizontal = reactive({
.bottom_row_center_bar_left {
width: 580px;
position: relative;
.total_count{
position: absolute;
right: 26px;
top: 23px;
font-size: 14px;
color: rgba(255,255,255,0.86);
}
}
.bottom_row_center_bar_right {