代码提交

This commit is contained in:
lixiaobang 2023-04-13 08:46:06 +08:00
parent 2a0089acdd
commit 92de69b19a
3 changed files with 698 additions and 131 deletions

View File

@ -213,10 +213,10 @@ import {getData} from './api/index.js'
#app {
// width: 6144px;
// height: 1920px;
background: rgba(1, 1, 7, 0);
background: rgba(1, 1, 7, 0.7);
// overflow: hidden;
.header {
height: 15%;
height: 10%;
width: 100%;
display: flex;
justify-content: space-between;
@ -226,7 +226,7 @@ import {getData} from './api/index.js'
background-size: 100% 100%;
color: #fff;
.left {
width: 26%;
width: 25%;
height: 38%;
display: flex;
align-items: center;
@ -243,7 +243,7 @@ import {getData} from './api/index.js'
letter-spacing: 0.5rem;
}
.right {
width: 26%;
width: 25%;
height: 100%;
.quit {
@ -286,7 +286,7 @@ import {getData} from './api/index.js'
}
.menu {
width: 100%;
height: 12%;
height: 7%;
position: absolute;
bottom: 0;
left: 0;
@ -323,7 +323,7 @@ import {getData} from './api/index.js'
}
}
.content {
height: calc(100% - 15%);
height: calc(100% - 10%);
width: 100%;
}
}

View File

