diff --git a/hb_client/src/assets/scss/index.scss b/hb_client/src/assets/scss/index.scss
index 152e049..a235c6d 100644
--- a/hb_client/src/assets/scss/index.scss
+++ b/hb_client/src/assets/scss/index.scss
@@ -73,7 +73,7 @@
}
font-size: 18px;
width: 300px;
- line-height: 50px;
+ line-height: 40px;
text-align: center;
transform: skewX(-45deg);
@@ -81,8 +81,8 @@
position: absolute;
right: -25px;
top: 0;
- height: 50px;
- width: 50px;
+ height: 40px;
+ width: 40px;
background-color: #0f1325;
transform: skewX(45deg);
}
@@ -100,8 +100,8 @@
}
font-size: 18px;
width: 300px;
- height: 50px;
- line-height: 50px;
+ height: 40px;
+ line-height: 40px;
text-align: center;
transform: skewX(45deg);
background-color: #0f1325;
@@ -123,13 +123,14 @@
}
.body-box {
- margin-top: 16px;
+ margin-top: 5px;
display: flex;
flex-direction: column;
//下方区域的布局
.content-box {
display: grid;
+ margin-bottom: 15px;
grid-template-columns: 35% 15% 15% 15% 20%;
div{
box-sizing: border-box!important;
diff --git a/hb_client/src/views/bigScreen/bottomLeft.vue b/hb_client/src/views/bigScreen/bottomLeft.vue
index 45131d4..6548da7 100644
--- a/hb_client/src/views/bigScreen/bottomLeft.vue
+++ b/hb_client/src/views/bigScreen/bottomLeft.vue
@@ -6,7 +6,7 @@
@@ -32,41 +32,30 @@
options: {},
cdata: {
category: [
- "市区",
- "万州",
- "江北",
- "南岸",
- "北碚",
- "綦南",
- "长寿",
- "永川",
- "璧山",
- "江津",
- "城口",
- "大足",
- "垫江",
- "丰都",
- "奉节",
- "合川",
- "江津区",
- "开州",
- "南川",
- "彭水",
- "黔江",
- "石柱",
- "铜梁",
- "潼南",
- "巫山",
- "巫溪",
- "武隆",
- "秀山",
- "酉阳",
- "云阳",
- "忠县",
- "川东",
- "检修"
+ "JH5jhx463-1",
+ "JH5jhx463-2",
+ "JH5jhx463-3",
+ "JH5jhx463-4",
+ "JH5jhx463-5",
+ "JH5jhx463-6",
+ "JH5jhx463-7",
+ "JH5jhx463-8",
+ "JH5jhx463-9",
+ "JH5jhx463-10",
+ "JH5jhx463-11",
+ "JH5jhx463-12",
+ "JH5jhx463-13",
+ "JH5jhx463-14",
+ "JH5jhx463-15"
],
- lineData: [
+ planData: [
+ 18092,
+ 20728,
+ 24045,
+ 28348,
+ 32808,
+ 36097,
+ 39867,
18092,
20728,
24045,
@@ -75,40 +64,15 @@
36097,
39867,
44715,
- 48444,
- 50415,
- 56061,
- 62677,
- 59521,
- 67560,
- 18092,
- 20728,
- 24045,
- 28348,
- 32808,
- 36097,
- 39867,
- 44715,
- 48444,
- 50415,
- 36097,
- 39867,
- 44715,
- 48444,
- 50415,
- 50061,
- 32677,
- 49521,
- 32808
],
barData: [
- 4600,
- 5000,
- 5500,
- 6500,
- 7500,
- 8500,
- 9900,
+ 9600,
+ 19000,
+ 19500,
+ 20500,
+ 19500,
+ 28500,
+ 31900,
12500,
14000,
21500,
@@ -116,25 +80,7 @@
24450,
25250,
33300,
- 4600,
- 5000,
- 5500,
- 6500,
- 7500,
- 8500,
- 9900,
- 22500,
- 14000,
- 21500,
- 8500,
- 9900,
- 12500,
- 14000,
- 21500,
- 23200,
- 24450,
- 25250,
- 7500
+ 40715
],
rateData: []
}
@@ -147,10 +93,7 @@
cdata: {
handler(newData) {
this.options = {
- title: {
- text: "",
- },
- tooltip: {
+ /*tooltip: {
trigger: "axis",
backgroundColor: "rgba(255,255,255,0.1)",
axisPointer: {
@@ -160,9 +103,47 @@
backgroundColor: "#7B7DDC"
}
}
+ },*/
+ tooltip: {
+ trigger: 'axis', //触发类型;轴触发,axis则鼠标hover到一条柱状图显示全部数据,item则鼠标hover到折线点显示相应数据,
+ axisPointer: { //坐标轴指示器,坐标轴触发有效,
+ type: 'cross', //默认为line,line直线,cross十字准星,shadow阴影
+ crossStyle: {
+ color: '#fff'
+ }
+ }
},
+ /*tooltip: {
+ trigger: 'item',
+ formatter: function (params) {
+ debugger;
+ console.log(params);
+ let color = params.color;//图例颜色
+ let htmlStr = '
';
+ htmlStr += params.name + '
';
+ htmlStr += '';
+ htmlStr += params.seriesName + ':' + params.value + '%';
+ htmlStr += '
';
+ return htmlStr;
+ }
+ },
+ tooltip: {
+ //shared: true,
+ crosshairs: true,
+ valueSuffix: yAxisSuffix,
+ useHTML: true,
+ formatter: function() {
+ return "
"
+ +"录入时间: "+tipsbean[0][this.series.data.indexOf(this.point)].medDate+"
"
+ +tipsbean[1][this.series.data.indexOf(this.point)].itemName+":"+tipsbean[1][this.series.data.indexOf(this.point)].medResult+"
"
+ +tipsbean[2][this.series.data.indexOf(this.point)].itemName+":"+tipsbean[2][this.series.data.indexOf(this.point)].medResult+"
"
+ +tipsbean[3][this.series.data.indexOf(this.point)].itemName+":"+tipsbean[3][this.series.data.indexOf(this.point)].medResult+"
"
+ +tipsbean[0][this.series.data.indexOf(this.point)].itemName+":"+tipsbean[0][this.series.data.indexOf(this.point)].medResult+"
"
+ +"
";
+ }
+ },*/
legend: {
- data: ["已贯通", "计划贯通", "贯通率"],
+ data: ["已完成", "计划完成"],
textStyle: {
color: "#B4B4B4"
},
@@ -184,49 +165,22 @@
show: false
}
},
- yAxis: [
- {
- splitLine: {show: false},
- axisLine: {
- lineStyle: {
- color: "#B4B4B4"
- }
- },
-
- axisLabel: {
- formatter: "{value} "
+ yAxis:{
+ splitLine: {
+ show: false
+ },
+ axisLine: {
+ lineStyle: {
+ color: "#B4B4B4"
}
},
- {
- splitLine: {show: false},
- axisLine: {
- lineStyle: {
- color: "#B4B4B4"
- }
- },
- axisLabel: {
- formatter: "{value} "
- }
+ axisLabel: {
+ formatter: "{value} "
}
- ],
+ },
series: [
{
- name: "贯通率",
- type: "line",
- smooth: true,
- showAllSymbol: true,
- symbol: "emptyCircle",
- symbolSize: 8,
- yAxisIndex: 1,
- itemStyle: {
- normal: {
- color: "#F02FC2"
- }
- },
- data: newData.rateData
- },
- {
- name: "已贯通",
+ name: "已完成",
type: "bar",
barWidth: 10,
itemStyle: {
@@ -241,7 +195,7 @@
data: newData.barData
},
{
- name: "计划贯通",
+ name: "计划完成",
type: "bar",
barGap: "-100%",
barWidth: 10,
@@ -256,7 +210,7 @@
}
},
z: -12,
- data: newData.lineData
+ data: newData.planData
}
]
}
@@ -269,7 +223,7 @@
// 根据自己的业务情况修改
setData() {
for (let i = 0; i < this.cdata.barData.length - 1; i++) {
- let rate = this.cdata.barData[i] / this.cdata.lineData[i];
+ let rate = this.cdata.barData[i] / this.cdata.planData[i];
this.cdata.rateData.push(rate.toFixed(2));
}
},
diff --git a/hb_client/src/views/bigScreen/bottomRight.vue b/hb_client/src/views/bigScreen/bottomRight.vue
index e163bb4..51989cd 100644
--- a/hb_client/src/views/bigScreen/bottomRight.vue
+++ b/hb_client/src/views/bigScreen/bottomRight.vue
@@ -6,367 +6,81 @@