monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 鲁尚清
Commit 769a41abbf4114fa60e66a9b3859673194736ee8 1 parent eb97fee8

大屏及电子税务局页面样式修改，云平台，申报

Inline Side-by-side
Showing 10 changed files with 137 additions and 92 deletions
... ... @@ -86,15 +86,13 @@
justify-content: space-around;
}
.width-86{
width:86%;
width:96%;
margin-bottom: 10px;
align-items: flex-end;
}
.middle-right{
width: 20%;
/*flex: 1;*/
position: relative;
left: -5%;
display: flex;
flex-flow: column;
justify-content: center;
... ... @@ -118,7 +116,7 @@
}
.middle-left-declare-rate{
height: 36%;
width:86%;
width:96%;
}
.screen-middle #middle-bottom {
... ... @@ -210,4 +208,8 @@
display: inline-block;
background-repeat: no-repeat;
background-position: center;
}
.width-13{
flex: 0 0 14%;
max-width: 14%;
}
\ No newline at end of file
... ...
... ... @@ -145,29 +145,29 @@
transform: scale(1.0);
}
.ypt__info div.ball_base:nth-child(1) {
top: 17px;
left: 133px;
top: 0;
left: 129px;
}
.ypt__info div.ball_base:nth-child(2) {
top: 68px;
left: 50px;
top: 51px;
left:30px;
}
.ypt__info div.ball_base:nth-child(3) {
top: 68px;
left: 214px;
top: 51px;
left: 224px;
}
.ypt__info div.ball_base:nth-child(4) {
top: 150px;
left: 50px;
left: 30px;
}
.ypt__info div.ball_base:nth-child(5) {
top: 150px;
left: 210px;
left: 230px;
}
.ypt__info div.ball_base:nth-child(6) {
top: 190px;
left: 133px;
top: 205px;
left: 129px;
}
.ypt__info .ball_base .ball.active{
-moz-transition: top 0.3s;
... ...
... ... @@ -12,7 +12,8 @@ export default {
domainName:sessionStorage.getItem('domainName'),
apiUrl:'/api-web/sxview/getBusinessAvailability',
kpiIds:'KPI97B835A4,KPIFE85BE59,KPI7A29BAC3,KPIE7A7E3E4',
busId:'247c0c978f574285bf642f55611ea75d',
// busId:'247c0c978f574285bf642f55611ea75d',
busId: '',
performanceData:'',
xAxisData:'',
yAxisData:'',
... ...
... ... @@ -27,68 +27,68 @@
</span>
</div>
</el-col>-->
<el-col :span="3">
<el-col :span="3" class="width-13">
<div class="grid-content bg-purple-light com-box">
<span>
<img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
<span class="com-box-value" :style="combitnumberStyle" style="left: 3%;color: #FEFEFE;" v-if="millionBitFalg > 0">{{millionBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 3%;color: #97969B;" v-if="millionBitFalg == 0">{{millionBit}}</span>
<span :style="comcommaStyle" style=" left: 11.5%;" v-if="isOneCommaShow">,</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 4%;color: #FEFEFE;" v-if="millionBitFalg > 0">{{millionBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 4%;color: #97969B;" v-if="millionBitFalg == 0">{{millionBit}}</span>
<span :style="comcommaStyle" style=" left: 13%;" v-if="isOneCommaShow">,</span>
</span>
</div>
</el-col>
<el-col :span="3">
<el-col :span="3" class="width-13">
<div class="grid-content bg-purple com-box">
<span>
<img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
<span class="com-box-value" :style="combitnumberStyle" style="left: 15.5%;color: #FEFEFE;" v-if="hundredThousandBitFalg > 0">{{hundredThousandBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 15.5%;color: #97969B;" v-if="hundredThousandBitFalg == 0">{{hundredThousandBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 18%;color: #FEFEFE;" v-if="hundredThousandBitFalg > 0">{{hundredThousandBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 18%;color: #97969B;" v-if="hundredThousandBitFalg == 0">{{hundredThousandBit}}</span>
</span>
</div>
</el-col>
<el-col :span="3">
<el-col :span="3" class="width-13">
<div class="grid-content bg-purple-light com-box">
<span>
<img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
<span class="com-box-value" :style="combitnumberStyle" style="left: 28%;color: #FEFEFE;" v-if="tenThousandBitFalg > 0">{{tenThousandBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 28%;color: #97969B;" v-if="tenThousandBitFalg == 0">{{tenThousandBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 31%;color: #FEFEFE;" v-if="tenThousandBitFalg > 0">{{tenThousandBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 31%;color: #97969B;" v-if="tenThousandBitFalg == 0">{{tenThousandBit}}</span>
</span>
</div>
</el-col>
<el-col :span="3">
<el-col :span="3" class="width-13">
<div class="grid-content bg-purple com-box">
<span>
<img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
<span class="com-box-value" :style="combitnumberStyle" style="left: 40.5%;color: #FEFEFE;" v-if="thousandBitFalg > 0">{{thousandBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 40.5%;color: #97969B;" v-if="thousandBitFalg == 0">{{thousandBit}}</span>
<span :style="comcommaStyle" style="left: 49%;" v-if="isTwoCommaShow">,</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 46%;color: #FEFEFE;" v-if="thousandBitFalg > 0">{{thousandBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 46%;color: #97969B;" v-if="thousandBitFalg == 0">{{thousandBit}}</span>
<span :style="comcommaStyle" style="left: 55%;" v-if="isTwoCommaShow">,</span>
</span>
</div>
</el-col>
<el-col :span="3">
<el-col :span="3" class="width-13">
<div class="grid-content bg-purple-light com-box">
<span>
<img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
<span class="com-box-value" :style="combitnumberStyle" style="left: 53%;color: #FEFEFE;" v-if="hundredBitFalg > 0">{{hundredBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 53%;color: #97969B;" v-if="hundredBitFalg == 0">{{hundredBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 60%;color: #FEFEFE;" v-if="hundredBitFalg > 0">{{hundredBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 60%;color: #97969B;" v-if="hundredBitFalg == 0">{{hundredBit}}</span>
</span>
</div>
</el-col>
<el-col :span="3">
<el-col :span="3" class="width-13">
<div class="grid-content bg-purple com-box">
<span>
<img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
<span class="com-box-value" :style="combitnumberStyle" style="left: 66.5%;color: #FEFEFE;" v-if="tenBitFalg > 0">{{tenBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 66.5%;color: #97969B;" v-if="tenBitFalg == 0">{{tenBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 74.5%;color: #FEFEFE;" v-if="tenBitFalg > 0">{{tenBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 74.5%;color: #97969B;" v-if="tenBitFalg == 0">{{tenBit}}</span>
</span>
</div>
</el-col>
<el-col :span="3">
<el-col :span="3" class="width-13">
<div class="grid-content bg-purple-light com-box">
<span>
<img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
<span class="com-box-value" :style="combitnumberStyle" style="left: 78%;color: #FEFEFE;" v-if="bitBitFalg > 0">{{bitBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 78%;color: #97969B;" v-if="bitBitFalg == 0">{{bitBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 88%;color: #FEFEFE;" v-if="bitBitFalg > 0">{{bitBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 88%;color: #97969B;" v-if="bitBitFalg == 0">{{bitBit}}</span>
</span>
</div>
</el-col>
... ...
... ... @@ -27,68 +27,68 @@
</span>
</div>
</el-col>-->
<el-col :span="3">
<el-col :span="3" class="width-13">
<div class="grid-content bg-purple-light com-box">
<span>
<img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
<span class="com-box-value" :style="combitnumberStyle" style="left: 3%;color: #FEFEFE;" v-if="millionBitFalg > 0">{{millionBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 3%;color: #97969B;" v-if="millionBitFalg == 0">{{millionBit}}</span>
<span :style="comcommaStyle" style=" left: 11.5%;" v-if="isOneCommaShow">,</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 4%;color: #FEFEFE;" v-if="millionBitFalg > 0">{{millionBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 4%;color: #97969B;" v-if="millionBitFalg == 0">{{millionBit}}</span>
<span :style="comcommaStyle" style=" left: 13%;" v-if="isOneCommaShow">,</span>
</span>
</div>
</el-col>
<el-col :span="3">
<el-col :span="3" class="width-13">
<div class="grid-content bg-purple com-box">
<span>
<img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
<span class="com-box-value" :style="combitnumberStyle" style="left: 15.5%;color: #FEFEFE;" v-if="hundredThousandBitFalg > 0">{{hundredThousandBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 15.5%;color: #97969B;" v-if="hundredThousandBitFalg == 0">{{hundredThousandBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 18%;color: #FEFEFE;" v-if="hundredThousandBitFalg > 0">{{hundredThousandBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 18%;color: #97969B;" v-if="hundredThousandBitFalg == 0">{{hundredThousandBit}}</span>
</span>
</div>
</el-col>
<el-col :span="3">
<el-col :span="3" class="width-13">
<div class="grid-content bg-purple-light com-box">
<span>
<img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
<span class="com-box-value" :style="combitnumberStyle" style="left: 28%;color: #FEFEFE;" v-if="tenThousandBitFalg > 0">{{tenThousandBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 28%;color: #97969B;" v-if="tenThousandBitFalg == 0">{{tenThousandBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 31%;color: #FEFEFE;" v-if="tenThousandBitFalg > 0">{{tenThousandBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 31%;color: #97969B;" v-if="tenThousandBitFalg == 0">{{tenThousandBit}}</span>
</span>
</div>
</el-col>
<el-col :span="3">
<el-col :span="3" class="width-13">
<div class="grid-content bg-purple com-box">
<span>
<img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
<span class="com-box-value" :style="combitnumberStyle" style="left: 40.5%;color: #FEFEFE;" v-if="thousandBitFalg > 0">{{thousandBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 40.5%;color: #97969B;" v-if="thousandBitFalg == 0">{{thousandBit}}</span>
<span :style="comcommaStyle" style="left: 49%;" v-if="isTwoCommaShow">,</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 46%;color: #FEFEFE;" v-if="thousandBitFalg > 0">{{thousandBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 46%;color: #97969B;" v-if="thousandBitFalg == 0">{{thousandBit}}</span>
<span :style="comcommaStyle" style="left: 55%;" v-if="isTwoCommaShow">,</span>
</span>
</div>
</el-col>
<el-col :span="3">
<el-col :span="3" class="width-13">
<div class="grid-content bg-purple-light com-box">
<span>
<img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
<span class="com-box-value" :style="combitnumberStyle" style="left: 53%;color: #FEFEFE;" v-if="hundredBitFalg > 0">{{hundredBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 53%;color: #97969B;" v-if="hundredBitFalg == 0">{{hundredBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 60%;color: #FEFEFE;" v-if="hundredBitFalg > 0">{{hundredBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 60%;color: #97969B;" v-if="hundredBitFalg == 0">{{hundredBit}}</span>
</span>
</div>
</el-col>
<el-col :span="3">
<el-col :span="3" class="width-13">
<div class="grid-content bg-purple com-box">
<span>
<img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
<span class="com-box-value" :style="combitnumberStyle" style="left: 66.5%;color: #FEFEFE;" v-if="tenBitFalg > 0">{{tenBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 66.5%;color: #97969B;" v-if="tenBitFalg == 0">{{tenBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 74.5%;color: #FEFEFE;" v-if="tenBitFalg > 0">{{tenBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 74.5%;color: #97969B;" v-if="tenBitFalg == 0">{{tenBit}}</span>
</span>
</div>
</el-col>
<el-col :span="3">
<el-col :span="3" class="width-13">
<div class="grid-content bg-purple-light com-box">
<span>
<img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
<span class="com-box-value" :style="combitnumberStyle" style="left: 78%;color: #FEFEFE;" v-if="bitBitFalg > 0">{{bitBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 78%;color: #97969B;" v-if="bitBitFalg == 0">{{bitBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 88%;color: #FEFEFE;" v-if="bitBitFalg > 0">{{bitBit}}</span>
<span class="com-box-value" :style="combitnumberStyle" style="left: 88%;color: #97969B;" v-if="bitBitFalg == 0">{{bitBit}}</span>
</span>
</div>
</el-col>
... ...
... ... @@ -79,28 +79,28 @@ export default {
function run() {
const yptpostion = [
{
top: '17px',//1
left: '133px'
top: '0',//1
left: '129px'
},
{
top: '68px', // 2
left: '50px'
top: '51px', // 2
left: '30px'
},
{
top: '68px', // 3
left: '214px'
top: '51px', // 3
left: '224px'
},
{
top: '150px', // 4
left: '50px'
left: '30px'
},
{
top: '150px', // 5
left: '210px'
left: '230px'
},
{
top: '190px', // 6
left: '133px'
top: '205px', // 6
left: '129px'
}
];
// const runpostions = [[1, 2, 3, 4, 5, 0], [2, 3, 4, 5, 0, 1], [3, 4, 5, 0, 1, 2], [4, 5, 0, 1, 2, 3], [5, 0, 1, 2, 3, 4], [0, 1, 2, 3, 4, 5]];
... ...
... ... @@ -11,6 +11,7 @@ export default {
domainName:sessionStorage.getItem('domainName'),
apiUrl:'/api-web/bigScreen/digitalBoardData',//本月已申报/未申报
apiUrl1:'/api-web/bigScreen/findPortfolio',//今日业务量
allData:'',
volumeData:'',//业务量数据
declareData:'',
reportable:0,//本月应申报
... ... @@ -27,24 +28,33 @@ export default {
styleVolumeNet:'',
opactiyNum:0, //不透明显示的个数
opactiyNumMath:0, //不透明显示的个数中间量
opactiyNumTotal:20//总透明数
opactiyNumTotal:20,//总透明数
curve: 'KPIDA0ACBBP',
rateTitle: 'KPIDA0ACBBK',
numerTitle: 'KPIDA0ACBBG'
}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
// 挂载完
Vue.onMounted(() => {
$.get(proxy.domainName +proxy.apiUrl+'?kipValue1=KPIDA0ACBBF&kipValue2=KPIDA0ACBBD'+'&access_token='+localStorage.getItem('access_token'),function (res) {
const data = res;
if(data && data.map){
let reportableMonth=data.map.rightNumber;
proxy.declaredMonth=data.map.leftNumber;
proxy.reportableMonth=proxy.numberFilter(reportableMonth,-1);
//本月应申报及申报率
let params = {
curve: proxy.curve,
rateTitle: proxy.rateTitle,
numerTitle: proxy.numerTitle
};
proxy.$http.get("/api-web/bigScreen/declarePolyline", params, function (res) {
if(res.success){
proxy.allData = res.obj;
const declareRate = proxy.allData.polyline.declareRate
let reportable=parseInt(data.map.rightNumber)+parseInt(data.map.leftNumber);
proxy.reportable=proxy.numberFilter(reportable,-1);
let declarationRate=(parseInt(proxy.declaredMonth) /reportable).toFixed(2);
proxy.opactiyNumMath=declarationRate*proxy.opactiyNumTotal
proxy.reportable = proxy.allData.polyline.declareNumer
let declareRateNum=0;
if(declareRate.indexOf('%') > 0){
declareRateNum = parseInt(declareRate.split('%')[0] )
}
proxy.opactiyNumMath=(declareRateNum/100)*proxy.opactiyNumTotal
if(proxy.opactiyNumMath>proxy.opactiyNumTotal-1){
proxy.opactiyNum=Math.floor(proxy.opactiyNumMath);
... ... @@ -53,7 +63,21 @@ export default {
proxy.opactiyNum=Math.ceil(proxy.opactiyNumMath);
}
proxy.declarationRate=declarationRate*100+'%';
proxy.declarationRate=declareRate;
}
});
$.get(proxy.domainName +proxy.apiUrl+'?kipValue1=KPIDA0ACBBF&kipValue2=KPIDA0ACBBD'+'&access_token='+localStorage.getItem('access_token'),function (res) {
const data = res;
if(data && data.map){
let reportableMonth=data.map.rightNumber;
proxy.declaredMonth=data.map.leftNumber;
proxy.reportableMonth=proxy.numberFilter(reportableMonth,-1);
// let reportable=parseInt(data.map.rightNumber)+parseInt(data.map.leftNumber);
// proxy.reportable=proxy.numberFilter(reportable,-1);
}
... ...
... ... @@ -52,7 +52,7 @@ export default {
title: {
text: '近30天访问量',
x:'center',
y:'7px',
y:'9px',
textStyle:{
color:"#ffffff",
fontSize:14
... ... @@ -72,6 +72,11 @@ export default {
}
},
grid: {
left: '10%',
right: '4%',
bottom: '10%',
},
xAxis: {
type: 'category',
data: proxy.legendData,
... ...
// 获取状态
const indirectManage = () => {
const store = Vuex.useStore()
// 用toRef获取 busId，有相应性，可以直接修改state
const busId = Vue.toRef(store.state, 'busId')
return {
busId
}
}
export default {
name: 'performance',
template: '',
... ... @@ -11,7 +22,8 @@ export default {
domainName:sessionStorage.getItem('domainName'),
apiUrl:'/api-web/sxview/getBusinessAvailability',
kpiIds:'KPI97B835A4,KPIFE85BE59,KPI7A29BAC3,KPIE7A7E3E4',
busId:'247c0c978f574285bf642f55611ea75d',
// busId:'247c0c978f574285bf642f55611ea75d',
busId:'',
performanceData:'',
xAxisData:'',
yAxisData:'',
... ... @@ -24,6 +36,14 @@ export default {
const xAxisData=Vue.ref();
const yAxisData=Vue.ref([]);
const legendData=Vue.ref([]);
// 获取状态
const { busId} = indirectManage()
// 监听编辑状态
Vue.watch(() =>busId.value, (newVal, oldVlaue) => {
// console.log("333",busId.value)
proxy.busId=busId.value
proxy.getData();
});
// 半透明的颜色值
const colorArr1 = [
'rgba(151,213,244, 0.8)',
... ...
... ... @@ -46,7 +46,6 @@ export default {
if(data && data.data){
// proxy.resourceStatisticsData=data.data;
let resData=data.data;
console.log("$",resData.length,4-resData.length)
let length=resData.length;
if(length<4){
for(let i=0;i<4-length;i++){
... ... @@ -63,14 +62,8 @@ export default {
"goodPercent": 0
})
}
console.log("***",resData)
}
proxy.resourceStatisticsData=resData;
}
})
... ...