gx

src/view/dialog/diaLogTab.vue

@@ -0,0 +1,402 @@
+<template>
+  <div class="dialogPage">
+    <el-dialog
+      v-model="dialogShowTab"
+      width="80vw"
+      :show-close="false"
+      center
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+    >
+      <template #header="{ close, titleId, titleClass }">
+        <div class="my-header">
+          <el-icon
+            size="26"
+            color="#fff"
+            @click="closeDialog"
+          >
+            <CircleCloseFilled />
+          </el-icon>
+        </div>
+      </template>
+
+      <div class="tabelPart">
+        <div class="bo">
+          <div class="title">
+            <div class="title_top">
+              <img
+                src="@/assets/images/table_l.png"
+                alt=""
+                style="margin-right: 10px"
+              />
+              <div class="name">{{ title }}详情</div>
+              <img
+                src="@/assets/images/table_r.png"
+                alt=""
+                style="margin-left: 10px"
+              />
+            </div>
+            <img
+              class="title_botton"
+              src="@/assets/images/table_c.png"
+              alt=""
+            />
+          </div>
+        </div>
+        <div class="tabChoose">
+          <div
+            :class="data.tab == '0' ? 'choosed' : 'tabs'"
+            style="margin-right: -25px"
+          >
+            <span @click="changeTab('0')">路线</span>
+          </div>
+          <div
+            :class="data.tab == '1' ? 'choosed' : 'tabs'"
+            style="margin-left: -25px"
+          >
+            <span @click="changeTab('1')">乘坐人次趋势</span>
+          </div>
+        </div>
+        <div
+          v-if="data.tab == '0'"
+          style="width: 100%; height: calc(100% - 110px)"
+        >
+          <el-table
+            :data="data.tableData"
+            height="100%"
+            :header-cell-style="{ background: '#008FCD' }"
+            :key="tableKey"
+          >
+            <!-- <el-table-column
+            v-for="(item, index) in data.columns"
+            :key="index"
+            :property="item.property"
+            :label="item.label"
+            :width="item.width"
+            align="center"
+          /> -->
+            <template v-for="item in data.columns">
+              <el-table-column
+                :key="item.label"
+                v-if="item.type === 'slot'"
+                :show-overflow-tooltip="true"
+                :label="item.label"
+                :property="item.property"
+                align="center"
+              >
+                <template #default="scope">
+                  <slot
+                    :name="item.property"
+                    :currentCol="item"
+                    :currentData="scope.row"
+                  ></slot>
+                </template>
+              </el-table-column>
+              <el-table-column
+                :key="item.label"
+                :property="item.property"
+                :label="item.label"
+                :show-overflow-tooltip="true"
+                align="center"
+                v-else
+              />
+            </template>
+          </el-table>
+        </div>
+
+        <div
+          v-if="data.tab == '0'"
+          class="pagePart"
+        >
+          <el-pagination
+            background
+            layout="prev, pager, next,total"
+            :page-size="pagination.pageSize"
+            :total="pagination.total"
+            prev-text="上一页"
+            next-text="下一页"
+            @current-change="handle"
+            v-model:current-page="pagination.currentPage"
+          />
+        </div>
+        <div
+          v-if="data.tab == '1'"
+          style="width: 100%; height: 70vh"
+        >
+          <tL
+            :list1="data.list1"
+            :year="data.year"
+          ></tL>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script setup>
+import {
+  onMounted,
+  reactive,
+  ref,
+  onBeforeMount,
+  defineProps,
+  watch,
+  nextTick,
+} from "vue";
+import { CircleCloseFilled } from "@element-plus/icons-vue";
+import tL from "./echarts/tabLine.vue";
+const props = defineProps({
+  dialogShowTab: {
+    type: Boolean,
+    default: () => {
+      return false;
+    },
+  },
+  columns: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+  tableData: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+  title: {
+    type: String,
+    default: () => {
+      return "";
+    },
+  },
+  pagination: {
+    type: Object,
+    required: true,
+  },
+  list1: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+  year: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+});
+const emit = defineEmits(["close", "handle"]);
+
+// 详情弹框
+const dialogShowTab = ref();
+const data = reactive({
+  title: "",
+  columns: [],
+  tableData: [],
+  pagination: {},
+  list1: [],
+  year: [],
+  tab: '0',
+});
+
+const gridData = [];
+//切换页数后置顶
+const tableKey = ref(Math.random());
+// 监听
+watch(
+  () => props.dialogShowTab,
+  (newVal, oldVal) => {
+    dialogShowTab.value = newVal;
+    // data.tableData = props.tableData;
+    data.columns = props.columns;
+  }
+);
+watch(
+  () => props.tableData,
+  (newVal, oldVal) => {
+    data.tableData = props.tableData;
+    tableKey.value = Math.random();
+  }
+);
+watch(
+  () => props.list1,
+  (newVal, oldVal) => {
+    data.list1 = newVal;
+  }
+);
+watch(
+  () => props.year,
+  (newVal, oldVal) => {
+    data.year = newVal;
+  }
+);
+// 使用生命钩子
+onMounted(() => {
+  dialogShowTab.value = props.dialogShowTab;
+  data.columns = props.columns;
+  data.title = props.title;
+  data.tableData = props.tableData;
+  data.list1 = props.list1;
+  data.year = props.year;
+  const paginationTotal = document.querySelector(".el-pagination__total");
+  console.log(paginationTotal);
+  // paginationTotal.innerText = `总共 ${props.pagination.total} 组数据`;
+});
+
+const closeDialog = () => {
+  dialogShowTab.value = false;
+  emit("close");
+};
+//分页器
+const handle = (current) => {
+  emit("handle", current);
+};
+const changeTab = (val) => {
+    data.tab = val
+}
+</script>
+<style lang="scss" scoped>
+:deep(.el-dialog) {
+  --el-dialog-bg-color: none;
+  --el-dialog-width: 76% !important;
+}
+
+.my-header {
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.tabelPart {
+  padding: 16px;
+  background: linear-gradient(
+      270deg,
+      rgba(0, 77, 131, 0.69) 0%,
+      rgba(0, 51, 83, 0.77) 50%,
+      rgba(0, 77, 131, 0.74) 100%
+    ),
+    radial-gradient(
+      66% 40% at 50% 0%,
+      rgba(1, 150, 243, 0.55) 0%,
+      rgba(0, 116, 255, 0) 100%
+    );
+  box-shadow: inset 0px 0px 56px 0px rgba(100, 191, 255, 0.5);
+  border: 2px solid;
+  border-image: linear-gradient(
+      180deg,
+      rgba(21, 150, 255, 1),
+      rgba(0, 157, 227, 0)
+    )
+    2 2;
+
+  :deep(.el-table) {
+    --el-table-bg-color: none;
+    --el-table-tr-bg-color: none;
+    --el-table-header-bg-color: none;
+    background: none;
+    border: none;
+    --el-table-text-color: #fff;
+    --el-table-header-text-color: #fff;
+  }
+
+  .tabChoose {
+    width: 100%;
+    height: 50px;
+    margin-bottom: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    span {
+      font-size: 20px;
+      line-height: 36px;
+      cursor: pointer;
+    }
+    .tabs {
+      width: 252px;
+      text-align: center;
+      font-size: 20px;
+      color: rgba(255, 255, 255, 0.7);
+      line-height: 29px;
+      letter-spacing: 2px;
+      text-shadow: 0px 2px 4px #00405f;
+    }
+    .choosed {
+      width: 252px;
+      text-align: center;
+      font-size: 20px;
+      color: #fff;
+      line-height: 29px;
+      letter-spacing: 2px;
+      text-shadow: 0px 2px 4px #00405f,
+        inset 0px -2px 2px rgba(255, 255, 255, 0.65);
+      background-image: url(@/assets/dialogTab.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+}
+
+.pagePart {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  :deep(.el-pagination) {
+    --el-pagination-button-disabled-bg-color: none;
+    --el-pagination-bg-color: none;
+    --el-pagination-button-bg-color: none;
+    --el-pagination-button-color: #fff;
+    color: #fff;
+  }
+
+  :deep(.el-pagination button:disabled) {
+    background-color: rgba(0, 116, 255, 0) !important;
+  }
+  :deep(.el-pagination > .is-last) {
+    color: #ffffff;
+  }
+}
+
+.bo {
+  width: 100%;
+  display: flex;
+}
+
+.title {
+  margin: 10px auto;
+  display: flex;
+  flex-direction: column;
+
+  &_top {
+    display: flex;
+    align-items: end;
+
+    img {
+      height: 33px;
+      width: 33px;
+    }
+
+    .name {
+      font-family: PangMenZhengDao, PangMenZhengDao;
+      font-weight: 600;
+      font-size: 33px;
+      color: #ffffff;
+      line-height: 38px;
+      text-align: center;
+      font-style: normal;
+      letter-spacing: 2px;
+      background: linear-gradient(180deg, #ffffff 0%, #51ffef 100%);
+      -webkit-background-clip: text;
+      /*将设置的背景颜色限制在文字中*/
+      -webkit-text-fill-color: transparent;
+      /*给文字设置成透明*/
+    }
+  }
+
+  &_botton {
+    margin-top: 5px;
+    height: 19px;
+  }
+}
+</style>

src/view/dialog/dialogEc.vue

@@ -0,0 +1,262 @@
+
+<template>
+  <div class="dialogPage">
+    <el-dialog
+      v-model="dialogShowEc"
+      width="80vw"
+      :show-close="false"
+      center
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+    >
+      <template #header="{ close, titleId, titleClass }">
+        <div class="my-header">
+          <el-icon
+            size="26"
+            color="#fff"
+            @click="closeDialog"
+          >
+            <CircleCloseFilled />
+          </el-icon>
+        </div>
+      </template>
+
+      <div class="tabelPart">
+        <div class="bo">
+          <div class="title">
+            <div class="title_top">
+              <img
+                src="@/assets/images/table_l.png"
+                alt=""
+                style="margin-right: 10px"
+              />
+              <div class="name">{{ title }}详情</div>
+              <img
+                src="@/assets/images/table_r.png"
+                alt=""
+                style="margin-left: 10px"
+              />
+            </div>
+            <img
+              class="title_botton"
+              src="@/assets/images/table_c.png"
+              alt=""
+            />
+          </div>
+        </div>
+        <div style="width: 100%; height: 70vh">
+          <eL
+            :list1="data.list1"
+            :list2="data.list2"
+            :year="data.year"
+          ></eL>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script setup>
+import {
+  onMounted,
+  reactive,
+  ref,
+  onBeforeMount,
+  defineProps,
+  watch,
+  nextTick,
+} from "vue";
+import { CircleCloseFilled } from "@element-plus/icons-vue";
+import eL from "./echarts/echartLine.vue";
+
+const props = defineProps({
+  dialogShowEc: {
+    type: Boolean,
+    default: () => {
+      return false;
+    },
+  },
+  title: {
+    type: String,
+    default: () => {
+      return "";
+    },
+  },
+  list1: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+  list2: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+  year: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+});
+const emit = defineEmits(["close"]);
+
+// 详情弹框
+const dialogShowEc = ref();
+const data = reactive({
+  title: "",
+  list1: [],
+  list2: [],
+  year: [],
+  option: {},
+  bg: [],
+});
+
+// 监听
+watch(
+  () => props.dialogShowEc,
+  (newVal, oldVal) => {
+    dialogShowEc.value = newVal;
+  }
+);
+watch(
+  () => props.list1,
+  (newVal, oldVal) => {
+    data.list1 = newVal;
+  }
+);
+watch(
+  () => props.list2,
+  (newVal, oldVal) => {
+    data.list2 = newVal;
+  }
+);
+watch(
+  () => props.year,
+  (newVal, oldVal) => {
+    data.year = newVal;
+  }
+);
+// 使用生命钩子
+onMounted(() => {
+  data.title = props.title;
+  data.list1 = props.list1;
+  data.list2 = props.list2;
+  data.year = props.year;
+});
+
+const closeDialog = () => {
+  dialogShowEc.value = false;
+  emit("close");
+};
+
+</script>
+<style lang="scss" scoped>
+:deep(.el-dialog) {
+  --el-dialog-bg-color: none;
+  --el-dialog-width: 76% !important;
+}
+
+.my-header {
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.tabelPart {
+  padding: 16px;
+  background: linear-gradient(
+      270deg,
+      rgba(0, 77, 131, 0.69) 0%,
+      rgba(0, 51, 83, 0.77) 50%,
+      rgba(0, 77, 131, 0.74) 100%
+    ),
+    radial-gradient(
+      66% 40% at 50% 0%,
+      rgba(1, 150, 243, 0.55) 0%,
+      rgba(0, 116, 255, 0) 100%
+    );
+  box-shadow: inset 0px 0px 56px 0px rgba(100, 191, 255, 0.5);
+  border: 2px solid;
+  border-image: linear-gradient(
+      180deg,
+      rgba(21, 150, 255, 1),
+      rgba(0, 157, 227, 0)
+    )
+    2 2;
+
+  :deep(.el-table) {
+    --el-table-bg-color: none;
+    --el-table-tr-bg-color: none;
+    --el-table-header-bg-color: none;
+    background: none;
+    border: none;
+    --el-table-text-color: #fff;
+    --el-table-header-text-color: #fff;
+  }
+}
+
+.pagePart {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  :deep(.el-pagination) {
+    --el-pagination-button-disabled-bg-color: none;
+    --el-pagination-bg-color: none;
+    --el-pagination-button-bg-color: none;
+    --el-pagination-button-color: #fff;
+    color: #fff;
+  }
+
+  :deep(.el-pagination button:disabled) {
+    background-color: rgba(0, 116, 255, 0) !important;
+  }
+  :deep(.el-pagination > .is-last) {
+    color: #ffffff;
+  }
+}
+
+.bo {
+  width: 100%;
+  display: flex;
+}
+
+.title {
+  margin: 10px auto;
+  display: flex;
+  flex-direction: column;
+
+  &_top {
+    display: flex;
+    align-items: end;
+
+    img {
+      height: 33px;
+      width: 33px;
+    }
+
+    .name {
+      font-family: PangMenZhengDao, PangMenZhengDao;
+      font-weight: 600;
+      font-size: 33px;
+      color: #ffffff;
+      line-height: 38px;
+      text-align: center;
+      font-style: normal;
+      letter-spacing: 2px;
+      background: linear-gradient(180deg, #ffffff 0%, #51ffef 100%);
+      -webkit-background-clip: text;
+      /*将设置的背景颜色限制在文字中*/
+      -webkit-text-fill-color: transparent;
+      /*给文字设置成透明*/
+    }
+  }
+
+  &_botton {
+    margin-top: 5px;
+    height: 19px;
+  }
+}
+</style>

src/view/dialog/echarts/echartLine.vue

@@ -0,0 +1,237 @@
+<template>
+  <div ref="chart" style="width: 100%; height: 100%"></div>
+</template>
+
+<script setup >
+import { onBeforeMount, reactive, ref } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const chart = ref(); // 创建DOM引用
+
+const props = defineProps({
+  list1: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+  list2: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+  year: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+});
+
+const data = reactive({
+  list1: [],
+  list2: [],
+  year: [],
+  option: {},
+  bg: [],
+});
+
+const getOption = () => {
+  data.option = {
+    tooltip: {
+      trigger: "axis",
+      padding: [20, 10, 20, 10],
+      formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2}",
+    },
+    legend: {
+      data: ["骑行次数", "骑行时长"],
+      top: "5%",
+      right: "center",
+      textStyle: {
+        fontSize: 16,
+        color: "#ffffff",
+      },
+    },
+    grid: {
+      top: "20%",
+      left: "5%",
+      right: "5%",
+      bottom: "3%",
+      containLabel: true,
+    },
+
+    xAxis: {
+      type: "category",
+      data: data.year,
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ffffff",
+          fontSize: 16,
+        },
+      },
+    },
+    yAxis: [
+      {
+        type: "value",
+        name: "骑行次数/次",
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: "rgba(255, 255, 255, 0.2)",
+            fontSize: 16,
+            width: 1,
+          },
+        },
+        min: 0, // 设置Y轴最小值
+        max: function (value) {
+          // 自定义Y轴最大值，确保数据点显示在顶部
+          return Math.ceil(Math.max(value.max, value.max * 1.2) / 2) * 2;
+        },
+        nameTextStyle: {
+          // 设置Y轴名称的样式
+          fontSize: 14, // 这里设置字体大小为20
+        },
+        axisLabel: {
+          //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+          },
+        },
+        axisLine: {
+          //y轴线的颜色以及宽度
+          show: false,
+          lineStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+            width: 1,
+            type: "solid",
+          },
+        },
+      },
+      {
+        type: "value",
+        name: "骑行时长/时",
+        splitLine: {
+          show: false,
+          lineStyle: {
+            color: "rgba(255, 255, 255, 0.2)",
+            fontSize: 16,
+            width: 1,
+          },
+        },
+                min: 0, // 设置Y轴最小值
+        max: function (value) {
+          // 自定义Y轴最大值，确保数据点显示在顶部
+          return Math.ceil(Math.max(value.max, value.max * 1.6) / 2) * 2;
+        },
+        nameTextStyle: {
+          // 设置Y轴名称的样式
+          fontSize: 14, // 这里设置字体大小为20
+        },
+        axisLabel: {
+          //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+          },
+        },
+        axisLine: {
+          //y轴线的颜色以及宽度
+          show: false,
+          lineStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+            width: 1,
+            type: "solid",
+          },
+        },
+      },
+    ],
+
+    series: [
+      {
+        name: "背景",
+        type: "bar",
+        data: data.bg,
+        barWidth: "40%",
+        showBackground: true,
+        backgroundStyle: {
+          color: "rgba(180, 180, 180, 0.2)",
+        },
+      },
+      {
+        yAxisIndex: 0,
+        name: "骑行次数",
+        type: "line",
+        symbol: "emptyCircle",
+        symbolSize: 10,
+        itemStyle: {
+          borderColor: "#2468FF",
+          borderWidth: 1,
+          color: "#2468FF",
+        },
+        label: {
+          show: true,
+          color: "#ffffff",
+          formatter: function (data) {
+            return data.value;
+          },
+        },
+
+        data: data.list1,
+      },
+      {
+        yAxisIndex: 1,
+        name: "骑行时长",
+        type: "line",
+        symbol: "emptyCircle",
+
+        symbolSize: 10,
+        itemStyle: {
+          borderColor: "#00FCFF",
+          borderWidth: 1,
+          color: "#00FCFF",
+        },
+        label: {
+          show: true,
+          color: "#ffffff",
+          formatter: function (data) {
+            return data.value;
+          },
+        },
+        data: data.list2,
+      },
+    ],
+  };
+};
+
+const setChart = () => {
+  // Vue3中： 需要引入
+  var myChart = echarts.init(chart.value);
+
+  // 使用刚指定的配置项和数据显示图表。
+  myChart.setOption(data.option);
+};
+
+// 使用生命钩子
+// 使用生命钩子
+onBeforeMount(() => {
+  setTimeout(() => {
+    data.list1 = props.list1;
+    data.list2 = props.list2;
+    data.year = props.year;
+    data.year.forEach(() => {
+      data.bg.push(0);
+    });
+    getOption();
+    setChart();
+  }, 600);
+});
+</script>
+
+<style scoped>
+</style>

src/view/dialog/echarts/tabLine.vue

@@ -0,0 +1,171 @@
+<template>
+  <div ref="chart" style="width: 100%; height: 100%"></div>
+</template>
+
+<script setup >
+import { onBeforeMount, reactive, ref } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const chart = ref(); // 创建DOM引用
+
+const props = defineProps({
+  list1: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+  year: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+});
+
+const data = reactive({
+  list1: [],
+  year: [],
+  option: {},
+  bg: [],
+});
+
+const getOption = () => {
+  data.option = {
+    tooltip: {
+      trigger: "axis",
+      padding: [20, 10, 20, 10],
+      formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2}",
+    },
+    legend: {
+      data: ["骑行次数"],
+      top: "5%",
+      right: "center",
+      textStyle: {
+        fontSize: 16,
+        color: "#ffffff",
+      },
+      show: false,
+    },
+    grid: {
+      top: "5%",
+      left: "5%",
+      right: "5%",
+      bottom: "3%",
+      containLabel: true,
+    },
+
+    xAxis: {
+      type: "category",
+      data: data.year,
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ffffff",
+          fontSize: 16,
+        },
+      },
+    },
+    yAxis: [
+      {
+        type: "value",
+        name: "骑行次数/次",
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: "rgba(255, 255, 255, 0.2)",
+            fontSize: 16,
+            width: 1,
+          },
+        },
+        min: 0, // 设置Y轴最小值
+        max: function (value) {
+          // 自定义Y轴最大值，确保数据点显示在顶部
+          return Math.ceil(Math.max(value.max, value.max * 1.2) / 2) * 2;
+        },
+        nameTextStyle: {
+          // 设置Y轴名称的样式
+          fontSize: 14, // 这里设置字体大小为20
+        },
+        axisLabel: {
+          //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+          },
+        },
+        axisLine: {
+          //y轴线的颜色以及宽度
+          show: false,
+          lineStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+            width: 1,
+            type: "solid",
+          },
+        },
+      },
+    ],
+
+    series: [
+      {
+        name: "背景",
+        type: "bar",
+        data: data.bg,
+        barWidth: "40%",
+        showBackground: true,
+        backgroundStyle: {
+          color: "rgba(180, 180, 180, 0.2)",
+        },
+      },
+      {
+        yAxisIndex: 0,
+        name: "骑行次数",
+        type: "line",
+        symbol: "emptyCircle",
+        symbolSize: 10,
+        itemStyle: {
+          borderColor: "#2468FF",
+          borderWidth: 1,
+          color: "#2468FF",
+        },
+        label: {
+          show: true,
+          color: "#ffffff",
+          formatter: function (data) {
+            return data.value;
+          },
+        },
+
+        data: data.list1,
+      },
+    ],
+  };
+};
+
+const setChart = () => {
+  // Vue3中： 需要引入
+  var myChart = echarts.init(chart.value);
+
+  // 使用刚指定的配置项和数据显示图表。
+  myChart.setOption(data.option);
+};
+
+// 使用生命钩子
+// 使用生命钩子
+onBeforeMount(() => {
+  setTimeout(() => {
+    data.list1 = props.list1;
+    data.year = props.year;
+    data.year.forEach(() => {
+      data.bg.push(0);
+    });
+    getOption();
+    setChart();
+  }, 600);
+});
+</script>
+
+<style scoped>
+</style>

src/view/sy.vue

@@ -15,16 +15,13 @@
             </div>
             <div class="item_content">
               <div class="sr">
-                <span class="left">收入：</span
+                <span class="left">收入：</span><span class="right">{{ data.LivelihoodWelfare.zgylbxzsr }}万元</span>
-                ><span class="right"
-                  >{{ data.LivelihoodWelfare.zgylbxzsr }}万元</span
-                >
               </div>
-              <div class="sr" style="margin-top: 5px">
+              <div
-                <span class="left">支出：</span
+                class="sr"
-                ><span class="right"
+                style="margin-top: 5px"
-                  >{{ data.LivelihoodWelfare.zgylbxzzc }}万元</span
+              >
-                >
+                <span class="left">支出：</span><span class="right">{{ data.LivelihoodWelfare.zgylbxzzc }}万元</span>
               </div>
             </div>
           </div>
@@ -32,16 +29,13 @@
             <div class="item_title"><span class="blue">工伤</span>保险</div>
             <div class="item_content">
               <div class="sr">
-                <span class="left">收入：</span
+                <span class="left">收入：</span><span class="right">{{ data.LivelihoodWelfare.gsbxzsr }}万元</span>
-                ><span class="right"
-                  >{{ data.LivelihoodWelfare.gsbxzsr }}万元</span
-                >
               </div>
