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
Inline Side-by-side
Showing 6 changed files with 276 additions and 119 deletions
<template>
<!-- 折线图 -->
<Echart :options="options" id="bottomLeftChart" height="100%" width="100%"></Echart>
<Echart
:options="options"
id="bottomLeftChart"
height="100%"
width="100%"
></Echart>
</template>
<script>
import Echart from "@/common/echart";
export default {
data () {
data() {
return {
xAxisData: {},
yAxisData1: {},
......@@ -22,10 +27,10 @@ export default {
cdata: {
type: Object,
default: () => ({}),
}
},
},
methods: {
hexToRgba (hex, opacity) {
hexToRgba(hex, opacity) {
let rgbaColor = "";
let reg = /^#[\da-f]{6}$/i;
if (reg.test(hex)) {
......@@ -34,41 +39,45 @@ export default {
)},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
}
return rgbaColor;
}
},
},
watch: {
cdata: {
handler (newData) {
this.xAxisData = newData.echartData.map(v => v.name);
this.yAxisData1 = newData.echartData.map(v => v.value1);
this.yAxisData2 = newData.echartData.map(v => v.value2);
this.yAxisData3 = newData.echartData.map(v => v.value3);
handler(newData) {
this.xAxisData = newData.echartData.map((v) => v.name);
this.yAxisData1 = newData.echartData.map((v) => v.value1);
this.yAxisData2 = newData.echartData.map((v) => v.value2);
this.yAxisData3 = newData.echartData.map((v) => v.value3);
this.options = {
color: newData.color,
legend: {
center: true,
top: '20%',
top: "20%",
data: newData.legendItem,
textStyle: {
color: '#00DEFF'
}
color: "#00DEFF",
},
},
// calculable: true,
tooltip: {
trigger: "axis",
formatter: function (params) {
let html = '';
params.forEach(v => {
let html = "";
params.forEach((v) => {
html += `<div style="color: #000;font-size: 14px;line-height: 24px background-color: #000000">
<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${newData.color[v.componentIndex]};"></span>
<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
newData.color[v.componentIndex]
};"></span>
${v.seriesName}.${v.name}
<span style="color:${newData.color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
<span style="color:${
newData.color[v.componentIndex]
};font-weight:700;font-size: 18px">${v.value}</span>
个`;
})
return html
});
return html;
},
extraCssText: 'background: #85a2eb; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
extraCssText:
"background: #85a2eb; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;",
},
// grid: {
// top: 70,
......@@ -81,54 +90,59 @@ export default {
bottom: "8%",
containLabel: true,
},
xAxis: [{
type: 'category',
xAxis: [
{
type: "category",
axisLine: {
show: true,
lineStyle: {
color: "#458ACF"
}
color: "#458ACF",
},
},
axisLabel: {
inside: false,
textStyle: {
color: 'rgba(255, 255, 255,0.7)', // x轴颜色
fontWeight: 'normal',
fontSize: '12',
lineHeight: 22
}
color: "rgba(255, 255, 255,0.7)", // x轴颜色
fontWeight: "normal",
fontSize: "12",
lineHeight: 22,
},
},
data: this.xAxisData,
},
data: this.xAxisData
}],
yAxis: [{
],
yAxis: [
{
type: "value",
axisLabel: {
textStyle: {
color: "rgba(255, 255, 255,0.7)"
}
color: "rgba(255, 255, 255,0.7)",
},
},
splitLine: {
show: true,
lineStyle: {
color: "#458ACF"
}
color: "#458ACF",
},
},
axisLine: {
show: true,
lineStyle: {
color: "#458ACF"
}
color: "#458ACF",
},
},
axisTick: {
show: false
}
}],
series: [{
show: false,
},
},
],
series: [
{
name: newData.legendItem[0],
type: "line",
smooth: true, //是否平滑
showSymbol: false,
symbol: 'circle',
symbol: "circle",
symbolSize: 6,
zlevel: 3,
lineStyle: {
......@@ -136,16 +150,17 @@ export default {
color: newData.color[0],
shadowBlur: 3,
shadowColor: this.hexToRgba(newData.color[0], 0.5),
shadowOffsetY: 0
}
shadowOffsetY: 0,
},
},
data: this.yAxisData1
}, {
data: this.yAxisData1,
},
{
name: newData.legendItem[1],
type: "line",
smooth: true,
showSymbol: false,
symbol: 'circle',
symbol: "circle",
symbolSize: 8,
zlevel: 3,
lineStyle: {
......@@ -153,17 +168,17 @@ export default {
color: newData.color[1],
shadowBlur: 0,
shadowColor: this.hexToRgba(newData.color[1], 0.5),
shadowOffsetY: 0
}
shadowOffsetY: 0,
},
},
data: this.yAxisData2
data: this.yAxisData2,
},
{
name: newData.legendItem[2],
type: "line",
smooth: true,
showSymbol: false,
symbol: 'circle',
symbol: "circle",
symbolSize: 8,
zlevel: 3,
lineStyle: {
......@@ -171,12 +186,12 @@ export default {
color: newData.color[2],
shadowBlur: 3,
shadowColor: this.hexToRgba(newData.color[2], 0.5),
shadowOffsetY: 0
}
shadowOffsetY: 0,
},
data: this.yAxisData3
}
]
},
data: this.yAxisData3,
},
],
};
},
immediate: true,
......
......@@ -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;
}
}
......
......@@ -2,11 +2,22 @@
<!-- 监控日志 -->
<div class="jktjDetail form-clues">
<!-- 头部搜索 -->
<el-form ref="form" :model="form" :inline="true" class="from-clues-header" label-width="100px">
<el-row>
<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
v-model="valueTime"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</el-col>
<!-- 按钮操作 -->
......@@ -26,53 +37,47 @@
<script>
export default {
name: "jktj",
data () {
data() {
return {
// 开始结束日期限制
pickerOptionsStart: {
disabledDate: (time) => {
if (this.form.endTime) {
return (
time.getTime() >= new Date(this.form.endTime).getTime()
);
}
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()
);
}
return time.getTime() <= new Date(this.form.startTime).getTime();
}
},
},
// 搜索表单
valueTime: '',
valueTime: "",
form: {
startTime: "",
endTime: ""
}
}
endTime: "",
},
};
},
mounted () {
mounted() {
// 初始化图表
this.echartInit();
},
methods: {
// 重置
resetForm () {
resetForm() {
this.form = {
startTime: "",
endTime: ""
}
endTime: "",
};
},
echartInit () {
echartInit() {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(
document.getElementById("myChart")
);
let myChart = this.$echarts.init(document.getElementById("myChart"));
// 绘制图表
myChart.setOption({
color: ["#00bdb1", "#ff6e6e", "#3f99ff", "#ffaf48"],
......@@ -81,10 +86,10 @@ export default {
text: "汉中市接入数量与上报数量统计(单位:个)\n(2022年02月05日~2022年03月07日)",
left: "center",
textStyle: {
fontSize: 18,
fontSize: 30,
lineHeight: 30,
height: 60,
color: "#777",
color: "#fff",
},
},
legend: {
......@@ -95,10 +100,20 @@ export default {
"上报失败数量",
],
top: 80,
textStyle: {
fontSize: 24,
lineHeight: 30,
height: 60,
color: "#777",
},
},
tooltip: {
show: true,
trigger: "axis",
textStyle: {
fontSize: 22 // 字体大小
},
extraCssText: 'width:260px;height:200px;' // 背景色
},
grid: {
top: 120,
......@@ -107,11 +122,25 @@ export default {
{
type: "category",
data: ["汉台区", "南郑区", "城固县", "洋县", "西乡县"],
axisLabel: {
textStyle: {
show: true,
color: "#fff",
fontSize: "24",
},
},
},
],
yAxis: [
{
type: "value",
axisLabel: {
textStyle: {
show: true,
color: "#fff",
fontSize: "24",
},
},
},
],
series: [
......@@ -148,7 +177,9 @@ export default {
height: 100%;
display: flex;
flex-direction: column;
.rows {
margin-left: 100px;
}
.echarts-box {
display: flex;
justify-content: center;
......
......@@ -2,11 +2,22 @@
<!-- 监控日志 -->
<div class="jktjDetail form-clues">
<!-- 头部搜索 -->
<el-form ref="form" :model="form" :inline="true" class="from-clues-header" label-width="100px">
<el-row>
<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
v-model="valueTime"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</el-col>
<!-- 按钮操作 -->
......@@ -26,53 +37,47 @@
<script>
export default {
name: "jktj",
data () {
data() {
return {
// 开始结束日期限制
pickerOptionsStart: {
disabledDate: (time) => {
if (this.form.endTime) {
return (
time.getTime() >= new Date(this.form.endTime).getTime()
);
}
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()
);
}
return time.getTime() <= new Date(this.form.startTime).getTime();
}
},
},
// 搜索表单
valueTime: '',
valueTime: "",
form: {
startTime: "",
endTime: ""
}
}
endTime: "",
},
};
},
mounted () {
mounted() {
// 初始化图表
this.echartInit();
},
methods: {
// 重置
resetForm () {
resetForm() {
this.form = {
startTime: "",
endTime: ""
}
endTime: "",
};
},
echartInit () {
echartInit() {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(
document.getElementById("myChart")
);
let myChart = this.$echarts.init(document.getElementById("myChart"));
// 绘制图表
myChart.setOption({
color: ["#00bdb1", "#ff6e6e", "#3f99ff", "#ffaf48"],
......@@ -81,10 +86,10 @@ export default {
text: "汉中市接入数量与上报数量统计(单位:个)\n(2022年02月05日~2022年03月07日)",
left: "center",
textStyle: {
fontSize: 18,
fontSize: 30,
lineHeight: 30,
height: 60,
color: "#777",
color: "#fff",
},
},
legend: {
......@@ -95,10 +100,20 @@ export default {
"上报失败数量",
],
top: 80,
textStyle: {
fontSize: 24,
lineHeight: 30,
height: 60,
color: "#777",
},
},
tooltip: {
show: true,
trigger: "axis",
textStyle: {
fontSize: 22 // 字体大小
},
extraCssText: 'width:260px;height:200px;' // 背景色
},
grid: {
top: 120,
......@@ -107,11 +122,25 @@ export default {
{
type: "category",
data: ["汉台区", "南郑区", "城固县", "洋县", "西乡县"],
axisLabel: {
textStyle: {
show: true,
color: "#fff",
fontSize: "24",
},
},
},
],
yAxis: [
{
type: "value",
axisLabel: {
textStyle: {
show: true,
color: "#fff",
fontSize: "24",
},
},
},
],
series: [
......@@ -148,7 +177,9 @@ export default {
height: 100%;
display: flex;
flex-direction: column;
.rows {
margin-left: 100px;
}
.echarts-box {
display: flex;
justify-content: center;
......
......@@ -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);
},
},
......