2061f67a by 田浩浩
2 parents 63c19846 1f639c9c
<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 () {
return {
xAxisData: {},
yAxisData1: {},
yAxisData2: {},
yAxisData3: {},
options: {},
};
},
components: {
Echart,
},
props: {
cdata: {
type: Object,
default: () => ({}),
}
data() {
return {
xAxisData: {},
yAxisData1: {},
yAxisData2: {},
yAxisData3: {},
options: {},
};
},
components: {
Echart,
},
props: {
cdata: {
type: Object,
default: () => ({}),
},
methods: {
hexToRgba (hex, opacity) {
let rgbaColor = "";
let reg = /^#[\da-f]{6}$/i;
if (reg.test(hex)) {
rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
"0x" + hex.slice(3, 5)
)},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
}
return rgbaColor;
}
},
methods: {
hexToRgba(hex, opacity) {
let rgbaColor = "";
let reg = /^#[\da-f]{6}$/i;
if (reg.test(hex)) {
rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
"0x" + hex.slice(3, 5)
)},${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);
this.options = {
color: newData.color,
legend: {
center: true,
top: '20%',
data: newData.legendItem,
textStyle: {
color: '#00DEFF'
}
},
// calculable: true,
tooltip: {
trigger: "axis",
formatter: function (params) {
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>
},
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);
this.options = {
color: newData.color,
legend: {
center: true,
top: "20%",
data: newData.legendItem,
textStyle: {
color: "#00DEFF",
},
},
// calculable: true,
tooltip: {
trigger: "axis",
formatter: function (params) {
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>
${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
},
extraCssText: 'background: #85a2eb; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
},
// grid: {
// top: 70,
// containLabel: true
// },
grid: {
top: "30%",
left: "3%",
right: "6%",
bottom: "8%",
containLabel: true,
},
xAxis: [{
type: 'category',
axisLine: {
show: true,
lineStyle: {
color: "#458ACF"
}
},
axisLabel: {
inside: false,
textStyle: {
color: 'rgba(255, 255, 255,0.7)', // x轴颜色
fontWeight: 'normal',
fontSize: '12',
lineHeight: 22
}
},
data: this.xAxisData
}],
yAxis: [{
type: "value",
axisLabel: {
textStyle: {
color: "rgba(255, 255, 255,0.7)"
}
},
splitLine: {
show: true,
lineStyle: {
color: "#458ACF"
}
},
axisLine: {
show: true,
lineStyle: {
color: "#458ACF"
}
},
axisTick: {
show: false
}
}],
series: [{
name: newData.legendItem[0],
type: "line",
smooth: true, //是否平滑
showSymbol: false,
symbol: 'circle',
symbolSize: 6,
zlevel: 3,
lineStyle: {
normal: {
color: newData.color[0],
shadowBlur: 3,
shadowColor: this.hexToRgba(newData.color[0], 0.5),
shadowOffsetY: 0
}
},
data: this.yAxisData1
}, {
name: newData.legendItem[1],
type: "line",
smooth: true,
showSymbol: false,
symbol: 'circle',
symbolSize: 8,
zlevel: 3,
lineStyle: {
normal: {
color: newData.color[1],
shadowBlur: 0,
shadowColor: this.hexToRgba(newData.color[1], 0.5),
shadowOffsetY: 0
}
},
data: this.yAxisData2
},
{
name: newData.legendItem[2],
type: "line",
smooth: true,
showSymbol: false,
symbol: 'circle',
symbolSize: 8,
zlevel: 3,
lineStyle: {
normal: {
color: newData.color[2],
shadowBlur: 3,
shadowColor: this.hexToRgba(newData.color[2], 0.5),
shadowOffsetY: 0
}
},
data: this.yAxisData3
}
]
};
});
return html;
},
extraCssText:
"background: #85a2eb; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;",
},
// grid: {
// top: 70,
// containLabel: true
// },
grid: {
top: "30%",
left: "3%",
right: "6%",
bottom: "8%",
containLabel: true,
},
xAxis: [
{
type: "category",
axisLine: {
show: true,
lineStyle: {
color: "#458ACF",
},
},
axisLabel: {
inside: false,
textStyle: {
color: "rgba(255, 255, 255,0.7)", // x轴颜色
fontWeight: "normal",
fontSize: "12",
lineHeight: 22,
},
},
data: this.xAxisData,
},
immediate: true,
deep: true,
},
],
yAxis: [
{
type: "value",
axisLabel: {
textStyle: {
color: "rgba(255, 255, 255,0.7)",
},
},
splitLine: {
show: true,
lineStyle: {
color: "#458ACF",
},
},
axisLine: {
show: true,
lineStyle: {
color: "#458ACF",
},
},
axisTick: {
show: false,
},
},
],
series: [
{
name: newData.legendItem[0],
type: "line",
smooth: true, //是否平滑
showSymbol: false,
symbol: "circle",
symbolSize: 6,
zlevel: 3,
lineStyle: {
normal: {
color: newData.color[0],
shadowBlur: 3,
shadowColor: this.hexToRgba(newData.color[0], 0.5),
shadowOffsetY: 0,
},
},
data: this.yAxisData1,
},
{
name: newData.legendItem[1],
type: "line",
smooth: true,
showSymbol: false,
symbol: "circle",
symbolSize: 8,
zlevel: 3,
lineStyle: {
normal: {
color: newData.color[1],
shadowBlur: 0,
shadowColor: this.hexToRgba(newData.color[1], 0.5),
shadowOffsetY: 0,
},
},
data: this.yAxisData2,
},
{
name: newData.legendItem[2],
type: "line",
smooth: true,
showSymbol: false,
symbol: "circle",
symbolSize: 8,
zlevel: 3,
lineStyle: {
normal: {
color: newData.color[2],
shadowBlur: 3,
shadowColor: this.hexToRgba(newData.color[2], 0.5),
shadowOffsetY: 0,
},
},
data: this.yAxisData3,
},
],
};
},
immediate: true,
deep: true,
},
},
};
</script>
......
......@@ -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);
},
},
......