-              <div class="sr" style="margin-top: 5px">
+              <div
-                <span class="left">支出：</span
+                class="sr"
-                ><span class="right"
+                style="margin-top: 5px"
-                  >{{ data.LivelihoodWelfare.gsbxzzc }}万元</span
+              >
-                >
+                <span class="left">支出：</span><span class="right">{{ data.LivelihoodWelfare.gsbxzzc }}万元</span>
               </div>
             </div>
           </div>
@@ -51,16 +45,13 @@
             </div>
             <div class="item_content">
               <div class="sr">
-                <span class="left">收入：</span
+                <span class="left">收入：</span><span class="right">{{ data.LivelihoodWelfare.cxylbxzsr }}万元</span>
-                ><span class="right"
-                  >{{ data.LivelihoodWelfare.cxylbxzsr }}万元</span
-                >
               </div>
-              <div class="sr" style="margin-top: 5px">
+              <div
-                <span class="left">支出：</span
+                class="sr"
-                ><span class="right"
+                style="margin-top: 5px"
-                  >{{ data.LivelihoodWelfare.cxylbxzzc }}万元</span
+              >
-                >
+                <span class="left">支出：</span><span class="right">{{ data.LivelihoodWelfare.cxylbxzzc }}万元</span>
               </div>
             </div>
           </div>
