|
|
@@ -1,306 +0,0 @@
|
|
|
-<template>
|
|
|
- <base-drag-bg-dialog
|
|
|
- :dialogConfig="baseDialogConfig"
|
|
|
- @handleClose="closeDialog"
|
|
|
- @onActivated="onActivated"
|
|
|
- >
|
|
|
- <!-- 弹窗内容 -->
|
|
|
- <div class="dialog_box">
|
|
|
- <!-- 内容 -->
|
|
|
- <div class="dialog_content_box">
|
|
|
- <div class="chart-box">
|
|
|
- <div class="dateTime-chart">
|
|
|
- <!-- <div class="chart-title">
|
|
|
- {{ baseDialogConfig.title }}
|
|
|
- </div> -->
|
|
|
- <el-row class="chart-row">
|
|
|
- <el-col>
|
|
|
- <date-time-bar
|
|
|
- v-if="statisticData"
|
|
|
- :data="statisticData"
|
|
|
- :baseConfig="{ ids: 'stackBarChart', unit: '次' }"
|
|
|
- @handleChartClick="handleChartClick"
|
|
|
- />
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </base-drag-bg-dialog>
|
|
|
-</template>
|
|
|
-<script>
|
|
|
-import BaseDragBgDialog from "@/views/components/base/BaseDragBgDialog.vue";
|
|
|
-import { getMileageList } from "@/API/report";
|
|
|
-import { DateTimeBar } from "@/views/components/chart";
|
|
|
-import { mapGetters } from "vuex";
|
|
|
-export default {
|
|
|
- name: "PipeMileageDialog",
|
|
|
- components: { BaseDragBgDialog, DateTimeBar },
|
|
|
- watch: {
|
|
|
- "pipeMileageDialog.show": {
|
|
|
- handler(newVal) {
|
|
|
- this.baseDialogConfig.show = newVal;
|
|
|
- if (this.statisticData.date.length == 0) {
|
|
|
- this.getMileageList();
|
|
|
- }
|
|
|
- // if (newVal) {
|
|
|
- // this.openFullScreen()
|
|
|
- // }
|
|
|
- },
|
|
|
- // deep: true,
|
|
|
- immediate: true,
|
|
|
- },
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- BASE_URL,
|
|
|
- baseDialogConfig: {
|
|
|
- dialogId: "pipeMileage",
|
|
|
- show: false,
|
|
|
- title: "陕京四线里程高程图",
|
|
|
- width: 1560,
|
|
|
- height: 460,
|
|
|
- center: true,
|
|
|
- zIndex: 10,
|
|
|
- },
|
|
|
- statisticData: {
|
|
|
- date: [],
|
|
|
- seriesData: [
|
|
|
- {
|
|
|
- data: [],
|
|
|
- name: "高程",
|
|
|
- code: "100006",
|
|
|
- markPointData: [],
|
|
|
- },
|
|
|
- ],
|
|
|
- chartType: "line",
|
|
|
- limitNumber: 0,
|
|
|
- },
|
|
|
- };
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapGetters(["pipeMileageDialog"]),
|
|
|
- },
|
|
|
- created() {},
|
|
|
- mounted() {
|
|
|
- this.getMileageList();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- closeDialog() {
|
|
|
- this.$store.dispatch("dialog/setPipeMileageDialog", {
|
|
|
- show: false,
|
|
|
- dialogMsg: {},
|
|
|
- type: "",
|
|
|
- });
|
|
|
- },
|
|
|
- async getMileageList() {
|
|
|
- try {
|
|
|
- const res = await getMileageList({
|
|
|
- pageSize: 10000000,
|
|
|
- pageIndex: 1,
|
|
|
- listOrder: ["field001,asc"],
|
|
|
- pageId: "822794755799785472",
|
|
|
- });
|
|
|
- if (res.code === 20000) {
|
|
|
- let mileage = [];
|
|
|
- let data = [];
|
|
|
- let points = [];
|
|
|
- res.data.content.forEach((item, index) => {
|
|
|
- mileage.push(item.field002);
|
|
|
- data.push(item.field003);
|
|
|
- if (item.field004) {
|
|
|
- points.push({
|
|
|
- yAxis: item.field003,
|
|
|
- xAxis: index,
|
|
|
- value: item.field004,
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- this.statisticData.date = mileage;
|
|
|
- this.statisticData.seriesData[0].data = data;
|
|
|
- this.statisticData.seriesData[0].markPointData = points;
|
|
|
- }
|
|
|
- console.log("图表信息：", this.statisticData);
|
|
|
- // 刷新报警列表页
|
|
|
- } catch (err) {
|
|
|
- console.log(err);
|
|
|
- }
|
|
|
- },
|
|
|
- onActivated() {
|
|
|
- // console.log("aaa");
|
|
|
- this.$nextTick(() => {
|
|
|
- this.$refs.dealContent.focus();
|
|
|
- });
|
|
|
- },
|
|
|
- // 图表的点击操作
|
|
|
- handleChartClick(params) {
|
|
|
- if (params.seriesType === "bar") {
|
|
|
- let selectTime = params.name.replace(
|
|
|
- /(\d{4}).(\d{1,2}).(\d{1,2}).+/gm,
|
|
|
- "$1-$2-$3"
|
|
|
- );
|
|
|
- this.query.tags.dateTag = params.name;
|
|
|
- this.queryTags.find((tag) => tag.type === "dateTag").name = params.name;
|
|
|
- this.getCacheData();
|
|
|
- }
|
|
|
- },
|
|
|
- openFullScreen() {
|
|
|
- const loading = this.$loading({
|
|
|
- lock: true,
|
|
|
- text: "Loading",
|
|
|
- spinner: "el-icon-loading",
|
|
|
- background: "rgba(0, 0, 0, 0.7)",
|
|
|
- });
|
|
|
- setTimeout(() => {
|
|
|
- loading.close();
|
|
|
- }, 800);
|
|
|
- },
|
|
|
- },
|
|
|
-};
|
|
|
-</script>
|
|
|
-<style lang="less" scoped>
|
|
|
-.dialog_box {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 30px 10px 0;
|
|
|
- pointer-events: auto;
|
|
|
- .dialog_content_box {
|
|
|
- width: 100%;
|
|
|
- padding: 0 20px;
|
|
|
- box-sizing: border-box;
|
|
|
- .search-box {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- padding: 0.052083rem /* 10/192 */ 0;
|
|
|
- color: #fff;
|
|
|
- .search-item {
|
|
|
- display: flex;
|
|
|
- .search-label {
|
|
|
- display: inline-block;
|
|
|
- width: 0.28125rem /* 54/192 */;
|
|
|
- font-size: 0.072917rem /* 14/192 */;
|
|
|
- line-height: 0.145833rem /* 28/192 */;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- .search-date.el-input__inner {
|
|
|
- width: 1.5625rem /* 300/192 */;
|
|
|
- height: 0.145833rem /* 28/192 */;
|
|
|
- border-radius: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .el-select {
|
|
|
- margin-right: 0.052083rem /* 10/192 */;
|
|
|
- ::v-deep .el-input__inner {
|
|
|
- width: 0.520833rem /* 100/192 */;
|
|
|
- height: 0.145833rem /* 28/192 */;
|
|
|
- border-radius: 0;
|
|
|
-
|
|
|
- // padding-right: 0.182292rem /* 35/192 */;
|
|
|
- }
|
|
|
-
|
|
|
- ::v-deep .el-input__icon {
|
|
|
- line-height: 0.145833rem /* 28/192 */;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .search-btn {
|
|
|
- box-sizing: border-box;
|
|
|
- width: 0.145833rem /* 28/192 */;
|
|
|
- height: 0.145833rem /* 28/192 */;
|
|
|
- line-height: 0.145833rem /* 28/192 */;
|
|
|
- text-align: center;
|
|
|
- justify-content: right;
|
|
|
- color: #fff;
|
|
|
- font-size: 0.072917rem /* 14/192 */;
|
|
|
- cursor: pointer;
|
|
|
- border: 0.005208rem /* 1/192 */ solid #5bd6ff;
|
|
|
- border-radius: 0;
|
|
|
- &:hover {
|
|
|
- border-color: #ccc;
|
|
|
- }
|
|
|
- img {
|
|
|
- width: 0.083333rem /* 16/192 */;
|
|
|
- height: 0.083333rem /* 16/192 */;
|
|
|
- }
|
|
|
- &:last-child {
|
|
|
- margin-left: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .chart-box {
|
|
|
- .chart-title {
|
|
|
- height: 50px;
|
|
|
- line-height: 50px;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 500;
|
|
|
- color: #fff;
|
|
|
- .title-icon {
|
|
|
- display: inline-block;
|
|
|
- width: 8px;
|
|
|
- height: 8px;
|
|
|
- background: url("~@/assets/imgs/dialog/img_block.png") center
|
|
|
- no-repeat;
|
|
|
- box-shadow: 0 0 6px 1px #ffe175;
|
|
|
- margin: 0 6px;
|
|
|
- }
|
|
|
- .title-count {
|
|
|
- color: #ffc800;
|
|
|
- }
|
|
|
- .el-tag {
|
|
|
- margin-right: 10px;
|
|
|
- // background-color: rgba(0, 0, 0, 0.1);
|
|
|
- // border-color: rgba(4, 42, 47, 0.4);
|
|
|
- // color: #fff;
|
|
|
- }
|
|
|
- }
|
|
|
- .chart-query {
|
|
|
- margin-left: 20px;
|
|
|
- .el-radio-group {
|
|
|
- ::v-deep .el-radio__label {
|
|
|
- font-size: 12px;
|
|
|
- padding-left: 5px;
|
|
|
- }
|
|
|
- ::v-deep .el-radio {
|
|
|
- color: #fff;
|
|
|
- margin-right: 16px;
|
|
|
- }
|
|
|
- ::v-deep .el-radio__input.is-checked + .el-radio__label {
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- ::v-deep .el-radio__inner {
|
|
|
- width: 12px;
|
|
|
- height: 12px;
|
|
|
- background-color: rgba(0, 0, 0, 0.1);
|
|
|
- }
|
|
|
- ::v-deep .el-radio__input.is-checked .el-radio__inner {
|
|
|
- background: rgba(4, 42, 47, 0.4);
|
|
|
- border-color: #76c1e1;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .dateTime-chart {
|
|
|
- .el-col {
|
|
|
- height: 330px;
|
|
|
- }
|
|
|
- }
|
|
|
- .split-line {
|
|
|
- width: 100%;
|
|
|
- height: 6px;
|
|
|
- background: url("~@/assets/imgs/dialog/split_line.png") center no-repeat;
|
|
|
- background-size: contain;
|
|
|
- margin: 20px auto 10px;
|
|
|
- }
|
|
|
- .rank-chart {
|
|
|
- .el-col {
|
|
|
- height: 300px;
|
|
|
- }
|
|
|
- .scatter-box {
|
|
|
- height: 310px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
fan