|
|
@@ -0,0 +1,587 @@
|
|
|
+<template>
|
|
|
+ <div class="generalizationScenarioListPanel">
|
|
|
+ <search-layout :needBox="true">
|
|
|
+ <template slot="searchItem1">
|
|
|
+ <span class="label">场景名称</span>
|
|
|
+ <el-input
|
|
|
+ v-model="searchParams.sceneId"
|
|
|
+ size="small"
|
|
|
+ clearable
|
|
|
+ placeholder="请输入"
|
|
|
+ maxlength="60"
|
|
|
+ @keyup.enter.native="doSearch"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </template>
|
|
|
+ <template slot="searchItem2">
|
|
|
+ <span class="label">主车动作</span>
|
|
|
+ <el-select
|
|
|
+ v-model="searchParams.fileName"
|
|
|
+ multiple
|
|
|
+ size="small"
|
|
|
+ clearable
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in fileNameList"
|
|
|
+ :label="item.caption"
|
|
|
+ :value="item.code"
|
|
|
+ :key="item.code"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ <!-- 复杂度 -->
|
|
|
+ <template slot="searchItem3">
|
|
|
+ <span class="label">复杂度</span>
|
|
|
+ <el-input
|
|
|
+ v-model="searchParams.a"
|
|
|
+ size="small"
|
|
|
+ clearable
|
|
|
+ placeholder="请输入"
|
|
|
+ maxlength="60"
|
|
|
+ @keyup.enter.native="doSearch"
|
|
|
+ style="width: 100px"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ <span class="dateSeparator">至</span>
|
|
|
+ <el-input
|
|
|
+ v-model="searchParams.b"
|
|
|
+ size="small"
|
|
|
+ clearable
|
|
|
+ placeholder="请输入"
|
|
|
+ maxlength="60"
|
|
|
+ @keyup.enter.native="doSearch"
|
|
|
+ style="width: 100px"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </template>
|
|
|
+ <!-- 危险度 -->
|
|
|
+ <template slot="searchItem3">
|
|
|
+ <span class="label">危险度</span>
|
|
|
+ <el-input
|
|
|
+ v-model="searchParams.a"
|
|
|
+ size="small"
|
|
|
+ clearable
|
|
|
+ placeholder="请输入"
|
|
|
+ maxlength="60"
|
|
|
+ @keyup.enter.native="doSearch"
|
|
|
+ style="width: 100px"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ <span class="dateSeparator">至</span>
|
|
|
+ <el-input
|
|
|
+ v-model="searchParams.b"
|
|
|
+ size="small"
|
|
|
+ clearable
|
|
|
+ placeholder="请输入"
|
|
|
+ maxlength="60"
|
|
|
+ @keyup.enter.native="doSearch"
|
|
|
+ style="width: 100px"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </template>
|
|
|
+ <template slot="searchItem5">
|
|
|
+ <span class="label">复杂度等级</span>
|
|
|
+ <el-select
|
|
|
+ v-model="searchParams.scenarioRoadType"
|
|
|
+ multiple
|
|
|
+ size="small"
|
|
|
+ clearable
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in scenarioRoadTypeList"
|
|
|
+ :label="item.caption"
|
|
|
+ :value="item.code"
|
|
|
+ :key="item.code"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ <template slot="searchItem5">
|
|
|
+ <span class="label">危险度等级</span>
|
|
|
+ <el-select
|
|
|
+ v-model="searchParams.scenarioRoadType"
|
|
|
+ multiple
|
|
|
+ size="small"
|
|
|
+ clearable
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in scenarioRoadTypeList"
|
|
|
+ :label="item.caption"
|
|
|
+ :value="item.code"
|
|
|
+ :key="item.code"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ <!-- <template slot="searchItem3">
|
|
|
+ <span class="label">天气</span>
|
|
|
+ <el-select
|
|
|
+ v-model="searchParams.scenarioWeather"
|
|
|
+ multiple
|
|
|
+ size="small"
|
|
|
+ clearable
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in scenarioWeatherList"
|
|
|
+ :label="item.caption"
|
|
|
+ :value="item.code"
|
|
|
+ :key="item.code"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </template> -->
|
|
|
+ <!-- <template slot="searchItem4">
|
|
|
+ <span class="label">场景发生时刻</span>
|
|
|
+ <el-time-picker
|
|
|
+ v-model="searchParams.scenarioTime"
|
|
|
+ value-format="HH:mm:ss"
|
|
|
+ placeholder="请选择"
|
|
|
+ >
|
|
|
+ </el-time-picker>
|
|
|
+ </template> -->
|
|
|
+ <template slot="searchBtn1">
|
|
|
+ <el-button type="primary" @click="doSearch">查询</el-button>
|
|
|
+ </template>
|
|
|
+ <template slot="searchBtn2">
|
|
|
+ <el-button type="primary" @click="doReset">重置</el-button>
|
|
|
+ </template>
|
|
|
+ </search-layout>
|
|
|
+ <div class="btnsPanel">
|
|
|
+ <el-button type="primary" plain icon="el-icon-delete" @click="delRows"
|
|
|
+ >批量删除</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <tableList
|
|
|
+ ref="table"
|
|
|
+ style="margin: 0 30px"
|
|
|
+ :columns="columns"
|
|
|
+ :getDataWay="getDataWay"
|
|
|
+ :pagination="pagination"
|
|
|
+ :checkedData="checkedArr"
|
|
|
+ index
|
|
|
+ indexFixed
|
|
|
+ selection
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ label="操作"
|
|
|
+ slot="cgInfos"
|
|
|
+ align="center"
|
|
|
+ width="180"
|
|
|
+ fixed="right"
|
|
|
+ >
|
|
|
+ <template v-slot="scope">
|
|
|
+ <i class="el-icon-view elIcon cursor" title="查看"> </i>
|
|
|
+ <i
|
|
|
+ @click="delRow(scope.row)"
|
|
|
+ class="el-icon-delete elIcon"
|
|
|
+ title="删除"
|
|
|
+ >
|
|
|
+ </i>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </tableList>
|
|
|
+ <el-dialog
|
|
|
+ v-if="generalizationVisible"
|
|
|
+ :visible.sync="generalizationVisible"
|
|
|
+ :title="generalizationDiaTitle"
|
|
|
+ width="90%"
|
|
|
+ class="generalizationDia"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :close-on-press-escape="false"
|
|
|
+ :before-close="generalizationCancel"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <generalization-detail
|
|
|
+ ref="generalizationDetail"
|
|
|
+ :disabled="true"
|
|
|
+ :id="generalizationId"
|
|
|
+ :genUrlType="1"
|
|
|
+ ></generalization-detail>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <!-- 查看视频弹窗 -->
|
|
|
+ <el-dialog
|
|
|
+ :title="videoDiaTitle"
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ width="690px"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :close-on-press-escape="false"
|
|
|
+ :before-close="diaClose"
|
|
|
+ >
|
|
|
+ <div class="videoBox">
|
|
|
+ <video autoplay :src="videoSrc" controls></video>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <!-- 编辑表格 -->
|
|
|
+ <el-dialog
|
|
|
+ title="编辑"
|
|
|
+ :visible.sync="editVisible"
|
|
|
+ width="780px"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :close-on-press-escape="false"
|
|
|
+ :before-close="diaClose"
|
|
|
+ >
|
|
|
+ <el-form
|
|
|
+ ref="editInfo"
|
|
|
+ :model="editInfo"
|
|
|
+ label-width="150px"
|
|
|
+ style="display: flex; flex-wrap: wrap; justify-content: space-between"
|
|
|
+ >
|
|
|
+ <el-form-item label="场景名称">
|
|
|
+ <el-input v-model="editInfo.sceneName" :disabled="true"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="场景描述">
|
|
|
+ <el-input v-model="editInfo.sceneDescription"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="主车动作">
|
|
|
+ <el-select v-model="editInfo.mainBehavior"></el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="他车动作">
|
|
|
+ <el-select v-model="editInfo.otherBehavior"></el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="天气">
|
|
|
+ <el-select v-model="editInfo.weather"></el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="道路类型">
|
|
|
+ <el-select v-model="editInfo.roadType"></el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="道路几何-平面">
|
|
|
+ <el-select v-model="editInfo.roadGeometryPlane"></el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="道路几何-纵断面">
|
|
|
+ <el-select v-model="editInfo.roadGeometryVertical"></el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="自动驾驶功能">
|
|
|
+ <el-select v-model="editInfo.autoDriveFunction"></el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="运行区域">
|
|
|
+ <el-select v-model="editInfo.operationArea"></el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="标签">
|
|
|
+ <el-select v-model="editInfo.label"></el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div style="width: 100%; display: flex; justify-content: center">
|
|
|
+ <el-button @click="editVisible = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="onSubmit">立即创建</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import searchLayout from '@/components/grid/searchLayout'
|
|
|
+import tableList from '@/components/grid/TableList'
|
|
|
+import { mapState } from 'vuex'
|
|
|
+export default {
|
|
|
+ name: 'benchmarkScenarioList', // 基准场景库
|
|
|
+ components: { searchLayout, tableList },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ activeName: '2',
|
|
|
+ searchParams: {
|
|
|
+ //搜索参数
|
|
|
+ sceneId: '', // 场景编号
|
|
|
+ fileName: [], // 功能模块
|
|
|
+ scenarioRoadType: [], // 道路类型
|
|
|
+ scenarioResume: '', // 场景简述
|
|
|
+ share: '0',
|
|
|
+ // scenarioWeather: [], // 天气
|
|
|
+ // scenarioTime: "", // 场景发生时刻
|
|
|
+ },
|
|
|
+ // 编辑信息
|
|
|
+ editVisible: false,
|
|
|
+ // 编辑内容数据回填
|
|
|
+ editInfo: {
|
|
|
+ sceneName: '', //场景名称
|
|
|
+ sceneDescription: '', // 场景描述
|
|
|
+ mainBehavior: '', //主车动作
|
|
|
+ weather: '', // 天气
|
|
|
+ roadGeometryPlane: '', // 道路几何-平面
|
|
|
+ autoDriveFunction: '', // 自动驾驶功能
|
|
|
+ label: '', // 标签
|
|
|
+ otherBehavior: '', // 他车动作
|
|
|
+ roadType: '', // 道路类型
|
|
|
+ roadGeometryVertical: '', // 道路几何-纵断面
|
|
|
+ operationArea: '', // 运行区域
|
|
|
+ },
|
|
|
+ fileNameList: [],
|
|
|
+ scenarioRoadTypeList: [],
|
|
|
+ // scenarioWeatherList: [],
|
|
|
+ props: {
|
|
|
+ multiple: true,
|
|
|
+ label: 'dictName',
|
|
|
+ value: 'dictCode',
|
|
|
+ },
|
|
|
+ columns: [
|
|
|
+ //表格列
|
|
|
+ {
|
|
|
+ label: '场景名称',
|
|
|
+ prop: 'sceneName',
|
|
|
+ fixed: 'left',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '主车动作',
|
|
|
+ prop: 'mainBehavior',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '他车动作',
|
|
|
+ prop: 'otherBehavior',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '天气',
|
|
|
+ prop: 'weather',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '道路类型',
|
|
|
+ prop: 'roadType',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '道路几何-平面',
|
|
|
+ prop: 'roadGeometryPlane',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '道路几何-纵断面',
|
|
|
+ prop: 'roadGeometryVertical',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '支持智驾功能',
|
|
|
+ prop: 'autoDriveFunction',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '运行区域',
|
|
|
+ prop: 'operationArea',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '复杂度',
|
|
|
+ prop: 'complexity',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '复杂度等级',
|
|
|
+ prop: 'complexityLevel',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '危险度',
|
|
|
+ prop: 'risk',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '危险度等级',
|
|
|
+ prop: 'riskLevel',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '便签',
|
|
|
+ prop: 'label',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '场景描述',
|
|
|
+ prop: 'sceneDescription',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '操作',
|
|
|
+ prop: 'cgInfos',
|
|
|
+ template: true,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ pagination: {
|
|
|
+ //分页使用
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ position: 'right',
|
|
|
+ pageSizes: [10, 30, 50, 100, 200],
|
|
|
+ layout: 'sizes, total, prev, pager, next, jumper',
|
|
|
+ },
|
|
|
+ getDataWay: {
|
|
|
+ //加载表格数据
|
|
|
+ dataType: 'data',
|
|
|
+ type: 'post',
|
|
|
+ // firstRequest: false,
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ referenceId: 'd9b47f77cb8d4b13940dd74eef1c0d59',
|
|
|
+ referenceName: 'mountain_frontcar',
|
|
|
+ mainBehavior: '汇入',
|
|
|
+ otherBehavior: '直行',
|
|
|
+ weather: '晴',
|
|
|
+ sceneName: '20240126',
|
|
|
+ roadGeometryPlane: '直道',
|
|
|
+ roadGeometryVertical: '上坡',
|
|
|
+ autoDriveFunction: 'ACC',
|
|
|
+ lable: '标签',
|
|
|
+ referenceDescription: '场景描述',
|
|
|
+ complexity: 1,
|
|
|
+ risk: 1,
|
|
|
+ complexityLevel: 11,
|
|
|
+ riskLevel: 11,
|
|
|
+ videoAddress:
|
|
|
+ '基准场景库/20221125/1669366123893/Scenarios/mountain/simulation.mp4',
|
|
|
+ osgbAddress: '基准场景库/20221125/1669366123893/OSGB/0518.osgb',
|
|
|
+ xodrAddress: '基准场景库/20221125/1669366123893/XODR/0518.xodr',
|
|
|
+ xoscAddress:
|
|
|
+ '基准场景库/20221125/1669366123893/Scenarios/mountain/mountain_frontcar.xml',
|
|
|
+ jsonAddress:
|
|
|
+ '基准场景库/20221125/1669366123893/Scenarios/mountain/mountain_frontcar.json',
|
|
|
+ videoPreview: null,
|
|
|
+ label: null,
|
|
|
+ maxTime: '20',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ param: {
|
|
|
+ share: '0',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ generalizationVisible: false, // 泛化dialog
|
|
|
+ generalizationId: '', // 泛化详情id
|
|
|
+ generalizationDiaTitle: '',
|
|
|
+ // 视频弹窗信息
|
|
|
+ dialogVisible: false,
|
|
|
+ autoplay: false,
|
|
|
+ videoSrc: '',
|
|
|
+ objectPath: '',
|
|
|
+ videoDiaTitle: '',
|
|
|
+ checkedArr: [], // 表格多选
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ computed: {
|
|
|
+ ...mapState(['fileHost', 'fileUrl']),
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ doSearch() {
|
|
|
+ this.searchParams.share = this.activeName === '1' ? '1' : '0'
|
|
|
+ this.refreshList(this.searchParams)
|
|
|
+ },
|
|
|
+ //刷新table
|
|
|
+ refreshList(param) {
|
|
|
+ param
|
|
|
+ ? this.$refs['table'].loadData(param)
|
|
|
+ : this.$refs['table'].loadData()
|
|
|
+ },
|
|
|
+ doReset() {
|
|
|
+ this.searchParams = {
|
|
|
+ sceneId: '',
|
|
|
+ fileName: [],
|
|
|
+ scenarioRoadType: [],
|
|
|
+ scenarioResume: '',
|
|
|
+ share: this.activeName === '1' ? '1' : '0',
|
|
|
+ // scenarioWeather: [],
|
|
|
+ // scenarioTime: "",
|
|
|
+ }
|
|
|
+ this.doSearch()
|
|
|
+ },
|
|
|
+ pageControl(data) {
|
|
|
+ this.activeName = data.name
|
|
|
+ this.doSearch()
|
|
|
+ },
|
|
|
+ viewRow(row) {
|
|
|
+ this.dialogVisible = true
|
|
|
+ // this.generalizationId = row.id
|
|
|
+ // this.generalizationDiaTitle = '泛化模板- ' + (row.sceneId || '')
|
|
|
+ // this.generalizationVisible = true
|
|
|
+ },
|
|
|
+ // 编辑
|
|
|
+ editHandle() {
|
|
|
+ this.editVisible = true
|
|
|
+ },
|
|
|
+ // 跳转场景评价
|
|
|
+ jumpScene() {
|
|
|
+ this.$router.push({
|
|
|
+ path: '/sceneEvaluation',
|
|
|
+ // query: this.activeName == '3' ? { isScore: true } : {}, // 评分规则新增路由跳转标识
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getFileNameList() {
|
|
|
+ this.$axios({
|
|
|
+ method: 'post',
|
|
|
+ url: this.$api.sceneLibrary.queryType,
|
|
|
+ data: {},
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.code == 200 && res.info) {
|
|
|
+ let arr = []
|
|
|
+ res.info.forEach((item, i) => {
|
|
|
+ arr[i] = {
|
|
|
+ code: item,
|
|
|
+ caption: item,
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.fileNameList = arr
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.message || '获取功能模块列表失败')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 泛化-取消
|
|
|
+ generalizationCancel() {
|
|
|
+ this.generalizationVisible = false
|
|
|
+ },
|
|
|
+ delRows() {
|
|
|
+ let checkedArr = this.checkedArr
|
|
|
+
|
|
|
+ if (checkedArr.length <= 0) {
|
|
|
+ this.$message.info('请先选择数据')
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ // let arr = checkedArr.map((i) => i.naturalName);
|
|
|
+
|
|
|
+ // this.$confirm("确认是否批量删除？", "提示", {
|
|
|
+ // confirmButtonText: "确定",
|
|
|
+ // cancelButtonText: "取消",
|
|
|
+ // type: "warning",
|
|
|
+ // }).then(() => {
|
|
|
+ // this.$axios({
|
|
|
+ // method: "post",
|
|
|
+ // url: this.$api.sceneLibrary.batchDeleteSceneNatural,
|
|
|
+ // data: {
|
|
|
+ // naturalNameList: arr,
|
|
|
+ // },
|
|
|
+ // }).then((res) => {
|
|
|
+ // if (res.code == 200) {
|
|
|
+ // this.$message.success("删除成功");
|
|
|
+ // } else {
|
|
|
+ // this.$message.error(res.message || "删除失败");
|
|
|
+ // }
|
|
|
+ // this.doSearch();
|
|
|
+ // });
|
|
|
+ // });
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ async mounted() {
|
|
|
+ await this.$dicsListsInit({
|
|
|
+ // scenarioWeatherList: "scenarioWeather",
|
|
|
+ scenarioRoadTypeList: 'scenarioRoadType',
|
|
|
+ })
|
|
|
+
|
|
|
+ this.getFileNameList()
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang='less' scoped>
|
|
|
+@import './common/util.less';
|
|
|
+
|
|
|
+.generalizationScenarioListPanel {
|
|
|
+ .inputBox {
|
|
|
+ .label {
|
|
|
+ min-width: 90px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btnsPanel {
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .generalizationDia {
|
|
|
+ /deep/ .el-dialog__body {
|
|
|
+ position: relative;
|
|
|
+ padding: 20px 60px;
|
|
|
+
|
|
|
+ .changeBtn {
|
|
|
+ position: absolute;
|
|
|
+ top: 20px;
|
|
|
+ right: 60px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
linchengzhe