zyc@123456
2 years ago
31 changed files with 5861 additions and 466 deletions
@ -0,0 +1,203 @@ |
|||
<template> |
|||
<div :class="className" :style="{height:height,width:width}" /> |
|||
</template> |
|||
|
|||
<script> |
|||
import echarts from 'echarts' |
|||
require('echarts/theme/macarons') // echarts theme |
|||
import resize from './mixins/resize' |
|||
import router from '../../../router' |
|||
|
|||
const animationDuration = 6000 |
|||
const colorList = [ |
|||
'#B5C334', |
|||
'#FCCE10', |
|||
'#E87C25', |
|||
'#C1232B', |
|||
'#27727B', |
|||
'#FE8463', |
|||
'#9BCA63', |
|||
'#FAD860', |
|||
'#F3A43B', |
|||
'#60C0DD', |
|||
'#D7504B', |
|||
'#C6E579', |
|||
'#F4E001', |
|||
'#F0805A', |
|||
'#26C0C0' |
|||
] |
|||
export default { |
|||
mixins: [resize], |
|||
props: { |
|||
className: { |
|||
type: String, |
|||
default: 'chart' |
|||
}, |
|||
width: { |
|||
type: String, |
|||
default: '100%' |
|||
}, |
|||
height: { |
|||
type: String, |
|||
default: '350px' |
|||
}, |
|||
chartData: { |
|||
type: Object, |
|||
required: true |
|||
}, |
|||
select: () => { |
|||
o => |
|||
function() { |
|||
// console.log('出入参数') |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
chart: null, |
|||
title: '' |
|||
} |
|||
}, |
|||
watch: { |
|||
chartData: { |
|||
deep: true, |
|||
handler(val) { |
|||
this.setOptions(val) |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.initChart() |
|||
}) |
|||
}, |
|||
beforeDestroy() { |
|||
if (!this.chart) { |
|||
return |
|||
} |
|||
this.chart.dispose() |
|||
this.chart = null |
|||
}, |
|||
methods: { |
|||
initChart() { |
|||
this.chart = echarts.init(this.$el, 'macarons') |
|||
this.setOptions(this.chartData) |
|||
}, |
|||
setOptions({ legend, xAxis, Data, nextUrl, rotate, unit, params } = {}) { |
|||
this.chart.setOption({ |
|||
title: { |
|||
text: legend[0], |
|||
x: 'left', |
|||
// bottom: 5, |
|||
top: 10, |
|||
left: 30, |
|||
textStyle: { |
|||
fontSize: 14, |
|||
color: '#fff', |
|||
fontWeight: 'bolder' // 字体加粗 |
|||
} |
|||
}, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
// 坐标轴指示器，坐标轴触发有效 |
|||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' |
|||
}, |
|||
formatter: '{b} : {c} ' + unit |
|||
}, |
|||
grid: { |
|||
top: 60, |
|||
left: '20', |
|||
right: '20', |
|||
bottom: 30, |
|||
containLabel: true |
|||
}, |
|||
xAxis: [ |
|||
{ |
|||
type: 'category', |
|||
data: xAxis, // ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], |
|||
axisTick: { |
|||
alignWithLabel: true |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
type: 'solid', |
|||
color: '#fff', // 左边线的颜色 |
|||
width: '1' // 坐标线的宽度 |
|||
} |
|||
}, |
|||
axisLabel: { |
|||
color: '#ffffff', |
|||
interval: 0, |
|||
rotate: rotate |
|||
} |
|||
} |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
type: 'value', |
|||
axisTick: { |
|||
show: false |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
type: 'solid', |
|||
color: '#fff', // 左边线的颜色 |
|||
width: '1' // 坐标线的宽度 |
|||
} |
|||
}, |
|||
axisLabel: { |
|||
color: '#ffffff', |
|||
show: true, |
|||
formatter: '{value}' + unit |
|||
}, |
|||
// 网格样式 |
|||
splitLine: { |
|||
show: false, |
|||
lineStyle: { |
|||
color: '#e6fdef', |
|||
width: 1, |
|||
type: 'solid' |
|||
} |
|||
} |
|||
} |
|||
], |
|||
// legend: { |
|||
// data: legend // ['pageA', 'pageB', 'pageC'] |
|||
// }, |
|||
series: [ |
|||
{ |
|||
name: legend[0], |
|||
type: 'bar', |
|||
// stack: 'vistors', |
|||
barWidth: '30', |
|||
itemStyle: { |
|||
normal: { |
|||
color: function(params) { |
|||
return colorList[params.dataIndex] |
|||
}, |
|||
label: { |
|||
show: true, |
|||
position: 'top', |
|||
textStyle: { |
|||
color: '#ffffff' |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
data: Data.seriesData |
|||
} |
|||
] |
|||
}) |
|||
var _this = this |
|||
this.chart.on('click', function(param) { |
|||
_this.callParents(param.name) |
|||
}) |
|||
}, |
|||
// 调用父组件 |
|||
callParents(name) { |
|||
this.$emit('parentFunction', name) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,207 @@ |
|||
<template> |
|||
<div :class="className" :style="{height:height,width:width}" /> |
|||
</template> |
|||
|
|||
<script> |
|||
import echarts from 'echarts' |
|||
import resize from './mixins/resize' |
|||
const colorList = [ |
|||
'#B5C334', |
|||
'#FCCE10', |
|||
'#E87C25', |
|||
'#C1232B', |
|||
'#27727B', |
|||
'#FE8463', |
|||
'#9BCA63', |
|||
'#FAD860', |
|||
'#F3A43B', |
|||
'#60C0DD', |
|||
'#D7504B', |
|||
'#C6E579', |
|||
'#F4E001', |
|||
'#F0805A', |
|||
'#26C0C0' |
|||
] |
|||
export default { |
|||
mixins: [resize], |
|||
props: { |
|||
className: { |
|||
type: String, |
|||
default: 'chart' |
|||
}, |
|||
width: { |
|||
type: String, |
|||
default: '100%' |
|||
}, |
|||
height: { |
|||
type: String, |
|||
default: '350px' |
|||
}, |
|||
chartData: { |
|||
type: Object, |
|||
required: true |
|||
} |
|||
}, |
|||
data () { |
|||
return { |
|||
chart: null, |
|||
title: '' |
|||
} |
|||
}, |
|||
watch: { |
|||
chartData: { |
|||
deep: true, |
|||
handler (val) { |
|||
this.setOptions(val) |
|||
} |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.$nextTick(() => { |
|||
this.initChart() |
|||
}) |
|||
}, |
|||
beforeDestroy () { |
|||
if (!this.chart) { |
|||
return |
|||
} |
|||
this.chart.dispose() |
|||
this.chart = null |
|||
}, |
|||
methods: { |
|||
initChart () { |
|||
this.chart = echarts.init(this.$el, 'macarons') |
|||
this.setOptions(this.chartData) |
|||
}, |
|||
setOptions ({ |
|||
title, |
|||
legend, |
|||
xAxis, |
|||
Data, |
|||
nextUrl, |
|||
rotate, |
|||
unit, |
|||
params, |
|||
grid, |
|||
barWidth |
|||
} = {}) { |
|||
this.chart.setOption({ |
|||
title: title, |
|||
// { |
|||
// text: legend[0], |
|||
// x: "left", |
|||
// // bottom: 5, |
|||
// top: 0, |
|||
// left: 30, |
|||
// textStyle: { |
|||
// fontSize: 16, |
|||
// color: "#000", |
|||
// fontWeight: "bolder" // 字体加粗 |
|||
// } |
|||
// }, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
// 坐标轴指示器，坐标轴触发有效 |
|||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' |
|||
}, |
|||
formatter: '{b} : {c} ' + unit |
|||
}, |
|||
grid: grid, |
|||
// { |
|||
// top: 15, |
|||
// left: "20", |
|||
// right: "20", |
|||
// bottom: 30, |
|||
// containLabel: true |
|||
// }, |
|||
xAxis: [ |
|||
{ |
|||
type: 'category', |
|||
data: xAxis, // ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], |
|||
axisTick: { |
|||
alignWithLabel: true |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
type: 'solid', |
|||
color: '#000', // 左边线的颜色 |
|||
width: '1' // 坐标线的宽度 |
|||
} |
|||
}, |
|||
axisLabel: { |
|||
color: '#000', |
|||
interval: 0, |
|||
rotate: rotate |
|||
} |
|||
} |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
type: 'value', |
|||
axisTick: { |
|||
show: false |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
type: 'solid', |
|||
color: '#000', // 左边线的颜色 |
|||
width: '1' // 坐标线的宽度 |
|||
} |
|||
}, |
|||
axisLabel: { |
|||
color: '#000', |
|||
show: true, |
|||
formatter: '{value}' + unit |
|||
}, |
|||
// 网格样式 |
|||
splitLine: { |
|||
show: false, |
|||
lineStyle: { |
|||
color: '#e6fdef', |
|||
width: 1, |
|||
type: 'solid' |
|||
} |
|||
} |
|||
} |
|||
], |
|||
// legend: { |
|||
// data: legend // ['pageA', 'pageB', 'pageC'] |
|||
// }, |
|||
series: [ |
|||
{ |
|||
name: legend[0], |
|||
type: 'bar', |
|||
// stack: 'vistors', |
|||
barWidth: barWidth == null ? '30' : barWidth, |
|||
itemStyle: { |
|||
normal: { |
|||
color: function (params) { |
|||
return colorList[params.dataIndex] |
|||
}, |
|||
label: { |
|||
show: true, |
|||
position: 'top', |
|||
textStyle: { |
|||
color: '#000' |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
data: Data.seriesData |
|||
} |
|||
] |
|||
}) |
|||
var _this = this |
|||
this.chart.on('click', function (param) { |
|||
// console.log('选择：' + JSON.stringify(param)) |
|||
_this.callParents(param.name) |
|||
}) |
|||
}, |
|||
// 调用父组件 |
|||
callParents (name) { |
|||
this.$emit('parentFunction', name) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,254 @@ |
|||
<template> |
|||
<div :class="className" :style="{height:height,width:width}" /> |
|||
</template> |
|||
|
|||
<script> |
|||
import echarts from 'echarts' |
|||
import resize from './mixins/resize' |
|||
// import router from '../../../router' |
|||
|
|||
const colorList = [ |
|||
'#B5C334', |
|||
'#FCCE10', |
|||
'#E87C25', |
|||
'#C1232B', |
|||
'#27727B', |
|||
'#FE8463', |
|||
'#9BCA63', |
|||
'#FAD860', |
|||
'#F3A43B', |
|||
'#60C0DD', |
|||
'#D7504B', |
|||
'#C6E579', |
|||
'#F4E001', |
|||
'#F0805A', |
|||
'#26C0C0', |
|||
'#87cefa', |
|||
'#ffd700', |
|||
'#6b8e23', |
|||
'#ff7f50', |
|||
'#da70d6', |
|||
'#32cd32', |
|||
'#cd5c5c', |
|||
'#00fa9a', |
|||
'#1e90ff', |
|||
'#ba55d3', |
|||
'#ff00ff', |
|||
'#7b68ee', |
|||
'#6495ed', |
|||
'#3cb371', |
|||
'#b8860b', |
|||
'#ff69b4', |
|||
'#ff6347', |
|||
'#ffa500', |
|||
'#40e0d0', |
|||
'#30e0e0', |
|||
'#C1232B', |
|||
'#B5C334', |
|||
'#FCCE10', |
|||
'#E87C25', |
|||
'#27727B', |
|||
'#FE8463', |
|||
'#9BCA63', |
|||
'#FAD860', |
|||
'#F3A43B', |
|||
'#60C0DD', |
|||
'#D7504B', |
|||
'#C6E579', |
|||
'#F4E001', |
|||
'#F0805A', |
|||
'#26C0C0', |
|||
'#2F9323', |
|||
'#D9B63A', |
|||
'#2E2AA4', |
|||
'#9F2E61', |
|||
'#4D670C', |
|||
'#BF675F', |
|||
'#1F814A', |
|||
'#357F88', |
|||
'#673509', |
|||
'#310937', |
|||
'#1B9637', |
|||
'#F7393C' |
|||
] |
|||
export default { |
|||
mixins: [resize], |
|||
props: { |
|||
className: { |
|||
type: String, |
|||
default: 'chart' |
|||
}, |
|||
width: { |
|||
type: String, |
|||
default: '100%' |
|||
}, |
|||
height: { |
|||
type: String, |
|||
default: '350px' |
|||
}, |
|||
chartData: { |
|||
type: Object, |
|||
required: true |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
chart: null, |
|||
title: '' |
|||
} |
|||
}, |
|||
watch: { |
|||
chartData: { |
|||
deep: true, |
|||
handler(val) { |
|||
this.setOptions(val) |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.initChart() |
|||
}) |
|||
}, |
|||
beforeDestroy() { |
|||
if (!this.chart) { |
|||
return |
|||
} |
|||
this.chart.dispose() |
|||
this.chart = null |
|||
}, |
|||
methods: { |
|||
initChart() { |
|||
this.chart = echarts.init(this.$el, 'macarons') |
|||
this.setOptions(this.chartData) |
|||
}, |
|||
setOptions({ |
|||
title, |
|||
legend, |
|||
xAxis, |
|||
Data, |
|||
nextUrl, |
|||
rotate, |
|||
unit, |
|||
params, |
|||
grid |
|||
} = {}) { |
|||
this.chart.setOption({ |
|||
title: title, |
|||
// { |
|||
// text: legend[0], |
|||
// x: "left", |
|||
// // bottom: 5, |
|||
// top: 0, |
|||
// left: 30, |
|||
// textStyle: { |
|||
// fontSize: 16, |
|||
// color: "#000", |
|||
// fontWeight: "bolder" // 字体加粗 |
|||
// } |
|||
// }, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
// 坐标轴指示器，坐标轴触发有效 |
|||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' |
|||
}, |
|||
formatter: '{b} : {c} ' + unit |
|||
}, |
|||
grid: grid, |
|||
// { |
|||
// top: 15, |
|||
// left: "20", |
|||
// right: "20", |
|||
// bottom: 30, |
|||
// containLabel: true |
|||
// }, |
|||
xAxis: [ |
|||
{ |
|||
type: 'category', |
|||
data: xAxis, // ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], |
|||
axisTick: { |
|||
alignWithLabel: true |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
type: 'solid', |
|||
color: '#000', // 左边线的颜色 |
|||
width: '1' // 坐标线的宽度 |
|||
} |
|||
}, |
|||
axisLabel: { |
|||
color: '#000', |
|||
interval: 0, |
|||
rotate: rotate |
|||
} |
|||
} |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
type: 'value', |
|||
axisTick: { |
|||
show: false |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
type: 'solid', |
|||
color: '#000', // 左边线的颜色 |
|||
width: '1' // 坐标线的宽度 |
|||
} |
|||
}, |
|||
axisLabel: { |
|||
color: '#000', |
|||
show: true, |
|||
formatter: '{value}' + unit |
|||
}, |
|||
// 网格样式 |
|||
splitLine: { |
|||
show: false, |
|||
lineStyle: { |
|||
color: '#e6fdef', |
|||
width: 1, |
|||
type: 'solid' |
|||
} |
|||
} |
|||
} |
|||
], |
|||
// legend: { |
|||
// data: legend // ['pageA', 'pageB', 'pageC'] |
|||
// }, |
|||
series: [ |
|||
{ |
|||
name: legend[0], |
|||
type: 'bar', |
|||
// stack: 'vistors', |
|||
// barWidth: barWidth == null ? "30" : barWidth, |
|||
itemStyle: { |
|||
normal: { |
|||
color: function(params) { |
|||
return colorList[params.dataIndex] |
|||
}, |
|||
label: { |
|||
show: true, |
|||
position: 'top', |
|||
textStyle: { |
|||
color: '#000' |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
data: Data.seriesData |
|||
} |
|||
] |
|||
}) |
|||
var _this = this |
|||
this.chart.on('click', function(param) { |
|||
_this.callParents(param.name) |
|||
}) |
|||
}, |
|||
// 调用父组件 |
|||
callParents(name) { |
|||
this.$emit('parentFunction', name) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,265 @@ |
|||
<template> |
|||
<div :class="className" :style="{height:height,width:width}" /> |
|||
</template> |
|||
|
|||
<script> |
|||
import echarts from 'echarts' |
|||
// require('echarts/theme/macarons') // echarts theme |
|||
import resize from './mixins/resize' |
|||
// import router from '../../../router' |
|||
|
|||
// const animationDuration = 6000 |
|||
// const colorList = [ |
|||
// '#C1232B', |
|||
// '#B5C334', |
|||
// '#FCCE10', |
|||
// '#E87C25', |
|||
// '#27727B', |
|||
// '#FE8463', |
|||
// '#9BCA63', |
|||
// '#FAD860', |
|||
// '#F3A43B', |
|||
// '#60C0DD', |
|||
// '#D7504B', |
|||
// '#C6E579', |
|||
// '#F4E001', |
|||
// '#F0805A', |
|||
// '#26C0C0' |
|||
// ] |
|||
export default { |
|||
mixins: [resize], |
|||
props: { |
|||
className: { |
|||
type: String, |
|||
default: 'chart' |
|||
}, |
|||
width: { |
|||
type: String, |
|||
default: '100%' |
|||
}, |
|||
height: { |
|||
type: String, |
|||
default: '350px' |
|||
}, |
|||
chartData: { |
|||
type: Object, |
|||
required: true |
|||
} |
|||
}, |
|||
data () { |
|||
return { |
|||
chart: null |
|||
} |
|||
}, |
|||
watch: { |
|||
chartData: { |
|||
deep: true, |
|||
handler (val) { |
|||
this.setOptions(val) |
|||
} |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.$nextTick(() => { |
|||
this.initChart() |
|||
}) |
|||
}, |
|||
beforeDestroy () { |
|||
if (!this.chart) { |
|||
return |
|||
} |
|||
this.chart.dispose() |
|||
this.chart = null |
|||
}, |
|||
methods: { |
|||
initChart () { |
|||
this.chart = echarts.init(this.$el, 'macarons') |
|||
this.setOptions(this.chartData) |
|||
}, |
|||
setOptions ({ |
|||
seriesName, |
|||
legend, |
|||
xAxis, |
|||
Data, |
|||
nextUrl, |
|||
rotate, |
|||
unit, |
|||
params, |
|||
max |
|||
} = {}) { |
|||
var option = { |
|||
title: { |
|||
text: seriesName, |
|||
// x: "left", |
|||
// bottom: 5, |
|||
top: 5, |
|||
left: 30, |
|||
textStyle: { |
|||
fontSize: 14, |
|||
color: '#fff', |
|||
fontWeight: 'bolder' // 字体加粗 |
|||
} |
|||
}, |
|||
grid: { |
|||
top: 80, |
|||
left: '20', |
|||
right: '20', |
|||
bottom: 35, |
|||
containLabel: true |
|||
}, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'line', |
|||
crossStyle: { |
|||
// color: "#999" |
|||
} |
|||
} |
|||
}, |
|||
// toolbox: { |
|||
// feature: { |
|||
// dataView: { show: true, readOnly: false }, |
|||
// magicType: { show: true, type: ["line", "bar"] }, |
|||
// restore: { show: true }, |
|||
// saveAsImage: { show: true } |
|||
// } |
|||
// }, |
|||
legend: { |
|||
data: legend, |
|||
bottom: 20, |
|||
textStyle: { |
|||
fontSize: 14, |
|||
color: '#fff' |
|||
// fontWeight: 'bolder' // 字体加粗 |
|||
} |
|||
}, |
|||
xAxis: [ |
|||
{ |
|||
type: 'category', |
|||
data: xAxis, |
|||
axisPointer: { |
|||
type: 'shadow' |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
type: 'solid', |
|||
color: '#fff', // 左边线的颜色 |
|||
width: '1' // 坐标线的宽度 |
|||
} |
|||
}, |
|||
axisLabel: { |
|||
color: '#fff', |
|||
interval: 0, |
|||
rotate: rotate |
|||
} |
|||
} |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
type: 'value', |
|||
name: '营房数量', |
|||
top: 10, |
|||
min: 0, |
|||
max: max, |
|||
interval: 10, |
|||
axisLabel: { |
|||
formatter: '{value} 栋' |
|||
}, // 网格样式 |
|||
axisLine: { |
|||
lineStyle: { |
|||
type: 'solid', |
|||
color: '#fff', // 左边线的颜色 |
|||
width: '1' // 坐标线的宽度 |
|||
} |
|||
}, |
|||
|
|||
splitLine: { |
|||
show: false, |
|||
lineStyle: { |
|||
color: '#e6fdef', |
|||
width: 1, |
|||
type: 'solid' |
|||
} |
|||
} |
|||
}, |
|||
{ |
|||
type: 'value', |
|||
name: '电气火灾报警次数', |
|||
top: 10, |
|||
min: -1, |
|||
max: 5, |
|||
interval: 1, |
|||
axisLabel: { |
|||
formatter: '{value} 次' |
|||
}, // 网格样式 |
|||
axisLine: { |
|||
lineStyle: { |
|||
type: 'solid', |
|||
color: '#fff', // 左边线的颜色 |
|||
width: '1' // 坐标线的宽度 |
|||
} |
|||
}, |
|||
|
|||
splitLine: { |
|||
show: false, |
|||
lineStyle: { |
|||
color: '#e6fdef', |
|||
width: 1, |
|||
type: 'solid' |
|||
} |
|||
} |
|||
} |
|||
], |
|||
series: [ |
|||
{ |
|||
name: Data[0].name, |
|||
type: 'bar', |
|||
barWidth: '30', |
|||
itemStyle: { |
|||
normal: { |
|||
// 好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了， |
|||
// color: function(params) { |
|||
// return colorList[params.dataIndex]; |
|||
// }, //以下为是否显示，显示位置和显示格式的设置了 |
|||
label: { |
|||
show: true, |
|||
position: 'top', |
|||
formatter: '{c}', |
|||
// formatter: "{b}\n{c}" |
|||
textStyle: { |
|||
color: '#fff' |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
data: Data[0].data |
|||
}, |
|||
{ |
|||
name: Data[1].name, |
|||
type: 'line', |
|||
barWidth: '30', |
|||
yAxisIndex: 1, |
|||
itemStyle: { |
|||
normal: { |
|||
// 好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了， |
|||
color: '#fff' |
|||
} |
|||
}, |
|||
data: Data[1].data |
|||
} |
|||
] |
|||
} |
|||
|
|||
this.chart.setOption(option) |
|||
var _this = this |
|||
this.chart.on('click', function (param) { |
|||
_this.callParents(param.name) |
|||
}) |
|||
}, |
|||
// 调用父组件 |
|||
callParents (name) { |
|||
this.$emit('mixedFunction', name) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,239 @@ |
|||
<template> |
|||
<div :class="className" :style="{height:height,width:width}" /> |
|||
</template> |
|||
|
|||
<script> |
|||
import echarts from 'echarts' |
|||
// require('echarts/theme/macarons') // echarts theme |
|||
import resize from './mixins/resize' |
|||
// import router from '../../../router' |
|||
|
|||
// const animationDuration = 6000 |
|||
const colorList = [ |
|||
'#87cefa', |
|||
'#ffd700', |
|||
'#6b8e23', |
|||
'#ff7f50', |
|||
'#da70d6', |
|||
'#32cd32', |
|||
'#cd5c5c', |
|||
'#00fa9a', |
|||
'#1e90ff', |
|||
'#ba55d3', |
|||
'#ff00ff', |
|||
'#7b68ee', |
|||
'#6495ed', |
|||
'#3cb371', |
|||
'#b8860b', |
|||
'#ff69b4', |
|||
'#ff6347', |
|||
'#ffa500', |
|||
'#40e0d0', |
|||
'#30e0e0' |
|||
] |
|||
export default { |
|||
mixins: [resize], |
|||
props: { |
|||
className: { |
|||
type: String, |
|||
default: 'chart' |
|||
}, |
|||
width: { |
|||
type: String, |
|||
default: '100%' |
|||
}, |
|||
height: { |
|||
type: String, |
|||
default: '350px' |
|||
}, |
|||
chartData: { |
|||
type: Object, |
|||
required: true |
|||
} |
|||
}, |
|||
data () { |
|||
return { |
|||
chart: null |
|||
} |
|||
}, |
|||
watch: { |
|||
chartData: { |
|||
deep: true, |
|||
handler (val) { |
|||
this.setOptions(val) |
|||
} |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.$nextTick(() => { |
|||
this.initChart() |
|||
}) |
|||
}, |
|||
beforeDestroy () { |
|||
if (!this.chart) { |
|||
return |
|||
} |
|||
this.chart.dispose() |
|||
this.chart = null |
|||
}, |
|||
methods: { |
|||
initChart () { |
|||
this.chart = echarts.init(this.$el, 'macarons') |
|||
this.setOptions(this.chartData) |
|||
}, |
|||
setOptions ({ |
|||
barname, |
|||
legend, |
|||
xAxis, |
|||
Data, |
|||
nextUrl, |
|||
rotate, |
|||
unit, |
|||
params |
|||
} = {}) { |
|||
const list = [] |
|||
for (var i = 0; i < legend.length; i++) { |
|||
const item = { |
|||
name: legend[i], |
|||
type: 'bar', |
|||
barGap: 0, |
|||
// stack: 'vistors', |
|||
// barWidth: '30', |
|||
itemStyle: { |
|||
normal: { |
|||
label: { |
|||
show: true, |
|||
position: 'top', |
|||
textStyle: { |
|||
color: colorList[i] // '#1e90ff' |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
data: Data.seriesData[i].value |
|||
// animationDuration |
|||
} |
|||
list.push(item) |
|||
} |
|||
|
|||
this.chart.setOption({ |
|||
// title: { |
|||
// text: barname, |
|||
// // subtext: '纯属虚构', |
|||
// x: "center", |
|||
// bottom: 10, |
|||
// // top: 0, |
|||
// textStyle: { |
|||
// fontSize: 16 |
|||
// } |
|||
// }, |
|||
title: { |
|||
text: barname, |
|||
x: 'center', |
|||
// bottom: 10, |
|||
top: 2, |
|||
textStyle: { |
|||
fontSize: 18, |
|||
color: '#2fd5ff', |
|||
fontWeight: 'bolder' // 字体加粗 |
|||
} |
|||
}, |
|||
// title: { |
|||
// text: barname, |
|||
// x: 'left', |
|||
// // bottom: 5, |
|||
// top: 10, |
|||
// left: 30, |
|||
// textStyle: { |
|||
// fontSize: 14, |
|||
// color: '#fff', |
|||
// fontWeight: 'bolder' // 字体加粗 |
|||
// } |
|||
// }, |
|||
|
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
// 坐标轴指示器，坐标轴触发有效 |
|||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' |
|||
} |
|||
// formatter: '{b} : {c}' |
|||
}, |
|||
grid: { |
|||
top: 80, |
|||
left: '2%', |
|||
right: '2%', |
|||
bottom: 5, |
|||
containLabel: true |
|||
}, |
|||
legend: { |
|||
data: legend, // ['pageA', 'pageB', 'pageC'] |
|||
left: 10, |
|||
top: 40, |
|||
textStyle: { |
|||
color: '#000' |
|||
} |
|||
}, |
|||
xAxis: [ |
|||
{ |
|||
type: 'category', |
|||
data: xAxis, // ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], |
|||
axisTick: { |
|||
alignWithLabel: true |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
type: 'solid', |
|||
color: '#666', // 左边线的颜色 |
|||
width: '1'// 坐标线的宽度 |
|||
} |
|||
}, |
|||
axisLabel: { |
|||
interval: 0, |
|||
rotate: rotate |
|||
} |
|||
} |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
type: 'value', |
|||
axisTick: { |
|||
show: false |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
type: 'solid', |
|||
color: '#666', // 左边线的颜色 |
|||
width: '1'// 坐标线的宽度 |
|||
} |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
formatter: '{value}' + unit |
|||
}, |
|||
// 网格样式 |
|||
splitLine: { |
|||
show: false, |
|||
lineStyle: { |
|||
color: '#e6fdef', |
|||
width: 1, |
|||
type: 'solid' |
|||
} |
|||
} |
|||
} |
|||
], |
|||
|
|||
series: list |
|||
}) |
|||
var _this = this |
|||
this.chart.on('click', function (param) { |
|||
_this.callParents(param.name) |
|||
}) |
|||
}, |
|||
// 调用父组件 |
|||
callParents (name) { |
|||
this.$emit('charsFunction', name) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,172 @@ |
|||
<template> |
|||
<div :class="className" :style="{height:height,width:width}" id="er"/> |
|||
</template> |
|||
|
|||
<script> |
|||
import echarts from 'echarts' |
|||
// require('echarts/theme/macarons') // echarts theme |
|||
import resize from './mixins/resize' |
|||
|
|||
export default { |
|||
mixins: [resize], |
|||
props: { |
|||
className: { |
|||
type: String, |
|||
default: 'chart' |
|||
}, |
|||
width: { |
|||
type: String, |
|||
default: '100%' |
|||
}, |
|||
height: { |
|||
type: String, |
|||
// default: '290px' |
|||
default: '250px' |
|||
}, |
|||
chartData: { |
|||
type: Object, |
|||
required: true |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
chart: null |
|||
} |
|||
}, |
|||
watch: { |
|||
chartData: { |
|||
deep: true, |
|||
handler(val) { |
|||
this.chart.resize() |
|||
this.setOptions(val) |
|||
} |
|||
}, |
|||
height: { |
|||
deep: true, |
|||
handler(val) { |
|||
this.chart.resize() |
|||
this.setOptions(val) |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.initChart() |
|||
}) |
|||
}, |
|||
beforeDestroy() { |
|||
if (!this.chart) { |
|||
return |
|||
} |
|||
this.chart.dispose() |
|||
this.chart = null |
|||
}, |
|||
methods: { |
|||
initChart() { |
|||
this.chart = echarts.init(this.$el, 'macarons') |
|||
this.chart.resize() |
|||
this.setOptions(this.chartData, true) |
|||
}, |
|||
setOptions({ |
|||
title, |
|||
legend, |
|||
yAxis, |
|||
series, |
|||
unit, |
|||
color |
|||
} = {}) { |
|||
this.chart.setOption({ |
|||
title: { |
|||
text: title, |
|||
// subtext: '纯属虚构', |
|||
// x: 'left', |
|||
bottom: 10, |
|||
x: 'center', |
|||
// top: 0, |
|||
textStyle: { |
|||
fontSize: 18 |
|||
} |
|||
}, |
|||
color: color, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { // 坐标轴指示器，坐标轴触发有效 |
|||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' |
|||
} |
|||
// formatter: '{b} : {c} ' + unit |
|||
}, |
|||
legend: { |
|||
data: legend, |
|||
textStyle: { |
|||
color: '#fff', |
|||
fontSize: 16 |
|||
} |
|||
}, |
|||
// grid: { |
|||
// left: '3%', |
|||
// right: '4%', |
|||
// bottom: '3%', |
|||
// containLabel: true |
|||
// }, |
|||
grid: { |
|||
left: 10, |
|||
right: 10, |
|||
bottom: 10, |
|||
top: 50, |
|||
containLabel: true |
|||
}, |
|||
xAxis: { |
|||
type: 'value', |
|||
axisLine: { |
|||
lineStyle: { |
|||
type: 'solid', |
|||
color: '#fff', // 左边线的颜色 |
|||
width: '1'// 坐标线的宽度 |
|||
}, |
|||
textStyle: { |
|||
color: '#fff', |
|||
fontSize: 16 |
|||
} |
|||
}, |
|||
axisLabel: { |
|||
textStyle: { |
|||
color: '#fff', |
|||
fontSize: 16 |
|||
} |
|||
} |
|||
}, |
|||
yAxis: { |
|||
type: 'category', |
|||
data: yAxis, |
|||
triggerEvent: true, |
|||
axisLine: { |
|||
lineStyle: { |
|||
type: 'solid', |
|||
color: '#fff', // 左边线的颜色 |
|||
width: '1'// 坐标线的宽度 |
|||
}, |
|||
textStyle: { |
|||
color: '#fff' |
|||
} |
|||
}, |
|||
axisLabel: { |
|||
textStyle: { |
|||
color: '#fff', |
|||
fontSize: 16 |
|||
} |
|||
} |
|||
}, |
|||
series: series |
|||
}) |
|||
this.chart.on('click', (param) => { |
|||
this.$emit('child-event', param.value) |
|||
// this.callParents(param) |
|||
}) |
|||
}, |
|||
// 调用父组件 |
|||
callParents(name) { |
|||
this.$emit('pieChartFunction', name) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,254 @@ |
|||
<template> |
|||
<div :class="className" :style="{height:height,width:width}" /> |
|||
</template> |
|||
|
|||
<script> |
|||
import echarts from 'echarts' |
|||
// require('echarts/theme/macarons') // echarts theme |
|||
import resize from './mixins/resize' |
|||
// import router from '../../../router' |
|||
// import { constants } from 'crypto' |
|||
|
|||
// // const animationDuration = 6000 |
|||
// const colorList = [ |
|||
// '#87cefa', |
|||
// '#ffd700', |
|||
// '#6b8e23', |
|||
// '#ff7f50', |
|||
// '#da70d6', |
|||
// '#32cd32', |
|||
// '#cd5c5c', |
|||
// '#00fa9a', |
|||
// '#1e90ff', |
|||
// '#ba55d3', |
|||
// '#ff00ff', |
|||
// '#7b68ee', |
|||
// '#6495ed', |
|||
// '#3cb371', |
|||
// '#b8860b', |
|||
// '#ff69b4', |
|||
// '#ff6347', |
|||
// '#ffa500', |
|||
// '#40e0d0', |
|||
// '#30e0e0' |
|||
// ] |
|||
export default { |
|||
mixins: [resize], |
|||
props: { |
|||
className: { |
|||
type: String, |
|||
default: 'chart' |
|||
}, |
|||
width: { |
|||
type: String, |
|||
default: '100%' |
|||
}, |
|||
height: { |
|||
type: String, |
|||
default: '350px' |
|||
}, |
|||
chartData: { |
|||
type: Object, |
|||
required: true |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
chart: null |
|||
} |
|||
}, |
|||
watch: { |
|||
chartData: { |
|||
deep: true, |
|||
handler(val) { |
|||
this.setOptions(val) |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.initChart() |
|||
}) |
|||
}, |
|||
beforeDestroy() { |
|||
if (!this.chart) { |
|||
return |
|||
} |
|||
this.chart.dispose() |
|||
this.chart = null |
|||
}, |
|||
methods: { |
|||
initChart() { |
|||
this.chart = echarts.init(this.$el, 'macarons') |
|||
this.setOptions(this.chartData) |
|||
}, |
|||
setOptions({ |
|||
barname, |
|||
legend, |
|||
xAxis, |
|||
Data, |
|||
nextUrl, |
|||
rotate, |
|||
unit, |
|||
params |
|||
} = {}) { |
|||
const list = [] |
|||
var sum = [] |
|||
for (var i = 0; i < legend.length; i++) { |
|||
const item = { |
|||
name: legend[i], |
|||
type: 'bar', |
|||
stack: 'one', // 在一行 |
|||
barGap: 0, |
|||
itemStyle: { |
|||
// normal: { |
|||
// label: { |
|||
// show: true, |
|||
// position: "top", |
|||
// textStyle: { |
|||
// color: colorList[i] //'#1e90ff' |
|||
// } |
|||
// } |
|||
// } |
|||
}, |
|||
data: Data.seriesData[i].value |
|||
// animationDuration |
|||
} |
|||
list.push(item) |
|||
|
|||
// --计算每个item总数 |
|||
var itemNumber = 0 |
|||
for (var j = 0; j < Data.seriesData[i].value.length; j++) { |
|||
itemNumber += parseInt(Data.seriesData[i].value[j]) |
|||
} |
|||
sum.push(itemNumber) |
|||
} |
|||
|
|||
// var last = { |
|||
// name: "总计", |
|||
// type: "bar", |
|||
// stack: "one", |
|||
// label: { |
|||
// normal: { |
|||
// show: true, |
|||
// position: "top", |
|||
// textStyle: { |
|||
// color: "#000" |
|||
// }, |
|||
// formatter: "{c}" |
|||
// } |
|||
// }, |
|||
// data: [1, 0, 0, 0, 0, 0] |
|||
// }; |
|||
// list.push(last); |
|||
|
|||
var Option = { |
|||
title: { |
|||
text: barname, |
|||
// // subtext: '纯属虚构', |
|||
x: 'left', |
|||
// bottom: 10, |
|||
top: 10, |
|||
left: 30, |
|||
textStyle: { |
|||
// fontSize: 16 |
|||
fontSize: 14, |
|||
color: '#fff', |
|||
fontWeight: 'bolder' // 字体加粗 |
|||
} |
|||
}, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
// 坐标轴指示器，坐标轴触发有效 |
|||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' |
|||
} |
|||
// formatter: '{b} : {c}' |
|||
}, |
|||
// legend: { |
|||
// data: legend, // ['pageA', 'pageB', 'pageC'] |
|||
// x: 'center', |
|||
// // left: 0, |
|||
// bottom: 10, |
|||
// textStyle: { |
|||
// color: '#fff' |
|||
// // fontSize: 16 |
|||
// } |
|||
// }, |
|||
grid: { |
|||
top: 60, |
|||
left: 20, |
|||
right: 20, |
|||
bottom: 20, |
|||
containLabel: true |
|||
}, |
|||
xAxis: [ |
|||
{ |
|||
type: 'category', |
|||
data: xAxis, // ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], |
|||
axisTick: { |
|||
alignWithLabel: true |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
type: 'solid', |
|||
color: '#fff', // 左边线的颜色 |
|||
width: '1' // 坐标线的宽度 |
|||
} |
|||
}, |
|||
axisLabel: { |
|||
interval: 0, |
|||
rotate: rotate |
|||
} |
|||
} |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
type: 'value', |
|||
axisTick: { |
|||
show: false |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
type: 'solid', |
|||
color: '#fff', // 左边线的颜色 |
|||
width: '1' // 坐标线的宽度 |
|||
} |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
formatter: '{value}' + unit |
|||
}, |
|||
// 网格样式 |
|||
splitLine: { |
|||
show: false, |
|||
lineStyle: { |
|||
color: '#e6fdef', |
|||
width: 1, |
|||
type: 'solid' |
|||
} |
|||
} |
|||
} |
|||
], |
|||
|
|||
series: list |
|||
} |
|||
|
|||
// //加载页面时候替换最后一个series的formatter |
|||
// var series = Option["series"]; |
|||
// //加载页 |
|||
// series[series.length - 1]["label"]["normal"]["formatter"] = ""; |
|||
|
|||
this.chart.setOption(Option) |
|||
var _this = this |
|||
this.chart.on('click', function(param) { |
|||
_this.callParents(param.name) |
|||
}) |
|||
}, |
|||
// 调用父组件 |
|||
callParents(name) { |
|||
this.$emit('barCharsOneFunction', name) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,239 @@ |
|||
<template> |
|||
<div :class="className" :style="{height:height,width:width}" /> |
|||
</template> |
|||
|
|||
<script> |
|||
import echarts from 'echarts' |
|||
// require('echarts/theme/macarons') // echarts theme |
|||
import resize from './mixins/resize' |
|||
// import router from '../../../router' |
|||
|
|||
// const animationDuration = 6000 |
|||
const colorList = [ |
|||
'#87cefa', |
|||
'#ffd700', |
|||
'#6b8e23', |
|||
'#ff7f50', |
|||
'#da70d6', |
|||
'#32cd32', |
|||
'#cd5c5c', |
|||
'#00fa9a', |
|||
'#1e90ff', |
|||
'#ba55d3', |
|||
'#ff00ff', |
|||
'#7b68ee', |
|||
'#6495ed', |
|||
'#3cb371', |
|||
'#b8860b', |
|||
'#ff69b4', |
|||
'#ff6347', |
|||
'#ffa500', |
|||
'#40e0d0', |
|||
'#30e0e0' |
|||
] |
|||
export default { |
|||
mixins: [resize], |
|||
props: { |
|||
className: { |
|||
type: String, |
|||
default: 'chart' |
|||
}, |
|||
width: { |
|||
type: String, |
|||
default: '100%' |
|||
}, |
|||
height: { |
|||
type: String, |
|||
default: '350px' |
|||
}, |
|||
chartData: { |
|||
type: Object, |
|||
required: true |
|||
} |
|||
}, |
|||
data () { |
|||
return { |
|||
chart: null |
|||
} |
|||
}, |
|||
watch: { |
|||
chartData: { |
|||
deep: true, |
|||
handler (val) { |
|||
this.setOptions(val) |
|||
} |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.$nextTick(() => { |
|||
this.initChart() |
|||
}) |
|||
}, |
|||
beforeDestroy () { |
|||
if (!this.chart) { |
|||
return |
|||
} |
|||
this.chart.dispose() |
|||
this.chart = null |
|||
}, |
|||
methods: { |
|||
initChart () { |
|||
this.chart = echarts.init(this.$el, 'macarons') |
|||
this.setOptions(this.chartData) |
|||
}, |
|||
setOptions ({ |
|||
barname, |
|||
legend, |
|||
xAxis, |
|||
Data, |
|||
nextUrl, |
|||
rotate, |
|||
unit, |
|||
params |
|||
} = {}) { |
|||
const list = [] |
|||
for (var i = 0; i < legend.length; i++) { |
|||
const item = { |
|||
name: legend[i], |
|||
type: 'bar', |
|||
barGap: 0, |
|||
// stack: 'vistors', |
|||
// barWidth: '30', |
|||
itemStyle: { |
|||
normal: { |
|||
label: { |
|||
show: true, |
|||
position: 'top', |
|||
textStyle: { |
|||
color: colorList[i] // '#1e90ff' |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
data: Data.seriesData[i].value |
|||
// animationDuration |
|||
} |
|||
list.push(item) |
|||
} |
|||
|
|||
this.chart.setOption({ |
|||
// title: { |
|||
// text: barname, |
|||
// // subtext: '纯属虚构', |
|||
// x: "center", |
|||
// bottom: 10, |
|||
// // top: 0, |
|||
// textStyle: { |
|||
// fontSize: 16 |
|||
// } |
|||
// }, |
|||
title: { |
|||
text: barname, |
|||
x: 'center', |
|||
// bottom: 10, |
|||
top: 2, |
|||
textStyle: { |
|||
fontSize: 18, |
|||
color: '#2fd5ff', |
|||
fontWeight: 'bolder' // 字体加粗 |
|||
} |
|||
}, |
|||
// title: { |
|||
// text: barname, |
|||
// x: 'left', |
|||
// // bottom: 5, |
|||
// top: 10, |
|||
// left: 30, |
|||
// textStyle: { |
|||
// fontSize: 14, |
|||
// color: '#fff', |
|||
// fontWeight: 'bolder' // 字体加粗 |
|||
// } |
|||
// }, |
|||
|
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
// 坐标轴指示器，坐标轴触发有效 |
|||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' |
|||
} |
|||
// formatter: '{b} : {c}' |
|||
}, |
|||
grid: { |
|||
top: 20, |
|||
left: '2%', |
|||
right: '2%', |
|||
bottom: 5, |
|||
containLabel: true |
|||
}, |
|||
// legend: { |
|||
// data: legend, // ['pageA', 'pageB', 'pageC'] |
|||
// left: 10, |
|||
// top: 20, |
|||
// textStyle: { |
|||
// color: '#000' |
|||
// } |
|||
// }, |
|||
xAxis: [ |
|||
{ |
|||
type: 'category', |
|||
data: xAxis, // ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], |
|||
axisTick: { |
|||
alignWithLabel: true |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
type: 'solid', |
|||
color: '#666', // 左边线的颜色 |
|||
width: '1'// 坐标线的宽度 |
|||
} |
|||
}, |
|||
axisLabel: { |
|||
interval: 0, |
|||
rotate: rotate |
|||
} |
|||
} |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
type: 'value', |
|||
axisTick: { |
|||
show: false |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
type: 'solid', |
|||
color: '#666', // 左边线的颜色 |
|||
width: '1'// 坐标线的宽度 |
|||
} |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
formatter: '{value}' + unit |
|||
}, |
|||
// 网格样式 |
|||
splitLine: { |
|||
show: false, |
|||
lineStyle: { |
|||
color: '#e6fdef', |
|||
width: 1, |
|||
type: 'solid' |
|||
} |
|||
} |
|||
} |
|||
], |
|||
|
|||
series: list |
|||
}) |
|||
var _this = this |
|||
this.chart.on('click', function (param) { |
|||
_this.callParents(param.name) |
|||
}) |
|||
}, |
|||
// 调用父组件 |
|||
callParents (name) { |
|||
this.$emit('charsFunction', name) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,185 @@ |
|||
<template> |
|||
<div :class="className" :style="{height:height,width:width}" /> |
|||
</template> |
|||
|
|||
<script> |
|||
import echarts from 'echarts' |
|||
// require('echarts/theme/macarons') // echarts theme |
|||
import resize from './mixins/resize' |
|||
import router from '../../../router' |
|||
|
|||
export default { |
|||
mixins: [resize], |
|||
props: { |
|||
className: { |
|||
type: String, |
|||
default: 'chart' |
|||
}, |
|||
width: { |
|||
type: String, |
|||
default: '100%' |
|||
}, |
|||
height: { |
|||
type: String, |
|||
default: '350px' |
|||
}, |
|||
autoResize: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
chartData: { |
|||
type: Object, |
|||
required: true |
|||
}, |
|||
nextUrl: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
chart: null |
|||
} |
|||
}, |
|||
watch: { |
|||
chartData: { |
|||
deep: true, |
|||
handler(val) { |
|||
this.setOptions(val) |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.initChart() |
|||
}) |
|||
}, |
|||
beforeDestroy() { |
|||
if (!this.chart) { |
|||
return |
|||
} |
|||
this.chart.dispose() |
|||
this.chart = null |
|||
}, |
|||
methods: { |
|||
initChart() { |
|||
this.chart = echarts.init(this.$el, 'macarons') |
|||
this.setOptions(this.chartData) |
|||
}, |
|||
setOptions({ legend, xAxis, Data, nextUrl, params } = {}) { |
|||
this.chart.setOption({ |
|||
title: { |
|||
text: legend[0], |
|||
// subtext: '纯属虚构', |
|||
x: 'center', |
|||
// bottom: 10 |
|||
textStyle: { |
|||
fontSize: 16 |
|||
}, |
|||
bottom: 10 |
|||
// top: 0 |
|||
}, |
|||
// backgroundColor: '#F7F7F7', |
|||
xAxis: { |
|||
data: xAxis, // ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
|||
boundaryGap: false, |
|||
axisTick: { |
|||
show: false |
|||
} |
|||
}, |
|||
grid: { |
|||
left: 10, |
|||
right: 10, |
|||
bottom: 40, |
|||
top: 10, |
|||
containLabel: true |
|||
}, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'cross' |
|||
}, |
|||
padding: [5, 10] |
|||
}, |
|||
yAxis: { |
|||
axisTick: { |
|||
show: false |
|||
} |
|||
}, |
|||
// legend: { |
|||
// data: legend //["name1","name2"] |
|||
// }, |
|||
series: [ |
|||
{ |
|||
name: legend[0], // "name1" |
|||
itemStyle: { |
|||
normal: { |
|||
color: '#FF005A', |
|||
lineStyle: { |
|||
color: '#FF005A', |
|||
width: 2 |
|||
} |
|||
} |
|||
}, |
|||
smooth: true, |
|||
type: 'line', |
|||
data: Data.seriesData, |
|||
animationDuration: 2800, |
|||
animationEasing: 'cubicInOut' |
|||
} |
|||
// ,{ |
|||
// name: 'actual', // "name2" |
|||
// smooth: true, |
|||
// type: 'line', |
|||
// itemStyle: { |
|||
// normal: { |
|||
// color: '#3888fa', |
|||
// lineStyle: { |
|||
// color: '#3888fa', |
|||
// width: 2 |
|||
// }, |
|||
// areaStyle: { |
|||
// color: '#f3f8ff' |
|||
// } |
|||
// } |
|||
// }, |
|||
// data: actualData, |
|||
// animationDuration: 2800, |
|||
// animationEasing: 'quadraticOut' |
|||
// } |
|||
] |
|||
}) |
|||
this.chart.on('click', function(param) { |
|||
if (nextUrl.length > 0) { |
|||
// 判断 nexurl数与那个列 |
|||
var url = '' |
|||
for (var i = 0; i < nextUrl.length; i++) { |
|||
if (nextUrl[i].name === param.name) { |
|||
url = nextUrl[i].url |
|||
} |
|||
} |
|||
// --在当前路径新窗口打开 |
|||
router.push({ |
|||
path: url, |
|||
query: { |
|||
id: param.name, |
|||
start: params.start, |
|||
end: params.end |
|||
} |
|||
}) |
|||
// --在最外层新窗口打开 |
|||
// let routeUrl = router.resolve({ |
|||
// path: './situationMapZhiDui', |
|||
// query: { id: 96 } |
|||
// }) |
|||
// window.open(routeUrl.href, '_blank') |
|||
|
|||
// 方法1：<router-link :to="{ name: 'details',params: { id: 123 }}">点击按钮</router-link> |
|||
// 方法2：this.$router.push({name:'details',params:{id:123}}) |
|||
// 方法3: this.$router.push({name:'detail',params:{id:123,name:'lisi'}}) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,133 @@ |
|||
<template> |
|||
<div :class="className" :style="{height:height,width:width}" /> |
|||
</template> |
|||
|
|||
<script> |
|||
import echarts from 'echarts' |
|||
// require('echarts/theme/macarons') // echarts theme |
|||
import resize from './mixins/resize' |
|||
import router from '../../../router' |
|||
|
|||
export default { |
|||
mixins: [resize], |
|||
props: { |
|||
className: { |
|||
type: String, |
|||
default: 'chart' |
|||
}, |
|||
width: { |
|||
type: String, |
|||
default: '100%' |
|||
}, |
|||
height: { |
|||
type: String, |
|||
default: '350px' |
|||
}, |
|||
autoResize: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
chartData: { |
|||
type: Object, |
|||
required: true |
|||
}, |
|||
nextUrl: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
chart: null |
|||
} |
|||
}, |
|||
watch: { |
|||
chartData: { |
|||
deep: true, |
|||
handler(val) { |
|||
this.setOptions(val) |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.initChart() |
|||
}) |
|||
}, |
|||
beforeDestroy() { |
|||
if (!this.chart) { |
|||
return |
|||
} |
|||
this.chart.dispose() |
|||
this.chart = null |
|||
}, |
|||
methods: { |
|||
initChart() { |
|||
this.chart = echarts.init(this.$el, 'macarons') |
|||
this.setOptions(this.chartData) |
|||
}, |
|||
setOptions({ title, xAxis, series, nextUrl,url } = {}) { |
|||
|
|||
this.chart.setOption({ |
|||
title: { |
|||
text: title, |
|||
x: 'center', |
|||
// bottom: 10, |
|||
top: 10, |
|||
textStyle: { |
|||
fontSize: 20, |
|||
color: '#8657c8', |
|||
} |
|||
}, |
|||
// grid: { |
|||
// left: 10, |
|||
// right: 10, |
|||
// bottom: 10, |
|||
// top: 10, |
|||
// containLabel: true |
|||
// }, |
|||
xAxis: { |
|||
type: 'category', |
|||
boundaryGap: false, |
|||
data:xAxis |
|||
}, |
|||
yAxis: { |
|||
type: 'value' |
|||
}, |
|||
series: series |
|||
|
|||
}) |
|||
this.chart.on('click', function(param) { |
|||
if (nextUrl.length > 0) { |
|||
// 判断 nexurl数与那个列 |
|||
var url = '' |
|||
for (var i = 0; i < nextUrl.length; i++) { |
|||
if (nextUrl[i].name === param.name) { |
|||
url = nextUrl[i].url |
|||
} |
|||
} |
|||
// --在当前路径新窗口打开 |
|||
router.push({ |
|||
path: url, |
|||
query: { |
|||
id: param.name, |
|||
start: params.start, |
|||
end: params.end |
|||
} |
|||
}) |
|||
// --在最外层新窗口打开 |
|||
// let routeUrl = router.resolve({ |
|||
// path: './situationMapZhiDui', |
|||
// query: { id: 96 } |
|||
// }) |
|||
// window.open(routeUrl.href, '_blank') |
|||
|
|||
// 方法1：<router-link :to="{ name: 'details',params: { id: 123 }}">点击按钮</router-link> |
|||
// 方法2：this.$router.push({name:'details',params:{id:123}}) |
|||
// 方法3: this.$router.push({name:'detail',params:{id:123,name:'lisi'}}) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,232 @@ |
|||
<template> |
|||
<div :class="className" :style="{height:height,width:width}" /> |
|||
</template> |
|||
|
|||
<script> |
|||
import echarts from 'echarts' |
|||
// require('echarts/theme/macarons') // echarts theme |
|||
import resize from './mixins/resize' |
|||
import router from '../../../router' |
|||
const colorList = [ |
|||
'#87cefa', |
|||
'#ffd700', |
|||
'#6b8e23', |
|||
'#ff7f50', |
|||
'#da70d6', |
|||
'#32cd32', |
|||
'#cd5c5c', |
|||
'#00fa9a', |
|||
'#1e90ff', |
|||
'#ba55d3', |
|||
'#ff00ff', |
|||
'#7b68ee', |
|||
'#6495ed', |
|||
'#3cb371', |
|||
'#b8860b', |
|||
'#ff69b4', |
|||
'#ff6347', |
|||
'#ffa500', |
|||
'#40e0d0', |
|||
'#30e0e0' |
|||
] |
|||
// const colorList1 = [ |
|||
// '#C1232B', |
|||
// '#B5C334', |
|||
// '#FCCE10', |
|||
// '#E87C25', |
|||
// '#27727B', |
|||
// '#FE8463', |
|||
// '#9BCA63', |
|||
// '#FAD860', |
|||
// '#F3A43B', |
|||
// '#60C0DD', |
|||
// '#D7504B', |
|||
// '#C6E579', |
|||
// '#F4E001', |
|||
// '#F0805A', |
|||
// '#26C0C0' |
|||
// ] |
|||
// const colorList2 = [ |
|||
// '#2F9323', |
|||
// '#D9B63A', |
|||
// '#2E2AA4', |
|||
// '#9F2E61', |
|||
// '#4D670C', |
|||
// '#BF675F', |
|||
// '#1F814A', |
|||
// '#357F88', |
|||
// '#673509', |
|||
// '#310937', |
|||
// '#1B9637', |
|||
// '#F7393C' |
|||
// ] |
|||
|
|||
export default { |
|||
mixins: [resize], |
|||
props: { |
|||
className: { |
|||
type: String, |
|||
default: 'chart' |
|||
}, |
|||
width: { |
|||
type: String, |
|||
default: '100%' |
|||
}, |
|||
height: { |
|||
type: String, |
|||
default: '385px' |
|||
}, |
|||
autoResize: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
chartData: { |
|||
type: Object, |
|||
required: true |
|||
}, |
|||
nextUrl: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
chart: null |
|||
} |
|||
}, |
|||
watch: { |
|||
chartData: { |
|||
deep: true, |
|||
handler(val) { |
|||
this.setOptions(val) |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.initChart() |
|||
}) |
|||
}, |
|||
beforeDestroy() { |
|||
if (!this.chart) { |
|||
return |
|||
} |
|||
this.chart.dispose() |
|||
this.chart = null |
|||
}, |
|||
methods: { |
|||
initChart() { |
|||
this.chart = echarts.init(this.$el, 'macarons') |
|||
this.setOptions(this.chartData) |
|||
}, |
|||
setOptions({ name, legend, xAxis, Data, nextUrl, unit, params } = {}) { |
|||
const list = [] |
|||
for (var i = 0; i < legend.length; i++) { |
|||
const item = { |
|||
name: legend[i], // "name1" |
|||
itemStyle: { |
|||
normal: { |
|||
color: colorList[i], |
|||
lineStyle: { |
|||
color: colorList[i], |
|||
width: 2 |
|||
} |
|||
} |
|||
}, |
|||
// smooth: true, |
|||
type: 'line', |
|||
stack: '总量', // 叠加 |
|||
areaStyle: {}, // 叠加区域颜色 |
|||
data: Data.seriesData[i].value, |
|||
animationDuration: 2800, |
|||
animationEasing: 'cubicInOut' |
|||
} |
|||
list.push(item) |
|||
} |
|||
|
|||
this.chart.setOption({ |
|||
title: { |
|||
text: name, |
|||
// subtext: '纯属虚构', |
|||
x: 'center', |
|||
bottom: 10, |
|||
// top: 5, |
|||
textStyle: { |
|||
fontSize: 16 |
|||
} |
|||
}, |
|||
// backgroundColor: '#F7F7F7', |
|||
xAxis: { |
|||
data: xAxis, // ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
|||
boundaryGap: false, |
|||
axisTick: { |
|||
show: false |
|||
} |
|||
// axisLabel: { |
|||
// interval: 0, |
|||
// rotate: 40 |
|||
// } |
|||
}, |
|||
grid: { |
|||
left: 10, |
|||
right: 10, |
|||
bottom: 50, |
|||
top: 40, |
|||
containLabel: true |
|||
}, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'cross' |
|||
}, |
|||
padding: [5, 10] |
|||
// formatter: '{a} {b} : {c} ' + unit |
|||
}, |
|||
yAxis: { |
|||
axisTick: { |
|||
show: false |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
formatter: '{value}' + unit |
|||
} |
|||
}, |
|||
legend: { |
|||
data: legend // ["name1","name2"] |
|||
}, |
|||
series: list |
|||
}) |
|||
this.chart.on('click', function(param) { |
|||
if (nextUrl.length > 0) { |
|||
// 判断 nexurl数与那个列 |
|||
var url = '' |
|||
for (var i = 0; i < nextUrl.length; i++) { |
|||
if (nextUrl[i].name === param.seriesName) { |
|||
url = nextUrl[i].url |
|||
} |
|||
} |
|||
// --在当前路径新窗口打开 |
|||
router.push({ |
|||
path: url, |
|||
query: { |
|||
id: param.seriesName, |
|||
start: params.start, |
|||
end: params.end |
|||
} |
|||
}) |
|||
// --在最外层新窗口打开 |
|||
// let routeUrl = router.resolve({ |
|||
// path: './situationMapZhiDui', |
|||
// query: { id: 96 } |
|||
// }) |
|||
// window.open(routeUrl.href, '_blank') |
|||
|
|||
// 方法1：<router-link :to="{ name: 'details',params: { id: 123 }}">点击按钮</router-link> |
|||
// 方法2：this.$router.push({name:'details',params:{id:123}}) |
|||
// 方法3: this.$router.push({name:'detail',params:{id:123,name:'lisi'}}) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,133 @@ |
|||
<template> |
|||
<div :class="className" :style="{height:height,width:width}" /> |
|||
</template> |
|||
|
|||
<script> |
|||
import echarts from 'echarts' |
|||
// require('echarts/theme/macarons') // echarts theme |
|||
import resize from './mixins/resize' |
|||
import router from '../../../router' |
|||
|
|||
export default { |
|||
mixins: [resize], |
|||
props: { |
|||
className: { |
|||
type: String, |
|||
default: 'chart' |
|||
}, |
|||
width: { |
|||
type: String, |
|||
default: '100%' |
|||
}, |
|||
height: { |
|||
type: String, |
|||
default: '350px' |
|||
}, |
|||
autoResize: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
chartData: { |
|||
type: Object, |
|||
required: true |
|||
}, |
|||
nextUrl: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
chart: null |
|||
} |
|||
}, |
|||
watch: { |
|||
chartData: { |
|||
deep: true, |
|||
handler(val) { |
|||
this.setOptions(val) |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.initChart() |
|||
}) |
|||
}, |
|||
beforeDestroy() { |
|||
if (!this.chart) { |
|||
return |
|||
} |
|||
this.chart.dispose() |
|||
this.chart = null |
|||
}, |
|||
methods: { |
|||
initChart() { |
|||
this.chart = echarts.init(this.$el, 'macarons') |
|||
this.setOptions(this.chartData) |
|||
}, |
|||
setOptions({ title, xAxis, series, nextUrl,url } = {}) { |
|||
|
|||
this.chart.setOption({ |
|||
title: { |
|||
text: title, |
|||
x: 'center', |
|||
// bottom: 10, |
|||
top: 10, |
|||
textStyle: { |
|||
fontSize: 20, |
|||
color: '#8657c8', |
|||
} |
|||
}, |
|||
grid: { |
|||
left: 10, |
|||
right: 10, |
|||
bottom: 10, |
|||
top: 10, |
|||
containLabel: true |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
boundaryGap: false, |
|||
data:xAxis |
|||
}, |
|||
yAxis: { |
|||
type: 'value' |
|||
}, |
|||
series: series |
|||
|
|||
}) |
|||
this.chart.on('click', function(param) { |
|||
if (nextUrl.length > 0) { |
|||
// 判断 nexurl数与那个列 |
|||
var url = '' |
|||
for (var i = 0; i < nextUrl.length; i++) { |
|||
if (nextUrl[i].name === param.name) { |
|||
url = nextUrl[i].url |
|||
} |
|||
} |
|||
// --在当前路径新窗口打开 |
|||
router.push({ |
|||
path: url, |
|||
query: { |
|||
id: param.name, |
|||
start: params.start, |
|||
end: params.end |
|||
} |
|||
}) |
|||
// --在最外层新窗口打开 |
|||
// let routeUrl = router.resolve({ |
|||
// path: './situationMapZhiDui', |
|||
// query: { id: 96 } |
|||
// }) |
|||
// window.open(routeUrl.href, '_blank') |
|||
|
|||
// 方法1：<router-link :to="{ name: 'details',params: { id: 123 }}">点击按钮</router-link> |
|||
// 方法2：this.$router.push({name:'details',params:{id:123}}) |
|||
// 方法3: this.$router.push({name:'detail',params:{id:123,name:'lisi'}}) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,124 @@ |
|||
<template> |
|||
<div :class="className" :style="{height:height,width:width}" /> |
|||
</template> |
|||
|
|||
<script> |
|||
import echarts from 'echarts' |
|||
// require('echarts/theme/macarons') // echarts theme |
|||
import resize from './mixins/resize' |
|||
|
|||
export default { |
|||
mixins: [resize], |
|||
props: { |
|||
className: { |
|||
type: String, |
|||
default: 'chart' |
|||
}, |
|||
width: { |
|||
type: String, |
|||
default: '100%' |
|||
}, |
|||
height: { |
|||
type: String, |
|||
default: '300px' |
|||
}, |
|||
chartData: { |
|||
type: Object, |
|||
required: true |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
chart: null |
|||
} |
|||
}, |
|||
watch: { |
|||
chartData: { |
|||
deep: true, |
|||
handler(val) { |
|||
this.setOptions(val) |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.initChart() |
|||
}) |
|||
}, |
|||
beforeDestroy() { |
|||
if (!this.chart) { |
|||
return |
|||
} |
|||
this.chart.dispose() |
|||
this.chart = null |
|||
}, |
|||
methods: { |
|||
initChart() { |
|||
this.chart = echarts.init(this.$el, 'macarons') |
|||
this.setOptions(this.chartData) |
|||
}, |
|||
setOptions({ |
|||
title, |
|||
xAxis, |
|||
series, |
|||
legend, |
|||
unit, |
|||
rotate |
|||
} = {}) { |
|||
this.chart.setOption({ |
|||
title: { |
|||
text: title, |
|||
// subtext: '纯属虚构', |
|||
x: 'center', |
|||
bottom: 10, |
|||
// top: 5, |
|||
textStyle: { |
|||
fontSize: 16 |
|||
} |
|||
}, |
|||
tooltip: { |
|||
trigger: 'axis' |
|||
}, |
|||
legend: { |
|||
x: 'center', |
|||
bottom: 10, |
|||
data: legend |
|||
}, |
|||
toolbox: { |
|||
show: true, |
|||
feature: { |
|||
dataZoom: { |
|||
yAxisIndex: 'none' |
|||
}, |
|||
dataView: { readOnly: false }, |
|||
magicType: { type: ['line', 'bar'] }, |
|||
restore: {}, |
|||
saveAsImage: {} |
|||
} |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
boundaryGap: false, |
|||
data: xAxis |
|||
}, |
|||
yAxis: { |
|||
type: 'value', |
|||
axisLabel: { |
|||
formatter: '{value} ' |
|||
} |
|||
}, |
|||
unit: unit, |
|||
rotate: rotate, |
|||
series: series |
|||
}) |
|||
this.chart.on('click', function(param) { |
|||
this.callParents(param) |
|||
}) |
|||
}, |
|||
// 调用父组件 |
|||
callParents(name) { |
|||
this.$emit('pieChartFunction', name) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,198 @@ |
|||
<template> |
|||
<div :class="className" :style="{height:height,width:width}" /> |
|||
</template> |
|||
|
|||
<script> |
|||
import echarts from 'echarts' |
|||
// require('echarts/theme/macarons') // echarts theme |
|||
import resize from './mixins/resize' |
|||
import router from '../../../router' |
|||
|
|||
export default { |
|||
mixins: [resize], |
|||
props: { |
|||
className: { |
|||
type: String, |
|||
default: 'chart' |
|||
}, |
|||
width: { |
|||
type: String, |
|||
default: '100%' |
|||
}, |
|||
height: { |
|||
type: String, |
|||
default: '350px' |
|||
}, |
|||
chartData: { |
|||
type: Object, |
|||
required: true |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
chart: null |
|||
} |
|||
}, |
|||
watch: { |
|||
chartData: { |
|||
deep: true, |
|||
handler(val) { |
|||
this.setOptions(val) |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.initChart() |
|||
}) |
|||
}, |
|||
beforeDestroy() { |
|||
if (!this.chart) { |
|||
return |
|||
} |
|||
this.chart.dispose() |
|||
this.chart = null |
|||
}, |
|||
methods: { |
|||
initChart() { |
|||
this.chart = echarts.init(this.$el, 'macarons') |
|||
this.setOptions(this.chartData) |
|||
}, |
|||
setOptions({ legend, seriesName, Data, nextUrl, unit, params } = {}) { |
|||
this.chart.setOption({ |
|||
title: { |
|||
text: seriesName, |
|||
// subtext: '纯属虚构', |
|||
x: 'left', |
|||
// bottom: 10, |
|||
top: 10, |
|||
left: 30, |
|||
|
|||
textStyle: { |
|||
fontSize: 14, |
|||
color: '#fff', |
|||
fontWeight: 'bolder' // 字体加粗 |
|||
} |
|||
}, |
|||
grid: { |
|||
left: 10, |
|||
right: 10, |
|||
bottom: 40, |
|||
top: 10, |
|||
containLabel: true |
|||
}, |
|||
tooltip: { |
|||
trigger: 'item', |
|||
formatter: '{b} : {c} ' + unit + ' ({d}%)' |
|||
// formatter: '{a} <br/>{b} : {c} ({d}%)' |
|||
}, |
|||
legend: { |
|||
right: '10', |
|||
top: '10', |
|||
data: legend, // ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts'] |
|||
textStyle: { |
|||
// fontSize: 14, |
|||
color: '#fff' |
|||
// fontWeight: 'bolder' // 字体加粗 |
|||
} |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: seriesName, // 'WEEKLY WRITE ARTICLES', |
|||
type: 'pie', |
|||
// roseType: 'radius', |
|||
radius: [35, 55], |
|||
center: ['50%', '50%'], |
|||
data: Data.seriesData, |
|||
// [ |
|||
// { value: 320, name: 'Industries' }, |
|||
// { value: 240, name: 'Technology' }, |
|||
// { value: 149, name: 'Forex' }, |
|||
// { value: 100, name: 'Gold' }, |
|||
// { value: 59, name: 'Forecasts' } |
|||
// ], |
|||
|
|||
animationEasing: 'cubicInOut', |
|||
animationDuration: 2600, |
|||
label: { |
|||
normal: { |
|||
// formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} \n{hr|}\n {per|{d}%} ', |
|||
formatter: '{b|{b}：}{c} ' + unit + ' \n{hr|}\n {per|{d}%} ', |
|||
// backgroundColor: '#eee', |
|||
// borderColor: '#aaa', |
|||
// borderWidth: 1, |
|||
// borderRadius: 4, |
|||
// shadowBlur:3, |
|||
// shadowOffsetX: 2, |
|||
// shadowOffsetY: 2, |
|||
// shadowColor: '#999', |
|||
padding: [0, 7], |
|||
rich: { |
|||
// a: { |
|||
// color: '#999', |
|||
// lineHeight: 22, |
|||
// align: 'center' |
|||
// }, |
|||
// abg: { |
|||
// backgroundColor: '#333', |
|||
// width: '100%', |
|||
// align: 'right', |
|||
// height: 22, |
|||
// borderRadius: [4, 4, 0, 0] |
|||
// }, |
|||
hr: { |
|||
borderColor: '#aaa', |
|||
width: '100%', |
|||
borderWidth: 0.5, |
|||
height: 0 |
|||
}, |
|||
b: { |
|||
fontSize: 12, |
|||
lineHeight: 33 |
|||
}, |
|||
per: { |
|||
color: '#eee', |
|||
backgroundColor: '#334455', |
|||
padding: [2, 4], |
|||
borderRadius: 2 |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
] |
|||
}) |
|||
this.chart.on('click', function(param) { |
|||
if (nextUrl.length > 0) { |
|||
// 判断 nexurl数与那个列 |
|||
var url = '' |
|||
for (var i = 0; i < nextUrl.length; i++) { |
|||
if (nextUrl[i].name === param.name) { |
|||
url = nextUrl[i].url |
|||
} |
|||
} |
|||
// --在当前路径新窗口打开 |
|||
router.push({ |
|||
path: url, |
|||
query: { |
|||
id: param.name, |
|||
start: params.start, |
|||
end: params.end |
|||
} |
|||
}) |
|||
// --在最外层新窗口打开 |
|||
// let routeUrl = router.resolve({ |
|||
// path: './situationMapZhiDui', |
|||
// query: { id: 96 } |
|||
// }) |
|||
// window.open(routeUrl.href, '_blank') |
|||
|
|||
// 方法1：<router-link :to="{ name: 'details',params: { id: 123 }}">点击按钮</router-link> |
|||
// 方法2：this.$router.push({name:'details',params:{id:123}}) |
|||
// 方法3: this.$router.push({name:'detail',params:{id:123,name:'lisi'}}) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,173 @@ |
|||
<template> |
|||
<div :class="className" :style="{height:height,width:width}" /> |
|||
</template> |
|||
|
|||
<script> |
|||
import echarts from 'echarts' |
|||
// require('echarts/theme/macarons') // echarts theme |
|||
import resize from './mixins/resize' |
|||
// import router from '../../../router' |
|||
|
|||
export default { |
|||
mixins: [resize], |
|||
props: { |
|||
className: { |
|||
type: String, |
|||
default: 'chart' |
|||
}, |
|||
width: { |
|||
type: String, |
|||
default: '100%' |
|||
}, |
|||
height: { |
|||
type: String, |
|||
default: '350px' |
|||
}, |
|||
chartData: { |
|||
type: Object, |
|||
required: true |
|||
} |
|||
}, |
|||
data () { |
|||
return { |
|||
chart: null |
|||
} |
|||
}, |
|||
watch: { |
|||
chartData: { |
|||
deep: true, |
|||
handler (val) { |
|||
this.setOptions(val) |
|||
} |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.$nextTick(() => { |
|||
this.initChart() |
|||
}) |
|||
}, |
|||
beforeDestroy () { |
|||
if (!this.chart) { |
|||
return |
|||
} |
|||
this.chart.dispose() |
|||
this.chart = null |
|||
}, |
|||
methods: { |
|||
initChart () { |
|||
this.chart = echarts.init(this.$el, 'macarons') |
|||
this.setOptions(this.chartData) |
|||
}, |
|||
setOptions ({ |
|||
title, |
|||
legend, |
|||
seriesName, |
|||
Data, |
|||
nextUrl, |
|||
unit, |
|||
params |
|||
} = {}) { |
|||
this.chart.setOption({ |
|||
title: title, |
|||
grid: { |
|||
left: 10, |
|||
right: 10, |
|||
bottom: 10, |
|||
top: 30 |
|||
// containLabel: true |
|||
}, |
|||
tooltip: { |
|||
trigger: 'item', |
|||
formatter: '{b} : {c} ' + unit + ' ({d}%)' |
|||
// formatter: '{a} <br/>{b} : {c} ({d}%)' |
|||
}, |
|||
legend: { |
|||
right: '10', |
|||
top: '10', |
|||
data: legend, // ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts'] |
|||
textStyle: { |
|||
// fontSize: 14, |
|||
color: '#fff' |
|||
// fontWeight: 'bolder' // 字体加粗 |
|||
} |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: seriesName, // 'WEEKLY WRITE ARTICLES', |
|||
type: 'pie', |
|||
// roseType: 'radius', |
|||
radius: [0, 75], |
|||
center: ['50%', '50%'], |
|||
data: Data.seriesData, |
|||
// [ |
|||
// { value: 320, name: 'Industries' }, |
|||
// { value: 240, name: 'Technology' }, |
|||
// { value: 149, name: 'Forex' }, |
|||
// { value: 100, name: 'Gold' }, |
|||
// { value: 59, name: 'Forecasts' } |
|||
// ], |
|||
|
|||
animationEasing: 'cubicInOut', |
|||
animationDuration: 2600, |
|||
label: { |
|||
normal: { |
|||
// formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} \n{hr|}\n {per|{d}%} ', |
|||
formatter: '{b|{b}：}{c} ' + unit + ' {per|{d}%} ', |
|||
// backgroundColor: '#eee', |
|||
// borderColor: '#aaa', |
|||
// borderWidth: 1, |
|||
// borderRadius: 4, |
|||
// shadowBlur:3, |
|||
// shadowOffsetX: 2, |
|||
// shadowOffsetY: 2, |
|||
// shadowColor: '#999', |
|||
padding: [0, 7], |
|||
rich: { |
|||
// a: { |
|||
// color: '#999', |
|||
// lineHeight: 22, |
|||
// align: 'center' |
|||
// }, |
|||
// abg: { |
|||
// backgroundColor: '#333', |
|||
// width: '100%', |
|||
// align: 'right', |
|||
// height: 22, |
|||
// borderRadius: [4, 4, 0, 0] |
|||
// }, |
|||
hr: { |
|||
borderColor: '#aaa', |
|||
width: '100%', |
|||
borderWidth: 0.5, |
|||
height: 0 |
|||
}, |
|||
b: { |
|||
fontSize: 12, |
|||
lineHeight: 33 |
|||
}, |
|||
per: { |
|||
color: '#eee', |
|||
backgroundColor: '#334455', |
|||
padding: [2, 4], |
|||
borderRadius: 2 |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
] |
|||
}) |
|||
var _this = this |
|||
this.chart.on('click', function (param) { |
|||
// console.log('选择：' + JSON.stringify(param.data)) |
|||
_this.callParents(param.data) |
|||
}) |
|||
}, |
|||
// 调用父组件 |
|||
callParents (data) { |
|||
// console.log('调用：' + name) |
|||
this.$emit('piecharChildFunction', data) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,170 @@ |
|||
<template> |
|||
<div :class="className" :style="{height:height,width:width}" /> |
|||
</template> |
|||
|
|||
<script> |
|||
import echarts from 'echarts' |
|||
// require('echarts/theme/macarons') // echarts theme |
|||
import resize from './mixins/resize' |
|||
import router from '../../../router' |
|||
|
|||
export default { |
|||
mixins: [resize], |
|||
props: { |
|||
className: { |
|||
type: String, |
|||
default: 'chart' |
|||
}, |
|||
width: { |
|||
type: String, |
|||
default: '100%' |
|||
}, |
|||
height: { |
|||
type: String, |
|||
default: '350px' |
|||
}, |
|||
chartData: { |
|||
type: Object, |
|||
required: true |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
chart: null |
|||
} |
|||
}, |
|||
watch: { |
|||
chartData: { |
|||
deep: true, |
|||
handler(val) { |
|||
this.setOptions(val) |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.initChart() |
|||
}) |
|||
}, |
|||
beforeDestroy() { |
|||
if (!this.chart) { |
|||
return |
|||
} |
|||
this.chart.dispose() |
|||
this.chart = null |
|||
}, |
|||
methods: { |
|||
initChart() { |
|||
this.chart = echarts.init(this.$el, 'macarons') |
|||
this.setOptions(this.chartData) |
|||
}, |
|||
setOptions({ legend, seriesName, Data } = {}) { |
|||
this.chart.setOption({ |
|||
title: { |
|||
text: seriesName, |
|||
// subtext: '纯属虚构', |
|||
x: 'left', |
|||
// bottom: 10, |
|||
top: 10, |
|||
left: 30, |
|||
|
|||
textStyle: { |
|||
fontSize: 14, |
|||
color: 'black', |
|||
fontWeight: 'bolder' // 字体加粗 |
|||
} |
|||
}, |
|||
grid: { |
|||
left: 10, |
|||
right: 10, |
|||
bottom: 40, |
|||
top: 10, |
|||
containLabel: true |
|||
}, |
|||
tooltip: { |
|||
trigger: 'item' |
|||
// formatter: '{b} : {c} ' + unit + ' ({d}%)' |
|||
// formatter: '{a} <br/>{b} : {c} ({d}%)' |
|||
}, |
|||
legend: { |
|||
// right: '10', |
|||
top: '10', |
|||
data: legend, // ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts'] |
|||
textStyle: { |
|||
// fontSize: 14, |
|||
color: 'black' |
|||
// fontWeight: 'bolder' // 字体加粗 |
|||
} |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: seriesName, // 'WEEKLY WRITE ARTICLES', |
|||
type: 'pie', |
|||
// roseType: 'radius', |
|||
radius: [35, 55], |
|||
center: ['50%', '60%'], |
|||
data: Data.seriesData, |
|||
// [ |
|||
// { value: 320, name: 'Industries' }, |
|||
// { value: 240, name: 'Technology' }, |
|||
// { value: 149, name: 'Forex' }, |
|||
// { value: 100, name: 'Gold' }, |
|||
// { value: 59, name: 'Forecasts' } |
|||
// ], |
|||
|
|||
animationEasing: 'cubicInOut', |
|||
animationDuration: 2600, |
|||
label: { |
|||
normal: { |
|||
// formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} \n{hr|}\n {per|{d}%} ', |
|||
// formatter: '{b|{b}：}{c} ' + unit + ' \n{hr|}\n {per|{d}%} ', |
|||
// backgroundColor: '#eee', |
|||
// borderColor: '#aaa', |
|||
// borderWidth: 1, |
|||
// borderRadius: 4, |
|||
// shadowBlur:3, |
|||
// shadowOffsetX: 2, |
|||
// shadowOffsetY: 2, |
|||
// shadowColor: '#999', |
|||
padding: [0, 7], |
|||
rich: { |
|||
// a: { |
|||
// color: '#999', |
|||
// lineHeight: 22, |
|||
// align: 'center' |
|||
// }, |
|||
// abg: { |
|||
// backgroundColor: '#333', |
|||
// width: '100%', |
|||
// align: 'right', |
|||
// height: 22, |
|||
// borderRadius: [4, 4, 0, 0] |
|||
// }, |
|||
hr: { |
|||
borderColor: '#aaa', |
|||
width: '100%', |
|||
borderWidth: 0.5, |
|||
height: 0 |
|||
}, |
|||
b: { |
|||
fontSize: 12, |
|||
lineHeight: 33 |
|||
}, |
|||
per: { |
|||
color: '#eee', |
|||
backgroundColor: '#334455', |
|||
padding: [2, 4], |
|||
borderRadius: 2 |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
] |
|||
}) |
|||
this.chart.on('click', function(param) { |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,202 @@ |
|||
<template> |
|||
<div :class="className" :style="{height:height,width:width}" /> |
|||
</template> |
|||
|
|||
<script> |
|||
import echarts from 'echarts' |
|||
// require('echarts/theme/macarons') // echarts theme |
|||
import resize from './mixins/resize' |
|||
// import router from '../../../router' |
|||
|
|||
// const animationDuration = 6000 |
|||
|
|||
export default { |
|||
mixins: [resize], |
|||
props: { |
|||
className: { |
|||
type: String, |
|||
default: 'chart' |
|||
}, |
|||
width: { |
|||
type: String, |
|||
default: '100%' |
|||
}, |
|||
height: { |
|||
type: String, |
|||
default: '350px' |
|||
}, |
|||
chartData: { |
|||
type: Object, |
|||
required: true |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
chart: null |
|||
} |
|||
}, |
|||
watch: { |
|||
chartData: { |
|||
deep: true, |
|||
handler(val) { |
|||
this.setOptions(val) |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.initChart() |
|||
}) |
|||
}, |
|||
beforeDestroy() { |
|||
if (!this.chart) { |
|||
return |
|||
} |
|||
this.chart.dispose() |
|||
this.chart = null |
|||
}, |
|||
methods: { |
|||
initChart() { |
|||
this.chart = echarts.init(this.$el, 'macarons') |
|||
this.setOptions(this.chartData) |
|||
}, |
|||
|
|||
setOptions({ |
|||
seriesName, |
|||
legend, |
|||
xAxis, |
|||
Data, |
|||
nextUrl, |
|||
rotate, |
|||
unit, |
|||
params |
|||
} = {}) { |
|||
// Data:[{name:"name",date:[ { value: 335, name: "直达", selected: true }]},{name:"name",date:[ { value: 335, name: "直达" }]}] |
|||
var option = { |
|||
title: { |
|||
text: seriesName, |
|||
x: 'left', |
|||
// bottom: 10, |
|||
top: 10, |
|||
left: 30, |
|||
textStyle: { |
|||
fontSize: 14, |
|||
color: '#fff', |
|||
fontWeight: 'bolder' // 字体加粗 |
|||
} |
|||
}, |
|||
grid: { |
|||
left: 15, |
|||
right: 15, |
|||
bottom: 0, |
|||
// top: 90, |
|||
containLabel: true |
|||
}, |
|||
tooltip: { |
|||
trigger: 'item', |
|||
formatter: '{b} : {c} ' + unit + ' ({d}%)' |
|||
// formatter: "{a} <br/>{b}: {c} ({d}%)" |
|||
}, |
|||
series: [ |
|||
{ |
|||
// name: Data[0].name, |
|||
type: 'pie', |
|||
selectedMode: 'single', |
|||
radius: [0, '25%'], |
|||
|
|||
label: { |
|||
normal: { |
|||
position: 'inner' |
|||
} |
|||
}, |
|||
labelLine: { |
|||
normal: { |
|||
show: false |
|||
} |
|||
}, |
|||
data: Data[0].data |
|||
// data: [ |
|||
// { value: 335, name: "直达", selected: true }, |
|||
// { value: 679, name: "营销广告" }, |
|||
// { value: 1548, name: "搜索引擎" } |
|||
// ] |
|||
}, |
|||
{ |
|||
// name: Data[1].name, |
|||
type: 'pie', |
|||
radius: ['30%', '45%'], |
|||
label: { |
|||
normal: { |
|||
// formatter: "{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ", |
|||
formatter: '{b} \n{hr|}\n {per| {c}' + unit + '({d}%})', |
|||
// backgroundColor: "#eee", |
|||
// borderColor: "#aaa", |
|||
// borderWidth: 1, |
|||
// borderRadius: 4, |
|||
// shadowBlur:3, |
|||
// shadowOffsetX: 2, |
|||
// shadowOffsetY: 2, |
|||
// shadowColor: '#999', |
|||
// padding: [0, 7], |
|||
rich: { |
|||
// a: { |
|||
// color: "#999", |
|||
// lineHeight: 22, |
|||
// align: "center" |
|||
// }, |
|||
// // abg: { |
|||
// // backgroundColor: '#333', |
|||
// // width: '100%', |
|||
// // align: 'right', |
|||
// // height: 22, |
|||
// // borderRadius: [4, 4, 0, 0] |
|||
// // }, |
|||
hr: { |
|||
borderColor: '#aaa', |
|||
width: '100%', |
|||
borderWidth: 0.5, |
|||
height: 0 |
|||
}, |
|||
// b: { |
|||
// fontSize: 16, |
|||
// lineHeight: 33 |
|||
// }, |
|||
per: { |
|||
color: '#eee', |
|||
backgroundColor: '#334455', |
|||
padding: [2, 4], |
|||
borderRadius: 2 |
|||
} |
|||
} |
|||
}, |
|||
textStyle: { |
|||
fontSize: '8px' |
|||
} |
|||
}, |
|||
data: Data[1].data |
|||
// data: [ |
|||
// { value: 335, name: "直达" }, |
|||
// { value: 310, name: "邮件营销" }, |
|||
// { value: 234, name: "联盟广告" }, |
|||
// { value: 135, name: "视频广告" }, |
|||
// { value: 1048, name: "百度" }, |
|||
// { value: 251, name: "谷歌" }, |
|||
// { value: 147, name: "必应" }, |
|||
// { value: 102, name: "其他" } |
|||
// ] |
|||
} |
|||
] |
|||
} |
|||
this.chart.setOption(option) |
|||
var _this = this |
|||
this.chart.on('click', function(param) { |
|||
_this.callParents(param.name) |
|||
}) |
|||
}, |
|||
// 调用父组件 |
|||
callParents(name) { |
|||
this.$emit('piesFunction', name) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,202 @@ |
|||
<template> |
|||
<div :class="className" :style="{height:height,width:width}" /> |
|||
</template> |
|||
|
|||
<script> |
|||
import echarts from 'echarts' |
|||
// require('echarts/theme/macarons') // echarts theme |
|||
import resize from './mixins/resize' |
|||
import router from '../../../router' |
|||
|
|||
export default { |
|||
mixins: [resize], |
|||
props: { |
|||
className: { |
|||
type: String, |
|||
default: 'chart' |
|||
}, |
|||
width: { |
|||
type: String, |
|||
default: '100%' |
|||
}, |
|||
height: { |
|||
type: String, |
|||
default: '350px' |
|||
}, |
|||
chartData: { |
|||
type: Object, |
|||
required: true |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
chart: null |
|||
} |
|||
}, |
|||
watch: { |
|||
chartData: { |
|||
deep: true, |
|||
handler(val) { |
|||
this.setOptions(val) |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.initChart() |
|||
}) |
|||
}, |
|||
beforeDestroy() { |
|||
if (!this.chart) { |
|||
return |
|||
} |
|||
this.chart.dispose() |
|||
this.chart = null |
|||
}, |
|||
methods: { |
|||
initChart() { |
|||
this.chart = echarts.init(this.$el, 'macarons') |
|||
this.setOptions(this.chartData) |
|||
}, |
|||
setOptions({ legend, seriesName, Data, nextUrl, unit, params } = {}) { |
|||
this.chart.setOption({ |
|||
title: { |
|||
text: seriesName, |
|||
// subtext: '纯属虚构', |
|||
x: 'center', |
|||
bottom: 5, |
|||
// top: 5, |
|||
|
|||
textStyle: { |
|||
fontSize: 14, |
|||
color: '#fff' |
|||
// fontWeight: "bolder" //字体加粗 |
|||
} |
|||
}, |
|||
grid: { |
|||
left: 10, |
|||
right: 10, |
|||
bottom: 40, |
|||
top: 10, |
|||
containLabel: true |
|||
}, |
|||
tooltip: { |
|||
trigger: 'item', |
|||
formatter: '{b} : {c} ' + unit + ' ({d}%)', |
|||
// formatter: '{a} <br/>{b} : {c} ({d}%)' |
|||
textStyle: { |
|||
color: '#fff' |
|||
} |
|||
}, |
|||
legend: { |
|||
left: 'left', |
|||
top: '10', |
|||
data: legend, // ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts'] |
|||
textStyle: { |
|||
color: '#fff' |
|||
} |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: seriesName, // 'WEEKLY WRITE ARTICLES', |
|||
type: 'pie', |
|||
// roseType: 'radius', |
|||
radius: [0, 40], |
|||
center: ['50%', '50%'], |
|||
data: Data.seriesData, |
|||
// [ |
|||
// { value: 320, name: 'Industries' }, |
|||
// { value: 240, name: 'Technology' }, |
|||
// { value: 149, name: 'Forex' }, |
|||
// { value: 100, name: 'Gold' }, |
|||
// { value: 59, name: 'Forecasts' } |
|||
// ], |
|||
|
|||
animationEasing: 'cubicInOut', |
|||
animationDuration: 2600, |
|||
label: { |
|||
normal: { |
|||
show: true, |
|||
position: 'inner', |
|||
formatter: '{c} ', |
|||
// formatter: |
|||
// "{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} \n{hr|}\n {per|{d}%} ", |
|||
// formatter: "{b|{b}：}{c} " + unit + " \n{hr|}\n {per|{d}%} ", |
|||
// backgroundColor: '#eee', |
|||
// borderColor: '#aaa', |
|||
// borderWidth: 1, |
|||
// borderRadius: 4, |
|||
// shadowBlur:3, |
|||
// shadowOffsetX: 2, |
|||
// shadowOffsetY: 2, |
|||
// shadowColor: '#999', |
|||
padding: [0, 7], |
|||
rich: { |
|||
// a: { |
|||
// color: '#999', |
|||
// lineHeight: 22, |
|||
// align: 'center' |
|||
// }, |
|||
// abg: { |
|||
// backgroundColor: '#333', |
|||
// width: '100%', |
|||
// align: 'right', |
|||
// height: 22, |
|||
// borderRadius: [4, 4, 0, 0] |
|||
// }, |
|||
hr: { |
|||
borderColor: '#aaa', |
|||
width: '100%', |
|||
borderWidth: 0.5, |
|||
height: 0 |
|||
}, |
|||
b: { |
|||
fontSize: 12, |
|||
lineHeight: 33 |
|||
}, |
|||
per: { |
|||
color: '#eee', |
|||
backgroundColor: '#334455', |
|||
padding: [2, 4], |
|||
borderRadius: 2 |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
] |
|||
}) |
|||
this.chart.on('click', function(param) { |
|||
if (nextUrl.length > 0) { |
|||
// 判断 nexurl数与那个列 |
|||
var url = '' |
|||
for (var i = 0; i < nextUrl.length; i++) { |
|||
if (nextUrl[i].name === param.name) { |
|||
url = nextUrl[i].url |
|||
} |
|||
} |
|||
// --在当前路径新窗口打开 |
|||
router.push({ |
|||
path: url, |
|||
query: { |
|||
id: param.name, |
|||
start: params.start, |
|||
end: params.end |
|||
} |
|||
}) |
|||
// --在最外层新窗口打开 |
|||
// let routeUrl = router.resolve({ |
|||
// path: './situationMapZhiDui', |
|||
// query: { id: 96 } |
|||
// }) |
|||
// window.open(routeUrl.href, '_blank') |
|||
|
|||
// 方法1：<router-link :to="{ name: 'details',params: { id: 123 }}">点击按钮</router-link> |
|||
// 方法2：this.$router.push({name:'details',params:{id:123}}) |
|||
// 方法3: this.$router.push({name:'detail',params:{id:123,name:'lisi'}}) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,201 @@ |
|||
<template> |
|||
<div :class="className" :style="{height:height,width:width}" /> |
|||
</template> |
|||
|
|||
<script> |
|||
// import echarts from 'echarts' |
|||
import * as echarts from 'echarts'; |
|||
|
|||
// require('echarts/theme/macarons') // echarts theme |
|||
import resize from './mixins/resize' |
|||
import router from '../../../router' |
|||
|
|||
export default { |
|||
mixins: [resize], |
|||
props: { |
|||
className: { |
|||
type: String, |
|||
default: 'chart' |
|||
}, |
|||
width: { |
|||
type: String, |
|||
default: '100%' |
|||
}, |
|||
height: { |
|||
type: String, |
|||
default: '250px' |
|||
}, |
|||
chartData: { |
|||
type: Object, |
|||
required: true |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
chart: null |
|||
} |
|||
}, |
|||
watch: { |
|||
chartData: { |
|||
deep: true, |
|||
handler(val) { |
|||
this.setOptions(val) |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.initChart() |
|||
}) |
|||
}, |
|||
beforeDestroy() { |
|||
if (!this.chart) { |
|||
return |
|||
} |
|||
this.chart.dispose() |
|||
this.chart = null |
|||
}, |
|||
methods: { |
|||
initChart() { |
|||
this.chart = echarts.init(this.$el, 'macarons') |
|||
this.setOptions(this.chartData) |
|||
}, |
|||
setOptions({ legend, seriesName, Data, nextUrl, unit, params } = {}) { |
|||
this.chart.setOption({ |
|||
title: { |
|||
text: seriesName, |
|||
// subtext: '纯属虚构', |
|||
x: 'center', |
|||
// bottom: 10, |
|||
top: 10, |
|||
//left: 30, |
|||
|
|||
textStyle: { |
|||
fontSize: 20, |
|||
color: '#8657c8', |
|||
//fontWeight: 'bolder' // 字体加粗 |
|||
} |
|||
}, |
|||
grid: { |
|||
left: 10, |
|||
right: 10, |
|||
bottom: 10, |
|||
top: 10, |
|||
containLabel: true |
|||
}, |
|||
tooltip: { |
|||
trigger: 'item', |
|||
// formatter: '{b} : {c} ' + unit + ' ({d}%)' |
|||
formatter: '{a} <br/>{b} : {c} ({d}%)' |
|||
}, |
|||
legend: { |
|||
// right: '10', |
|||
bottom: '30', |
|||
data: legend, // ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts'] |
|||
textStyle: { |
|||
// fontSize: 14, |
|||
color: '#666' |
|||
// fontWeight: 'bolder' // 字体加粗 |
|||
} |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: seriesName, // 'WEEKLY WRITE ARTICLES', |
|||
type: 'pie', |
|||
// roseType: 'radius', |
|||
radius: [50, 60], |
|||
center: ['50%', '48%'], |
|||
data: Data.seriesData, |
|||
// [ |
|||
// { value: 320, name: 'Industries' }, |
|||
// { value: 240, name: 'Technology' }, |
|||
// { value: 149, name: 'Forex' }, |
|||
// { value: 100, name: 'Gold' }, |
|||
// { value: 59, name: 'Forecasts' } |
|||
// ], |
|||
|
|||
animationEasing: 'cubicInOut', |
|||
animationDuration: 2600, |
|||
label: { |
|||
normal: { |
|||
show: false, |
|||
// formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} \n{hr|}\n {per|{d}%} ', |
|||
formatter: '{b|{b}：}{c} ' + unit + ' \n{hr|}\n {per|{d}%} ', |
|||
// backgroundColor: '#eee', |
|||
// borderColor: '#aaa', |
|||
// borderWidth: 1, |
|||
// borderRadius: 4, |
|||
// shadowBlur:3, |
|||
// shadowOffsetX: 2, |
|||
// shadowOffsetY: 2, |
|||
// shadowColor: '#999', |
|||
padding: [0, 7], |
|||
rich: { |
|||
// a: { |
|||
// color: '#999', |
|||
// lineHeight: 22, |
|||
// align: 'center' |
|||
// }, |
|||
// abg: { |
|||
// backgroundColor: '#333', |
|||
// width: '100%', |
|||
// align: 'right', |
|||
// height: 22, |
|||
// borderRadius: [4, 4, 0, 0] |
|||
// }, |
|||
hr: { |
|||
borderColor: '#aaa', |
|||
width: '100%', |
|||
borderWidth: 0.5, |
|||
height: 0 |
|||
}, |
|||
b: { |
|||
fontSize: 12, |
|||
lineHeight: 33 |
|||
}, |
|||
per: { |
|||
color: '#eee', |
|||
backgroundColor: '#334455', |
|||
padding: [2, 4], |
|||
borderRadius: 2 |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
] |
|||
}) |
|||
this.chart.on('click', function(param) { |
|||
if (nextUrl.length > 0) { |
|||
// 判断 nexurl数与那个列 |
|||
var url = '' |
|||
for (var i = 0; i < nextUrl.length; i++) { |
|||
if (nextUrl[i].name === param.name) { |
|||
url = nextUrl[i].url |
|||
} |
|||
} |
|||
// --在当前路径新窗口打开 |
|||
router.push({ |
|||
path: url, |
|||
query: { |
|||
id: param.name, |
|||
start: params.start, |
|||
end: params.end |
|||
} |
|||
}) |
|||
// --在最外层新窗口打开 |
|||
// let routeUrl = router.resolve({ |
|||
// path: './situationMapZhiDui', |
|||
// query: { id: 96 } |
|||
// }) |
|||
// window.open(routeUrl.href, '_blank') |
|||
|
|||
// 方法1：<router-link :to="{ name: 'details',params: { id: 123 }}">点击按钮</router-link> |
|||
// 方法2：this.$router.push({name:'details',params:{id:123}}) |
|||
// 方法3: this.$router.push({name:'detail',params:{id:123,name:'lisi'}}) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,114 @@ |
|||
<template> |
|||
<div :class="className" :style="{height:height,width:width}" /> |
|||
</template> |
|||
|
|||
<script> |
|||
import echarts from 'echarts' |
|||
// require('echarts/theme/macarons') // echarts theme |
|||
import resize from './mixins/resize' |
|||
import router from '../../../router' |
|||
|
|||
export default { |
|||
mixins: [resize], |
|||
props: { |
|||
className: { |
|||
type: String, |
|||
default: 'chart' |
|||
}, |
|||
width: { |
|||
type: String, |
|||
default: '100%' |
|||
}, |
|||
height: { |
|||
type: String, |
|||
default: '350px' |
|||
}, |
|||
chartData: { |
|||
type: Object, |
|||
required: true |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
chart: null |
|||
} |
|||
}, |
|||
watch: { |
|||
chartData: { |
|||
deep: true, |
|||
handler(val) { |
|||
this.setOptions(val) |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.initChart() |
|||
}) |
|||
}, |
|||
beforeDestroy() { |
|||
if (!this.chart) { |
|||
return |
|||
} |
|||
this.chart.dispose() |
|||
this.chart = null |
|||
}, |
|||
methods: { |
|||
initChart() { |
|||
this.chart = echarts.init(this.$el, 'macarons') |
|||
this.setOptions(this.chartData) |
|||
}, |
|||
setOptions({ tooltip,series } = {}) { |
|||
this.chart.setOption({ |
|||
tooltip: { |
|||
formatter: '{a} <br/>{b} : {c}%' |
|||
}, |
|||
series: [{ |
|||
name: series[0].name, |
|||
type: 'gauge', |
|||
radius: '90%', |
|||
center : ['50%', '50%'], |
|||
detail: { |
|||
formatter: '{value}' |
|||
}, |
|||
data:series[0].data |
|||
// data: [{ |
|||
// value: 200, |
|||
// name: 'SCORE' |
|||
// }] |
|||
}] |
|||
}) |
|||
this.chart.on('click', function(param) { |
|||
if (nextUrl.length > 0) { |
|||
// 判断 nexurl数与那个列 |
|||
var url = '' |
|||
for (var i = 0; i < nextUrl.length; i++) { |
|||
if (nextUrl[i].name === param.name) { |
|||
url = nextUrl[i].url |
|||
} |
|||
} |
|||
// --在当前路径新窗口打开 |
|||
router.push({ |
|||
path: url, |
|||
query: { |
|||
id: param.name, |
|||
start: params.start, |
|||
end: params.end |
|||
} |
|||
}) |
|||
// --在最外层新窗口打开 |
|||
// let routeUrl = router.resolve({ |
|||
// path: './situationMapZhiDui', |
|||
// query: { id: 96 } |
|||
// }) |
|||
// window.open(routeUrl.href, '_blank') |
|||
|
|||
// 方法1：<router-link :to="{ name: 'details',params: { id: 123 }}">点击按钮</router-link> |
|||
// 方法2：this.$router.push({name:'details',params:{id:123}}) |
|||
// 方法3: this.$router.push({name:'detail',params:{id:123,name:'lisi'}}) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,56 @@ |
|||
import { debounce } from '@/utils' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
$_sidebarElm: null |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$_initResizeEvent() |
|||
this.$_initSidebarResizeEvent() |
|||
}, |
|||
beforeDestroy() { |
|||
this.$_destroyResizeEvent() |
|||
this.$_destroySidebarResizeEvent() |
|||
}, |
|||
// to fixed bug when cached by keep-alive
|
|||
// https://github.com/PanJiaChen/vue-element-admin/issues/2116
|
|||
activated() { |
|||
this.$_initResizeEvent() |
|||
this.$_initSidebarResizeEvent() |
|||
}, |
|||
deactivated() { |
|||
this.$_destroyResizeEvent() |
|||
this.$_destroySidebarResizeEvent() |
|||
}, |
|||
methods: { |
|||
// use $_ for mixins properties
|
|||
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
|
|||
$_resizeHandler() { |
|||
return debounce(() => { |
|||
if (this.chart) { |
|||
this.chart.resize() |
|||
} |
|||
}, 100)() |
|||
}, |
|||
$_initResizeEvent() { |
|||
window.addEventListener('resize', this.$_resizeHandler) |
|||
}, |
|||
$_destroyResizeEvent() { |
|||
window.removeEventListener('resize', this.$_resizeHandler) |
|||
}, |
|||
$_sidebarResizeHandler(e) { |
|||
if (e.propertyName === 'width') { |
|||
this.$_resizeHandler() |
|||
} |
|||
}, |
|||
$_initSidebarResizeEvent() { |
|||
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0] |
|||
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler) |
|||
}, |
|||
$_destroySidebarResizeEvent() { |
|||
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler) |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,58 @@ |
|||
<template> |
|||
<div> |
|||
111111页面 |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import 'echarts-gl' |
|||
import { mapGetters } from 'vuex' |
|||
import { fileUrl } from '@/api/sys/index' |
|||
import { parseDate } from '@/utils' |
|||
import Pagination from '@/components/Pagination' // secondary package based on el-pagination |
|||
import echarts from 'echarts' |
|||
|
|||
export default { |
|||
// name: "Dashboard", |
|||
components: { Pagination }, |
|||
computed: { |
|||
...mapGetters([ |
|||
'id', |
|||
'departmentCode', |
|||
'department', |
|||
'departmentLevel', |
|||
'departmentType', |
|||
'token' |
|||
]) |
|||
}, |
|||
data() { |
|||
return { |
|||
tableKey: 0, |
|||
list: null, |
|||
total: 0, |
|||
listLoading: true, |
|||
listQuery: { |
|||
pageNumber: 1, |
|||
pageSize: 20, |
|||
department: '', |
|||
startDate: '', |
|||
endDate: '', |
|||
title: '' |
|||
} |
|||
} |
|||
}, |
|||
mounted() {}, |
|||
beforeDestroy() {}, |
|||
created() {}, |
|||
methods: { |
|||
indexMethod(index) { |
|||
var pagestart = |
|||
(this.listQueryPerson.pageNumber - 1) * this.listQueryPerson.pageSize |
|||
var pageindex = index + 1 + pagestart |
|||
return pageindex |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
</style> |
|||
@ -1,323 +1,549 @@ |
|||
<template> |
|||
<div class="video_box"> |
|||
<!-- 摄像头 --> |
|||
<div id="divPlugin" class="plugin"></div> |
|||
<div class="app-container"> |
|||
<div v-show="viewState == 1"> |
|||
<!-- <button-bar view-title="视频中心" ref="btnbar" :btndisabled="btndisabled" @btnhandle="btnHandle"/> --> |
|||
<div class="main-content"> |
|||
|
|||
<div class="shipinlisttop"> |
|||
<el-form ref="listQueryform" :inline="true" :model="listQuery" label-width="110px" class="tab-header"> |
|||
<el-form-item label="选择楼栋"> |
|||
<el-select v-model="listQuery.params.supplierType" filterable clearable placeholder="请选择楼栋"> |
|||
<el-option v-for="item in supplierType_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="选择楼层"> |
|||
<el-select v-model="listQuery.params.supplierType" filterable clearable placeholder="请选择楼层"> |
|||
<el-option v-for="item in supplierType_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"/> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
<div class="mores"> |
|||
<div class="more"> |
|||
<p class="bluezi">正常</p> |
|||
<span class="myiconfont iconbox iconbox_blue"></span> |
|||
</div> |
|||
<div class="more"> |
|||
<p class="huizi">离线</p> |
|||
<span class="myiconfont iconbox iconbox_hui"></span> |
|||
</div> |
|||
<div class="more"> |
|||
<p class="redzi">报警</p> |
|||
<span class="myiconfont iconbox iconbox_red"></span> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
<div class="shipinscon"> |
|||
|
|||
<div class="shipinstu"> |
|||
<div class="myiconfont redzibg jingicon jingicona1"></div> |
|||
<div class="myiconfont redzibg jingicon jingicona2"></div> |
|||
<div class="myiconfont redzibg jingicon jingicona3"></div> |
|||
<div class="myiconfont redzibg jingicon jingicona4"></div> |
|||
<div class="myiconfont bluezibg jingicon jingiconb1"></div> |
|||
<div class="myiconfont bluezibg jingicon jingiconb2"></div> |
|||
<div class="myiconfont bluezibg jingicon jingiconb3"></div> |
|||
<div class="myiconfont bluezibg jingicon jingiconb4"></div> |
|||
</div> |
|||
<!-- 下部机构导航 --> |
|||
<div class="tabhead"> |
|||
<el-checkbox-group v-model="departmentTypeArray" @change="getList"> |
|||
<el-checkbox-button v-for="(item,index) in jigounavType" :key="index" :label="item.value" :value="item.value"> |
|||
<span class="iconfontyuan myiconfont" :class="icontu[index]"></span> |
|||
{{item.label}} |
|||
</el-checkbox-button> |
|||
</el-checkbox-group> |
|||
|
|||
</div> |
|||
<!-- 列表结束 --> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
<!-- 查看视频 --> |
|||
<el-dialog v-el-drag-dialog title="查看视频" :visible.sync="dialogImage" width="800px"> |
|||
<div class="shipin"> |
|||
<video :preload="preload" autoplay :height="height" :width="width" align="center" :controls="controls"> |
|||
<source :src="videoSrc" type="video/mp4"> |
|||
</video> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import * as WebVideoCtrl from "@/api/hikvision/hkVideo.js"; |
|||
export default { |
|||
name: "carNvrVideo", |
|||
components: { |
|||
WebVideoCtrl |
|||
}, |
|||
data() { |
|||
return { |
|||
szInfo: "", |
|||
rowList: {}, |
|||
hkvInfo: { |
|||
ip: "192.168.3.2", |
|||
port: "8000", |
|||
username: "admin", |
|||
password: "Yxt123456" |
|||
import Pagination from '@/components/pagination' |
|||
import pageye from '@/components/pagination/pageye' |
|||
import ButtonBar from '@/components/ButtonBar' |
|||
// import { typeValues, getOrgSidByPath } from '@/api/cheliang/dictcommons' |
|||
// import baojingchaxunAdd from './baojingchaxunAdd' |
|||
// import baojingchaxunInfo from './baojingchaxunInfo' |
|||
// import req from '@/api/baojingchaxun/baojingchaxun' |
|||
|
|||
export default { |
|||
name: 'shipinzhongxin', |
|||
components: { |
|||
Pagination, |
|||
pageye, |
|||
ButtonBar |
|||
|
|||
}, |
|||
data() { |
|||
return { checkList: ['选中且禁用','复选框 A'], |
|||
btndisabled: false, |
|||
btnList: [ |
|||
// { |
|||
// type: 'primary', |
|||
// size: 'small', |
|||
// icon: 'plus', |
|||
// btnKey: 'toAdd', |
|||
// btnLabel: '新增' |
|||
// }, |
|||
// { |
|||
// type: 'danger', |
|||
// size: 'small', |
|||
// icon: 'del', |
|||
// btnKey: 'doDel', |
|||
// btnLabel: '删除' |
|||
// }, |
|||
// { |
|||
// type: 'primary', |
|||
// size: 'small', |
|||
// icon: '', |
|||
// btnKey: 'toChangShang', |
|||
// btnLabel: '获取厂商' |
|||
// }, |
|||
// { |
|||
// type: 'primary', |
|||
// size: 'small', |
|||
// icon: '', |
|||
// btnKey: 'toGain', |
|||
// btnLabel: '获取分公司' |
|||
// }, |
|||
|
|||
// { |
|||
// type: 'success', |
|||
// size: 'small', |
|||
// icon: 'export', |
|||
// btnKey: 'build', |
|||
// btnLabel: '导出' |
|||
// }, |
|||
{ |
|||
type: 'info', |
|||
size: 'small', |
|||
icon: 'cross', |
|||
btnKey: 'doClose', |
|||
btnLabel: '关闭' |
|||
} |
|||
], |
|||
viewState: 1, |
|||
isSearchShow: false, |
|||
searchxianshitit: '显示查询条件', |
|||
sids: [], |
|||
// 查询 ----------- |
|||
tableKey: 0, |
|||
list: [{bianma:'212233433',supplierTypeValue:'222',weizhi:'212233433',time:'2023-02-26',anzhuangtime:'2023-02-26',gonghuashang:'222' |
|||
,supplierTypeValue:'222',zhuangtai:'222'} |
|||
], |
|||
listLoading: false, |
|||
listQuery: { |
|||
params: { |
|||
manufacturerName: '', |
|||
supplierType: '', |
|||
useOrgSid: '', |
|||
createOrgSid: '', |
|||
manufacturerTelePhone: '', |
|||
contactName: '' |
|||
}, |
|||
mySelectWnd: 0, //当前选中的窗口 |
|||
g_bPTZAuto: false, |
|||
iProtocol: 1, |
|||
loginLoading: false, |
|||
startPlayLoading: false, |
|||
bZeroChannel: false, |
|||
iRtspPort: 0, |
|||
index: 0, |
|||
iWndowType: null, |
|||
videoData: [{ |
|||
ip: "192.168.3.2", |
|||
port: "8000", |
|||
username: "admin", |
|||
password: "Yxt123456" |
|||
current: 1, |
|||
size: 5, |
|||
total: 0 |
|||
}, |
|||
supplierType_list: [], |
|||
Datalista: [ |
|||
{xiaoqu:'和平家园小区南门出口',tuUrl:'./image/ren1.jpg', weizhi: '南门出口', createTime: '2023-05-03', createTime2: '18:26:38', shijian: '社区户主', name: '李明华' }, |
|||
{xiaoqu:'和平家园小区东门出口',tuUrl:'./image/ren2.jpg', weizhi: '东门出口', createTime: '2023-05-08', createTime2: '18:26:38', shijian: '社区户主', name: '李明华' }, |
|||
{xiaoqu:'和平家园小区西门出口',tuUrl:'./image/ren1.jpg', weizhi: '西门出口', createTime: '2023-05-12', createTime2: '19:32:38', shijian: '社区户主', name: '李明华' }, |
|||
{xiaoqu:'和平家园小区东门出口',tuUrl:'./image/ren2.jpg', weizhi: '东门出口', createTime: '2023-05-23', createTime2: '18:26:38', shijian: '社区户主', name: '李明华' }, |
|||
{xiaoqu:'和平家园小区南门出口',tuUrl:'./image/ren1.jpg', weizhi: '南门出口', createTime: '2023-05-03', createTime2: '18:26:38', shijian: '社区户主', name: '李明华' }, |
|||
{xiaoqu:'和平家园小区东门出口',tuUrl:'./image/ren2.jpg', weizhi: '东门出口', createTime: '2023-05-08', createTime2: '18:26:38', shijian: '社区户主', name: '李明华' }, |
|||
{xiaoqu:'和平家园小区西门出口',tuUrl:'./image/ren1.jpg', weizhi: '西门出口', createTime: '2023-05-12', createTime2: '19:32:38', shijian: '社区户主', name: '李明华' }, |
|||
{xiaoqu:'和平家园小区东门出口',tuUrl:'./image/ren2.jpg', weizhi: '东门出口', createTime: '2023-05-23', createTime2: '18:26:38', shijian: '社区户主', name: '李明华' }, |
|||
], |
|||
dialogImage: false, |
|||
// 视频开始 |
|||
videoSrc: '../../../image/cangkushipin.mp4', |
|||
|
|||
}], |
|||
ua: navigator.userAgent.toLocaleLowerCase(), |
|||
}; |
|||
playStatus: '', |
|||
muteStatus: '', |
|||
isMute: true, |
|||
isPlay: true, |
|||
width: '100%', // 设置视频播放器的显示宽度（以像素为单位） |
|||
height: '430', // 设置视频播放器的显示高度（以像素为单位） |
|||
preload: 'auto', // 建议浏览器是否应在<video>加载元素后立即开始下载视频数据。 |
|||
controls: true, // 确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。 |
|||
autoplay: true, |
|||
departmentTypeArray: [], |
|||
icontu: ['redziyuan icon-intruder-alarm', 'greenziyuan icon-shipin1', 'yellowziyuan icon-menjin', 'blueziyuan icon-electronic-patrol'], |
|||
jigounavType: [ |
|||
{ value: '4', label: '入侵报警', zi: 'icon-dituleiditu' }, |
|||
{ value: '2', label: '视频监控', zi: 'icon-dituleiditu' }, |
|||
{ value: '1', label: '门禁管理', zi: '禁' }, |
|||
{ value: '3', label: '电子围栏', zi: '电' }, |
|||
], |
|||
// 视频结束 |
|||
rules: {} |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$refs['btnbar'].setButtonList(this.btnList) |
|||
}, |
|||
created() { |
|||
// 初始化变量 |
|||
// this.init() |
|||
}, |
|||
methods: { |
|||
resetState() { |
|||
this.viewState = 1 |
|||
}, |
|||
created() { |
|||
|
|||
// this.videoData = JSON.parse(this.$route.query.videoData); |
|||
// if (this.videoData.length <= 1) { |
|||
// this.iWndowType = 1; |
|||
// } else if (this.videoData.length > 1 && this.videoData.length <= 4) { |
|||
// this.iWndowType = 2; |
|||
btnHandle(btnKey) { |
|||
console.log('XXXXXXXXXXXXXXX ' + btnKey) |
|||
switch (btnKey) { |
|||
case 'toAdd': |
|||
this.toAdd() |
|||
break |
|||
case 'doDel': |
|||
this.doDel() |
|||
break |
|||
case 'toChangShang': |
|||
this.toChangShang() |
|||
break |
|||
case 'toGain': |
|||
this.toGain() |
|||
break |
|||
case 'doExport': |
|||
this.doExport() |
|||
break |
|||
case 'doClose': |
|||
this.doClose() |
|||
break |
|||
default: |
|||
break |
|||
} |
|||
}, |
|||
// 搜索条件效果 |
|||
clicksearchShow() { |
|||
this.isSearchShow = !this.isSearchShow |
|||
if (this.isSearchShow) { |
|||
this.searchxianshitit = '隐藏查询条件' |
|||
} else { |
|||
this.searchxianshitit = '显示查询条件' |
|||
} |
|||
}, |
|||
// init() { |
|||
// getOrgSidByPath({ orgPath: window.sessionStorage.getItem('defaultOrgPath') }).then((res) => { |
|||
// if (res.success) { |
|||
// this.listQuery.params.createOrgSid = res.data |
|||
// this.getType() |
|||
// this.getList() |
|||
// } |
|||
// }) |
|||
// }, |
|||
// getType() { |
|||
// typeValues({ |
|||
// type: 'supplierType' |
|||
// }).then((res) => { |
|||
// if (res.code === '200') { |
|||
// this.supplierType_list = res.data |
|||
// console.log('选择楼层', this.supplierType_list) |
|||
// } |
|||
// }) |
|||
// }, |
|||
// 序号 |
|||
indexMethod(index) { |
|||
var pagestart = (this.listQuery.current - 1) * this.listQuery.size |
|||
var pageindex = index + 1 + pagestart |
|||
return pageindex |
|||
}, |
|||
// 查询列表信息 |
|||
getList() { |
|||
// this.listLoading = true |
|||
// req.gysPagerList(this.listQuery).then((response) => { |
|||
// this.listLoading = false |
|||
// if (response.code === '200' && response.data && response.data.total > 0) { |
|||
// this.list = response.data.records |
|||
// this.listQuery.total = response.data.total |
|||
// } else { |
|||
// this.list = [] |
|||
// this.listQuery.total = 0 |
|||
// } |
|||
// }) |
|||
}, |
|||
// 查询按钮 |
|||
handleFilter() { |
|||
this.listQuery.current = 1 |
|||
this.getList() |
|||
}, |
|||
handleReset() { |
|||
// this.listQuery = { |
|||
// params: { |
|||
// manufacturerName: '', |
|||
// supplierType: '', |
|||
// useOrgSid: '', |
|||
// createOrgSid: '', |
|||
// manufacturerTelePhone: '', |
|||
// contactName: '' |
|||
// }, |
|||
// current: 1, |
|||
// size: 5 |
|||
// } |
|||
// this.init() |
|||
}, |
|||
// 打开添加对话框 |
|||
toAdd() { |
|||
this.viewState = 2 |
|||
this.$refs['divadd'].showAdd(this.listQuery.params.createOrgSid) |
|||
}, |
|||
|
|||
console.log("ua>>>>", this.ua) |
|||
|
|||
// if (this.ua.match(/msie/) != null || this.ua.match(/trident/) != null) { |
|||
// this.browserType = "IE"; |
|||
// this.videoData = JSON.parse(this.$route.query.videoData); |
|||
// if (this.videoData.length <= 1) { |
|||
// this.iWndowType = 1; |
|||
// } else if (this.videoData.length > 1 && this.videoData.length <= 4) { |
|||
// this.iWndowType = 2; |
|||
// } |
|||
// } else { |
|||
// this.$notify({ |
|||
// title: "失败", |
|||
// message: "请在ie模式下查看摄像头", |
|||
// type: "error", |
|||
// }); |
|||
// } |
|||
|
|||
handleSelectionChange(row) { |
|||
const aa = [] |
|||
row.forEach((element) => { |
|||
aa.push(element.sid) |
|||
}) |
|||
this.sids = aa |
|||
}, |
|||
mounted() { |
|||
this.videoChange(); |
|||
// 根据本行ID删除数据 |
|||
doDel() { |
|||
if (this.sids.length > 0) { |
|||
const tip = '请确认是否删除所选 ' + this.sids.length + ' 条记录?' |
|||
this.$confirm(tip, '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
const loading = this.$loading({ |
|||
lock: true, |
|||
text: 'Loading', |
|||
spinner: 'el-icon-loading', |
|||
background: 'rgba(0, 0, 0, 0.7)' |
|||
}) |
|||
req.delBySids(this.sids.toString()).then(resp => { |
|||
if (resp.success) { |
|||
loading.close() |
|||
this.$message({ type: 'success', message: resp.msg, showClose: true }) |
|||
this.getList() |
|||
} else { |
|||
loading.close() |
|||
} |
|||
}).catch(e => { |
|||
loading.close() |
|||
}) |
|||
}).catch(() => { |
|||
}) |
|||
} else { |
|||
this.$message({ type: 'error', message: '没有选择!!', showClose: true }) |
|||
return |
|||
} |
|||
}, |
|||
// toChangShang() { |
|||
// req.saveGysByOrgSid(this.listQuery.params.createOrgSid).then((resp) => { |
|||
// if (resp.success) { |
|||
// this.$message({ showClose: true, type: 'success', message: '获取成功' }) |
|||
// this.getList() |
|||
// } |
|||
// }) |
|||
// }, |
|||
// toGain() { |
|||
// req.saveAllByOrgSid({ orgSid: this.listQuery.params.createOrgSid }).then((resp) => { |
|||
// if (resp.success) { |
|||
// this.$message({ showClose: true, type: 'success', message: '获取成功' }) |
|||
// this.getList() |
|||
// } |
|||
// }) |
|||
// }, |
|||
handleEdit(row) { |
|||
this.viewState = 3 |
|||
this.$refs['divadd'].showEdit(row) |
|||
// if (row.supplierTypeValue !== '主机厂' && row.supplierTypeValue !== '分公司') { |
|||
// this.viewState = 3 |
|||
// this.$refs['divadd'].showEdit(row) |
|||
// } else { |
|||
// this.viewState = 5 |
|||
// this.$refs['divHosts'].showInfo(row) |
|||
// } |
|||
}, |
|||
destroyed() { |
|||
this.clickStopRealPlay(); |
|||
this.onLogout(); |
|||
// 打开查看 |
|||
handleCheck(row) { |
|||
this.viewState = 4 |
|||
this.$refs['divinfo'].showInfo(row) |
|||
}, |
|||
methods: { |
|||
videoChange() { |
|||
// setTimeout(() => { |
|||
// this.videoInitPlugin(); // 初始化video界面 |
|||
// }, 300); |
|||
// 导出 |
|||
// doExport() { |
|||
// basefinbankExportExcel(this.sids).then((res) => { |
|||
// const blob = new Blob([res], { |
|||
// type: 'application/vnd.ms-excel' |
|||
// }) |
|||
// const objectUrl = URL.createObjectURL(blob) |
|||
// window.location.href = objectUrl |
|||
// this.$notify({ |
|||
// title: '提示', |
|||
// message: '导出成功', |
|||
// type: 'success', |
|||
// duration: 2000 |
|||
// }) |
|||
// }) |
|||
// }, |
|||
doClose() { |
|||
this.$store.dispatch('tagsView/delView', this.$route) |
|||
this.$router.go(-1) |
|||
}, |
|||
toMore() { |
|||
this.dialogImage = true |
|||
}, |
|||
checkbox(item) { |
|||
// this.departmentTypeArray = this.departmentTypeArray.includes(item.value) |
|||
// ? [item.value] |
|||
// : [] |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
WebVideoCtrl.init('1',"100%",'100%') |
|||
}, |
|||
handleSelectionChange() {}, |
|||
submitForm() {}, |
|||
cancel() {}, |
|||
// 登录 |
|||
async onLogin() { |
|||
console.log("onLogin>>>>") |
|||
var that = this; |
|||
that.loginLoading = true; |
|||
// 登录设备 |
|||
WebVideoCtrl.I_Login( |
|||
that.hkvInfo.ip, |
|||
that.iProtocol, |
|||
that.hkvInfo.port, |
|||
that.hkvInfo.username, |
|||
that.hkvInfo.password, { |
|||
<style scoped> |
|||
/* .app-container{background-color: #f5f5f5;margin: 0;} */ |
|||
.shipinlisttop { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
/* padding: 0 0 0 15px; */ |
|||
margin: 20px 0; |
|||
background-color: #fff; |
|||
box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px; |
|||
padding: 10px; |
|||
} |
|||
.tab-header{background-color: #fff;} |
|||
.shipinscon {margin: 20px 0 0 0; |
|||
padding: 20px 50px 20px 50px;background-color: #fff;box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px; |
|||
} |
|||
.shipinstu {z-index: 0; |
|||
background: url("/image/cangkutu.png") center bottom no-repeat; |
|||
background-size: 100% 100%;min-height: 580px; |
|||
padding: 0 20px;position: relative; |
|||
} |
|||
.shipinstu .jingicon { |
|||
font-size: 22px !important; |
|||
border-radius: 40px !important; |
|||
width: 40px !important; |
|||
height: 40px !important;line-height: 40px; |
|||
padding: 0px;text-align: center; |
|||
|
|||
|
|||
async: false, |
|||
success: (xmlDoc) => { |
|||
console.log("success>>>>") |
|||
//TODO 获取通道信息 |
|||
that.getChannelInfo(); |
|||
that.getDevicePort(that.hkvInfo.ip + "_" + that.hkvInfo.port); |
|||
that.loginLoading = false; |
|||
this.clickStartRealPlay(); |
|||
}, |
|||
error: function(e) { |
|||
console.log("error>>>>",e) |
|||
that.loginLoading = false; |
|||
alert("当前摄像头配置不对或不在线，登录失败"); |
|||
// window.opener = null; |
|||
// window.open('', '_self'); |
|||
// window.close(); |
|||
}, |
|||
} |
|||
); |
|||
}, |
|||
// 退出 |
|||
onLogout() { |
|||
this.videoData.forEach((element) => { |
|||
var szDeviceIdentify = element.ip + "_" + element.port; |
|||
var iRet = WebVideoCtrl.I_Logout(szDeviceIdentify); |
|||
if (0 == iRet) { |
|||
// this.$message({ |
|||
// showClose: true, |
|||
// message: "退出成功", |
|||
// type: "success", |
|||
// }); |
|||
} else { |
|||
// this.$message({ |
|||
// showClose: true, |
|||
// message: "退出失败", |
|||
// type: "error", |
|||
// }); |
|||
} |
|||
}); |
|||
}, |
|||
clickStartRealPlay() { |
|||
console.log("开始预览", this.index); |
|||
// 开始预览 |
|||
var that = this; |
|||
that.startPlayLoading = true; |
|||
var szDeviceIdentify = that.hkvInfo.ip + "_" + that.hkvInfo.port; |
|||
debugger |
|||
that.startRealPlay(szDeviceIdentify, this.index, that.hkvInfo.nvrPrechannel); |
|||
that.startPlayLoading = false; |
|||
}, |
|||
startRealPlay(szDeviceIdentify, iWndIndex, iChannelID) { |
|||
var that = this; |
|||
WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, { |
|||
iRtspPort: that.iRtspPort, |
|||
iWndIndex: iWndIndex, |
|||
iChannelID: iChannelID, |
|||
bZeroChannel: that.bZeroChannel, |
|||
iStreamType: 2, //码流类型，2为子码流 |
|||
success: function() { |
|||
// that.$notify({ |
|||
// title: "成功", |
|||
// message: "开始预览通道" + iChannelID + "成功", |
|||
// type: "success", |
|||
// }); |
|||
}, |
|||
error(status, xmlDoc2) { |
|||
console.log(xmlDoc2); //不能删除 |
|||
// that.$notify({ |
|||
// title: "失败", |
|||
// message: "开始预览通道" + iChannelID + "失败", |
|||
// type: "error", |
|||
// }); |
|||
if (status === 403) { |
|||
console.log("szInfo 设备不支持Websocket取流！"); |
|||
} else { |
|||
console.log("开始预览失败 ", status, xmlDoc2); |
|||
} |
|||
}, |
|||
}); |
|||
}, |
|||
videoInitPlugin() { |
|||
this.$nextTick(() => { |
|||
var iRet = WebVideoCtrl.I_CheckPluginInstall(); |
|||
if (iRet === -1) { |
|||
// alert("您还未安装过插件，双击开发包目录里的WebComponentsKit.exe安装"); |
|||
this.myFunction(); |
|||
return; |
|||
} else { |
|||
// if (this.ua.match(/msie/) != null || this.ua.match(/trident/) != null) { |
|||
this.browserType = "IE"; |
|||
this.initPlugin(); |
|||
// } else { |
|||
// this.$notify({ |
|||
// title: "失败", |
|||
// message: "请在ie模式下查看摄像头", |
|||
// type: "error", |
|||
// }); |
|||
// } |
|||
} |
|||
} |
|||
|
|||
}); |
|||
}, |
|||
myFunction() { |
|||
var r = confirm("您还未安装过插件，请下载后查看摄像!"); |
|||
if (r == true) { |
|||
window.location.href = "/WebComponentsKit.exe"; |
|||
} else {} |
|||
}, |
|||
initPlugin() { |
|||
console.log("initPlugin>>>>") |
|||
WebVideoCtrl.I_InitPlugin("100%", "100%", { |
|||
bWndFull: true, //是否支持单窗口双击全屏，默I_CheckPluginInstall |
|||
iWndowType: this.iWndowType, //默认展示几个摄像头1x1 2x2 |
|||
cbInitPluginComplete: function() { |
|||
WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin"); |
|||
// 检查插件是否最新 |
|||
if (WebVideoCtrl.I_CheckPluginVersion() === -1) { |
|||
return; |
|||
} |
|||
}, |
|||
}); |
|||
console.log("for>>>>") |
|||
for (var i = 0; i < this.videoData.length; i++) { |
|||
.redzibg { |
|||
color: #fff; background: radial-gradient(circle, #9c0808, #c50101); |
|||
border: 1px solid #eb0606; |
|||
} |
|||
.bluezibg { |
|||
color: #fff; |
|||
color: #fff; background: radial-gradient(circle, #2669f1, #327af9); |
|||
border: 1px solid #469efd; |
|||
} |
|||
.shipinstu .jingicona1{position: absolute;top: 10px;left: 1%;} |
|||
.shipinstu .jingicona2{position: absolute;top: 10px;left: 40%;} |
|||
.shipinstu .jingicona3{position: absolute;top: 10px;left: 70%;} |
|||
.shipinstu .jingicona4{position: absolute;top: 10px;left: 95%;} |
|||
.shipinstu .jingiconb1{position: absolute;top: 30%;left: 1%;} |
|||
.shipinstu .jingiconb2{position: absolute;top: 150px;left: 30%;} |
|||
.shipinstu .jingiconb3{position: absolute;top: 150px;left: 50%;} |
|||
.shipinstu .jingiconb4{position: absolute;top: 150px;left: 70%;} |
|||
.mores{padding: 0 10px;display: flex; |
|||
flex-direction: row; |
|||
flex-wrap: nowrap; |
|||
justify-content: flex-start;align-items: center;} |
|||
.mores .more{flex: 1;font-size: 14px;padding: 0 10px; |
|||
display: flex; |
|||
flex-direction: row; |
|||
flex-wrap: nowrap; |
|||
justify-content: flex-start;align-items: center;} |
|||
.mores .more p {display: inline-block; |
|||
font-size: 14px; |
|||
} |
|||
.mores .more .iconbox {display: inline-block; |
|||
border-radius: 30px; |
|||
line-height: 30px; |
|||
width: 30px; |
|||
height: 30px; |
|||
color: #fff; |
|||
font-size: 18px;text-align: center;margin: 0 5px; |
|||
} |
|||
.iconbox_red { |
|||
background-color: #df2f07; |
|||
} |
|||
|
|||
this.hkvInfo = this.videoData[i]; |
|||
this.index = i; |
|||
this.onLogin(); |
|||
} |
|||
}, |
|||
getDevicePort(szDeviceIdentify) { |
|||
var oPort = WebVideoCtrl.I_GetDevicePort(szDeviceIdentify); |
|||
this.iRtspPort = oPort.iRtspPort; |
|||
}, |
|||
.iconbox_yellow { |
|||
background-color: #ff7521; |
|||
} |
|||
|
|||
clickStopRealPlay: function() { |
|||
for (var i = 0; i <= this.index; i++) { |
|||
setTimeout(this.stopRealPlay(i), 1000); |
|||
} |
|||
}, |
|||
stopRealPlay: function(iWndIndex) { |
|||
var that = this; |
|||
WebVideoCtrl.I_Stop({ |
|||
iWndIndex: iWndIndex, |
|||
success: function() { |
|||
// that.$notify({ |
|||
// title: "成功", |
|||
// message: "停止预览窗口" + iWndIndex + "成功", |
|||
// type: "success", |
|||
// }); |
|||
}, |
|||
error: function() { |
|||
// that.$notify({ |
|||
// title: "失败", |
|||
// message: "停止预览窗口" + iWndIndex + "失败", |
|||
// type: "error", |
|||
// }); |
|||
}, |
|||
}); |
|||
}, |
|||
// 获取通道，实际上可以根据自己的项目，获取数字通道，模拟通道，零通道中的一个或多个，不用全部获取（提高效率） |
|||
getChannelInfo: function() { |
|||
var that = this; |
|||
var szDeviceIdentify = this.hkvInfo.ip + ":" + this.hkvInfo.port; |
|||
// 数字通道 |
|||
that.hkvInfo.channels = []; |
|||
WebVideoCtrl.I_GetDigitalChannelInfo(szDeviceIdentify, { |
|||
async: false, |
|||
mysuccess: function(xmlStr) { |
|||
console.log("mysuccess I_GetDigitalChannelInfo: ", xmlStr); |
|||
var jsonObj = that.$x2js.xml2js(xmlStr); |
|||
var list = jsonObj.InputProxyChannelStatusList.InputProxyChannelStatus; |
|||
for (var x = 0; x < list.length; x++) { |
|||
that.hkvInfo.channels.push(list[x].id); |
|||
} |
|||
}, |
|||
success: function(xmlDoc) {}, |
|||
error: function(status, xmlDoc) { |
|||
console.log("获取数字通道失败"); |
|||
}, |
|||
}); |
|||
// 模拟通道 |
|||
WebVideoCtrl.I_GetAnalogChannelInfo(szDeviceIdentify, { |
|||
async: false, |
|||
mysuccess: function(xmlStr) { |
|||
var jsonObj = that.$x2js.xml2js(xmlStr); |
|||
console.log("模拟通道mysuccess", xmlStr); |
|||
var id = jsonObj.VideoInputChannelList.VideoInputChannel.id; |
|||
that.hkvInfo.channels.push(id); |
|||
}, |
|||
success: function(xmlStr) { |
|||
console.log("模拟通道success", xmlStr); |
|||
}, |
|||
error: function(status, xmlDoc) { |
|||
console.log("模拟通道error", xmlDoc); |
|||
}, |
|||
}); |
|||
// TODO 零通道 |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped> |
|||
.video_box { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.plugin { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.iconbox_green { |
|||
background-color: #07C160; |
|||
} |
|||
.iconbox_blue { |
|||
background-color: #3f9bfa; |
|||
} |
|||
.iconbox_hui { |
|||
background-color: #373739; |
|||
} |
|||
.huizi{color: #373739;} |
|||
|
|||
.my-tag { |
|||
margin-left: 3px; |
|||
} |
|||
|
|||
.my-group-btn { |
|||
margin-top: 5px; |
|||
} |
|||
/* // 底部导航 */ |
|||
.tabhead { |
|||
position: fixed; |
|||
bottom: 50px; |
|||
left: 230px; |
|||
z-index: 900; |
|||
/* background-color: rgba( #04154d, 0.8); */ |
|||
/* box-shadow: 0px 0px 6px #0d27c2; */ |
|||
} |
|||
.iconfontyuan { |
|||
font-size: 18px !important; |
|||
margin: 0 3px 0 3px; |
|||
border-radius: 60px !important; |
|||
width: 60px !important; |
|||
height: 60px !important; |
|||
padding: 5px; |
|||
|
|||
} |
|||
.yellowziyuan { |
|||
color: #fff; |
|||
background-color: #f57c13; |
|||
} |
|||
|
|||
.redziyuan { |
|||
color: #fff; |
|||
background-color: #ff0000; |
|||
} |
|||
|
|||
.blueziyuan { |
|||
color: #fff; |
|||
background-color: #5b9cf7; |
|||
} |
|||
|
|||
.greenziyuan { |
|||
color: #fff; |
|||
background-color: #06be4d; |
|||
} |
|||
|
|||
.ziziyuan { |
|||
color: #fff; |
|||
background-color: #683afd; |
|||
} |
|||
/* // .tabhead .bar{background-color: #0b5394;color: #f5f7fa;border-right: 1px solid #fff;padding: 11px 0;text-align: center;display: inline-block;vertical-align: top; |
|||
// width: calc((100% - 1px) / 4 );box-sizing: border-box;font-size:18px;} |
|||
// .tabhead .bar:last-of-type{border-right: 0px solid #eeeeee;width: calc((100% - 0px) / 4 );} |
|||
// .tabhead .barb {background-color: #fff;color: #0b5394;} */ |
|||
</style> |
|||
|
|||
@ -0,0 +1,606 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<div v-show="viewState == 1"> |
|||
<button-bar view-title="人脸识别" ref="btnbar" :btndisabled="btndisabled" @btnhandle="btnHandle"/> |
|||
<div class="main-content"> |
|||
<div class="tops"> |
|||
<!-- 第1个 --> |
|||
<div class="topbox"> |
|||
<div class="toptitle"> |
|||
<span class="icon myiconfont iconbox greenzi"></span> |
|||
<p>人员类型统计</p> |
|||
</div> |
|||
<div class="mids"> |
|||
<div class="note"><span class="bluezi">360</span>路人</div> |
|||
<div class="note"><span class="yellowzi">360</span>工作人员</div> |
|||
<div class="note"><span class="redzi">360</span>路人</div> |
|||
</div> |
|||
</div> |
|||
<!-- 第2个 --> |
|||
<div class="topbox"> |
|||
<div class="toptitle iconbox_red"> |
|||
<span class="icon myiconfont iconbox redzi"></span> |
|||
<p>重点关注人员</p> |
|||
</div> |
|||
<div class="mids rensnote"> |
|||
<!-- <div class="rensnote"> --> |
|||
<span class="tit">图库照</span> |
|||
<img class="rentu" src="../../../public/image/ren1.jpg" alt=""> |
|||
<div class="yuans"> |
|||
<p>98%</p><span>相似度</span> |
|||
</div> |
|||
<span class="tit">图库照</span> |
|||
<img class="rentu" src="../../../public/image/ren2.jpg" alt=""> |
|||
<div class="rightzi"> |
|||
<p>位置：东门出口</p> |
|||
<p>日期：2022-05-16</p> |
|||
<p>时间：18：26：36</p> |
|||
<p class="redzi">事件：重点关注人员</p> |
|||
<p>姓名：刘小明</p> |
|||
</div> |
|||
<!-- </div> --> |
|||
|
|||
</div> |
|||
</div> |
|||
<!-- 11 --> |
|||
</div> |
|||
<div class="searchcon"> |
|||
<el-button size="small" class="searchbtn" @click="clicksearchShow">{{ searchxianshitit }}</el-button> |
|||
<div v-show="isSearchShow" class="search"> |
|||
<el-form ref="listQueryform" :inline="true" :model="listQuery" label-width="110px" class="tab-header"> |
|||
<el-form-item label="人员姓名"> |
|||
<el-input v-model="listQuery.params.manufacturerName" clearable placeholder="" class="addinputw"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="选择楼层"> |
|||
<el-select v-model="listQuery.params.supplierType" filterable clearable placeholder="请选择楼层"> |
|||
<el-option v-for="item in supplierType_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<!-- <el-form-item label="厂商办公电话"> |
|||
<el-input v-model="listQuery.params.manufacturerTelePhone" maxlength="130" placeholder="" class="addinputw" clearable/> |
|||
</el-form-item> |
|||
<el-form-item label="联系人"> |
|||
<el-input v-model="listQuery.params.contactName" maxlength="125" placeholder="" class="addinputw" clearable/> |
|||
</el-form-item> --> |
|||
</el-form> |
|||
<div class="btn"> |
|||
<el-button type="primary" icon="el-icon-search" size="small" @click="handleFilter">查询</el-button> |
|||
<el-button type="primary" icon="el-icon-refresh" size="small" @click="handleReset">重置</el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="listtop"> |
|||
<div class="tit">人脸识别信息列表</div> |
|||
<!-- 翻页分页 --> |
|||
<pageye v-show="list.length > 0" :total="listQuery.total" :page.sync="listQuery.current" :limit.sync="listQuery.size" class="pagination" @pagination="getList"/> |
|||
</div> |
|||
<div class="renlianlists"> |
|||
|
|||
<!-- 第3行 --> |
|||
<div class="con"> |
|||
<!-- 第1 --> |
|||
<div class="news" v-for="(item, index) in Datalista" :key="index"> |
|||
<div class="title"> |
|||
<div class="more myiconfont" @click="toMore()"></div> |
|||
<div class="newstits">{{item.xiaoqu}}</div> |
|||
</div> |
|||
<div class="contents"> |
|||
<div class="newsli"> |
|||
<div class="tu"><img :src="item.tuUrl" alt="" /></div> |
|||
<div class="rightwen"> |
|||
<div class="tit">位置：{{item.weizhi}}</div> |
|||
<div class="time">日期：{{item.createTime}}</div> |
|||
<div class="time">时间：{{item.createTime2}}</div> |
|||
<div class="time">事件：{{item.shijian}}</div> |
|||
<div class="time">姓名：{{item.name}}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
</div> |
|||
<!-- 列表结束 --> |
|||
</div> |
|||
<div class="pages"> |
|||
<!-- 翻页 --> |
|||
<pagination v-show="list.length > 0" :total="listQuery.total" :page.sync="listQuery.current" :limit.sync="listQuery.size" class="pagination" @pagination="getList"/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 查看视频 --> |
|||
<el-dialog v-el-drag-dialog title="查看视频" :visible.sync="dialogImage" width="800px"> |
|||
<div class="shipin"> |
|||
<video :preload="preload" autoplay :height="height" :width="width" align="center" :controls="controls"> |
|||
<source :src="videoSrc" type="video/mp4"> |
|||
</video> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Pagination from '@/components/pagination' |
|||
import pageye from '@/components/pagination/pageye' |
|||
import ButtonBar from '@/components/ButtonBar' |
|||
// import { typeValues, getOrgSidByPath } from '@/api/cheliang/dictcommons' |
|||
// import baojingchaxunAdd from './baojingchaxunAdd' |
|||
// import baojingchaxunInfo from './baojingchaxunInfo' |
|||
// import req from '@/api/baojingchaxun/baojingchaxun' |
|||
|
|||
export default { |
|||
name: 'baojingchaxunList', |
|||
components: { |
|||
Pagination, |
|||
pageye, |
|||
ButtonBar |
|||
|
|||
}, |
|||
data() { |
|||
return { |
|||
btndisabled: false, |
|||
btnList: [ |
|||
// { |
|||
// type: 'primary', |
|||
// size: 'small', |
|||
// icon: 'plus', |
|||
// btnKey: 'toAdd', |
|||
// btnLabel: '新增' |
|||
// }, |
|||
// { |
|||
// type: 'danger', |
|||
// size: 'small', |
|||
// icon: 'del', |
|||
// btnKey: 'doDel', |
|||
// btnLabel: '删除' |
|||
// }, |
|||
// { |
|||
// type: 'primary', |
|||
// size: 'small', |
|||
// icon: '', |
|||
// btnKey: 'toChangShang', |
|||
// btnLabel: '获取厂商' |
|||
// }, |
|||
// { |
|||
// type: 'primary', |
|||
// size: 'small', |
|||
// icon: '', |
|||
// btnKey: 'toGain', |
|||
// btnLabel: '获取分公司' |
|||
// }, |
|||
|
|||
// { |
|||
// type: 'success', |
|||
// size: 'small', |
|||
// icon: 'export', |
|||
// btnKey: 'build', |
|||
// btnLabel: '导出' |
|||
// }, |
|||
{ |
|||
type: 'info', |
|||
size: 'small', |
|||
icon: 'cross', |
|||
btnKey: 'doClose', |
|||
btnLabel: '关闭' |
|||
} |
|||
], |
|||
viewState: 1, |
|||
isSearchShow: false, |
|||
searchxianshitit: '显示查询条件', |
|||
sids: [], |
|||
// 查询 ----------- |
|||
tableKey: 0, |
|||
list: [{bianma:'212233433',supplierTypeValue:'222',weizhi:'212233433',time:'2023-02-26',anzhuangtime:'2023-02-26',gonghuashang:'222' |
|||
,supplierTypeValue:'222',zhuangtai:'222'} |
|||
], |
|||
listLoading: false, |
|||
listQuery: { |
|||
params: { |
|||
manufacturerName: '', |
|||
supplierType: '', |
|||
useOrgSid: '', |
|||
createOrgSid: '', |
|||
manufacturerTelePhone: '', |
|||
contactName: '' |
|||
}, |
|||
current: 1, |
|||
size: 5, |
|||
total: 0 |
|||
}, |
|||
supplierType_list: [], |
|||
Datalista: [ |
|||
{xiaoqu:'和平家园小区南门出口',tuUrl:'./image/ren1.jpg', weizhi: '南门出口', createTime: '2023-05-03', createTime2: '18:26:38', shijian: '社区户主', name: '李明华' }, |
|||
{xiaoqu:'和平家园小区东门出口',tuUrl:'./image/ren2.jpg', weizhi: '东门出口', createTime: '2023-05-08', createTime2: '18:26:38', shijian: '社区户主', name: '李明华' }, |
|||
{xiaoqu:'和平家园小区西门出口',tuUrl:'./image/ren1.jpg', weizhi: '西门出口', createTime: '2023-05-12', createTime2: '19:32:38', shijian: '社区户主', name: '李明华' }, |
|||
{xiaoqu:'和平家园小区东门出口',tuUrl:'./image/ren2.jpg', weizhi: '东门出口', createTime: '2023-05-23', createTime2: '18:26:38', shijian: '社区户主', name: '李明华' }, |
|||
{xiaoqu:'和平家园小区南门出口',tuUrl:'./image/ren1.jpg', weizhi: '南门出口', createTime: '2023-05-03', createTime2: '18:26:38', shijian: '社区户主', name: '李明华' }, |
|||
{xiaoqu:'和平家园小区东门出口',tuUrl:'./image/ren2.jpg', weizhi: '东门出口', createTime: '2023-05-08', createTime2: '18:26:38', shijian: '社区户主', name: '李明华' }, |
|||
{xiaoqu:'和平家园小区西门出口',tuUrl:'./image/ren1.jpg', weizhi: '西门出口', createTime: '2023-05-12', createTime2: '19:32:38', shijian: '社区户主', name: '李明华' }, |
|||
{xiaoqu:'和平家园小区东门出口',tuUrl:'./image/ren2.jpg', weizhi: '东门出口', createTime: '2023-05-23', createTime2: '18:26:38', shijian: '社区户主', name: '李明华' }, |
|||
], |
|||
dialogImage: false, |
|||
// 视频开始 |
|||
videoSrc: '../../../image/cangkushipin.mp4', |
|||
|
|||
playStatus: '', |
|||
muteStatus: '', |
|||
isMute: true, |
|||
isPlay: true, |
|||
width: '100%', // 设置视频播放器的显示宽度（以像素为单位） |
|||
height: '430', // 设置视频播放器的显示高度（以像素为单位） |
|||
preload: 'auto', // 建议浏览器是否应在<video>加载元素后立即开始下载视频数据。 |
|||
controls: true, // 确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。 |
|||
autoplay: true, |
|||
// 视频结束 |
|||
rules: {} |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$refs['btnbar'].setButtonList(this.btnList) |
|||
}, |
|||
created() { |
|||
// 初始化变量 |
|||
// this.init() |
|||
}, |
|||
methods: { |
|||
resetState() { |
|||
this.viewState = 1 |
|||
}, |
|||
btnHandle(btnKey) { |
|||
console.log('XXXXXXXXXXXXXXX ' + btnKey) |
|||
switch (btnKey) { |
|||
case 'toAdd': |
|||
this.toAdd() |
|||
break |
|||
case 'doDel': |
|||
this.doDel() |
|||
break |
|||
case 'toChangShang': |
|||
this.toChangShang() |
|||
break |
|||
case 'toGain': |
|||
this.toGain() |
|||
break |
|||
case 'doExport': |
|||
this.doExport() |
|||
break |
|||
case 'doClose': |
|||
this.doClose() |
|||
break |
|||
default: |
|||
break |
|||
} |
|||
}, |
|||
// 搜索条件效果 |
|||
clicksearchShow() { |
|||
this.isSearchShow = !this.isSearchShow |
|||
if (this.isSearchShow) { |
|||
this.searchxianshitit = '隐藏查询条件' |
|||
} else { |
|||
this.searchxianshitit = '显示查询条件' |
|||
} |
|||
}, |
|||
// init() { |
|||
// getOrgSidByPath({ orgPath: window.sessionStorage.getItem('defaultOrgPath') }).then((res) => { |
|||
// if (res.success) { |
|||
// this.listQuery.params.createOrgSid = res.data |
|||
// this.getType() |
|||
// this.getList() |
|||
// } |
|||
// }) |
|||
// }, |
|||
// getType() { |
|||
// typeValues({ |
|||
// type: 'supplierType' |
|||
// }).then((res) => { |
|||
// if (res.code === '200') { |
|||
// this.supplierType_list = res.data |
|||
// console.log('选择楼层', this.supplierType_list) |
|||
// } |
|||
// }) |
|||
// }, |
|||
// 序号 |
|||
indexMethod(index) { |
|||
var pagestart = (this.listQuery.current - 1) * this.listQuery.size |
|||
var pageindex = index + 1 + pagestart |
|||
return pageindex |
|||
}, |
|||
// 查询列表信息 |
|||
getList() { |
|||
// this.listLoading = true |
|||
// req.gysPagerList(this.listQuery).then((response) => { |
|||
// this.listLoading = false |
|||
// if (response.code === '200' && response.data && response.data.total > 0) { |
|||
// this.list = response.data.records |
|||
// this.listQuery.total = response.data.total |
|||
// } else { |
|||
// this.list = [] |
|||
// this.listQuery.total = 0 |
|||
// } |
|||
// }) |
|||
}, |
|||
// 查询按钮 |
|||
handleFilter() { |
|||
this.listQuery.current = 1 |
|||
this.getList() |
|||
}, |
|||
handleReset() { |
|||
// this.listQuery = { |
|||
// params: { |
|||
// manufacturerName: '', |
|||
// supplierType: '', |
|||
// useOrgSid: '', |
|||
// createOrgSid: '', |
|||
// manufacturerTelePhone: '', |
|||
// contactName: '' |
|||
// }, |
|||
// current: 1, |
|||
// size: 5 |
|||
// } |
|||
// this.init() |
|||
}, |
|||
// 打开添加对话框 |
|||
toAdd() { |
|||
this.viewState = 2 |
|||
this.$refs['divadd'].showAdd(this.listQuery.params.createOrgSid) |
|||
}, |
|||
|
|||
handleSelectionChange(row) { |
|||
const aa = [] |
|||
row.forEach((element) => { |
|||
aa.push(element.sid) |
|||
}) |
|||
this.sids = aa |
|||
}, |
|||
// 根据本行ID删除数据 |
|||
doDel() { |
|||
if (this.sids.length > 0) { |
|||
const tip = '请确认是否删除所选 ' + this.sids.length + ' 条记录?' |
|||
this.$confirm(tip, '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
const loading = this.$loading({ |
|||
lock: true, |
|||
text: 'Loading', |
|||
spinner: 'el-icon-loading', |
|||
background: 'rgba(0, 0, 0, 0.7)' |
|||
}) |
|||
req.delBySids(this.sids.toString()).then(resp => { |
|||
if (resp.success) { |
|||
loading.close() |
|||
this.$message({ type: 'success', message: resp.msg, showClose: true }) |
|||
this.getList() |
|||
} else { |
|||
loading.close() |
|||
} |
|||
}).catch(e => { |
|||
loading.close() |
|||
}) |
|||
}).catch(() => { |
|||
}) |
|||
} else { |
|||
this.$message({ type: 'error', message: '没有选择!!', showClose: true }) |
|||
return |
|||
} |
|||
}, |
|||
// toChangShang() { |
|||
// req.saveGysByOrgSid(this.listQuery.params.createOrgSid).then((resp) => { |
|||
// if (resp.success) { |
|||
// this.$message({ showClose: true, type: 'success', message: '获取成功' }) |
|||
// this.getList() |
|||
// } |
|||
// }) |
|||
// }, |
|||
// toGain() { |
|||
// req.saveAllByOrgSid({ orgSid: this.listQuery.params.createOrgSid }).then((resp) => { |
|||
// if (resp.success) { |
|||
// this.$message({ showClose: true, type: 'success', message: '获取成功' }) |
|||
// this.getList() |
|||
// } |
|||
// }) |
|||
// }, |
|||
handleEdit(row) { |
|||
this.viewState = 3 |
|||
this.$refs['divadd'].showEdit(row) |
|||
// if (row.supplierTypeValue !== '主机厂' && row.supplierTypeValue !== '分公司') { |
|||
// this.viewState = 3 |
|||
// this.$refs['divadd'].showEdit(row) |
|||
// } else { |
|||
// this.viewState = 5 |
|||
// this.$refs['divHosts'].showInfo(row) |
|||
// } |
|||
}, |
|||
// 打开查看 |
|||
handleCheck(row) { |
|||
this.viewState = 4 |
|||
this.$refs['divinfo'].showInfo(row) |
|||
}, |
|||
// 导出 |
|||
// doExport() { |
|||
// basefinbankExportExcel(this.sids).then((res) => { |
|||
// const blob = new Blob([res], { |
|||
// type: 'application/vnd.ms-excel' |
|||
// }) |
|||
// const objectUrl = URL.createObjectURL(blob) |
|||
// window.location.href = objectUrl |
|||
// this.$notify({ |
|||
// title: '提示', |
|||
// message: '导出成功', |
|||
// type: 'success', |
|||
// duration: 2000 |
|||
// }) |
|||
// }) |
|||
// }, |
|||
doClose() { |
|||
this.$store.dispatch('tagsView/delView', this.$route) |
|||
this.$router.go(-1) |
|||
}, |
|||
toMore() { |
|||
this.dialogImage = true |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
|
|||
.rensnote{padding: 10px 30px; display: flex; |
|||
flex-direction: row; |
|||
flex-wrap: nowrap; |
|||
justify-content: space-around;align-items: center;} |
|||
.rensnote .tit{padding: 0;width: 20px;color: #8e8e8e;} |
|||
.rensnote .rentu{padding: 0;width: 80px;height: 80px;border-radius: 5px;border: 1px solid #ff2424;margin: 0 20px;} |
|||
.rensnote .yuans{padding: 0;margin: 0 20px;width: 80px;height: 80px;border-radius: 80px;border: 1px solid #ff2424;text-align: center;} |
|||
.rensnote .yuans p{padding: 13px 0 3px 0;color: #ff2424;font-size: 26px;margin: 0;} |
|||
.rensnote .yuans span{padding: 0;margin: 0;color: #8e8e8e;font-size: 14px;} |
|||
.rensnote .rightzi{padding: 0 10px;color: #8e8e8e;text-align: left;} |
|||
.rensnote .rightzi p{padding: 1px 0;color: #8e8e8e;font-size: 12px;margin: 0;} |
|||
.tops { |
|||
display: flex; |
|||
flex-direction: row; |
|||
flex-wrap: nowrap; |
|||
justify-content: flex-start;align-items: flex-start; |
|||
padding: 0px; |
|||
margin: 20px 0; |
|||
} |
|||
.tops .topbox { |
|||
display: flex; |
|||
flex-direction: row; |
|||
flex-wrap: nowrap; |
|||
justify-content: flex-start;align-items: flex-start; |
|||
width: 50%; |
|||
margin: 0 20px 0 0; |
|||
background-color: #fff; |
|||
box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px; |
|||
padding: 0px; |
|||
} |
|||
.tops .topbox:last-of-type { |
|||
margin: 0; |
|||
} |
|||
.tops .topbox .toptitle {width: 140px;background-color: #e8feed; |
|||
font-size: 20px; |
|||
padding: 10px 10px;margin: 0 auto; |
|||
} |
|||
.tops .topbox .toptitle span{display: block; |
|||
padding: 0px 10px;margin: 0 auto;font-size: 36px !important; |
|||
/* font-weight: bold; font-size: 16px; */ |
|||
} |
|||
.iconbox { |
|||
/* border-radius: 10px; |
|||
line-height: 80px; |
|||
width: 80px; |
|||
height: 80px; |
|||
color: #fff; */ |
|||
font-size: 36px !important;text-align: center; |
|||
} |
|||
.tops .topbox .toptitle p{ |
|||
padding: 0px 10px; |
|||
color: #333;font-size: 14px; |
|||
} |
|||
.tops .topbox .mids {flex: 1; |
|||
display: flex; |
|||
flex-direction: row; |
|||
flex-wrap: nowrap; |
|||
justify-content: space-between;align-items: center; |
|||
/* margin: 0 auto;text-align: center; |
|||
padding: 0px ; */ |
|||
} |
|||
|
|||
|
|||
.tops .topbox .mids .note {margin: 0 auto;text-align: center; |
|||
color: #333; |
|||
font-size: 14px; |
|||
padding: 16px 0 0px 0; |
|||
} |
|||
.tops .topbox .mids .note span { |
|||
font-size: 32px;display: block; |
|||
padding: 3px 0px; |
|||
} |
|||
.iconbox_red { |
|||
background-color: #ffe9e9 !important; |
|||
} |
|||
|
|||
|
|||
.con { |
|||
padding: 20px 0;background-color: #fff; |
|||
} |
|||
.news {display: inline-block; |
|||
width: calc(25% - 20px); |
|||
margin: 10px 10px; |
|||
background-color: #fff; |
|||
box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px; |
|||
padding: 0px; |
|||
} |
|||
/* .news:nth-of-type(4n) { |
|||
margin: 0 !important; |
|||
} */ |
|||
.news:nth-of-type(4n) { width: calc(25% - 10px); |
|||
margin: 10px 0 10px 10px; |
|||
} |
|||
.news:nth-of-type(4n - 3) {width: calc(25% - 10px); |
|||
margin: 10px 10px 10px 0px; |
|||
} |
|||
.news .title { |
|||
display: flex; |
|||
flex-direction: row; |
|||
flex-wrap: nowrap; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
padding: 3px 10px 3px 20px;text-align: center; |
|||
border-bottom: 1px solid #ececee;background-color: #f7f9fb; |
|||
} |
|||
|
|||
.news .title .newstits {text-align: left;flex: 1; |
|||
font-weight: bold; color: #333;font-size: 16px; |
|||
} |
|||
|
|||
.news .title .more {width: 80px; |
|||
cursor: pointer;color: #519deb;font-size: 28px; |
|||
} |
|||
|
|||
.news .contents { |
|||
|
|||
padding: 10px 0; |
|||
/* height: 210px; |
|||
overflow: hidden; */ |
|||
} |
|||
|
|||
.news .contents .newsli {display: inline-block; |
|||
display: flex; |
|||
flex-direction: row; |
|||
flex-wrap: nowrap; |
|||
justify-content: space-between; |
|||
margin: 0px 0px; |
|||
padding: 5px 10px; |
|||
/* border-bottom: 1px solid #ececee; */ |
|||
} |
|||
.news .contents .newsli .tu { |
|||
padding: 0px 0 0 0; |
|||
width: 120px;height: 120px;border-radius: 5px;border: 1px solid #f5f5f5; |
|||
} |
|||
.news .contents .newsli .tu img { |
|||
width: 100%;height: 100%;border-radius: 5px;border: 1px solid #f5f5f5; |
|||
} |
|||
.news .contents .newsli .rightwen { |
|||
padding: 0px 0 0 20px; |
|||
flex: 3; |
|||
} |
|||
.news .contents .newsli .rightwen .tit { |
|||
padding: 3px 0; |
|||
font-size: 14px;font-weight: bold; |
|||
/* height: 25px; |
|||
overflow: hidden; |
|||
line-height: 25px; */ |
|||
} |
|||
|
|||
/* .news .contents .newsli .tel{padding: 10px 0;color: #84d1f5;flex: 1;text-align: center;} */ |
|||
.news .contents .newsli .rightwen .time { |
|||
padding: 3px 0; |
|||
color: #848383; |
|||
font-size: 14px; |
|||
/* height: 25px; |
|||
line-height: 25px; */ |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue