wangqiujuan0808
/
bw
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

123

main
wangqiujuan0808 2023-12-13 11:28:50 +08:00
parent 378088b9ea
commit a78535f6a7
7 changed files with 149 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist.7z Normal file
View File

Binary file not shown.

4
src/views/bim/bimHome/components/DeviceEvent.vue
View File

@ -67,8 +67,8 @@ const openDialog = () => {
<style lang='scss' scoped>
.deviceDiv {
position: absolute;
// top: 410px;
bottom: 40px;
top: 380px;
right: 10px;
width: 360px;
// height: 460px;

2
src/views/bim/bimHome/components/DevicePie.vue
View File

@ -69,7 +69,7 @@ const openDialog = () => {
<style lang='scss' scoped>
.deviceDiv {
position: absolute;
bottom: 40px;
top: 380px;
right: 10px;
width: 360px;
height: 320px;

3
src/views/bim/bimHome/components/RealData.vue
View File

@ -61,8 +61,7 @@ const openDialog = () => {
<style lang='scss' scoped>
.deviceDiv {
position: absolute;
// top: 410px;
bottom: 40px;
top: 380px;
right: 10px;
width: 360px;
display: flex;

23
src/views/components/Bar.vue
View File

@ -38,10 +38,9 @@ const getCharts = () => {
},
},
grid: {
left: '1%',
right: '8%',
bottom: '8%',
containLabel: true
left: '12%',
right: '4%',
bottom: '5%'
},
xAxis: [
{
@ -69,19 +68,7 @@ const getCharts = () => {
yAxis: [
{
type: 'category',
data: ['漳州厂区', '武汉厂区', '3厂区', '2厂区', '4厂区', '5厂区'],
axisLine: {
show: true,
lineStyle: {
width: 0
}
},
show: false,
position: 'left',
},
{
type: 'category',
data: ['漳州厂区', '武汉厂区', '3厂区', '2厂区', '4厂区', '5厂区'],
data: ['漳州', '武汉', '3厂区', '2厂区', '4厂区', '5厂区'],
axisLine: {
show: true,
lineStyle: {
@ -101,6 +88,7 @@ const getCharts = () => {
{
name: '2023资产',
type: 'bar',
barWidth: 36,
// xAxisIndex:1,
data: [182, 234, 290, 104, 131, 100],
itemStyle: {
@ -118,6 +106,7 @@ const getCharts = () => {
{
name: '2022资产',
type: 'bar',
barWidth: 16,
// xAxisIndex:1,
data: [193, 234, 310, 121, 134, 681],
itemStyle: {

118
src/views/components/xtBar.vue Normal file
View File

@ -0,0 +1,118 @@
<template>
<dv-border-box-12 class="xt-bar-div">
<div id="xtbar">
</div>
</dv-border-box-12>
</template>
<script setup>
import * as echarts from "echarts";
onMounted(() => {
nextTick(() => {
getCharts();
})
})
const getCharts = () => {
var dom = document.getElementById("xtbar");
if (dom) {
// 手动移除该属性
dom.removeAttribute('_echarts_instance_')
var myChart = echarts.init(dom);
let option = {
title: {
text: ''
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
textStyle: {
color: "#ffff",
fontFamily: "Alibaba PuHuiTi",
fontSize: 14,
fontWeight: 400,
},
},
grid: {
left: '15%',
right: '4%',
bottom: '5%'
},
xAxis: [
{
type: 'value',
axisLine: {
show: true,
lineStyle: {
width: 1
}
},
axisLabel: {
textStyle: {
color: "#fff", //X轴字体颜色
fontSize: "12", //X轴字体大小
},
},
splitLine: {
// 网格线
show: false,
},
show: true,
maxInterval: 50000 //值坐标最大的数值间隔 最小同样min
}
],
yAxis: [
{
type: 'category',
data: ['0-40', '41-50', '51-60', '61-70', '71-80', '81-90', '91-100', '101-110', '111-120','120以上'],
axisLine: {
show: true,
lineStyle: {
width: 2
}
},
axisLabel: {
textStyle: {
color: "#fff", //X轴字体颜色
fontSize: "12", //X轴字体大小
},
},
position: 'left',
}
],
series: [
{
name: '系统数据分析',
type: 'bar',
barWidth: 16,
// xAxisIndex:1,
data: [182, 234, 290, 104, 131, 100],
itemStyle: {
normal: {
label: {
show: true,
textStyle: {
color: "#5470c6",
},
position: "right",
},
}
}
}
]
};
option && myChart.setOption(option);
}
}
</script>
<style lang="scss" scoped>
#xtbar {
width: 100%;
height:100%;
}
</style>

31
src/views/index.vue
View File

@ -13,6 +13,7 @@
<Map></Map>
<Pie></Pie>
<Bar></Bar>
<xtBar></xtBar>
<Device></Device>
<Line></Line>
</div>
@ -23,6 +24,7 @@
import Map from './components/Map.vue';
import Pie from './components/Pie.vue';
import Bar from './components/Bar.vue';
import xtBar from './components/xtBar.vue';
import Line from './components/Line.vue';
import Device from './components/Device.vue';
import useTagsViewStore from "@/store/modules/tagsView";
@ -47,11 +49,12 @@ const gotoPage = (item) => {
.home {
.topMenu {
width: 100%;
height: 80px;
border: 1px solid #020c45;
height: 60px;
// border: 1px solid #020c45;
display: flex;
align-items: center;
background: #3d5d9a;
// background: #3d5d9a;
background: #030e23;
color: #fff;
> div {
width: 260px;
@ -66,7 +69,7 @@ const gotoPage = (item) => {
}
.home-page {
width:100%;
height: calc(100vh - 150px);
height: calc(100vh - 130px);
background: #000000;
position: relative;
.map-div {
@ -85,16 +88,24 @@ const gotoPage = (item) => {
.bar-div {
position: absolute;
width: 400px;
height: 460px;
height: 98%;
top: 10px;
right: 10px;
padding: 15px;
}
.xt-bar-div {
position: absolute;
width: 400px;
height: 460px;
top: 370px;
left: 10px;
padding: 15px;
}
.device-div {
position: absolute;
bottom: 10px;
left: 10px;
width: 930px;
top: 10px;
left: 420px;
width: calc(100% - 840px);
height: 200px;
padding: 15px;
// background: #b2cae0;
@ -102,8 +113,8 @@ const gotoPage = (item) => {
.line-div {
position: absolute;
bottom: 10px;
right: 10px;
width: 930px;
left: 420px;
width: calc(100% - 840px);
height: 200px;
padding: 15px;
// background: #b2cae0;