Compare commits
No commits in common. "5bc8cf9c2f85ce7d26e62d411b8899d78d553c57" and "4cc6812dc440a7a4ee1876a57333c4d070ff0ad8" have entirely different histories.
5bc8cf9c2f
...
4cc6812dc4
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 KiB |
10
src/App.vue
10
src/App.vue
|
|
@ -105,7 +105,6 @@ import {getData} from './api/index.js'
|
|||
},
|
||||
],
|
||||
menuAc:0, //菜单点击
|
||||
timer:null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -130,6 +129,7 @@ import {getData} from './api/index.js'
|
|||
that.fun();
|
||||
});
|
||||
};
|
||||
|
||||
},
|
||||
methods:{
|
||||
//菜单选中
|
||||
|
|
@ -204,7 +204,7 @@ import {getData} from './api/index.js'
|
|||
<style lang="less">
|
||||
/*将大屏设置为1920*1080,设置缩放的方向*/
|
||||
#app {
|
||||
font-family:'微软雅黑' ;
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
|
|
@ -219,7 +219,7 @@ import {getData} from './api/index.js'
|
|||
#app {
|
||||
// width: 6144px;
|
||||
// height: 1920px;
|
||||
background: rgba(1, 1, 7, 1);
|
||||
background: rgba(1, 1, 7, 0.7);
|
||||
// overflow: hidden;
|
||||
.header {
|
||||
height: 11%;
|
||||
|
|
@ -232,7 +232,7 @@ import {getData} from './api/index.js'
|
|||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
.left {
|
||||
width: 25%;
|
||||
width: 26%;
|
||||
height: 38%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -249,7 +249,7 @@ import {getData} from './api/index.js'
|
|||
letter-spacing: 0.5rem;
|
||||
}
|
||||
.right {
|
||||
width: 25%;
|
||||
width: 26%;
|
||||
height: 100%;
|
||||
|
||||
.quit {
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 405 B |
Binary file not shown.
|
Before Width: | Height: | Size: 515 B |
Binary file not shown.
|
Before Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 911 B |
Binary file not shown.
|
Before Width: | Height: | Size: 313 B |
Binary file not shown.
|
Before Width: | Height: | Size: 421 B |
Binary file not shown.
|
Before Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 829 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 517 B |
Binary file not shown.
|
Before Width: | Height: | Size: 426 B |
Binary file not shown.
|
Before Width: | Height: | Size: 438 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
|
|
@ -55,9 +55,7 @@
|
|||
<div id="caseEcharts"></div>
|
||||
</div>
|
||||
<div class="leftThree">
|
||||
<div class="caseTitle" style="width: 32%; padding-left: 6%">
|
||||
案件类型统计
|
||||
</div>
|
||||
<div class="caseTitle" style="width:32%;padding-left: 6%;">案件类型统计</div>
|
||||
<div class="caseType">
|
||||
<div id="caseTypeLeft"></div>
|
||||
<div id="caseTypeRight"></div>
|
||||
|
|
@ -65,69 +63,12 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="title" style="height: 5%">案件列表</div>
|
||||
<div class="title" style="height:5%">案件列表</div>
|
||||
<div class="caseList">
|
||||
<div class="selectList">
|
||||
<div
|
||||
class="selectChange"
|
||||
v-for="(item, index) in selectList"
|
||||
:key="index"
|
||||
>
|
||||
<el-select
|
||||
v-model="item.name"
|
||||
:popper-append-to-body="false"
|
||||
clearable
|
||||
:placeholder="item.name"
|
||||
style="margin-left: 5%"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in item.list"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="caseDetail">
|
||||
<div class="caseDetailList">
|
||||
<div
|
||||
class="detail"
|
||||
v-for="(item, index) in caseDetailList"
|
||||
:key="index"
|
||||
>
|
||||
<div class="rowDetail">
|
||||
<span>{{ item.id }} 案件案号:</span>
|
||||
<span>{{ item.caseCode }}</span>
|
||||
</div>
|
||||
<div style="padding-left: 5%" class="rowDetail">
|
||||
<span>案件名称:</span>
|
||||
<span style="width: 80%;display: flex;justify-content: flex-end;text-align: left;">{{ item.caseName }}</span>
|
||||
</div>
|
||||
<div style="padding-left: 5%" class="rowDetail">
|
||||
<span>开庭时间:</span>
|
||||
<span>{{ item.time }}</span>
|
||||
</div>
|
||||
<div style="padding-left: 5%" class="rowDetail">
|
||||
<span>开庭法庭:</span>
|
||||
<span>{{ item.court }}</span>
|
||||
</div>
|
||||
<div style="padding-left: 5%" class="rowDetail">
|
||||
<span>案件案由:</span>
|
||||
<span style="width: 80%;display: flex;justify-content: flex-end;text-align: left;">{{ item.brief }}</span>
|
||||
</div>
|
||||
<div style="padding-left: 5%" class="rowDetail">
|
||||
<span>当事人:</span>
|
||||
<span>{{ item.user }}</span>
|
||||
</div>
|
||||
<div style="padding-left: 5%" class="rowDetail">
|
||||
<span>书记员:</span>
|
||||
<span>{{ item.clerk }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="selectChange"></div>
|
||||
</div>
|
||||
<div class="caseDetail"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -157,166 +98,38 @@ export default {
|
|||
},
|
||||
], // 智慧法庭小房子
|
||||
houseList: ["blueHouse", "redHouse", "yellowHouse", "orangeHouse"],
|
||||
userValue: "", //人员选择
|
||||
userOptions: [
|
||||
userValue:'', //人员选择
|
||||
userOptions:[
|
||||
{
|
||||
label: "人员",
|
||||
value: "1",
|
||||
label:'人员',
|
||||
value:'1'
|
||||
},
|
||||
{
|
||||
label: "人员2",
|
||||
value: "2",
|
||||
},
|
||||
], //人员子项
|
||||
departmentValue: "", //部门选择
|
||||
departmentOptions: [
|
||||
label:'人员2',
|
||||
value:'2'
|
||||
}
|
||||
],//人员子项
|
||||
departmentValue:'', //部门选择
|
||||
departmentOptions:[
|
||||
{
|
||||
label: "部门",
|
||||
value: "1",
|
||||
label:'部门',
|
||||
value:'1'
|
||||
},
|
||||
{
|
||||
label: "部门2",
|
||||
value: "2",
|
||||
},
|
||||
label:'部门2',
|
||||
value:'2'
|
||||
}
|
||||
], //部门子项
|
||||
selectList: [
|
||||
selectList:[
|
||||
{
|
||||
name: "立案日期",
|
||||
list: [
|
||||
name:'',
|
||||
list:[
|
||||
{
|
||||
label: "立案日期",
|
||||
value: "1",
|
||||
},
|
||||
{
|
||||
label: "立案日期2",
|
||||
value: "2",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "法官",
|
||||
list: [
|
||||
{
|
||||
label: "法官",
|
||||
value: "1",
|
||||
},
|
||||
{
|
||||
label: "法官2",
|
||||
value: "2",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "案件类型",
|
||||
list: [
|
||||
{
|
||||
label: "案件类型",
|
||||
value: "1",
|
||||
},
|
||||
{
|
||||
label: "案件类型2",
|
||||
value: "2",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "收案日期",
|
||||
list: [
|
||||
{
|
||||
label: "收案日期",
|
||||
value: "1",
|
||||
},
|
||||
{
|
||||
label: "收案日期2",
|
||||
value: "2",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "经办法院代码",
|
||||
list: [
|
||||
{
|
||||
label: "经办法院代码",
|
||||
value: "1",
|
||||
},
|
||||
{
|
||||
label: "经办法院代码2",
|
||||
value: "2",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "结案日期",
|
||||
list: [
|
||||
{
|
||||
label: "结案日期",
|
||||
value: "1",
|
||||
},
|
||||
{
|
||||
label: "结案日期2",
|
||||
value: "2",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "结案方式",
|
||||
list: [
|
||||
{
|
||||
label: "结案方式",
|
||||
value: "1",
|
||||
},
|
||||
{
|
||||
label: "结案方式2",
|
||||
value: "2",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "案件状态代码",
|
||||
list: [
|
||||
{
|
||||
label: "案件状态代码",
|
||||
value: "1",
|
||||
},
|
||||
{
|
||||
label: "案件状态代码2",
|
||||
value: "2",
|
||||
},
|
||||
],
|
||||
},
|
||||
], //案件列表选择器
|
||||
caseDetailList: [
|
||||
{
|
||||
id: "1",
|
||||
caseCode: "(2022)苏0192民初14272号",
|
||||
caseName: "崔怀宁与高保加买卖合同纠纷",
|
||||
time: "2023-01-16 09:00--09:30",
|
||||
court: "新楼第十五法庭",
|
||||
brief: "买卖合同纠纷",
|
||||
user: "原告：崔怀宁;被告：高保加",
|
||||
clerk: "甫明",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
caseCode: "(2022)苏0192民初14272号",
|
||||
caseName: "崔怀宁与高保加买卖合同纠纷;崔怀宁与高保加买卖合同纠纷;崔怀宁与高保加买卖合同纠纷;",
|
||||
time: "2023-01-16 09:00--09:30",
|
||||
court: "新楼第十五法庭",
|
||||
brief: "买卖合同纠纷",
|
||||
user: "原告：崔怀宁;被告：高保加",
|
||||
clerk: "甫明",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
caseCode: "(2022)苏0192民初14272号",
|
||||
caseName: "崔怀宁与高保加买卖合同纠纷",
|
||||
time: "2023-01-16 09:00--09:30",
|
||||
court: "新楼第十五法庭",
|
||||
brief: "买卖合同纠纷",
|
||||
user: "原告：崔怀宁;被告：高保加",
|
||||
clerk: "甫明",
|
||||
},
|
||||
],
|
||||
label:''
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -339,7 +152,7 @@ export default {
|
|||
},
|
||||
legend: {
|
||||
icon: "rect",
|
||||
bottom: 0,
|
||||
bottom:0,
|
||||
itemWidth: 15,
|
||||
data: ["收案", "结案", "存案"],
|
||||
textStyle: {
|
||||
|
|
@ -413,7 +226,7 @@ export default {
|
|||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: "",
|
||||
type: '',
|
||||
dashOffset: 10,
|
||||
color: "rgb(108,108,109)",
|
||||
},
|
||||
|
|
@ -533,7 +346,7 @@ export default {
|
|||
};
|
||||
myChart.setOption(option);
|
||||
},
|
||||
caseTypeLeft() {
|
||||
caseTypeLeft(){
|
||||
var myChart = this.$echarts.init(document.getElementById("caseTypeLeft"));
|
||||
var data = [
|
||||
{ value: "25", name: "民事案件" },
|
||||
|
|
@ -541,12 +354,7 @@ export default {
|
|||
{ value: "25", name: "刑事案件" },
|
||||
{ value: "25", name: "其他案件" },
|
||||
];
|
||||
var color = [
|
||||
"rgb(185,8,25)",
|
||||
"rgb(160,87,6)",
|
||||
"rgb(16,134,165)",
|
||||
"rgb(178,178,178)",
|
||||
];
|
||||
var color = ["rgb(185,8,25)", "rgb(160,87,6)", "rgb(16,134,165)", "rgb(178,178,178)"];
|
||||
let option = {
|
||||
color: color,
|
||||
title: {
|
||||
|
|
@ -555,7 +363,7 @@ export default {
|
|||
textAlign: "center",
|
||||
text: "当月统计",
|
||||
textStyle: {
|
||||
fontSize: "0.6rem",
|
||||
fontSize: "0.8rem",
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
|
|
@ -583,7 +391,7 @@ export default {
|
|||
orient: "horizontal",
|
||||
icon: "rect",
|
||||
bottom: "0",
|
||||
x: "center",
|
||||
x:'center',
|
||||
itemWidth: 30,
|
||||
itemGap: 20,
|
||||
textStyle: {
|
||||
|
|
@ -644,22 +452,15 @@ export default {
|
|||
};
|
||||
myChart.setOption(option);
|
||||
},
|
||||
caseTypeRight() {
|
||||
var myChart = this.$echarts.init(
|
||||
document.getElementById("caseTypeRight")
|
||||
);
|
||||
caseTypeRight(){
|
||||
var myChart = this.$echarts.init(document.getElementById("caseTypeRight"));
|
||||
var data = [
|
||||
{ value: "25", name: "民事案件" },
|
||||
{ value: "25", name: "行政案件" },
|
||||
{ value: "25", name: "刑事案件" },
|
||||
{ value: "25", name: "其他案件" },
|
||||
];
|
||||
var color = [
|
||||
"rgb(185,8,25)",
|
||||
"rgb(160,87,6)",
|
||||
"rgb(16,134,165)",
|
||||
"rgb(178,178,178)",
|
||||
];
|
||||
var color = ["rgb(185,8,25)", "rgb(160,87,6)", "rgb(16,134,165)", "rgb(178,178,178)"];
|
||||
let option = {
|
||||
color: color,
|
||||
title: {
|
||||
|
|
@ -668,7 +469,7 @@ export default {
|
|||
textAlign: "center",
|
||||
text: "第一季度统计",
|
||||
textStyle: {
|
||||
fontSize: "0.6rem",
|
||||
fontSize: "0.8rem",
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
|
|
@ -696,7 +497,7 @@ export default {
|
|||
orient: "horizontal",
|
||||
icon: "rect",
|
||||
bottom: "0",
|
||||
x: "center",
|
||||
x:'center',
|
||||
itemWidth: 30,
|
||||
itemGap: 20,
|
||||
textStyle: {
|
||||
|
|
@ -836,7 +637,7 @@ export default {
|
|||
width: 100%;
|
||||
height: 35%;
|
||||
position: relative;
|
||||
.select {
|
||||
.select{
|
||||
position: absolute;
|
||||
right: 5%;
|
||||
width: 45%;
|
||||
|
|
@ -883,15 +684,15 @@ export default {
|
|||
.leftThree {
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
.caseType {
|
||||
.caseType{
|
||||
height: calc(100% - 8%);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
#caseTypeLeft {
|
||||
#caseTypeLeft{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
}
|
||||
#caseTypeRight {
|
||||
#caseTypeRight{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -907,90 +708,22 @@ export default {
|
|||
flex-wrap: wrap;
|
||||
background: url(../assets/images/leftKuang.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.caseList {
|
||||
.caseList{
|
||||
width: 100%;
|
||||
height: calc(100% - 5%);
|
||||
border: 1px solid red;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.selectList {
|
||||
.selectList{
|
||||
width: 100%;
|
||||
height: 20%;
|
||||
border: 1px solid rgb(0, 255, 170);
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.selectChange {
|
||||
width: 25%;
|
||||
height: 20%;
|
||||
margin-top: 3%;
|
||||
margin-left: 5%;
|
||||
/deep/ .el-select {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 15px;
|
||||
}
|
||||
/deep/ .el-input__inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
border: 1px solid rgb(1, 176, 202);
|
||||
border-radius: 15px;
|
||||
color: #fff;
|
||||
}
|
||||
/deep/ .el-select-dropdown {
|
||||
background: rgba(0,23,28,0.3);
|
||||
border: 1px solid rgb(1, 176, 202);
|
||||
border-radius: 5px;
|
||||
// left: -3px !important;
|
||||
}
|
||||
/deep/ .el-select-dropdown__item {
|
||||
color: turquoise;
|
||||
}
|
||||
/deep/ .el-select .el-input .el-select__caret {
|
||||
color: rgb(1, 176, 202);
|
||||
font-size: 0.3rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
/deep/ .el-input__suffix {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.caseDetail {
|
||||
.caseDetail{
|
||||
width: 100%;
|
||||
height: calc(100% - 20%);
|
||||
padding: 0 5%;
|
||||
box-sizing: border-box;
|
||||
.caseDetailList {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url(../assets/images/warnDottedLine.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
overflow: auto;
|
||||
.detail {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
border: 1px dashed #fff;
|
||||
color: #fff;
|
||||
font-size: 0.65rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: space-around;
|
||||
.rowDetail {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 3%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
border: 1px solid blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,497 +1,60 @@
|
|||
<template>
|
||||
<div class="energy">
|
||||
<div class="courtMain">
|
||||
<div class="left">
|
||||
<div class="leftOne">
|
||||
<div class="title">设备用能统计数据</div>
|
||||
<div class="equipment">
|
||||
<div
|
||||
class="equipmentEnergy"
|
||||
v-for="(item, index) in equipmentList"
|
||||
:key="index"
|
||||
>
|
||||
<div class="equipmentList">
|
||||
<span>{{ item.count }}</span>
|
||||
<span style="color: rgb(225, 177, 25); font-size: 0.4rem"
|
||||
>KWH</span
|
||||
>
|
||||
</div>
|
||||
<div class="equipmentName">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="title">智慧节能</div>
|
||||
<div class="courtHouse">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="leftTwo">
|
||||
<div class="title" style="height: 8%">设备预警信息列表</div>
|
||||
<div class="equipmentWarning">
|
||||
<div class="equipmentBtn">
|
||||
<div
|
||||
class="equipmentBtnList"
|
||||
v-for="(item, index) in equipmentBtnList"
|
||||
:key="index"
|
||||
:class="{ equipmentBtnAc: equipmentBtnAc == index }"
|
||||
@click="changeWarn(index)"
|
||||
>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="equipmentWarnList">
|
||||
<div
|
||||
class="warnList"
|
||||
v-for="(item, index) in warnList"
|
||||
:key="index"
|
||||
>
|
||||
<span>{{ item.id }}</span>
|
||||
<img :src="item.icon" />
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
width: 65%;
|
||||
"
|
||||
>
|
||||
<span
|
||||
style="
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
"
|
||||
>报警时间:<span style="margin-left: 5%">{{
|
||||
item.time
|
||||
}}</span></span
|
||||
>
|
||||
<span
|
||||
style="
|
||||
margin-top: 3%;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
"
|
||||
>报警原因:<span style="color: red; margin-left: 5%">{{
|
||||
item.case
|
||||
}}</span></span
|
||||
>
|
||||
<span
|
||||
style="
|
||||
margin-top: 3%;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
"
|
||||
>报警等级:<span style="color: red; margin-left: 5%">{{
|
||||
item.grade
|
||||
}}</span></span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="rightOne">
|
||||
<div class="title">能耗计量分析</div>
|
||||
<div id="calculateEcharts"></div>
|
||||
</div>
|
||||
<div class="rightTwo">
|
||||
<div class="title">太阳能光伏发电系统数据</div>
|
||||
<div class="sun">
|
||||
<div class="sunList" v-for="(item, index) in sunList" :key="index">
|
||||
<img :src="item.icon" />
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin-left: 5%;
|
||||
"
|
||||
>
|
||||
<span>{{ item.name }}</span>
|
||||
<span style="margin-top: 5%"
|
||||
>{{ item.count }} <span
|
||||
style="color: rgb(225, 177, 25)"
|
||||
>{{ item.unit }}</span
|
||||
></span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightThree">
|
||||
<div class="title" style="height: 16%">视频联动</div>
|
||||
<div class="video">
|
||||
<img
|
||||
src="../assets/images/camera.png"
|
||||
style="width: 100%; height: 100%"
|
||||
/>
|
||||
<div class="caseTitle">
|
||||
|
||||
</div>
|
||||
<div id="caseEcharts"></div>
|
||||
</div>
|
||||
<div class="leftThree"></div>
|
||||
</div>
|
||||
<div class="right"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "energySaving",
|
||||
name: "court",
|
||||
data() {
|
||||
return {
|
||||
equipmentList: [
|
||||
courtList: [
|
||||
{
|
||||
name: "热回收机组1",
|
||||
count: "28.4",
|
||||
name: "空闲中",
|
||||
count: "7",
|
||||
},
|
||||
{
|
||||
name: "热回收机组2",
|
||||
count: "28.4",
|
||||
name: "已开庭",
|
||||
count: "15",
|
||||
},
|
||||
{
|
||||
name: "热回收机组3",
|
||||
count: "28.4",
|
||||
name: "已预约",
|
||||
count: "17",
|
||||
},
|
||||
{
|
||||
name: "热回收机组4",
|
||||
count: "28.4",
|
||||
name: "法官办公室",
|
||||
count: "86",
|
||||
},
|
||||
{
|
||||
name: "热回收机组5",
|
||||
count: "28.4",
|
||||
},
|
||||
{
|
||||
name: "热回收机组6",
|
||||
count: "28.4",
|
||||
},
|
||||
{
|
||||
name: "热回收机组7",
|
||||
count: "28.4",
|
||||
},
|
||||
{
|
||||
name: "热回收机组8",
|
||||
count: "28.4",
|
||||
},
|
||||
{
|
||||
name: "热回收机组9",
|
||||
count: "28.4",
|
||||
},
|
||||
], //设备用能数据
|
||||
equipmentBtnList: [
|
||||
{
|
||||
name: "电梯系统",
|
||||
},
|
||||
{
|
||||
name: "光伏发电系统",
|
||||
},
|
||||
{
|
||||
name: "多联空调系统",
|
||||
},
|
||||
{
|
||||
name: "恒温恒湿空调",
|
||||
},
|
||||
{
|
||||
name: "热回收空调",
|
||||
},
|
||||
],
|
||||
equipmentBtnAc: "", //点击预警
|
||||
warnList: [
|
||||
{
|
||||
id: "1",
|
||||
icon: require("../assets/images/jieNengImg/warnRed.png"),
|
||||
time: "2023年03月12日 15:45:10",
|
||||
case: "设备故障",
|
||||
grade: "三级",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
icon: require("../assets/images/jieNengImg/warnBlue.png"),
|
||||
time: "2023年03月12日 15:45:10",
|
||||
case: "设备故障",
|
||||
grade: "三级",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
icon: require("../assets/images/jieNengImg/warnWhite.png"),
|
||||
time: "2023年03月12日 15:45:10",
|
||||
case: "设备故障",
|
||||
grade: "三级",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
icon: require("../assets/images/jieNengImg/warnRed.png"),
|
||||
time: "2023年03月12日 15:45:10",
|
||||
case: "设备故障",
|
||||
grade: "三级",
|
||||
},
|
||||
], //故障数组
|
||||
sunList: [
|
||||
{
|
||||
name: "今日发电量",
|
||||
icon: require("../assets/images/jieNengImg/energy.png"),
|
||||
count: "35.2",
|
||||
unit: "kWh",
|
||||
},
|
||||
{
|
||||
name: "总发电量",
|
||||
icon: require("../assets/images/jieNengImg/energy.png"),
|
||||
count: "35.2",
|
||||
unit: "kWh",
|
||||
},
|
||||
{
|
||||
name: "有功功率",
|
||||
icon: require("../assets/images/jieNengImg/power.png"),
|
||||
count: "35.2",
|
||||
unit: "kWh",
|
||||
},
|
||||
{
|
||||
name: "运行状态",
|
||||
icon: require("../assets/images/jieNengImg/runStatus.png"),
|
||||
count: "正常",
|
||||
unit: "",
|
||||
},
|
||||
{
|
||||
name: "运行时间",
|
||||
icon: require("../assets/images/jieNengImg/runTime.png"),
|
||||
count: "35.2",
|
||||
unit: "h",
|
||||
},
|
||||
{
|
||||
name: "运行状态",
|
||||
icon: require("../assets/images/jieNengImg/warning.png"),
|
||||
count: "无",
|
||||
unit: "",
|
||||
},
|
||||
],
|
||||
], // 智慧法庭小房子
|
||||
houseList: ["blueHouse", "redHouse", "yellowHouse","orangeHouse"],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.calculateEcharts();
|
||||
},
|
||||
methods: {
|
||||
//预警点击
|
||||
changeWarn(index) {
|
||||
this.equipmentBtnAc = index;
|
||||
},
|
||||
calculateEcharts() {
|
||||
let imgSrc = "/img/car.png";
|
||||
let chartData = [
|
||||
{
|
||||
value: 42,
|
||||
name: "空调",
|
||||
},
|
||||
{
|
||||
value: 24,
|
||||
name: "动力",
|
||||
},
|
||||
{
|
||||
value: 13,
|
||||
name: "插座",
|
||||
},
|
||||
{
|
||||
value: 48,
|
||||
name: "特种",
|
||||
},
|
||||
];
|
||||
let colorList = [
|
||||
"red",
|
||||
"rgb(255,122,0)",
|
||||
"rgb(0,213,243)",
|
||||
"rgb(219,241,243)",
|
||||
];
|
||||
let sum = chartData.reduce((per, cur) => per + cur.value, 0);
|
||||
let gap = (1 * sum) / 100;
|
||||
let pieData1 = [];
|
||||
let pieData2 = [];
|
||||
let gapData = {
|
||||
name: "",
|
||||
value: gap,
|
||||
itemStyle: {
|
||||
color: "transparent",
|
||||
},
|
||||
};
|
||||
for (let i = 0; i < chartData.length; i++) {
|
||||
// 第一圈数据
|
||||
pieData1.push({
|
||||
...chartData[i],
|
||||
itemStyle: {
|
||||
borderRadius: 0,
|
||||
},
|
||||
});
|
||||
pieData1.push(gapData);
|
||||
|
||||
// 第二圈数据
|
||||
pieData2.push({
|
||||
...chartData[i],
|
||||
itemStyle: {
|
||||
color: colorList[i],
|
||||
opacity: 0.1,
|
||||
},
|
||||
});
|
||||
pieData2.push(gapData);
|
||||
}
|
||||
var myChart = this.$echarts.init(
|
||||
document.getElementById("calculateEcharts")
|
||||
);
|
||||
|
||||
let option = {
|
||||
tooltip: {
|
||||
show: false,
|
||||
backgroundColor: "rgba(17,95,234,0.5)",
|
||||
textStyle: {
|
||||
color: "#F0F0F0",
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
right: "10%",
|
||||
top: "center",
|
||||
|
||||
icon: "rect",
|
||||
itemWidth: 15,
|
||||
itemHeight: 15,
|
||||
itemGap: 20,
|
||||
textStyle: {
|
||||
color: "auto",
|
||||
rich: {
|
||||
name: {
|
||||
padding: [0, 10, 0, 8],
|
||||
color: "auto",
|
||||
fontSize: "0.7rem",
|
||||
},
|
||||
percent: {
|
||||
padding: [0, 0, 0, 8],
|
||||
color: "auto",
|
||||
fontSize: "0.7rem",
|
||||
},
|
||||
},
|
||||
},
|
||||
formatter: (name) => {
|
||||
let item = chartData.find((i) => {
|
||||
return i.name == name;
|
||||
});
|
||||
let p = ((item.value / sum) * 100).toFixed(0);
|
||||
return "{name|" + name + "}" + "{percent|" + p + "}" + "%";
|
||||
},
|
||||
},
|
||||
graphic: {
|
||||
elements: [
|
||||
{
|
||||
type: "image",
|
||||
z: 3,
|
||||
style: {
|
||||
image: imgSrc,
|
||||
width: 30,
|
||||
height: 30,
|
||||
},
|
||||
top: "middle",
|
||||
left: "25%",
|
||||
scale: [1.5, 1.5],
|
||||
},
|
||||
],
|
||||
},
|
||||
grid: {
|
||||
top: 35,
|
||||
right: 30,
|
||||
bottom: 20,
|
||||
left: 30,
|
||||
},
|
||||
color: colorList,
|
||||
series: [
|
||||
{
|
||||
name: "消息来源",
|
||||
type: "pie",
|
||||
// roundCap: true,
|
||||
radius: ["70%", "80%"],
|
||||
center: ["30%", "50%"],
|
||||
// avoidLabelOverlap: true,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: pieData1,
|
||||
},
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["70%", "60%"],
|
||||
center: ["30%", "50%"],
|
||||
gap: 1.71,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
silent: true,
|
||||
data: pieData2,
|
||||
},
|
||||
{
|
||||
type: "pie",
|
||||
center: ["30%", "50%"],
|
||||
radius: [0, "45.6%"],
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
color: "rgba(5,37,95,0.3)",
|
||||
},
|
||||
silent: true,
|
||||
data: [
|
||||
{
|
||||
value: 100,
|
||||
name: "",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
type: "gauge",
|
||||
detail: false,
|
||||
splitNumber: 10, //刻度数量
|
||||
radius: "65%", //图表尺寸
|
||||
center: ["30%", "50%"],
|
||||
startAngle: 0, //开始刻度的角度
|
||||
endAngle: -356, //结束刻度的角度
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
width: 0,
|
||||
shadowBlur: 0,
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
width: 1,
|
||||
},
|
||||
length: 2,
|
||||
splitNumber: 3,
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
length: 5,
|
||||
lineStyle: {
|
||||
color: "#194482",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
methods: {},
|
||||
watch: {},
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.energy {
|
||||
@fontsize: 0.6rem;
|
||||
.courtMain {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
|
@ -499,7 +62,7 @@ export default {
|
|||
padding: 0 0.3% 0 0.3%;
|
||||
box-sizing: border-box;
|
||||
.left {
|
||||
width: 24.7%;
|
||||
width: 25.5%;
|
||||
height: 95%;
|
||||
padding: 0.5% 0.3% 1% 0.3%;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -509,158 +72,105 @@ export default {
|
|||
background-size: 100% 100%;
|
||||
.leftOne {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
.equipment {
|
||||
height: calc(100% - 14%);
|
||||
height: 25%;
|
||||
.courtHouse {
|
||||
height: calc(100% - 30%);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
overflow: auto;
|
||||
.equipmentEnergy {
|
||||
width: 25%;
|
||||
height: 50%;
|
||||
.equipmentList {
|
||||
width: 100%%;
|
||||
height: 80%;
|
||||
background: url("../assets/images/jieNengImg/energyBack.png")
|
||||
no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
font-size: 1.3rem;
|
||||
font-weight: 500;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
.courtData{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 85%;
|
||||
width: 12%;
|
||||
.blueHouse {
|
||||
background: url(../assets/images/blueHouse.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 10%;
|
||||
}
|
||||
.equipmentName {
|
||||
height: calc(100% - 80%);
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
.redHouse {
|
||||
background: url(../assets/images/redHouse.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 10%;
|
||||
}
|
||||
.yellowHouse {
|
||||
background: url(../assets/images/yellowHouse.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 10%;
|
||||
}
|
||||
.orangeHouse {
|
||||
background: url(../assets/images/orangeHouse.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 10%;
|
||||
}
|
||||
}
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.leftTwo {
|
||||
width: 100%;
|
||||
height: calc(100% - 35%);
|
||||
.equipmentWarning {
|
||||
height: calc(100% - 8%);
|
||||
height: 35%;
|
||||
position: relative;
|
||||
#caseEcharts{
|
||||
width: 100%;
|
||||
.equipmentBtn {
|
||||
height: calc(100% - 16%);
|
||||
border: 1px solid blue;
|
||||
}
|
||||
}
|
||||
.leftThree {
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
.equipmentBtnList {
|
||||
width: 26.4%;
|
||||
height: 29%;
|
||||
background: url("../assets/images/jieNengImg/eqBtn.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 6%;
|
||||
}
|
||||
.equipmentBtnAc {
|
||||
width: 26.4%;
|
||||
height: 29%;
|
||||
background: url("../assets/images/jieNengImg/eqBtnAc.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: rgb(225, 177, 25);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 6%;
|
||||
}
|
||||
}
|
||||
.equipmentWarnList {
|
||||
width: 100%;
|
||||
height: calc(100% - 30%);
|
||||
overflow: auto;
|
||||
.warnList {
|
||||
height: 32%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding-right: 20%;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
height: 40%;
|
||||
border: 1px solid white;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 24.7%;
|
||||
width: 25.5%;
|
||||
height: 95%;
|
||||
padding: 0.5% 0.3% 0.5% 0.3%;
|
||||
padding: 0.5% 0.3% 1% 0.3%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background: url(../assets/images/leftKuang.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.rightOne {
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
#calculateEcharts {
|
||||
width: 100%;
|
||||
height: calc(100% - 14%);
|
||||
}
|
||||
}
|
||||
.rightTwo {
|
||||
width: 100%;
|
||||
height: 37%;
|
||||
.sun {
|
||||
width: 100%;
|
||||
height: calc(100% - 14%);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
.sunList {
|
||||
width: 40%;
|
||||
height: 25%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.rightThree {
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.video {
|
||||
height: calc(100% - 23%);
|
||||
width: 98%;
|
||||
border: 3px solid rgb(1, 176, 202);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 14%;
|
||||
height: 30%;
|
||||
background: url("../assets/images/title.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.7rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 12%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.caseTitle{
|
||||
width: 23%;
|
||||
height: 10%;
|
||||
background: url("../assets/images/faTingImg/anjianTitle.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
font-size: 0.8rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 5%;
|
||||
box-sizing: border-box;
|
||||
margin-top: 2%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -555,8 +555,8 @@ export default {
|
|||
);
|
||||
var data = [
|
||||
{ value: "25", name: "报警" },
|
||||
{ value: "25", name: "已完成" },
|
||||
{ value: "25", name: "派单" },
|
||||
{ value: "25", name: "已完成" },
|
||||
{ value: "25", name: "未完成" },
|
||||
];
|
||||
var color = ["#146de0", "#27ef5e", "#ffc140", "#d151d8"];
|
||||
|
|
@ -568,7 +568,7 @@ export default {
|
|||
textAlign: "center",
|
||||
text: "当月次数统计",
|
||||
textStyle: {
|
||||
fontSize: "0.60rem",
|
||||
fontSize: "0.65rem",
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
|
|
@ -664,8 +664,8 @@ export default {
|
|||
);
|
||||
var data = [
|
||||
{ value: "25", name: "报警" },
|
||||
{ value: "25", name: "已完成" },
|
||||
{ value: "25", name: "派单" },
|
||||
{ value: "25", name: "已完成" },
|
||||
{ value: "25", name: "未完成" },
|
||||
];
|
||||
var color = ["#146de0", "#27ef5e", "#ffc140", "#d151d8"];
|
||||
|
|
|
|||
|
|
@ -1,359 +1,52 @@
|
|||
<template>
|
||||
<div class="operationMaintenance">
|
||||
<div class="courtMain">
|
||||
<div class="left">
|
||||
<div class="title">工单管理</div>
|
||||
<div class="workOrder">
|
||||
<div class="todayCount">
|
||||
<div
|
||||
style="width: 100%; display: flex; justify-content: space-evenly"
|
||||
>
|
||||
<span>今日报警: 10</span>
|
||||
<span
|
||||
>同比昨日:<img
|
||||
src="../assets/images/gongDan/greenJian.png"
|
||||
/> 0.5</span
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
style="width: 100%; display: flex; justify-content: space-evenly"
|
||||
>
|
||||
<span>今日工单: 10</span>
|
||||
<span
|
||||
>同比昨日:<img
|
||||
src="../assets/images/gongDan/redJian.png"
|
||||
/> 0.5</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="workCount">
|
||||
<div style="font-size: 0.8rem">本月工单数</div>
|
||||
<div id="workOrderEcharts"></div>
|
||||
</div>
|
||||
<div class="workList">
|
||||
<div class="workContent" v-for="(item, index) in workList" :key="index">
|
||||
<span>{{ item.name }}</span>
|
||||
<span style="color: rgb(9, 196, 217); font-size: 1rem">{{
|
||||
item.count
|
||||
}}</span>
|
||||
<span>今日总响应超时工单数：{{ item.toDayCount }}</span>
|
||||
<span>今日总响应超时时长：{{ item.toDayTime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="title">工单管理</div>
|
||||
<div class="selectList">
|
||||
<div
|
||||
class="selectChange"
|
||||
v-for="(item, index) in selectList"
|
||||
:key="index"
|
||||
>
|
||||
<el-select
|
||||
v-model="item.name"
|
||||
:popper-append-to-body="false"
|
||||
clearable
|
||||
:placeholder="item.name"
|
||||
style="margin-left: 5%"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in item.list"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="workOrderList">
|
||||
<div class="workContent">
|
||||
<div
|
||||
class="workContentList"
|
||||
v-for="(item, index) in distributeLeafletsList"
|
||||
:key="index"
|
||||
>
|
||||
<div class="distributeLeaflets">
|
||||
<span>{{ item.id }} 派单时间:</span>
|
||||
<span class="distributeLeafletsValue">{{ item.time }}</span>
|
||||
</div>
|
||||
<div class="distributeLeaflets" style="margin-left: 4%">
|
||||
<span>派单人员:</span>
|
||||
<span class="distributeLeafletsValue">{{ item.user }}</span>
|
||||
</div>
|
||||
<div class="distributeLeaflets" style="margin-left: 4%">
|
||||
<span>工单类型:</span>
|
||||
<span class="distributeLeafletsValue">{{ item.type }}</span>
|
||||
</div>
|
||||
<div class="distributeLeaflets" style="margin-left: 4%">
|
||||
<span>接单时间:</span>
|
||||
<span class="distributeLeafletsValue">{{ item.receiveTime }}</span>
|
||||
</div>
|
||||
<div class="distributeLeaflets" style="margin-left: 4%">
|
||||
<span>订单状态:</span>
|
||||
<span class="distributeLeafletsValue">{{ item.status }}</span>
|
||||
<div class="leftOne">
|
||||
<div class="title">智慧运维</div>
|
||||
<div class="courtHouse">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="leftTwo">
|
||||
<div class="caseTitle">
|
||||
|
||||
</div>
|
||||
<div id="caseEcharts"></div>
|
||||
</div>
|
||||
<div class="leftThree"></div>
|
||||
</div>
|
||||
<div class="right"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "operationMaintenance",
|
||||
name: "court",
|
||||
data() {
|
||||
return {
|
||||
workList: [
|
||||
courtList: [
|
||||
{
|
||||
name: "超时响应工单数",
|
||||
count: "0",
|
||||
toDayCount: "2",
|
||||
toDayTime: "0",
|
||||
name: "空闲中",
|
||||
count: "7",
|
||||
},
|
||||
{
|
||||
name: "未处理超时工单数",
|
||||
count: "0",
|
||||
toDayCount: "2",
|
||||
toDayTime: "0",
|
||||
name: "已开庭",
|
||||
count: "15",
|
||||
},
|
||||
{
|
||||
name: "未完成工单数",
|
||||
count: "0",
|
||||
toDayCount: "2",
|
||||
toDayTime: "0",
|
||||
name: "已预约",
|
||||
count: "17",
|
||||
},
|
||||
{
|
||||
name: "未分配工单数",
|
||||
count: "0",
|
||||
toDayCount: "2",
|
||||
toDayTime: "0",
|
||||
name: "法官办公室",
|
||||
count: "86",
|
||||
},
|
||||
],
|
||||
selectList: [
|
||||
{
|
||||
name: "日期",
|
||||
list: [
|
||||
{
|
||||
label: "日期",
|
||||
value: "1",
|
||||
},
|
||||
{
|
||||
label: "日期2",
|
||||
value: "2",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "派单人员",
|
||||
list: [
|
||||
{
|
||||
label: "派单人员",
|
||||
value: "1",
|
||||
},
|
||||
{
|
||||
label: "派单人员2",
|
||||
value: "2",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "工单状态",
|
||||
list: [
|
||||
{
|
||||
label: "工单状态",
|
||||
value: "1",
|
||||
},
|
||||
{
|
||||
label: "工单状态2",
|
||||
value: "2",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "工单类型",
|
||||
list: [
|
||||
{
|
||||
label: "工单类型",
|
||||
value: "1",
|
||||
},
|
||||
{
|
||||
label: "工单类型2",
|
||||
value: "2",
|
||||
},
|
||||
],
|
||||
},
|
||||
], //案件列表选择器
|
||||
distributeLeafletsList: [
|
||||
{
|
||||
id: "1",
|
||||
time: "2023.1.13",
|
||||
user: "方强",
|
||||
type: "设备维修",
|
||||
receiveTime: "2023.1.13",
|
||||
status: "已完成",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
time: "2023.1.13",
|
||||
user: "方强",
|
||||
type: "设备维修",
|
||||
receiveTime: "2023.1.13",
|
||||
status: "已完成",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
time: "2023.1.13",
|
||||
user: "方强",
|
||||
type: "设备维修",
|
||||
receiveTime: "2023.1.13",
|
||||
status: "已完成",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
time: "2023.1.13",
|
||||
user: "方强",
|
||||
type: "设备维修",
|
||||
receiveTime: "2023.1.13",
|
||||
status: "已完成",
|
||||
},
|
||||
],
|
||||
], // 智慧法庭小房子
|
||||
houseList: ["blueHouse", "redHouse", "yellowHouse","orangeHouse"],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.workOrderEcharts();
|
||||
},
|
||||
methods: {
|
||||
workOrderEcharts() {
|
||||
var myChart = this.$echarts.init(
|
||||
document.getElementById("workOrderEcharts")
|
||||
);
|
||||
let option = {
|
||||
grid: {
|
||||
top: "18%",
|
||||
// // left: '15%',
|
||||
// // right: '5%',
|
||||
bottom: "10%",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
showContent: false,
|
||||
axisPointer: {
|
||||
type: "line",
|
||||
lineStyle: {
|
||||
type: "solid",
|
||||
color: "rgba(255, 255, 255, .5)",
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
color: "#fff",
|
||||
fontSize: "0.8rem",
|
||||
fontWeight: 600,
|
||||
backgroundColor: "rgba(0, 0, 0, 0)",
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
name: "天数",
|
||||
//x轴坐标点
|
||||
axisTick: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
//x轴坐标线样式
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: "0.5rem",
|
||||
},
|
||||
//x轴线
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
type: [5, 10],
|
||||
dashOffset: 10,
|
||||
color: "#1282C8",
|
||||
},
|
||||
},
|
||||
boundaryGap: false,
|
||||
data: [1, 2, 3, 4, 5, 6],
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
name: "工单",
|
||||
//x轴坐标点
|
||||
axisTick: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
//x轴坐标线样式
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: "0.5rem",
|
||||
},
|
||||
//x轴线
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
// type: [5, 10],
|
||||
dashOffset: 10,
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: "line",
|
||||
symbol: "circle",
|
||||
showSymbol: false,
|
||||
yAxisIndex: 0,
|
||||
lineStyle: {
|
||||
width: 4,
|
||||
color: "rgb(0,170,194)",
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#FFFFFF",
|
||||
fontSize: "0.8rem",
|
||||
},
|
||||
position: "top",
|
||||
formatter: function (p) {
|
||||
return p.value > 0 ? p.value : "";
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
color: "#FFFFFF",
|
||||
borderColor: "#FFFFFF",
|
||||
borderWidth: 6,
|
||||
},
|
||||
data: ["40", "60", "50", "50", "80", "20"],
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
methods: {},
|
||||
watch: {},
|
||||
components: {},
|
||||
};
|
||||
|
|
@ -361,7 +54,7 @@ export default {
|
|||
|
||||
<style lang="less" scoped>
|
||||
@fontsize: 0.6rem;
|
||||
.operationMaintenance {
|
||||
.courtMain {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
|
@ -369,163 +62,115 @@ export default {
|
|||
padding: 0 0.3% 0 0.3%;
|
||||
box-sizing: border-box;
|
||||
.left {
|
||||
width: 24.7%;
|
||||
height: 95%;
|
||||
padding: 0.5% 0.3% 0.5% 0.3%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background: url(../assets/images/leftKuang.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.workOrder {
|
||||
width: 100%;
|
||||
height: 15%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.todayCount {
|
||||
background: url(../assets/images/gongDan/gongDanBack.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 62%;
|
||||
height: 82%;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-content: space-around;
|
||||
}
|
||||
}
|
||||
.workCount {
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
color: #fff;
|
||||
#workOrderEcharts {
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
}
|
||||
}
|
||||
.workList {
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
.workContent {
|
||||
width: 45%;
|
||||
height: 35%;
|
||||
border: 1px solid rgb(9, 196, 217);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 24.7%;
|
||||
width: 25.5%;
|
||||
height: 95%;
|
||||
padding: 0.5% 0.3% 1% 0.3%;
|
||||
box-sizing: border-box;
|
||||
// display: flex;
|
||||
// flex-wrap: wrap;
|
||||
background: url(../assets/images/leftKuang.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.selectList {
|
||||
width: 100%;
|
||||
height: 15%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
.selectChange {
|
||||
width: 23%;
|
||||
height: 20%;
|
||||
margin-left: 11%;
|
||||
/deep/ .el-select {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 15px;
|
||||
}
|
||||
/deep/ .el-input__inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
border: 1px solid rgb(1, 176, 202);
|
||||
border-radius: 15px;
|
||||
color: #fff;
|
||||
}
|
||||
/deep/ .el-select-dropdown {
|
||||
background: rgba(0, 23, 28, 0.3);
|
||||
border: 1px solid rgb(1, 176, 202);
|
||||
border-radius: 5px;
|
||||
// left: -3px !important;
|
||||
}
|
||||
/deep/ .el-select-dropdown__item {
|
||||
color: turquoise;
|
||||
}
|
||||
/deep/ .el-select .el-input .el-select__caret {
|
||||
color: rgb(1, 176, 202);
|
||||
font-size: 0.3rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
/deep/ .el-input__suffix {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.workOrderList {
|
||||
width: 100%;
|
||||
height: calc(100% - 20%);
|
||||
padding: 0 7% 0 3%;
|
||||
box-sizing: border-box;
|
||||
.workContent {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url(../assets/images/warnDottedLine.png) no-repeat;
|
||||
background: url(../assets/images/leftKuang.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
overflow: auto;
|
||||
.workContentList {
|
||||
.leftOne {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
border: 1px dashed #fff;
|
||||
color: #fff;
|
||||
height: 25%;
|
||||
.courtHouse {
|
||||
height: calc(100% - 30%);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
.courtData{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
padding: 0 3%;
|
||||
box-sizing: border-box;
|
||||
.distributeLeaflets {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 0.7rem;
|
||||
.distributeLeafletsValue {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
background: url("../assets/images/gongDan/eqBtnAc.png") no-repeat;
|
||||
align-items: center;
|
||||
height: 85%;
|
||||
width: 12%;
|
||||
.blueHouse {
|
||||
background: url(../assets/images/blueHouse.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 10%;
|
||||
}
|
||||
.redHouse {
|
||||
background: url(../assets/images/redHouse.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 10%;
|
||||
}
|
||||
.yellowHouse {
|
||||
background: url(../assets/images/yellowHouse.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 10%;
|
||||
}
|
||||
.orangeHouse {
|
||||
background: url(../assets/images/orangeHouse.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 10%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
.leftTwo {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
position: relative;
|
||||
#caseEcharts{
|
||||
width: 100%;
|
||||
height: calc(100% - 16%);
|
||||
border: 1px solid blue;
|
||||
}
|
||||
}
|
||||
.leftThree {
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
border: 1px solid white;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 25.5%;
|
||||
height: 95%;
|
||||
padding: 0.5% 0.3% 1% 0.3%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background: url(../assets/images/leftKuang.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 5%;
|
||||
height: 30%;
|
||||
background: url("../assets/images/title.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.7rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 12%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.caseTitle{
|
||||
width: 23%;
|
||||
height: 10%;
|
||||
background: url("../assets/images/faTingImg/anjianTitle.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
font-size: 0.8rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 5%;
|
||||
box-sizing: border-box;
|
||||
margin-top: 2%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,273 +1,60 @@
|
|||
<template>
|
||||
<div class="securityMain">
|
||||
<div class="courtMain">
|
||||
<div class="left">
|
||||
<div class="leftOne">
|
||||
<div class="title">安防统计数据</div>
|
||||
<div class="security">
|
||||
<div class="securitySupervision">
|
||||
安防监管
|
||||
</div>
|
||||
<div class="securityCount">
|
||||
<div class="securityList" v-for="(item,index) in securityList" :key="index">
|
||||
<span>{{item.name}}</span>
|
||||
<span>{{item.count}}</span>
|
||||
</div>
|
||||
<!-- <img src="../"/> -->
|
||||
</div>
|
||||
<div class="title">智慧安防</div>
|
||||
<div class="courtHouse">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="leftTwo">
|
||||
<div class="title" style="height:8%">预警视频监控联动</div>
|
||||
<div class="warnVideo">
|
||||
<!-- <div class="warnCamera">
|
||||
<img src="../assets/images/camera.png" style="width:100%;height:100%"/>
|
||||
</div> -->
|
||||
<div class="warnCameraList">
|
||||
<div style="width:45%;height:30%" v-for="(item,index) in warnCameraList" :key="index" @click="videoChange(index)">
|
||||
<img :src="item.icon" style="width:100%;height:100%"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="rightOne">
|
||||
<div class="title" style="height:10%">火灾报警管理</div>
|
||||
<div class="fire">
|
||||
<div
|
||||
class="warnList"
|
||||
v-for="(item, index) in fireWarnList"
|
||||
:key="index"
|
||||
>
|
||||
<img :src="item.icon" />
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
width: 65%;
|
||||
"
|
||||
>
|
||||
<span
|
||||
style="
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
"
|
||||
>报警时间:<span style="margin-left: 5%">{{
|
||||
item.time
|
||||
}}</span></span
|
||||
>
|
||||
<span
|
||||
style="
|
||||
margin-top: 3%;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
"
|
||||
>设备定位:<span style="color: rgb(0,255,255); margin-left: 5%">{{
|
||||
item.position
|
||||
}}</span></span
|
||||
>
|
||||
<span
|
||||
style="
|
||||
margin-top: 3%;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
"
|
||||
>报警状态:<span style="color: rgb(0,255,255); margin-left: 5%">{{
|
||||
item.status
|
||||
}}</span></span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightTwo">
|
||||
<div class="title" style="height:10%">安防报警管理</div>
|
||||
<div class="police">
|
||||
<div
|
||||
class="warnList"
|
||||
v-for="(item, index) in policeList"
|
||||
:key="index"
|
||||
>
|
||||
<span>{{ item.id }}</span>
|
||||
<img :src="item.icon" />
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
width: 65%;
|
||||
"
|
||||
>
|
||||
<span
|
||||
style="
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
"
|
||||
>报警时间:<span style="margin-left: 5%">{{
|
||||
item.time
|
||||
}}</span></span
|
||||
>
|
||||
<span
|
||||
style="
|
||||
margin-top: 3%;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
"
|
||||
>设备内容:<span style="color: rgb(0,255,255); margin-left: 5%">{{
|
||||
item.content
|
||||
}}</span></span
|
||||
>
|
||||
<span
|
||||
style="
|
||||
margin-top: 3%;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
"
|
||||
>报警状态:<span style="color: rgb(0,255,255); margin-left: 5%">{{
|
||||
item.status
|
||||
}}</span></span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="caseTitle">
|
||||
|
||||
</div>
|
||||
<div id="caseEcharts"></div>
|
||||
</div>
|
||||
<div class="leftThree"></div>
|
||||
</div>
|
||||
<div class="right"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "security",
|
||||
name: "court",
|
||||
data() {
|
||||
return {
|
||||
securityList: [
|
||||
courtList: [
|
||||
{
|
||||
name: "",
|
||||
count: "",
|
||||
},
|
||||
{
|
||||
name: "摄像头总数",
|
||||
count: "609",
|
||||
},
|
||||
{
|
||||
name: "在线数量",
|
||||
count: "602",
|
||||
},
|
||||
{
|
||||
name: "离线数量",
|
||||
name: "空闲中",
|
||||
count: "7",
|
||||
},
|
||||
{
|
||||
name: "报警数",
|
||||
count: "0",
|
||||
name: "已开庭",
|
||||
count: "15",
|
||||
},
|
||||
{
|
||||
name: "昨日报警数",
|
||||
count: "0",
|
||||
},
|
||||
],
|
||||
warnCameraList:[
|
||||
{
|
||||
icon:require("../assets/images/anFang/videoAc.png")
|
||||
name: "已预约",
|
||||
count: "17",
|
||||
},
|
||||
{
|
||||
icon:require("../assets/images/anFang/video.png")
|
||||
name: "法官办公室",
|
||||
count: "86",
|
||||
},
|
||||
{
|
||||
icon:require("../assets/images/anFang/video.png")
|
||||
},
|
||||
{
|
||||
icon:require("../assets/images/anFang/video.png")
|
||||
},
|
||||
{
|
||||
icon:require("../assets/images/anFang/video.png")
|
||||
},
|
||||
{
|
||||
icon:require("../assets/images/anFang/video.png")
|
||||
},
|
||||
],
|
||||
fireWarnList: [
|
||||
{
|
||||
icon: require("../assets/images/jieNengImg/warnBlue.png"),
|
||||
time: "2023年03月12日 15:45:10",
|
||||
position: "烟感",
|
||||
status: "已解除",
|
||||
},
|
||||
{
|
||||
icon: require("../assets/images/jieNengImg/warnBlue.png"),
|
||||
time: "2023年03月12日 15:45:10",
|
||||
position: "烟感",
|
||||
status: "已解除",
|
||||
},
|
||||
{
|
||||
icon: require("../assets/images/jieNengImg/warnWhite.png"),
|
||||
time: "2023年03月12日 15:45:10",
|
||||
position: "烟感",
|
||||
status: "已解除",
|
||||
},
|
||||
{
|
||||
icon: require("../assets/images/jieNengImg/warnBlue.png"),
|
||||
time: "2023年03月12日 15:45:10",
|
||||
position: "烟感",
|
||||
status: "已解除",
|
||||
},
|
||||
], //故障数组
|
||||
policeList:[
|
||||
{
|
||||
id:'1',
|
||||
icon: require("../assets/images/anFang/exclamatory.png"),
|
||||
time: "2023年03月12日 15:45:10",
|
||||
content: "306门禁故障",
|
||||
status: "已解除",
|
||||
},
|
||||
{
|
||||
id:'2',
|
||||
icon: require("../assets/images/anFang/exclamatory.png"),
|
||||
time: "2023年03月12日 15:45:10",
|
||||
content: "201门禁故障",
|
||||
status: "已解除",
|
||||
},
|
||||
{
|
||||
id:'3',
|
||||
icon: require("../assets/images/anFang/exclamatory.png"),
|
||||
time: "2023年03月12日 15:45:10",
|
||||
content: "206门禁故障",
|
||||
status: "已解除",
|
||||
},
|
||||
{
|
||||
id:'4',
|
||||
icon: require("../assets/images/anFang/exclamatory.png"),
|
||||
time: "2023年03月12日 15:45:10",
|
||||
content: "106门禁故障",
|
||||
status: "已解除",
|
||||
},
|
||||
]
|
||||
], // 智慧法庭小房子
|
||||
houseList: ["blueHouse", "redHouse", "yellowHouse","orangeHouse"],
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
videoChange(index){
|
||||
this.warnCameraList.forEach((item,i) => {
|
||||
item.icon = require("../assets/images/anFang/video.png")
|
||||
});
|
||||
this.warnCameraList[index].icon = require("../assets/images/anFang/videoAc.png")
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
watch: {},
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@fontsize: 0.7rem;
|
||||
.securityMain {
|
||||
@fontsize: 0.6rem;
|
||||
.courtMain {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
|
@ -275,7 +62,7 @@ export default {
|
|||
padding: 0 0.3% 0 0.3%;
|
||||
box-sizing: border-box;
|
||||
.left {
|
||||
width: 24.7%;
|
||||
width: 25.5%;
|
||||
height: 95%;
|
||||
padding: 0.5% 0.3% 1% 0.3%;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -285,77 +72,73 @@ export default {
|
|||
background-size: 100% 100%;
|
||||
.leftOne {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-end;
|
||||
align-content: space-between;
|
||||
.security{
|
||||
height: calc(100% - 25%);
|
||||
height: 25%;
|
||||
.courtHouse {
|
||||
height: calc(100% - 30%);
|
||||
width: 100%;
|
||||
padding-right: 5%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
.securitySupervision{
|
||||
width: 50%;
|
||||
height: 12%;
|
||||
background: url("../assets/images/anFang/securityBack.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
font-size: @fontsize;
|
||||
}
|
||||
.securityCount{
|
||||
width: 100%;
|
||||
height: calc(100% - 12%);
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
.securityList{
|
||||
width: 30%;
|
||||
height: 20%;
|
||||
color: #fff;
|
||||
margin-left: 2%;
|
||||
.courtData{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 85%;
|
||||
width: 12%;
|
||||
.blueHouse {
|
||||
background: url(../assets/images/blueHouse.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column
|
||||
margin-top: 10%;
|
||||
}
|
||||
.redHouse {
|
||||
background: url(../assets/images/redHouse.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 10%;
|
||||
}
|
||||
.yellowHouse {
|
||||
background: url(../assets/images/yellowHouse.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 10%;
|
||||
}
|
||||
.orangeHouse {
|
||||
background: url(../assets/images/orangeHouse.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 10%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.leftTwo {
|
||||
width: 100%;
|
||||
height: 65%;
|
||||
.warnVideo{
|
||||
height: calc(100% - 8%);
|
||||
height: 35%;
|
||||
position: relative;
|
||||
#caseEcharts{
|
||||
width: 100%;
|
||||
padding:0 3%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: center;
|
||||
// .warnCamera{
|
||||
// width: 100%;
|
||||
// height: 40%;
|
||||
// border: 3px solid rgb(1, 176, 202);
|
||||
// }
|
||||
.warnCameraList{
|
||||
height: 90%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
height: calc(100% - 16%);
|
||||
border: 1px solid blue;
|
||||
}
|
||||
}
|
||||
.leftThree {
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
border: 1px solid white;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 24.7%;
|
||||
width: 25.5%;
|
||||
height: 95%;
|
||||
padding: 0.5% 0.3% 1% 0.3%;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -363,61 +146,15 @@ export default {
|
|||
flex-wrap: wrap;
|
||||
background: url(../assets/images/leftKuang.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.rightOne{
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
.fire{
|
||||
height: calc(100% - 10%);
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
.warnList {
|
||||
height: 32%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding-right: 20%;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
::-webkit-scrollbar{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.rightTwo{
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
.police{
|
||||
height: calc(100% - 10%);
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
.warnList {
|
||||
height: 32%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding-right: 20%;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
::-webkit-scrollbar{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 13%;
|
||||
height: 30%;
|
||||
background: url("../assets/images/title.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.7rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 12%;
|
||||
|
|
|
|||
Loading…
Reference in New Issue