@@ -70,16 +61,13 @@
             </div>
             <div class="item_content">
               <div class="sr">
-                <span class="left">收入：</span
+                <span class="left">收入：</span><span class="right">{{ data.LivelihoodWelfare.zgyilbxzsr }}万元</span>
-                ><span class="right"
-                  >{{ data.LivelihoodWelfare.zgyilbxzsr }}万元</span
-                >
               </div>
-              <div class="sr" style="margin-top: 5px">
+              <div
-                <span class="left">支出：</span
+                class="sr"
-                ><span class="right"
+                style="margin-top: 5px"
-                  >{{ data.LivelihoodWelfare.zgyilbxzzc }}万元</span
+              >
-                >
+                <span class="left">支出：</span><span class="right">{{ data.LivelihoodWelfare.zgyilbxzzc }}万元</span>
               </div>
             </div>
           </div>
@@ -89,16 +77,13 @@
             </div>
             <div class="item_content">
               <div class="sr">
-                <span class="left">收入：</span
+                <span class="left">收入：</span><span class="right">{{ data.LivelihoodWelfare.cxyilbxzsr }}万元</span>
-                ><span class="right"
-                  >{{ data.LivelihoodWelfare.cxyilbxzsr }}万元</span
-                >
               </div>
-              <div class="sr" style="margin-top: 5px">
+              <div
-                <span class="left">支出：</span
+                class="sr"
-                ><span class="right"
+                style="margin-top: 5px"
-                  >{{ data.LivelihoodWelfare.cxyilbxzzc }}万元</span
+              >
-                >
+                <span class="left">支出：</span><span class="right">{{ data.LivelihoodWelfare.cxyilbxzzc }}万元</span>
               </div>
             </div>
           </div>
@@ -115,7 +100,10 @@
           </div>
         </div>
       </div>
-      <div class="flex1" style="margin-top: 10px">
+      <div
+        class="flex1"
+        style="margin-top: 10px"
+      >
         <div class="yd_title left_2">
           <div class="animate-border">
             <i></i>
@@ -140,35 +128,41 @@
           <div class="left_2_bottom_item">
             <div class="left_2_bottom_item_shang">
               <div class="left">
-                <span class="span1">{{ jysyList[0].title }}</span
+                <span class="span1">{{ jysyList[0].title }}</span>学校师生比
-                >学校师生比
               </div>
               <div class="right">
-                <span class="span1">{{ jysyList[0].teacher }}</span
+                <span class="span1">{{ jysyList[0].teacher }}</span>:{{ jysyList[0].student }}
-                >:{{ jysyList[0].student }}
               </div>
             </div>
             <div class="left_2_bottom_item_xia">
-              <div class="csbl" :style="cs"></div>
+              <div
+                class="csbl"
+                :style="cs"
+              ></div>
             </div>
           </div>
           <div class="left_2_bottom_item">
             <div class="left_2_bottom_item_shang">
               <div class="left">
-                <span class="span2">{{ jysyList[1].title }}</span
+                <span class="span2">{{ jysyList[1].title }}</span>学校师生比
-                >学校师生比
               </div>
               <div class="right">
                 {{ jysyList[1].teacher }}:{{ jysyList[1].student }}
               </div>
             </div>
             <div class="left_2_bottom_item_xia">
-              <div class="ncbl" :style="nc"></div>
+              <div
+                class="ncbl"
+                :style="nc"
+              ></div>
             </div>
           </div>
         </div>
       </div>
-      <div class="flex1" style="margin-top: 10px">
+      <div
+        class="flex1"
+        style="margin-top: 10px"
+      >
         <div class="yd_title left_3">
           <div class="animate-border">
             <i></i>
@@ -213,24 +207,47 @@
           />
           <div class="people_total_item left">
             <div class="number">{{ data.PopulationData.man }}</div>
-            <img src="../assets/images/sy/man.png" alt="" />
+            <img
+              src="../assets/images/sy/man.png"
+              alt=""
+            />
             <div class="sex">男性人口</div>
-            <img class="sexMove" src="../assets/images/sy/sexImg.png" alt="" />
+            <img
+              class="sexMove"
+              src="../assets/images/sy/sexImg.png"
+              alt=""
+            />
           </div>
           <div class="people_total_item2 center">
-            <img src="../assets/images/sy/people_total.png" alt="" />
+            <img
+              src="../assets/images/sy/people_total.png"
+              alt=""
+            />
             <div class="number">{{ data.PopulationData.rkzs }}</div>
             <div class="total">人口总数</div>
           </div>
           <div class="people_total_item right">
             <div class="number">{{ data.PopulationData.woman }}</div>
-            <img src="../assets/images/sy/woman.png" alt="" />
+            <img
+              src="../assets/images/sy/woman.png"
+              alt=""
+            />
             <div class="sex">女性人口</div>
-            <img class="sexMove" src="../assets/images/sy/sexImg.png" alt="" />
+            <img
+              class="sexMove"
+              src="../assets/images/sy/sexImg.png"
+              alt=""
+            />
           </div>
         </div>
-        <ePie2 style="margin-top: 20px" :list="data.ageRatio"></ePie2>
+        <ePie2
-        <ePie style="margin-bottom: 20px" :list="data.ageGroup"></ePie>
+          style="margin-top: 20px"
+          :list="data.ageRatio"
+        ></ePie2>
+        <ePie
+          style="margin-bottom: 20px"
+          :list="data.ageGroup"
+        ></ePie>
         <div class="table">
           <div class="table_choose">
             <div
@@ -260,13 +277,20 @@
             :header-cell-style="tableHeaderColor"
             v-if="choose == '1'"
           >
-            <el-table-column prop="company" label="企业名称" width="200" />
+            <el-table-column
+              prop="company"
+              label="企业名称"
+              width="200"
+            />
             <el-table-column
               prop="address"
               label="项目事项牵头单位"
               width="200"
             />
-            <el-table-column prop="finish" label="完成情况">
+            <el-table-column
+              prop="finish"
+              label="完成情况"
+            >
               <template #default="scope">
                 <div
                   style="letter-spacing: 3px"
@@ -277,24 +301,35 @@
               </template>
             </el-table-column>
           </el-table>
-          <div class="qyfw" v-if="choose == '2'">
+          <div
+            class="qyfw"
+            v-if="choose == '2'"
+          >
             <div
               class="qyfw_item"
               v-for="(item, index) in qyfyList"
               :key="index"
             >
-              <img class="qyfw_item_left" :src="item.img" />
+              <img
+                class="qyfw_item_left"
+                :src="item.img"
+              />
               <div class="qyfw_item_right">
                 <div class="name">{{ item.name }}</div>
-                <img class="line" src="@/assets/images/sy/zwfw_line.png" />
+                <img
+                  class="line"
+                  src="@/assets/images/sy/zwfw_line.png"
+                />
                 <div class="number">
-                  <span>{{ item.value }}</span
+                  <span>{{ item.value }}</span>{{ item.dw }}
-                  >{{ item.dw }}
                 </div>
               </div>
             </div>
           </div>
-          <div class="zwfw" v-if="choose == '3'">
+          <div
+            class="zwfw"
+            v-if="choose == '3'"
+          >
             <div class="shang">
               <div class="shang_item">
                 <div class="title">一网通办事</div>
@@ -317,19 +352,31 @@
             </div>
             <div class="xia">
               <div class="xia_item">
-                <img class="left" src="@/assets/images/sy/zwfw_sl.png" />
+                <img
+                  class="left"
+                  src="@/assets/images/sy/zwfw_sl.png"
+                />
                 <div class="right">
                   <div class="name">平均受理时长</div>
-                  <img class="line" src="@/assets/images/sy/zwfw_line.png" />
+                  <img
+                    class="line"
+                    src="@/assets/images/sy/zwfw_line.png"
+                  />
                   <div class="time"><span>0.22</span>小时</div>
                 </div>
               </div>
               <div class="fgx"></div>
               <div class="xia_item">
-                <img class="left" src="@/assets/images/sy/zwfw_bl.png" />
+                <img
+                  class="left"
+                  src="@/assets/images/sy/zwfw_bl.png"
+                />
                 <div class="right">
                   <div class="name">平均办理时长</div>
-                  <img class="line" src="@/assets/images/sy/zwfw_line.png" />
+                  <img
+                    class="line"
+                    src="@/assets/images/sy/zwfw_line.png"
+                  />
                   <div class="time"><span>0.54</span>小时</div>
                 </div>
               </div>
@@ -357,7 +404,10 @@
           </div>
         </div>
       </div>
-      <div class="flex1" style="margin-top: 10px">
+      <div
+        class="flex1"
+        style="margin-top: 10px"
+      >
         <div class="yd_title service">
           <div class="animate-border">
             <i></i>
@@ -377,7 +427,10 @@
           </div>
         </div>
       </div>
-      <div class="flex1" style="margin-top: 10px">
+      <div
+        class="flex1"
+        style="margin-top: 10px"
+      >
         <div class="yd_title last">
           <div class="animate-border">
             <i></i>
@@ -402,7 +455,10 @@
           </div>
         </div>
       </div>
-      <div class="flex1" style="margin-top: 10px">
+      <div
+        class="flex1"
+        style="margin-top: 10px"
+      >
         <div class="yd_title last_1">
           <div class="animate-border">
             <i></i>
@@ -430,9 +486,16 @@
         </table> -->
         <div class="jtsyBox">
           <div class="jtsyBoxtop">
-            <div class="jtsyBoxtop1">
+            <div class="jtsyBoxtop1" @click="showEc('公共自行车')">
-              <img :src="data.jtsyList[0].img" alt="" />
+              <img
-              <img src="../assets/images/sy/jtsy.gif" class="turn" alt="" />
+                :src="data.jtsyList[0].img"
+                alt=""
+              />
+              <img
+                src="../assets/images/sy/jtsy.gif"
+                class="turn"
+                alt=""
+              />
               <div>
                 <div class="jtsyname">{{ data.jtsyList[0].name }}</div>
                 <div class="jtsytext">
@@ -446,8 +509,15 @@
               </div>
             </div>
             <div class="jtsyBoxtop1">
-              <img :src="data.jtsyList[1].img" alt="" />
+              <img
-              <img src="../assets/images/sy/jtsy.gif" class="turn" alt="" />
+                :src="data.jtsyList[1].img"
+                alt=""
+              />
+              <img
+                src="../assets/images/sy/jtsy.gif"
+                class="turn"
+                alt=""
+              />
               <div>
                 <div class="jtsyname">{{ data.jtsyList[1].name }}</div>
                 <div class="jtsytext">
@@ -462,9 +532,16 @@
             </div>
           </div>
           <div class="jtsyBoxbot">
-            <div class="jtsyBoxtop1">
+            <div class="jtsyBoxtop1" @click="showTab('公共汽车')">
-              <img :src="data.jtsyList[2].img" alt="" />
+              <img
-              <img src="../assets/images/sy/jtsy.gif" class="turn" alt="" />
+                :src="data.jtsyList[2].img"
+                alt=""
+              />
+              <img
+                src="../assets/images/sy/jtsy.gif"
+                class="turn"
+                alt=""
+              />
               <div>
                 <div class="jtsyname">{{ data.jtsyList[2].name }}</div>
                 <div class="jtsytext">
@@ -478,8 +555,15 @@
               </div>
             </div>
             <div class="jtsyBoxtop1">
-              <img :src="data.jtsyList[3].img" alt="" />
+              <img
-              <img src="../assets/images/sy/jtsy.gif" class="turn" alt="" />
+                :src="data.jtsyList[3].img"
+                alt=""
+              />
+              <img
+                src="../assets/images/sy/jtsy.gif"
+                class="turn"
+                alt=""
+              />
               <div>
                 <div class="jtsyname">{{ data.jtsyList[3].name }}</div>
                 <div class="jtsytext">
