fix: BUG修改
This commit is contained in:
parent
21cf0da076
commit
9671bff95e
@ -84,8 +84,8 @@ if (process.env.NODE_ENV == 'development') {
|
||||
// axios.defaults.baseURL ='http://101.43.164.214:45011/' //上海优益(上海建工)
|
||||
// axios.defaults.baseURL = 'http://192.168.34.221:28888/' //郭圣雄本地
|
||||
// axios.defaults.baseURL = 'http://192.168.34.221:28889/' //郭圣雄本地
|
||||
axios.defaults.baseURL ='http://192.168.34.221:19111/' //郭圣雄本地
|
||||
// axios.defaults.baseURL = 'http://192.168.34.155:19111/' //彭洁本地
|
||||
// axios.defaults.baseURL ='http://192.168.34.221:19111/' //郭圣雄本地
|
||||
axios.defaults.baseURL = 'http://192.168.34.155:19111/' //彭洁本地
|
||||
// axios.defaults.baseURL = 'http://182.90.224.237:51234' //郭圣雄远程
|
||||
// axios.defaults.baseURL ='http://101.43.164.214:45020/' //沈阳和盈
|
||||
// axios.defaults.baseURL ='http://183.249.224.118:9000/' //嘉兴王江泾公用码头
|
||||
|
||||
@ -15,7 +15,7 @@ const routes2 = [
|
||||
name: "Home",
|
||||
// component: homeLayout
|
||||
// component: homeIntro,
|
||||
redirect: "/login"
|
||||
redirect: "/login",
|
||||
},
|
||||
{
|
||||
path: "/login",
|
||||
@ -246,8 +246,8 @@ const routes2 = [
|
||||
isDockingToWoer
|
||||
? import("@/components/layout_zhongjian.vue")
|
||||
: enabledProjectV2 == 1
|
||||
? import("@/views/projectLevel/common/page.vue")
|
||||
: import("@/components/layout.vue"),
|
||||
? import("@/views/projectLevel/common/page.vue")
|
||||
: import("@/components/layout.vue"),
|
||||
meta: {
|
||||
keepAlive: true,
|
||||
},
|
||||
@ -532,19 +532,22 @@ const routes2 = [
|
||||
{
|
||||
path: "/project/labor/delayAlarmManage",
|
||||
name: "劳务管理_证明逾期预警列表",
|
||||
component: () => import("@/views/projectFront/laborManage/delayAlarmManage.vue"),
|
||||
component: () =>
|
||||
import("@/views/projectFront/laborManage/delayAlarmManage.vue"),
|
||||
},
|
||||
//劳务管理--准入台账
|
||||
{
|
||||
path: "/project/labor/entryRecord",
|
||||
name: "劳务管理_准入台账",
|
||||
component: () => import("@/views/projectFront/laborManage/entryRecord.vue"),
|
||||
component: () =>
|
||||
import("@/views/projectFront/laborManage/entryRecord.vue"),
|
||||
},
|
||||
//劳务管理--花名册(颜色版本)
|
||||
{
|
||||
path: "/project/labor/roster",
|
||||
name: "劳务管理_花名册1",
|
||||
component: () => import("@/views/projectFront/laborManage/rosterNew.vue"),
|
||||
component: () =>
|
||||
import("@/views/projectFront/laborManage/rosterNew.vue"),
|
||||
},
|
||||
//劳务管理--宿舍管理
|
||||
{
|
||||
@ -683,17 +686,13 @@ const routes2 = [
|
||||
path: "/project/qualityManage/projectSelfInspection",
|
||||
name: "质量管理_项目自检1",
|
||||
component: () =>
|
||||
import(
|
||||
"@/views/projectFront/quality/v2/projectSelfInspection.vue"
|
||||
),
|
||||
import("@/views/projectFront/quality/v2/projectSelfInspection.vue"),
|
||||
},
|
||||
{
|
||||
path: "/project/safeSame/projectSelfInspection",
|
||||
name: "安全管理_项目自检1",
|
||||
component: () =>
|
||||
import(
|
||||
"@/views/projectFront/safeSame/v2/projectSelfInspection.vue"
|
||||
),
|
||||
import("@/views/projectFront/safeSame/v2/projectSelfInspection.vue"),
|
||||
},
|
||||
{
|
||||
path: "/project/safeManage/subTasklist",
|
||||
@ -757,61 +756,89 @@ const routes2 = [
|
||||
{
|
||||
path: "/project/examSystem/subjectManagement",
|
||||
name: "安全考试系统_科目管理",
|
||||
component: () => import("@/views/projectFront/examSystem/subjectManagement/subjectManagement.vue"),
|
||||
component: () =>
|
||||
import(
|
||||
"@/views/projectFront/examSystem/subjectManagement/subjectManagement.vue"
|
||||
),
|
||||
},
|
||||
// 安全考试系统--学习资料
|
||||
{
|
||||
path: "/project/examSystem/learningMaterial",
|
||||
name: "安全考试系统_学习资料",
|
||||
component: () => import("@/views/projectFront/examSystem/learningMaterial/learningMaterial.vue"),
|
||||
component: () =>
|
||||
import(
|
||||
"@/views/projectFront/examSystem/learningMaterial/learningMaterial.vue"
|
||||
),
|
||||
},
|
||||
// 安全考试系统--题库管理
|
||||
{
|
||||
path: "/project/examSystem/questionManagement",
|
||||
name: "安全考试系统_题库管理",
|
||||
component: () => import("@/views/projectFront/examSystem/questionManagement/questionManagement.vue"),
|
||||
component: () =>
|
||||
import(
|
||||
"@/views/projectFront/examSystem/questionManagement/questionManagement.vue"
|
||||
),
|
||||
},
|
||||
// 安全考试系统--考试管理
|
||||
{
|
||||
path: "/project/examSystem/examManagement",
|
||||
name: "安全考试系统_考试管理",
|
||||
component: () => import("@/views/projectFront/examSystem/examManagement/examManagement.vue"),
|
||||
component: () =>
|
||||
import(
|
||||
"@/views/projectFront/examSystem/examManagement/examManagement.vue"
|
||||
),
|
||||
},
|
||||
// 安全考试系统--规章制度
|
||||
{
|
||||
path: "/project/examSystem/examRegulation",
|
||||
name: "安全考试系统_规章制度",
|
||||
component: () => import("@/views/projectFront/examSystem/examRegulation/examRegulation.vue"),
|
||||
component: () =>
|
||||
import(
|
||||
"@/views/projectFront/examSystem/examRegulation/examRegulation.vue"
|
||||
),
|
||||
},
|
||||
// 安全考试系统--安全手册
|
||||
{
|
||||
path: "/project/examSystem/safetyManual",
|
||||
name: "安全考试系统_安全手册",
|
||||
component: () => import("@/views/projectFront/examSystem/safetyManual/safetyManual.vue"),
|
||||
component: () =>
|
||||
import(
|
||||
"@/views/projectFront/examSystem/safetyManual/safetyManual.vue"
|
||||
),
|
||||
},
|
||||
// 安全考试系统--通知管理
|
||||
{
|
||||
path: "/project/examSystem/noticeManagement",
|
||||
name: "安全考试系统_通知管理",
|
||||
component: () => import("@/views/projectFront/examSystem/noticeManagement/noticeManagement.vue"),
|
||||
component: () =>
|
||||
import(
|
||||
"@/views/projectFront/examSystem/noticeManagement/noticeManagement.vue"
|
||||
),
|
||||
},
|
||||
// 安全考试系统--积分管理
|
||||
{
|
||||
path: "/project/examSystem/pointManagement",
|
||||
name: "安全考试系统_积分管理",
|
||||
component: () => import("@/views/projectFront/examSystem/pointManagement/pointManagement.vue"),
|
||||
component: () =>
|
||||
import(
|
||||
"@/views/projectFront/examSystem/pointManagement/pointManagement.vue"
|
||||
),
|
||||
},
|
||||
// 安全考试系统--培训管理
|
||||
{
|
||||
path: "/project/examSystem/trainRecord",
|
||||
name: "安全考试系统_培训管理",
|
||||
component: () => import("@/views/projectFront/examSystem/trainRecord/trainRecord.vue"),
|
||||
component: () =>
|
||||
import("@/views/projectFront/examSystem/trainRecord/trainRecord.vue"),
|
||||
},
|
||||
// 安全考试系统--教育培训
|
||||
{
|
||||
path: "/project/examSystem/educationalTraining",
|
||||
name: "安全考试系统_教育培训",
|
||||
component: () => import("@/views/projectFront/examSystem/educationalTraining/educationalTraining.vue"),
|
||||
component: () =>
|
||||
import(
|
||||
"@/views/projectFront/examSystem/educationalTraining/educationalTraining.vue"
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "/project/environmentalMonitor/alarmValueSet",
|
||||
@ -1150,7 +1177,9 @@ const routes2 = [
|
||||
path: "/project/quality/qualityAnalysis", //质量管理 -- 质量分析
|
||||
name: "质量管理_质量分析",
|
||||
component: (resolve) =>
|
||||
require(["@/views/projectFront/quality/qualityAnalysis.vue"], resolve),
|
||||
require([
|
||||
"@/views/projectFront/quality/qualityAnalysis.vue",
|
||||
], resolve),
|
||||
},
|
||||
{
|
||||
path: "/project/safeSame/recordsCenter", //安全管理 -- 数据中心
|
||||
@ -1195,7 +1224,9 @@ const routes2 = [
|
||||
path: "/project/safeSame/qualityProblem", //安全管理 -- 质量问题库配置
|
||||
name: "安全管理_质量问题库配置1",
|
||||
component: (resolve) =>
|
||||
require(["@/views/projectFront/safeSame/qualityProblem.vue"], resolve),
|
||||
require([
|
||||
"@/views/projectFront/safeSame/qualityProblem.vue",
|
||||
], resolve),
|
||||
},
|
||||
|
||||
//-------
|
||||
@ -1556,7 +1587,9 @@ const routes2 = [
|
||||
path: "/project/safetyEducation/securityRiskAnalysis",
|
||||
name: "安全风险分析",
|
||||
component: () =>
|
||||
import("@/views/projectFront/safetyEducation/securityRiskAnalysis.vue"),
|
||||
import(
|
||||
"@/views/projectFront/safetyEducation/securityRiskAnalysis.vue"
|
||||
),
|
||||
},
|
||||
// 特种作业
|
||||
{
|
||||
@ -1607,12 +1640,14 @@ const routes2 = [
|
||||
component: () =>
|
||||
import("@/views/projectFront/specialWork/disconnectionWork.vue"),
|
||||
},
|
||||
// 应急处置
|
||||
// 应急处置
|
||||
{
|
||||
path: "/project/emergencyDisposal/emergencyDisposal",
|
||||
name: "应急处置",
|
||||
component: () =>
|
||||
import("@/views/projectFront/emergencyDisposal/emergencyDisposal.vue"),
|
||||
import(
|
||||
"@/views/projectFront/emergencyDisposal/emergencyDisposal.vue"
|
||||
),
|
||||
},
|
||||
//卸料平台
|
||||
{
|
||||
@ -2574,6 +2609,15 @@ const routes2 = [
|
||||
], resolve),
|
||||
},
|
||||
|
||||
// 视频数据分析
|
||||
{
|
||||
path: "/project/videoDataAnalysis/monitorAnalysis",
|
||||
name: "videoDataAnalysis",
|
||||
component: (resolve) =>
|
||||
require([
|
||||
"@/views/projectFront/videoDataAnalysis/monitorAnalysis.vue",
|
||||
], resolve),
|
||||
},
|
||||
//隧道定位
|
||||
{
|
||||
path: "/project/tunnelPositioning/tunnelConfiguration",
|
||||
@ -3149,19 +3193,25 @@ const routes2 = [
|
||||
path: "/supplier/progress/divisionSubManage",
|
||||
name: "进度管理-分部分项工程管理",
|
||||
component: () =>
|
||||
import("@/views/supplierAdmin/progressManagement/divisionSubManage.vue"),
|
||||
import(
|
||||
"@/views/supplierAdmin/progressManagement/divisionSubManage.vue"
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "/supplier/progress/progressWarning",
|
||||
name: "进度管理-进度预警",
|
||||
component: () =>
|
||||
import("@/views/supplierAdmin/progressManagement/progressWarning.vue"),
|
||||
import(
|
||||
"@/views/supplierAdmin/progressManagement/progressWarning.vue"
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "/supplier/progress/progressApproval",
|
||||
name: "进度管理-进度审批",
|
||||
component: () =>
|
||||
import("@/views/supplierAdmin/progressManagement/progressApproval.vue"),
|
||||
import(
|
||||
"@/views/supplierAdmin/progressManagement/progressApproval.vue"
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "/supplier/car/carManage",
|
||||
@ -3174,7 +3224,7 @@ const routes2 = [
|
||||
name: "车辆管理-车种管理",
|
||||
component: () =>
|
||||
import("@/views/supplierAdmin/carManagement/carTypeManage.vue"),
|
||||
}
|
||||
},
|
||||
],
|
||||
},
|
||||
//扫二维码路由
|
||||
@ -3199,14 +3249,12 @@ const routes2 = [
|
||||
{
|
||||
path: "/entryCode",
|
||||
name: "准入二维码_验证",
|
||||
component: () =>
|
||||
import("@/views/projectFront/entryCode/myLogin.vue"),
|
||||
component: () => import("@/views/projectFront/entryCode/myLogin.vue"),
|
||||
},
|
||||
{
|
||||
path: "/entryCodeDetail",
|
||||
name: "准入二维码_详情",
|
||||
component: () =>
|
||||
import("@/views/projectFront/entryCode/myHome.vue"),
|
||||
component: () => import("@/views/projectFront/entryCode/myHome.vue"),
|
||||
},
|
||||
// 用户中心
|
||||
{
|
||||
@ -3397,7 +3445,8 @@ const routes2 = [
|
||||
{
|
||||
path: "/companyAdmin/basicSafeSetup/index",
|
||||
name: "basicSafeSetup",
|
||||
component: () => import("../views/companyAdmin/basicSafeSetup/index.vue"),
|
||||
component: () =>
|
||||
import("../views/companyAdmin/basicSafeSetup/index.vue"),
|
||||
children: [
|
||||
{
|
||||
path: "/companyAdmin/basicSafeSetup/checkItem",
|
||||
@ -3459,7 +3508,8 @@ const routes2 = [
|
||||
{
|
||||
path: "/companyAdmin/supplierManage",
|
||||
name: "supplierManage",
|
||||
component: () => import("../views/companyAdmin/supplierManage/index.vue"),
|
||||
component: () =>
|
||||
import("../views/companyAdmin/supplierManage/index.vue"),
|
||||
},
|
||||
{
|
||||
path: "/companyAdmin/studyManage/index",
|
||||
|
||||
@ -944,7 +944,7 @@ export default {
|
||||
overflow: hidden;
|
||||
// min-height: 660px;
|
||||
// padding: 15px 20px;
|
||||
height: calc(100% + 50px);
|
||||
// height: calc(100% + 50px);
|
||||
background-color: #f3f5fd;
|
||||
.system-left {
|
||||
float: left;
|
||||
|
||||
@ -105,6 +105,23 @@
|
||||
label="访客身份证号"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="reason"
|
||||
label="访问事由"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="local"
|
||||
label="访问区域"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="carNumber"
|
||||
label="车牌号"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="appointmentName"
|
||||
label="预约人姓名"
|
||||
|
||||
@ -30,7 +30,36 @@
|
||||
</div>
|
||||
<div class="videoBox" v-else>
|
||||
<vue-scroll>
|
||||
<el-collapse v-model="activeNames" style="padding: 0 20px">
|
||||
<el-tree
|
||||
:data="videoTreeData"
|
||||
node-key="id"
|
||||
ref="treeNode"
|
||||
label="name"
|
||||
:expand-on-click-node="false"
|
||||
:default-expand-all="false"
|
||||
@node-click="changeTreeVideo"
|
||||
>
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<img
|
||||
v-if="data.deviceType == 2 && data.videoId"
|
||||
src="@/assets/images/icon-video2-white.png"
|
||||
/>
|
||||
<img
|
||||
v-else-if="data.deviceType != 2 && data.videoId"
|
||||
src="@/assets/images/icon-video-white.png"
|
||||
/>
|
||||
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
:content="data.name"
|
||||
placement="top-start"
|
||||
>
|
||||
<span>{{ data.name }}</span>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</el-tree>
|
||||
<!-- <el-collapse v-model="activeNames" style="padding: 0 20px">
|
||||
<el-collapse-item
|
||||
:title="item.name"
|
||||
:name="index"
|
||||
@ -52,7 +81,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</el-collapse> -->
|
||||
</vue-scroll>
|
||||
</div>
|
||||
<div class="timeBox">
|
||||
@ -101,6 +130,7 @@
|
||||
import {
|
||||
selectProjectVideoListApi,
|
||||
selectUserVideoListApi,
|
||||
getVideoTreeGroupVideoApi,
|
||||
} from "@/assets/js/api/equipmentCenter/cameraList";
|
||||
import playBack from "./components/playBack/playBack.vue";
|
||||
import closePage from "@/components/closePage";
|
||||
@ -109,6 +139,7 @@ export default {
|
||||
components: { playBack, closePage },
|
||||
data() {
|
||||
return {
|
||||
videoTreeData: [],
|
||||
devList: [],
|
||||
selectList: [],
|
||||
dataType: 1,
|
||||
@ -134,10 +165,21 @@ export default {
|
||||
//设置录像回放时间的默认值
|
||||
this.selectDate.startTime = dateFormat(new Date(), "yyyy-MM-dd 00:00:00");
|
||||
this.selectDate.endTime = dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss");
|
||||
this.loadData();
|
||||
// this.loadData();
|
||||
this.getVideoTreeGroup();
|
||||
},
|
||||
|
||||
methods: {
|
||||
//获取视频分组列表
|
||||
getVideoTreeGroup() {
|
||||
getVideoTreeGroupVideoApi({
|
||||
projectSn: this.$store.state.projectSn,
|
||||
}).then((res) => {
|
||||
console.log("获取视频分组列表", res);
|
||||
this.videoTreeData = res.result.videoList;
|
||||
this.dataType = res.result.type;
|
||||
});
|
||||
},
|
||||
// 回放视频
|
||||
replayVideo(){
|
||||
this.isReplayNum = this.isReplayNum + 1;
|
||||
@ -149,6 +191,16 @@ export default {
|
||||
this.selectList = [item];
|
||||
console.log("右边的值", this.selectList);
|
||||
},
|
||||
// 切换视频分组
|
||||
changeTreeVideo(item) {
|
||||
console.log("点击了列表----");
|
||||
|
||||
console.log(item, "xxxxxxxxxx");
|
||||
if (item.videoId) {
|
||||
this.selectList = [item];
|
||||
}
|
||||
console.log("右边的值", this.selectList);
|
||||
},
|
||||
loadData() {
|
||||
selectProjectVideoListApi({
|
||||
projectSn: this.$store.state.projectSn,
|
||||
@ -274,4 +326,24 @@ export default {
|
||||
border: 1px solid #00fdff;
|
||||
color: white;
|
||||
}
|
||||
// 树形选择样式
|
||||
/deep/.el-tree-node:focus > .el-tree-node__content {
|
||||
background-color: rgba(168, 191, 230, 0.69);
|
||||
}
|
||||
.custom-tree-node {
|
||||
width: 80%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
span {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
width: 85%;
|
||||
color: white;
|
||||
}
|
||||
img {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
188
src/views/projectFront/videoDataAnalysis/monitorAnalysis.vue
Normal file
188
src/views/projectFront/videoDataAnalysis/monitorAnalysis.vue
Normal file
@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<div class="fullHeight">
|
||||
<div class="top-content">
|
||||
<div class="top-content-one">
|
||||
<span>监控点总数</span>
|
||||
<span>56</span>
|
||||
</div>
|
||||
<div class="top-content-two">
|
||||
<div class="chart" ref="ChartOne"></div>
|
||||
<!-- <div v-if="statsEnterpriseList.length == 0">
|
||||
<div class="placeholderBox">
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<!-- <div class="topLeft whiteBlock2">
|
||||
<div class="blockInner blockInnerup">
|
||||
<div class="box-between">
|
||||
<div>人员风险概览</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import echarts from "echarts4";
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.topChartOne();
|
||||
},
|
||||
methods: {
|
||||
// 顶部图1
|
||||
topChartOne() {
|
||||
let ageChart = echarts.init(this.$refs.ChartOne);
|
||||
let option = {
|
||||
color: ["#36CE90", "#FE5332", "#CCCCCC"],
|
||||
title: {
|
||||
//饼图中间的文字设置
|
||||
show: true,
|
||||
left: "24%",
|
||||
top: "42%",
|
||||
text: "十类问题",
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
},
|
||||
subtext: "8800",
|
||||
subtextStyle: {
|
||||
fontSize: 20,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
legend: {
|
||||
//图例设置
|
||||
right: 100,
|
||||
top: "middle",
|
||||
bottom: 20,
|
||||
orient: "vertical", //垂直
|
||||
itemGap: 15, //图例之间间距
|
||||
textStyle: {
|
||||
//数据右对齐样式
|
||||
color: "#687F96",
|
||||
rich: {
|
||||
name: {
|
||||
//legend左边的文字
|
||||
fontSize: 10,
|
||||
padding: [3, 10, 0, 0], //1.左边的文字添加右边距10(可自己调整)
|
||||
},
|
||||
value: {
|
||||
//legend右边的值
|
||||
fontSize: 12,
|
||||
color: "#182F41",
|
||||
backgroundColor: "transparent", //2.右边的值添加背景色
|
||||
align: "right", //3.右对齐
|
||||
padding: [5, -100, 0, 0], //4.设置右边距为-100(-70/-80..可自己调整)
|
||||
},
|
||||
},
|
||||
},
|
||||
formatter: function (name) {
|
||||
let data = option.series[0].data;
|
||||
let total = 0;
|
||||
let tarValue;
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
total += data[i].value;
|
||||
if (data[i].name == name) {
|
||||
tarValue = data[i].value;
|
||||
}
|
||||
}
|
||||
let v = tarValue;
|
||||
return [`{name|${name}}` + `{value|${v}}`].join("");
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "Access From",
|
||||
type: "pie",
|
||||
center: ["40%", "50%"], //饼图位置
|
||||
radius: ["55%", "80%"], //圆环大小
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: "center",
|
||||
},
|
||||
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false,
|
||||
fontSize: 40,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: "在线" },
|
||||
{ value: 735, name: "离线" },
|
||||
{ value: 580, name: "未检测" }
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
ageChart.setOption(option);
|
||||
window.addEventListener("resize", () => {
|
||||
ageChart.resize();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.fullHeight {
|
||||
.top-content {
|
||||
display: grid;
|
||||
grid-gap: 10px;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
> div {
|
||||
height: 200px;
|
||||
background-color: #fff;
|
||||
}
|
||||
&-one {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
span:first-child {
|
||||
color: #4d4d4d;
|
||||
font-size: 20px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
span:last-child {
|
||||
color: #4d4d4d;
|
||||
font-weight: 700;
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
&-two {
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.box-between {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.box-between::before {
|
||||
content: "";
|
||||
width: 3px;
|
||||
height: 14px;
|
||||
background: #268dff;
|
||||
position: absolute;
|
||||
left: -8px;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user