From 57094ef66e4afb413c39ecd181e65938315c195c Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期三, 03 十一月 2021 17:41:26 +0800
Subject: [PATCH] hyj change shhuang
---
vue.config.js | 4
public/images/shuohuang/组 739.png | 0
public/images/shuohuang/组 740.png | 0
public/images/shuohuang/组.png | 0
src/pages/shuohuangMonitorAnalyze/components/swipeTabs.vue | 147 +
src/pages/shuohuangMonitorAnalyze/components/charts/eventBarOptions.js | 90 +
public/images/shuohuang/组 738.png | 0
public/images/shuohuang/背景.png | 0
src/pages/shuohuangMonitorAnalyze/components/charts/rt_chart.js | 45
src/pages/shuohuangMonitorAnalyze/components/charts/trendBarChart.js | 67
src/pages/shuohuangMonitorAnalyze/index/App.vue | 158 +
src/pages/shuohuangMonitorAnalyze/components/charts/bar.vue | 29
public/images/shuohuang/组 727.png | 0
src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue | 3244 +++++++++++++++++++++++++++++++++++---------
public/images/shuohuang/railroad.png | 0
public/images/shuohuang/组 731.png | 0
src/pages/shuohuangMonitorAnalyze/components/charts/part2_chart1.js | 81 +
src/pages/shuohuangMonitorAnalyze/components/leftNav.vue | 94
src/pages/shuohuangMonitorAnalyze/components/charts/dataset.vue | 211 +-
src/pages/shuohuangMonitorAnalyze/components/charts/lt_chart1.js | 44
src/pages/shuohuangMonitorAnalyze/components/charts/lt_chart2.js | 44
src/pages/shuohuangMonitorAnalyze/components/topNav.vue | 33
22 files changed, 3,374 insertions(+), 917 deletions(-)
diff --git a/public/images/shuohuang/railroad.png b/public/images/shuohuang/railroad.png
index 1486b69..f94e9f8 100644
--- a/public/images/shuohuang/railroad.png
+++ b/public/images/shuohuang/railroad.png
Binary files differ
diff --git "a/public/images/shuohuang/\347\273\204 727.png" "b/public/images/shuohuang/\347\273\204 727.png"
new file mode 100644
index 0000000..469bd2d
--- /dev/null
+++ "b/public/images/shuohuang/\347\273\204 727.png"
Binary files differ
diff --git "a/public/images/shuohuang/\347\273\204 731.png" "b/public/images/shuohuang/\347\273\204 731.png"
new file mode 100644
index 0000000..818bd10
--- /dev/null
+++ "b/public/images/shuohuang/\347\273\204 731.png"
Binary files differ
diff --git "a/public/images/shuohuang/\347\273\204 738.png" "b/public/images/shuohuang/\347\273\204 738.png"
new file mode 100644
index 0000000..2a26c4a
--- /dev/null
+++ "b/public/images/shuohuang/\347\273\204 738.png"
Binary files differ
diff --git "a/public/images/shuohuang/\347\273\204 739.png" "b/public/images/shuohuang/\347\273\204 739.png"
new file mode 100644
index 0000000..65efff1
--- /dev/null
+++ "b/public/images/shuohuang/\347\273\204 739.png"
Binary files differ
diff --git "a/public/images/shuohuang/\347\273\204 740.png" "b/public/images/shuohuang/\347\273\204 740.png"
new file mode 100644
index 0000000..3210974
--- /dev/null
+++ "b/public/images/shuohuang/\347\273\204 740.png"
Binary files differ
diff --git "a/public/images/shuohuang/\347\273\204.png" "b/public/images/shuohuang/\347\273\204.png"
new file mode 100644
index 0000000..57d4971
--- /dev/null
+++ "b/public/images/shuohuang/\347\273\204.png"
Binary files differ
diff --git "a/public/images/shuohuang/\350\203\214\346\231\257.png" "b/public/images/shuohuang/\350\203\214\346\231\257.png"
new file mode 100644
index 0000000..f687be7
--- /dev/null
+++ "b/public/images/shuohuang/\350\203\214\346\231\257.png"
Binary files differ
diff --git a/src/pages/shuohuangMonitorAnalyze/components/charts/bar.vue b/src/pages/shuohuangMonitorAnalyze/components/charts/bar.vue
index f8062cb..b06116a 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/charts/bar.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/charts/bar.vue
@@ -1,32 +1,29 @@
<template>
- <div ref="barChart" style="width: 100%; height: 100%;"></div>
+ <div ref="barChart" style="width: 100%; height: 100%" class="Bar"></div>
</template>
<script>
export default {
- data () {
- return {
-
- }
+ data() {
+ return {};
},
props: {
- options:{
+ options: {
type: Object,
- }
+ },
},
- mounted(){
+ mounted() {
this.initBar();
},
methods: {
- initBar(){
- this.$nextTick(()=>{
- let dom = this.$echarts.init(this.$refs['barChart']);
+ initBar() {
+ this.$nextTick(() => {
+ let dom = this.$echarts.init(this.$refs["barChart"]);
dom.setOption(this.options);
- })
-
- }
- }
-}
+ });
+ },
+ },
+};
</script>
<style >
diff --git a/src/pages/shuohuangMonitorAnalyze/components/charts/dataset.vue b/src/pages/shuohuangMonitorAnalyze/components/charts/dataset.vue
index 3380c50..52b0d9f 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/charts/dataset.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/charts/dataset.vue
@@ -1,32 +1,55 @@
<template>
<div class="irregular-dataset">
- <div ref="multiBar" style="width: 100%;height: 300px;"></div>
+ <div ref="multiBar" style="width: 100%; height: 300px"></div>
</div>
</template>
<script>
export default {
- data () {
+ data() {
return {
options: {},
- }
+ };
},
- mounted () {
+ mounted() {
this.options = this.mockData();
this.initMultiBar();
},
methods: {
- mockData () {
-
- var dimension = ['鏈福绗�', '鏈墜姣�', '鏈懠鍞�', '杩愯涓潯瑙�', '鏈鏌�', '鏈簲绛�'];
- var yDatas = [[4, 23, 13, 0, 1, 1], [2, 16, 16, 0, 1, 1], [5, 20, 20, 0, 2, 1], [4, 19, 15, 0, 1, 2], [3, 16, 14, 1, 0, 4], [1, 17, 13, 0, 1, 1], [2, 9, 9, 0, 1, 2]];
- var categoryCount = 7;
+ mockData() {
+ var dimension = [
+ "鏈福绗�",
+ "鏈墜姣�",
+ "鏈懠鍞�",
+ "杩愯涓潯瑙�",
+ "鏈鏌�",
+ "鏈簲绛�",
+ ];
+ var yDatas = [
+ [14, 23, 13, 20, 21, 11],
+ [12, 16, 16, 20, 11, 21],
+ [15, 20, 20, 10, 12, 21],
+ [14, 19, 15, 20, 11, 22],
+ [13, 16, 14, 21, 10, 14],
+ [1, 17, 13, 0, 1, 1],
+ [2, 9, 9, 0, 1, 2],
+ [2, 9, 9, 0, 1, 2],
+ [4, 23, 13, 0, 1, 1],
+ [2, 16, 16, 0, 1, 1],
+ [5, 20, 20, 0, 2, 1],
+ [4, 19, 15, 0, 1, 2],
+ [3, 16, 14, 1, 0, 4],
+ [1, 17, 13, 0, 1, 1],
+ [2, 9, 9, 0, 1, 2],
+ [2, 9, 9, 0, 1, 2],
+ ];
+ var categoryCount = 16;
var xAxisData = [];
var customData = [];
var legendData = [];
var dataList = [];
- legendData.push('trend');
+ legendData.push("trend");
var encodeY = [];
for (var i = 0; i < dimension.length; i++) {
legendData.push(dimension[i]);
@@ -36,87 +59,123 @@
for (var i = 0; i < categoryCount; i++) {
//var val = yDatas[i];
- xAxisData.push('category' + i);
+ xAxisData.push("category" + i);
var customVal = [i];
customData.push(customVal);
for (var j = 0; j < dataList.length; j++) {
- var value = j === 0
- ? this.$echarts.number.round(yDatas[i][j], 2)
- : yDatas[i][j]
+ var value =
+ j === 0
+ ? this.$echarts.number.round(yDatas[i][j], 2)
+ : yDatas[i][j];
dataList[j].push(value);
customVal.push(value);
}
}
return {
- title: {
- text: '杩濊鎯呭喌缁熻',
- textStyle: {
- fontSize: 14
- }
- },
- color: ['#3aa0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b', '#975fe4'],
+ color: [
+ "rgb(157, 190, 245)",
+ "rgb(98, 151, 242)",
+ "rgb(179, 240, 229)",
+ "rgb(254, 209, 146)",
+ "rgb(254, 209, 146)",
+ "rgb(237, 102, 62)",
+ ],
grid: {
top: 50,
left: 30,
right: 20,
},
tooltip: {
- trigger: 'axis'
+ trigger: "axis",
},
legend: {
data: legendData,
- left: 'right',
+ left: "right",
//color: ['aqua','#3aa0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b', '#975fe4']
},
- dataZoom: [{
- type: 'slider',
- start: 50,
- end: 70
- }, {
- type: 'inside',
- start: 50,
- end: 70
- }],
+ dataZoom: [
+ {
+ type: "slider",
+ height: 10,
+ end: 30,
+ bottom: 0,
+ backgroundColor: "#F4F6F9 ",
+ showDetail: false,
+ showDataShadow: false,
+ },
+ ],
xAxis: {
//data: xAxisData
- data: ['02-22', '02-23', '02-24', '02-25', '02-26', '02-27','02-28']
- },
- yAxis: {},
- series: [{
- type: 'custom',
- name: 'trend',
- color: 'aqua',
- renderItem: this.renderItem,
- itemStyle: {
- borderWidth: 2
- },
- encode: {
- x: 0,
- y: encodeY
- },
- data: customData,
- z: 1
-
- }].concat(dataList.map(function (data, index) {
- return {
- type: 'bar',
- animation: false,
- name: legendData[index + 1],
- itemStyle: {
- opacity: 0.7
+ axisTick: false,
+ axisLine: {
+ lineStyle: {
+ color: "rbg(241, 241, 240)",
+ width: 1, //杩欓噷鏄负浜嗙獊鍑烘樉绀哄姞涓婄殑
},
- data: data
- };
- }))
-
- }
+ },
+
+ data: [
+ "02-22",
+ "02-23",
+ "02-24",
+ "02-25",
+ "02-26",
+ "02-27",
+ "02-28",
+ "03-01",
+ "03-02",
+ "03-03",
+ "03-04",
+ "03-05",
+ "03-06",
+ "03-07",
+ "03-08",
+ "03-09",
+ ],
+ },
+ yAxis: {
+ axisTick: false,
+ axisLine: {
+ //y杞�
+ show: false,
+ },
+ splitLine: {
+ //缃戞牸绾�
+ lineStyle: {
+ color: "rgb(230, 230, 230)",
+ type: "dashed", //璁剧疆缃戞牸绾跨被鍨� dotted锛氳櫄绾� solid:瀹炵嚎
+ },
+ show: true, //闅愯棌鎴栨樉绀�
+ },
+ },
+ series: [].concat(
+ dataList.map(function (data, index) {
+ return {
+ type: "bar",
+ animation: false,
+ barWidth: 8,
+ name: legendData[index + 1],
+ itemStyle: {
+ opacity: 0.7,
+ normal: {
+ //鏌卞舰鍥惧渾瑙掞紝鍒濆鍖栨晥鏋�
+ barBorderRadius: [8, 8, 0, 0],
+ },
+ },
+ data: data,
+ };
+ })
+ ),
+ };
},
- renderItem (params, api) {
+ renderItem(params, api) {
var xValue = api.value(0);
var currentSeriesIndices = api.currentSeriesIndices();
var barLayout = api.barLayout({
- barGap: '30%', barCategoryGap: '20%', count: currentSeriesIndices.length - 1
+ barGap: "30%",
+ barCategoryGap: "20%",
+ count: currentSeriesIndices.length - 1,
});
var points = [];
@@ -130,29 +189,29 @@
}
}
var style = api.style({
- color: '#975fe4',
+ color: "#975fe4",
//stroke: api.visual('color'),
- stroke: 'aqua',
- fill: null
+ stroke: "aqua",
+ fill: null,
});
return {
- type: 'polyline',
+ type: "polyline",
shape: {
- points: points
+ points: points,
},
- style: style
+ style: style,
};
},
- initMultiBar () {
+ initMultiBar() {
this.$nextTick(() => {
- let dom = this.$echarts.init(this.$refs['multiBar']);
+ let dom = this.$echarts.init(this.$refs["multiBar"]);
dom.setOption(this.options);
- })
- }
- }
-}
+ });
+ },
+ },
+};
</script>
<style>
diff --git a/src/pages/shuohuangMonitorAnalyze/components/charts/eventBarOptions.js b/src/pages/shuohuangMonitorAnalyze/components/charts/eventBarOptions.js
new file mode 100644
index 0000000..5ebd8fa
--- /dev/null
+++ b/src/pages/shuohuangMonitorAnalyze/components/charts/eventBarOptions.js
@@ -0,0 +1,90 @@
+export default {
+ /* grid: {
+ x: 30,
+ y: 40,
+ x2: 30,
+ y2: 50,
+ containLabel: true,
+ }, */
+ xAxis: {
+ type: "category",
+ boundaryGap: true,
+ data: ["鏈福绗�", "鏈墜姣�", "鏈懠鍞�", "杩愯涓潯瑙�", "鏈鏌�", "鏈簲绛�"],
+ axisTick: {
+ //y杞村埢搴︾嚎
+ show: false,
+ },
+ axisLine: {
+ lineStyle: {
+ color: "rbg(241, 241, 240)",
+ width: 1, //杩欓噷鏄负浜嗙獊鍑烘樉绀哄姞涓婄殑
+ },
+ },
+ },
+ yAxis: {
+ type: "value",
+ axisTick: {
+ //y杞村埢搴︾嚎
+ show: false,
+ },
+ axisLine: {
+ //y杞�
+ show: false,
+ },
+ axisLabel: {
+ padding: [0, 10, 0, 0], // 鍥涗釜鏁板瓧鍒嗗埆涓轰笂鍙充笅宸︿笌鍘熶綅缃窛绂�
+ },
+ splitLine: {
+ //缃戞牸绾�
+ lineStyle: {
+ color: "rgb(230, 230, 230)",
+ type: "dashed", //璁剧疆缃戞牸绾跨被鍨� dotted锛氳櫄绾� solid:瀹炵嚎
+ },
+ show: true, //闅愯棌鎴栨樉绀�
+ },
+ },
+ series: [
+ /* {
+ data: [22, 50, 18, 18, 32, 8],
+ type: "line",
+ smooth: true,
+ lineStyle: {
+ color: "#26d4b4",
+ },
+ showSymbol: false,
+ }, */
+ {
+ data: [22, 50, 18, 18, 32, 8],
+ type: "bar",
+ barWidth: 16,
+ itemStyle: {
+ //閫氬父鎯呭喌涓嬶細
+ normal: {
+ barBorderRadius: [8, 8, 0, 0],
+ //姣忎釜鏌卞瓙鐨勯鑹插嵆涓篶olorList鏁扮粍閲岀殑姣忎竴椤癸紝濡傛灉鏌卞瓙鏁扮洰澶氫簬colorList鐨勯暱搴︼紝鍒欐煴瀛愰鑹插惊鐜娇鐢ㄨ鏁扮粍涓殑棰滆壊
+ color: function(params) {
+ var colorList = [
+ "rgb(45, 82, 215)",
+ "rgb(98, 151, 242)",
+ "rgb(157, 190, 245)",
+ "rgb(98, 151, 242)",
+ "rgb(47, 108, 213)",
+ "rgb(45, 82, 215)",
+ ];
+ return colorList[params.dataIndex];
+ },
+ },
+ //榧犳爣鎮仠鏃讹細
+ emphasis: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: "rgba(0, 0, 0, 0.5)",
+ },
+ },
+ },
+ ],
+ tooltip: {
+ show: true,
+ trigger: "axis",
+ },
+};
diff --git a/src/pages/shuohuangMonitorAnalyze/components/charts/lt_chart1.js b/src/pages/shuohuangMonitorAnalyze/components/charts/lt_chart1.js
new file mode 100644
index 0000000..1d08657
--- /dev/null
+++ b/src/pages/shuohuangMonitorAnalyze/components/charts/lt_chart1.js
@@ -0,0 +1,44 @@
+import * as echarts from "echarts";
+export default {
+ top: 0,
+ left: 0,
+ grid: {
+ x: 5,
+ y: 15,
+ x2: 35,
+ y2: 40,
+ },
+ xAxis: {
+ type: "category",
+ boundaryGap: false,
+ show: false,
+ data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+ },
+ yAxis: {
+ show: false,
+ type: "value",
+ },
+ series: [
+ {
+ data: [0, 332, 290, 934, 529, 1330, 0],
+ type: "line",
+ smooth: true,
+ lineStyle: {
+ color: "#213EB4",
+ },
+ areaStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: "#1B3BEF", // 0% 澶勭殑棰滆壊
+ },
+ {
+ offset: 1,
+ color: "#fff", // 100% 澶勭殑棰滆壊
+ },
+ ]),
+ },
+ showSymbol: false,
+ },
+ ],
+};
diff --git a/src/pages/shuohuangMonitorAnalyze/components/charts/lt_chart2.js b/src/pages/shuohuangMonitorAnalyze/components/charts/lt_chart2.js
new file mode 100644
index 0000000..bbf6d32
--- /dev/null
+++ b/src/pages/shuohuangMonitorAnalyze/components/charts/lt_chart2.js
@@ -0,0 +1,44 @@
+import * as echarts from "echarts";
+export default {
+ top: 0,
+ left: 0,
+ grid: {
+ x: 5,
+ y: 15,
+ x2: 35,
+ y2: 40,
+ },
+ xAxis: {
+ type: "category",
+ boundaryGap: false,
+ show: false,
+ data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+ },
+ yAxis: {
+ show: false,
+ type: "value",
+ },
+ series: [
+ {
+ data: [0, 1330, 529, 934, 229, 630, 0],
+ type: "line",
+ smooth: true,
+ lineStyle: {
+ color: "#EF4E1B",
+ },
+ areaStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: "#EF4E1B", // 0% 澶勭殑棰滆壊
+ },
+ {
+ offset: 1,
+ color: "#fff", // 100% 澶勭殑棰滆壊
+ },
+ ]),
+ },
+ showSymbol: false,
+ },
+ ],
+};
diff --git a/src/pages/shuohuangMonitorAnalyze/components/charts/part2_chart1.js b/src/pages/shuohuangMonitorAnalyze/components/charts/part2_chart1.js
new file mode 100644
index 0000000..8ca966b
--- /dev/null
+++ b/src/pages/shuohuangMonitorAnalyze/components/charts/part2_chart1.js
@@ -0,0 +1,81 @@
+import * as echarts from "echarts";
+export default {
+ /* grid: {
+ x: 50,
+ y: 40,
+ x2: 80,
+ y2: 80,
+ containLabel: true,
+ }, */
+ xAxis: {
+ type: "category",
+ boundaryGap: true,
+ data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+ axisTick: {
+ //y杞村埢搴︾嚎
+ show: false,
+ },
+ axisLine: {
+ lineStyle: {
+ color: "rbg(241, 241, 240)",
+ width: 1, //杩欓噷鏄负浜嗙獊鍑烘樉绀哄姞涓婄殑
+ },
+ },
+ },
+ yAxis: {
+ type: "value",
+ axisTick: {
+ //y杞村埢搴︾嚎
+ show: false,
+ },
+ axisLine: {
+ //y杞�
+ show: false,
+ },
+
+ axisLabel: {
+ padding: [0, 10, 0, 0], // 鍥涗釜鏁板瓧鍒嗗埆涓轰笂鍙充笅宸︿笌鍘熶綅缃窛绂�
+ },
+ splitLine: {
+ //缃戞牸绾�
+ lineStyle: {
+ color: "rgb(230, 230, 230)",
+ type: "dashed", //璁剧疆缃戞牸绾跨被鍨� dotted锛氳櫄绾� solid:瀹炵嚎
+ },
+ show: true, //闅愯棌鎴栨樉绀�
+ },
+ },
+ series: [
+ {
+ data: [22, 50, 18, 18, 32, 8, 22],
+ type: "line",
+ smooth: true,
+ arWidth: 10,
+ itemStyle: {
+ normal: {
+ color: "#2A3DE6",
+ },
+ },
+ lineStyle: {
+ color: "#213EB4",
+ },
+ areaStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: "#1B3BEF", // 0% 澶勭殑棰滆壊
+ },
+ {
+ offset: 1,
+ color: "#fff", // 100% 澶勭殑棰滆壊
+ },
+ ]),
+ },
+ showSymbol: false,
+ },
+ ],
+ tooltip: {
+ show: true,
+ trigger: "axis",
+ },
+};
diff --git a/src/pages/shuohuangMonitorAnalyze/components/charts/rt_chart.js b/src/pages/shuohuangMonitorAnalyze/components/charts/rt_chart.js
new file mode 100644
index 0000000..3c15102
--- /dev/null
+++ b/src/pages/shuohuangMonitorAnalyze/components/charts/rt_chart.js
@@ -0,0 +1,45 @@
+export default {
+ tooltip: {
+ trigger: "item",
+ formatter: "{a}<br>{b}:{c} ({d}%)",
+ },
+ legend: {
+ orient: "vertical",
+ itemHeight: 6, // 淇敼icon鍥惧舰澶у皬
+ itemGap: 5, // 淇敼闂磋窛
+ x: "right",
+ y: "60%",
+ data: [
+ "涓存椂鎱㈣ 1",
+ "涓存椂鎱㈣ 2",
+ "涓存椂鎱㈣ 3",
+ "涓存椂鎱㈣ 4",
+ "涓存椂鎱㈣ 5",
+ "涓存椂鎱㈣ 6",
+ ],
+ },
+ series: [
+ {
+ name: "寮傚父浜嬩欢",
+ type: "pie",
+ color: ["#3aa0ff", "#36cbcb", "#4dcb73", "#fad337", "#f2637b", "#975fe4"],
+ radius: ["40%", "60%"],
+ center: ["40%", "50%"],
+ animation: false,
+ label: {
+ show: false,
+ },
+ labelLine: {
+ show: false,
+ },
+ data: [
+ { value: 22, name: "涓存椂鎱㈣ 1" },
+ { value: 50, name: "涓存椂鎱㈣ 2" },
+ { value: 18, name: "涓存椂鎱㈣ 3" },
+ { value: 18, name: "涓存椂鎱㈣ 4" },
+ { value: 32, name: "涓存椂鎱㈣ 5" },
+ { value: 8, name: "涓存椂鎱㈣ 6" },
+ ],
+ },
+ ],
+};
diff --git a/src/pages/shuohuangMonitorAnalyze/components/charts/trendBarChart.js b/src/pages/shuohuangMonitorAnalyze/components/charts/trendBarChart.js
new file mode 100644
index 0000000..9255a8a
--- /dev/null
+++ b/src/pages/shuohuangMonitorAnalyze/components/charts/trendBarChart.js
@@ -0,0 +1,67 @@
+export default {
+ /* grid: {
+ x: 50,
+ y: 40,
+ x2: 80,
+ y2: 80,
+ containLabel: true,
+ }, */
+ xAxis: {
+ type: "category",
+ boundaryGap: true,
+ data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+ axisLine: {
+ lineStyle: {
+ color: "rbg(241, 241, 240)",
+ width: 1, //杩欓噷鏄负浜嗙獊鍑烘樉绀哄姞涓婄殑
+ },
+ },
+ axisTick: {
+ //y杞村埢搴︾嚎
+ show: false,
+ },
+ },
+ yAxis: {
+ type: "value",
+ axisTick: {
+ //y杞村埢搴︾嚎
+ show: false,
+ },
+ axisLine: {
+ //y杞�
+ show: false,
+ },
+ axisLabel: {
+ padding: [0, 10, 0, 0], // 鍥涗釜鏁板瓧鍒嗗埆涓轰笂鍙充笅宸︿笌鍘熶綅缃窛绂�
+ },
+ splitLine: {
+ //缃戞牸绾�
+ lineStyle: {
+ color: "rgb(230, 230, 230)",
+ type: "dashed", //璁剧疆缃戞牸绾跨被鍨� dotted锛氳櫄绾� solid:瀹炵嚎
+ },
+ show: true, //闅愯棌鎴栨樉绀�
+ },
+ },
+ series: [
+ {
+ data: [22, 50, 18, 18, 32, 8, 22],
+ type: "line",
+ smooth: true,
+ lineStyle: {
+ width: 3,
+ color: "#2A3DE6",
+ },
+ showSymbol: false,
+ itemStyle: {
+ normal: {
+ color: "#2A3DE6",
+ },
+ },
+ },
+ ],
+ tooltip: {
+ show: true,
+ trigger: "axis",
+ },
+};
diff --git a/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue b/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue
index 0ad72a0..593892f 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue
@@ -4,8 +4,89 @@
<el-tab-pane label="鏁版嵁缁熻鍒嗘瀽" name="dataStatistic"></el-tab-pane>
<el-tab-pane label="浠诲姟缁熻鍒嗘瀽" name="taskStatistic"></el-tab-pane>
</el-tabs>
- <div class="tab-content" v-if="actCardTab=='dataStatistic'">
+ <div class="tab-content" v-if="actCardTab == 'dataStatistic'">
<div class="card-view">
+ <el-card>
+ <div class="left">
+ <div class="title">
+ <span class="icon iconfont"></span>
+ <span class="info">鏈懆闅愭偅鏁伴噺</span>
+ </div>
+ <div class="weekNum">2758</div>
+ <div class="mid">
+ <div class="circle"></div>
+ <div class="info">鏃ュ潎闅愭偅浜嬩欢</div>
+ </div>
+ <div class="dayNum">25</div>
+ </div>
+ <div class="right">
+ <div class="outCircle"></div>
+ <div id="chart1">
+ <bar :options="option1"></bar>
+ </div>
+ </div>
+ </el-card>
+ <el-card>
+ <div class="left">
+ <div class="title">
+ <span class="icon iconfont icon2"></span>
+ <span class="info">鏈懆鍒嗘瀽杞︽閲�</span>
+ </div>
+ <div class="weekNum">258</div>
+ <div class="mid">
+ <span class="circle2"></span>
+ <div class="info">鏃ュ潎鍒嗘瀽閲�</div>
+ </div>
+ <div class="dayNum">25</div>
+ </div>
+ <div class="right">
+ <div id="chart2">
+ <bar :options="option2"></bar>
+ </div>
+ </div>
+ </el-card>
+ <el-card>
+ <div class="left">
+ <div class="title">
+ <img src="/images/shuohuang/缁� 731.png/" alt="" class="icon3" />
+ <span class="info">杞偍鎬婚噺</span>
+ </div>
+ <div class="weekNum">2758</div>
+ <div class="mid">
+ <span class="circle3"></span>
+ <div class="info">杞崲鐜�</div>
+ </div>
+ <div class="dayNum">100%</div>
+ </div>
+ <div class="right">
+ <div id="chart3">
+ <bar :options="option3"></bar>
+ </div>
+ </div>
+ </el-card>
+ <el-card>
+ <div class="left">
+ <div class="title">
+ <img src="/images/shuohuang/缁� 727.png/" alt="" class="icon3" />
+
+ <span class="info">浠诲姟瀹屾垚姣斾緥</span>
+ </div>
+ <div class="weekNum">90%</div>
+ <div class="mid">
+ <span class="circle4"></span>
+ <div class="info">鏃ョ幆姣�</div>
+ </div>
+ <div class="dayNum">10%</div>
+ </div>
+ <div class="right">
+ <div id="chart4">
+ <bar :options="option4"></bar>
+ </div>
+ </div>
+ </el-card>
+ </div>
+
+ <!-- <div class="card-view">
<el-card>
<div class="title">
<span class="lt">鏈懆闅愭偅鏁伴噺</span>
@@ -39,9 +120,12 @@
<i class="el-icon-warning-outline"></i>
</span>
</div>
- <div class="val">{{$numberFormat(735)}}</div>
+ <div class="val">{{ $numberFormat(735) }}</div>
<div class="trend">
- <line-chart :options="optionsOfWeekAnalyze" style="height:50px"></line-chart>
+ <line-chart
+ :options="optionsOfWeekAnalyze"
+ style="height: 50px"
+ ></line-chart>
</div>
<div class="devide"></div>
<div class="detail">
@@ -56,9 +140,9 @@
<i class="el-icon-warning-outline"></i>
</span>
</div>
- <div class="val">{{$numberFormat(1025)}}</div>
+ <div class="val">{{ $numberFormat(1025) }}</div>
<div class="trend">
- <Bar :options="optionsOfTransferSumBar" style="height: 70px;"></Bar>
+ <Bar :options="optionsOfTransferSumBar" style="height: 70px"></Bar>
</div>
<div class="devide"></div>
<div class="detail">
@@ -98,85 +182,356 @@
</div>
</div>
</el-card>
- </div>
+ </div> -->
<div class="part">
- <div class="part-top">
+ <!-- <div class="part-top">
<div class="header-width-tab">
- <el-tabs class="tab-menu" v-model="actHiddanderTab" @tab-click="initTabContent">
- <el-tab-pane label="闅愭偅浜嬩欢缁熻" name="hidDanderStatistic"></el-tab-pane>
- <el-tab-pane label="闅愭偅浜嬩欢瓒嬪娍" name="hidDanderTrend"></el-tab-pane>
- </el-tabs>
- <div class="rt">
- <time-shortcut actPicker="today" @actPickerChange="timeShortChange"></time-shortcut>
- <el-date-picker
- v-model="searchHidDanderTime"
- type="datetimerange"
- size="small"
- range-separator="鑷�"
- start-placeholder="寮�濮嬫棩鏈�"
- end-placeholder="缁撴潫鏃ユ湡"
- align="right"
- ></el-date-picker>
- </div>
- </div>
- <div class="statics">
- <div class="lt">
- <template v-if="actHiddanderTab == 'hidDanderStatistic'">
- <el-radio-group v-model="actHidDanderStatiscChart" size="mini">
- <el-radio-button label="bar">鏌辩姸鍥�</el-radio-button>
- <el-radio-button label="pie">楗煎浘</el-radio-button>
- </el-radio-group>
- <Bar
- :options="optionsOfHidDangerBar"
- v-if="actHidDanderStatiscChart=='bar'"
- ></Bar>
- <Pie
- :options="optionsOfHidDangerPie"
- v-if="actHidDanderStatiscChart=='pie'"
- ></Pie>
- </template>
- <template v-if="actHiddanderTab == 'hidDanderTrend'">
- <el-radio-group v-model="actHidDanderTrendChart" size="mini">
- <el-radio-button label="line">鎶樼嚎鍥�</el-radio-button>
- <el-radio-button label="pie">楗煎浘</el-radio-button>
- </el-radio-group>
- <line-chart
- :options="optionsOfHidDangerTrend"
- v-if="actHidDanderTrendChart=='line'"
- style="height:350px"
- ></line-chart>
- <Pie
- :options="optionsOfHidDangerTrendPie"
- v-if="actHidDanderTrendChart=='pie'"
- ></Pie>
- </template>
- </div>
- <div class="rt">
- <div class="header">
- <span class="title">閮ㄩ棬闅愭偅鏁伴噺鎺掑悕</span>
- <!-- <el-select v-if="actHiddanderTab=='hidDanderStatistic'" size="small">
- <el-option>涓搧涓�灞�</el-option>
- </el-select>-->
+ <el-tabs
+ class="tab-menu"
+ v-model="actHiddanderTab"
+ @tab-click="initTabContent"
+ >
+ <el-tab-pane
+ label="闅愭偅浜嬩欢缁熻"
+ name="hidDanderStatistic"
+ ></el-tab-pane>
+ <el-tab-pane
+ label="闅愭偅浜嬩欢瓒嬪娍"
+ name="hidDanderTrend"
+ ></el-tab-pane>
+ </el-tabs>
+ <div class="rt">
+ <time-shortcut
+ actPicker="today"
+ @actPickerChange="timeShortChange"
+ ></time-shortcut>
+ <el-date-picker
+ v-model="searchHidDanderTime"
+ type="datetimerange"
+ size="small"
+ range-separator="鑷�"
+ start-placeholder="寮�濮嬫棩鏈�"
+ end-placeholder="缁撴潫鏃ユ湡"
+ align="right"
+ ></el-date-picker>
</div>
- <div class="rank-list">
- <div class="rank-item" v-for="(rankItem,index) in rankList" :key="rankItem.id">
- <span
- class="rank-index"
- :class="{'first':index==0,'second':index==1,'third':index==2}"
- >{{index+1}}</span>
- <span class="name">{{rankItem.name}}</span>
- <span class="val">{{rankItem.val}}</span>
+ </div>
+ <div class="statics">
+ <div class="lt">
+ <template v-if="actHiddanderTab == 'hidDanderStatistic'">
+ <el-radio-group v-model="actHidDanderStatiscChart" size="mini">
+ <el-radio-button label="bar">鏌辩姸鍥�</el-radio-button>
+ <el-radio-button label="pie">楗煎浘</el-radio-button>
+ </el-radio-group>
+ <Bar
+ :options="optionsOfHidDangerBar"
+ v-if="actHidDanderStatiscChart == 'bar'"
+ ></Bar>
+ <Pie
+ :options="optionsOfHidDangerPie"
+ v-if="actHidDanderStatiscChart == 'pie'"
+ ></Pie>
+ </template>
+ <template v-if="actHiddanderTab == 'hidDanderTrend'">
+ <el-radio-group v-model="actHidDanderTrendChart" size="mini">
+ <el-radio-button label="line">鎶樼嚎鍥�</el-radio-button>
+ <el-radio-button label="pie">楗煎浘</el-radio-button>
+ </el-radio-group>
+ <line-chart
+ :options="optionsOfHidDangerTrend"
+ v-if="actHidDanderTrendChart == 'line'"
+ style="height: 350px"
+ ></line-chart>
+ <Pie
+ :options="optionsOfHidDangerTrendPie"
+ v-if="actHidDanderTrendChart == 'pie'"
+ ></Pie>
+ </template>
+ </div>
+ <div class="rt">
+ <div class="header">
+ <span class="title">閮ㄩ棬闅愭偅鏁伴噺鎺掑悕</span>
+ // <el-select v-if="actHiddanderTab=='hidDanderStatistic'" size="small">
+ // <el-option>涓搧涓�灞�</el-option>
+ // </el-select>
+ </div>
+ <div class="rank-list">
+ <div
+ class="rank-item"
+ v-for="(rankItem, index) in rankList"
+ :key="rankItem.id"
+ >
+ <span
+ class="rank-index"
+ :class="{
+ first: index == 0,
+ second: index == 1,
+ third: index == 2,
+ }"
+ >{{ index + 1 }}</span
+ >
+ <span class="name">{{ rankItem.name }}</span>
+ <span class="val">{{ rankItem.val }}</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div> -->
+
+ <div class="part-head">
+ <div class="top">
+ <div class="title">闅愭偅浜嬩欢</div>
+ <div class="control">
+ <div class="icon iconfont" @click="click1"></div>
+ <el-date-picker
+ ref="timepick1"
+ v-model="value1"
+ type="date"
+ placeholder="閫夋嫨鏃ユ湡"
+ >
+ </el-date-picker>
+ <div
+ class="time"
+ :class="{ active: eventConrtol == 'day' }"
+ @click="eventConrtol = 'day'"
+ >
+ 浠婃棩
+ </div>
+ <div
+ class="time"
+ :class="{ active: eventConrtol == 'week' }"
+ @click="eventConrtol = 'week'"
+ >
+ 鏈懆
+ </div>
+ <div
+ class="time"
+ :class="{ active: eventConrtol == 'mouth' }"
+ @click="eventConrtol = 'mouth'"
+ >
+ 鏈湀
+ </div>
+ <div
+ class="time"
+ :class="{ active: eventConrtol == 'year' }"
+ @click="eventConrtol = 'year'"
+ >
+ 鍏ㄥ勾
+ </div>
+ </div>
+ </div>
+
+ <el-divider></el-divider>
+
+ <div class="bottom">
+ <div class="left box">
+ <div class="box-top">
+ <div class="title">闅愭偅浜嬩欢缁熻</div>
+ <div class="control">
+ <div
+ class="chart"
+ :class="{ active: dangerEvent == 'bar' }"
+ @click="dangerEvent = 'bar'"
+ >
+ 鏌辩姸鍥�
+ </div>
+ <div
+ class="chart"
+ :class="{ active: dangerEvent == 'pai' }"
+ @click="dangerEvent = 'pai'"
+ >
+ 楗肩姸鍥�
+ </div>
+ </div>
+ </div>
+ <div class="echart">
+ <bar :options="eventBarOptions" v-if="dangerEvent == 'bar'" />
+ <Pie
+ :options="optionsOfHidDangerPie"
+ :pieW="500"
+ :pieH="250"
+ v-else
+ ></Pie>
+ </div>
+ </div>
+
+ <div class="middle box">
+ <div class="box-top">
+ <div class="title">闅愭偅浜嬩欢瓒嬪娍</div>
+ <div class="control">
+ <div
+ class="chart"
+ :class="{ active: dangerTrend == 'bar' }"
+ @click="dangerTrend = 'bar'"
+ >
+ 鎶樼嚎鍥�
+ </div>
+ <div
+ class="chart"
+ :class="{ active: dangerTrend == 'pai' }"
+ @click="dangerTrend = 'pai'"
+ >
+ 楗肩姸鍥�
+ </div>
+ </div>
+ </div>
+ <div class="echart">
+ <bar :options="trendBarChart" v-if="dangerTrend == 'bar'" />
+ <Pie
+ :options="optionsOfHidDangerTrendPie"
+ :pieW="500"
+ :pieH="250"
+ v-else
+ ></Pie>
+ </div>
+ </div>
+
+ <div class="right">
+ <div class="header">
+ <span class="title">閮ㄩ棬闅愭偅鏁伴噺鎺掑悕</span>
+ <!-- //
+ <el-select
+ v-if="actHiddanderTab == 'hidDanderStatistic'"
+ size="small"
+ >
+ // <el-option>涓搧涓�灞�</el-option>
+ //
+ </el-select> -->
+ </div>
+ <div class="rank-list">
+ <div
+ class="rank-item"
+ v-for="(rankItem, index) in rankList"
+ :key="rankItem.id"
+ >
+ <span
+ class="rank-index"
+ :class="{
+ first: index == 0,
+ second: index == 1,
+ third: index == 2,
+ }"
+ >{{ index + 1 }}</span
+ >
+ <span class="name"
+ >{{ rankItem.name }}
+ <span
+ class="icon iconfont up"
+ v-if="index == 0 || index == 3"
+ ></span
+ >
+ <span
+ class="icon iconfont down"
+ v-if="index == 1 || index == 4"
+ ></span
+ >
+ </span>
+
+ <span class="val"
+ >{{ rankItem.val }}
+ <span class="often" v-if="index == 1">甯�</span>
+ <span class="new" v-if="index == 2">鏂�</span>
+ </span>
+ </div>
</div>
</div>
</div>
</div>
- </div>
+
<div class="statics flex-box">
<div class="lt">
- <div class="statics-part">
+ <div class="lt-head">
+ <div class="title">涔樺姟鍛樿繚瑙勭粺璁�</div>
+ <div class="control">
+ <div class="icon iconfont" @click="click2"></div>
+ <el-date-picker
+ ref="timepick2"
+ v-model="value2"
+ type="date"
+ placeholder="閫夋嫨鏃ユ湡"
+ >
+ </el-date-picker>
+ <div
+ class="time"
+ :class="{ active: personConrtol == 'day' }"
+ @click="personConrtol = 'day'"
+ >
+ 浠婃棩
+ </div>
+ <div
+ class="time"
+ :class="{ active: personConrtol == 'week' }"
+ @click="personConrtol = 'week'"
+ >
+ 鏈懆
+ </div>
+ <div
+ class="time"
+ :class="{ active: personConrtol == 'mouth' }"
+ @click="personConrtol = 'mouth'"
+ >
+ 鏈湀
+ </div>
+ <div
+ class="time"
+ :class="{ active: personConrtol == 'year' }"
+ @click="personConrtol = 'year'"
+ >
+ 鍏ㄥ勾
+ </div>
+ </div>
+ </div>
+ <el-divider></el-divider>
+
+ <div class="lt-bottom">
+ <div class="lt-bottom-left">
+ <div class="chart-theme">涔樺姟鍛樻�讳汉鏁�</div>
+ <div class="val">187</div>
+ <div class="ratio">17.1%</div>
+ <div class="chart-theme">浜哄潎杩濊娆℃暟</div>
+ <div class="val">1.31</div>
+ </div>
+ <div class="lt-bottom-mid">
+ <div class="lt-chart1">
+ <LineChart :options="lt_chart1" />
+ </div>
+ <div class="lt-chart2">
+ <LineChart :options="lt_chart2" />
+ </div>
+ </div>
+ <div class="lt-bottom-right">
+ <el-table :data="irregularTableData" style="width: 100%">
+ <el-table-column
+ label="鎺掑悕"
+ type="index"
+ width="90"
+ header-align="center"
+ align="center"
+ ></el-table-column>
+ <el-table-column
+ label="濮撳悕"
+ prop="name"
+ header-align="center"
+ align="center"
+ ></el-table-column>
+ <el-table-column
+ label="杩濊娆℃暟"
+ prop="wg"
+ header-align="center"
+ align="center"
+ ></el-table-column>
+ </el-table>
+ <el-pagination small layout="prev, pager, next" :total="6">
+ </el-pagination>
+ </div>
+ </div>
+
+ <!-- <div class="statics-part">
<div class="statics-header">
<span class="title">涔樺姟鍛樿繚瑙勭粺璁�</span>
- <time-shortcut @actPickerChange="irregularMenStatistic"></time-shortcut>
+ <time-shortcut
+ @actPickerChange="irregularMenStatistic"
+ ></time-shortcut>
</div>
<div class="statics-content">
<div class="chart-area flex-box">
@@ -186,31 +541,32 @@
<span class="val">187</span>
<span class="ratio">17.1%</span>
</div>
- <line-chart :options="optionsOfIrregularSum" style="height:70px"></line-chart>
+ <line-chart
+ :options="optionsOfIrregularSum"
+ style="height: 70px"
+ ></line-chart>
</div>
<div class="gt">
<div class="chart-theme">浜哄潎杩濊娆℃暟</div>
<div class="sum">
<span class="val">1.31</span>
</div>
- <line-chart :options="optionsOfIrregularPer" style="height:70px"></line-chart>
+ <line-chart
+ :options="optionsOfIrregularPer"
+ style="height: 70px"
+ ></line-chart>
</div>
</div>
<el-table class="thbg" :data="irregularTableData">
- <el-table-column label="鎺掑悕" type="index" width="90"></el-table-column>
+ <el-table-column
+ label="鎺掑悕"
+ type="index"
+ width="90"
+ ></el-table-column>
<el-table-column label="濮撳悕" prop="name"></el-table-column>
<el-table-column label="杩濊娆℃暟" prop="wg"></el-table-column>
- <!-- <el-table-column label="鍛ㄦ定骞�" prop="ratio"></el-table-column> -->
+
</el-table>
- <!-- <el-pagination
- @size-change="handleTableSizeChange"
- @current-change="renderIrregularMenTable"
- :current-page.sync="PageIndex"
- :page-size="PageSize"
- :page-sizes="pageSizes"
- layout="total,sizes, prev, pager, next"
- :total="tableTotal"
- ></el-pagination>-->
<el-pagination
@size-change="handleTableSizeChange"
@current-change="renderIrregularMenTable"
@@ -221,13 +577,73 @@
:total="irregularTableData.length"
></el-pagination>
</div>
- </div>
+ </div> -->
</div>
<div class="rt">
- <div class="statics-part">
+ <div class="rt-head">
+ <div class="title">閲嶇偣鍦版杩濊浜嬩欢缁熻</div>
+ <div class="control">
+ <div class="icon iconfont" @click="click3"></div>
+ <el-date-picker
+ ref="timepick3"
+ v-model="value3"
+ type="date"
+ placeholder="閫夋嫨鏃ユ湡"
+ >
+ </el-date-picker>
+ <div
+ class="time"
+ :class="{ active: placeConrtol == 'day' }"
+ @click="placeConrtol = 'day'"
+ >
+ 浠婃棩
+ </div>
+ <div
+ class="time"
+ :class="{ active: placeConrtol == 'week' }"
+ @click="placeConrtol = 'week'"
+ >
+ 鏈懆
+ </div>
+ <div
+ class="time"
+ :class="{ active: placeConrtol == 'mouth' }"
+ @click="placeConrtol = 'mouth'"
+ >
+ 鏈湀
+ </div>
+ <div
+ class="time"
+ :class="{ active: placeConrtol == 'year' }"
+ @click="placeConrtol = 'year'"
+ >
+ 鍏ㄥ勾
+ </div>
+ </div>
+ </div>
+ <el-divider></el-divider>
+ <div class="rt-bottom">
+ <div class="left">
+ <div
+ class="left-item"
+ v-for="i in 6"
+ :key="i"
+ :class="{ active: place_active == i }"
+ @click="place_active = i"
+ >
+ 闃叉姢鍦版
+ </div>
+ </div>
+ <div class="right">
+ <Pie :options="rt_chart" :pieW="400" :pieH="300" />
+ </div>
+ </div>
+ <!-- <div class="statics-part">
<div class="statics-header">
<span class="title">閲嶇偣鍦版杩濊浜嬩欢缁熻</span>
- <time-shortcut @actPickerChange="irregularEventStatistic"></time-shortcut>
+ <time-shortcut
+ @actPickerChange="irregularEventStatistic"
+ ></time-shortcut>
</div>
<div class="statics-content">
<el-radio-group
@@ -241,131 +657,233 @@
<el-radio-button label="hc">浼氳溅</el-radio-button>
<el-radio-button label="lsmx">涓存椂鎱㈣</el-radio-button>
</el-radio-group>
-
- <Pie :options="optionsOfIrregularEventPie" style="padding-top:20px;"></Pie>
+
+ <Pie
+ :options="optionsOfIrregularEventPie"
+ style="padding-top: 20px"
+ ></Pie>
</div>
- </div>
+ </div> -->
</div>
</div>
- <div class="part-bottom" >
+ <div class="part-bottom">
+ <div class="bottom-head">
+ <div class="title">杩濊鎯呭喌缁熻</div>
+ </div>
+ <el-divider></el-divider>
<div class="tab-swiper">
<swipe-tabs @checkTab="checkTabInSwipe"></swipe-tabs>
</div>
<div class="tab-detail">
- <dataset-chart style="width:100%"></dataset-chart>
+ <dataset-chart style="width: 100%"></dataset-chart>
</div>
</div>
</div>
</div>
- <div class="tab-content" v-if="actCardTab=='taskStatistic'">
- <div class="general-view">
- <div class="indicator">
- <div class="icon">
- <i class="iconfont iconrenwuzhipai" style="color:#3399ff"></i>
- </div>
- <div class="content">
- <div class="indicator-title">鏈懆浠诲姟鎸囨淳閲�</div>
- <div class="indicator-val">742</div>
- </div>
- </div>
- <div class="indicator">
- <div class="icon">
- <i class="iconfont iconfenxi" style="color:#4c76ff"></i>
- </div>
- <div class="content">
- <div class="indicator-title">鍒嗘瀽閲�</div>
- <div class="indicator-val">735</div>
- </div>
- </div>
- <div class="indicator lastOne">
- <div class="icon">
- <i class="iconfont iconweigui" style="color:#fdd476"></i>
- </div>
- <div class="content">
- <div class="indicator-title">杩濊閲�</div>
- <div class="indicator-val">245</div>
- </div>
- </div>
- </div>
- <div class="part">
- <div class="statics flex-box">
+ <div class="tab-content" v-if="actCardTab == 'taskStatistic'">
+ <div class="part2">
+ <div class="statics flex-box part2-top">
<div class="lt">
- <div class="statics-part">
- <div class="statics-header">
- <span class="title">浠诲姟鎸囨淳缁熻</span>
+ <div class="indicator">
+ <div class="icon">
+ <img src="/images/shuohuang/缁� 738.png/" alt="" />
</div>
- <div class="statics-content">
- <div class="flex-end">
- <time-shortcut @actPickerChange="taskAssignStatics"></time-shortcut>
- <el-date-picker
- v-model="searchTaskAssignTime"
- type="datetimerange"
- size="small"
- range-separator="鑷�"
- start-placeholder="寮�濮嬫棩鏈�"
- end-placeholder="缁撴潫鏃ユ湡"
- align="right"
- ></el-date-picker>
- </div>
- <line-chart :options="optionsOfTaskAssign" style="height: 300px;"></line-chart>
+ <div class="content">
+ <div class="indicator-title">鏈懆浠诲姟鎸囨淳閲�</div>
+ <div class="indicator-val">742</div>
+ </div>
+ </div>
+ <div class="indicator">
+ <div class="icon">
+ <img src="/images/shuohuang/缁� 739.png/" alt="" />
+ </div>
+ <div class="content">
+ <div class="indicator-title">鍒嗘瀽閲�</div>
+ <div class="indicator-val">735</div>
+ </div>
+ </div>
+ <div class="indicator lastOne">
+ <div class="icon">
+ <img src="/images/shuohuang/缁� 740.png/" alt="" />
+ </div>
+ <div class="content">
+ <div class="indicator-title">杩濊閲�</div>
+ <div class="indicator-val">245</div>
</div>
</div>
</div>
- <div class="rt">
- <div class="statics-part">
- <div class="statics-header">
- <span class="title">閮ㄩ棬鎸囨淳浠诲姟鍗犳瘮</span>
- <time-shortcut @actPickerChange="partAssignstatics"></time-shortcut>
- </div>
- <div class="statics-content">
- <Pie :options="optionsOfTaskAssignPie"></Pie>
- </div>
- </div>
- </div>
- </div>
- <div class="statics">
- <div class="statics-part">
- <div class="statics-header">
- <span class="title">浠诲姟鍒嗘瀽缁熻</span>
- </div>
- <div class="statics-content">
- <div class="flex-end">
- <time-shortcut @actPickerChange="taskAnalyzeStatics"></time-shortcut>
- <el-date-picker
- v-model="searchTaskAnalyzeTime"
- type="datetimerange"
- size="small"
- range-separator="鑷�"
- start-placeholder="寮�濮嬫棩鏈�"
- end-placeholder="缁撴潫鏃ユ湡"
- align="right"
- ></el-date-picker>
- </div>
- <Bar :options="optionsOfTaskAnalyzeBar" style="height: 300px;"></Bar>
- </div>
- </div>
- </div>
- <div class="statics">
- <div class="statics-part">
- <div class="statics-header">
- <span class="title">浠诲姟鍒嗘瀽鎯呭喌</span>
- <time-shortcut @actPickerChange="taskAnalyzeCase"></time-shortcut>
- </div>
- <div class="statics-content">
- <div class="table-area">
- <el-table class="thbg" :data="taskAnalyzeCaseTableData">
- <el-table-column type="index" label="搴忓彿"></el-table-column>
- <el-table-column prop="name" label="濮撳悕"></el-table-column>
- <el-table-column prop="rwl" label="浠诲姟閲�"></el-table-column>
- <el-table-column prop="fxl" label="鍒嗘瀽閲�"></el-table-column>
- <el-table-column prop="pdwgl" label="鍒ゅ畾杩濊閲�"></el-table-column>
- <el-table-column prop="pdwglv" label="鍒ゅ畾杩濊鐜�"></el-table-column>
- <el-table-column prop="wcl" label="瀹屾垚鐜�"></el-table-column>
- </el-table>
- </div>
- <div class="flex-end">
- <!-- <el-pagination
+ <div class="mid">
+ <div class="mid-head">
+ <div class="title">浠诲姟鎸囨淳缁熻</div>
+ <div class="control">
+ <div class="icon iconfont" @click="click4"></div>
+ <el-date-picker
+ ref="timepick4"
+ v-model="value4"
+ type="date"
+ placeholder="閫夋嫨鏃ユ湡"
+ >
+ </el-date-picker>
+ <div
+ class="time"
+ :class="{ active: taskConrtol == 'day' }"
+ @click="taskConrtol = 'day'"
+ >
+ 浠婃棩
+ </div>
+ <div
+ class="time"
+ :class="{ active: taskConrtol == 'week' }"
+ @click="taskConrtol = 'week'"
+ >
+ 鏈懆
+ </div>
+ <div
+ class="time"
+ :class="{ active: taskConrtol == 'mouth' }"
+ @click="taskConrtol = 'mouth'"
+ >
+ 鏈湀
+ </div>
+ <div
+ class="time"
+ :class="{ active: taskConrtol == 'year' }"
+ @click="taskConrtol = 'year'"
+ >
+ 鍏ㄥ勾
+ </div>
+ </div>
+ </div>
+ <el-divider></el-divider>
+ <Bar :options="part2_chart1"></Bar>
+ </div>
+
+ <div class="rt">
+ <div class="bottom-head">
+ <div class="title">閮ㄩ棬鎸囨淳浠诲姟鍗犳瘮</div>
+ </div>
+ <el-divider></el-divider>
+
+ <div class="rt-chart">
+ <Pie
+ :options="optionsOfTaskAssignPie"
+ :pieW="400"
+ :pieH="280"
+ ></Pie>
+ </div>
+ </div>
+ </div>
+ <div class="part2-mid">
+ <div class="mid-head">
+ <div class="title">浠诲姟鍒嗘瀽缁熻</div>
+ <div class="control">
+ <div class="icon iconfont" @click="click5"></div>
+ <el-date-picker
+ ref="timepick5"
+ v-model="value5"
+ type="date"
+ placeholder="閫夋嫨鏃ユ湡"
+ >
+ </el-date-picker>
+ <div
+ class="time"
+ :class="{ active: analysisConrtol == 'day' }"
+ @click="analysisConrtol = 'day'"
+ >
+ 浠婃棩
+ </div>
+ <div
+ class="time"
+ :class="{ active: analysisConrtol == 'week' }"
+ @click="analysisConrtol = 'week'"
+ >
+ 鏈懆
+ </div>
+ <div
+ class="time"
+ :class="{ active: analysisConrtol == 'mouth' }"
+ @click="analysisConrtol = 'mouth'"
+ >
+ 鏈湀
+ </div>
+ <div
+ class="time"
+ :class="{ active: analysisConrtol == 'year' }"
+ @click="analysisConrtol = 'year'"
+ >
+ 鍏ㄥ勾
+ </div>
+ </div>
+ </div>
+ <el-divider></el-divider>
+ <div class="mid-bottom">
+ <Bar :options="optionsOfTaskAnalyzeBar"></Bar>
+ </div>
+ </div>
+ <div class="part2-table">
+ <div class="table-head">
+ <div class="title">浠诲姟鍒嗘瀽鎯呭喌</div>
+ <div class="control">
+ <div class="icon iconfont" @click="click6"></div>
+ <el-date-picker
+ ref="timepick6"
+ v-model="value6"
+ type="date"
+ placeholder="閫夋嫨鏃ユ湡"
+ >
+ </el-date-picker>
+ <div
+ class="time"
+ :class="{ active: situationConrtol == 'day' }"
+ @click="situationConrtol = 'day'"
+ >
+ 浠婃棩
+ </div>
+ <div
+ class="time"
+ :class="{ active: situationConrtol == 'week' }"
+ @click="situationConrtol = 'week'"
+ >
+ 鏈懆
+ </div>
+ <div
+ class="time"
+ :class="{ active: situationConrtol == 'mouth' }"
+ @click="situationConrtol = 'mouth'"
+ >
+ 鏈湀
+ </div>
+ <div
+ class="time"
+ :class="{ active: situationConrtol == 'year' }"
+ @click="situationConrtol = 'year'"
+ >
+ 鍏ㄥ勾
+ </div>
+ </div>
+ </div>
+ <div class="table-content">
+ <div class="table-area">
+ <el-table class="thbg" :data="taskAnalyzeCaseTableData">
+ <el-table-column type="index" label="搴忓彿"></el-table-column>
+ <el-table-column prop="name" label="濮撳悕"></el-table-column>
+ <el-table-column prop="rwl" label="浠诲姟閲�"></el-table-column>
+ <el-table-column prop="fxl" label="鍒嗘瀽閲�"></el-table-column>
+ <el-table-column
+ prop="pdwgl"
+ label="鍒ゅ畾杩濊閲�"
+ ></el-table-column>
+ <el-table-column
+ prop="pdwglv"
+ label="鍒ゅ畾杩濊鐜�"
+ ></el-table-column>
+ <el-table-column prop="wcl" label="瀹屾垚鐜�"></el-table-column>
+ </el-table>
+ </div>
+
+ <div class="flex-end">
+ <!-- <el-pagination
@size-change="handleTableSizeChange"
@current-change="renderIrregularMenTable"
:current-page.sync="PageIndex"
@@ -374,16 +892,15 @@
layout="total,sizes, prev, pager, next"
:total="tableTotal"
></el-pagination>-->
- <el-pagination
- @size-change="handleTableSizeChange"
- @current-change="renderIrregularMenTable"
- :current-page.sync="PageIndex"
- :page-size="PageSize"
- :page-sizes="pageSizes"
- layout="total,sizes, prev, pager, next"
- :total="taskAnalyzeCaseTableData.length"
- ></el-pagination>
- </div>
+ <el-pagination
+ @size-change="handleTableSizeChange"
+ @current-change="renderIrregularMenTable"
+ :current-page.sync="PageIndex"
+ :page-size="PageSize"
+ :page-sizes="pageSizes"
+ layout=" prev, pager, next,sizes,total"
+ :total="taskAnalyzeCaseTableData.length"
+ ></el-pagination>
</div>
</div>
</div>
@@ -393,46 +910,83 @@
</template>
<script>
-import timeShortcut from './timeShortcut';
-import Bar from './charts/bar';
-import Pie from './charts/pie';
-import LineChart from './charts/line';
-import SwipeTabs from './swipeTabs';
-import DatasetChart from './charts/dataset';
+import timeShortcut from "./timeShortcut";
+import Bar from "./charts/bar";
+import Pie from "./charts/pie";
+import LineChart from "./charts/line";
+import SwipeTabs from "./swipeTabs";
+import DatasetChart from "./charts/dataset";
+import * as echarts from "echarts";
+import eventBarOptions from "./charts/eventBarOptions";
+import trendBarChart from "./charts/trendBarChart";
+import lt_chart1 from "./charts/lt_chart1";
+import lt_chart2 from "./charts/lt_chart2";
+import rt_chart from "./charts/rt_chart";
+import part2_chart1 from "./charts/part2_chart1";
export default {
- components: { timeShortcut, Bar, Pie, LineChart, SwipeTabs, DatasetChart },
- mounted () {
- let tempArr = [{
- "text": "Same but with checkboxes",
- "children": [
- {
- "text": "initially selected",
- "selected": true
- }
- ]
- }];
+ components: {
+ //timeShortcut,
+ Bar,
+ Pie,
+ LineChart,
+ SwipeTabs,
+ DatasetChart,
+ },
+ mounted() {
+ let tempArr = [
+ {
+ text: "Same but with checkboxes",
+ children: [
+ {
+ text: "initially selected",
+ selected: true,
+ },
+ ],
+ },
+ ];
for (var i = 0; i < 20; i++) {
tempArr[0].children.push({
- "text": "initially open",
- "icon": "fa fa-folder icon-state-default",
- "opened": true,
- "children": [
+ text: "initially open",
+ icon: "fa fa-folder icon-state-default",
+ opened: true,
+ children: [
{
- "text": "Another node"
- }
- ]
- })
+ text: "Another node",
+ },
+ ],
+ });
}
- tempArr.forEach(node => {
+ tempArr.forEach((node) => {
//if(node.children.length)
-
- })
- this.jsTreeNodes = tempArr
- this.refreshShoubiNum()
+ });
+ this.jsTreeNodes = tempArr;
+ this.refreshShoubiNum();
},
- data () {
+ data() {
return {
- actCardTab: 'dataStatistic',
+ place_active: 1,
+ value1: "",
+ value2: "",
+ value3: "",
+ value4: "",
+ value5: "",
+ value6: "",
+ active: 1,
+ part2_chart1,
+ rt_chart,
+ lt_chart1,
+ lt_chart2,
+ eventBarOptions,
+ trendBarChart,
+ personConrtol: "day",
+ situationConrtol: "day",
+ analysisConrtol: "day",
+ placeConrtol: "day",
+ eventConrtol: "day",
+ taskConrtol: "day",
+ dangerEvent: "bar",
+ dangerTrend: "bar",
+ actCardTab: "dataStatistic",
//actHiddanderTab: 'hidDanderStatistic',
optionsOfWeekAnalyze: {
animation: false,
@@ -444,44 +998,44 @@
//containLabel: true
},
tooltip: {
- trigger: 'axis',
+ trigger: "axis",
axisPointer: {
- type: 'cross',
+ type: "cross",
label: {
- backgroundColor: '#6a7985'
- }
- }
+ backgroundColor: "#6a7985",
+ },
+ },
},
xAxis: {
show: false,
- type: 'category',
+ type: "category",
boundaryGap: false,
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+ data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
label: {
- show: false
- }
+ show: false,
+ },
},
yAxis: {
- type: 'value',
+ type: "value",
show: false,
label: {
- show: false
- }
+ show: false,
+ },
},
series: [
{
data: [100, 103, 101, 107, 104, 111, 109],
- type: 'line',
+ type: "line",
smooth: true,
areaStyle: {
- opacity: 0.7
+ opacity: 0.7,
},
- color: '#975fe3'
- }
- ]
+ color: "#975fe3",
+ },
+ ],
},
optionsOfTransferSumBar: {
- color: ['#3ba1ff'],
+ color: ["#3ba1ff"],
grid: {
top: 0,
left: 10,
@@ -490,86 +1044,101 @@
//containLabel: true
},
tooltip: {
- trigger: 'axis',
+ trigger: "axis",
axisPointer: {
- type: 'cross',
+ type: "cross",
label: {
- backgroundColor: '#6a7985'
- }
- }
+ backgroundColor: "#6a7985",
+ },
+ },
},
xAxis: {
show: false,
- type: 'category',
+ type: "category",
boundaryGap: false,
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+ data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
label: {
- show: false
- }
+ show: false,
+ },
},
yAxis: {
- type: 'value',
+ type: "value",
show: false,
- boundaryGap: [0, '45%'],
+ boundaryGap: [0, "45%"],
label: {
- show: false
- }
+ show: false,
+ },
},
series: [
{
- name: '鏁伴噺',
- type: 'bar',
- barWidth: '24%',
- data: [123, 120, 157, 140, 147, 172, 166]
- }
- ]
+ name: "鏁伴噺",
+ type: "bar",
+ barWidth: "24%",
+ data: [123, 120, 157, 140, 147, 172, 166],
+ },
+ ],
},
searchHidDanderTime: [],
- actHiddanderTab: 'hidDanderStatistic',
- actHidDanderStatiscChart: 'bar',
- actHidDanderTrendChart: 'line',
+ actHiddanderTab: "hidDanderStatistic",
+ actHidDanderStatiscChart: "bar",
+ actHidDanderTrendChart: "line",
optionsOfHidDangerBar: {
- color: ['#9ed2f5'],
+ color: ["#9ed2f5"],
tooltip: {
- trigger: 'axis',
+ trigger: "axis",
axisPointer: {
- type: 'shadow'
+ type: "shadow",
},
},
grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
+ left: "3%",
+ right: "4%",
+ bottom: "3%",
+ containLabel: true,
},
xAxis: [
{
- type: 'category',
- data: ['鏈福绗�', '鏈墜姣�', '鏈懠鍞�', '杩愯涓潯瑙�', '鏈鏌�', '鏈簲绛�'],
+ type: "category",
+ data: [
+ "鏈福绗�",
+ "鏈墜姣�",
+ "鏈懠鍞�",
+ "杩愯涓潯瑙�",
+ "鏈鏌�",
+ "鏈簲绛�",
+ ],
axisTick: {
- alignWithLabel: true
+ alignWithLabel: true,
},
- }
+ },
],
yAxis: [
{
- type: 'value',
+ type: "value",
axisLine: {
- show: false
- }
- }
+ show: false,
+ },
+ },
],
series: [
{
- name: '鏁伴噺',
- type: 'bar',
- barWidth: '60%',
- label:{
- show:true,position: 'top'
+ name: "鏁伴噺",
+ type: "bar",
+ barWidth: "60%",
+ label: {
+ show: true,
+ position: "top",
},
- data: [{value:1,itemStyle:{color:'#3aa0ff'}},{value:0,itemStyle:{color:'#36cbcb'}},{value:1,itemStyle:{color:'#4dcb73'}},{value:1,itemStyle:{color:'#fad337'}},{value:3,itemStyle:{color:'#f2637b'}}, {value:2,itemStyle:{color:'#975fe4'}}]
- }
- ]
+ data: [
+ { value: 1, itemStyle: { color: "#3aa0ff" } },
+ { value: 0, itemStyle: { color: "#36cbcb" } },
+ { value: 1, itemStyle: { color: "#4dcb73" } },
+ { value: 1, itemStyle: { color: "#fad337" } },
+ { value: 3, itemStyle: { color: "#f2637b" } },
+ { value: 2, itemStyle: { color: "#975fe4" } },
+ ],
+ },
+ ],
},
optionsOfHidDangerTrend: {
grid: {
@@ -579,265 +1148,328 @@
containLabel: true,
},
tooltip: {
- trigger: 'axis',
+ trigger: "axis",
axisPointer: {
- type: 'cross',
+ type: "cross",
label: {
- backgroundColor: '#6a7985'
- }
- }
+ backgroundColor: "#6a7985",
+ },
+ },
},
xAxis: {
- type: 'category',
+ type: "category",
boundaryGap: false,
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+ data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
label: {
- show: false
- }
+ show: false,
+ },
},
yAxis: {
- type: 'value',
+ type: "value",
axisLine: {
- show: false
+ show: false,
},
label: {
- show: false
- }
+ show: false,
+ },
},
series: [
{
data: [83, 83, 85, 85, 80, 40, 30],
- type: 'line',
- color: '#5dbafd',
+ type: "line",
+ color: "#5dbafd",
symbolSize: 10,
- symbol: 'circle',
+ symbol: "circle",
lineStyle: {
- color: '#61b4ff',
+ color: "#61b4ff",
width: 2,
},
itemStyle: {
- color: '#98d87d'
- }
- }
- ]
+ color: "#98d87d",
+ },
+ },
+ ],
},
optionsOfHidDangerTrendPie: {
tooltip: {
- trigger: 'item',
- formatter: '{a}<br>{b}:{c} ({d}%)'
+ trigger: "item",
+ formatter: "{a}<br>{b}:{c} ({d}%)",
},
legend: {
- orient: 'vertical',
+ orient: "vertical",
right: 10,
- y: 'center',
- data: ['鏈福绗�', '鏈墜姣�', '鏈懠鍞�', '杩愯涓潯瑙�', '鏈鏌�', '鏈簲绛�'],
+ y: "center",
+ data: [
+ "鏈福绗�",
+ "鏈墜姣�",
+ "鏈懠鍞�",
+ "杩愯涓潯瑙�",
+ "鏈鏌�",
+ "鏈簲绛�",
+ ],
},
series: [
{
- name: '寮傚父浜嬩欢',
- type: 'pie',
- color: ['#3aa0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b', '#975fe4'],
- radius: ['50%', '80%'],
- //center: ['40%','60%'],
+ name: "寮傚父浜嬩欢",
+ type: "pie",
+ color: [
+ "#3aa0ff",
+ "#36cbcb",
+ "#4dcb73",
+ "#fad337",
+ "#f2637b",
+ "#975fe4",
+ ],
+ radius: ["50%", "70%"],
+ center: ["40%", "40%"],
avoidLabelOverlap: false,
label: {
show: false,
// position: 'center',
- formatter: '{b}\n{c} '
+ formatter: "{b}\n{c} ",
},
emphasis: {
label: {
show: true,
- fontSize: '20',
- fontWeight: 'bold'
- }
+ fontSize: "20",
+ fontWeight: "bold",
+ },
},
labelLine: {
- show: false
+ show: false,
},
data: [
- { value: 83, name: '鏈福绗�' },
- { value: 83, name: '鏈墜姣�' },
- { value: 85, name: '鏈懠鍞�' },
- { value: 80, name: '杩愯涓潯瑙�' },
- { value: 40, name: '鏈鏌�' },
- { value: 30, name: '鏈簲绛�' },
- ]
- }
- ]
+ { value: 83, name: "鏈福绗�" },
+ { value: 83, name: "鏈墜姣�" },
+ { value: 85, name: "鏈懠鍞�" },
+ { value: 80, name: "杩愯涓潯瑙�" },
+ { value: 40, name: "鏈鏌�" },
+ { value: 30, name: "鏈簲绛�" },
+ ],
+ },
+ ],
},
optionsOfHidDangerPie: {
tooltip: {
- trigger: 'item',
- formatter: '{a}<br>{b}:{c} ({d}%)'
+ trigger: "item",
+ formatter: "{a}<br>{b}:{c} ({d}%)",
},
legend: {
- orient: 'vertical',
+ orient: "vertical",
right: 10,
- y: 'center',
- data: ['鏈福绗�', '鏈墜姣�', '鏈懠鍞�', '杩愯涓潯瑙�', '鏈鏌�', '鏈簲绛�'],
+ y: "center",
+ data: [
+ "鏈福绗�",
+ "鏈墜姣�",
+ "鏈懠鍞�",
+ "杩愯涓潯瑙�",
+ "鏈鏌�",
+ "鏈簲绛�",
+ ],
},
series: [
{
- name: '寮傚父浜嬩欢',
- type: 'pie',
- color: ['#3aa0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b', '#975fe4'],
- radius: ['70%', '90%'],
- //center: ['40%','60%'],
+ name: "寮傚父浜嬩欢",
+ type: "pie",
+ color: [
+ "#3aa0ff",
+ "#36cbcb",
+ "#4dcb73",
+ "#fad337",
+ "#f2637b",
+ "#975fe4",
+ ],
+ radius: ["50%", "70%"],
+ center: ["40%", "40%"],
avoidLabelOverlap: false,
label: {
show: false,
- position: 'center',
- formatter: '{b}\n{c} '
+ position: "center",
+ formatter: "{b}\n{c} ",
+ padding: [10, 0, 0, 0],
},
emphasis: {
label: {
show: true,
- fontSize: '30',
- fontWeight: 'bold'
- }
+ fontSize: "30",
+ fontWeight: "bold",
+ },
},
labelLine: {
- show: false
+ show: false,
},
data: [
- { value: 21, name: '鏈福绗�' },
- { value: 102, name: '鏈墜姣�' },
- { value: 100, name: '鏈懠鍞�' },
- { value: 1, name: '杩愯涓潯瑙�' },
- { value: 7, name: '鏈鏌�' },
- { value: 14, name: '鏈簲绛�' },
- ]
- }
- ]
+ { value: 22, name: "鏈福绗�" },
+ { value: 50, name: "鏈墜姣�" },
+ { value: 18, name: "鏈懠鍞�" },
+ { value: 18, name: "杩愯涓潯瑙�" },
+ { value: 32, name: "鏈鏌�" },
+ { value: 8, name: "鏈簲绛�" },
+ ],
+ },
+ ],
},
optionsOfTaskAssignPie: {
tooltip: {
- trigger: 'item',
- formatter: '{a}<br>{b}:{c} ({d}%)'
+ trigger: "item",
+ formatter: "{a}<br>{b}:{c} ({d}%)",
},
legend: {
- orient: 'vertical',
+ orient: "vertical",
right: 10,
- y: 'center',
- data: ['寮犵', '鏉庡洓', '鐜嬩附', '椹畯瀹�', '鍒樹箖瓒�', '浣曞厜瀹�']
+ y: "center",
+ data: ["寮犵", "鏉庡洓", "鐜嬫��", "娲涙", "鐜嬮攣蹇�", "鍒樺缓鍥�", "鐢版槦"],
},
series: [
{
- name: '寮傚父浜嬩欢',
- type: 'pie',
- color: ['#3aa0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b', '#975fe4'],
- radius: ['70%', '90%'],
- //center: ['40%','60%'],
+ name: "寮傚父浜嬩欢",
+ type: "pie",
+ color: [
+ "#3aa0ff",
+ "#36cbcb",
+ "#4dcb73",
+ "#fad337",
+ "#f2637b",
+ "#975fe4",
+ ],
+ radius: ["40%", "50%"],
+ center: ["40%", "50%"],
avoidLabelOverlap: false,
label: {
- show: false,
- position: 'center',
- formatter: '{b}\n{c} '
+ //灞曠ず鏂囨湰璁剧疆
+ normal: {
+ show: true, //灞曠ず
+ position: "outside", // outside琛ㄧず鏂囨湰鏄剧ず浣嶇疆涓哄閮�
+ },
+ emphasis: {
+ //鏂囨湰鏍峰紡
+ show: true, //灞曠ず
+ textStyle: {
+ //鏂囨湰鏍峰紡
+ fontSize: "14",
+ fontWeight: "600",
+ },
+ },
},
+ labelLine: {
+ //寮曞绾胯缃�
+ normal: {
+ show: true, //寮曞绾挎樉绀�
+ },
+ },
+
emphasis: {
label: {
show: true,
- fontSize: '30',
- fontWeight: 'bold'
- }
+ fontSize: "30",
+ fontWeight: "bold",
+ },
},
- labelLine: {
- show: false
- },
+
data: [
- { value: 127, name: '寮犵' },
- { value: 130, name: '鏉庡洓' },
- { value: 128, name: '鐜嬩附' },
- { value: 129, name: '椹畯瀹�' },
- { value: 126, name: '鍒樹箖瓒�' },
- { value: 112, name: '浣曞厜瀹�' },
- ]
- }
- ]
+ { value: 22, name: "寮犵" },
+ { value: 50, name: "鏉庡洓" },
+ { value: 18, name: "鐜嬫��" },
+ { value: 18, name: "娲涙" },
+ { value: 32, name: "鐜嬮攣蹇�" },
+ { value: 8, name: "鍒樺缓鍥�" },
+ { value: 22, name: "鐢版槦" },
+ ],
+ },
+ ],
},
- rankList: [{
- id: 'jl',
- name: '鏈鸿締鍒嗗叕鍙�',
- val: 121
- }, {
- id: 'ztyj',
- name: '涓搧涓�灞�',
- val: 52
- }, {
- id: 'ztsj',
- name: '涓搧鍥涘眬',
- val: 40
- }, {
- id: 'ztsanj',
- name: '涓搧涓夊眬',
- val: 38
- }, {
- id: 'ztswj',
- name: '涓搧鍗佷簲灞�',
- val: 36
- }, {
- id: 'ztslj',
- name: '涓搧鍗佸叚灞�',
- val: 33
- }, {
- id: 'jtjw',
- name: '浜搧鏈哄姟',
- val: 24
- }, {
- id: 'lhjw',
- name: '璺崕鏈哄姟',
- val: 15
- }, {
- id: 'nhjw',
- name: '鍗楃幆鏈哄姟',
- val: 14
- }],
+ rankList: [
+ {
+ id: "jl",
+ name: "鏈鸿締鍒嗗叕鍙�",
+ val: 121,
+ },
+ {
+ id: "ztyj",
+ name: "涓搧涓�灞�",
+ val: 52,
+ },
+ {
+ id: "ztsj",
+ name: "涓搧鍥涘眬",
+ val: 40,
+ },
+ {
+ id: "ztsanj",
+ name: "涓搧涓夊眬",
+ val: 38,
+ },
+ {
+ id: "ztswj",
+ name: "涓搧鍗佷簲灞�",
+ val: 36,
+ },
+ {
+ id: "ztslj",
+ name: "涓搧鍗佸叚灞�",
+ val: 33,
+ },
+ {
+ id: "jtjw",
+ name: "浜搧鏈哄姟",
+ val: 24,
+ },
+ {
+ id: "lhjw",
+ name: "璺崕鏈哄姟",
+ val: 15,
+ },
+ {
+ id: "nhjw",
+ name: "鍗楃幆鏈哄姟",
+ val: 14,
+ },
+ ],
optionsOfIrregularSum: {
animation: false,
grid: {
top: 0,
left: 0,
bottom: 10,
- containLabel: true
+ containLabel: true,
},
tooltip: {
- trigger: 'axis',
+ trigger: "axis",
axisPointer: {
- type: 'cross',
+ type: "cross",
label: {
- backgroundColor: '#6a7985'
- }
- }
+ backgroundColor: "#6a7985",
+ },
+ },
},
xAxis: {
show: false,
- type: 'category',
+ type: "category",
boundaryGap: false,
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+ data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
label: {
- show: false
- }
+ show: false,
+ },
},
yAxis: {
- type: 'value',
+ type: "value",
show: false,
- boundaryGap: [0, '30%'],
+ boundaryGap: [0, "30%"],
label: {
- show: false
- }
+ show: false,
+ },
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
- type: 'line',
+ type: "line",
smooth: true,
areaStyle: {
- opacity: 0.3
+ opacity: 0.3,
},
- color: '#5dbafd'
- }
- ]
+ color: "#5dbafd",
+ },
+ ],
},
optionsOfIrregularPer: {
animation: false,
@@ -845,106 +1477,118 @@
top: 0,
left: 0,
bottom: 10,
- containLabel: true
+ containLabel: true,
},
tooltip: {
- trigger: 'axis',
+ trigger: "axis",
axisPointer: {
- type: 'cross',
+ type: "cross",
label: {
- backgroundColor: '#6a7985'
- }
- }
+ backgroundColor: "#6a7985",
+ },
+ },
},
xAxis: {
show: false,
- type: 'category',
+ type: "category",
boundaryGap: false,
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+ data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
label: {
- show: false
- }
+ show: false,
+ },
},
yAxis: {
- type: 'value',
+ type: "value",
show: false,
label: {
- show: false
- }
+ show: false,
+ },
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
- type: 'line',
+ type: "line",
smooth: true,
areaStyle: {
- opacity: 0.3
+ opacity: 0.3,
},
- color: '#8adee6'
- }
- ]
+ color: "#8adee6",
+ },
+ ],
},
- irregularTableData: [{ name: '鍚村浗姊�', wg: 2 }, { name: '鐜嬩粊鍏�', wg: 1 }, { name: '缃楀厓鍙�', wg: 1 }],
+ irregularTableData: [
+ { name: "鍚村浗姊�", wg: 8 },
+ { name: "鐜嬩粊鍏�", wg: 6 },
+ { name: "缃楀厓鍙�", wg: 5 },
+ { name: "寮犲織绾�", wg: 3 },
+ { name: "鍒樻江娴�", wg: 1 },
+ ],
PageIndex: 1,
PageSize: 5,
pageSizes: [5, 10],
tableTotal: 0,
- irregularEventType: 'fhdd',
+ irregularEventType: "fhdd",
optionsOfIrregularEventPie: {
tooltip: {
- trigger: 'item',
- formatter: '{a}<br>{b}:{c} ({d}%)'
+ trigger: "item",
+ formatter: "{a}<br>{b}:{c} ({d}%)",
},
legend: {
- orient: 'vertical',
+ orient: "vertical",
right: 10,
- y: 'center',
- data: ['闃叉姢鍦版', '杩涘嚭绔�', '杩囧垎鐩�', '浼氳溅', '涓存椂鎱㈣']
+ y: "center",
+ data: ["闃叉姢鍦版", "杩涘嚭绔�", "杩囧垎鐩�", "浼氳溅", "涓存椂鎱㈣"],
},
series: [
{
- name: '寮傚父浜嬩欢',
- type: 'pie',
- color: ['#3aa0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b', '#975fe4'],
- radius: ['50%', '80%'],
+ name: "寮傚父浜嬩欢",
+ type: "pie",
+ color: [
+ "#3aa0ff",
+ "#36cbcb",
+ "#4dcb73",
+ "#fad337",
+ "#f2637b",
+ "#975fe4",
+ ],
+ radius: ["50%", "80%"],
//center: ['40%','60%'],
avoidLabelOverlap: false,
label: {
show: false,
// position: 'center',
- formatter: '{b}\n{c} '
+ formatter: "{b}\n{c} ",
},
emphasis: {
label: {
show: true,
- fontSize: '20',
- fontWeight: 'bold'
- }
+ fontSize: "20",
+ fontWeight: "bold",
+ },
},
- itemStyle:{
- normal:{
- label:{
- show:true,
- formatter: '{b}\n{c} ',
- labelLine:{
- show:true
- }
- }
- }
+ itemStyle: {
+ normal: {
+ label: {
+ show: true,
+ formatter: "{b}\n{c} ",
+ labelLine: {
+ show: true,
+ },
+ },
+ },
},
// labelLine: {
// show: false
// },
data: [
- { value: 32, name: '闃叉姢鍦版' },
- { value: 55, name: '杩涘嚭绔�' },
- { value: 42, name: '杩囧垎鐩�' },
- { value: 96, name: '浼氳溅' },
- { value: 20, name: '涓存椂鎱㈣' },
-
- ]
- }
- ]
+ { value: 32, name: "闃叉姢鍦版" },
+ { value: 55, name: "杩涘嚭绔�" },
+ { value: 42, name: "杩囧垎鐩�" },
+ { value: 96, name: "浼氳溅" },
+ { value: 20, name: "涓存椂鎱㈣" },
+ ],
+ },
+ ],
},
searchTaskAssignTime: [],
optionsOfTaskAssign: {
@@ -955,78 +1599,88 @@
containLabel: true,
},
tooltip: {
- trigger: 'axis',
+ trigger: "axis",
axisPointer: {
- type: 'cross',
+ type: "cross",
label: {
- backgroundColor: '#6a7985'
- }
- }
+ backgroundColor: "#6a7985",
+ },
+ },
},
xAxis: {
- type: 'category',
+ type: "category",
boundaryGap: false,
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+ data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
label: {
- show: false
- }
+ show: false,
+ },
},
yAxis: {
- type: 'value',
+ type: "value",
axisLine: {
- show: false
+ show: false,
},
label: {
- show: false
- }
+ show: false,
+ },
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
- type: 'line',
+ type: "line",
smooth: true,
areaStyle: {
- opacity: 0.3
+ opacity: 0.3,
},
- color: '#5dbafd'
- }
- ]
+ color: "#5dbafd",
+ },
+ ],
},
searchTaskAnalyzeTime: [new Date(2021, 1, 22), new Date(2021, 2, 1)],
optionsOfTaskAnalyzeBar: {
- color: ['#fbd438', '#4fcb74'],
+ color: ["#DC6363", "#E0E4ED"],
dataset: {
source: [
- ['mon', 44, 83],
- ['tue', 47, 83],
- ['wed', 43, 85],
- ['thu', 44, 85],
- ['fri', 46, 80],
- ['sat', 12, 40],
- ['sun', 9, 34],
- ]
+ ["mon", 44, 83],
+ ["tue", 47, 83],
+ ["wed", 43, 85],
+ ["thu", 44, 85],
+ ["fri", 46, 80],
+ ["sat", 12, 40],
+ ["sun", 9, 34],
+ ],
},
legend: {
- left: 0
+ x: "right",
},
tooltip: {
- trigger: 'axis',
+ trigger: "axis",
axisPointer: {
//type: 'shadow'
},
},
grid: {
+ top: "9%",
left: 10,
right: 10,
- bottom: '3%',
- containLabel: true
+ bottom: "7%",
+ containLabel: true,
},
xAxis: [
{
- type: 'category',
+ type: "category",
//data: ['鏈福绗�', '鏈墜姣�', '鏈懠鍞�', '杩愯涓潯瑙�', '鏈鏌�', '鏈簲绛�'],
axisTick: {
- alignWithLabel: true
+ //y杞村埢搴︾嚎
+ alignWithLabel: true,
+
+ show: false,
+ },
+ axisLine: {
+ lineStyle: {
+ color: "rbg(241, 241, 240)",
+ width: 1, //杩欓噷鏄负浜嗙獊鍑烘樉绀哄姞涓婄殑
+ },
},
// axisLine: {
// lineStyle: {
@@ -1036,93 +1690,351 @@
// nameTextStyle: {
// color: "#333"
// }
- }
+ },
],
yAxis: [
{
- type: 'value',
+ type: "value",
axisLine: {
- show: false
- }
- }
+ show: false,
+ },
+ axisTick: {
+ //y杞村埢搴︾嚎
+ show: false,
+ },
+ splitLine: {
+ //缃戞牸绾�
+ lineStyle: {
+ color: "rgb(230, 230, 230)",
+ type: "dashed", //璁剧疆缃戞牸绾跨被鍨� dotted锛氳櫄绾� solid:瀹炵嚎
+ },
+ show: true, //闅愯棌鎴栨樉绀�
+ },
+ },
],
series: [
{
- name: '鏈夊紓甯�',
- type: 'bar',
- stack: '寮傚父',
- barWidth: 20,
+ name: "鏈夊紓甯�",
+ type: "bar",
+ stack: "寮傚父",
+ barWidth: 16,
+
//data: [270, 500, 300, 430, 620, 540]
},
{
- name: '鏃犲紓甯�',
- type: 'bar',
- stack: '寮傚父',
- barWidth: 20,
+ name: "鏃犲紓甯�",
+ type: "bar",
+ stack: "寮傚父",
+ barWidth: 16,
+ itemStyle: {
+ normal: {
+ barBorderRadius: [8, 8, 0, 0],
+ },
+ },
//data: [270, 500, 300, 430, 620, 540]
- }
- ]
+ },
+ ],
},
taskAnalyzeCaseTableData: [
- { name: '寮犵', rwl: 127, fxl: 127, pdwgl: 44, pdwglv: '34.65%', wcl: '100%' },
- { name: '鏉庡洓', rwl: 130, fxl: 129, pdwgl: 47, pdwglv: '36.43%', wcl: '99.23%' },
- { name: '鐜嬩附', rwl: 128, fxl: 127, pdwgl: 43, pdwglv: '33.86%', wcl: '99.22%' },
- { name: '椹畯瀹�', rwl: 129, fxl: 125, pdwgl: 44, pdwglv: '35.2%', wcl: '96.90%' },
- { name: '鍒樹箖瓒�', rwl: 126, fxl: 126, pdwgl: 46, pdwglv: '33.50%', wcl: '100%' },
- { name: '浣曞厜瀹�', rwl: 112, fxl: 112, pdwgl: 12, pdwglv: '10.71%', wcl: '100%' }],
+ {
+ name: "寮犵",
+ rwl: 127,
+ fxl: 127,
+ pdwgl: 44,
+ pdwglv: "34.65%",
+ wcl: "100%",
+ },
+ {
+ name: "鏉庡洓",
+ rwl: 130,
+ fxl: 129,
+ pdwgl: 47,
+ pdwglv: "36.43%",
+ wcl: "99.23%",
+ },
+ {
+ name: "鐜嬩附",
+ rwl: 128,
+ fxl: 127,
+ pdwgl: 43,
+ pdwglv: "33.86%",
+ wcl: "99.22%",
+ },
+ {
+ name: "椹畯瀹�",
+ rwl: 129,
+ fxl: 125,
+ pdwgl: 44,
+ pdwglv: "35.2%",
+ wcl: "96.90%",
+ },
+ {
+ name: "鍒樹箖瓒�",
+ rwl: 126,
+ fxl: 126,
+ pdwgl: 46,
+ pdwglv: "33.50%",
+ wcl: "100%",
+ },
+ {
+ name: "浣曞厜瀹�",
+ rwl: 112,
+ fxl: 112,
+ pdwgl: 12,
+ pdwglv: "10.71%",
+ wcl: "100%",
+ },
+ ],
jsTreeNodes: [],
- }
+ option1: {
+ tooltip: {
+ show: false,
+ },
+ legend: {
+ show: false,
+ },
+ series: [
+ {
+ name: "Access From",
+ type: "pie",
+ left: 5,
+ top: 5,
+ radius: ["40%", "70%"],
+ avoidLabelOverlap: false,
+ label: {
+ show: false,
+ position: "center",
+ },
+ emphasis: {
+ label: {
+ show: false,
+ },
+ },
+ labelLine: {
+ show: false,
+ },
+ data: [
+ { value: 25, name: "Search Engine" },
+ { value: 75, name: "Direct" },
+ ],
+ },
+ ],
+ color: ["#f8af4d", "rgb(211, 220, 239)"],
+ },
+ option2: {
+ top: 0,
+ left: 0,
+ grid: {
+ x: 5,
+ y: 15,
+ x2: 35,
+ y2: 40,
+ },
+ xAxis: {
+ type: "category",
+ boundaryGap: false,
+ show: false,
+ data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+ },
+ yAxis: {
+ show: false,
+ type: "value",
+ },
+ series: [
+ {
+ data: [0, 332, 290, 934, 529, 1330, 0],
+ type: "line",
+ smooth: true,
+ lineStyle: {
+ color: "#213EB4",
+ },
+ areaStyle: {
+ color: "#213EB4",
+ },
+ showSymbol: false,
+ },
+ ],
+ },
+ option3: {
+ top: 0,
+ left: 0,
+ grid: {
+ x: 5,
+ y: 15,
+ x2: 35,
+ y2: 40,
+ },
+ xAxis: {
+ type: "category",
+ boundaryGap: false,
+ show: false,
+ data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+ },
+ yAxis: {
+ show: false,
+ type: "value",
+ },
+ series: [
+ {
+ data: [282, 332, 290, 434, 229, 530, 332],
+ type: "line",
+ smooth: true,
+ lineStyle: {
+ color: "#26d4b4",
+ },
+ showSymbol: false,
+ },
+ {
+ data: [282, 332, 290, 434, 229, 530, 332],
+ type: "bar",
+ barWidth: 10,
+ itemStyle: {
+ //閫氬父鎯呭喌涓嬶細
+ normal: {
+ barBorderRadius: [5, 5, 0, 0],
+
+ //姣忎釜鏌卞瓙鐨勯鑹插嵆涓篶olorList鏁扮粍閲岀殑姣忎竴椤癸紝濡傛灉鏌卞瓙鏁扮洰澶氫簬colorList鐨勯暱搴︼紝鍒欐煴瀛愰鑹插惊鐜娇鐢ㄨ鏁扮粍涓殑棰滆壊
+ color: function (params) {
+ var colorList = [
+ "#26D4B4",
+ "rgb(184, 241, 230)",
+ "#26D4B4",
+ "rgb(184, 241, 230)",
+ "#26D4B4",
+ "rgb(184, 241, 230)",
+ "#26D4B4",
+ "rgb(184, 241, 230)",
+ ];
+ return colorList[params.dataIndex];
+ },
+ },
+ //榧犳爣鎮仠鏃讹細
+ emphasis: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: "rgba(0, 0, 0, 0.5)",
+ },
+ },
+ },
+ ],
+ },
+ option4: {
+ top: 0,
+ left: 0,
+ grid: {
+ x: 5,
+ y: 15,
+ x2: 35,
+ y2: 40,
+ },
+ xAxis: {
+ type: "category",
+ boundaryGap: false,
+ show: false,
+ data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+ },
+ yAxis: {
+ show: false,
+ type: "value",
+ },
+ series: [
+ {
+ data: [82, 332, 290, 934, 529, 1330, 132],
+
+ type: "line",
+ smooth: true,
+ lineStyle: {
+ color: "#ed663e",
+ },
+ showSymbol: false,
+ },
+ {
+ data: [82, 332, 290, 934, 529, 1330, 132],
+ barWidth: 10,
+ type: "bar",
+ itemStyle: {
+ //閫氬父鎯呭喌涓嬶細
+ normal: {
+ barBorderRadius: [5, 5, 0, 0],
+ //姣忎釜鏌卞瓙鐨勯鑹插嵆涓篶olorList鏁扮粍閲岀殑姣忎竴椤癸紝濡傛灉鏌卞瓙鏁扮洰澶氫簬colorList鐨勯暱搴︼紝鍒欐煴瀛愰鑹插惊鐜娇鐢ㄨ鏁扮粍涓殑棰滆壊
+ color: function (params) {
+ var colorList = [
+ "rgb(247, 185, 166)",
+ "#ed663e",
+ "rgb(247, 185, 166)",
+ "#ed663e",
+ "rgb(247, 185, 166)",
+ "#ed663e",
+ "rgb(247, 185, 166)",
+ "#ed663e",
+ "rgb(247, 185, 166)",
+ ];
+ return colorList[params.dataIndex];
+ },
+ },
+ //榧犳爣鎮仠鏃讹細
+ emphasis: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: "rgba(0, 0, 0, 0.5)",
+ },
+ },
+ },
+ ],
+ },
+ };
},
methods: {
- refreshShoubiNum(){
- let n = sessionStorage.getItem("shoubiNum")
- this.optionsOfHidDangerBar.series[0].data[1].value = +n
+ refreshShoubiNum() {
+ let n = sessionStorage.getItem("shoubiNum");
+ this.optionsOfHidDangerBar.series[0].data[1].value = +n;
},
- initTabContent(tab){
- if(tab.name == "hidDanderStatistic"){
- this.actHidDanderStatiscChart = 'bar'
- }else{
- this.actHidDanderTrendChart = 'line'
+ initTabContent(tab) {
+ if (tab.name == "hidDanderStatistic") {
+ this.actHidDanderStatiscChart = "bar";
+ } else {
+ this.actHidDanderTrendChart = "line";
}
},
- checkTabInSwipe (tab) {
-
+ checkTabInSwipe(tab) {},
+ checkIrregularEventType(type) {},
+ taskAnalyzeCase(time) {},
+ taskAnalyzeStatics(time) {},
+ partAssignstatics(time) {},
+ taskAssignStatics(time) {},
+ renderIrregularMenTable() {},
+ handleTableSizeChange() {},
+ timeShortChange(time) {},
+ irregularMenStatistic(time) {},
+ irregularEventStatistic(time) {},
+ click1() {
+ this.$refs["timepick1"].focus();
},
- checkIrregularEventType (type) {
-
+ click2() {
+ this.$refs["timepick2"].focus();
},
- taskAnalyzeCase (time) {
-
+ click3() {
+ this.$refs["timepick3"].focus();
},
- taskAnalyzeStatics (time) {
-
+ click4() {
+ this.$refs["timepick4"].focus();
},
- partAssignstatics (time) {
-
+ click5() {
+ this.$refs["timepick5"].focus();
},
- taskAssignStatics (time) {
-
+ click6() {
+ this.$refs["timepick6"].focus();
},
- renderIrregularMenTable () {
-
- },
- handleTableSizeChange () {
-
- },
- timeShortChange (time) {
-
- },
- irregularMenStatistic (time) {
-
- },
- irregularEventStatistic (time) {
-
- }
},
-
-}
-
-
+ watch: {
+ actCardTab(val) {
+ this.$emit(
+ "breadcrumb2Update",
+ val == "dataStatistic" ? "鏁版嵁缁熻鍒嗘瀽" : "浠诲姟缁熻鍒嗘瀽"
+ );
+ },
+ },
+};
// title : {
// /* text: '鏌愮珯鐐圭敤鎴疯闂潵婧�',
@@ -1147,28 +2059,35 @@
// center: ['40%', '60%'],
// data: data,
// /*鍦╯eries涓坊鍔爄temStyle鍗冲彲鐩磋鏄剧ず楗煎瀷鏁板��*/
-// itemStyle:{
-// normal:{
-// label:{
-// show: true,
-// formatter: '{b} : {c} ({d}%)'
-// },
-// labelLine :{show:true}
-// }
-// }
+// itemStyle:{
+// normal:{
+// label:{
+// show: true,
+// formatter: '{b} : {c} ({d}%)'
+// },
+// labelLine :{show:true}
+// }
+// }
// }
// ]
-
+
// };
// myChart_qyhhmd.setOption(option,true)
</script>
<style lang="scss">
-
+* {
+ color: #425277;
+}
.guide-index {
- background-color: #f0f2f5;
+ background-color: #f0f2f5;
+ .el-tabs__nav-wrap::after {
+ width: 99.6%;
+ left: 0.2%;
+ }
.tab-menu {
- background-color: #fff;
+ background-color: #fff;
+ border-radius: 10px;
height: 60px;
}
.el-progress-bar__outer {
@@ -1194,10 +2113,10 @@
border-right-color: transparent;
}
}
- .defined-progress{
+ .defined-progress {
position: relative;
- &:before{
- content: '';
+ &:before {
+ content: "";
position: absolute;
width: 2px;
height: 4px;
@@ -1205,8 +2124,8 @@
top: -6px;
right: -5px;
}
- &:after{
- content: '';
+ &:after {
+ content: "";
position: absolute;
width: 2px;
height: 4px;
@@ -1223,19 +2142,128 @@
}
}
.tab-content {
- // padding: 18px 12px;
- padding: 20px;
+ // padding: 18px 12px;
+ padding-top: 20px;
.card-view {
display: flex;
- margin-right: -20px;
- // margin-left: -2px;
+ // margin-left: -2px;
.el-card {
+ height: 190px;
flex: 1;
margin-right: 20px;
text-align: left;
+ border-radius: 10px;
+
+ &:last-child {
+ margin-right: 0;
+ }
+
.el-card__body {
+ display: flex;
+ }
+
+ .left {
+ .title {
+ .icon {
+ font-size: 15px;
+ margin-right: 15px;
+ color: #f8af4d;
+ }
+ .icon2 {
+ color: #213eb4;
+ }
+ .icon3 {
+ margin-right: 15px;
+ width: 15px;
+ height: 15px;
+ }
+ .info {
+ font-size: 12px;
+ }
+ }
+ .weekNum {
+ font-size: 36px;
+ font-size: 700;
+ margin: 17px 0 17px 30px;
+ }
+
+ .mid {
+ display: flex;
+ align-items: center;
+ .circle {
+ margin-right: 18px;
+ margin-left: 5px;
+ width: 0;
+ height: 0;
+ border: 3px solid #f8af4d;
+ border-radius: 3px;
+ }
+
+ .circle2 {
+ margin-right: 18px;
+ margin-left: 5px;
+ width: 0;
+ height: 0;
+ border: 3px solid #213eb4;
+ border-radius: 3px;
+ }
+ .circle3 {
+ margin-right: 18px;
+ margin-left: 5px;
+ width: 0;
+ height: 0;
+ border: 3px solid #26d4b4;
+ border-radius: 3px;
+ }
+ .circle4 {
+ margin-right: 18px;
+ margin-left: 5px;
+ width: 0;
+ height: 0;
+ border: 3px solid #ed663e;
+ border-radius: 3px;
+ }
+ }
+
+ .dayNum {
+ font-size: 20px;
+ margin: 13px 0 0 36px;
+ }
+ }
+
+ .right {
+ position: relative;
+ width: 170px;
+ #chart1,
+ #chart2,
+ #chart3,
+ #chart4 {
+ margin-top: 40px;
+ margin-left: 30px;
+ width: 120px;
+ height: 120px;
+ }
+ #chart2,
+ #chart3,
+ #chart4 {
+ height: 100%;
+ width: 100%;
+ }
+
+ .outCircle {
+ position: absolute;
+ top: 51px;
+ left: 41px;
+ width: 103px;
+ height: 103px;
+ border-radius: 50%;
+ border: 1px solid #f8af4d;
+ }
+ }
+
+ /* .el-card__body {
padding-bottom: 13px;
}
.title {
@@ -1283,34 +2311,52 @@
.name {
margin-right: 20px;
}
- }
+ } */
}
}
.part {
- padding:20px 0;
+ padding: 20px 0;
margin-bottom: 20px;
- .part-top{
+ .part-top {
background-color: #fff;
}
- .part-bottom{
+ .part-bottom {
+ padding: 0 0 35px 35px;
+ text-align: left;
background-color: #fff;
- // padding: 0 30px 30px 30px;
- padding: 0 0 25px 0;
+ box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
+ border-radius: 10px;
+ height: 624px;
+ overflow: hidden;
- .tab-detail{
- margin: 0 25px;
+ .bottom-head {
+ height: 60px;
+ line-height: 60px;
+ text-align: left;
+ .title {
+ font-weight: bold;
+ font-size: 15px;
+ color: #2c3e7a;
+ }
+ }
+
+ .tab-swiper {
+ margin-top: 20px;
+ }
+
+ .tab-detail {
+ margin: 0 25px;
}
}
.header-width-tab {
display: flex;
justify-content: space-between;
- margin-bottom: 12px;
+ margin-bottom: 12px;
.rt {
display: flex;
padding-top: 20px;
- margin-right: 25px;
-
+ margin-right: 25px;
}
}
.statics {
@@ -1356,19 +2402,492 @@
}
}
.lt {
+ overflow: hidden;
+ padding: 0 35px 35px 35px;
text-align: left;
- flex: 1;
- padding: 3px 15px 15px 18px;
- background-color: #fff;
- margin-right: 18px;
+ flex: 6;
+ height: 350px;
+ background-color: #fff;
+ margin-right: 18px;
+ box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
+ border-radius: 10px;
+ .lt-head {
+ display: flex;
+ height: 60px;
+ align-items: center;
+ justify-content: space-between;
+ .title {
+ font-weight: bold;
+ font-size: 15px;
+ color: #2c3e7a;
+ }
+
+ .control {
+ display: flex;
+ .icon {
+ cursor: pointer;
+ }
+ .time {
+ text-align: center;
+ font-size: 12px;
+ margin-left: 20px;
+ width: 40px;
+ height: 18px;
+ border-radius: 4px;
+ cursor: pointer;
+ &.active {
+ background: #2d52d7;
+ color: #fff;
+ opacity: 0.63;
+ }
+ }
+ }
+
+ .bottom {
+ margin-top: 37px;
+ display: flex;
+
+ .box {
+ overflow: hidden;
+ height: 250px;
+ width: 600px;
+ padding-right: 33px;
+ border-right: 1px solid #c6d2e4;
+
+ .box-top {
+ display: flex;
+ justify-content: space-between;
+ .title {
+ color: #425277;
+ }
+ .control {
+ display: flex;
+ justify-content: center;
+ position: relative;
+
+ .chart {
+ width: 46px;
+ height: 20px;
+ cursor: pointer;
+
+ &:first-child {
+ border: 1px solid #6297f2;
+ background-color: #fff;
+ border-radius: 4px;
+ position: absolute;
+ top: 0;
+ left: -44px;
+ }
+
+ &:last-child {
+ border-top: 1px solid #6297f2;
+ border-right: 1px solid #6297f2;
+ border-bottom: 1px solid #6297f2;
+ border-radius: 0 4px 4px 0;
+ }
+
+ &.active {
+ background-color: #6297f2;
+ color: #fff;
+ }
+ }
+ }
+ }
+
+ .echart {
+ height: 250px;
+ }
+ }
+
+ .middle {
+ width: 670px;
+ padding-left: 33px;
+ }
+
+ .right {
+ width: 250px;
+ flex: 1;
+ text-align: left;
+ background-color: #fff;
+ padding: 0 15px 15px 35px;
+ .header {
+ display: flex;
+ margin-bottom: 10px;
+ .title {
+ font-size: 16px;
+ margin-right: 20px;
+ font-weight: bold;
+ }
+ }
+ .rank-list {
+ padding: 10px 0;
+ max-height: 230px;
+ overflow-y: hidden;
+ .rank-item {
+ height: 36px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ font-size: 14px;
+ color: #666;
+ .rank-index {
+ width: 32px;
+ height: 24px;
+ margin-right: 20px;
+ line-height: 24px;
+ border-radius: 50%;
+ text-align: center;
+ color: #cb2839;
+ font-size: 12px;
+ &.first {
+ background-image: url(/images/shuohuang/缁�.png);
+ font-size: 15px;
+ font-weight: 700;
+ color: #cb2839;
+ }
+ &.second {
+ background-image: url(/images/shuohuang/缁�.png);
+ font-size: 15px;
+ font-weight: 700;
+ color: #cb2839;
+ }
+ &.third {
+ background-image: url(/images/shuohuang/缁�.png);
+ font-size: 15px;
+ font-weight: 700;
+ color: #cb2839;
+ }
+ }
+ .name {
+ width: 200px;
+ .up {
+ font-size: 12px;
+ color: #cb2839;
+ }
+ .down {
+ font-size: 12px;
+ color: #2bb15c;
+ }
+ }
+ .val {
+ width: 100px;
+ .often {
+ display: inline-block;
+ width: 18px;
+ height: 18px;
+ font-size: 12px;
+ background: #2d52d7;
+ color: #fff;
+ line-height: 18px;
+ text-align: center;
+ border-radius: 2px;
+ }
+
+ .new {
+ display: inline-block;
+ width: 18px;
+ height: 18px;
+ font-size: 12px;
+ background: #fe3c56;
+ color: #fff;
+ line-height: 18px;
+ text-align: center;
+ border-radius: 2px;
+ }
+ }
+ }
+ }
+ }
+ }
+
+ .el-divider {
+ margin: 0;
+ }
+ }
+
+ .lt-bottom {
+ display: flex;
+ padding-top: 35px;
+
+ .lt-bottom-left {
+ width: 133px;
+ text-align: center;
+ .val {
+ font-size: 25px;
+ font-weight: bold;
+ margin-top: 20px;
+ }
+ .ratio {
+ margin: 0 auto;
+ margin-bottom: 54px;
+ width: 46px;
+ height: 22px;
+ background: #f4f6f9;
+ font-size: 15px;
+ text-align: center;
+ }
+ }
+
+ .lt-bottom-mid {
+ flex: 1;
+ .lt-chart1 {
+ height: 110px;
+ }
+ .lt-chart2 {
+ height: 110px;
+ }
+ }
+
+ .lt-bottom-right {
+ width: 340px;
+ .el-table__row {
+ td,
+ th {
+ padding: 2px;
+ }
+ }
+
+ .el-pagination {
+ display: flex;
+ justify-content: right;
+ margin-top: 11px;
+ }
+ }
+ }
}
.rt {
+ padding: 25px 40px 10px 30px;
+ overflow: hidden;
text-align: left;
- background-color: #fff;
- padding: 3px 15px 15px 18px;
- width: 400px;
- .header {
+ flex: 4;
+ background-color: #fff;
+ padding: 3px 30px 15px 30px;
+ height: 351px;
+ box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
+ border-radius: 10px;
+
+ .rt-head {
+ display: flex;
+ height: 60px;
+ align-items: center;
+ justify-content: space-between;
+ .title {
+ font-weight: bold;
+ font-size: 15px;
+ color: #2c3e7a;
+ }
+
+ .control {
+ display: flex;
+ .icon {
+ cursor: pointer;
+ }
+ .time {
+ text-align: center;
+ font-size: 12px;
+ margin-left: 20px;
+ width: 40px;
+ height: 18px;
+ border-radius: 4px;
+ cursor: pointer;
+ &.active {
+ background: #2d52d7;
+ color: #fff;
+ opacity: 0.63;
+ }
+ }
+ }
+
+ .bottom {
+ margin-top: 37px;
+ display: flex;
+
+ .box {
+ overflow: hidden;
+ height: 250px;
+ width: 600px;
+ padding-right: 33px;
+ border-right: 1px solid #c6d2e4;
+
+ .box-top {
+ display: flex;
+ justify-content: space-between;
+ .title {
+ color: #425277;
+ }
+ .control {
+ display: flex;
+ justify-content: center;
+ position: relative;
+
+ .chart {
+ width: 46px;
+ height: 20px;
+ cursor: pointer;
+
+ &:first-child {
+ border: 1px solid #6297f2;
+ background-color: #fff;
+ border-radius: 4px;
+ position: absolute;
+ top: 0;
+ left: -44px;
+ }
+
+ &:last-child {
+ border-top: 1px solid #6297f2;
+ border-right: 1px solid #6297f2;
+ border-bottom: 1px solid #6297f2;
+ border-radius: 0 4px 4px 0;
+ }
+
+ &.active {
+ background-color: #6297f2;
+ color: #fff;
+ }
+ }
+ }
+ }
+
+ .echart {
+ height: 250px;
+ }
+ }
+
+ .middle {
+ width: 670px;
+ padding-left: 33px;
+ }
+
+ .right {
+ width: 250px;
+ flex: 1;
+ text-align: left;
+ background-color: #fff;
+ padding: 0 15px 15px 35px;
+ .header {
+ display: flex;
+ margin-bottom: 10px;
+ .title {
+ font-size: 16px;
+ margin-right: 20px;
+ font-weight: bold;
+ }
+ }
+ .rank-list {
+ padding: 10px 0;
+ max-height: 230px;
+ overflow-y: hidden;
+ .rank-item {
+ height: 36px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ font-size: 14px;
+ color: #666;
+ .rank-index {
+ width: 32px;
+ height: 24px;
+ margin-right: 20px;
+ line-height: 24px;
+ border-radius: 50%;
+ text-align: center;
+ color: #cb2839;
+ font-size: 12px;
+ &.first {
+ background-image: url(/images/shuohuang/缁�.png);
+ font-size: 15px;
+ font-weight: 700;
+ color: #cb2839;
+ }
+ &.second {
+ background-image: url(/images/shuohuang/缁�.png);
+ font-size: 15px;
+ font-weight: 700;
+ color: #cb2839;
+ }
+ &.third {
+ background-image: url(/images/shuohuang/缁�.png);
+ font-size: 15px;
+ font-weight: 700;
+ color: #cb2839;
+ }
+ }
+ .name {
+ width: 200px;
+ .up {
+ font-size: 12px;
+ color: #cb2839;
+ }
+ .down {
+ font-size: 12px;
+ color: #2bb15c;
+ }
+ }
+ .val {
+ width: 100px;
+ .often {
+ display: inline-block;
+ width: 18px;
+ height: 18px;
+ font-size: 12px;
+ background: #2d52d7;
+ color: #fff;
+ line-height: 18px;
+ text-align: center;
+ border-radius: 2px;
+ }
+
+ .new {
+ display: inline-block;
+ width: 18px;
+ height: 18px;
+ font-size: 12px;
+ background: #fe3c56;
+ color: #fff;
+ line-height: 18px;
+ text-align: center;
+ border-radius: 2px;
+ }
+ }
+ }
+ }
+ }
+ }
+
+ .el-divider {
+ margin: 0;
+ }
+ }
+
+ .rt-bottom {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ .left {
+ overflow: hidden;
+ background: #f4f6f9;
+ box-shadow: 0px 3px 6px rgba(52, 109, 209, 0.66);
+ border-radius: 7px;
+ .left-item {
+ width: 91px;
+ height: 36px;
+ line-height: 36px;
+ border-left: 6px solid #f4f6f9;
+ padding-left: 7px;
+ cursor: pointer;
+
+ &.active {
+ border-color: #2d52d7;
+ background: rgb(178, 192, 238);
+ }
+ }
+ }
+ }
+
+ /* .header {
display: flex;
.title {
font-size: 16px;
@@ -1415,55 +2934,430 @@
width: 100px;
}
}
- }
+ } */
}
}
.flex-box {
- .lt,
- .rt,
.gt {
flex: 1;
width: auto;
}
}
.tab-swiper {
- width: calc(100vw - 367px);
- margin: 0 0 20px 20px;
+ width: calc(100vw - 367px);
+ margin: 0 0 20px 20px;
+ }
+
+ .part-head {
+ overflow: hidden;
+ padding: 0 35px 35px 35px;
+ margin-bottom: 22px;
+ height: 376px;
+ background: #ffffff;
+ box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
+ border-radius: 10px;
+ .top {
+ display: flex;
+ height: 60px;
+ align-items: center;
+ justify-content: space-between;
+ .title {
+ font-weight: bold;
+ font-size: 15px;
+ color: #2c3e7a;
+ }
+
+ .control {
+ display: flex;
+ .icon {
+ cursor: pointer;
+ }
+ .time {
+ font-size: 12px;
+ margin-left: 20px;
+ width: 40px;
+ height: 18px;
+ border-radius: 4px;
+ cursor: pointer;
+ &.active {
+ background: #2d52d7;
+ color: #fff;
+ opacity: 0.63;
+ }
+ }
+ }
+ }
+
+ .bottom {
+ margin-top: 37px;
+ display: flex;
+
+ .box {
+ overflow: hidden;
+ height: 250px;
+ width: 600px;
+ padding-right: 33px;
+ border-right: 1px solid #c6d2e4;
+
+ .box-top {
+ display: flex;
+ justify-content: space-between;
+ .title {
+ color: #425277;
+ }
+ .control {
+ display: flex;
+ justify-content: center;
+ position: relative;
+
+ .chart {
+ width: 46px;
+ height: 20px;
+ cursor: pointer;
+
+ &:first-child {
+ border: 1px solid #6297f2;
+ background-color: #fff;
+ border-radius: 4px;
+ position: absolute;
+ top: 0;
+ left: -44px;
+ }
+
+ &:last-child {
+ border-top: 1px solid #6297f2;
+ border-right: 1px solid #6297f2;
+ border-bottom: 1px solid #6297f2;
+ border-radius: 0 4px 4px 0;
+ }
+
+ &.active {
+ background-color: #6297f2;
+ color: #fff;
+ }
+ }
+ }
+ }
+
+ .echart {
+ height: 250px;
+ }
+ }
+
+ .middle {
+ width: 670px;
+ padding-left: 33px;
+ }
+
+ .right {
+ width: 250px;
+ flex: 1;
+ text-align: left;
+ background-color: #fff;
+ padding: 0 15px 15px 35px;
+ .header {
+ display: flex;
+ margin-bottom: 10px;
+ .title {
+ font-size: 16px;
+ margin-right: 20px;
+ font-weight: bold;
+ }
+ }
+ .rank-list {
+ padding: 10px 0;
+ max-height: 230px;
+ overflow-y: hidden;
+ .rank-item {
+ height: 36px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ font-size: 14px;
+ color: #666;
+ .rank-index {
+ width: 32px;
+ height: 24px;
+ margin-right: 20px;
+ line-height: 24px;
+ border-radius: 50%;
+ text-align: center;
+ color: #cb2839;
+ font-size: 12px;
+ &.first {
+ background-image: url(/images/shuohuang/缁�.png);
+ font-size: 15px;
+ font-weight: 700;
+ color: #cb2839;
+ }
+ &.second {
+ background-image: url(/images/shuohuang/缁�.png);
+ font-size: 15px;
+ font-weight: 700;
+ color: #cb2839;
+ }
+ &.third {
+ background-image: url(/images/shuohuang/缁�.png);
+ font-size: 15px;
+ font-weight: 700;
+ color: #cb2839;
+ }
+ }
+ .name {
+ width: 200px;
+ .up {
+ font-size: 12px;
+ color: #cb2839;
+ }
+ .down {
+ font-size: 12px;
+ color: #2bb15c;
+ }
+ }
+ .val {
+ width: 100px;
+ .often {
+ display: inline-block;
+ width: 18px;
+ height: 18px;
+ font-size: 12px;
+ background: #2d52d7;
+ color: #fff;
+ line-height: 18px;
+ text-align: center;
+ border-radius: 2px;
+ }
+
+ .new {
+ display: inline-block;
+ width: 18px;
+ height: 18px;
+ font-size: 12px;
+ background: #fe3c56;
+ color: #fff;
+ line-height: 18px;
+ text-align: center;
+ border-radius: 2px;
+ }
+ }
+ }
+ }
+ }
+ }
}
}
- .general-view {
- display: flex;
- padding: 20px 50px;
- .indicator {
+
+ .part2 {
+ .part2-top {
+ .lt {
+ display: flex;
+ flex-direction: column;
+ width: 252px;
+ height: 348px;
+ background: #ffffff;
+ box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
+ border-radius: 10px;
+
+ .indicator {
+ flex: 1;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 38px;
+ img {
+ width: 50px;
+ height: 50px;
+ }
+ .content {
+ width: 100px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ .indicator-title {
+ font-size: 14px;
+ }
+ .indicator-val {
+ font-size: 36px;
+ font-weight: 800;
+ }
+ }
+ }
+ }
+
+ .mid {
+ margin: 0 15px 0 27px;
+ height: 348px;
+ background: #ffffff;
+ box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
+ border-radius: 10px;
+ overflow: hidden;
+ padding: 0 35px 35px 35px;
+ margin-bottom: 22px;
+ flex: 1;
+ .mid-head {
+ display: flex;
+ height: 60px;
+ align-items: center;
+ justify-content: space-between;
+ .title {
+ font-weight: bold;
+ font-size: 15px;
+ color: #2c3e7a;
+ }
+
+ .control {
+ display: flex;
+ .icon {
+ cursor: pointer;
+ }
+ .time {
+ font-size: 12px;
+ margin-left: 20px;
+ width: 40px;
+ height: 18px;
+ border-radius: 4px;
+ cursor: pointer;
+ &.active {
+ background: #2d52d7;
+ color: #fff;
+ opacity: 0.63;
+ }
+ }
+ }
+ }
+
+ .mid-bottom {
+ margin-top: 10px;
+ height: 260px;
+ }
+ }
+
+ .rt {
+ width: 474px;
+ height: 348px;
+ padding: 0 0 35px 35px;
+ text-align: left;
+ background-color: #fff;
+ box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
+ border-radius: 10px;
+ overflow: hidden;
+
+ .bottom-head {
+ height: 60px;
+ line-height: 60px;
+ text-align: left;
+ .title {
+ font-weight: bold;
+ font-size: 15px;
+ color: #2c3e7a;
+ }
+ }
+
+ .rt-chart {
+ width: 200px;
+ height: 200px;
+ }
+ }
+ }
+
+ .part2-mid {
+ height: 351px;
+ background: #ffffff;
+ box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
+ border-radius: 10px;
+ overflow: hidden;
+ padding: 0 35px 35px 35px;
+ margin-bottom: 22px;
flex: 1;
- display: flex;
- justify-content: center;
- align-items: center;
- position: relative;
- &:not(.lastOne):after {
- content: '';
- width: 1px;
- height: 57px;
- background: #e9e9e9;
- position: absolute;
- right: 0;
- top: 50%;
- transform: translateY(-50%);
+ .mid-head {
+ display: flex;
+ height: 60px;
+ align-items: center;
+ justify-content: space-between;
+ .title {
+ font-weight: bold;
+ font-size: 15px;
+ color: #2c3e7a;
+ }
+
+ .control {
+ display: flex;
+ .icon {
+ cursor: pointer;
+ }
+ .time {
+ font-size: 12px;
+ margin-left: 20px;
+ width: 40px;
+ height: 18px;
+ border-radius: 4px;
+ cursor: pointer;
+ &.active {
+ background: #2d52d7;
+ color: #fff;
+ opacity: 0.63;
+ }
+ }
+ }
}
- .icon .iconfont {
- font-size: 40px;
- margin-right: 24px;
+ .mid-bottom {
+ margin-top: 10px;
+ height: 280px;
}
- .indicator-title {
- font-size: 14px;
- color: #999;
- margin-bottom: 15px;
- }
- .indicator-val {
- font-size: 24px;
+ }
+
+ .part2-table {
+ background: #ffffff;
+ box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
+ border-radius: 10px;
+ overflow: hidden;
+ padding: 0 35px 35px 35px;
+ margin-bottom: 22px;
+ flex: 1;
+ .table-head {
+ display: flex;
+ height: 60px;
+ align-items: center;
+ justify-content: space-between;
+ .title {
+ font-weight: bold;
+ font-size: 15px;
+ color: #2c3e7a;
+ }
+
+ .control {
+ display: flex;
+ .icon {
+ cursor: pointer;
+ }
+ .time {
+ font-size: 12px;
+ margin-left: 20px;
+ width: 40px;
+ height: 18px;
+ border-radius: 4px;
+ cursor: pointer;
+ &.active {
+ background: #2d52d7;
+ color: #fff;
+ opacity: 0.63;
+ }
+ }
+ }
}
}
}
}
+ .el-divider {
+ margin: 0;
+ }
+ .el-date-editor {
+ position: relative;
+ left: -35px;
+ top: 20px;
+ width: 0 !important;
+ height: 1px !important;
+ opacity: 0 !important;
+ }
}
</style>
\ No newline at end of file
diff --git a/src/pages/shuohuangMonitorAnalyze/components/leftNav.vue b/src/pages/shuohuangMonitorAnalyze/components/leftNav.vue
index 2087052..d03ed9a 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/leftNav.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/leftNav.vue
@@ -1,14 +1,15 @@
<template>
- <div class="left-nav">
+ <div class="left-nav" :class="{ short: isCollapse }">
+ <img class="icon" src="/images/shuohuang/railroad.png" />
<h1>
- <img class="icon" :src="`${publicPath}images/shuohuang/railroad.png`" style="height: 40px;" />
- <span v-show="!isCollapse" style="padding-left: 6px;">鏈旈粍閾佽矾鏈鸿締鍒嗗叕鍙�</span>
+ <span v-show="!isCollapse" style="padding-left: 6px"
+ >鏈旈粍閾佽矾鏈鸿締鍒嗗叕鍙�</span
+ >
</h1>
<el-menu
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
- :collapse="isCollapse"
:default-active="activeIndex"
@select="handleSelect"
>
@@ -55,17 +56,16 @@
</template>
<script>
-
//import railroadImg from '/images/shuohuang/railroad.png';
export default {
props: {
isCollapse: {
type: Boolean,
- default: true
+ default: true,
},
menuChange: {
- type: Function
- }
+ type: Function,
+ },
},
computed: {
isAdmin() {
@@ -82,8 +82,8 @@
data() {
return {
publicPath: process.env.BASE_URL,
- activeIndex: 'guideIndex'
- }
+ activeIndex: "guideIndex",
+ };
},
mounted() {
// if (this.isAdmin) {
@@ -92,51 +92,91 @@
// this.activeIndex = sessionStorage.getItem('leftNavAct');
// }
// }
- this.activeIndex = this.isAdmin ? 'guideIndex' : 'searchForVideoAnalyze';
+ this.activeIndex = this.isAdmin ? "guideIndex" : "searchForVideoAnalyze";
- this.$emit('menuChange', this.activeIndex);
+ this.$emit("menuChange", this.activeIndex);
},
methods: {
handleSelect(index, indePath) {
this.activeIndex = index;
- sessionStorage.setItem('leftNavAct', this.activeIndex);
- this.$emit('menuChange', index);
+ sessionStorage.setItem("leftNavAct", this.activeIndex);
+ this.$emit("menuChange", index);
},
- handleOpen() {
-
- },
- handleClose() {
-
- }
- }
-}
+ handleOpen() {},
+ handleClose() {},
+ },
+};
</script>
<style lang="scss">
.left-nav {
- background: #fff;
+ background-image: url(/images/shuohuang/鑳屾櫙.png);
height: 100vh;
+ width: 250px;
+ img {
+ margin-top: 80px;
+ margin-bottom: 10px;
+ height: 96px;
+ width: 96px;
+ }
h1 {
- display: flex;
- align-items: center;
height: 65px;
padding: 0 20px;
border-bottom: 1px solid #eee;
- color: rgb(0, 150, 250);
+ border: none;
+ span {
+ color: #fff;
+ }
}
.iconfont {
padding-right: 10px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
+ border: none;
+ padding-right: 0;
+ padding-left: 50px;
width: 250px;
+ background: none;
+ }
+ .el-menu.el-menu--inline {
+ background: none;
}
.el-menu-item,
.el-submenu__title {
text-align: left;
+ font-weight: 700;
+ color: #fff;
+
+ span {
+ color: #fff;
+ }
+ i {
+ color: #fff;
+ }
+ &:hover {
+ color: #0b41a7;
+
+ span {
+ color: #0b41a7;
+ }
+ i {
+ color: #0b41a7;
+ }
+ }
+ border-radius: 10px 0 0 10px;
}
.el-menu-item.is-active {
- color: #409eff;
background-color: #ecf0fc;
+ color: #0b41a7;
+
+ span {
+ color: #0b41a7;
+ }
}
}
+
+.short {
+ width: 0;
+ overflow: hidden;
+}
</style>
\ No newline at end of file
diff --git a/src/pages/shuohuangMonitorAnalyze/components/swipeTabs.vue b/src/pages/shuohuangMonitorAnalyze/components/swipeTabs.vue
index 553228f..4880a4d 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/swipeTabs.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/swipeTabs.vue
@@ -2,16 +2,16 @@
<div class="swipe-tabs">
<swiper :options="swiperOption" ref="swiperTabs">
<swiper-slide v-for="slide in slides" :key="slide.id">
- <div class="slide-tab" :class="{'act':actSlide==slide.id}" @click="checkSlide(slide)">
- <div class="title">{{slide.name}}</div>
- <div class="flex-box">
- <div>
- <div class="dimension">杩濊鐜�</div>
- <div class="dimension-val">{{slide.ratio}}%</div>
- </div>
- <div style="margin-left: 60px;">
- <Pie :options="optOfPie(slide)" :pieW="70" :pieH="70"></Pie>
- </div>
+ <div
+ class="slide-tab"
+ :class="{ act: actSlide == slide.id }"
+ @click="checkSlide(slide)"
+ >
+ <Pie :options="optOfPie(slide)"></Pie>
+ <div class="info">
+ <div class="title">杩濊鐜�</div>
+ <div class="num">78%</div>
+ <div class="place">涓搧涓�灞�</div>
</div>
</div>
</swiper-slide>
@@ -32,46 +32,44 @@
</template>
<script>
-import Pie from './charts/pie';
+import Pie from "./charts/pie";
export default {
components: { Pie },
- data () {
+ data() {
return {
swiperOption: {
spaceBetween: 0,
//initialSlide: 0,
- direction: 'horizontal',
+ direction: "horizontal",
navigation: {
- nextEl: '.swiper-button-next',
- prevEl: '.swiper-button-prev'
+ nextEl: ".swiper-button-next",
+ prevEl: ".swiper-button-prev",
},
- slidesPerView: 5,
+ slidesPerView: 6,
observer: true,
observeParents: true,
},
slides: [
- { id: 'jlfgs', name: '鏈洪噺鍒嗗叕鍙�', ratio: 1.5, },
- { id: 'ztyj', name: '涓搧涓�灞�', ratio: 1.6, },
- { id: 'ztsj', name: '涓搧涓夊眬', ratio: 1.2 },
- { id: 'ztsij', name: '涓搧鍥涘眬', ratio: 1.3 },
- { id: 'jtjw', name: '浜搧鏈哄姟', ratio: 0.2 },
- { id: 'ztwj', name: '涓搧浜斿眬', ratio: 1.2 },
- { id: 'jgjw', name: '浜珮鏈哄姟', ratio: 0.7 },
+ { id: "jlfgs", name: "鏈洪噺鍒嗗叕鍙�", ratio: 1.5 },
+ { id: "ztyj", name: "涓搧涓�灞�", ratio: 1.6 },
+ { id: "ztsj", name: "涓搧涓夊眬", ratio: 1.2 },
+ { id: "ztsij", name: "涓搧鍥涘眬", ratio: 1.3 },
+ { id: "jtjw", name: "浜搧鏈哄姟", ratio: 0.2 },
+ { id: "ztwj", name: "涓搧浜斿眬", ratio: 1.2 },
+ { id: "jgjw", name: "浜珮鏈哄姟", ratio: 0.7 },
],
- actSlide: ''
- }
+ actSlide: "",
+ };
},
- mounted () {
- console.log('swip mounte');
+ mounted() {
this.actSlide = this.slides[0].id;
-
},
methods: {
- optOfPie (slide) {
+ optOfPie(slide) {
return {
tooltip: {
- trigger: 'item',
- formatter: '{a}<br/>{b}:{c} ({d}%)'
+ trigger: "item",
+ formatter: "{a}<br/>{b}:{c} ({d}%)",
},
// legend: {
// orient: 'vertical',
@@ -81,41 +79,43 @@
// },
series: [
{
- name: '杩濊鐜�',
- type: 'pie',
- color: ['#18bfff', '#e9f6fb'],
- radius: ['60%', '90%'],
+ name: "杩濊鐜�",
+ type: "pie",
+ color: ["#2D52D7", " #D9DFE6"],
+ radius: ["28%", "35%"],
+ center: ["50%", "48%"],
+ silent: true,
tooltip: {
- show: false
+ show: false,
},
avoidLabelOverlap: false,
label: {
show: false,
- position: 'center'
+ position: "center",
},
hoverAnimation: false,
labelLine: {
- show: false
+ show: false,
},
data: [
- { value: slide.ratio, name: '' },
- { value: 100 - slide.ratio, name: '' },
-
- ]
- }
- ]
- }
+ { value: slide.ratio, name: "" },
+ { value: 3 - slide.ratio, name: "" },
+ ],
+ },
+ ],
+ };
},
- checkSlide (slide) {
+ checkSlide(slide) {
this.actSlide = slide.id;
- this.$emit('checkTab',slide)
- }
- }
-}
+ this.$emit("checkTab", slide);
+ },
+ },
+};
</script>
<style lang="scss">
.swipe-tabs {
+ width: 94%;
position: relative;
padding: 0 30px;
@@ -124,24 +124,41 @@
border-right: 1px solid #eee;
}
.slide-tab {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-left: 10px solid #f4f6f9;
cursor: pointer;
- border-top: 2px solid transparent;
- padding: 20px;
- text-align: left;
+ height: 130px;
+ background: #f4f6f9;
+ opacity: 0.67;
&.act {
- border-color: #409eff;
+ border-color: #2d52d7;
}
- .title {
- font-size: 16px;
- color: #666;
- }
- .dimension {
- color: #999;
- margin: 10px 0;
- }
- .dimension-val {
- color: #555;
- font-size: 28px;
+
+ .info {
+ position: absolute;
+ top: 39px;
+ left: 50%;
+ margin-left: -28px;
+ text-align: center;
+ .title {
+ font-size: 12px;
+ color: #425277;
+ opacity: 0.6;
+ }
+
+ .num {
+ font-size: 20px;
+ color: #425277;
+ }
+
+ .place {
+ margin-top: 23px;
+ font-size: 14px;
+ font-weight: 700;
+ }
}
}
.swiper-button-prev,
diff --git a/src/pages/shuohuangMonitorAnalyze/components/topNav.vue b/src/pages/shuohuangMonitorAnalyze/components/topNav.vue
index 41eaa9f..03e1141 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/topNav.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/topNav.vue
@@ -6,7 +6,7 @@
<div class="notify">
<i class="el-icon-bell"></i>
</div> -->
- <div class="user-area" >
+ <div class="user-area">
<el-avatar size="small" :src="pic"></el-avatar>
<span class="name">寮犱笁</span>
</div>
@@ -15,36 +15,35 @@
<script>
export default {
- data(){
- return {
-
- }
+ data() {
+ return {};
},
- computed:{
- pic(){
- return "/images/search/nobody.png"
- }
- }
-}
+ computed: {
+ pic() {
+ return "/images/search/nobody.png";
+ },
+ },
+};
</script>
<style lang="scss">
.top-nav {
display: flex;
- height: 64px;
- padding-right: 20px;
+ height: 60px;
+ padding-right: 15px;
justify-content: flex-end;
align-items: center;
cursor: pointer;
- i[class^='el-icon-']{
+ box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
+ i[class^="el-icon-"] {
font-size: 20px;
padding: 14px;
}
- .user-area{
- span{
+ .user-area {
+ span {
vertical-align: middle;
}
- .name{
+ .name {
padding: 0 10px;
}
}
diff --git a/src/pages/shuohuangMonitorAnalyze/index/App.vue b/src/pages/shuohuangMonitorAnalyze/index/App.vue
index a9e1ba5..942ca36 100644
--- a/src/pages/shuohuangMonitorAnalyze/index/App.vue
+++ b/src/pages/shuohuangMonitorAnalyze/index/App.vue
@@ -3,40 +3,55 @@
<div class="view-left">
<left-nav :isCollapse="isCollapse" @menuChange="menuChange"></left-nav>
</div>
- <div class="right">
+ <div class="view-right">
<div class="top">
<div class="collapse-trigger" @click="toggleCollapse">
- <i :class="isCollapse?'el-icon-s-unfold':'el-icon-s-fold'"></i>
+ <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
</div>
<top-nav></top-nav>
</div>
+
+ <el-breadcrumb separator-class="el-icon-arrow-right">
+ <el-breadcrumb-item>{{ breadcrumb }}</el-breadcrumb-item>
+ <el-breadcrumb-item v-if="breadcrumb2">{{
+ breadcrumb2
+ }}</el-breadcrumb-item>
+ </el-breadcrumb>
+
<div class="container">
<!-- 棣栭〉 -->
- <GuideIndex ref="GuideIndex" v-show="actPage=='guideIndex'"></GuideIndex>
-
- <searchForVideoAnalyze v-if="actPage=='searchForVideoAnalyze'"></searchForVideoAnalyze>
- <memberManage v-if="actPage=='memberManage'"></memberManage>
- <taskManage v-if="actPage=='taskManage'"></taskManage>
- <transferMemo v-if="actPage=='transferMemo'"></transferMemo>
- <transferDeviceManage v-if="actPage=='transferDeviceManage'"></transferDeviceManage>
- <configManage v-if="actPage=='configManage'"></configManage>
- <lkg v-if="actPage=='lkgManage'"></lkg>
+ <GuideIndex
+ @breadcrumb2Update="breadcrumb2Update"
+ ref="GuideIndex"
+ v-if="actPage == 'guideIndex'"
+ ></GuideIndex>
+ <searchForVideoAnalyze
+ v-if="actPage == 'searchForVideoAnalyze'"
+ ></searchForVideoAnalyze>
+ <memberManage v-if="actPage == 'memberManage'"></memberManage>
+ <taskManage v-if="actPage == 'taskManage'"></taskManage>
+ <transferMemo v-if="actPage == 'transferMemo'"></transferMemo>
+ <transferDeviceManage
+ v-if="actPage == 'transferDeviceManage'"
+ ></transferDeviceManage>
+ <configManage v-if="actPage == 'configManage'"></configManage>
+ <lkg v-if="actPage == 'lkgManage'"></lkg>
</div>
</div>
</div>
</template>
<script>
-import Lkg from '../components/lkgManage'
-import TopNav from '../components/topNav';
-import LeftNav from '../components/leftNav';
-import GuideIndex from '../components/guideIndex';
-import TaskManage from '../components/taskManage';
-import TransferMemo from '../components/transferMemo';
-import ConfigManage from '../components/configManage';
-import MemberManage from '../components/memberManage';
-import TransferDeviceManage from '../components/transferDeviceManage';
-import SearchForVideoAnalyze from '../components/searchForVideoAnalyze';
+import Lkg from "../components/lkgManage";
+import TopNav from "../components/topNav";
+import LeftNav from "../components/leftNav";
+import GuideIndex from "../components/guideIndex";
+import TaskManage from "../components/taskManage";
+import TransferMemo from "../components/transferMemo";
+import ConfigManage from "../components/configManage";
+import MemberManage from "../components/memberManage";
+import TransferDeviceManage from "../components/transferDeviceManage";
+import SearchForVideoAnalyze from "../components/searchForVideoAnalyze";
export default {
components: {
@@ -49,20 +64,22 @@
TransferMemo,
TransferDeviceManage,
ConfigManage,
- GuideIndex
+ GuideIndex,
},
data() {
return {
isCollapse: false,
- actPage: 'guideIndex',
- }
+ actPage: "guideIndex",
+ breadcrumb: "棣栭〉",
+ breadcrumb2: "鏁版嵁缁熻鍒嗘瀽",
+ };
},
mounted() {
// this.actPage = 'guideIndex';
},
methods: {
markNav() {
- sessionStorage.setItem('actPage', this.actPage);
+ sessionStorage.setItem("actPage", this.actPage);
this.menuChange(this.actPage);
},
toggleCollapse() {
@@ -70,20 +87,73 @@
//閫氱煡褰撳墠娲诲姩椤祎able(濡傛灉鏈�) doLayout
},
menuChange(path) {
- if (path=='guideIndex') {
- this.$refs.GuideIndex.refreshShoubiNum()
+ console.log(path);
+ switch (path) {
+ case "guideIndex":
+ this.breadcrumb = "棣栭〉";
+ this.breadcrumb2 = "鏁版嵁缁熻鍒嗘瀽";
+ break;
+ case "searchForVideoAnalyze":
+ this.breadcrumb = "瑙嗛鍒嗘瀽妫�绱�";
+ this.breadcrumb2 = "";
+ break;
+ case "memberManage":
+ this.breadcrumb = "浜哄憳绠＄悊";
+ this.breadcrumb2 = "";
+ break;
+ case "taskManage":
+ this.breadcrumb = "浠诲姟绠＄悊";
+ this.breadcrumb2 = "";
+ break;
+ case "configManage":
+ this.breadcrumb = "閰嶇疆绠＄悊";
+ this.breadcrumb2 = "";
+ break;
+ case "transferMemo":
+ this.breadcrumb = "杞偍绠＄悊";
+ this.breadcrumb2 = "瑙嗛杞偍璁板綍";
+ break;
+ case "transferDeviceManage":
+ this.breadcrumb = "杞偍绠＄悊";
+ this.breadcrumb2 = "杞偍璁惧绠＄悊";
+ break;
+ case "lkgManage":
+ this.breadcrumb = "杞偍绠＄悊";
+ this.breadcrumb2 = "lkg鏁版嵁绠＄悊";
+ break;
+ case "taskscreen":
+ this.breadcrumb = "鍙鍖栧ぇ灞�";
+ this.breadcrumb2 = "浠诲姟澶у睆";
+ break;
+ case "hiddendangerscreen":
+ this.breadcrumb = "鍙鍖栧ぇ灞�";
+ this.breadcrumb2 = "闅愭偅澶у睆";
+ break;
}
- if (path == 'taskscreen') {
+
+ if (path == "guideIndex") {
+ // this.$refs.GuideIndex.refreshShoubiNum()
+ }
+ if (path == "taskscreen") {
//window.location.href = window.location.href+'taskscreen/index.html'
- window.open(window.location.href + 'taskscreen/index.html', '_blank')
- } else if (path == 'hiddendangerscreen') {
+ window.open(window.location.href + "taskscreen/index.html", "_blank");
+ } else if (path == "hiddendangerscreen") {
//window.location.href = window.location.href+'hiddendangerscreen/index.html'
- window.open(window.location.href + 'hiddendangerscreen/index.html', '_blank')
+ window.open(
+ window.location.href + "hiddendangerscreen/index.html",
+ "_blank"
+ );
}
this.actPage = path;
- }
- }
-}
+ },
+ breadcrumbUpdate(val) {
+ this.breadcrumb = val;
+ },
+ breadcrumb2Update(val) {
+ this.breadcrumb2 = val;
+ },
+ },
+};
</script>
<style lang="scss">
@@ -146,16 +216,16 @@
}
}
.main-view {
+ height: 100%;
display: flex;
background: #f0f2f5;
.view-left {
z-index: 2;
box-shadow: 4px 0px 8px 0px rgba(0, 0, 0, 0.1);
}
- .right {
- // flex: 1;
- width: 100%;
-
+ .view-right {
+ flex: 1;
+ overflow: hidden;
.top {
position: relative;
.collapse-trigger {
@@ -166,12 +236,22 @@
cursor: pointer;
}
}
+ .el-breadcrumb {
+ margin: 25px 0 25px 30px;
+ }
.container {
- background: #F4F6F9;
+ margin: 0px 0 0 30px;
+ padding-right: 40px;
box-sizing: border-box;
height: calc(100vh - 84px);
overflow-y: auto;
}
}
}
+</style>
+
+<style>
+* {
+ box-sizing: border-box;
+}
</style>
\ No newline at end of file
diff --git a/vue.config.js b/vue.config.js
index 6c1c339..89da434 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -87,8 +87,8 @@
changeOrigin: true,
},
"/data/api-v/app/findAllApp": {
- target: '/',
- // target: 'http://localhost:8080/',
+ target: '/',
+ //target: 'http://localhost:8080/',
changeOrigin: true,
pathRewrite: {
'^/data/api-v/app/findAllApp': 'apps.json'
--
Gitblit v1.8.0