579 lines
22 KiB
Vue
579 lines
22 KiB
Vue
|
<!--总览-->
|
|||
|
|
<template>
|
|||
|
|
<div class="lgBigScreen-wrap flex">
|
|||
|
|
<div class="left" v-show="checkedTab == 0">
|
|||
|
|
<img src="@/assets/images/longguang/demo/zl_l.png" class="demo"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="center" v-show="checkedTab == 0">
|
|||
|
|
<div class="mapChart" ref="mapChart"></div>
|
|||
|
|
<div class="mapDialog" v-show="showMapDialog">
|
|||
|
|
<div class="flex2">
|
|||
|
|
<div class="dialog_title">项目详细</div>
|
|||
|
|
<i class="el-icon-error" @click="showMapDialog = false"></i>
|
|||
|
|
</div>
|
|||
|
|
<div class="dialog_project_info">
|
|||
|
|
<div class="flex3">
|
|||
|
|
<img :src="projectDetails.layoutImage" class="info_img" />
|
|||
|
|
<div style="width: 70%">
|
|||
|
|
<el-tooltip
|
|||
|
|
class="item"
|
|||
|
|
effect="dark"
|
|||
|
|
:content="projectDetails.projectName"
|
|||
|
|
placement="top-start"
|
|||
|
|
>
|
|||
|
|
<div class="project_name hide">
|
|||
|
|
{{ projectDetails.projectName }}
|
|||
|
|
</div>
|
|||
|
|
</el-tooltip>
|
|||
|
|
<el-tooltip
|
|||
|
|
class="item"
|
|||
|
|
effect="dark"
|
|||
|
|
:content="projectDetails.constructionUnit"
|
|||
|
|
placement="top-start"
|
|||
|
|
>
|
|||
|
|
<div class="subhead hide">
|
|||
|
|
总承包：{{projectDetails.constructionUnit}}
|
|||
|
|
</div>
|
|||
|
|
</el-tooltip>
|
|||
|
|
<el-tooltip
|
|||
|
|
class="item"
|
|||
|
|
effect="dark"
|
|||
|
|
:content="projectDetails.constructionUnit"
|
|||
|
|
placement="top-start"
|
|||
|
|
>
|
|||
|
|
<div class="subhead hide">建筑方：{{projectDetails.constructionUnit}}</div>
|
|||
|
|
</el-tooltip>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex2 margin_20">
|
|||
|
|
<div class="subhead">
|
|||
|
|
建筑体量 (㎡)：<span class="value">{{
|
|||
|
|
projectDetails.projectAcreage
|
|||
|
|
}}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="subhead">
|
|||
|
|
合同额(万元)：<span class="value">{{
|
|||
|
|
projectDetails.contractPrice ? projectDetails.contractPrice : 0
|
|||
|
|
}}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex2">
|
|||
|
|
<div>
|
|||
|
|
<div>环境</div>
|
|||
|
|
<div class="subhead">
|
|||
|
|
PM2.5：<span class="value2">{{
|
|||
|
|
projectEnvironmentData.pm25
|
|||
|
|
}}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="subhead">
|
|||
|
|
PM10：<span class="value2">{{
|
|||
|
|
projectEnvironmentData.pm10
|
|||
|
|
}}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div>人员</div>
|
|||
|
|
<div class="subhead">
|
|||
|
|
实时人数：<span class="value2">{{
|
|||
|
|
attendancePerson.totalWorker
|
|||
|
|
}}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="subhead">
|
|||
|
|
今日出勤：<span class="value2">{{
|
|||
|
|
attendancePerson.totalPerson
|
|||
|
|
}}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div>质量</div>
|
|||
|
|
<div class="subhead">
|
|||
|
|
待整改：<span class="value2">{{
|
|||
|
|
qualityCount.rectificationNum
|
|||
|
|
}}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="subhead">
|
|||
|
|
整改率：<span class="value2">{{
|
|||
|
|
qualityCount.completeRatio
|
|||
|
|
}}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div>安全</div>
|
|||
|
|
<div class="subhead">
|
|||
|
|
待整改：<span class="value2">{{
|
|||
|
|
securityCount.rectificationNum
|
|||
|
|
}}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="subhead">
|
|||
|
|
整改率：<span class="value2">{{
|
|||
|
|
securityCount.completeRatio
|
|||
|
|
}}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="bottom_info">
|
|||
|
|
<div class="flex2">
|
|||
|
|
<div>项目进度</div>
|
|||
|
|
<div>装饰装修阶段</div>
|
|||
|
|
</div>
|
|||
|
|
<el-progress :percentage="20"></el-progress>
|
|||
|
|
<div class="flex2 time">
|
|||
|
|
<div>2020-12-12</div>
|
|||
|
|
<div>2021-08-31</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="right" v-show="checkedTab == 0">
|
|||
|
|
<img src="@/assets/images/longguang/demo/zl_r.png" class="demo"/>
|
|||
|
|
</div>
|
|||
|
|
<div v-show="checkedTab!=0">
|
|||
|
|
<img :src="showDemo" class="demo"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="btn_wrap flex2">
|
|||
|
|
<div v-for="(tab, index) in tabsList" :key="index" class="tab">
|
|||
|
|
<div
|
|||
|
|
:class="checkedTab == index ? 'checked' : 'noChecked'"
|
|||
|
|
@click="changeTab(index)"
|
|||
|
|
>
|
|||
|
|
<img :src="tab.icon" />
|
|||
|
|
<div>{{ tab.name }}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import echarts from 'echarts4';;
|
|||
|
|
import {
|
|||
|
|
selectAllProjectInfoList,
|
|||
|
|
getRealTimeDustNoiseData,
|
|||
|
|
selectEnterpriseAttendanceCount,
|
|||
|
|
selectProjectWorkAndInspectCount,
|
|||
|
|
getComapnyStatisticsList,
|
|||
|
|
} from "./../../../assets/js/api/companyBigScreen.js";
|
|||
|
|
import {} from "./components"
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
sn: "",
|
|||
|
|
projectSn: "",
|
|||
|
|
tabsList: [
|
|||
|
|
{
|
|||
|
|
name: "总览",
|
|||
|
|
id: 1,
|
|||
|
|
icon: require("../../../assets/images/longguang/icon_zonglan.png"),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "劳务管理",
|
|||
|
|
id: 2,
|
|||
|
|
icon: require("../../../assets/images/longguang/icon_lw.png"),
|
|||
|
|
url: require("../../../assets/images/longguang/demo/lw.png"),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "安全管理",
|
|||
|
|
id: 3,
|
|||
|
|
icon: require("../../../assets/images/longguang/icon_aq.png"),
|
|||
|
|
url: require("../../../assets/images/longguang/demo/aq.png"),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "质量管理",
|
|||
|
|
id: 4,
|
|||
|
|
icon: require("../../../assets/images/longguang/icon_zl.png"),
|
|||
|
|
url: require("../../../assets/images/longguang/demo/zl.png"),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "机械管理",
|
|||
|
|
id: 5,
|
|||
|
|
icon: require("../../../assets/images/longguang/icon_jx.png"),
|
|||
|
|
url: require("../../../assets/images/longguang/demo/jx.png"),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "进度管理",
|
|||
|
|
id: 6,
|
|||
|
|
icon: require("../../../assets/images/longguang/icon_jd.png"),
|
|||
|
|
url: require("../../../assets/images/longguang/demo/jd.png"),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "监控管理",
|
|||
|
|
id: 7,
|
|||
|
|
icon: require("../../../assets/images/longguang/icon_jk.png"),
|
|||
|
|
url: require("../../../assets/images/longguang/demo/jk.png"),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "AI视频管理",
|
|||
|
|
id: 8,
|
|||
|
|
icon: require("../../../assets/images/longguang/icon_ai.png"),
|
|||
|
|
url: require("../../../assets/images/longguang/demo/ai.png"),
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
checkedTab: 0,
|
|||
|
|
showMapDialog: false,
|
|||
|
|
allProjectData: [], //数据源
|
|||
|
|
projectEnvironmentData: {}, //环境信息
|
|||
|
|
projectDetails: {}, //项目详细信息
|
|||
|
|
qualityCount: {}, //详情质量
|
|||
|
|
securityCount: {}, //详情安全
|
|||
|
|
attendancePerson: {}, //详情人员
|
|||
|
|
showDemo:'',
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
this.sn = this.$store.state.userInfo.sn;
|
|||
|
|
|
|||
|
|
this.getAllProjectInfoList();
|
|||
|
|
},
|
|||
|
|
mounted() {},
|
|||
|
|
methods: {
|
|||
|
|
//切换tab
|
|||
|
|
changeTab(index) {
|
|||
|
|
if (index != 0) {
|
|||
|
|
this.showDemo = this.tabsList[index].url;
|
|||
|
|
}
|
|||
|
|
this.checkedTab = index;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//获取所有项目
|
|||
|
|
getAllProjectInfoList() {
|
|||
|
|
let data = {
|
|||
|
|
sn: this.sn,
|
|||
|
|
};
|
|||
|
|
selectAllProjectInfoList(data).then((res) => {
|
|||
|
|
console.log(res);
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
this.allProjectData = res.result;
|
|||
|
|
this.createdChart();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
//获取环境数据
|
|||
|
|
selectRealTimeDustNoiseData(projectSn) {
|
|||
|
|
getRealTimeDustNoiseData({ projectSn: projectSn }).then((res) => {
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
if (res.result) {
|
|||
|
|
this.projectEnvironmentData = res.result;
|
|||
|
|
} else {
|
|||
|
|
this.projectEnvironmentData = {
|
|||
|
|
pm25: 0,
|
|||
|
|
pm10: 0,
|
|||
|
|
noise: 0,
|
|||
|
|
winddirection: 0,
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
//获取人员。质量。安全。数据
|
|||
|
|
getProjectWorkAndInspectCount(projectSn) {
|
|||
|
|
selectProjectWorkAndInspectCount({
|
|||
|
|
projectSn: projectSn,
|
|||
|
|
}).then((res) => {
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
this.attendancePerson = res.result.personCount.attendancePerson;
|
|||
|
|
this.attendancePerson.totalWorker = res.result.personCount.totalWorker;
|
|||
|
|
this.qualityCount = res.result.qualityCount;
|
|||
|
|
this.securityCount = res.result.securityCount;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//创建地图
|
|||
|
|
createdChart() {
|
|||
|
|
var uploadedDataURL = "/js/data-1528971808162-BkOXf61WX.json";
|
|||
|
|
var that = this;
|
|||
|
|
let myChart = echarts.init(this.$refs.mapChart);
|
|||
|
|
var data = [];
|
|||
|
|
//获取回显项目位置
|
|||
|
|
if (this.allProjectData.length > 0) {
|
|||
|
|
this.allProjectData.forEach((element, index) => {
|
|||
|
|
let obj = {
|
|||
|
|
name: element.projectName,
|
|||
|
|
value: [element.longitude, element.latitude, 300], //300 回显图标的大小
|
|||
|
|
projectSn: element.projectSn,
|
|||
|
|
detail: element,
|
|||
|
|
};
|
|||
|
|
data.push(obj);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
$.getJSON(uploadedDataURL, function (geoJson) {
|
|||
|
|
echarts.registerMap("china", geoJson);
|
|||
|
|
// tooltip: {}, // hover 回显数据
|
|||
|
|
var option = {
|
|||
|
|
// backgroundColor: "#030609",
|
|||
|
|
grid: {
|
|||
|
|
top: 0,
|
|||
|
|
bottom: 0,
|
|||
|
|
left: 0,
|
|||
|
|
right: 0,
|
|||
|
|
},
|
|||
|
|
//地图显示
|
|||
|
|
geo: {
|
|||
|
|
map: "china",
|
|||
|
|
aspectScale: 0.75, //长宽比
|
|||
|
|
zoom: 1.2,
|
|||
|
|
scaleLimit: {
|
|||
|
|
min: 1.2,
|
|||
|
|
},
|
|||
|
|
roam: true,
|
|||
|
|
label: {
|
|||
|
|
normal: {
|
|||
|
|
formatter: function (params) {
|
|||
|
|
if (params.name.indexOf("_")) {
|
|||
|
|
return params.name.split("_")[0];
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
show: false,
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#F4E924",
|
|||
|
|
fontSize: 16,
|
|||
|
|
fontWeight: "bold",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
show: false,
|
|||
|
|
textStyle: {
|
|||
|
|
color: "white",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
areaColor: "#031525",
|
|||
|
|
borderColor: "#3B5077",
|
|||
|
|
borderWidth: 1,
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
areaColor: "#0f2c70",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
regions: [
|
|||
|
|
{
|
|||
|
|
name: "南海诸岛",
|
|||
|
|
itemStyle: {
|
|||
|
|
areaColor: "rgba(0, 10, 52, 1)",
|
|||
|
|
borderColor: "rgba(0, 10, 52, 1)",
|
|||
|
|
normal: {
|
|||
|
|
// opacity: 0,
|
|||
|
|
label: {
|
|||
|
|
show: false,
|
|||
|
|
color: "#009cc9",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: "",
|
|||
|
|
type: "effectScatter",
|
|||
|
|
coordinateSystem: "geo",
|
|||
|
|
data: data,
|
|||
|
|
symbolSize: function (val) {
|
|||
|
|
return val[2] / 20;
|
|||
|
|
},
|
|||
|
|
showEffectOn: "render",
|
|||
|
|
rippleEffect: {
|
|||
|
|
brushType: "stroke",
|
|||
|
|
},
|
|||
|
|
hoverAnimation: true,
|
|||
|
|
label: {
|
|||
|
|
normal: {
|
|||
|
|
formatter: "{b}",
|
|||
|
|
position: "right",
|
|||
|
|
show: true, //回显项目名称
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: "#F4E924",
|
|||
|
|
shadowBlur: 10,
|
|||
|
|
shadowColor: "#333",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
zlevel: 1,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
myChart.on("click", function (params) {
|
|||
|
|
//点击的是图标
|
|||
|
|
if (params.seriesType) {
|
|||
|
|
that.showMapDialog = true;
|
|||
|
|
that.projectSn = params.data.projectSn;
|
|||
|
|
that.projectDetails = params.data.detail;
|
|||
|
|
console.log(params.data.detail);
|
|||
|
|
//获取环境信息
|
|||
|
|
that.selectRealTimeDustNoiseData(params.data.projectSn);
|
|||
|
|
//获取人员.安全.质量 信息
|
|||
|
|
that.getProjectWorkAndInspectCount(params.data.projectSn);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
myChart.setOption(option, true);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="less" scoped>
|
|||
|
|
.flex {
|
|||
|
|
display: flex;
|
|||
|
|
}
|
|||
|
|
.flex2 {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.flex3 {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.lgBigScreen-wrap {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
background: #030609;
|
|||
|
|
color: #fff;
|
|||
|
|
position: relative;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 15px;
|
|||
|
|
.left {
|
|||
|
|
width: 20%;
|
|||
|
|
}
|
|||
|
|
.center {
|
|||
|
|
width: 60%;
|
|||
|
|
height: calc(100% - 2px);
|
|||
|
|
}
|
|||
|
|
.right {
|
|||
|
|
width: 20%;
|
|||
|
|
}
|
|||
|
|
.btn_wrap {
|
|||
|
|
position: absolute;
|
|||
|
|
width: 60%;
|
|||
|
|
height: 100px;
|
|||
|
|
bottom: -2px;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 0 50px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
.tab {
|
|||
|
|
width: 90px;
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
cursor: pointer;
|
|||
|
|
color: #fff;
|
|||
|
|
.noChecked{
|
|||
|
|
opacity: 0.6;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.checked {
|
|||
|
|
transform: scale(1.1);
|
|||
|
|
color: #ffffff;
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
.mapChart {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
background-image: url("../../../assets/images/longguang/bigScreen_bg.png");
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
background-size: auto;
|
|||
|
|
background-position: center;
|
|||
|
|
}
|
|||
|
|
.mapDialog {
|
|||
|
|
position: absolute;
|
|||
|
|
z-index: 100;
|
|||
|
|
left: calc(50% - 242px);
|
|||
|
|
top: calc(50% - 191px);
|
|||
|
|
width: 484px;
|
|||
|
|
// height: 292px;
|
|||
|
|
background-color: rgba(11, 33, 53, 1);
|
|||
|
|
box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 1);
|
|||
|
|
}
|
|||
|
|
.dialog_title {
|
|||
|
|
width: 120px;
|
|||
|
|
height: 30px;
|
|||
|
|
line-height: 30px;
|
|||
|
|
color: #fff;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 0 14px;
|
|||
|
|
font-size: 15px;
|
|||
|
|
background-image: linear-gradient(
|
|||
|
|
to right,
|
|||
|
|
rgba(67, 120, 216, 0.5),
|
|||
|
|
rgba(67, 120, 216, 0)
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
.el-icon-error {
|
|||
|
|
color: rgba(67, 120, 216, 1);
|
|||
|
|
font-size: 20px;
|
|||
|
|
margin: 0 10px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
.dialog_project_info {
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 20px 26px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
.info_img {
|
|||
|
|
width: 103px;
|
|||
|
|
height: 78px;
|
|||
|
|
margin-right: 26px;
|
|||
|
|
}
|
|||
|
|
.project_name {
|
|||
|
|
color: rgba(255, 255, 255, 1);
|
|||
|
|
font-size: 16px;
|
|||
|
|
text-decoration: underline;
|
|||
|
|
margin-bottom: 6px;
|
|||
|
|
}
|
|||
|
|
.subhead {
|
|||
|
|
color: rgba(255, 255, 255, 0.8);
|
|||
|
|
font-size: 13px;
|
|||
|
|
line-height: 26px;
|
|||
|
|
}
|
|||
|
|
.value {
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: rgba(255, 255, 255, 1);
|
|||
|
|
}
|
|||
|
|
.value2 {
|
|||
|
|
font-size: 15px;
|
|||
|
|
color: rgba(255, 255, 255, 0.8);
|
|||
|
|
}
|
|||
|
|
.margin_20 {
|
|||
|
|
margin: 20px 0;
|
|||
|
|
}
|
|||
|
|
.bottom_info {
|
|||
|
|
margin-top: 20px;
|
|||
|
|
.el-progress {
|
|||
|
|
margin: 4px 0;
|
|||
|
|
}
|
|||
|
|
/deep/.el-progress__text {
|
|||
|
|
color: #fff !important;
|
|||
|
|
margin-left: 24px;
|
|||
|
|
}
|
|||
|
|
.time {
|
|||
|
|
opacity: 0.8;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.hide {
|
|||
|
|
width: 100%;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.demo{
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|