VUE文件引入另一个VUE文件，并传递参数

最新推荐文章于 2024-04-30 15:10:46 发布

原创最新推荐文章于 2024-04-30 15:10:46 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

博客主要介绍了VUE文件引入另一个VUE文件并传递参数的方法。通过具体代码展示，如使用:spotTotalDownParams传递参数，在另一个VUE文件中定义props接收。还给出了主VUE文件和被引用文件的代码，最后进行了总结记录。

VUE文件引入另一个VUE文件，并传递参数

一、代码及解释

spot-total-down、each-equipment-down、head-user-down引入的VUE文件，
:spotTotalDownParams="spotTotalDownParams"用来传递参数
另一个VUE文件中：定义spotTotalDownParams接收
const props = defineProps({
visible: {
type: Boolean,
default: false
},
spotTotalDownParams: {
type: Object,
}
})

<spot-total-down :visible="visible" :spotTotalDownParams="spotTotalDownParams" @closeModal="visible = false"/>
<each-equipment-down :visible="visible1" :spotTotalDownParams="spotTotalDownParams" @closeModal="visible1 = false"/>
<head-user-down :visible="visible2" :spotTotalDownParams="spotTotalDownParams" @closeModal="visible2 = false"/>

主VUE文件代码

<template>
  <a-card style="height: 100%" ref="logIndex">
    <div class="log-header" style="display: flex">
      <div class="title-date" >
        <a-date-picker v-model:value="years" picker="year" format="YYYY" valueFormat="YYYY" />
        <a-button type="primary" preIcon="ant-design:search-outlined" style="margin-right: 15px;"
          @click="queryClick">查询</a-button>
      </div>
      <div style="position: relative;margin-left: 355px">
        <div style="color: black;font-size: x-large;border-radius: 10px;">
          <b>U09消防设施点检数据分析</b>
        </div>
        <div>
          <a-tooltip>
            <template #title>点击跳转至点检系统</template>
            <a class="tu-item" @click="spotIndex"></a>
          </a-tooltip>

        </div>

      </div>

    </div>
    <div class="box-content">
      <div class="title-z" style="width: 40%;height: 30px;">
        总览
      </div>
      <div class="title-z" style="width: 60%;height: 30px;">
        消防设备点检完成率
      </div>
      <div class="log-content" style="width: 40%;height: 335px;">
        <div class="content-item" style="margin-top: 20px">
          <div class="card-header" style="display: flex;align-items: center;">
            <div class="card-title" style="width: 23%;height: 300px;">
<!--              <div style="width: 100%;height: 100px;"></div>-->
              <div style="width: 100%;height: 100px;">
                <div style="text-align: center;"><a style="color:red;" class="a-title1" @click="spotTotalDownClick('all','消火栓')">{{xhsTotal}}</a></div>
                <div style="font-size: 16px"><b>消防栓总量</b></div>
              </div>
              <div style="width: 100%;height: 100px;">
                <div style="text-align: center;"><a style="color:red;" class="a-title1" @click="spotTotalDownClick('all','灭火器')">{{mhqTotal}}</a></div>
                <div style="font-size: 16px"><b>灭火器总量</b></div>
              </div>
              <div style="width: 100%;height: 100px;">
                <div style="text-align: center;"><a style="color:red;" class="a-title1" @click="spotTotalDownClick('all','安全出口')">{{aqckTotal}}</a></div>
                <div style="font-size: 16px"><b>安全出口总量</b></div>
              </div>
            </div>
            <div class="card-title" style="width: 20%;height: 300px">
<!--              <div style="width: 78%;height: 125px;display: flex;align-items: center">-->
<!--                <div class="total-title-item">正常</div>-->
<!--              </div>-->

              <div class="a-content" style="background-color: #68fe9a">
                <a class="a-title" @click="spotTotalDownClick('0','消火栓')">{{xhsZc}}</a>
                <div>正常</div>
              </div>
              <div class="a-content" style="background-color: #68fe9a">
                <a class="a-title" @click="spotTotalDownClick('0','灭火器')">{{mhqZc}}</a>
                <div>正常</div>
              </div>
              <div class="a-content" style="background-color: #68fe9a">
                <a class="a-title" @click="spotTotalDownClick('0','安全出口')">{{aqckZc}}</a>
                <div>正常</div>
              </div>
            </div>
            <div class="card-title" style="width: 20%;height: 300px">
