Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
2061f67a by 田浩浩
Options

Merge branch 'master' of http://yun.pashanhoo.com:9090/bdc/bdcjg-web

2 parents 63c19846 1f639c9c
Expand all
Inline Side-by-side
Showing 6 changed files with 439 additions and 297 deletions
......@@ -264,7 +264,10 @@ table td {
display: none;
}
// 时间选择框样式
.el-date-picker {
.el-date-picker{
.el-date-table td.disabled div{
background-color:#074487;
}
background-color: #031a46;
.el-date-picker__header-label{
color:#A6CFD6;
......@@ -273,9 +276,7 @@ table td {
background-color:#074487;
.disabled{
background-color:#074487;
.el-date-table td.disabled div{
background-color:#074487;
}
}
}
......@@ -301,6 +302,83 @@ table td {
}
// 时间选择框2
.el-date-range-picker{
.el-date-range-picker__time-header > .el-icon-arrow-right{
color:#E3F1FF;;
}
background-color: #074487;
color: #fff;
.el-input__inner{
background: color #074487;
}
.el-input__inner{
background-color: #074487;
}
.el-input.is-disabled .el-input__inner{
background-color: #074487;
}
.el-date-range-picker__time-header{
background-color: #031a46;
}
.el-picker-panel__footer{
background-color: #031a46;
}
.el-time-panel{
background-color: #074487!important;
color: #E3F1FF;
}
.el-picker-panel__icon-btn{
color:#E3F1FF;
}
.el-date-table th{
color:#E3F1FF;
}
.el-time-spinner__item{
color: #E3F1FF;
}
.el-time-spinner__item.active:not(.disabled){
color: #fff;
}
.el-time-panel__btn{
color:#0F93F6;
}
.el-time-panel__btn.confirm{
width: 50px;
height: 25px;
line-height: 25px;
border-radius: 3px;
background-color: #fff;
}
.el-time-panel__footer{
background-color: #031a46;
}
.el-date-table td.in-range div{
background-color: #031a46;
}
.el-date-table td.start-date span, .el-date-table td.end-date span{
background-color: #074487;
// border:1px solid saddlebrown;
box-shadow: inset 0 0 7px #02D9FD;
border: 1px solid #02D9FD;
}
}
.el-date-editor{
.el-range-separator{
color: #E3F1FF;
}
.el-range-input{
background:none !important;
color: #fff;
}
}
......
......@@ -196,4 +196,4 @@
.btnColRight {
box-sizing: border-box;
text-align: right;
}
\ No newline at end of file
}
......
<template>
<!-- 监控日志 -->
<div class="jktjDetail form-clues">
<!-- 头部搜索 -->
<el-form ref="form" :model="form" :inline="true" class="from-clues-header" label-width="100px">
<el-row>
<el-col :span="8">
<el-date-picker v-model="valueTime" type="datetimerange" range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期">
</el-date-picker>
</el-col>
<!-- 按钮操作 -->
<el-col :span="12" class="btnColRight">
<el-button type="default" @click="resetForm"> 重置 </el-button>
<el-button type="primary"> 查询 </el-button>
</el-col>
</el-row>
</el-form>
<!-- 表格 -->
<div class="form-clues-content echarts-box">
<div id="myChart" class="chart"></div>
</div>
<!-- 监控日志 -->
<div class="jktjDetail form-clues">
<!-- 头部搜索 -->
<el-form
ref="form"
:model="form"
:inline="true"
class="from-clues-header"
label-width="100px"
>
<el-row class="rows">
<el-col :span="8">
<el-date-picker
v-model="valueTime"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</el-col>
<!-- 按钮操作 -->
<el-col :span="12" class="btnColRight">
<el-button type="default" @click="resetForm"> 重置 </el-button>
<el-button type="primary"> 查询 </el-button>
</el-col>
</el-row>
</el-form>
<!-- 表格 -->
<div class="form-clues-content echarts-box">
<div id="myChart" class="chart"></div>
</div>
</div>
</template>
<script>
export default {
name: "jktj",
data () {
return {
// 开始结束日期限制
pickerOptionsStart: {
disabledDate: (time) => {
if (this.form.endTime) {
return (
time.getTime() >= new Date(this.form.endTime).getTime()
);
}
}
},
// 结束日期限制
pickerOptionsEnd: {
disabledDate: (time) => {
if (this.form.startTime) {
return (
time.getTime() <= new Date(this.form.startTime).getTime()
);
}
}
},
// 搜索表单
valueTime: '',
form: {
startTime: "",
endTime: ""
}
}
name: "jktj",
data() {
return {
// 开始结束日期限制
pickerOptionsStart: {
disabledDate: (time) => {
if (this.form.endTime) {
return time.getTime() >= new Date(this.form.endTime).getTime();
}
},
},
// 结束日期限制
pickerOptionsEnd: {
disabledDate: (time) => {
if (this.form.startTime) {
return time.getTime() <= new Date(this.form.startTime).getTime();
}
},
},
// 搜索表单
valueTime: "",
form: {
startTime: "",
endTime: "",
},
};
},
mounted() {
// 初始化图表
this.echartInit();
},
methods: {
// 重置
resetForm() {
this.form = {
startTime: "",
endTime: "",
};
},
mounted () {
// 初始化图表
this.echartInit();
echartInit() {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("myChart"));
// 绘制图表
myChart.setOption({
color: ["#00bdb1", "#ff6e6e", "#3f99ff", "#ffaf48"],
title: {
show: true,
text: "汉中市接入数量与上报数量统计(单位:个)\n(2022年02月05日~2022年03月07日)",
left: "center",
textStyle: {
fontSize: 30,
lineHeight: 30,
height: 60,
color: "#fff",
},
},
legend: {
data: [
"接入成功数量",
"接入失败数量",
"上报成功数量",
"上报失败数量",
],
top: 80,
textStyle: {
fontSize: 24,
lineHeight: 30,
height: 60,
color: "#777",
},
},
tooltip: {
show: true,
trigger: "axis",
textStyle: {
fontSize: 22 // 字体大小
},
methods: {
// 重置
resetForm () {
this.form = {
startTime: "",
endTime: ""
}
extraCssText: 'width:260px;height:200px;' // 背景色
},
echartInit () {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(
document.getElementById("myChart")
);
// 绘制图表
myChart.setOption({
color: ["#00bdb1", "#ff6e6e", "#3f99ff", "#ffaf48"],
title: {
show: true,
text: "汉中市接入数量与上报数量统计(单位:个)\n(2022年02月05日~2022年03月07日)",
left: "center",
textStyle: {
fontSize: 18,
lineHeight: 30,
height: 60,
color: "#777",
},
},
legend: {
data: [
"接入成功数量",
"接入失败数量",
"上报成功数量",
"上报失败数量",
],
top: 80,
},
tooltip: {
show: true,
trigger: "axis",
},
grid: {
top: 120,
},
xAxis: [
{
type: "category",
data: ["汉台区", "南郑区", "城固县", "洋县", "西乡县"],
},
],
yAxis: [
{
type: "value",
},
],
series: [
{
name: "接入成功数量",
type: "bar",
data: [1000, 1500, 2000, 500, 4000],
},
{
name: "接入失败数量",
type: "bar",
data: [900, 500, 3200, 800, 4500],
},
{
name: "上报成功数量",
type: "bar",
data: [1000, 1500, 2000, 500, 4000],
},
{
name: "上报失败数量",
type: "bar",
data: [900, 500, 3200, 800, 4500],
},
],
});
grid: {
top: 120,
},
xAxis: [
{
type: "category",
data: ["汉台区", "南郑区", "城固县", "洋县", "西乡县"],
axisLabel: {
textStyle: {
show: true,
color: "#fff",
fontSize: "24",
},
},
},
],
yAxis: [
{
type: "value",
axisLabel: {
textStyle: {
show: true,
color: "#fff",
fontSize: "24",
},
},
},
],
series: [
{
name: "接入成功数量",
type: "bar",
data: [1000, 1500, 2000, 500, 4000],
},
{
name: "接入失败数量",
type: "bar",
data: [900, 500, 3200, 800, 4500],
},
{
name: "上报成功数量",
type: "bar",
data: [1000, 1500, 2000, 500, 4000],
},
{
name: "上报失败数量",
type: "bar",
data: [900, 500, 3200, 800, 4500],
},
],
});
},
},
};
</script>
<style scoped lang="scss">
@import "~@/styles/public.scss";
.jktjDetail {
height: 100%;
height: 100%;
display: flex;
flex-direction: column;
.rows {
margin-left: 100px;
}
.echarts-box {
display: flex;
flex-direction: column;
justify-content: center;
height: 500px;
.echarts-box {
display: flex;
justify-content: center;
height: 500px;
.chart {
width: 100%;
height: 100%;
}
.chart {
width: 100%;
height: 100%;
}
}
.form-clues-content {
flex: 1;
height: 100%;
}
.form-clues-content {
flex: 1;
height: 100%;
}
}
</style>
<style scoped lang="scss">
......
<template>
<!-- 监控日志 -->
<div class="jktjDetail form-clues">
<!-- 头部搜索 -->
<el-form ref="form" :model="form" :inline="true" class="from-clues-header" label-width="100px">
<el-row>
<el-col :span="8">
<el-date-picker v-model="valueTime" type="datetimerange" range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期">
</el-date-picker>
</el-col>
<!-- 按钮操作 -->
<el-col :span="12" class="btnColRight">
<el-button type="default" @click="resetForm"> 重置 </el-button>
<el-button type="primary"> 查询 </el-button>
</el-col>
</el-row>
</el-form>
<!-- 表格 -->
<div class="form-clues-content echarts-box">
<div id="myChart" class="chart"></div>
</div>
<!-- 监控日志 -->
<div class="jktjDetail form-clues">
<!-- 头部搜索 -->
<el-form
ref="form"
:model="form"
:inline="true"
class="from-clues-header"
label-width="100px"
>
<el-row class="rows">
<el-col :span="8">
<el-date-picker
v-model="valueTime"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</el-col>
<!-- 按钮操作 -->
<el-col :span="12" class="btnColRight">
<el-button type="default" @click="resetForm"> 重置 </el-button>
<el-button type="primary"> 查询 </el-button>
</el-col>
</el-row>
</el-form>
<!-- 表格 -->
<div class="form-clues-content echarts-box">
<div id="myChart" class="chart"></div>
</div>
</div>
</template>
<script>
export default {
name: "jktj",
data () {
return {
// 开始结束日期限制
pickerOptionsStart: {
disabledDate: (time) => {
if (this.form.endTime) {
return (
time.getTime() >= new Date(this.form.endTime).getTime()
);
}
}
},
// 结束日期限制
pickerOptionsEnd: {
disabledDate: (time) => {
if (this.form.startTime) {
return (
time.getTime() <= new Date(this.form.startTime).getTime()
);
}
}
},
// 搜索表单
valueTime: '',
form: {
startTime: "",
endTime: ""
}
}
name: "jktj",
data() {
return {
// 开始结束日期限制
pickerOptionsStart: {
disabledDate: (time) => {
if (this.form.endTime) {
return time.getTime() >= new Date(this.form.endTime).getTime();
}
},
},
// 结束日期限制
pickerOptionsEnd: {
disabledDate: (time) => {
if (this.form.startTime) {
return time.getTime() <= new Date(this.form.startTime).getTime();
}
},
},
// 搜索表单
valueTime: "",
form: {
startTime: "",
endTime: "",
},
};
},
mounted() {
// 初始化图表
this.echartInit();
},
methods: {
// 重置
resetForm() {
this.form = {
startTime: "",
endTime: "",
};
},
mounted () {
// 初始化图表
this.echartInit();
echartInit() {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("myChart"));
// 绘制图表
myChart.setOption({
color: ["#00bdb1", "#ff6e6e", "#3f99ff", "#ffaf48"],
title: {
show: true,
text: "汉中市接入数量与上报数量统计(单位:个)\n(2022年02月05日~2022年03月07日)",
left: "center",
textStyle: {
fontSize: 30,
lineHeight: 30,
height: 60,
color: "#fff",
},
},
legend: {
data: [
"接入成功数量",
"接入失败数量",
"上报成功数量",
"上报失败数量",
],
top: 80,
textStyle: {
fontSize: 24,
lineHeight: 30,
height: 60,
color: "#777",
},
},
tooltip: {
show: true,
trigger: "axis",
textStyle: {
fontSize: 22 // 字体大小
},
methods: {
// 重置
resetForm () {
this.form = {
startTime: "",
endTime: ""
}
extraCssText: 'width:260px;height:200px;' // 背景色
},
echartInit () {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(
document.getElementById("myChart")
);
// 绘制图表
myChart.setOption({
color: ["#00bdb1", "#ff6e6e", "#3f99ff", "#ffaf48"],
title: {
show: true,
text: "汉中市接入数量与上报数量统计(单位:个)\n(2022年02月05日~2022年03月07日)",
left: "center",
textStyle: {
fontSize: 18,
lineHeight: 30,
height: 60,
color: "#777",
},
},
legend: {
data: [
"接入成功数量",
"接入失败数量",
"上报成功数量",
"上报失败数量",
],
top: 80,
},
tooltip: {
show: true,
trigger: "axis",
},
grid: {
top: 120,
},
xAxis: [
{
type: "category",
data: ["汉台区", "南郑区", "城固县", "洋县", "西乡县"],
},
],
yAxis: [
{
type: "value",
},
],
series: [
{
name: "接入成功数量",
type: "bar",
data: [1000, 1500, 2000, 500, 4000],
},
{
name: "接入失败数量",
type: "bar",
data: [900, 500, 3200, 800, 4500],
},
{
name: "上报成功数量",
type: "bar",
data: [1000, 1500, 2000, 500, 4000],
},
{
name: "上报失败数量",
type: "bar",
data: [900, 500, 3200, 800, 4500],
},
],
});
grid: {
top: 120,
},
xAxis: [
{
type: "category",
data: ["汉台区", "南郑区", "城固县", "洋县", "西乡县"],
axisLabel: {
textStyle: {
show: true,
color: "#fff",
fontSize: "24",
},
},
},
],
yAxis: [
{
type: "value",
axisLabel: {
textStyle: {
show: true,
color: "#fff",
fontSize: "24",
},
},
},
],
series: [
{
name: "接入成功数量",
type: "bar",
data: [1000, 1500, 2000, 500, 4000],
},
{
name: "接入失败数量",
type: "bar",
data: [900, 500, 3200, 800, 4500],
},
{
name: "上报成功数量",
type: "bar",
data: [1000, 1500, 2000, 500, 4000],
},
{
name: "上报失败数量",
type: "bar",
data: [900, 500, 3200, 800, 4500],
},
],
});
},
},
};
</script>
<style scoped lang="scss">
@import "~@/styles/public.scss";
.jktjDetail {
height: 100%;
height: 100%;
display: flex;
flex-direction: column;
.rows {
margin-left: 100px;
}
.echarts-box {
display: flex;
flex-direction: column;
justify-content: center;
height: 500px;
.echarts-box {
display: flex;
justify-content: center;
height: 500px;
.chart {
width: 100%;
height: 100%;
}
.chart {
width: 100%;
height: 100%;
}
}
.form-clues-content {
flex: 1;
height: 100%;
}
.form-clues-content {
flex: 1;
height: 100%;
}
}
</style>
<style scoped lang="scss">
......
......@@ -37,7 +37,7 @@
</el-col>
</el-row>
<el-row class="mt-10">
<el-col :span="6">
<el-col :span="6">
<el-form-item label="业务号" prop="ywh">
<el-input v-model="form.ywh" class="width100" placeholder="业务号"></el-input>
</el-form-item>
......@@ -75,7 +75,7 @@
</div>
<!-- 引入详情组件 -->
<!-- 编辑 -->
<dataDetails ref="editLog" />
<dataDetails ref="editLog" :title="title" />
</div>
</template>
<script>
......@@ -182,6 +182,7 @@ export default {
label: "河南县",
},
],
title: ''
};
},
methods: {
......@@ -205,6 +206,7 @@ export default {
handleEscalation () { },
// 详情
handleDetail (row) {
this.title = row.rectypeName
this.$refs.editLog.isShow(row);
},
},
......