@ -12,12 +12,7 @@
<div style="color: #fff; font-size: 0.55rem">{{ item.name }}</div>
<div
:class="houseList[index]"
style="
width: 100%;
height: 100%;
color: #fff;
font-size: 0.6rem;
"
style="width: 100%; height: 100%; color: #fff; font-size: 0.6rem"
>
{{ item.count }}
</div>
@ -25,14 +20,57 @@
</div>
</div>
<div class="leftTwo">
<div class="caseTitle">
案件统计
<div class="caseTitle">案件统计</div>
<div class="select">
<el-select
v-model="userValue"
:popper-append-to-body="false"
clearable
placeholder="请选择"
>
<el-option
v-for="(item, index) in userOptions"
:key="index"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<el-select
v-model="departmentValue"
:popper-append-to-body="false"
clearable
placeholder="请选择"
style="margin-left: 5%"
>
<el-option
v-for="(item, index) in departmentOptions"
:key="index"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div id="caseEcharts"></div>
</div>
<div class="leftThree"></div>
<div class="leftThree">
<div class="caseTitle" style="width:32%;padding-left: 6%;">案件类型统计</div>
<div class="caseType">
<div id="caseTypeLeft"></div>
<div id="caseTypeRight"></div>
</div>
</div>
</div>
<div class="right">
<div class="title" style="height:5%">案件列表</div>
<div class="caseList">
<div class="selectList">
<div class="selectChange"></div>
</div>
<div class="caseDetail"></div>
</div>
</div>
<div class="right"></div>
</div>
</template>
@ -59,11 +97,468 @@ export default {
count: "86",
},
], //
houseList: ["blueHouse", "redHouse", "yellowHouse","orangeHouse"],
houseList: ["blueHouse", "redHouse", "yellowHouse", "orangeHouse"],
userValue:'', //
userOptions:[
{
label:'人员',
value:'1'
},
{
label:'人员2',
value:'2'
}
],//
departmentValue:'', //
departmentOptions:[
{
label:'部门',
value:'1'
},
{
label:'部门2',
value:'2'
}
], //
selectList:[
{
name:'',
list:[
{
label:
}
]
}
]
};
},
mounted() {},
methods: {},
mounted() {
this.caseEcharts();
this.caseTypeLeft();
this.caseTypeRight();
},
methods: {
caseEcharts() {
var myChart = this.$echarts.init(document.getElementById("caseEcharts"));
let option = {
tooltip: {
trigger: "item",
axisPointer: {
type: "item",
crossStyle: {
color: "#999",
},
},
},
legend: {
icon: "rect",
bottom:0,
itemWidth: 15,
data: ["收案", "结案", "存案"],
textStyle: {
color: "#fff",
fontSize: "0.5rem",
},
},
grid: {
left: "3%",
right: "4%",
bottom: "15%",
top: "25%",
containLabel: true,
},
xAxis: [
{
type: "category",
data: ["一季度", "二季度", "三季度", "四季度"],
//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",
},
},
},
],
yAxis: [
{
type: "value",
name: "次",
//x
axisTick: {
show: false,
lineStyle: {
color: "#fff",
},
},
//x线
axisLine: {
show: true,
lineStyle: {
color: "#fff",
},
},
axisLabel: {
color: "#fff",
fontSize: "0.5rem",
},
//x线
splitLine: {
show: true,
lineStyle: {
type: '',
dashOffset: 10,
color: "rgb(108,108,109)",
},
},
},
],
series: [
{
name: "收案",
type: "bar",
data: [22, 30, 50, 10],
itemStyle: {
//
// color:params=>color[params.dataIndex],//()
//
color: (params) => ({
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(84,112,198,1)", // %
},
{
offset: 1,
color: "rgba(84,112,198,0)", // X
},
],
global: false, // false
}),
},
label: {
normal: {
show: true,
fontSize: "0.4rem",
color: "#fff",
position: "top",
},
},
},
{
name: "结案",
type: "bar",
data: [20, 34, 20, 30],
itemStyle: {
//
// color:params=>color[params.dataIndex],//()
//
color: (params) => ({
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(145,204,117,1)", // %
},
{
offset: 1,
color: "rgba(145,204,117,0)", // X
},
],
global: false, // false
}),
},
label: {
normal: {
show: true,
fontSize: "0.4rem",
color: "#fff",
position: "top",
},
},
},
{
name: "存案",
type: "bar",
data: [12, 40, 20, 10],
itemStyle: {
//
// color:params=>color[params.dataIndex],//()
//
color: (params) => ({
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(250,200,88,1)", // %
},
{
offset: 1,
color: "rgba(250,200,88,0)", // X
},
],
global: false, // false
}),
},
label: {
normal: {
show: true,
fontSize: "0.4rem",
color: "#fff",
position: "top",
},
},
},
],
};
myChart.setOption(option);
},
caseTypeLeft(){
var myChart = this.$echarts.init(document.getElementById("caseTypeLeft"));
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)"];
let option = {
color: color,
title: {
left: "43%",
top: "40%",
textAlign: "center",
text: "当月统计",
textStyle: {
fontSize: "0.8rem",
color: "#fff",
},
},
tooltip: {
trigger: "item",
backgroundColor: "rgba(0,0,0,0.5)",
color: "#ffffff",
formatter: function (params) {
return (
// params.name +
// "<br/>" +
params.marker +
'<span style="color:' +
params.color +
'">' +
params.data["name"] +
"\n" +
params.data["value"] +
"%" +
"</span>"
);
},
},
legend: {
orient: "horizontal",
icon: "rect",
bottom: "0",
x:'center',
itemWidth: 30,
itemGap: 20,
textStyle: {
rich: {
a: {
color: "#fff",
fontSize: "0.4rem",
padding: [0, 10, 0, 0],
},
b: {
color: "rgba(255,255,255,0)",
fontSize: "0.1rem",
padding: [0, 10, 0, 10],
},
},
},
formatter: function (name) {
var target, unit;
for (var i = 0, l = data.length; i < l; i++) {
if (data[i].name == name) {
target = data[i].value;
unit = data[i].unit;
}
}
return `{a| ${name}}{b|${target}}`;
},
},
series: [
{
name: "",
type: "pie",
radius: ["45%", "60%"],
center: ["45%", "45%"],
avoidLabelOverlap: true,
label: {
normal: {
show: true,
position: "outside",
formatter: "{d}",
textStyle: {
align: "center",
baseline: "middle",
fontSize: "0.5rem",
fontWeight: "100",
color: "auto",
},
},
},
labelLine: {
show: true,
length: 20,
length2: 10,
},
data: data,
},
],
};
myChart.setOption(option);
},
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)"];
let option = {
color: color,
title: {
left: "43%",
top: "40%",
textAlign: "center",
text: "第一季度统计",
textStyle: {
fontSize: "0.8rem",
color: "#fff",
},
},
tooltip: {
trigger: "item",
backgroundColor: "rgba(0,0,0,0.5)",
color: "#ffffff",
formatter: function (params) {
return (
// params.name +
// "<br/>" +
params.marker +
'<span style="color:' +
params.color +
'">' +
params.data["name"] +
"\n" +
params.data["value"] +
"%" +
"</span>"
);
},
},
legend: {
orient: "horizontal",
icon: "rect",
bottom: "0",
x:'center',
itemWidth: 30,
itemGap: 20,
textStyle: {
rich: {
a: {
color: "#fff",
fontSize: "0.4rem",
padding: [0, 10, 0, 0],
},
b: {
color: "rgba(255,255,255,0)",
fontSize: "0.1rem",
padding: [0, 10, 0, 10],
},
},
},
formatter: function (name) {
var target, unit;
for (var i = 0, l = data.length; i < l; i++) {
if (data[i].name == name) {
target = data[i].value;
unit = data[i].unit;
}
}
return `{a| ${name}}{b|${target}}`;
},
},
series: [
{
name: "",
type: "pie",
radius: ["45%", "60%"],
center: ["45%", "45%"],
avoidLabelOverlap: true,
label: {
normal: {
show: true,
position: "outside",
formatter: "{d}",
textStyle: {
align: "center",
baseline: "middle",
fontSize: "0.5rem",
fontWeight: "100",
color: "auto",
},
},
},
labelLine: {
show: true,
length: 20,
length2: 10,
},
data: data,
},
],
};
myChart.setOption(option);
},
},
watch: {},
components: {},
};
@ -79,7 +574,7 @@ export default {
padding: 0 0.3% 0 0.3%;
box-sizing: border-box;
.left {
width: 25.5%;
width: 24.7%;
height: 95%;
padding: 0.5% 0.3% 1% 0.3%;
box-sizing: border-box;
@ -89,20 +584,20 @@ export default {
background-size: 100% 100%;
.leftOne {
width: 100%;
height: 25%;
height: 20%;
.courtHouse {
height: calc(100% - 30%);
height: calc(100% - 20%);
width: 100%;
display: flex;
flex-wrap: nowrap;
justify-content: space-around;
align-items: center;
.courtData{
.courtData {
display: flex;
flex-direction: column;
align-items: center;
height: 85%;
width: 12%;
height: 61%;
width: 13%;
.blueHouse {
background: url(../assets/images/blueHouse.png) no-repeat;
background-size: 100% 100%;
@ -142,20 +637,70 @@ export default {
width: 100%;
height: 35%;
position: relative;
#caseEcharts{
.select{
position: absolute;
right: 5%;
width: 45%;
height: 10%;
display: flex;
z-index: 999;
/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: transparent;
border: 1px solid rgb(1, 176, 202);
border-radius: 5px;
left: -30px !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;
}
}
#caseEcharts {
width: 100%;
height: calc(100% - 16%);
border: 1px solid blue;
}
}
.leftThree {
width: 100%;
height: 40%;
border: 1px solid white;
.caseType{
height: calc(100% - 8%);
width: 100%;
display: flex;
#caseTypeLeft{
width: 50%;
height: 100%;
}
#caseTypeRight{
width: 50%;
height: 100%;
}
}
}
}
.right {
width: 25.5%;
width: 24.7%;
height: 95%;
padding: 0.5% 0.3% 1% 0.3%;
box-sizing: border-box;
@ -163,23 +708,41 @@ export default {
flex-wrap: wrap;
background: url(../assets/images/leftKuang.png) no-repeat;
background-size: 100% 100%;
.caseList{
width: 100%;
height: calc(100% - 5%);
border: 1px solid red;
display: flex;
flex-wrap: wrap;
.selectList{
width: 100%;
height: 20%;
border: 1px solid rgb(0, 255, 170);
position: relative;
}
.caseDetail{
width: 100%;
height: calc(100% - 20%);
border: 1px solid blue;
}
}
}
}
.title {
width: 100%;
height: 30%;
height: 20%;
background: url("../assets/images/title.png") no-repeat;
background-size: 100% 100%;
color: #fff;
font-size: 0.7rem;
font-size: 0.8rem;
display: flex;
align-items: center;
padding-left: 12%;
box-sizing: border-box;
}
.caseTitle{
.caseTitle {
width: 23%;
height: 10%;
height: 5%;
background: url("../assets/images/faTingImg/anjianTitle.png") no-repeat;
background-size: 100% 100%;
color: #fff;
@ -188,6 +751,5 @@ export default {
align-items: center;
padding-left: 5%;
box-sizing: border-box;
margin-top: 2%;
}
</style>

View File

@ -30,7 +30,7 @@
v-for="(item, index) in wisdomMonArr"
:key="index"
>
<div>
<div style="width:100%">
<span>{{ item.name }}:</span>
<span style="color: rgb(225, 177, 25); margin-left: 5%">{{
item.count
@ -41,7 +41,7 @@
</div>
</div>
<div class="leftTwo">
<div class="title">设备预</div>
<div class="title" style="height:18%">设备告</div>
<div class="warning">
<div id="warningOne"></div>
<div id="warningTwo"></div>
@ -50,7 +50,7 @@
<div class="leftThree">
<div class="warnListTitle">
<div class="titleTwo">
<span style="margin-left: 10%; font-size: 0.6rem"
<span style="margin-left: 5%; font-size: 0.6rem"
>报警信息列表</span
>
</div>
@ -74,7 +74,7 @@
>
<div class="warnArray">
<span>{{ item.id }}</span>
<img :src="item.icon" style="width: 9%; margin-left: 3%" />
<img :src="item.icon" style="width: 7%; margin-left: 3%" />
<div
style="
display: flex;
@ -92,7 +92,7 @@
"
>
<span>报警原因:{{ item.cause }}</span>
<span style="position: relative; left: 58%"
<span style="position: relative; left: 50%"
>风险等级:{{ item.risk }}</span
>
</div>
@ -104,11 +104,10 @@
</div>
<div class="right">
<div class="rightOne">
<div class="title" style="height: 20%">运维管理</div>
<div class="title" style="height: 13%">运维管理</div>
<div class="maintenance">
<div class="maintenanceCount">
<div class="quantity">
<span>当日</span>
<div
style="
width: 30%;
@ -117,6 +116,7 @@
justify-content: space-evenly;
"
>
<span>当日</span>
<img src="../assets/images/blueDian.png" style="width: 9%" />
<span style="margin-left: 2%">报警数8</span>
</div>
@ -133,7 +133,6 @@
</div>
</div>
<div class="quantity">
<span>统计</span>
<div
style="
width: 30%;
@ -142,6 +141,7 @@
justify-content: space-evenly;
"
>
<span>统计</span>
<img src="../assets/images/blueDian.png" style="width: 9%" />
<span style="margin-left: 2%">派单数8</span>
</div>
@ -185,7 +185,7 @@
</div>
</div>
<div class="rightThree">
<div class="title" style="height: 20%">摄像监控</div>
<div class="title" style="height: 15%">摄像监控</div>
<div class="camera">
<div
class="cameraList"
@ -314,7 +314,7 @@ export default {
legend: {
show: true,
align: "left",
// x:'1%',
x:'45%',
orient: "vertical",
textStyle: {
color: "#fff",
@ -435,7 +435,7 @@ export default {
legend: {
show: true,
align: "left",
// x:'1%',
x:'45%',
orient: "vertical",
textStyle: {
color: "#fff",
@ -564,11 +564,11 @@ export default {
color: color,
title: {
left: "45%",
top: "45%",
top: "35%",
textAlign: "center",
text: "当月次数统计",
textStyle: {
fontSize: "0.4rem",
fontSize: "0.65rem",
color: "#fff",
},
},
@ -593,12 +593,13 @@ export default {
},
},
legend: {
orient: "vertical",
icon: "circle",
left: "70%",
top: "20%",
// orient: "vertical",
icon: "rect",
// left: "5%",
// top: "20%",
bottom:'0',
itemWidth: 14,
itemGap: 20,
itemGap: 10,
textStyle: {
rich: {
a: {
@ -608,8 +609,8 @@ export default {
},
b: {
color: "rgba(255,255,255,0)",
fontSize: "0.5rem",
padding: [0, 10, 0, 10],
fontSize: "0rem",
padding: [0, 10, 0,15],
},
},
},
@ -621,15 +622,15 @@ export default {
unit = data[i].unit;
}
}
return `{a| ${name}}{b|${target}}`;
return `{a| ${name}}{b|}`;
},
},
series: [
{
name: "",
type: "pie",
radius: ["60%", "70%"],
center: ["45%", "50%"],
radius: ["45%", "60%"],
center: ["48%", "40%"],
avoidLabelOverlap: true,
label: {
normal: {
@ -672,11 +673,11 @@ export default {
color: color,
title: {
left: "45%",
top: "45%",
top: "35%",
textAlign: "center",
text: "上月次数统计",
textStyle: {
fontSize: "0.4rem",
fontSize: "0.6rem",
color: "#fff",
},
},
@ -701,12 +702,12 @@ export default {
},
},
legend: {
orient: "vertical",
icon: "circle",
left: "73%",
top: "18%",
icon: "rect",
// left: "5%",
// top: "20%",
bottom:'0',
itemWidth: 14,
itemGap: 20,
itemGap: 10,
textStyle: {
rich: {
a: {
@ -716,7 +717,7 @@ export default {
},
b: {
color: "rgba(255,255,255,0)",
fontSize: "0.5rem",
fontSize: "0.1rem",
padding: [0, 10, 0, 10],
},
},
@ -736,8 +737,8 @@ export default {
{
name: "",
type: "pie",
radius: ["60%", "70%"],
center: ["45%", "50%"],
radius: ["45%", "60%"],
center: ["48%", "40%"],
avoidLabelOverlap: true,
label: {
normal: {
@ -956,7 +957,7 @@ export default {
padding: 0 0.3% 0 0.3%;
box-sizing: border-box;
.left {
width: 25.5%;
width: 24.7%;
height: 95%;
padding: 0.5% 0.3% 1% 0.3%;
box-sizing: border-box;
@ -965,7 +966,7 @@ export default {
background: url(../assets/images/leftKuang.png) no-repeat;
background-size: 100% 100%;
.leftOne {
height: 23%;
height: 22%;
width: 100%;
.wisdomContent {
height: calc(100% - 25%);
@ -983,8 +984,8 @@ export default {
display: flex;
flex-direction: column;
align-items: center;
height: 92%;
width: 9%;
height: 70%;
width: 11%;
.blueHouse {
background: url(../assets/images/blueHouse.png) no-repeat;
background-size: 100% 100%;
@ -1025,6 +1026,8 @@ export default {
font-size: @fontSize;
background: url(../assets/images/flootLine.png) no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
}
}
}
@ -1035,6 +1038,7 @@ export default {
.warning {
height: calc(100% - 25%);
width: 100%;
margin-top: 3%;
display: flex;
flex-wrap: nowrap;
#warningOne {
@ -1057,6 +1061,7 @@ export default {
.titleTwo {
width: 20%;
height: 100%;
margin-left: 2%;
background: url(../assets/images/flootLine.png) no-repeat;
background-size: 100% 100%;
color: #fff;
@ -1072,8 +1077,8 @@ export default {
justify-content: space-around;
align-items: center;
.btnList {
width: 15%;
height: 60%;
width: 13%;
height: 38%;
background: url(../assets/images/warnBtn.png) no-repeat;
background-size: 100% 100%;
color: #fff;
@ -1083,8 +1088,8 @@ export default {
justify-content: center;
}
.btnListAc {
width: 15%;
height: 60%;
width: 13%;
height: 38%;
background: url(../assets/images/warnBtnAc.png) no-repeat;
background-size: 100% 100%;
color: #fff;
@ -1101,7 +1106,7 @@ export default {
background-size: 100% 100%;
overflow: auto;
.warnListContent {
height: 50%;
height: 25%;
width: 100%;
border: 1px dashed #fff;
color: #fff;
@ -1126,7 +1131,7 @@ export default {
}
}
.right {
width: 25.5%;
width: 24.7%;
height: 95%;
padding: 0.5% 0.3% 0.3% 0.3%;
box-sizing: border-box;
@ -1138,7 +1143,7 @@ export default {
height: 38%;
width: 100%;
.maintenance {
height: calc(100% - 20%);
height: calc(100% - 13%);
width: 100%;
padding: 0 2% 0 2%;
box-sizing: border-box;
@ -1184,10 +1189,10 @@ export default {
height: calc(100% - 25%);
}
.selectChange {
width: 14%;
width: 23%;
height: 10%;
position: absolute;
top: 28%;
top: 22%;
right: 5%;
/deep/ .el-select {
width: 100%;
@ -1226,7 +1231,7 @@ export default {
height: 34%;
width: 100%;
.camera {
height: calc(100% - 20%);
height: calc(100% - 15%);
width: 100%;
display: flex;
flex-wrap: wrap;
@ -1244,7 +1249,7 @@ export default {
}
.title {
width: 100%;
height: 25%;
height: 20%;
background: url("../assets/images/title.png") no-repeat;
background-size: 100% 100%;
color: #fff;