@@ -493,8 +577,15 @@
               </div>
             </div>
             <div class="jtsyBoxtop1">
-              <img :src="data.jtsyList[4].img" alt="" />
+              <img
-              <img src="../assets/images/sy/jtsy.gif" class="turn" alt="" />
+                :src="data.jtsyList[4].img"
+                alt=""
+              />
+              <img
+                src="../assets/images/sy/jtsy.gif"
+                class="turn"
+                alt=""
+              />
               <div>
                 <div class="jtsyname">{{ data.jtsyList[4].name }}</div>
                 <div class="jtsytext">
@@ -535,6 +626,28 @@
         </div>
       </template>
     </Dialog>
+    <DialogEc
+      :dialogShowEc="dialogShowEc"
+      :title="dataEc.title"
+      :list1="dataEc.list1"
+      :list2="dataEc.list2"
+      :year="dataEc.year"
+      @close="close"
+    >
+    </DialogEc>
+    <DialogTab
+      :dialogShowTab="dialogShowTab"
+      :title="dataTab.title"
+      :list1="dataTab.list1"
+      :list2="dataTab.list2"
+      :year="dataTab.year"
+      :columns="dataTab.columns"
+      :tableData="dataTab.data"
+      :pagination="pagination"
+      @handle="handlePagination"
+      @close="close"
+    >
+    </DialogTab>
   </div>
 </template>
 
@@ -557,6 +670,8 @@ import ggjtimg3 from "../assets/images/sy/ggjt3.png";
 import ggjtimg4 from "../assets/images/sy/ggjt4.png";
 
 import Dialog from "./dialog/dialog.vue";
+import DialogEc from "./dialog/dialogEc.vue";
+import DialogTab from "./dialog/dialogTab.vue";
 import { ref, reactive, onMounted, onBeforeMount, computed } from "vue";
 import http from "@/utils/request.js";
 import { CircleCloseFilled } from "@element-plus/icons-vue";
@@ -567,6 +682,8 @@ import qyfw3 from "../assets/images/sy/shqys.png";
 import qyfw4 from "../assets/images/sy/dxje.png";
 // 详情弹框
 const dialogShow = ref(false);
+const dialogShowEc = ref(false);
+const dialogShowTab = ref(false);
 //表格列
 const columnss = reactive({
   就业培训: [
@@ -708,7 +825,36 @@ const showDialog = (title, url) => {
 
 const close = () => {
   dialogShow.value = false;
+  dialogShowEc.value = false;
+  dialogShowTab.value = false;
 };
+// 交通事业-自行车，电动车
+const dataEc = reactive({
+  title: '',
+  list1: [],
+  list2: [],
+  year: [],
+})
+// 交通事业-公交，高铁，大巴
+const dataTab = reactive({
+  title: '',
+  list1: [],
+  list2: [],
+  year: [],
+  columns: [{
+      label: "班次",
+      property: "bc",
+    },
+    {
+      label: "始发站-终点站",
+      property: "sfzd",
+    },
+    {
+      label: "始发时间",
+      property: "time",
+    },],
+  data: [],
+})
 
 const data = reactive({
   PopulationData: {
@@ -1040,16 +1186,14 @@ const jtsyList = ref([
 
 // 县城学校师生比样式
 const cs = computed(() => {
-  let str = `--teacher: ${jysyList.value[0].teacher}; --total: ${
+  let str = `--teacher: ${jysyList.value[0].teacher}; --total: ${jysyList.value[0].teacher + jysyList.value[0].student
-    jysyList.value[0].teacher + jysyList.value[0].student
+    }`;
-  }`;
   return str;
 });
 // 农村学校师生比样式
 const nc = computed(() => {
-  let str = `--teacher: ${jysyList.value[1].teacher}; --total: ${
+  let str = `--teacher: ${jysyList.value[1].teacher}; --total: ${jysyList.value[1].teacher + jysyList.value[1].student
-    jysyList.value[1].teacher + jysyList.value[1].student
+    }`;
-  }`;
   return str;
 });
 // 服务表格样式
@@ -1246,6 +1390,38 @@ const qyfyList = reactive([
 onBeforeMount(async () => {
   getData();
 });
+
+// 交通事业弹框
+const showEc = (val) => {
+  dataEc.title = val
+  dataEc.list1 = [1,2,3,4,5,6,7,8,9,10,11,122]
+  dataEc.list2 = [1,2,3,4,5,6,7,8,9,10,11,112]
+  dataEc.year = [1,2,3,4,5,6,7,8,9,10,11,12]
+  dialogShowEc.value = true
+}
+const showTab = (val) => {
+  dataTab.title = val
+  dataTab.list1 = [1,2,3,4,5,6,7,8,9,10,11,122]
+  dataTab.year = [1,2,3,4,5,6,7,8,9,10,11,12]
+  dataTab.data = [
+    {
+      bc: 'G13214',
+      sfzd: 'A-B',
+      time: '2024-06-11'
+    },
+    {
+      bc: 'G13214',
+      sfzd: 'A-B',
+      time: '2024-06-11'
+    },
+    {
+      bc: 'G13214',
+      sfzd: 'A-B',
+      time: '2024-06-11'
+    }
+  ]
+  dialogShowTab.value = true
+}
 </script>
 
 <style lang="scss" scoped>