|
|
|
|
@ -28,13 +28,112 @@
|
|
|
|
|
</el-tree> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="right-monitor">111</div> |
|
|
|
|
<div class="right-monitor"> |
|
|
|
|
<div class="buildingDiv"> |
|
|
|
|
<img |
|
|
|
|
class="title-bg" |
|
|
|
|
src="../../../assets/images/title-bg.png" |
|
|
|
|
alt="" |
|
|
|
|
/> |
|
|
|
|
<div class="title-word">位置：{{ currentName }}</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="tem-data"> |
|
|
|
|
<div class="tem-li" v-for="(item, index) in tableData" :key="index"> |
|
|
|
|
<div class="temli-top"> |
|
|
|
|
<div class="temli-title">{{ item.houseName }}</div> |
|
|
|
|
<div class="top-right"> |
|
|
|
|
<!-- 可能有报警的img --> |
|
|
|
|
<img |
|
|
|
|
v-if="getDeviceWarning(item.deviceList, '12')" |
|
|
|
|
src="../../../assets/images/warning.png" |
|
|
|
|
class="warning-img" |
|
|
|
|
alt="" |
|
|
|
|
/> |
|
|
|
|
<!-- 详情 --> |
|
|
|
|
<div |
|
|
|
|
class="details" |
|
|
|
|
@click="getHistory(item)" |
|
|
|
|
title="查看历史记录" |
|
|
|
|
> |
|
|
|
|
<i class="el-icon-s-data"></i> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<!-- 显示温度 --> |
|
|
|
|
<div |
|
|
|
|
class="tem" |
|
|
|
|
v-if="getDeviceByParamType(item.deviceList, '12')" |
|
|
|
|
:class="{ warningClass: getDeviceWarning(item.deviceList, '12') }" |
|
|
|
|
> |
|
|
|
|
<div class="tem-word"> |
|
|
|
|
<img |
|
|
|
|
v-if="getDeviceWarning(item.deviceList, '12')" |
|
|
|
|
class="tem-img" |
|
|
|
|
src="../../../assets/images/tem-warning.png" |
|
|
|
|
alt="" |
|
|
|
|
/> |
|
|
|
|
<img |
|
|
|
|
v-else |
|
|
|
|
class="tem-img" |
|
|
|
|
src="../../../assets/images/tem-warning.png" |
|
|
|
|
alt="" |
|
|
|
|
/> |
|
|
|
|
<div class="tem-middle"> |
|
|
|
|
<div> |
|
|
|
|
{{ getDeviceByParamType(item.deviceList, "12").otherName }} |
|
|
|
|
</div> |
|
|
|
|
<div class="en-text">Temperature</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="tem-right"> |
|
|
|
|
<span class="tem-num">{{ |
|
|
|
|
getDeviceByParamType(item.deviceList, "12").curValue |
|
|
|
|
}}</span> |
|
|
|
|
<span>℃</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<!-- 显示湿度 --> |
|
|
|
|
<div class="tem" v-if="getDeviceByParamType(item.deviceList, '32')"> |
|
|
|
|
<div class="tem-word"> |
|
|
|
|
<img |
|
|
|
|
class="tem-img" |
|
|
|
|
src="../../../assets/images/hum-normal.png" |
|
|
|
|
alt="" |
|
|
|
|
/> |
|
|
|
|
<div class="tem-middle"> |
|
|
|
|
<div> |
|
|
|
|
{{ getDeviceByParamType(item.deviceList, "32").otherName }} |
|
|
|
|
</div> |
|
|
|
|
<div class="en-text">Humidity</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="tem-right"> |
|
|
|
|
<span class="tem-num">{{ |
|
|
|
|
getDeviceByParamType(item.deviceList, "32").curValue |
|
|
|
|
}}</span> |
|
|
|
|
<span>%</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<!-- 历史数据弹框 --> |
|
|
|
|
<el-dialog |
|
|
|
|
title="历史记录" |
|
|
|
|
:visible.sync="openDialog" |
|
|
|
|
width="900px" |
|
|
|
|
append-to-body |
|
|
|
|
> |
|
|
|
|
<div class="charts" ref="chart_ref"></div> |
|
|
|
|
</el-dialog> |
|
|
|
|
<!-- <div class="charts" ref="chart_ref"></div> --> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
import { spaceTree } from "@/api/region"; |
|
|
|
|
import { temList } from "@/api/temSys/temMonitor"; |
|
|
|
|
import { temList, temHistory } from "@/api/temSys/temMonitor"; |
|
|
|
|
import * as echarts from "echarts"; |
|
|
|
|
export default { |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
@ -52,11 +151,34 @@ export default {
|
|
|
|
|
currentParentId: "", //当前节点的上级的id |
|
|
|
|
|
|
|
|
|
tableData: [], //系统状态表格数据 |
|
|
|
|
openDialog: false, |
|
|
|
|
chartInstance: null, |
|
|
|
|
option: {}, |
|
|
|
|
chartData1: [8, 3, 5, 7, 8, 10, 4, 5, 12, 13, 10, 18], |
|
|
|
|
chartData2: [7, 4, 5, 6.2, 7, 9, 3, 6, 13, 11, 9, 20], |
|
|
|
|
bottomData: [ |
|
|
|
|
"1月", |
|
|
|
|
"2月", |
|
|
|
|
"3月", |
|
|
|
|
"4月", |
|
|
|
|
"5月", |
|
|
|
|
"6月", |
|
|
|
|
"7月", |
|
|
|
|
"8月", |
|
|
|
|
"9月", |
|
|
|
|
"10月", |
|
|
|
|
"11月", |
|
|
|
|
"12月", |
|
|
|
|
], |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
this.getSysBuild(); |
|
|
|
|
}, |
|
|
|
|
destroyed() { |
|
|
|
|
//取消监听器 |
|
|
|
|
window.removeEventListener("resize", this.screenAdapter); |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
getSysBuild() { |
|
|
|
|
spaceTree().then((res) => { |
|
|
|
|
@ -197,9 +319,272 @@ export default {
|
|
|
|
|
temList(data).then((res) => { |
|
|
|
|
console.log("温度返回", res); |
|
|
|
|
if (res.code == 200) { |
|
|
|
|
this.tableData = res.rows; |
|
|
|
|
} else { |
|
|
|
|
this.tableData = []; |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
getDeviceByParamType(deviceList, paramType) { |
|
|
|
|
let obj = deviceList.find((device) => device.paramType === paramType); |
|
|
|
|
return obj; |
|
|
|
|
}, |
|
|
|
|
getDeviceWarning(deviceList, paramType) { |
|
|
|
|
console.log("deviceList", deviceList); |
|
|
|
|
return deviceList.some((item) => { |
|
|
|
|
console.log("item.paramType", item.paramType); |
|
|
|
|
console.log("item.alarmStatus", item.alarmStatus); |
|
|
|
|
if (item.paramType === paramType && item.alarmStatus === 1) { |
|
|
|
|
console.log("返回true了呀"); |
|
|
|
|
return true; |
|
|
|
|
} |
|
|
|
|
return false; |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
getHistory(item) { |
|
|
|
|
console.log("item", item); |
|
|
|
|
// 打开当前房间的历史记录的内容 |
|
|
|
|
this.openDialog = true; |
|
|
|
|
this.$nextTick(() => { |
|
|
|
|
this.echartsData(item.houseId); |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
echartsData(id) { |
|
|
|
|
let data = { |
|
|
|
|
systemType: "4", |
|
|
|
|
houseIds: [id], |
|
|
|
|
}; |
|
|
|
|
temHistory(data).then((res) => { |
|
|
|
|
console.log("历史数据返回", res); |
|
|
|
|
if (res.code == 200) { |
|
|
|
|
let data = res.rows[0].dataList; |
|
|
|
|
this.chartData1 = []; |
|
|
|
|
this.chartData2 = []; |
|
|
|
|
this.bottomData = []; |
|
|
|
|
console.log("data",data) |
|
|
|
|
data.forEach((item) => { |
|
|
|
|
// 处理 chartData1 |
|
|
|
|
const value1 = |
|
|
|
|
item.indoorTemp === null || item.indoorTemp === "" |
|
|
|
|
? 0 |
|
|
|
|
: item.indoorTemp; |
|
|
|
|
this.chartData1.push(value1); |
|
|
|
|
|
|
|
|
|
// 假设 item 中对应 chartData2 的字段是 indoorHumidity |
|
|
|
|
const value2 = |
|
|
|
|
item.indoorHumidity === null || item.indoorHumidity === "" |
|
|
|
|
? 0 |
|
|
|
|
: item.indoorHumidity; |
|
|
|
|
this.chartData2.push(value2); |
|
|
|
|
|
|
|
|
|
// 假设 item 中对应 bottomData 的字段是 curTime |
|
|
|
|
const value3 = |
|
|
|
|
item.curTime === null || item.curTime === "" ? 0 : item.curTime; |
|
|
|
|
this.bottomData.push(value3); |
|
|
|
|
}); |
|
|
|
|
this.initChart(); |
|
|
|
|
window.addEventListener("resize", this.screenAdapter); |
|
|
|
|
this.screenAdapter(); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
// // chartData1是实线部分， chartData2是虚线代表预测部分 |
|
|
|
|
// // chartData2的值 为 [ chartData1的长度-1个" "空值,chartData1最后一个值, xxx，xxx，xxx ] |
|
|
|
|
// const adapterOption = { |
|
|
|
|
// xAxis: { |
|
|
|
|
// data: this.bottomData, |
|
|
|
|
// }, |
|
|
|
|
// series: [ |
|
|
|
|
// { |
|
|
|
|
// yAxisIndex: 0, |
|
|
|
|
// data: this.chartData1, |
|
|
|
|
// }, |
|
|
|
|
// { |
|
|
|
|
// yAxisIndex: 0, |
|
|
|
|
// data: this.chartData2, |
|
|
|
|
// }, |
|
|
|
|
// ], |
|
|
|
|
// }; |
|
|
|
|
// this.chartInstance.setOption(adapterOption); |
|
|
|
|
// //手动的调用图标对象的resize才能产生效果 |
|
|
|
|
// this.chartInstance.resize(); |
|
|
|
|
}, |
|
|
|
|
// 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据 |
|
|
|
|
screenAdapter() { |
|
|
|
|
//自己定义的比较合适的适配大小,2.6 mes_ref是图表盒子 |
|
|
|
|
const titleFontSize = this.$refs.chart_ref.offsetWidth / 130; |
|
|
|
|
//因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据 |
|
|
|
|
const adapterOption = {}; |
|
|
|
|
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
|
|
|
|
this.chartInstance.setOption(adapterOption); |
|
|
|
|
//手动的调用图标对象的resize才能产生效果 |
|
|
|
|
this.chartInstance.resize(); |
|
|
|
|
}, |
|
|
|
|
//初始化chartInstance对象 |
|
|
|
|
initChart() { |
|
|
|
|
const chartRef = this.$refs.chart_ref; |
|
|
|
|
if (chartRef) { |
|
|
|
|
// 初始化图表的代码 |
|
|
|
|
this.chartInstance = echarts.init(this.$refs.chart_ref); |
|
|
|
|
this.option = { |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: "axis", |
|
|
|
|
}, |
|
|
|
|
legend: { |
|
|
|
|
show: true, |
|
|
|
|
top: 10, |
|
|
|
|
textStyle: { |
|
|
|
|
color: "white", |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
grid: { |
|
|
|
|
top: "10%", |
|
|
|
|
left: "4%", |
|
|
|
|
right: "6%", |
|
|
|
|
bottom: "3%", |
|
|
|
|
containLabel: true, |
|
|
|
|
}, |
|
|
|
|
xAxis: { |
|
|
|
|
type: "category", |
|
|
|
|
//设置为true代表离零刻度间隔一段距离 |
|
|
|
|
boundaryGap: true, |
|
|
|
|
// 修饰刻度标签的颜色即x坐标数据 |
|
|
|
|
axisLabel: { |
|
|
|
|
// interval: 0, //强制显示所有x轴数据 |
|
|
|
|
// rotate: 30, //x轴坐标字体倾斜30度 |
|
|
|
|
color: "rgba(255, 255, 255, 1)", |
|
|
|
|
}, |
|
|
|
|
axisTick: { |
|
|
|
|
show: false, // 不显示坐标轴刻度线 |
|
|
|
|
}, |
|
|
|
|
// x坐标轴的颜色 |
|
|
|
|
axisLine: { |
|
|
|
|
show: true, |
|
|
|
|
lineStyle: { |
|
|
|
|
color: "#365576", |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
splitLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: "#e2e6f0", |
|
|
|
|
}, |
|
|
|
|
}, //x轴分割线 |
|
|
|
|
data: this.bottomData, |
|
|
|
|
}, |
|
|
|
|
yAxis: { |
|
|
|
|
min: 0, |
|
|
|
|
// max:20, |
|
|
|
|
// // // min:'dataMin', |
|
|
|
|
// // // max:'dataMax', |
|
|
|
|
// name: "kwh", // 第一个 y 轴的单位描述 |
|
|
|
|
// 设置 name 的样式 |
|
|
|
|
nameTextStyle: { |
|
|
|
|
color: "rgba(255, 255, 255, 1)", |
|
|
|
|
fontSize: 12, |
|
|
|
|
}, |
|
|
|
|
miniInterval: 5, |
|
|
|
|
type: "value", |
|
|
|
|
// 修饰刻度标签的颜色即y坐标数据 |
|
|
|
|
axisLabel: { |
|
|
|
|
color: "rgba(255, 255, 255, 1)", |
|
|
|
|
}, |
|
|
|
|
// 显示y坐标轴 |
|
|
|
|
axisLine: { |
|
|
|
|
show: true, |
|
|
|
|
lineStyle: { |
|
|
|
|
color: "#365576", // 设置 y 轴线的颜色 |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
//y轴分割线段数 |
|
|
|
|
// splitNumber: 10, |
|
|
|
|
// 修改y轴分割线的颜色 |
|
|
|
|
splitLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: "#1a3d62", // 设置分割线的颜色 |
|
|
|
|
type: "dashed", // 设置分割线为虚线 |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
type: "line", |
|
|
|
|
// 拐点大小 |
|
|
|
|
symbolSize: 8, |
|
|
|
|
data: this.chartData1, |
|
|
|
|
name: "温度", |
|
|
|
|
//折线颜色 |
|
|
|
|
itemStyle: { |
|
|
|
|
color: "#1a69f1", //折线点的颜色 |
|
|
|
|
}, |
|
|
|
|
lineStyle: { |
|
|
|
|
color: "#1a69f1", //折线点的颜色 |
|
|
|
|
}, |
|
|
|
|
smooth: false, |
|
|
|
|
// 不显示折线点 |
|
|
|
|
showSymbol: true, |
|
|
|
|
// 区域填充样式，添加渐变背景 |
|
|
|
|
areaStyle: { |
|
|
|
|
color: { |
|
|
|
|
type: "linear", |
|
|
|
|
x: 0, |
|
|
|
|
y: 0, |
|
|
|
|
x2: 0, |
|
|
|
|
y2: 1, |
|
|
|
|
colorStops: [ |
|
|
|
|
{ |
|
|
|
|
offset: 0, |
|
|
|
|
color: "rgba(26, 105, 241, 0.5)", // 渐变起始颜色 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
offset: 1, |
|
|
|
|
color: "rgba(26, 105, 241, 0)", // 渐变结束颜色 |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
global: false, // 缺省为 false |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
type: "line", |
|
|
|
|
// 拐点大小 |
|
|
|
|
symbolSize: 8, |
|
|
|
|
data: this.chartData2, |
|
|
|
|
name: "湿度", |
|
|
|
|
//折线颜色 |
|
|
|
|
itemStyle: { |
|
|
|
|
color: "#00CED1", //折线的颜色 |
|
|
|
|
}, |
|
|
|
|
smooth: false, |
|
|
|
|
// 不显示折线点 |
|
|
|
|
showSymbol: true, |
|
|
|
|
areaStyle: { |
|
|
|
|
color: { |
|
|
|
|
type: "linear", |
|
|
|
|
x: 0, |
|
|
|
|
y: 0, |
|
|
|
|
x2: 0, |
|
|
|
|
y2: 1, |
|
|
|
|
colorStops: [ |
|
|
|
|
{ |
|
|
|
|
offset: 0, |
|
|
|
|
color: "rgba(0, 206, 209, 0.5)", // 渐变起始颜色 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
offset: 1, |
|
|
|
|
color: "rgba(0, 206, 209, 0)", // 渐变结束颜色 |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
global: false, // 缺省为 false |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
}; |
|
|
|
|
//把配置项给实例对象 |
|
|
|
|
this.chartInstance.setOption(this.option, true); |
|
|
|
|
} else { |
|
|
|
|
console.error("未找到有效的 DOM 元素"); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
@ -222,8 +607,148 @@ export default {
|
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
justify-content: flex-start; |
|
|
|
|
.buildingDiv { |
|
|
|
|
padding-left: 54px; |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: row; |
|
|
|
|
align-items: center; |
|
|
|
|
margin-bottom: 20px; |
|
|
|
|
position: relative; |
|
|
|
|
.title-bg { |
|
|
|
|
width: 208px; |
|
|
|
|
height: 38px; |
|
|
|
|
position: absolute; |
|
|
|
|
left: 0; |
|
|
|
|
z-index: 0; |
|
|
|
|
} |
|
|
|
|
.title-word { |
|
|
|
|
z-index: 10; |
|
|
|
|
font-family: YouSheBiaoTiHei; |
|
|
|
|
font-size: 24px; |
|
|
|
|
color: #ffffff; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.tem-data { |
|
|
|
|
width: 100%; |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: row; |
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
.tem-li { |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
width: calc(33.33% - 20px); |
|
|
|
|
background-image: url(../../././../assets/images/border-7.png); |
|
|
|
|
background-size: 100% 100%; |
|
|
|
|
background-repeat: no-repeat; |
|
|
|
|
padding: 20px; |
|
|
|
|
margin: 0 10px 20px 10px; |
|
|
|
|
transition: filter 0.3s ease; |
|
|
|
|
.temli-top { |
|
|
|
|
width: 100%; |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: row; |
|
|
|
|
align-items: center; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
color: #ffffff; |
|
|
|
|
font-size: 18px; |
|
|
|
|
margin-bottom: 15px; |
|
|
|
|
.top-right { |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: row; |
|
|
|
|
align-items: center; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.temli-title { |
|
|
|
|
height: 40px; |
|
|
|
|
font-family: Arial, sans-serif; |
|
|
|
|
font-size: 20px; |
|
|
|
|
font-weight: bold; |
|
|
|
|
color: #00aaff; |
|
|
|
|
text-shadow: 0 0 5px rgba(0, 170, 255, 0.5); |
|
|
|
|
margin-left: 7px; |
|
|
|
|
} |
|
|
|
|
.warning-img { |
|
|
|
|
width: 40px; |
|
|
|
|
height: 40px; |
|
|
|
|
margin-right: 20px; |
|
|
|
|
/* 添加闪烁动画 */ |
|
|
|
|
animation: blink 1s infinite; |
|
|
|
|
} |
|
|
|
|
@keyframes blink { |
|
|
|
|
100% { |
|
|
|
|
opacity: 1; |
|
|
|
|
} |
|
|
|
|
50% { |
|
|
|
|
opacity: 0; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.tem { |
|
|
|
|
width: 100%; |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: row; |
|
|
|
|
align-items: center; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
color: #ffffff; |
|
|
|
|
font-size: 18px; |
|
|
|
|
.tem-word { |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: row; |
|
|
|
|
align-items: center; |
|
|
|
|
.tem-img { |
|
|
|
|
width: 80px; |
|
|
|
|
height: 80px; |
|
|
|
|
margin-right: 15px; |
|
|
|
|
} |
|
|
|
|
.tem-middle { |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
align-items: flex-start; |
|
|
|
|
justify-content: flex-start; |
|
|
|
|
.en-text { |
|
|
|
|
font-size: 13px; |
|
|
|
|
margin-top: 10px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.tem-right { |
|
|
|
|
font-size: 16px; |
|
|
|
|
margin-top: 15px; |
|
|
|
|
.tem-num { |
|
|
|
|
font-size: 30px; |
|
|
|
|
font-weight: bold; |
|
|
|
|
margin-right: 10px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.warningClass { |
|
|
|
|
color: #fe9805 !important; |
|
|
|
|
} |
|
|
|
|
.details { |
|
|
|
|
background-color: #3c8dd4; |
|
|
|
|
width: 40px; |
|
|
|
|
height: 40px; |
|
|
|
|
border-radius: 50%; |
|
|
|
|
text-align: center; |
|
|
|
|
line-height: 40px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.details:hover .tem-li { |
|
|
|
|
filter: brightness( |
|
|
|
|
1.2 |
|
|
|
|
); /* 降低亮度，使背景图片颜色更深，可根据需求调整数值 */ |
|
|
|
|
transform: scale(1.02); |
|
|
|
|
} |
|
|
|
|
.tem-li:hover { |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.charts { |
|
|
|
|
width: 870px; |
|
|
|
|
height: 300px; |
|
|
|
|
} |
|
|
|
|
.tree-container { |
|
|
|
|
height: 300px; /* 设置固定高度 */ |
|
|
|
|
overflow-y: auto; /* 启用垂直滚动条 */ |
|
|
|
|
@ -249,6 +774,16 @@ export default {
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
@media (min-width: 1200px) and (max-width: 1540px) { |
|
|
|
|
.tem-li { |
|
|
|
|
width: calc(49% - 20px) !important; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
@media (max-width: 1200px) { |
|
|
|
|
.tem-li { |
|
|
|
|
width: calc(100% - 40px) !important; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
<style scoped> |
|
|
|
|
/* 自定义高亮颜色 */ |
|
|
|
|
|
