monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit be77c5381f0352b73af05de48aa46551104167bb 2 parents ab6f9ca9 1babf96d

Merge branch 'wuhl-master' into 'master' 

Wuhl master



See merge request !9
Inline Side-by-side
Showing 21 changed files with 354 additions and 161 deletions
... ... @@ -77,17 +77,17 @@
}
.screen-middle #middle-top {
width: 100%;
height: 32.4%;
height: 32%;
position: relative;
}
.screen-middle #middle-center {
width: 100%;
height: 32.4%;
height: 32%;
position: relative;
}
.screen-middle #middle-bottom {
width: 100%;
height: 34%;
height: 36%;
position: relative;
}
... ... @@ -96,6 +96,12 @@
width: 30%;
}
.declarepolyline-title {
position: absolute;
left: 80%;
top: 20%;
}
.screen-right #right-top {
height: 26%;
position: relative;
... ...
... ... @@ -9,18 +9,30 @@
.deduction-title-size {
position: absolute;
left: 9%;
top: 20%;
top: 22%;
}
.deduction-box-text-left {
position: absolute;
left: 12%;
top: 45%;
left: 17%;
top: 47%;
}
.deduction-box-text-right {
position: absolute;
left: 60%;
top: 45%;
left: 53%;
top: 47%;
}
.deduction-text-number {
color: #01E6E6;
}
.deduction-box-img-left {
position: absolute;
left: 10%;
top: 5%;
}
.deduction-box-img-right {
position: absolute;
left: 50%;
top: 5%;
}
\ No newline at end of file
... ...
.topfive-title-size {
position: absolute;
left: 16%;
top: 7%;
top: 5%;
}
.topfive-title-img {
position: absolute;
left: 5%;
top: 4%;
}
.available-title-size{
position: absolute;
left: 10%;
top: 5%;
}
\ No newline at end of file
}
.available-title-img {
position: absolute;
left: 3%;
top: 4%;
}
... ...
... ... @@ -84,6 +84,11 @@ const routes = [{
path: '/deduction',
name: 'deduction',
component: () => myImport('views/dp/components/deduction/index')
},
{
path: '/declarepolyline',
name: 'declarepolyline',
component: () => myImport('views/dp/components/declarePolyline/index')
}
];
... ...
<div class="com-container">
<div class="com-chart" id="availability_ref"></div>
<div class="topfive-box-title">
<img :style="comtitleImgStyle" src="./src/assets/img/box_title_bykk_zj_1.png" class="topfive-title-img"> <!-- bor1_6 -->
<span :style="comtitleTextStyle" class="topfive-title-size">业务可用性</span>
<img :style="comtitleImgStyle" src="./src/assets/img/box_title_bykk_zj_1.png" class="available-title-img"> <!-- bor1_6 -->
<span :style="comtitleTextStyle" class="available-title-size">业务可用性</span>
</div>
</div>
\ No newline at end of file
... ...
... ... @@ -18,6 +18,7 @@ export default {
time: ["01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00"]
}
},
titleFontSize: 20,
startValue: 0, // 区域缩放的起点值
endValue: 6, // 区域缩放的终点值
timerId: null // 定时器的标识
... ... @@ -36,12 +37,12 @@ export default {
computed: {
comtitleTextStyle () {
return {
fontSize: this.titleFontSize / 2 + 'px'
fontSize: this.titleFontSize / 1.2 + 'px'
}
},
comtitleImgStyle () {
return {
height: this.titleFontSize * 1.2 + 'px',
// height: this.titleFontSize + 'px',
width: this.titleFontSize * 8 + 'px'
}
}
... ... @@ -63,18 +64,28 @@ export default {
},
xAxis: {
type: 'category',
boundaryGap: false
boundaryGap: false,
axisLabel: {
textStyle: {
color: '#E6E8EB'
}
}
},
yAxis: {
type: 'value',
splitLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#E6E8EB'
}
}
}
}
this.chartInstance.setOption(initOption)
},
async getData () {
getData () {
// await this.$http.get()
// const { data: ret } = await this.$http.get('responsemonitor')
// this.allData = ret
... ... @@ -151,23 +162,6 @@ export default {
screenAdapter () {
this.titleFontSize = document.getElementById('availability_ref').offsetWidth / 100 * 3.6
const adapterOption = {
// title: {
// left: this.titleFontSize * 2,
// textStyle: {
// fontSize: this.titleFontSize,
// color: '#F0F3F8'
// // rich: {
// // Sunny: {
// // // 这样设定 backgroundColor 就可以是图片了。
// // backgroundColor: {
// // image: require('../assets/img/bg_box_3.png')
// // },
// // // 可以只指定图片的高度，从而图片的宽度根据图片的长宽比自动得到。
// // height: this.titleFontSize * 1.5
// // }
// // }
// }
// },
legend: {
itemWidth: this.titleFontSize,
itemHeight: this.titleFontSize,
... ...
... ... @@ -56,12 +56,22 @@ export default {
},
xAxis: {
type: 'category',
boundaryGap: false
boundaryGap: false,
axisLabel: {
textStyle: {
color: '#E6E8EB'
}
}
},
yAxis: {
type: 'value',
splitLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#E6E8EB'
}
}
}
}
... ...
... ... @@ -57,12 +57,22 @@ export default {
},
xAxis: {
type: 'category',
boundaryGap: false
boundaryGap: false,
axisLabel: {
textStyle: {
color: '#E6E8EB'
}
}
},
yAxis: {
type: 'value',
splitLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#E6E8EB'
}
}
}
}
... ...
<div class="com-container">
<div class="com-chart" id="declarepolyline_ref"></div>
<div class="com-title" :style="comtitlesizeStyle">
<div class="declarepolyline-title" :style="comtitlesizeStyle">
<el-row>
<el-col :span="24" :style="comboxTitleStyle">
<el-col :span="24">
<div class="grid-content bg-purple-dark">
<img src="../assets/img/title_light.png" :style="comimgsizeStyle">
本月应申报
<img src="./src/assets/img/icon-ysb.png" :style="comimgsizeStyle">
<span>本月应申报</span>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24" :style="comboxTitleStyle">
<el-col :span="24">
<div class="grid-content bg-purple-dark" :style="comtitletextStyle">
1234521
{{declareNumer}}
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24" :style="comboxTitleStyle">
<el-col :span="24">
<div class="grid-content bg-purple-dark">
<img src="../assets/img/t.png" :style="comimgsizeStyle">
本月申报率
<img src="./src/assets/img/icon-sbl.png" :style="comimgsizeStyle">
<span>本月申报率</span>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24" :style="comboxTitleStyle">
<el-col :span="24">
<div class="grid-content bg-purple-dark" :style="comtitletextStyle">
98.55%
<span>{{declareRateLeft}}</span><span :style="comboxtextStyle">{{declareRateRight}}</span>
</div>
</el-col>
</el-row>
... ...
... ... @@ -5,25 +5,33 @@ export default {
data () {
return {
chartInstance: null,
allData: {
polyline: {
data: {
name: "申报率",
data: ["12", "15", "21", "81", "20", "37", "45", "23", "12", "50", "70", "14", "92", "76", "67", "45", "77", "20", "35", "50"]
},
declareNumer: "1200848",
declareRate: "98.55%",
numerTitle: "本月应申报",
rateTitle: "本月申报率"
},
xAxis: {
today: ["1号", "2号", "3号", "4号", "5号", "6号", "7号", "8号", "9号", "10号", "11号", "12号", "13号", "14号", "15号", "16号", "17号", "18号", "19号", "20号"]
}
},
// allData: {
// polyline: {
// data: {
// name: "申报率",
// data: ["12", "15", "21", "81", "20", "37", "45", "23", "12", "50", "70", "14", "92", "76", "67", "45", "77", "20", "35", "50"]
// },
// declareNumer: "1200848",
// declareRate: "98.55%",
// numerTitle: "本月应申报",
// rateTitle: "本月申报率"
// },
// xAxis: {
// today: ["1号", "2号", "3号", "4号", "5号", "6号", "7号", "8号", "9号", "10号", "11号", "12号", "13号", "14号", "15号", "16号", "17号", "18号", "19号", "20号"]
// }
// },
allData:{},
startValue: 0, // 区域缩放的起点值
endValue: 9, // 区域缩放的终点值
timerId: null, // 定时器的标识
titleFontSize: 30
titleFontSize: 30,
declareRate: '0%',
declareRateLeft: 0,
declareRateRight: '%',
declareNumer: 0,
curve: 'KPIDA0ACBBP',
rateTitle: 'KPIDA0ACBBK',
numerTitle: 'KPIDA0ACBBG'
}
},
computed: {
... ... @@ -40,13 +48,18 @@ export default {
},
comimgsizeStyle () {
return {
width: this.titleFontSize + 'px'
width: this.titleFontSize / 1.5 + 'px'
}
},
comboxtextStyle () {
return {
fontSize: this.titleFontSize / 3 + 'px'
}
}
},
mounted () {
this.initChart()
this.getData()
this.getData(this)
window.addEventListener('resize', this.screenAdapter)
this.screenAdapter()
},
... ... @@ -59,9 +72,10 @@ export default {
this.chartInstance = echarts.init(document.getElementById('declarepolyline_ref'))
const initOption = {
grid: {
left: '5%',
right: '35%',
bottom: '3%',
top: '10%',
left: '1%',
right: '30%',
bottom: '1%',
containLabel: true
},
legend: {
... ... @@ -70,23 +84,43 @@ export default {
},
xAxis: {
type: 'category',
boundaryGap: false
boundaryGap: false,
axisLabel: {
textStyle: {
color: '#E6E8EB'
}
}
},
yAxis: {
type: 'value',
splitLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#E6E8EB'
}
}
}
}
this.chartInstance.setOption(initOption)
},
async getData () {
// await this.$http.get()
// const { data: ret } = await this.$http.get('declarepolyline')
// this.allData = ret
this.updateChart()
this.startInterval()
getData (that) {
const { proxy } = Vue.getCurrentInstance();
var params = {
curve: that.curve,
rateTitle: that.rateTitle,
numerTitle: that.numerTitle
};
proxy.$http.get("/api-web/bigScreen/declarePolyline", params, function (res) {
if(res.success){
console.log(res.obj)
that.allData = res.obj;
that.updateChart()
that.startInterval()
}
});
},
updateChart () {
// 半透明的颜色值
... ... @@ -108,25 +142,17 @@ export default {
const timeArr = this.allData.xAxis.today
const seriesData = this.allData.polyline.data.data
const seriesName = this.allData.polyline.data.name
const declareRate = this.allData.polyline.declareRate
if(declareRate.indexOf('.') > 0){
this.declareRateLeft = declareRate.split('.')[0] + '.'
this.declareRateRight = declareRate.split('.')[1]
}
this.declareNumer = this.allData.polyline.declareNumer
// 图例的数据
const legendArr = this.allData.polyline.data.data.map(item => {
return item.name
})
const numerTitle = this.allData.polyline.numerTitle // 本月应申报 标题
const rateTitle = this.allData.polyline.rateTitle // 本月申报率 标题
const declareNumer = this.allData.polyline.declareNumer // 本月应申报 数值
const declareRate = this.allData.polyline.declareRate // 本月申报率 数值
const htmlText = numerTitle + '\n' + declareNumer + '\n' + rateTitle + '\n' + declareRate
console.log(htmlText)
const dataOption = {
// title: {
// text: htmlText,
// top: '25%',
// right: '15%',
// textStyle: {
// color: '#F1F2F5'
// }
// },
xAxis: {
data: timeArr
},
... ... @@ -181,12 +207,12 @@ export default {
if (this.timerId) {
clearInterval(this.timerId)
}
let index = 30
let index = 10
this.timerId = setInterval(() => {
this.startValue++
this.endValue++
if ((this.allData.polyline.data).length > 0) {
index = (this.allData.polyline.data)[0].data.length
if (this.allData.polyline.data.data.length > 0) {
index = this.allData.polyline.data.data.length
}
if (this.endValue > index - 1) {
this.startValue = 0
... ...
... ... @@ -3,42 +3,66 @@
<el-row>
<el-col :span="24">
<div class="grid-content bg-purple-dark com-box-title">
<span>
<img :style="comtitlesizeStyle" class="deduction-box-title" src="./src/assets/img/box_title_bykk_zj_1.png"> <!-- bor1_6 -->
<span :style="comtitleTextStyle" class="deduction-title-size">本月扣款情况</span>
</span>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="11">
<div class="grid-content bg-purple com-box">
<span >
<img :style="comboximgleftStyle" src="./src/assets/img/box_bykk_zj.png"> <!-- bor1_6 -->
<div class="deduction-box-text-left" :style="comnumberTextStyle">
<div>
<span class="deduction-text-number">{{deductionAmount}}</span>
<span :style="comnumberUnitStyle">万元</span>
</div>
<div>本月扣款金额</div>
</div>
</span>
</div>
</el-col>
<el-col :span="13">
<div class="grid-content bg-purple-light">
<span >
<img :style="comboximgrightStyle" src="./src/assets/img/box_bykk_zj.png">
<div class="deduction-box-text-right" :style="comnumberTextStyle">
<div>
<span class="deduction-text-number">&nbsp;&nbsp;&nbsp;{{deductionNumber}}</span>
<span :style="comnumberUnitStyle">万笔</span>
</div>
<div>本月扣款笔数</div>
</div>
<span>
<img :style="comtitlesizeStyle" class="deduction-box-title" src="./src/assets/img/box_title_bykk_zj_1.png"> <!-- bor1_6 -->
<span :style="comtitleTextStyle" class="deduction-title-size">本月扣款情况</span>
</span>
</div>
</el-col>
</el-row>
<el-col :span="24">
<div class="grid-content bg-purple-dark com-box-title">
<span>
<img class="deduction-box-img-left" :style="comboximgleftStyle" src="./src/assets/img/box_bykk_zj.png"> <!-- bor1_6 -->
<div class="deduction-box-text-left" :style="comnumberTextStyle">
<div>
<span class="deduction-text-number">{{deductionAmount}}</span>
<span :style="comnumberUnitStyle">亿元</span>
</div>
<div>本月扣款金额</div>
</div>
</span>
<span>
<img class="deduction-box-img-right" :style="comboximgrightStyle" src="./src/assets/img/box_bykk_zj.png">
<div class="deduction-box-text-right" :style="comnumberTextStyle">
<div>
<span class="deduction-text-number">&nbsp;&nbsp;&nbsp;{{deductionNumber}}</span>
<span :style="comnumberUnitStyle">万笔</span>
</div>
<div>本月扣款笔数</div>
</div>
</span>
</div>
</el-col>
<!-- <el-row>-->
<!-- <el-col :span="12">-->
<!-- <div class="grid-content bg-purple com-box">-->
<!-- <span >-->
<!-- <img :style="comboximgleftStyle" src="./src/assets/img/box_bykk_zj.png"> &lt;!&ndash; bor1_6 &ndash;&gt;-->
<!-- <div class="deduction-box-text-left" :style="comnumberTextStyle">-->
<!-- <div>-->
<!-- <span class="deduction-text-number">{{deductionAmount}}</span>-->
<!-- <span :style="comnumberUnitStyle">亿元</span>-->
<!-- </div>-->
<!-- <div>本月扣款金额</div>-->
<!-- </div>-->
<!-- </span>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- <el-col :span="12">-->
<!-- <div class="grid-content bg-purple-light">-->
<!-- <span >-->
<!-- <img :style="comboximgrightStyle" src="./src/assets/img/box_bykk_zj.png">-->
<!-- <div class="deduction-box-text-right" :style="comnumberTextStyle">-->
<!-- <div>-->
<!-- <span class="deduction-text-number">&nbsp;&nbsp;&nbsp;{{deductionNumber}}</span>-->
<!-- <span :style="comnumberUnitStyle">万笔</span>-->
<!-- </div>-->
<!-- <div>本月扣款笔数</div>-->
<!-- </div>-->
<!-- </span>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- </el-row>-->
</div>
</div>
\ No newline at end of file
... ...
... ... @@ -10,7 +10,10 @@ export default {
// 扣款金额
deductionAmount: '0.00',
// 扣款笔数
deductionNumber: '0.00'
deductionNumber: '0.00',
// 传入值
kipValue1: 'KPIDA0ACBBI', // 本月扣款金额
kipValue2: 'KPIDA0ACBBO' // 本月扣款笔数
}
},
computed: {
... ... @@ -55,8 +58,7 @@ export default {
}
},
mounted () {
this.initChart()
this.getData()
this.getData(this)
window.addEventListener('resize', this.screenAdapter)
this.screenAdapter()
},
... ... @@ -66,9 +68,25 @@ export default {
methods: {
initChart () {
},
async getData () {
// await this.$http.get()
this.updateChart()
getData (that) {
const { proxy } = Vue.getCurrentInstance();
var params = {
kipValue1: that.kipValue1, // 本月扣款金额
kipValue2: that.kipValue2 // 本月扣款笔数
};
proxy.$http.get("/api-web/bigScreen/deduction", params, function (res) {
if(res.success){
res.data.map((item) => {
if(item.name == that.kipValue1){
that.deductionAmount = item.value
}
if(item.name == that.kipValue2){
that.deductionNumber = item.value
}
})
}
});
},
updateChart () {
},
... ...
... ... @@ -28,10 +28,12 @@ export default {
bitBitFalg: 0,
isOneCommaShow: false,
isTwoCommaShow: false,
declaredAmountNumber: 1283, // 左边数
declaredAmountNumber: 0, // 左边数
undeclaredAmountNumber: 0, // 右边数
leftTitle: '本月已申报数',
rightTitle: '本月未申报'
rightTitle: '本月未申报',
kipValue1: 'KPIDA0ACBBF',
kipValue2: 'KPIDA0ACBBD'
}
},
computed: {
... ... @@ -80,9 +82,9 @@ export default {
},
mounted () {
this.startInterval()
// this.startInterval()
// this.initChart()
this.getData()
this.getData(this)
window.addEventListener('resize', this.screenAdapter)
this.screenAdapter()
},
... ... @@ -143,10 +145,29 @@ export default {
this.mustBitFalg = 1
}
},
async getData () {
// await this.$http.get()
this.initChart()
this.updateChart()
getData (that) {
const { proxy } = Vue.getCurrentInstance();
var params = {
kipValue1: that.kipValue1,
kipValue2: that.kipValue2
};
proxy.$http.get("/api-web/bigScreen/digitalBoardData", params, function (res) {
if(res.success){
console.log(res.map)
const map = res.map
// 左边数
if(map.leftNumber){
that.declaredAmountNumber = map.leftNumber
}
// 右边数
if(map.rightNumber){
that.undeclaredAmountNumber = map.rightNumber
}
that.initChart()
that.updateChart()
}
});
},
updateChart () {
// const dataOption = {}
... ...
... ... @@ -28,10 +28,12 @@ export default {
bitBitFalg: 0,
isOneCommaShow: false,
isTwoCommaShow: false,
declaredAmountNumber: 1283, // 左边数
declaredAmountNumber: 0, // 左边数
undeclaredAmountNumber: 0, // 右边数
leftTitle: '今日已申报数',
rightTitle: '本日申报未导入'
rightTitle: '本日申报未导入',
kipValue1: 'KPIDA0ACBBS',
kipValue2: 'KPIDA0ACBBE'
}
},
computed: {
... ... @@ -80,9 +82,9 @@ export default {
},
mounted () {
this.startInterval()
// this.startInterval()
// this.initChart()
this.getData()
this.getData(this)
window.addEventListener('resize', this.screenAdapter)
this.screenAdapter()
},
... ... @@ -143,10 +145,31 @@ export default {
this.mustBitFalg = 1
}
},
async getData () {
// await this.$http.get()
this.initChart()
this.updateChart()
getData (that) {
const { proxy } = Vue.getCurrentInstance();
var params = {
kipValue1: that.kipValue1,
kipValue2: that.kipValue2
};
proxy.$http.get("/api-web/bigScreen/digitalBoardData", params, function (res) {
if(res.success){
console.log(res.map)
const map = res.map
// 左边数
console.log(map.leftNumber)
if(map.leftNumber){
that.declaredAmountNumber = map.leftNumber
}
// 右边数
console.log(map.rightNumber)
if(map.rightNumber){
that.undeclaredAmountNumber = map.rightNumber
}
that.initChart()
that.updateChart()
}
});
},
updateChart () {
// const dataOption = {}
... ...
... ... @@ -56,12 +56,22 @@ export default {
},
xAxis: {
type: 'category',
boundaryGap: false
boundaryGap: false,
axisLabel: {
textStyle: {
color: '#E6E8EB'
}
}
},
yAxis: {
type: 'value',
splitLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#E6E8EB'
}
}
}
}
... ...
... ... @@ -50,12 +50,22 @@ export default {
},
xAxis: {
type: 'category',
boundaryGap: false
boundaryGap: false,
axisLabel: {
textStyle: {
color: '#E6E8EB'
}
}
},
yAxis: {
type: 'value',
splitLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#E6E8EB'
}
}
}
}
... ...
... ... @@ -21,7 +21,9 @@ export default {
name: '实名采集',
value: 2001
}],
titleFontSize: 30
titleFontSize: 30,
kpiIdTitle: 'KPIDA0ACBBX',
kpiIdValue: 'KPIDA0ACBBJ'
}
},
computed: {
... ... @@ -39,7 +41,7 @@ export default {
},
mounted () {
this.initChart()
this.getData()
this.getData(this)
window.addEventListener('resize', this.screenAdapter)
this.screenAdapter()
},
... ... @@ -110,23 +112,24 @@ export default {
}
this.chartInstance.setOption(initOption)
},
getData () {
// await this.$http.get()
// const { data: ret } = await this.$http.get('topfive')
// this.allData = ret
getData (that) {
// this.allData.sort((a, b) => {
// return a.value - b.value
// })
const { proxy } = Vue.getCurrentInstance();
var params = {
kipValue: 'kipValue'
kpiIdTitle: that.kpiIdTitle,
kpiIdValue: that.kpiIdValue
};
proxy.$http.get("/api-web/bigScreen/topFive", params, function (res) {
console.log(res.object)
},function (){
proxy.$global.showMsg('没有查询到记录！');
console.log(res.data)
if(res.success){
that.allData = res.data
that.updateChart()
}
});
this.updateChart()
},
updateChart () {
const sellerNames = this.allData.map((item) => {
... ...
... ... @@ -6,7 +6,7 @@
<span class="title" :style="titleStyle">浙江省电子税务局系统监控大屏</span>
<div class="title-left">
<img src="/vue3/src/assets/img/time-icon.png" :style="timelogoStyle" class="timelog">
<span :style="datetimeStyle" >2049-01-01 00:00:00</span>
<span :style="datetimeStyle" >{{dateTime}}</span>
</div>
</header>
<div class="screen-body">
... ...
... ... @@ -41,7 +41,8 @@ export default {
},
data () {
return {
titleFontSize: 30
titleFontSize: 30,
dateTime: '00-00-00 00:00:00'
}
},
computed: {
... ... @@ -72,9 +73,17 @@ export default {
screenAdapter () {
this.titleFontSize = document.getElementById('bgscreen_ref').offsetWidth / 100 * 3.6
console.log(this.titleFontSize)
},
timeFormat (number) {
return number.length == 1 ? ('0' + number) : number
}
},
mounted () {
var that = this
// 获取当前系统时间
var myDate = new Date();
that.dateTime = myDate.getFullYear() + '-' + that.timeFormat(myDate.getMonth() + 1 + '') + '-' + that.timeFormat(myDate.getDate() + '') + ' ' + that.timeFormat(myDate.getHours() + '') + ':' + that.timeFormat(myDate.getMinutes() + '') + ':' + that.timeFormat(myDate.getSeconds() + '');
window.addEventListener('resize', this.screenAdapter)
this.screenAdapter()
},
... ...