<!--              <div style="width: 78%;height: 125px;display: flex;align-items: center">-->
<!--                <div class="total-title-item">待点检</div>-->
<!--              </div>-->
              <div class="a-content" style="background-color: #fed966">
                <a class="a-title" @click="spotTotalDownClick('5','消火栓')">{{xhsDdj}}</a>
                <div>待点检</div>
              </div>
              <div class="a-content" style="background-color: #fed966">
                <a class="a-title" @click="spotTotalDownClick('5','灭火器')">{{mhqDdj}}</a>
                <div>待点检</div>
              </div>
              <div class="a-content" style="background-color: #fed966">
                <a class="a-title" @click="spotTotalDownClick('5','安全出口')">{{aqckDdj}}</a>
                <div>待点检</div>
              </div>
            </div>
            <div class="card-title" style="width: 20%;height: 300px">
<!--              <div style="width: 78%;height: 125px;display: flex;align-items: center">-->
<!--                <div class="total-title-item">超期未点检</div>-->
<!--              </div>-->
              <div class="a-content" style="background-color: #ffff00">
                <a class="a-title" @click="spotTotalDownClick('6','消火栓')">{{xhsCq}}</a>
                <div>超期未点检</div>
              </div>
              <div class="a-content" style="background-color: #ffff00">
                <a class="a-title" @click="spotTotalDownClick('6','灭火器')">{{mhqCq}}</a>
                <div>超期未点检</div>
              </div>
              <div class="a-content" style="background-color: #ffff00">
                <a class="a-title" @click="spotTotalDownClick('6','安全出口')">{{aqckCq}}</a>
                <div>超期未点检</div>
              </div>
            </div>
            <div class="card-title" style="width: 20%;height: 300px">
<!--              <div style="width: 100%;height: 125px;display: flex;align-items: center">-->
<!--                <div class="total-title-item">维修/保养/报废</div>-->
<!--              </div>-->
              <div class="a-content" style="background-color: #d9d9d9">
                <a class="a-title" @click="spotTotalDownClick('1,2,3','消火栓')">{{xhsBwb}}</a>
                <div>维修/保养/报废</div>
              </div>
              <div class="a-content" style="background-color: #d9d9d9">
                <a class="a-title" @click="spotTotalDownClick('1,2,3','灭火器')">{{mhqBwb}}</a>
                <div>维修/保养/报废</div>
              </div>
              <div class="a-content" style="background-color: #d9d9d9">
                <a class="a-title" @click="spotTotalDownClick('1,2,3','安全出口')">{{aqckBwb}}</a>
                <div>维修/保养/报废</div>
              </div>
            </div>
          </div>
        </div>
      </div>
        <div class="log-content" style="width: 60%;height: 335px;">
          <div class="content-item">
            <spot-fee-echart-init :option="xhsWcOption" style="width: 100%; height: 100%" @chartClick="(params) => chartClick(params,'消火栓','')"></spot-fee-echart-init>
          </div>
        </div>
<!--      <div style="width: 100%;height: 10px"></div>-->
      <div class="title-z" style="width: 40%;height: 30px;">
        负责人点检率
      </div>
      <div class="title-z" style="width: 60%;height: 30px;">
        消防设备异常数量
      </div>
      <div class="log-content" style="width: 40%;height: 335px;">
        <div class="content-item">
          <spot-pie-echart-init :option="headUserOption" style="width: 100%; height: 100%" @chartPieClick="(params) => chartPieClick(params)" ></spot-pie-echart-init>
        </div>
      </div>

      <div class="log-content" style="width: 60%;height: 335px;">
        <div class="content-item">
          <spot-fee-echart-init :option="xhsYcOption" style="width: 100%; height: 100%" @chartClick="(params) => chartClick(params,'消火栓','N')"></spot-fee-echart-init>
        </div>
      </div>
    </div>
    <spot-total-down :visible="visible" :spotTotalDownParams="spotTotalDownParams" @closeModal="visible = false"/>
    <each-equipment-down :visible="visible1" :spotTotalDownParams="spotTotalDownParams" @closeModal="visible1 = false"/>
    <head-user-down :visible="visible2" :spotTotalDownParams="spotTotalDownParams" @closeModal="visible2 = false"/>
  </a-card>
