845 lines
23 KiB
Vue
845 lines
23 KiB
Vue
<template>
|
||
<div
|
||
id="project-detail-v2-id"
|
||
ref="project-detail-v2-id"
|
||
class="project-detail-v2"
|
||
>
|
||
<!--
|
||
比例缩放效果01
|
||
:style="{
|
||
transformOrigin: 'center top',
|
||
transform: `scale(${scalseNumX}, ${scalseNumY})`,
|
||
opacity: 1,
|
||
transition: `all 0.5s ease 0s`,
|
||
}"
|
||
-->
|
||
<div :class="isFoldRight ? 'block-lift block-right-fold' : 'block-lift'">
|
||
<div class="container-title">
|
||
<div
|
||
v-for="(item, idx) in projectList"
|
||
v-show="item.projectId === infoData.projectId"
|
||
:key="idx"
|
||
class="title-left"
|
||
>
|
||
<span>{{ item.projectName }}</span>
|
||
<i
|
||
class="el-icon-arrow-left icon-c but-icon"
|
||
@click="handlePrev(idx)"
|
||
></i>
|
||
<i
|
||
class="el-icon-arrow-right icon-c but-icon"
|
||
@click="handleNext(idx)"
|
||
></i>
|
||
</div>
|
||
<div class="title-but">
|
||
<div class="but-home" @click="handleLinkToTable">
|
||
<i class="el-icon-d-arrow-left icon-c"></i>
|
||
<span class="but-title">返回列表</span>
|
||
</div>
|
||
<div class="but-tz" @click="handleFoldRight">
|
||
<i class="el-icon-back icon-c"></i>
|
||
<i class="el-icon-right icon-c"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="width: 100%">
|
||
<e-nav-menu-button
|
||
v-model="activeType"
|
||
:activeList="activeList"
|
||
@input="
|
||
(data) => {
|
||
selectNavChildren = [];
|
||
activeName = data['template'];
|
||
activeType = data['key'];
|
||
selectNavChildren = data.children || [];
|
||
}
|
||
"
|
||
/>
|
||
</div>
|
||
<div class="container-info">
|
||
<el-row :gutter="10">
|
||
<el-col :span="12">
|
||
<div
|
||
style="
|
||
background: rgb(244, 245, 247);
|
||
height: 104px;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding-left: 20px;
|
||
"
|
||
>
|
||
<el-descriptions :column="2" class="margin-top" title="">
|
||
<el-descriptions-item label="行业类型：">{{
|
||
statusFormat(infoData)
|
||
}}</el-descriptions-item>
|
||
<el-descriptions-item label="联系人1：">
|
||
{{ infoData["contacts1"] || "--" }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="联系人2：">
|
||
{{ infoData["contacts2"] || "--" }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="联系人3：">
|
||
{{ infoData["contacts3"] || "--" }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="项目地址：">
|
||
<div class="e-descriptions-address">
|
||
<span
|
||
:title="infoData.projectAddress"
|
||
class="e-address-span"
|
||
>
|
||
{{ infoData.projectAddress }}
|
||
</span>
|
||
<i
|
||
class="el-icon-map-location e-i-custom"
|
||
@click="mapClick"
|
||
></i>
|
||
<el-popover
|
||
v-model="visible"
|
||
placement="bottom"
|
||
style="top: 30px; left: -85%; position: relative"
|
||
title="项目地址坐标"
|
||
trigger="manual"
|
||
width="1080"
|
||
>
|
||
<slot>
|
||
<el-row>
|
||
<el-col :span="10">
|
||
<span>经度：{{ mapForm.lng }}</span>
|
||
</el-col>
|
||
<el-col :span="10">
|
||
<span>纬度：{{ mapForm.lat }}</span>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<shop-location
|
||
v-if="visible === true"
|
||
:draggable="false"
|
||
:mapCenter="mapCenter"
|
||
:zoom="zoom"
|
||
style="height: 450px; margin-top: 10px"
|
||
@mapEvent="mapEvent"
|
||
/>
|
||
|
||
<div
|
||
style="
|
||
width: 100%;
|
||
height: 35px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
margin-top: 5px;
|
||
"
|
||
>
|
||
<el-button
|
||
size="mini"
|
||
type="primary"
|
||
@click="visible = false"
|
||
>确 定</el-button
|
||
>
|
||
</div>
|
||
</slot>
|
||
</el-popover>
|
||
</div>
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div
|
||
style="
|
||
background: rgb(244, 245, 247);
|
||
height: 104px;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding-left: 20px;
|
||
"
|
||
>
|
||
<e-census-cards
|
||
:propList="censusCardList"
|
||
:result="projectStatistics"
|
||
/>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<div class="container-main">
|
||
<div
|
||
:style="isShrink ? 'width: 100%;' : 'width: calc(100% - 150px);'"
|
||
class="main-block"
|
||
>
|
||
<component
|
||
:is="activeName"
|
||
:isFoldRight="isFoldRight"
|
||
:isShrink="isShrink"
|
||
:projectInfo="infoData"
|
||
:projectTypeOptions="projectTypeOptions"
|
||
:sourceId="stateSourceId"
|
||
:tabs="selectNavChildren"
|
||
:tempType="activeType"
|
||
></component>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="!isFoldRight" class="block-right">
|
||
<e-simple-card class="today-ratio-card" title="最近2 天警情同比">
|
||
<template slot="cardBody">
|
||
<e-today-ratio
|
||
v-if="!isFoldRight"
|
||
:result="resultInfo['warningAnalysisStatisticsVo']"
|
||
/>
|
||
</template>
|
||
</e-simple-card>
|
||
|
||
<e-simple-card class="type-census-card" title="类型分布统计">
|
||
<template slot="cardBody">
|
||
<e-type-census
|
||
v-if="!isFoldRight"
|
||
:result="resultInfo['alarmCategoriesList'] || []"
|
||
/>
|
||
</template>
|
||
</e-simple-card>
|
||
|
||
<e-simple-card class="trend-census-card" title="报警预警趋势">
|
||
<template slot="cardBody">
|
||
<e-trend-census
|
||
v-if="!isFoldRight"
|
||
:result="resultInfo['alarmChartDataVo'] || []"
|
||
/>
|
||
</template>
|
||
</e-simple-card>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { getProject, listProject } from "@/api/iot/project";
|
||
import { statProject } from "@/api/iot/project_new";
|
||
import { getWarningAnalysis } from "@/api/app";
|
||
import Cookies from "js-cookie";
|
||
import ECensusCards from "./ECensusCards";
|
||
import ElDescriptions from "@/components/Edescriptions";
|
||
import ElDescriptionsItem from "@/components/Edescriptions/src/descriptions-item";
|
||
import ESimpleCard from "@/components/Cards/index";
|
||
import ENavMenu from "./ENavMenu/index";
|
||
import EProjectManage from "./EProjectManage";
|
||
import ETodayRatio from "./ETodayRatio";
|
||
import ETypeCensus from "./ETypeCensus";
|
||
import ETrendCensus from "./ETrendCensus";
|
||
import EObjectContainer from "./EObjectContainer";
|
||
import EDeviceManage from "./DeviceManage/index";
|
||
import EAlarmManage from "./AlarmManage/index";
|
||
import ESafetyTemplate from "./SafetyTemplate/index";
|
||
import ELeakageCurrent from "./SafetyTemplate/ELeakageCurrent";
|
||
import EDebuff from "./SafetyTemplate/EDebuff";
|
||
import EDeviceSwitchWarning from "./SafetyTemplate/EDeviceSwitchWarning";
|
||
import EElectricity from "./EnergyManage/EElectricity";
|
||
import EEnergyLoad from "./EnergyManage/EEnergyLoad";
|
||
import ENavMenuButton from "./ENavMenuButton/index";
|
||
|
||
import { initMap, gjzCode } from "@/utils/latlngFromAddress";
|
||
import ShopLocation from "@/components/Amap/components/shopLocation/index";
|
||
import ESceneManage from "./ESceneManage/index";
|
||
|
||
import ENavLayout from "./ENavLayout/index";
|
||
|
||
export default {
|
||
name: "projectDetailV2",
|
||
components: {
|
||
ECensusCards,
|
||
ElDescriptions,
|
||
ElDescriptionsItem,
|
||
ENavMenu,
|
||
EProjectManage,
|
||
ESimpleCard,
|
||
ETodayRatio,
|
||
ETypeCensus,
|
||
ETrendCensus,
|
||
EObjectContainer,
|
||
EDeviceManage,
|
||
EAlarmManage,
|
||
// ESafetyTemplate,
|
||
ELeakageCurrent,
|
||
EDebuff,
|
||
EDeviceSwitchWarning,
|
||
EElectricity,
|
||
EEnergyLoad,
|
||
ShopLocation,
|
||
ESceneManage,
|
||
ENavMenuButton,
|
||
ENavLayout,
|
||
},
|
||
props: {
|
||
sourceId: {
|
||
type: [String, Number],
|
||
require: true,
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
// 地图 弹窗
|
||
visible: false,
|
||
BMap: null,
|
||
mapCenter: {
|
||
lng: 119.459889,
|
||
lat: 25.98974,
|
||
},
|
||
zoom: 15,
|
||
mapForm: {},
|
||
// 行政划分树选项
|
||
stateSourceId: null,
|
||
resultInfo: {},
|
||
activeName: "EObjectContainer",
|
||
activeType: "EObjectContainer",
|
||
isShrink: true,
|
||
selectNavChildren: [],
|
||
activeList: [
|
||
{
|
||
label: "项目信息",
|
||
key: "EObjectContainer",
|
||
icon: "iconfont iconxiangmugl",
|
||
template: "EObjectContainer",
|
||
},
|
||
{
|
||
label: "设备管理",
|
||
key: "EDeviceManage",
|
||
icon: "iconfont iconwumoxing",
|
||
template: "EDeviceManage",
|
||
},
|
||
{
|
||
label: "安全监管",
|
||
key: "safety",
|
||
icon: "iconfont iconanquangl",
|
||
template: "ENavLayout",
|
||
children: [
|
||
// 漏电流 温度 漏电报警 温度报警 漏保自检 短路报警 过欠压 过流过载 电弧报警 三相报警 异常状态 分合闸警示
|
||
{
|
||
label: "全部报警",
|
||
key: "EAlarmManage",
|
||
template: "EAlarmManage",
|
||
},
|
||
{
|
||
label: "漏电流",
|
||
key: "leakage",
|
||
template: "ELeakageCurrent",
|
||
},
|
||
{
|
||
label: "温度",
|
||
key: "A006,A007,A008,A009,B004,B005,B006,B007",
|
||
template: "ESafetyTemplate",
|
||
},
|
||
{
|
||
label: "漏电报警",
|
||
key: "A002,B002",
|
||
template: "ESafetyTemplate",
|
||
},
|
||
{
|
||
label: "漏保自检",
|
||
key: "A002,B004",
|
||
template: "ESafetyTemplate",
|
||
},
|
||
{
|
||
label: "短路报警",
|
||
key: "A001,B004",
|
||
template: "ESafetyTemplate",
|
||
},
|
||
{
|
||
label: "过欠压",
|
||
key: "A005,A004,B000,B001",
|
||
template: "ESafetyTemplate",
|
||
},
|
||
{
|
||
label: "过流过载",
|
||
key: "A003,A013,B003,B009",
|
||
template: "ESafetyTemplate",
|
||
},
|
||
{
|
||
label: "电弧报警",
|
||
key: "A014,B010",
|
||
template: "ESafetyTemplate",
|
||
},
|
||
{
|
||
label: "三相报警",
|
||
key: "A015,B011",
|
||
template: "ESafetyTemplate",
|
||
},
|
||
{
|
||
label: "异常状态",
|
||
key: "A010",
|
||
template: "EDebuff",
|
||
},
|
||
{
|
||
label: "分合闸警示",
|
||
key: "A011",
|
||
template: "EDeviceSwitchWarning",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
label: "能源管理",
|
||
key: "energyManage",
|
||
icon: "iconfont iconnengyuanguanli",
|
||
template: "ENavLayout",
|
||
children: [
|
||
{
|
||
label: "电 量",
|
||
key: "electricity",
|
||
template: "EElectricity",
|
||
},
|
||
{
|
||
label: "电价合同",
|
||
key: "eprice",
|
||
template: "EPrice",
|
||
},
|
||
{
|
||
label: "负 载",
|
||
key: "energyLoad",
|
||
template: "EEnergyLoad",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
label: "场景联动",
|
||
key: "synthesizeManage",
|
||
icon: "iconfont icontasks",
|
||
template: "ENavLayout",
|
||
children: [
|
||
{
|
||
label: "场景控制",
|
||
key: "sceneManage",
|
||
template: "ESceneManage",
|
||
},
|
||
],
|
||
},
|
||
],
|
||
projectTypeOptions: [],
|
||
infoData: {},
|
||
censusCardList: [
|
||
{
|
||
label: "设备总数",
|
||
key: "deviceTotal",
|
||
},
|
||
{
|
||
label: "在线设备数",
|
||
key: "onlineTotal",
|
||
},
|
||
{
|
||
label: "离线设备数",
|
||
key: "offlineTotal",
|
||
},
|
||
{
|
||
label: "今日报警数",
|
||
key: "todayAlarmTotal",
|
||
},
|
||
{
|
||
label: "报警总数",
|
||
key: "alarmTotal",
|
||
},
|
||
],
|
||
projectList: [],
|
||
isFoldRight: false,
|
||
scalseNumX: 1,
|
||
scalseNumY: 1,
|
||
fullscreen: false,
|
||
divWidth: 1682,
|
||
divHeight: 812,
|
||
projectStatistics: {},
|
||
};
|
||
},
|
||
created() {
|
||
this.stateSourceId = this.sourceId;
|
||
this.getProjectList();
|
||
// this.init()
|
||
this.activeName = "EObjectContainer";
|
||
this.getDicts("project_industry").then((response) => {
|
||
this.projectTypeOptions = response.data;
|
||
});
|
||
},
|
||
destroyed() {
|
||
document.getElementById("con_lf_top_div").style.overflow = "auto";
|
||
},
|
||
watch: {
|
||
$route(to, from) {
|
||
// if (from.fullPath === "/project/project") {
|
||
// document.getElementById("con_lf_top_div").style.overflow = "auto";
|
||
// } else if (to.fullPath === "/project/project") {
|
||
// document.getElementById("con_lf_top_div").style.overflow = "hidden";
|
||
// }
|
||
},
|
||
isFoldRight: {
|
||
handler(newValue) {
|
||
if (!newValue) {
|
||
this.warningAnalysisList();
|
||
}
|
||
},
|
||
deep: true, // 深度监听
|
||
immediate: false, // 初始化监听
|
||
},
|
||
sourceId(val) {
|
||
this.stateSourceId = this.sourceId;
|
||
},
|
||
stateSourceId(val) {
|
||
this.init();
|
||
this.visible = false;
|
||
},
|
||
opened: {
|
||
handler() {
|
||
// this.resize_window_project();
|
||
},
|
||
deep: true,
|
||
immediate: true,
|
||
},
|
||
},
|
||
mounted() {
|
||
// 计算缩放比例
|
||
// this.resize_window_project();
|
||
this.thisScrollTopY = document.getElementById("con_lf_top_div").scrollTop;
|
||
// document.getElementById("con_lf_top_div").style.overflow = "hidden";
|
||
document.getElementById("con_lf_top_div").scrollTop = 0;
|
||
// window.addEventListener("resize", () => {
|
||
// this.resize_window_project();
|
||
// });
|
||
},
|
||
computed: {
|
||
opened() {
|
||
return this.$store.getters.sidebar;
|
||
},
|
||
},
|
||
methods: {
|
||
mapEvent(data) {
|
||
this.mapForm.lng = data.lng;
|
||
this.mapForm.lat = data.lat;
|
||
this.mapForm.address = data.address;
|
||
this.$forceUpdate();
|
||
},
|
||
// 使用地图方式定位
|
||
mapClick() {
|
||
if (this.infoData.projectLng && this.infoData.projectLat) {
|
||
this.mapCenter.lng = this.infoData.projectLng;
|
||
this.mapCenter.lat = this.infoData.projectLat;
|
||
this.mapForm.lng = this.infoData.projectLng;
|
||
this.mapForm.lat = this.infoData.projectLat;
|
||
this.mapForm.address = this.infoData.projectAddress;
|
||
} else {
|
||
this.mapCenter = {
|
||
lng: 119.459889,
|
||
lat: 25.98974,
|
||
};
|
||
this.mapForm.lng = 119.459889;
|
||
this.mapForm.lat = 25.98974;
|
||
this.mapForm.address = "";
|
||
}
|
||
this.visible = !this.visible;
|
||
},
|
||
init() {
|
||
this.getInfoByProjectId();
|
||
this.getProjectCount();
|
||
this.warningAnalysisList();
|
||
},
|
||
resize_window_project() {
|
||
var documentDiv = document.getElementById("project-detail-v2-id");
|
||
if (this.fullscreen) {
|
||
this.scalseNumX = Number(documentDiv.clientWidth / this.divWidth);
|
||
this.scalseNumY = Number(documentDiv.clientHeight / this.divHeight);
|
||
} else {
|
||
if (document.documentElement.clientWidth < 993) {
|
||
this.scalseNumX =
|
||
Number(document.documentElement.clientWidth / this.divWidth) -
|
||
(Cookies.get("sidebarStatus") !== "0"
|
||
? Number(200 / this.divWidth)
|
||
: 0);
|
||
} else {
|
||
this.scalseNumX =
|
||
Number(document.documentElement.clientWidth / this.divWidth) -
|
||
(Cookies.get("sidebarStatus") !== "0"
|
||
? Number(240 / this.divWidth)
|
||
: Number(80 / this.divWidth));
|
||
}
|
||
this.scalseNumY = Number(
|
||
(document.documentElement.clientHeight - 125) / this.divHeight
|
||
);
|
||
}
|
||
},
|
||
handlePrev(idx) {
|
||
if (idx >= 1) {
|
||
// this.getInfoByProjectId(this.projectList[idx - 1].projectId)
|
||
this.stateSourceId = this.projectList[idx - 1].projectId;
|
||
}
|
||
},
|
||
handleNext(idx) {
|
||
if (idx < this.projectList.length - 1) {
|
||
// this.getInfoByProjectId(this.projectList[idx + 1].projectId)
|
||
this.stateSourceId = this.projectList[idx + 1].projectId;
|
||
}
|
||
},
|
||
// 查询 项目统计
|
||
getProjectCount() {
|
||
statProject({ projectId: this.stateSourceId }).then((res) => {
|
||
this.projectStatistics = res.data;
|
||
});
|
||
},
|
||
// 查询项目列表
|
||
getProjectList() {
|
||
listProject({
|
||
pageNum: 1,
|
||
pageSize: 99999,
|
||
orderByColumn: "createTime",
|
||
isAsc: "desc",
|
||
}).then((response) => {
|
||
this.projectList = response.rows;
|
||
});
|
||
},
|
||
// 返回列表
|
||
handleLinkToTable() {
|
||
this.$emit("linkToTable");
|
||
},
|
||
// 折叠开启右侧数据
|
||
handleFoldRight() {
|
||
this.isFoldRight = !this.isFoldRight;
|
||
this.$forceUpdate();
|
||
},
|
||
// 查询获取告警分析等数据
|
||
warningAnalysisList() {
|
||
getWarningAnalysis({
|
||
projectId: this.stateSourceId,
|
||
}).then((res) => {
|
||
this.resultInfo = res.data;
|
||
});
|
||
},
|
||
// 菜单状态字典翻译
|
||
statusFormat(row, column) {
|
||
return this.selectDictLabel(this.projectTypeOptions, row.industry);
|
||
},
|
||
getInfoByProjectId() {
|
||
getProject(this.stateSourceId).then((response) => {
|
||
this.infoData = response.data;
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="scss">
|
||
.project-detail-v2 {
|
||
width: 100%;
|
||
height: 100%;
|
||
height: calc(100vh - 125px);
|
||
display: flex;
|
||
transform-origin: center top 0px;
|
||
position: relative;
|
||
min-width: 1180px;
|
||
// 缩放样式
|
||
// left: 50%;
|
||
// margin-left: -840px;
|
||
// width: 1682px;
|
||
// height: 812px;
|
||
.block-lift {
|
||
width: calc(100% - 290px - 20px);
|
||
height: 100%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
.container-title {
|
||
height: 45px;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.title-left {
|
||
width: 50%;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
height: 100%;
|
||
align-items: center;
|
||
> span {
|
||
font-size: 24px;
|
||
font-family: "Source Han Sans CN";
|
||
font-weight: 600;
|
||
color: #172b4d;
|
||
}
|
||
.icon-c {
|
||
font-size: 18px;
|
||
color: #6b778c;
|
||
font-weight: 600;
|
||
margin-top: 2px;
|
||
margin-left: 15px;
|
||
}
|
||
}
|
||
.title-but {
|
||
width: 50%;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
.but-home {
|
||
width: 90px;
|
||
height: 30px;
|
||
background: #f4f5f7;
|
||
border-radius: 5px;
|
||
color: #6b778c;
|
||
justify-content: center;
|
||
align-items: center;
|
||
display: flex;
|
||
margin-right: 10px;
|
||
.icon-c {
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
margin-top: 2px;
|
||
}
|
||
.but-title {
|
||
font-size: 12px;
|
||
font-family: "Source Han Sans CN";
|
||
font-weight: 600;
|
||
margin-left: 5px;
|
||
cursor: default;
|
||
}
|
||
}
|
||
.but-home:hover {
|
||
background: #1890ff;
|
||
color: #fff;
|
||
}
|
||
.but-tz {
|
||
width: 30px;
|
||
height: 30px;
|
||
background: #f4f5f7;
|
||
border-radius: 5px;
|
||
justify-content: center;
|
||
align-items: center;
|
||
display: flex;
|
||
margin-right: 0px;
|
||
font-weight: 600;
|
||
color: #6b778c;
|
||
.icon-c {
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
margin-top: 2px;
|
||
}
|
||
}
|
||
.but-tz:hover {
|
||
background: #1890ff;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
.container-info {
|
||
// height: 104px;
|
||
width: 100%;
|
||
background: #f4f5f7;
|
||
border-radius: 5px;
|
||
margin-top: 5px;
|
||
display: flex;
|
||
padding: 10px;
|
||
.info-left {
|
||
width: calc(40%);
|
||
padding: 8px 20px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
.margin-top {
|
||
width: 100%;
|
||
}
|
||
}
|
||
.info-divider {
|
||
width: 1px;
|
||
height: 105px;
|
||
background: #e8e8e8;
|
||
}
|
||
.info-right {
|
||
width: calc(100% - 1px - 40%);
|
||
display: flex;
|
||
height: 104px;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
.container-main {
|
||
width: calc(100% - 0px);
|
||
height: calc(100vh - 286px);
|
||
margin-left: 0px;
|
||
margin-top: 0px;
|
||
display: flex;
|
||
height: calc(100% - 190px);
|
||
.main-block {
|
||
padding: 15px;
|
||
width: calc(100% - 150px);
|
||
height: 100%;
|
||
width: 100%;
|
||
padding-right: 0;
|
||
padding-left: 25px;
|
||
}
|
||
}
|
||
}
|
||
.block-right-fold {
|
||
width: 100%;
|
||
}
|
||
.block-right {
|
||
width: 290px;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
padding: 5px 0;
|
||
margin-left: 20px;
|
||
.today-ratio-card {
|
||
height: 270px;
|
||
margin-bottom: 20px;
|
||
.e-simple-card__body {
|
||
padding: 10px;
|
||
}
|
||
}
|
||
.type-census-card {
|
||
height: 245px;
|
||
margin-bottom: 20px;
|
||
.e-simple-card__body {
|
||
padding: 10px;
|
||
}
|
||
}
|
||
.trend-census-card {
|
||
height: 260px;
|
||
margin-bottom: 20px;
|
||
.e-simple-card__body {
|
||
padding: 10px;
|
||
}
|
||
}
|
||
}
|
||
.el-descriptions__body {
|
||
background-color: #fff0;
|
||
}
|
||
.margin-top {
|
||
margin-top: 0;
|
||
}
|
||
.el-descriptions .el-descriptions-item__cell {
|
||
padding-bottom: 6px;
|
||
}
|
||
.el-descriptions .is-bordered .el-descriptions-item__cell {
|
||
padding: 5px 5px;
|
||
// border: 0px solid #ebeef5;
|
||
}
|
||
.el-descriptions-item__label.is-bordered-label {
|
||
background: #fafafa00;
|
||
}
|
||
.but-icon:hover {
|
||
color: #1890ff !important;
|
||
font-size: 20px !important;
|
||
}
|
||
.e-descriptions-address {
|
||
display: flex;
|
||
width: 100%;
|
||
.e-address-span {
|
||
display: block;
|
||
max-width: calc(500px - 100px);
|
||
display: block;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
max-width: calc(500px - 170px);
|
||
}
|
||
}
|
||
.e-i-custom {
|
||
margin-left: 5px;
|
||
margin-top: 3px;
|
||
}
|
||
.e-i-custom:hover {
|
||
color: #1890ff;
|
||
}
|
||
}
|
||
</style>
|