- {{ today }}
+ {{ today }}
-
+
@@ -62,8 +98,20 @@ export default {
scale: 0,
// 弹窗显隐控制
showDialogVisible: false,
+ // 左侧路段选择绑定
+ roadSelect: "",
+ // 左侧路段下拉数据
+ roadList: [],
+ // 左侧图表总数据
+ leftChartList: [],
// 左侧图表数据
leftChartData: [],
+ // 右侧公司选择绑定
+ companySelect: "",
+ // 右侧公司选择下拉
+ companyList: [],
+ // 右侧图表总数据
+ rightChartList: [],
// 右侧图表数据
rightChartData: [],
};
@@ -91,18 +139,58 @@ export default {
},
/* 点击打开弹窗 */
- showDialog() {
- this.getChartData();
+ showDialog(item) {
+ this.getChartData(item);
this.showDialogVisible = true;
},
+ /* 弹窗路段修改事件 */
+ changeRoad(value) {
+ this.leftChartData = this.leftChartList.filter((item) => {
+ if (value) {
+ return item.name === value;
+ }
+ return item;
+ });
+ this.$nextTick(() => {
+ this.drawLeftChart();
+ });
+ },
+
+ /* 弹窗公司修改事件 */
+ changeCompany(value) {
+ this.rightChartData = this.rightChartList.filter((item) => {
+ if (value) {
+ return item.name === value;
+ }
+ return item;
+ });
+ this.$nextTick(() => {
+ this.drawRightChart();
+ });
+ },
+
/* 请求弹窗数据 */
- getChartData() {
- roadTodayDetail({ classType: this.bottomTipClick }).then(
+ getChartData(item) {
+ roadTodayDetail({ classType: this.bottomTipClick, type: item }).then(
({ code, data }) => {
if (code === 200) {
+ this.leftChartList = data[0];
this.leftChartData = data[0];
+ this.roadList = data[0].map((item, index) => {
+ return {
+ ...item,
+ index: index,
+ };
+ });
+ this.rightChartList = data[1];
this.rightChartData = data[1];
+ this.companyList = data[1].map((item, index) => {
+ return {
+ ...item,
+ index: index,
+ };
+ });
this.$nextTick(() => {
this.drawLeftChart();
this.drawRightChart();
@@ -268,6 +356,51 @@ export default {
data: y4Data,
},
],
+ dataZoom: [
+ {
+ // 设置滚动条的隐藏与显示
+ show: false,
+ // 设置滚动条类型
+ type: "slider",
+ // 设置背景颜色
+ backgroundColor: "rgba(225,225,225,0.2)",
+ // 设置选中范围的填充颜色
+ fillerColor: "#ccc",
+ // 设置边框颜色
+ borderColor: "rgba(225,225,225,0.2)",
+ // 是否显示detail，即拖拽时候显示详细数值信息
+ showDetail: false,
+ // 数据窗口范围的起始数值
+ startValue: 0,
+ // 数据窗口范围的结束数值（一页显示多少条数据）
+ endValue: 6,
+ // empty：当前数据窗口外的数据，被设置为空。
+ // 即不会影响其他轴的数据范围
+ filterMode: "empty",
+ // 设置滚动条宽度，相对于盒子宽度
+ width: "80%",
+ // 设置滚动条高度
+ height: 5,
+ // 设置滚动条显示位置
+ left: "center",
+ // 是否锁定选择区域（或叫做数据窗口）的大小
+ zoomLoxk: true,
+ // 控制手柄的尺寸
+ handleSize: 10,
+ // dataZoom-slider组件离容器下侧的距离
+ bottom: 0,
+ },
+ {
+ // 没有下面这块的话，只能拖动滚动条，
+ // 鼠标滚轮在区域内不能控制外部滚动条
+ type: "inside",
+ // 滚轮是否触发缩放
+ zoomOnMouseWheel: false,
+ // 鼠标滚轮触发滚动
+ moveOnMouseMove: true,
+ moveOnMouseWheel: true,
+ },
+ ],
});
window.addEventListener("resize", () => {
chart.resize();
@@ -424,6 +557,51 @@ export default {
data: y4Data,
},
],
+ dataZoom: [
+ {
+ // 设置滚动条的隐藏与显示
+ show: false,
+ // 设置滚动条类型
+ type: "slider",
+ // 设置背景颜色
+ backgroundColor: "rgba(225,225,225,0.2)",
+ // 设置选中范围的填充颜色
+ fillerColor: "#ccc",
+ // 设置边框颜色
+ borderColor: "rgba(225,225,225,0.2)",
+ // 是否显示detail，即拖拽时候显示详细数值信息
+ showDetail: false,
+ // 数据窗口范围的起始数值
+ startValue: 0,
+ // 数据窗口范围的结束数值（一页显示多少条数据）
+ endValue: 6,
+ // empty：当前数据窗口外的数据，被设置为空。
+ // 即不会影响其他轴的数据范围
+ filterMode: "empty",
+ // 设置滚动条宽度，相对于盒子宽度
+ width: "80%",
+ // 设置滚动条高度
+ height: 5,
+ // 设置滚动条显示位置
+ left: "center",
+ // 是否锁定选择区域（或叫做数据窗口）的大小
+ zoomLoxk: true,
+ // 控制手柄的尺寸
+ handleSize: 10,
+ // dataZoom-slider组件离容器下侧的距离
+ bottom: 0,
+ },
+ {
+ // 没有下面这块的话，只能拖动滚动条，
+ // 鼠标滚轮在区域内不能控制外部滚动条
+ type: "inside",
+ // 滚轮是否触发缩放
+ zoomOnMouseWheel: false,
+ // 鼠标滚轮触发滚动
+ moveOnMouseMove: true,
+ moveOnMouseWheel: true,
+ },
+ ],
});
window.addEventListener("resize", () => {
chart.resize();
@@ -461,6 +639,7 @@ export default {
background-position: 100% 60%;
span {
+ cursor: pointer;
font-family: "DouYu";
background: linear-gradient(
to bottom,
@@ -555,6 +734,81 @@ export default {
}
}
+// 弹窗内容样式
+.today-content {
+ height: 30rem;
+ display: flex;
+ flex-direction: column;
+
+ .today-select {
+ width: 100%;
+ // height: 10%;
+ display: flex;
+
+ > div {
+ width: 50%;
+ padding: 0 2rem;
+
+ ::v-deep .el-select {
+ width: 12rem;
+
+ .el-input .el-select__caret {
+ line-height: 1.5rem;
+ }
+
+ .el-input--medium .el-input__inner {
+ height: 1.5rem;
+ background-color: transparent;
+ color: #89c5e8;
+ border-color: #6991cd;
+ }
+
+ .el-select-dropdown {
+ background-color: #102649;
+ border-color: #08204f;
+ .el-scrollbar {
+ .el-select-dropdown__wrap {
+ .el-scrollbar__view {
+ .el-select-dropdown__item {
+ color: #aaabb8;
+ }
+
+ .el-select-dropdown__item:hover {
+ background-color: #2b4c7e;
+ }
+
+ .el-select-dropdown__item.selected {
+ background-color: #2b4c7e;
+ }
+
+ .el-select-dropdown__item.hover {
+ background-color: #2b4c7e;
+ }
+ }
+
+ .el-select-dropdown__list {
+ background-color: #102649;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+
+ .today-bottom {
+ width: 100%;
+ height: 100%;
+ display: flex;
+
+ .dialog-div {
+ width: 50%;
+ height: 90%;
+ margin: 0 1rem;
+ }
+ }
+}
+
/* 修改弹窗样式 */
::v-deep .el-dialog__header {
padding: 10px;
diff --git a/src/views/big-screen/disease-components/traffic-statistic.vue b/src/views/big-screen/disease-components/traffic-statistic.vue
index 20167f9..4c80218 100644
--- a/src/views/big-screen/disease-components/traffic-statistic.vue
+++ b/src/views/big-screen/disease-components/traffic-statistic.vue
@@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-21 10:06:24
* @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-13 13:57:00
+ * @LastEditTime: 2024-11-18 13:47:54
* @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-statistic.vue
* @Description: 病害巡检大屏-病害统计
-->
@@ -24,16 +24,21 @@
{{ all }}个
@@ -33,8 +33,44 @@
@close="screenCancel"
>
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
-
-
+ {{ item.name }}
- {{ item.rate }}
- {{ item.value }}
-
+
+
+ {{ item.name }}
+ {{ item.rate }}
+ {{ item.value }}
+