</template>

<script setup lang="ts">
import {
  spotTotal,
  eachEquipment,
  eachEquipmentYc,
  headUserCase,
} from './spotFeePage.api';
import spotTotalDown from './drillDown/spotTotalDown.vue'
import eachEquipmentDown from './drillDown/eachEquipmentDown.vue'
import headUserDown from './drillDown/headUserDown.vue'
import {
  xhsWcOption,
  xhsYcOption,
  headUserOption
} from "./spotFeeData"
import {onBeforeMount, reactive, ref} from 'vue'
import spotFeeEchartInit from "./components/spotFeeEchartInit.vue"
import spotPieEchartInit from "./components/spotPieEchartInit.vue"
import dayjs from "dayjs";
import { message as Message } from 'ant-design-vue'
const years = ref(dayjs().format("YYYY"))
const visible = ref(false)
const visible1 = ref(false)
const visible2 = ref(false)
//total数据显示
const mhqTotal = ref('')
const mhqZc = ref('')
const mhqDdj = ref('')
const mhqCq = ref('')
const mhqBwb = ref('')
const xhsTotal = ref('')
const xhsZc = ref('')
const xhsDdj = ref('')
const xhsCq = ref('')
const xhsBwb = ref('')
const aqckTotal = ref('')
const aqckZc = ref('')
const aqckDdj = ref('')
const aqckCq = ref('')
const aqckBwb = ref('')
//total下钻传参
const spotTotalDownParams = reactive({
  year:'',
  patrol:'',
  month:'',
  sbState:'',
  sbName:'',
  headUser:''
})


const totalView = async () => {
  const res = await spotTotal();
  xhsTotal.value = res.result?.XHS.total
  xhsZc.value = res.result?.XHS.zc
  xhsDdj.value = res.result?.XHS.ddj
  xhsCq.value = res.result?.XHS.cq
  xhsBwb.value = res.result?.XHS.bwb

  mhqTotal.value = res.result?.MHQ.total
  mhqZc.value = res.result?.MHQ.zc
  mhqDdj.value = res.result?.MHQ.ddj
  mhqCq.value = res.result?.MHQ.cq
  mhqBwb.value = res.result?.MHQ.bwb

  aqckTotal.value = res.result?.AQCK.total
  aqckZc.value = res.result?.AQCK.zc
  aqckDdj.value = res.result?.AQCK.ddj
  aqckCq.value = res.result?.AQCK.cq
  aqckBwb.value = res.result?.AQCK.bwb
};
const xhsWcView = async () => {
  const params = {
    years: years.value,
  };
  const res = await eachEquipment(params);
  xhsWcOption.xAxis[0].data = res.result?.XHS.month
  xhsWcOption.series[0].data = res.result?.XHS.data
  xhsWcOption.series[1].data = res.result?.MHQ.data
  xhsWcOption.series[2].data = res.result?.AQCK.data
};

const headUserView = async () => {
  const params = {
    yearMonth: years.value,
  };
  const res = await headUserCase(params);
  headUserOption.yAxis[0].data = res.result?.headUser
  headUserOption.series[0].data = res.result?.headUserRate
};

const xhsYcView = async () => {
  const params = {
    years: years.value,
  };
  const res = await eachEquipmentYc(params);
  xhsYcOption.xAxis[0].data = res.result?.XHS.month
  xhsYcOption.series[0].data = res.result?.XHS.data
  xhsYcOption.series[1].data = res.result?.MHQ.data
  xhsYcOption.series[2].data = res.result?.AQCK.data
};

//total模块点击
const spotTotalDownClick = async (sbState, sbName) => {
    spotTotalDownParams.year = years.value
    spotTotalDownParams.sbState = sbState
    spotTotalDownParams.sbName = sbName
    visible.value = true
}
//柱状图点击
const chartClick = async (params,name,patrol) => {
  spotTotalDownParams.year = years.value
  spotTotalDownParams.month = params.name
  spotTotalDownParams.sbName = params.seriesName
  spotTotalDownParams.patrol = patrol
  visible1.value = true
}
const chartPieClick = async (params) => {
  spotTotalDownParams.headUser = params.name
  visible2.value = true
}

const queryClick = async () => {
  totalView();
  xhsWcView();
  xhsYcView();
  headUserView();
}

const spotIndex = async() => {
  window.open('http://10.10.32.225:8077/login', '_blank')  //在新的tab页

}


onBeforeMount(async () => {
  try {
    await queryClick()
  } catch (e) {
    console.log(e)
  }
})

</script>

<style scoped lang="less">
.total-box {
  height: 80px;
  margin-top: 16px;
  display: flex;
  justify-content: space-between;

  .total-item {
    width: 100%;
    // background-color: #fafafa;


  }
}

.item-text {
  height: 40px;
  font-size: 18px;
  color: #00bb00;
  background-color: #e9ebec;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tu-item{
  width: 30px;
  height: 30px;
  position: absolute;
  bottom: 4px;
  left: 300px;
  background: url(./right.svg) no-repeat center center;
  background-size: 100% 100%;
}
.item-title {
  font-size: large;
  height: 24px;
  display: flex;
  background-color: #e9ebec;
  justify-content: center;
  align-items: center;
}
.a-content{
  width: 100%;
  height: 80px;
  //display: flex;
  align-items: baseline;
  margin-bottom: 20px;
}
.a-title{
  font-size: 18px;
  font-weight: bolder;
  color: black;
}
.a-title1{
  font-size: 35px;
}
.title-z{
  font-weight: bolder;
  font-size: 16px;
  text-align: center;
}

.box-content {
  display: flex;
  margin-top: 1%;
  flex-wrap: wrap;
  justify-content: space-between;
}
.title-item{
  background-color: blue;
  color: white;
  font-size: 30px;
  margin:0px auto;
  width: 170px;
  text-align: center;
}
.total-title-item{
  background-color: blue;
  color:white;
  font-size: 20px;
  text-align: center;
  height: 73px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.log-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .content-item {
    width: 100%;
    height: 100%;
    // background-color: #fff;
    //border: 1px solid rgba(0, 0, 0, 1.07);
    //box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.8);
    border-radius: 10px;
    }

}
.red {
  color: red;
}
.green {
  color: #00bb00;
}
</style>

被引用文件的代码

<template>
  <a-modal :visible="props.visible" :width="1200" title="详情" @cancel="closeModal" @ok="closeModal">

    <a-table :columns="columns" :data-source="tableData"></a-table>
  </a-modal>
</template>

<script lang="ts" name="spotTotalDown" setup>
import type { TableColumnsType } from 'ant-design-vue';
import {onBeforeMount, ref, toRaw, watch} from 'vue';
import { getSpotTotalDown } from "../spotFeePage.api";
const emit = defineEmits(['closeModal'])
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  spotTotalDownParams: {
    type: Object,
  }
})


const columns: TableColumnsType = [

  {
    title: '序号',
    customRender: ({ index }: { index: number }) => {
      return `${index + 1}`
    },
    width: 100
  },

  { title: '设备编码', width: 100, dataIndex: 'CODE'},
  { title: '设备名称', width: 100, dataIndex: 'NAME'},
  { title: '责任人', dataIndex: 'HEAD_USER', width: 100 },
  { title: '责任人EMAIL', dataIndex: 'EMAIL', width: 100 },
  { title: '最近点检时间', dataIndex: 'SPOT_ZX_DATE', width: 100 },
];

const tableData = ref([])
const closeModal = () => {
  emit('closeModal')
}

const spotTotalview = async () => {

  const res = await getSpotTotalDown(toRaw(props.spotTotalDownParams));
  tableData.value = res.result
};


onBeforeMount(()=>{
})

watch(() => props.spotTotalDownParams, () => {
  spotTotalview()
}, {
  deep: true,
})

</script>

<style scoped></style>