Merge branch 'main' of https://git.shikicc.com/wangqiujuan0808/bw into main
commit
1be51561e1
|
|
@ -5,7 +5,7 @@
|
|||
"author": "若依",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"dev": "vite --host=0.0.0.0",
|
||||
"build:prod": "vite build",
|
||||
"build:stage": "vite build --mode staging",
|
||||
"preview": "vite preview"
|
||||
|
|
|
|||
|
|
@ -124,11 +124,13 @@ aside {
|
|||
//main-container全局样式
|
||||
.app-container {
|
||||
// height: 80px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.mr10 {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.components-container {
|
||||
margin: 30px 50px;
|
||||
position: relative;
|
||||
|
|
@ -185,9 +187,67 @@ aside {
|
|||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
|
||||
background-color: #033b73 !important;
|
||||
}
|
||||
.el-tree-node__content:hover {
|
||||
background-color: #033b73 !important;
|
||||
|
||||
.bim-dialog {
|
||||
background: #00174b !important;
|
||||
|
||||
.el-dialog__title {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
|
||||
background-color: #082859 !important;
|
||||
}
|
||||
.el-tree-node__content {
|
||||
background-color: #00174b !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.el-tree-node__content:hover {
|
||||
background-color: #082859 !important;
|
||||
}
|
||||
|
||||
.el-input__wrapper {
|
||||
background: transparent !important;
|
||||
border: 1px solid #2E6099 !important;
|
||||
box-shadow: none !important;
|
||||
|
||||
&:hover {
|
||||
outline: none !important;
|
||||
border: 1px solid #2E6099 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-select__icon {
|
||||
color: #2E6099 !important;
|
||||
}
|
||||
|
||||
.el-tabs__item,
|
||||
.el-range-input,
|
||||
.el-input__inner {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.el-tabs__header .el-tabs__item.is-active {
|
||||
color: #3cbfdf !important;
|
||||
}
|
||||
|
||||
.el-table__cell,
|
||||
.el-tabs__header,
|
||||
.el-tabs__header .el-tabs__item,
|
||||
.el-tabs--card>.el-tabs__header .el-tabs__nav {
|
||||
border-color:#2E6099 !important;
|
||||
}
|
||||
.el-table,
|
||||
tr,
|
||||
.el-table__border-left-patch,
|
||||
.el-table--border::after,
|
||||
.el-table__header-wrapper th,
|
||||
.el-table--enable-row-hover .el-table__body tr>td.el-table__cell,
|
||||
.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell,
|
||||
.el-table__inner-wrapper::after,
|
||||
.el-table__inner-wrapper::before {
|
||||
background-color: #00174b !important;
|
||||
color: #fff !important
|
||||
}
|
||||
}
|
||||
|
|
@ -41,6 +41,5 @@ function handleSetSize(size) {
|
|||
font-size: 18px;
|
||||
line-height: 50px;
|
||||
padding-right: 7px;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<div class="navbar">
|
||||
<hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
|
||||
<hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container"
|
||||
@toggleClick="toggleSideBar" />
|
||||
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!settingsStore.topNav" />
|
||||
<top-nav id="topmenu-container" class="topmenu-container" v-if="settingsStore.topNav" />
|
||||
|
||||
|
|
@ -139,7 +140,8 @@ function setLayout() {
|
|||
float: right;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
color: #fff;
|
||||
color: #000;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
|
@ -149,10 +151,11 @@ function setLayout() {
|
|||
padding: 0 8px;
|
||||
height: 100%;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
color: #000;
|
||||
vertical-align: text-bottom;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&.hover-effect {
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
|
|
@ -186,6 +189,9 @@ function setLayout() {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.size-icon--style) {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
}</style>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<router-view v-slot="{ Component, route }">
|
||||
<transition name="fade-transform" mode="out-in">
|
||||
<keep-alive :include="tagsViewStore.cachedViews">
|
||||
<component v-if="!route.meta.link" :is="Component" :key="route.path"/>
|
||||
<component v-if="!route.meta.link" :is="Component" :key="route.path" />
|
||||
</keep-alive>
|
||||
</transition>
|
||||
</router-view>
|
||||
|
|
@ -25,9 +25,36 @@ const tagsViewStore = useTagsViewStore()
|
|||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
:deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content) {
|
||||
background-color: #082859 !important;
|
||||
}
|
||||
|
||||
:deep(.el-tree-node__content:hover) {
|
||||
background-color: #082859 !important;
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
background: transparent;
|
||||
border: 1px solid #2E6099;
|
||||
box-shadow: none;
|
||||
|
||||
&:hover {
|
||||
outline: none;
|
||||
border: 1px solid #2E6099;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-select__icon) {
|
||||
color: #2E6099
|
||||
}
|
||||
|
||||
:deep(.el-input__inner) {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.fixed-header + .app-main {
|
||||
.fixed-header+.app-main {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
|
|
@ -37,7 +64,7 @@ const tagsViewStore = useTagsViewStore()
|
|||
min-height: calc(100vh - 84px);
|
||||
}
|
||||
|
||||
.fixed-header + .app-main {
|
||||
.fixed-header+.app-main {
|
||||
padding-top: 84px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="navbar">
|
||||
<div class="navbar1">
|
||||
<!-- <top-nav id="topmenu-container" class="topmenu-container" v-if="settingsStore.topNav" /> -->
|
||||
<div class="left">
|
||||
<!-- <img src="@/assets/logo/logo.png" alt="dark" /> -->
|
||||
|
|
@ -161,7 +161,7 @@ function setLayout() {
|
|||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.navbar {
|
||||
.navbar1 {
|
||||
height: 70px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
|
@ -302,5 +302,8 @@ function setLayout() {
|
|||
}
|
||||
}
|
||||
}
|
||||
:deep(.size-icon--style) {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}</style>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
const bimStore = defineStore(
|
||||
'bim', {
|
||||
state: () => ({
|
||||
|
|
@ -6,13 +5,21 @@ const bimStore = defineStore(
|
|||
activateTree: {},
|
||||
activateDevice: {},
|
||||
activateApplication: {},
|
||||
deviceNum: ''
|
||||
deviceNum: '',
|
||||
activateMenu: {
|
||||
name: '建筑信息',
|
||||
background: '#202a60'
|
||||
}
|
||||
}),
|
||||
actions: {
|
||||
// 菜单
|
||||
setActivateIndex(index) {
|
||||
this.activateIndex = index;
|
||||
},
|
||||
|
||||
setActivateMenu(item) {
|
||||
this.activateMenu = item;
|
||||
},
|
||||
// 建筑树选中
|
||||
setActivateTree(item) {
|
||||
this.activateTree = item;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// let color= ['#007d7b', '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800', '#FF5722', '#E91E63', '#9C27B0', '#673AB7']
|
||||
|
||||
let color = ['#f46464', '#7bddf5', '#f5ef7b', '#f57bcc']
|
||||
let color = ['#2E6099', '#aa2b3d', '#24cdfb', '#bd9f63']
|
||||
const getPie3D = (pieData, internalDiameterRatio, rateName) => {
|
||||
// internalDiameterRatio:透明的空心占比
|
||||
const series = []
|
||||
|
|
|
|||
|
|
@ -30,9 +30,10 @@ const listData = props.infoList.detail;
|
|||
<style lang="scss" scoped>
|
||||
.baseInfo-div {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
// height: 80%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 18px;
|
||||
.left-div {
|
||||
width: 69%;
|
||||
height: 100%;
|
||||
|
|
@ -40,6 +41,7 @@ const listData = props.infoList.detail;
|
|||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
>div {
|
||||
padding: 40px 0;
|
||||
width: 48%;
|
||||
line-height: 24px;
|
||||
height: 48px;
|
||||
|
|
|
|||
|
|
@ -52,8 +52,8 @@ const data = reactive({
|
|||
value: 45
|
||||
},
|
||||
{
|
||||
type: '空调设备',
|
||||
name: '新风机组',
|
||||
type: '生产设备',
|
||||
name: '过滤槽',
|
||||
value: 130
|
||||
},
|
||||
{
|
||||
|
|
@ -84,8 +84,8 @@ const data = reactive({
|
|||
value: 95
|
||||
},
|
||||
{
|
||||
type: '空调设备',
|
||||
name: '新风机组',
|
||||
type: '生产设备',
|
||||
name: '过滤槽',
|
||||
value: 100
|
||||
},
|
||||
{
|
||||
|
|
@ -117,8 +117,8 @@ const data = reactive({
|
|||
value: 85
|
||||
},
|
||||
{
|
||||
type: '空调设备',
|
||||
name: '新风机组',
|
||||
type: '生产设备',
|
||||
name: '过滤槽',
|
||||
value: 130
|
||||
},
|
||||
{
|
||||
|
|
@ -150,8 +150,8 @@ const data = reactive({
|
|||
value: 115
|
||||
},
|
||||
{
|
||||
type: '空调设备',
|
||||
name: '新风机组',
|
||||
type: '生产设备',
|
||||
name: '过滤槽',
|
||||
value: 90
|
||||
},
|
||||
{
|
||||
|
|
@ -212,13 +212,5 @@ const handleNodeClick = (value) => {
|
|||
.el-select {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
:deep(.el-input__inner) {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -5,21 +5,25 @@
|
|||
<el-tab-pane :label="item" v-for="(item, index) of tabData" :key="index" :name="index + ''">
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<BasicInfo :infoList="detailData"></BasicInfo>
|
||||
<BasicInfo :infoList="detailData" v-if="activeName == '0'"></BasicInfo>
|
||||
<RealInfo v-if="activeName == '1'"></RealInfo>
|
||||
<HistoryInfo v-if="activeName == '2'"></HistoryInfo>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import bimStore from '@/store/modules/bim';
|
||||
import BasicInfo from './BasicInfo.vue';
|
||||
import RealInfo from './RealInfo.vue';
|
||||
import HistoryInfo from './HistoryInfo.vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
const deviceData = {
|
||||
'EQ0001': {
|
||||
name: '过滤槽',
|
||||
name: '立仓',
|
||||
imgUlr: '',
|
||||
detail: [
|
||||
{
|
||||
name: '资产名称',
|
||||
value: '过滤槽'
|
||||
value: '立仓'
|
||||
},
|
||||
{
|
||||
name: '资产类型',
|
||||
|
|
@ -72,12 +76,12 @@ const deviceData = {
|
|||
]
|
||||
},
|
||||
'EQ0002': {
|
||||
name: '新风机组',
|
||||
name: '过滤槽',
|
||||
imgUlr: '',
|
||||
detail: [
|
||||
{
|
||||
name: '资产名称',
|
||||
value: '新风机组'
|
||||
value: '过滤槽'
|
||||
},
|
||||
{
|
||||
name: '资产类型',
|
||||
|
|
@ -147,9 +151,9 @@ const { detailData } = toRefs(data);
|
|||
const deviceNum = computed(() => bimStore().deviceNum);
|
||||
detailData.value = deviceData[deviceNum.value];
|
||||
const handleClick = (tab, event) => {
|
||||
if(activeName !== '0') {
|
||||
ElMessage.warning('暂未开发');
|
||||
}
|
||||
// if(activeName !== '0' && activeName !== '1' && activeName !=='2') {
|
||||
// ElMessage.warning('暂未开发');
|
||||
// }
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -158,12 +162,14 @@ const handleClick = (tab, event) => {
|
|||
<style lang="scss" scoped>
|
||||
.detail-div {
|
||||
height: 700px;
|
||||
color: #fff;
|
||||
.title-div {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
width: 100%;
|
||||
border: 1px solid #ddd;
|
||||
border: 1px solid #2E6099;
|
||||
padding: 0 10px;
|
||||
margin-bottom:5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -64,8 +64,8 @@ const data = reactive({
|
|||
id: "echartDiv0"
|
||||
},
|
||||
{
|
||||
type: '空调设备',
|
||||
name: '新风机组',
|
||||
type: '生产设备',
|
||||
name: '过滤槽',
|
||||
num: 'EQ0002',
|
||||
value: 130,
|
||||
id: "echartDiv1"
|
||||
|
|
@ -106,8 +106,8 @@ const data = reactive({
|
|||
id: "echartDiv0"
|
||||
},
|
||||
{
|
||||
type: '空调设备',
|
||||
name: '新风机组',
|
||||
type: '生产设备',
|
||||
name: '过滤槽',
|
||||
num: 'EQ0002',
|
||||
value: 50,
|
||||
id: "echartDiv1"
|
||||
|
|
@ -149,8 +149,8 @@ const data = reactive({
|
|||
id: "echartDiv0"
|
||||
},
|
||||
{
|
||||
type: '空调设备',
|
||||
name: '新风机组',
|
||||
type: '生产设备',
|
||||
name: '过滤槽',
|
||||
num: 'EQ0002',
|
||||
value: 80,
|
||||
id: "echartDiv1"
|
||||
|
|
@ -427,7 +427,7 @@ const viewDetail = (val) => {
|
|||
.left-div {
|
||||
width: 20%;
|
||||
height: 100%;
|
||||
border: 1px solid #3cbfdf;
|
||||
border: 1px solid #2E6099;
|
||||
|
||||
.el-tree {
|
||||
margin: 0 10px;
|
||||
|
|
@ -454,13 +454,13 @@ const viewDetail = (val) => {
|
|||
.echartDiv100 {
|
||||
width: 22% !important;
|
||||
height: 100% !important;
|
||||
border: 1px solid #3cbfdf;
|
||||
border: 1px solid #2E6099;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-div {
|
||||
height: 74%;
|
||||
border: 1px solid #3cbfdf;
|
||||
border: 1px solid #2E6099;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@ const openDialog = () => {
|
|||
top: 380px;
|
||||
right: 10px;
|
||||
width: 360px;
|
||||
height: 320px;
|
||||
height: 380px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -40,11 +40,23 @@ const data = reactive({
|
|||
},
|
||||
children: [
|
||||
{
|
||||
label: '设备一',
|
||||
label: '立仓',
|
||||
id: '0-1',
|
||||
clickName: 'set1',
|
||||
info: {
|
||||
name: '设备一',
|
||||
name: '立仓',
|
||||
type: '生产设备',
|
||||
status: '启用'
|
||||
},
|
||||
children: []
|
||||
|
||||
},
|
||||
{
|
||||
label: '过滤槽',
|
||||
id: '0-1',
|
||||
clickName: 'set6',
|
||||
info: {
|
||||
name: '过滤槽',
|
||||
type: '生产设备',
|
||||
status: '启用'
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,160 @@
|
|||
<template>
|
||||
<div class="historyInfo-div">
|
||||
<div id="line"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
getCharts();
|
||||
})
|
||||
})
|
||||
var colors = ['#1890FF', '#24CDFB'];
|
||||
const getCharts = () => {
|
||||
var dom = document.getElementById("line");
|
||||
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: {
|
||||
top: '24%',
|
||||
left: '5%',
|
||||
right: '8%',
|
||||
// bottom: '2%',
|
||||
height: '80%',
|
||||
containLabel: true
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
// 网格线
|
||||
lineStyle: {
|
||||
type: "dotted", //设置网格线类型 dotted：虚线 solid:实线
|
||||
color: "#29507E",
|
||||
},
|
||||
show: true,
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#fff", //X轴字体颜色
|
||||
fontSize: "12", //X轴字体大小
|
||||
},
|
||||
},
|
||||
show: true,
|
||||
maxInterval: 50000 //值坐标最大的数值间隔 最小同样min
|
||||
}
|
||||
],
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
}
|
||||
},
|
||||
show: false,
|
||||
position: 'bottom',
|
||||
},
|
||||
{
|
||||
type: 'category',
|
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#fff", //X轴字体颜色
|
||||
fontSize: "12", //X轴字体大小
|
||||
},
|
||||
},
|
||||
position: 'bottom',
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '温度',
|
||||
type: 'line',
|
||||
color: colors[0],
|
||||
barWidth: 18,
|
||||
// xAxisIndex:1,
|
||||
data: [82, 34, 90, 104, 31, 100, 82, 34, 90, 104, 31, 100],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: colors[0],
|
||||
},
|
||||
position: "top",
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '压力',
|
||||
type: 'line',
|
||||
color: colors[1],
|
||||
// xAxisIndex:1,
|
||||
data: [193, 234, 310, 121, 134, 181, 193, 234, 310, 121, 134, 181],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: colors[1],
|
||||
},
|
||||
position: "top",
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.historyInfo-div {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
|
||||
#line {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,21 +1,25 @@
|
|||
<template>
|
||||
<div class="menuDiv">
|
||||
<div v-for="(item, index) of menuList" :key="index" @click="changeMenu(index)"
|
||||
<div v-for="(item, index) of menuList" :key="index" @click="changeMenu(index, item)"
|
||||
:class="{ 'activateTab': index == activateIndex }">{{ item.name }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import bimStore from '@/store/modules/bim';
|
||||
import { onMounted } from 'vue';
|
||||
|
||||
const menuList = [
|
||||
{
|
||||
name: '建筑信息'
|
||||
name: '建筑信息',
|
||||
background: '#000000'
|
||||
},
|
||||
{
|
||||
name: '资产信息'
|
||||
name: '资产信息',
|
||||
background: '#2b2f48'
|
||||
},
|
||||
{
|
||||
name: 'BIM应用'
|
||||
name: 'BIM应用',
|
||||
background: '#212b5f'
|
||||
}
|
||||
]
|
||||
|
||||
|
|
@ -23,11 +27,16 @@ const data = reactive({
|
|||
activateIndex: 0
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
changeMenu(0, menuList[0]);
|
||||
})
|
||||
|
||||
const { activateIndex } = toRefs(data);
|
||||
const emit = defineEmits(['changeMenu'])
|
||||
const changeMenu = (index) => {
|
||||
const changeMenu = (index, item) => {
|
||||
activateIndex.value = index;
|
||||
bimStore().setActivateIndex(index);
|
||||
bimStore().setActivateMenu(item);
|
||||
emit('changeMenu', index)
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,74 @@
|
|||
<template>
|
||||
<div class="realInfo-div">
|
||||
<div v-for="(item, index) of realInfo" :key="index">
|
||||
<span class="name">{{ item.name }}：</span>
|
||||
|
||||
|
||||
<span class="value">{{ item.value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
const data = reactive({
|
||||
realInfo: [
|
||||
{
|
||||
name: '运行状态',
|
||||
value: '运行中',
|
||||
},
|
||||
{
|
||||
name: '故障状态',
|
||||
value: '正常',
|
||||
},
|
||||
{
|
||||
name: '房间温度',
|
||||
value: '22.6℃',
|
||||
},
|
||||
{
|
||||
name: '供水温度',
|
||||
value: '16℃',
|
||||
},
|
||||
{
|
||||
name: '回水温度',
|
||||
value: '22℃',
|
||||
},
|
||||
{
|
||||
name: '回水压力',
|
||||
value: '4bar',
|
||||
},
|
||||
{
|
||||
name: '送风区域',
|
||||
value: '1楼大厅',
|
||||
}
|
||||
]
|
||||
});
|
||||
const { realInfo } = toRefs(data);
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.realInfo-div {
|
||||
width: 100%;
|
||||
// height: 80%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 18px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
>div {
|
||||
padding: 40px 0;
|
||||
width: 33%;
|
||||
line-height: 24px;
|
||||
height: 48px;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.name {
|
||||
width: 40%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.value {
|
||||
width: 59%;
|
||||
}
|
||||
}
|
||||
|
||||
}</style>
|
||||
|
|
@ -172,7 +172,7 @@ const getEchart = () => {
|
|||
}
|
||||
},
|
||||
]
|
||||
const option = { series, backgroundColor: '#ffffff' }
|
||||
const option = { series, backgroundColor: '#00174b' }
|
||||
option && myChart.setOption(option);
|
||||
}
|
||||
}
|
||||
|
|
@ -184,11 +184,12 @@ const getEchart = () => {
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
color:#fff;
|
||||
|
||||
.top-div {
|
||||
width: 100%;
|
||||
height: 25%;
|
||||
border: 1px solid #3cbfdf;
|
||||
border: 1px solid #2E6099;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
|
@ -220,7 +221,7 @@ const getEchart = () => {
|
|||
.left-div {
|
||||
width: 20%;
|
||||
height: 100%;
|
||||
border: 1px solid #3cbfdf;
|
||||
border: 1px solid #2E6099;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
|
@ -231,7 +232,7 @@ const getEchart = () => {
|
|||
}
|
||||
.span-div {
|
||||
padding: 5px 25px;
|
||||
background: #3cbfdf;
|
||||
background: #2E6099;
|
||||
border-radius: 15px;
|
||||
color:#fff;
|
||||
}
|
||||
|
|
@ -240,7 +241,7 @@ const getEchart = () => {
|
|||
.right-div {
|
||||
width: 79%;
|
||||
height: 100%;
|
||||
border: 1px solid #3cbfdf;
|
||||
border: 1px solid #2E6099;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
|
@ -266,6 +267,16 @@ const getEchart = () => {
|
|||
transform: translateX(50%);
|
||||
width: 25%;
|
||||
}
|
||||
.timestamp {
|
||||
color: #fff;;
|
||||
}
|
||||
:deep(.el-card) {
|
||||
border: none;
|
||||
margin-top:5px;
|
||||
}
|
||||
:deep(.el-card__body) {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-timeline-item__tail) {
|
||||
|
|
|
|||
|
|
@ -9,6 +9,9 @@
|
|||
<div class="button" @click="setLabel">
|
||||
{{ isAddLabel ? '添加标签' : '移除标签' }}
|
||||
</div>
|
||||
<div class="button" @click="setBottom()">
|
||||
{{ isRemoveBottom ? '移除地板' : '恢复地板' }}
|
||||
</div>
|
||||
<div class="button" @click="roam()">
|
||||
漫游
|
||||
</div>
|
||||
|
|
@ -16,7 +19,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { onMounted, ref,watch } from 'vue';
|
||||
import * as THREE from 'three';
|
||||
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
|
||||
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";
|
||||
|
|
@ -44,9 +47,10 @@ let i = 1;
|
|||
let mouse = new THREE.Vector2();
|
||||
let labelRenderer = new CSS2DRenderer(); //新建CSS2DRenderer
|
||||
const data = reactive({
|
||||
isAddLabel: true
|
||||
isAddLabel: true,
|
||||
isRemoveBottom: true
|
||||
});
|
||||
const { isAddLabel } = toRefs(data);
|
||||
const { isAddLabel,isRemoveBottom } = toRefs(data);
|
||||
// 建筑树点击
|
||||
Bus.on('clickBuild', (isParent) => {
|
||||
// Todo
|
||||
|
|
@ -84,9 +88,16 @@ Bus.on('clickApplication', e => {
|
|||
console.log('clickApplication');
|
||||
})
|
||||
|
||||
watch(() => bimStore().activateMenu, value => {
|
||||
// 更换场景颜色
|
||||
scene.background = new THREE.Color(value.background);
|
||||
toHomeView();
|
||||
},{ deep: true });
|
||||
|
||||
const init = () => {
|
||||
// 场景
|
||||
scene = new THREE.Scene();
|
||||
scene.background = new THREE.Color(bimStore().activateMenu.background);
|
||||
// 相机
|
||||
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000);
|
||||
// camera.position.z = 5;
|
||||
|
|
@ -418,6 +429,18 @@ const removeLabel = () => {
|
|||
document.body.removeChild(labelRenderer.domElement);
|
||||
}
|
||||
|
||||
// 设置地板
|
||||
const setBottom = () => {
|
||||
var target = scene.getObjectByName('set1');
|
||||
if (isRemoveBottom.value) {
|
||||
var target = scene.getObjectByName('set1');
|
||||
target.visible = false;
|
||||
} else {
|
||||
target.visible = true;
|
||||
}
|
||||
isRemoveBottom.value = !isRemoveBottom.value;
|
||||
}
|
||||
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
#gltf {
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 场景模型 -->
|
||||
<ThreeView background="#202a60" light="0xfffafa" :sceneUrl="sceneUrl" v-if="sceneUrl !== ''"></ThreeView>
|
||||
<ThreeView light="0xfffafa" :sceneUrl="sceneUrl" v-if="sceneUrl !== ''"></ThreeView>
|
||||
<!-- <ThreeModel /> -->
|
||||
<!-- 底部菜单 -->
|
||||
<MenuTab @changeMenu="changeMenu"></MenuTab>
|
||||
<!-- 左侧建筑菜单 -->
|
||||
<BuildTree v-if="activateIndex == 0" @handleNodeClick="handleBuildClick"></BuildTree>
|
||||
<BuildTree v-if="activateIndex == 0" @handleNodeClick="handleBuildClick"></BuildTree>
|
||||
<!-- 建筑信息 -->
|
||||
<BuildInfo v-if="buildInfo && activateIndex == 0"></BuildInfo>
|
||||
<!-- 资产信息 -->
|
||||
|
|
@ -24,14 +24,15 @@
|
|||
<!-- 实时数据 -->
|
||||
<RealData v-if="activateIndex == 2" @openDialog="openDialog1"></RealData>
|
||||
<!-- 资产信息弹出框 -->
|
||||
<el-dialog v-model="dialogVisible" title="资产信息" width="1200px" append-to-body>
|
||||
<el-dialog v-model="dialogVisible" title="资产信息" width="1200px" custom-class="bim-dialog" append-to-body>
|
||||
<DeviceInfoDialog @viewDetail="viewDetail"></DeviceInfoDialog>
|
||||
</el-dialog>
|
||||
<el-dialog v-model="dialogVisible1" title="实时数据" width="1200px" append-to-body>
|
||||
<el-dialog v-model="dialogVisible1" title="实时数据" width="1200px" custom-class="bim-dialog" append-to-body>
|
||||
<RealInfoDialog></RealInfoDialog>
|
||||
</el-dialog>
|
||||
<!-- 资产详情 -->
|
||||
<el-dialog v-model="dialogVisible2" v-if="dialogVisible2" title="资产详情" width="1500px" append-to-body>
|
||||
<el-dialog v-model="dialogVisible2" v-if="dialogVisible2" title="资产详情" width="1500px" custom-class="bim-dialog"
|
||||
append-to-body>
|
||||
<DeviceDetial></DeviceDetial>
|
||||
</el-dialog>
|
||||
|
||||
|
|
@ -56,11 +57,11 @@ import DeviceDetial from './components/DeviceDetial.vue';
|
|||
import bimStore from '@/store/modules/bim';
|
||||
import { computed } from 'vue';
|
||||
const data = reactive({
|
||||
sceneUrl: '',
|
||||
sceneUrl: '/jz/glb/scene.gltf',
|
||||
equimentInfo: {},
|
||||
});
|
||||
|
||||
const { sceneUrl,equimentInfo} = toRefs(data);
|
||||
const { sceneUrl, equimentInfo } = toRefs(data);
|
||||
const dialogVisible = ref(false);
|
||||
const dialogVisible1 = ref(false);
|
||||
const dialogVisible2 = ref(false);
|
||||
|
|
@ -103,7 +104,7 @@ const handleDeviceClick = (value) => {
|
|||
}
|
||||
|
||||
const handleApplicationClick = (value) => {
|
||||
|
||||
|
||||
}
|
||||
|
||||
const changeMenu = (index) => {
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ onMounted(() => {
|
|||
getCharts();
|
||||
})
|
||||
})
|
||||
|
||||
var colors = ['#24CDFB','#1890FF'];
|
||||
const getCharts = () => {
|
||||
var dom = document.getElementById("bar");
|
||||
if (dom) {
|
||||
|
|
@ -59,7 +59,11 @@ const getCharts = () => {
|
|||
},
|
||||
splitLine: {
|
||||
// 网格线
|
||||
show: false,
|
||||
lineStyle: {
|
||||
type: "dotted", //设置网格线类型 dotted：虚线 solid:实线
|
||||
color: "#29507E",
|
||||
},
|
||||
show: true,
|
||||
},
|
||||
show: true,
|
||||
maxInterval: 50000 //值坐标最大的数值间隔 最小同样min
|
||||
|
|
@ -88,7 +92,8 @@ const getCharts = () => {
|
|||
{
|
||||
name: '2023资产',
|
||||
type: 'bar',
|
||||
barWidth: 36,
|
||||
color: colors[0],
|
||||
barWidth: 20,
|
||||
// xAxisIndex:1,
|
||||
data: [182, 234, 290, 104, 131, 100],
|
||||
itemStyle: {
|
||||
|
|
@ -96,7 +101,7 @@ const getCharts = () => {
|
|||
label: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#5470c6",
|
||||
color: colors[0],
|
||||
},
|
||||
position: "right",
|
||||
},
|
||||
|
|
@ -106,15 +111,16 @@ const getCharts = () => {
|
|||
{
|
||||
name: '2022资产',
|
||||
type: 'bar',
|
||||
barWidth: 16,
|
||||
color: colors[1],
|
||||
barWidth: 20,
|
||||
// xAxisIndex:1,
|
||||
data: [193, 234, 310, 121, 134, 681],
|
||||
data: [93, 300, 30, 530, 34, 681],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#91cc75",
|
||||
color: colors[1],
|
||||
},
|
||||
position: "right",
|
||||
},
|
||||
|
|
|
|||
|
|
@ -2,7 +2,11 @@
|
|||
<dv-border-box-12 class="device-div">
|
||||
<div class="device-list">
|
||||
<div v-for="(item, index) of deviceList" :key="index">
|
||||
<img :src="item.imgUrl" alt="" width="60">
|
||||
<!-- <img :src="item.imgUrl" alt="" width="60"> -->
|
||||
<el-icon size="60" color="#1890ff" v-if="index==0"><Suitcase /></el-icon>
|
||||
<el-icon size="60" color="#1890ff" v-if="index==1"><TakeawayBox /></el-icon>
|
||||
<el-icon size="60" color="#1890ff" v-if="index==2"><Box /></el-icon>
|
||||
<el-icon size="60" color="#1890ff" v-if="index==3"><SoldOut /></el-icon>
|
||||
<font class="num" :style="{ 'color': item.color }">{{ item.num }}</font>
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
|
|
@ -18,26 +22,30 @@ const deviceList = [
|
|||
{
|
||||
name: '资产总数',
|
||||
num: '8909',
|
||||
color: '#0f40f5',
|
||||
imgUrl: IconPd
|
||||
color: '#fff',
|
||||
imgUrl: IconPd,
|
||||
icon: 'Suitcase'
|
||||
},
|
||||
{
|
||||
name: '维修未完成总数',
|
||||
num: '89',
|
||||
color: '#e99f81',
|
||||
imgUrl: IconWx
|
||||
color: '#fff',
|
||||
imgUrl: IconWx,
|
||||
icon: 'TakeawayBox'
|
||||
},
|
||||
{
|
||||
name: '待巡检执行总数',
|
||||
num: '58',
|
||||
color: '#81b337',
|
||||
imgUrl: IconXj
|
||||
color: '#fff',
|
||||
imgUrl: IconXj,
|
||||
icon: 'Box'
|
||||
},
|
||||
{
|
||||
name: '待保养执行总数',
|
||||
num: '46',
|
||||
color: '#347caf',
|
||||
imgUrl: IconBy
|
||||
color: '#fff',
|
||||
imgUrl: IconBy,
|
||||
icon: 'SoldOut'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
|
@ -61,7 +69,7 @@ const deviceList = [
|
|||
color: #fff;
|
||||
|
||||
.num {
|
||||
font-size: 48px;
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ onMounted(() => {
|
|||
getCharts();
|
||||
})
|
||||
})
|
||||
|
||||
var colors = ['#1890FF','#24CDFB'];
|
||||
const getCharts = () => {
|
||||
var dom = document.getElementById("line");
|
||||
if (dom) {
|
||||
|
|
@ -55,7 +55,11 @@ const getCharts = () => {
|
|||
},
|
||||
splitLine: {
|
||||
// 网格线
|
||||
show: false,
|
||||
lineStyle: {
|
||||
type: "dotted", //设置网格线类型 dotted：虚线 solid:实线
|
||||
color: "#29507E",
|
||||
},
|
||||
show: true,
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
|
|
@ -102,6 +106,7 @@ const getCharts = () => {
|
|||
{
|
||||
name: '生产数据',
|
||||
type: 'bar',
|
||||
color: colors[0],
|
||||
barWidth: 18,
|
||||
// xAxisIndex:1,
|
||||
data: [182, 234, 290, 104, 131, 100, 182, 234, 290, 104, 131, 100],
|
||||
|
|
@ -110,7 +115,7 @@ const getCharts = () => {
|
|||
label: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#5470c6",
|
||||
color: colors[0],
|
||||
},
|
||||
position: "top",
|
||||
},
|
||||
|
|
@ -120,6 +125,7 @@ const getCharts = () => {
|
|||
{
|
||||
name: '销售数据',
|
||||
type: 'line',
|
||||
color: colors[1],
|
||||
// xAxisIndex:1,
|
||||
data: [193, 234, 310, 121, 134, 181, 193, 234, 310, 121, 134, 181],
|
||||
itemStyle: {
|
||||
|
|
@ -127,7 +133,7 @@ const getCharts = () => {
|
|||
label: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#91cc75",
|
||||
color: colors[1],
|
||||
},
|
||||
position: "top",
|
||||
},
|
||||
|
|
|
|||
|
|
@ -12,80 +12,239 @@ onMounted(() => {
|
|||
getCharts();
|
||||
})
|
||||
})
|
||||
|
||||
var wei = 10;
|
||||
var yi = 20;
|
||||
var doing = 8;
|
||||
var total = 38;
|
||||
const getCharts = () => {
|
||||
var dom = document.getElementById("pie");
|
||||
if (dom) {
|
||||
// 手动移除该属性
|
||||
dom.removeAttribute('_echarts_instance_')
|
||||
var myChart = echarts.init(dom);
|
||||
let option = {
|
||||
// backgroundColor: 'white',
|
||||
var option = {
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'item',
|
||||
//{a}(系列名)，{b}(数据项名),{c}(数值),{d}(百分比)
|
||||
formatter: "{a} <br/>{b} : {c}",
|
||||
backgroundColor: "rgba(1, 13, 19, 0.5)",
|
||||
borderWidth: 0,
|
||||
trigger: "item",
|
||||
confine: true, //浮窗限制在图表内
|
||||
backgroundColor: "#1E2857", //通过设置rgba调节背景颜色与透明度
|
||||
borderColor: "#1E2857",
|
||||
color: "#fff",
|
||||
textStyle: {
|
||||
color: "rgba(212, 232, 254, 1)",
|
||||
// fontSize: fontChart(0.24),
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
|
||||
legend: {
|
||||
// orient: 'vertical',
|
||||
left: 'center',
|
||||
top: '5%',
|
||||
itemWidth: 15,
|
||||
itemHeight: 10,
|
||||
itemGap: 25,
|
||||
borderRadius: 4,
|
||||
textStyle: {
|
||||
color: "#ffff",
|
||||
fontFamily: "Alibaba PuHuiTi",
|
||||
fontSize: 14,
|
||||
fontWeight: 400,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
center: ['50%', '50%'],
|
||||
data: [
|
||||
{ value: 1048, name: '数据一' },
|
||||
{ value: 735, name: '数据二' },
|
||||
{ value: 580, name: '数据三' },
|
||||
],
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
label: {
|
||||
normal: {
|
||||
formatter: ["{b|{b}}", "{c|{c}}"].join("\n"),
|
||||
rich: {
|
||||
c: {
|
||||
color: "inherit",
|
||||
fontSize: 20,
|
||||
fontWeight: "bold",
|
||||
lineHeight: 5,
|
||||
},
|
||||
b: {
|
||||
fontSize: 15,
|
||||
height: 40,
|
||||
},
|
||||
backgroundColor: "#6a7985",
|
||||
},
|
||||
},
|
||||
// {a}, {b}，{c}，{d}，{e}， {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
|
||||
//formatter: "{a} <br/>{b} : {c} ({d}%)",
|
||||
formatter(data) {
|
||||
return (
|
||||
data.name +
|
||||
" : " +
|
||||
data.value +
|
||||
" (" +
|
||||
data.percent.toFixed(1) +
|
||||
"%)"
|
||||
);
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: "0%",
|
||||
left: "0%",
|
||||
right: "0%",
|
||||
bottom: "0%",
|
||||
},
|
||||
graphic: {
|
||||
elements: [
|
||||
{
|
||||
type: "text",
|
||||
left: "27%",
|
||||
top: "middle",
|
||||
style: {
|
||||
text: total + "\n" + "总数",
|
||||
fill: "#fff",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
legend: [
|
||||
{
|
||||
top: "25%",
|
||||
left: "60%",
|
||||
itemWidth: 12,
|
||||
itemHeight: 5,
|
||||
orient: "vertical",
|
||||
itemGap: 30,
|
||||
data: ["数据一"],
|
||||
formatter: () => {
|
||||
const arr = [
|
||||
"{b|" + "数据一" + "}\xa0\xa0\xa0",
|
||||
"{a|" + wei + "}\xa0\xa0\xa0\xa0",
|
||||
];
|
||||
return arr.join("");
|
||||
},
|
||||
textStyle: {
|
||||
rich: {
|
||||
a: {
|
||||
fontSize: 18,
|
||||
color: "#FD2525",
|
||||
},
|
||||
b: {
|
||||
fontSize: 16,
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
{
|
||||
top: "45%",
|
||||
left: "60%",
|
||||
itemWidth: 12,
|
||||
itemHeight: 5,
|
||||
orient: "vertical",
|
||||
itemGap: 30,
|
||||
data: ["数据二"],
|
||||
formatter: () => {
|
||||
const arr = [
|
||||
"{b|" + "数据二" + "}\xa0\xa0\xa0",
|
||||
"{a|" + yi + "}\xa0\xa0\xa0\xa0",
|
||||
];
|
||||
return arr.join("");
|
||||
},
|
||||
textStyle: {
|
||||
rich: {
|
||||
a: {
|
||||
fontSize: 18,
|
||||
color: "#33AAFF",
|
||||
},
|
||||
b: {
|
||||
fontSize: 16,
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
top: "65%",
|
||||
left: "60%",
|
||||
itemWidth: 12,
|
||||
itemHeight: 5,
|
||||
orient: "vertical",
|
||||
itemGap: 30,
|
||||
data: ["数据三"],
|
||||
formatter: () => {
|
||||
const arr = [
|
||||
"{b|" + "数据三" + "}\xa0\xa0\xa0",
|
||||
"{a|" + doing + "}\xa0\xa0\xa0\xa0",
|
||||
];
|
||||
return arr.join("");
|
||||
},
|
||||
textStyle: {
|
||||
rich: {
|
||||
a: {
|
||||
fontSize: 18,
|
||||
color: "#E7BF69",
|
||||
},
|
||||
b: {
|
||||
fontSize: 16,
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
//内圈阴影
|
||||
{
|
||||
name: "",
|
||||
type: "pie",
|
||||
radius: ["40%", "60%"],
|
||||
center: ["30%", "50%"],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: "center",
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
z: 10,
|
||||
emphasis: {
|
||||
scale: false, //鼠标划上不展示高亮放大效果
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: wei,
|
||||
name: "数据一",
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
color: "#FD2525",
|
||||
opacity: 0.6,
|
||||
},
|
||||
},
|
||||
{
|
||||
value: yi,
|
||||
name: "数据二",
|
||||
itemStyle: {
|
||||
color: "#1f5189",
|
||||
opacity: 0.6,
|
||||
},
|
||||
},
|
||||
{
|
||||
value: doing,
|
||||
name: "数据三",
|
||||
itemStyle: {
|
||||
color: "#e7bf69",
|
||||
opacity: 0.8,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
//外圈
|
||||
{
|
||||
name: "",
|
||||
type: "pie",
|
||||
radius: ["50%", "60%"],
|
||||
center: ["30%", "50%"],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: "center",
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
z: 11,
|
||||
data: [
|
||||
{
|
||||
value: wei,
|
||||
name: "数据一",
|
||||
itemStyle: {
|
||||
color: "#aa2b3d",
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
value: yi,
|
||||
name: "数据二",
|
||||
itemStyle: {
|
||||
color: "#1f5189",
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
value: doing,
|
||||
name: "数据三",
|
||||
itemStyle: {
|
||||
color: "#655e64",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
|
|
@ -95,6 +254,6 @@ const getCharts = () => {
|
|||
<style lang="scss" scoped>
|
||||
#pie {
|
||||
width: 100%;
|
||||
height:100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -59,7 +59,11 @@ const getCharts = () => {
|
|||
},
|
||||
splitLine: {
|
||||
// 网格线
|
||||
show: false,
|
||||
lineStyle: {
|
||||
type: "dotted", //设置网格线类型 dotted：虚线 solid:实线
|
||||
color: "#29507E",
|
||||
},
|
||||
show: true,
|
||||
},
|
||||
show: true,
|
||||
maxInterval: 50000 //值坐标最大的数值间隔 最小同样min
|
||||
|
|
@ -68,7 +72,7 @@ const getCharts = () => {
|
|||
yAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['0-40', '41-50', '51-60', '61-70', '71-80', '81-90', '91-100', '101-110', '111-120','120以上'],
|
||||
data: ['0-40', '41-50', '51-60', '61-70', '71-80', '81-90', '91-100', '101-110', '111-120', '120以上'],
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
|
|
@ -89,14 +93,30 @@ const getCharts = () => {
|
|||
name: '系统数据分析',
|
||||
type: 'bar',
|
||||
barWidth: 16,
|
||||
color: new echarts.graphic.LinearGradient( // 右下左上
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
1,
|
||||
[{
|
||||
offset: 0,
|
||||
color: "#146fdd" // 左边的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#42bffc" // 右边的颜色
|
||||
}
|
||||
],
|
||||
false
|
||||
),
|
||||
// xAxisIndex:1,
|
||||
data: [182, 234, 290, 104, 131, 100],
|
||||
data: [182, 234, 280, 104, 131, 100, 50, 200, 100, 60],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#5470c6",
|
||||
color: "#42bffc",
|
||||
},
|
||||
position: "right",
|
||||
},
|
||||
|
|
@ -113,6 +133,6 @@ const getCharts = () => {
|
|||
<style lang="scss" scoped>
|
||||
#xtbar {
|
||||
width: 100%;
|
||||
height:100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -54,7 +54,7 @@ const gotoPage = (item) => {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
// background: #3d5d9a;
|
||||
background: #030e23;
|
||||
background: #08376f;
|
||||
color: #fff;
|
||||
> div {
|
||||
width: 260px;
|
||||
|
|
@ -65,6 +65,7 @@ const gotoPage = (item) => {
|
|||
border-right: 1px solid #020c45;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
// background: #3d5d9a;
|
||||
}
|
||||
}
|
||||
.home-page {
|
||||
|
|
@ -84,22 +85,25 @@ const gotoPage = (item) => {
|
|||
top: 10px;
|
||||
left: 10px;
|
||||
padding: 15px;
|
||||
background-image: linear-gradient(to right,rgba(30,45,123,.7),rgba(174,179,249,.1));
|
||||
}
|
||||
.bar-div {
|
||||
position: absolute;
|
||||
width: 400px;
|
||||
height: 98%;
|
||||
height: 818px;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
padding: 15px;
|
||||
background-image: linear-gradient(to left,rgba(30,45,123,.7),rgba(174,179,249,.1));
|
||||
}
|
||||
.xt-bar-div {
|
||||
position: absolute;
|
||||
width: 400px;
|
||||
height: 460px;
|
||||
top: 370px;
|
||||
bottom: 5px;
|
||||
left: 10px;
|
||||
padding: 15px;
|
||||
background-image: linear-gradient(to right,rgba(30,45,123,.7),rgba(174,179,249,.1));
|
||||
}
|
||||
.device-div {
|
||||
position: absolute;
|
||||
|
|
@ -108,16 +112,17 @@ const gotoPage = (item) => {
|
|||
width: calc(100% - 840px);
|
||||
height: 200px;
|
||||
padding: 15px;
|
||||
// background: #b2cae0;
|
||||
background-image: linear-gradient(to bottom,rgba(30,45,123,.7),rgba(174,179,249,.1));
|
||||
}
|
||||
.line-div {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
bottom: 5px;
|
||||
left: 420px;
|
||||
width: calc(100% - 840px);
|
||||
height: 200px;
|
||||
padding: 15px;
|
||||
// background: #b2cae0;
|
||||
background-image: linear-gradient(to top,rgba(30,45,123,.7),rgba(174,179,249,.1));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue