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 |
12
src/App.vue
12
src/App.vue
|
|
@ -105,7 +105,6 @@ import {getData} from './api/index.js'
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
menuAc:0, //菜单点击
|
menuAc:0, //菜单点击
|
||||||
timer:null,
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
|
@ -127,9 +126,10 @@ import {getData} from './api/index.js'
|
||||||
document.documentElement.clientWidth ||
|
document.documentElement.clientWidth ||
|
||||||
document.body.clientWidth),
|
document.body.clientWidth),
|
||||||
(that.screenWidth = window.screenWidth);
|
(that.screenWidth = window.screenWidth);
|
||||||
that.fun();
|
that.fun();
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
},
|
},
|
||||||
methods:{
|
methods:{
|
||||||
//菜单选中
|
//菜单选中
|
||||||
|
|
@ -204,7 +204,7 @@ import {getData} from './api/index.js'
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
/*将大屏设置为1920*1080,设置缩放的方向*/
|
/*将大屏设置为1920*1080,设置缩放的方向*/
|
||||||
#app {
|
#app {
|
||||||
font-family:'微软雅黑' ;
|
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
@ -219,7 +219,7 @@ import {getData} from './api/index.js'
|
||||||
#app {
|
#app {
|
||||||
// width: 6144px;
|
// width: 6144px;
|
||||||
// height: 1920px;
|
// height: 1920px;
|
||||||
background: rgba(1, 1, 7, 1);
|
background: rgba(1, 1, 7, 0.7);
|
||||||
// overflow: hidden;
|
// overflow: hidden;
|
||||||
.header {
|
.header {
|
||||||
height: 11%;
|
height: 11%;
|
||||||
|
|
@ -232,7 +232,7 @@ import {getData} from './api/index.js'
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
.left {
|
.left {
|
||||||
width: 25%;
|
width: 26%;
|
||||||
height: 38%;
|
height: 38%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -249,7 +249,7 @@ import {getData} from './api/index.js'
|
||||||
letter-spacing: 0.5rem;
|
letter-spacing: 0.5rem;
|
||||||
}
|
}
|
||||||
.right {
|
.right {
|
||||||
width: 25%;
|
width: 26%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
.quit {
|
.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 |
|
|
@ -22,7 +22,7 @@
|
||||||
<div class="leftTwo">
|
<div class="leftTwo">
|
||||||
<div class="caseTitle">案件统计</div>
|
<div class="caseTitle">案件统计</div>
|
||||||
<div class="select">
|
<div class="select">
|
||||||
<el-select
|
<el-select
|
||||||
v-model="userValue"
|
v-model="userValue"
|
||||||
:popper-append-to-body="false"
|
:popper-append-to-body="false"
|
||||||
clearable
|
clearable
|
||||||
|
|
@ -55,80 +55,21 @@
|
||||||
<div id="caseEcharts"></div>
|
<div id="caseEcharts"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="leftThree">
|
<div class="leftThree">
|
||||||
<div class="caseTitle" style="width: 32%; padding-left: 6%">
|
<div class="caseTitle" style="width:32%;padding-left: 6%;">案件类型统计</div>
|
||||||
案件类型统计
|
<div class="caseType">
|
||||||
</div>
|
<div id="caseTypeLeft"></div>
|
||||||
<div class="caseType">
|
<div id="caseTypeRight"></div>
|
||||||
<div id="caseTypeLeft"></div>
|
</div>
|
||||||
<div id="caseTypeRight"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<div class="title" style="height: 5%">案件列表</div>
|
<div class="title" style="height:5%">案件列表</div>
|
||||||
<div class="caseList">
|
<div class="caseList">
|
||||||
<div class="selectList">
|
<div class="selectList">
|
||||||
<div
|
<div class="selectChange"></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>
|
||||||
</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>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -157,166 +98,38 @@ export default {
|
||||||
},
|
},
|
||||||
], // 智慧法庭小房子
|
], // 智慧法庭小房子
|
||||||
houseList: ["blueHouse", "redHouse", "yellowHouse", "orangeHouse"],
|
houseList: ["blueHouse", "redHouse", "yellowHouse", "orangeHouse"],
|
||||||
userValue: "", //人员选择
|
userValue:'', //人员选择
|
||||||
userOptions: [
|
userOptions:[
|
||||||
{
|
{
|
||||||
label: "人员",
|
label:'人员',
|
||||||
value: "1",
|
value:'1'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "人员2",
|
label:'人员2',
|
||||||
value: "2",
|
value:'2'
|
||||||
},
|
}
|
||||||
], //人员子项
|
],//人员子项
|
||||||
departmentValue: "", //部门选择
|
departmentValue:'', //部门选择
|
||||||
departmentOptions: [
|
departmentOptions:[
|
||||||
{
|
{
|
||||||
label: "部门",
|
label:'部门',
|
||||||
value: "1",
|
value:'1'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "部门2",
|
label:'部门2',
|
||||||
value: "2",
|
value:'2'
|
||||||
},
|
}
|
||||||
], //部门子项
|
], //部门子项
|
||||||
selectList: [
|
selectList:[
|
||||||
{
|
{
|
||||||
name: "立案日期",
|
name:'',
|
||||||
list: [
|
list:[
|
||||||
{
|
{
|
||||||
label: "立案日期",
|
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: "甫明",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
@ -339,7 +152,7 @@ export default {
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
icon: "rect",
|
icon: "rect",
|
||||||
bottom: 0,
|
bottom:0,
|
||||||
itemWidth: 15,
|
itemWidth: 15,
|
||||||
data: ["收案", "结案", "存案"],
|
data: ["收案", "结案", "存案"],
|
||||||
textStyle: {
|
textStyle: {
|
||||||
|
|
@ -413,7 +226,7 @@ export default {
|
||||||
splitLine: {
|
splitLine: {
|
||||||
show: true,
|
show: true,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
type: "",
|
type: '',
|
||||||
dashOffset: 10,
|
dashOffset: 10,
|
||||||
color: "rgb(108,108,109)",
|
color: "rgb(108,108,109)",
|
||||||
},
|
},
|
||||||
|
|
@ -484,7 +297,7 @@ export default {
|
||||||
global: false, // 缺省为 false
|
global: false, // 缺省为 false
|
||||||
}),
|
}),
|
||||||
},
|
},
|
||||||
label: {
|
label: {
|
||||||
normal: {
|
normal: {
|
||||||
show: true,
|
show: true,
|
||||||
fontSize: "0.4rem",
|
fontSize: "0.4rem",
|
||||||
|
|
@ -520,7 +333,7 @@ export default {
|
||||||
global: false, // 缺省为 false
|
global: false, // 缺省为 false
|
||||||
}),
|
}),
|
||||||
},
|
},
|
||||||
label: {
|
label: {
|
||||||
normal: {
|
normal: {
|
||||||
show: true,
|
show: true,
|
||||||
fontSize: "0.4rem",
|
fontSize: "0.4rem",
|
||||||
|
|
@ -533,20 +346,15 @@ export default {
|
||||||
};
|
};
|
||||||
myChart.setOption(option);
|
myChart.setOption(option);
|
||||||
},
|
},
|
||||||
caseTypeLeft() {
|
caseTypeLeft(){
|
||||||
var myChart = this.$echarts.init(document.getElementById("caseTypeLeft"));
|
var myChart = this.$echarts.init(document.getElementById("caseTypeLeft"));
|
||||||
var data = [
|
var data = [
|
||||||
{ value: "25", name: "民事案件" },
|
{ value: "25", name: "民事案件" },
|
||||||
{ value: "25", name: "行政案件" },
|
{ value: "25", name: "行政案件" },
|
||||||
{ value: "25", name: "刑事案件" },
|
{ value: "25", name: "刑事案件" },
|
||||||
{ value: "25", name: "其他案件" },
|
{ value: "25", name: "其他案件" },
|
||||||
];
|
];
|
||||||
var color = [
|
var color = ["rgb(185,8,25)", "rgb(160,87,6)", "rgb(16,134,165)", "rgb(178,178,178)"];
|
||||||
"rgb(185,8,25)",
|
|
||||||
"rgb(160,87,6)",
|
|
||||||
"rgb(16,134,165)",
|
|
||||||
"rgb(178,178,178)",
|
|
||||||
];
|
|
||||||
let option = {
|
let option = {
|
||||||
color: color,
|
color: color,
|
||||||
title: {
|
title: {
|
||||||
|
|
@ -555,7 +363,7 @@ export default {
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
text: "当月统计",
|
text: "当月统计",
|
||||||
textStyle: {
|
textStyle: {
|
||||||
fontSize: "0.6rem",
|
fontSize: "0.8rem",
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
@ -583,7 +391,7 @@ export default {
|
||||||
orient: "horizontal",
|
orient: "horizontal",
|
||||||
icon: "rect",
|
icon: "rect",
|
||||||
bottom: "0",
|
bottom: "0",
|
||||||
x: "center",
|
x:'center',
|
||||||
itemWidth: 30,
|
itemWidth: 30,
|
||||||
itemGap: 20,
|
itemGap: 20,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
|
|
@ -644,22 +452,15 @@ export default {
|
||||||
};
|
};
|
||||||
myChart.setOption(option);
|
myChart.setOption(option);
|
||||||
},
|
},
|
||||||
caseTypeRight() {
|
caseTypeRight(){
|
||||||
var myChart = this.$echarts.init(
|
var myChart = this.$echarts.init(document.getElementById("caseTypeRight"));
|
||||||
document.getElementById("caseTypeRight")
|
var data = [
|
||||||
);
|
|
||||||
var data = [
|
|
||||||
{ value: "25", name: "民事案件" },
|
{ value: "25", name: "民事案件" },
|
||||||
{ value: "25", name: "行政案件" },
|
{ value: "25", name: "行政案件" },
|
||||||
{ value: "25", name: "刑事案件" },
|
{ value: "25", name: "刑事案件" },
|
||||||
{ value: "25", name: "其他案件" },
|
{ value: "25", name: "其他案件" },
|
||||||
];
|
];
|
||||||
var color = [
|
var color = ["rgb(185,8,25)", "rgb(160,87,6)", "rgb(16,134,165)", "rgb(178,178,178)"];
|
||||||
"rgb(185,8,25)",
|
|
||||||
"rgb(160,87,6)",
|
|
||||||
"rgb(16,134,165)",
|
|
||||||
"rgb(178,178,178)",
|
|
||||||
];
|
|
||||||
let option = {
|
let option = {
|
||||||
color: color,
|
color: color,
|
||||||
title: {
|
title: {
|
||||||
|
|
@ -668,7 +469,7 @@ export default {
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
text: "第一季度统计",
|
text: "第一季度统计",
|
||||||
textStyle: {
|
textStyle: {
|
||||||
fontSize: "0.6rem",
|
fontSize: "0.8rem",
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
@ -696,7 +497,7 @@ export default {
|
||||||
orient: "horizontal",
|
orient: "horizontal",
|
||||||
icon: "rect",
|
icon: "rect",
|
||||||
bottom: "0",
|
bottom: "0",
|
||||||
x: "center",
|
x:'center',
|
||||||
itemWidth: 30,
|
itemWidth: 30,
|
||||||
itemGap: 20,
|
itemGap: 20,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
|
|
@ -836,14 +637,14 @@ export default {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 35%;
|
height: 35%;
|
||||||
position: relative;
|
position: relative;
|
||||||
.select {
|
.select{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 5%;
|
right: 5%;
|
||||||
width: 45%;
|
width: 45%;
|
||||||
height: 10%;
|
height: 10%;
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
/deep/ .el-select {
|
/deep/ .el-select {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
|
|
@ -883,18 +684,18 @@ export default {
|
||||||
.leftThree {
|
.leftThree {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 40%;
|
height: 40%;
|
||||||
.caseType {
|
.caseType{
|
||||||
height: calc(100% - 8%);
|
height: calc(100% - 8%);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
#caseTypeLeft {
|
#caseTypeLeft{
|
||||||
width: 50%;
|
width: 50%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
#caseTypeRight {
|
#caseTypeRight{
|
||||||
width: 50%;
|
width: 50%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -907,91 +708,23 @@ export default {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
background: url(../assets/images/leftKuang.png) no-repeat;
|
background: url(../assets/images/leftKuang.png) no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
.caseList {
|
.caseList{
|
||||||
width: 100%;
|
|
||||||
height: calc(100% - 5%);
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
.selectList {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 20%;
|
height: calc(100% - 5%);
|
||||||
position: relative;
|
border: 1px solid red;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
.selectChange {
|
.selectList{
|
||||||
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 {
|
|
||||||
width: 100%;
|
|
||||||
height: calc(100% - 20%);
|
|
||||||
padding: 0 5%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
.caseDetailList {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 20%;
|
||||||
background: url(../assets/images/warnDottedLine.png) no-repeat;
|
border: 1px solid rgb(0, 255, 170);
|
||||||
background-size: 100% 100%;
|
position: relative;
|
||||||
display: flex;
|
}
|
||||||
flex-wrap: wrap;
|
.caseDetail{
|
||||||
overflow: auto;
|
width: 100%;
|
||||||
.detail {
|
height: calc(100% - 20%);
|
||||||
width: 100%;
|
border: 1px solid blue;
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,497 +1,60 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="energy">
|
<div class="courtMain">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<div class="leftOne">
|
<div class="leftOne">
|
||||||
<div class="title">设备用能统计数据</div>
|
<div class="title">智慧节能</div>
|
||||||
<div class="equipment">
|
<div class="courtHouse">
|
||||||
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="leftTwo">
|
<div class="leftTwo">
|
||||||
<div class="title" style="height: 8%">设备预警信息列表</div>
|
<div class="caseTitle">
|
||||||
<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>
|
||||||
<div class="equipmentWarnList">
|
<div id="caseEcharts"></div>
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="leftThree"></div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="right"></div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: "energySaving",
|
name: "court",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
equipmentList: [
|
courtList: [
|
||||||
{
|
{
|
||||||
name: "热回收机组1",
|
name: "空闲中",
|
||||||
count: "28.4",
|
count: "7",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "热回收机组2",
|
name: "已开庭",
|
||||||
count: "28.4",
|
count: "15",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "热回收机组3",
|
name: "已预约",
|
||||||
count: "28.4",
|
count: "17",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "热回收机组4",
|
name: "法官办公室",
|
||||||
count: "28.4",
|
count: "86",
|
||||||
},
|
},
|
||||||
{
|
], // 智慧法庭小房子
|
||||||
name: "热回收机组5",
|
houseList: ["blueHouse", "redHouse", "yellowHouse","orangeHouse"],
|
||||||
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: "",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {},
|
||||||
this.calculateEcharts();
|
methods: {},
|
||||||
},
|
watch: {},
|
||||||
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);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
components: {},
|
components: {},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.energy {
|
@fontsize: 0.6rem;
|
||||||
|
.courtMain {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -499,7 +62,7 @@ export default {
|
||||||
padding: 0 0.3% 0 0.3%;
|
padding: 0 0.3% 0 0.3%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
.left {
|
.left {
|
||||||
width: 24.7%;
|
width: 25.5%;
|
||||||
height: 95%;
|
height: 95%;
|
||||||
padding: 0.5% 0.3% 1% 0.3%;
|
padding: 0.5% 0.3% 1% 0.3%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
@ -509,158 +72,105 @@ export default {
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
.leftOne {
|
.leftOne {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 35%;
|
height: 25%;
|
||||||
.equipment {
|
.courtHouse {
|
||||||
height: calc(100% - 14%);
|
height: calc(100% - 30%);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: nowrap;
|
||||||
overflow: auto;
|
justify-content: space-around;
|
||||||
.equipmentEnergy {
|
align-items: center;
|
||||||
width: 25%;
|
.courtData{
|
||||||
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;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
align-items: center;
|
||||||
}
|
height: 85%;
|
||||||
.equipmentName {
|
width: 12%;
|
||||||
height: calc(100% - 80%);
|
.blueHouse {
|
||||||
width: 100%;
|
background: url(../assets/images/blueHouse.png) no-repeat;
|
||||||
color: #fff;
|
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 {
|
.leftTwo {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(100% - 35%);
|
height: 35%;
|
||||||
.equipmentWarning {
|
position: relative;
|
||||||
height: calc(100% - 8%);
|
#caseEcharts{
|
||||||
width: 100%;
|
|
||||||
.equipmentBtn {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 30%;
|
height: calc(100% - 16%);
|
||||||
display: flex;
|
border: 1px solid blue;
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.leftThree {
|
||||||
|
width: 100%;
|
||||||
|
height: 40%;
|
||||||
|
border: 1px solid white;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.right {
|
.right {
|
||||||
width: 24.7%;
|
width: 25.5%;
|
||||||
height: 95%;
|
height: 95%;
|
||||||
padding: 0.5% 0.3% 0.5% 0.3%;
|
padding: 0.5% 0.3% 1% 0.3%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
background: url(../assets/images/leftKuang.png) no-repeat;
|
background: url(../assets/images/leftKuang.png) no-repeat;
|
||||||
background-size: 100% 100%;
|
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 {
|
.title {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 14%;
|
height: 30%;
|
||||||
background: url("../assets/images/title.png") no-repeat;
|
background: url("../assets/images/title.png") no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 0.8rem;
|
font-size: 0.7rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding-left: 12%;
|
padding-left: 12%;
|
||||||
box-sizing: border-box;
|
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>
|
</style>
|
||||||
|
|
@ -555,8 +555,8 @@ export default {
|
||||||
);
|
);
|
||||||
var data = [
|
var data = [
|
||||||
{ value: "25", name: "报警" },
|
{ value: "25", name: "报警" },
|
||||||
{ value: "25", name: "已完成" },
|
|
||||||
{ value: "25", name: "派单" },
|
{ value: "25", name: "派单" },
|
||||||
|
{ value: "25", name: "已完成" },
|
||||||
{ value: "25", name: "未完成" },
|
{ value: "25", name: "未完成" },
|
||||||
];
|
];
|
||||||
var color = ["#146de0", "#27ef5e", "#ffc140", "#d151d8"];
|
var color = ["#146de0", "#27ef5e", "#ffc140", "#d151d8"];
|
||||||
|
|
@ -568,7 +568,7 @@ export default {
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
text: "当月次数统计",
|
text: "当月次数统计",
|
||||||
textStyle: {
|
textStyle: {
|
||||||
fontSize: "0.60rem",
|
fontSize: "0.65rem",
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
@ -664,8 +664,8 @@ export default {
|
||||||
);
|
);
|
||||||
var data = [
|
var data = [
|
||||||
{ value: "25", name: "报警" },
|
{ value: "25", name: "报警" },
|
||||||
{ value: "25", name: "已完成" },
|
|
||||||
{ value: "25", name: "派单" },
|
{ value: "25", name: "派单" },
|
||||||
|
{ value: "25", name: "已完成" },
|
||||||
{ value: "25", name: "未完成" },
|
{ value: "25", name: "未完成" },
|
||||||
];
|
];
|
||||||
var color = ["#146de0", "#27ef5e", "#ffc140", "#d151d8"];
|
var color = ["#146de0", "#27ef5e", "#ffc140", "#d151d8"];
|
||||||
|
|
|
||||||
|
|
@ -1,359 +1,52 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="operationMaintenance">
|
<div class="courtMain">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<div class="title">工单管理</div>
|
<div class="leftOne">
|
||||||
<div class="workOrder">
|
<div class="title">智慧运维</div>
|
||||||
<div class="todayCount">
|
<div class="courtHouse">
|
||||||
<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>
|
</div>
|
||||||
<div class="workCount">
|
<div class="leftTwo">
|
||||||
<div style="font-size: 0.8rem">本月工单数</div>
|
<div class="caseTitle">
|
||||||
<div id="workOrderEcharts"></div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="workList">
|
<div id="caseEcharts"></div>
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="leftThree"></div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="right"></div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: "operationMaintenance",
|
name: "court",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
workList: [
|
courtList: [
|
||||||
{
|
{
|
||||||
name: "超时响应工单数",
|
name: "空闲中",
|
||||||
count: "0",
|
count: "7",
|
||||||
toDayCount: "2",
|
|
||||||
toDayTime: "0",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "未处理超时工单数",
|
name: "已开庭",
|
||||||
count: "0",
|
count: "15",
|
||||||
toDayCount: "2",
|
|
||||||
toDayTime: "0",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "未完成工单数",
|
name: "已预约",
|
||||||
count: "0",
|
count: "17",
|
||||||
toDayCount: "2",
|
|
||||||
toDayTime: "0",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "未分配工单数",
|
name: "法官办公室",
|
||||||
count: "0",
|
count: "86",
|
||||||
toDayCount: "2",
|
|
||||||
toDayTime: "0",
|
|
||||||
},
|
},
|
||||||
],
|
], // 智慧法庭小房子
|
||||||
selectList: [
|
houseList: ["blueHouse", "redHouse", "yellowHouse","orangeHouse"],
|
||||||
{
|
|
||||||
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: "已完成",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {},
|
||||||
this.workOrderEcharts();
|
methods: {},
|
||||||
},
|
|
||||||
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);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
watch: {},
|
watch: {},
|
||||||
components: {},
|
components: {},
|
||||||
};
|
};
|
||||||
|
|
@ -361,7 +54,7 @@ export default {
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
@fontsize: 0.6rem;
|
@fontsize: 0.6rem;
|
||||||
.operationMaintenance {
|
.courtMain {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -369,163 +62,115 @@ export default {
|
||||||
padding: 0 0.3% 0 0.3%;
|
padding: 0 0.3% 0 0.3%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
.left {
|
.left {
|
||||||
width: 24.7%;
|
width: 25.5%;
|
||||||
height: 95%;
|
height: 95%;
|
||||||
padding: 0.5% 0.3% 0.5% 0.3%;
|
padding: 0.5% 0.3% 1% 0.3%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
background: url(../assets/images/leftKuang.png) no-repeat;
|
background: url(../assets/images/leftKuang.png) no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
.workOrder {
|
.leftOne {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 15%;
|
height: 25%;
|
||||||
display: flex;
|
.courtHouse {
|
||||||
justify-content: center;
|
height: calc(100% - 30%);
|
||||||
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%;
|
width: 100%;
|
||||||
height: 90%;
|
display: flex;
|
||||||
|
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%;
|
||||||
|
}
|
||||||
|
.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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.workList {
|
.leftTwo {
|
||||||
|
width: 100%;
|
||||||
|
height: 35%;
|
||||||
|
position: relative;
|
||||||
|
#caseEcharts{
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 16%);
|
||||||
|
border: 1px solid blue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.leftThree {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 40%;
|
height: 40%;
|
||||||
display: flex;
|
border: 1px solid white;
|
||||||
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 {
|
.right {
|
||||||
width: 24.7%;
|
width: 25.5%;
|
||||||
height: 95%;
|
height: 95%;
|
||||||
padding: 0.5% 0.3% 1% 0.3%;
|
padding: 0.5% 0.3% 1% 0.3%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
// display: flex;
|
display: flex;
|
||||||
// flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
background: url(../assets/images/leftKuang.png) no-repeat;
|
background: url(../assets/images/leftKuang.png) no-repeat;
|
||||||
background-size: 100% 100%;
|
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-size: 100% 100%;
|
|
||||||
overflow: auto;
|
|
||||||
.workContentList {
|
|
||||||
width: 100%;
|
|
||||||
height: 35%;
|
|
||||||
border: 1px dashed #fff;
|
|
||||||
color: #fff;
|
|
||||||
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;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.title {
|
.title {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 5%;
|
height: 30%;
|
||||||
background: url("../assets/images/title.png") no-repeat;
|
background: url("../assets/images/title.png") no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 0.8rem;
|
font-size: 0.7rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding-left: 12%;
|
padding-left: 12%;
|
||||||
box-sizing: border-box;
|
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>
|
</style>
|
||||||
|
|
@ -1,273 +1,60 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="securityMain">
|
<div class="courtMain">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<div class="leftOne">
|
<div class="leftOne">
|
||||||
<div class="title">安防统计数据</div>
|
<div class="title">智慧安防</div>
|
||||||
<div class="security">
|
<div class="courtHouse">
|
||||||
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="leftTwo">
|
<div class="leftTwo">
|
||||||
<div class="title" style="height:8%">预警视频监控联动</div>
|
<div class="caseTitle">
|
||||||
<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 id="caseEcharts"></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>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="leftThree"></div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="right"></div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: "security",
|
name: "court",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
securityList: [
|
courtList: [
|
||||||
{
|
|
||||||
name: "",
|
|
||||||
count: "",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
name: "摄像头总数",
|
name: "空闲中",
|
||||||
count: "609",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "在线数量",
|
|
||||||
count: "602",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "离线数量",
|
|
||||||
count: "7",
|
count: "7",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "报警数",
|
name: "已开庭",
|
||||||
count: "0",
|
count: "15",
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "昨日报警数",
|
|
||||||
count: "0",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
warnCameraList:[
|
|
||||||
{
|
|
||||||
icon:require("../assets/images/anFang/videoAc.png")
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon:require("../assets/images/anFang/video.png")
|
name: "已预约",
|
||||||
|
count: "17",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon:require("../assets/images/anFang/video.png")
|
name: "法官办公室",
|
||||||
|
count: "86",
|
||||||
},
|
},
|
||||||
{
|
], // 智慧法庭小房子
|
||||||
icon:require("../assets/images/anFang/video.png")
|
houseList: ["blueHouse", "redHouse", "yellowHouse","orangeHouse"],
|
||||||
},
|
|
||||||
{
|
|
||||||
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: "已解除",
|
|
||||||
},
|
|
||||||
]
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {},
|
mounted() {},
|
||||||
methods: {
|
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")
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {},
|
watch: {},
|
||||||
components: {},
|
components: {},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
@fontsize: 0.7rem;
|
@fontsize: 0.6rem;
|
||||||
.securityMain {
|
.courtMain {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -275,7 +62,7 @@ export default {
|
||||||
padding: 0 0.3% 0 0.3%;
|
padding: 0 0.3% 0 0.3%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
.left {
|
.left {
|
||||||
width: 24.7%;
|
width: 25.5%;
|
||||||
height: 95%;
|
height: 95%;
|
||||||
padding: 0.5% 0.3% 1% 0.3%;
|
padding: 0.5% 0.3% 1% 0.3%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
@ -285,77 +72,73 @@ export default {
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
.leftOne {
|
.leftOne {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 35%;
|
height: 25%;
|
||||||
display: flex;
|
.courtHouse {
|
||||||
flex-wrap: wrap;
|
height: calc(100% - 30%);
|
||||||
align-items: flex-end;
|
|
||||||
align-content: space-between;
|
|
||||||
.security{
|
|
||||||
height: calc(100% - 25%);
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-right: 5%;
|
display: flex;
|
||||||
box-sizing: border-box;
|
flex-wrap: nowrap;
|
||||||
display: flex;
|
justify-content: space-around;
|
||||||
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;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
.securityList{
|
.courtData{
|
||||||
width: 30%;
|
display: flex;
|
||||||
height: 20%;
|
flex-direction: column;
|
||||||
color: #fff;
|
align-items: center;
|
||||||
margin-left: 2%;
|
height: 85%;
|
||||||
display: flex;
|
width: 12%;
|
||||||
align-items: center;
|
.blueHouse {
|
||||||
justify-content: center;
|
background: url(../assets/images/blueHouse.png) no-repeat;
|
||||||
flex-direction: column
|
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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.leftTwo {
|
.leftTwo {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 65%;
|
height: 35%;
|
||||||
.warnVideo{
|
position: relative;
|
||||||
height: calc(100% - 8%);
|
#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%;
|
width: 100%;
|
||||||
display: flex;
|
height: calc(100% - 16%);
|
||||||
flex-wrap: wrap;
|
border: 1px solid blue;
|
||||||
align-items: center;
|
|
||||||
justify-content: space-around;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.leftThree {
|
||||||
|
width: 100%;
|
||||||
|
height: 40%;
|
||||||
|
border: 1px solid white;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.right {
|
.right {
|
||||||
width: 24.7%;
|
width: 25.5%;
|
||||||
height: 95%;
|
height: 95%;
|
||||||
padding: 0.5% 0.3% 1% 0.3%;
|
padding: 0.5% 0.3% 1% 0.3%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
@ -363,61 +146,15 @@ export default {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
background: url(../assets/images/leftKuang.png) no-repeat;
|
background: url(../assets/images/leftKuang.png) no-repeat;
|
||||||
background-size: 100% 100%;
|
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 {
|
.title {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 13%;
|
height: 30%;
|
||||||
background: url("../assets/images/title.png") no-repeat;
|
background: url("../assets/images/title.png") no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 0.8rem;
|
font-size: 0.7rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding-left: 12%;
|
padding-left: 12%;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue