工单，数据中心用户查看数据的权限，合同考核每日，以及导出每日和按月

zxl

2025-06-19 3c6bdb6f439ff7af04765259fd6a91b6d201d095

 src/views/screen/components/select-item/index.vue

@@ -1,12 +1,46 @@
<template>
  <div class="select-container">
    <div class="type-select">
      <div class="select-label">数据源</div>
      <el-select v-model="typeValue" popper-class="type-select" class="select-style" @change="setConfig">
        <el-option v-for="item in testData1" :key="item.name" :label="item.name" :value="item.value" />
      </el-select>
    <div class="tabs-box">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          v-for="item in testData1"
          :label="item.name"
          :name="item.value"
        ></el-tab-pane>
      </el-tabs>
    </div>

    <!-- <div class="type-select">
      <div class="select-label">数据源</div>
      <el-select
        v-model="typeValue"
        popper-class="type-select"
        class="select-style"
        @change="setConfig"
      >
        <el-option
          v-for="item in testData1"
          :key="item.name"
          :label="item.name"
          :value="item.value"
        />
      </el-select>
    </div> -->
    <!-- <div class="local-select">
      <div class="select-label">地区</div>
      <el-select
        v-model="localValue"
        popper-class="type-select"
        class="select-style"
        @change="setConfig"
      >
        <el-option
          v-for="item in testData2"
          :key="item.name"
          :label="item.name"
          :value="item.value"
        />
      </el-select>
    </div> -->
    <div class="date-select">
      <div class="select-label">日期</div>
      <el-date-picker
@@ -19,7 +53,6 @@
        @change="setConfig"
      />
    </div>

  </div>
</template>

@@ -28,51 +61,149 @@
  data() {
    return {
      typeValue: 1,
      localValue: 1,
      dateValue: new Date(),
      activeName: 1,

      testData1: [
        {
          name: '省厅',
          value: 1
          name: "省厅数据",
          value: 1,
        },
        {
          name: '市厅',
          value: 2
          name: "市局数据",
          value: 2,
        },
        {
          name: '公安部',
          value: 3
        }
      ]
    }
          name: "公安部数据",
          value: 3,
        },
      ],
      testData2: [
        {
          name: "富顺县",
          value: 1,
        },
        {
          name: "荣县",
          value: 2,
        },
        {
          name: "高新区",
          value: 3,
        },
        {
          name: "自流井区",
          value: 4,
        },
        {
          name: "贡井区",
          value: 5,
        },
        {
          name: "大安区",
          value: 6,
        },
        {
          name: "沿滩区",
          value: 7,
        },
      ],
    };
  },
  methods: {
    setConfig() {

    }
  }
}
    setConfig() {},
    handleClick() {},
  },
};
</script>

<style lang="scss" scoped>
.select-container {
  position: absolute;
  top: 30px;
  left: 20px;
  top: 0px;
  left: 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  .select-label {
    font-size: 20px;
    margin-right: 10px;
    color: #2375f0;
    flex-shrink: 0;
  }

  .local-label {
    font-size: 20px;
    margin-right: 10px;
    color: #2375f0;
    flex-shrink: 0;
  }

  .type-select {
    display: flex;
    align-items: center;
    margin-right: 20px;
    width: 200px;
  }

  .local-select {
    display: flex;
    align-items: center;
    margin-right: 20px;
    width: 200px;
  }

  .date-select {
    display: flex;
    align-items: center;
    width: 320px;
    margin-top: -15px;
  }
}
</style>
::v-deep .tabs-box {
  margin-top: 5px;
  width: 40%;
  .el-tabs__item {
    color: #ffffff !important;
    font-size: 20px;
  }
  .is-active {
    color: #66b5ff !important;
    background: url("../../../../assets/images/screen/button1.png");
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
  }
}
::v-deep .el-input__inner {
  background: rgba(67, 102, 155, 0.4) !important;
  color: #4481dd;
  border-color: #4481dd !important;
}

::v-deep .date-select .el-range-input {
  background-color: transparent !important;
  color: #4481dd;
}
::v-deep .date-select .el-date-editor .el-range-separator {
  color: #4481dd !important;
}
// }
/* 去掉tabs标签栏下的下划线 */
::v-deep .el-tabs__nav-wrap::after {
  position: static !important;
  /* background-color: #fff; */
}
/* 下划线切换高亮 */
::v-deep .el-tabs__active-bar {
  background-color: #4481dd;
}
::v-deep .el-tabs__item {
  margin: 5px 30px;
  padding: 0px 25px !important;
  border-radius: 5px;
  background: url("../../../../assets/images/screen/button.png");
}
</style>