From e21e44f141542b65045a47ea4b24aae317220056 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B4=BE=E8=82=83?= <15833576927@163.com>
Date: Wed, 22 May 2024 14:02:53 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9F=BA=E5=9B=A0=E5=9E=8B=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Hamburger/index.vue            |   2 +-
 src/router/index.js                           |  14 +
 src/utils/ruoyi.js                            |  22 +-
 src/views/genoTypeData/genoManage/index.vue   | 345 ++++++++++++++++++
 .../genoTypeData/genoManage/uploadGeno.vue    |  31 ++
 src/views/system/base/baseRightControl.vue    |  17 +-
 src/views/system/base/mapMarkers.vue          |   2 +-
 7 files changed, 423 insertions(+), 10 deletions(-)
 create mode 100644 src/views/genoTypeData/genoManage/index.vue
 create mode 100644 src/views/genoTypeData/genoManage/uploadGeno.vue

diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue
index ee7bbdb..c577983 100644
--- a/src/components/Hamburger/index.vue
+++ b/src/components/Hamburger/index.vue
@@ -95,7 +95,7 @@ const menuList = ref([
   },
   {
     label: '基因型数据',icon:'chart-pie', children: [
-      {label: '基因型数据管理'},
+      {label: '基因型数据管理',href:'/genoTypeData/genoManage'},
     ]
   },
 ])
diff --git a/src/router/index.js b/src/router/index.js
index 2ef7323..7749e5b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -210,6 +210,20 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/genoTypeData',
+    component: Layout,
+    hidden: true,
+    redirect: 'noredirect',
+    children: [
+      {
+        path: 'genoManage',
+        component: () => import('@/views/genoTypeData/genoManage/index.vue'),
+        name: 'genoManage',
+        meta: { title: '作物品种管理' }
+      }
+    ]
+  },
 ]
 
 // 动态路由，基于用户权限动态去加载
diff --git a/src/utils/ruoyi.js b/src/utils/ruoyi.js
index 2e84caf..b25af51 100644
--- a/src/utils/ruoyi.js
+++ b/src/utils/ruoyi.js
@@ -382,4 +382,24 @@ export function drawGridLines(polygon, grid = 10) {
         }
     }
     return gridLines
-}
\ No newline at end of file
+}
+/**
+ * 将文件转为blob预览地址
+ * @param file
+ */
+export function fileToBlobURL(file) {
+    return new Promise((resolve, reject) => {
+        let reader = new FileReader();
+        reader.readAsArrayBuffer(file);
+        reader.onload = function (e) {
+            // The file reader gives us an ArrayBuffer:
+            let buffer = e.target.result;
+            // We have to convert the buffer to a blob:
+            //类型自动检测即可
+            let blobTemp = new Blob([new Uint8Array(buffer)], {type: file.type});
+            // The blob gives us a URL to the video file:
+            let url = window.URL.createObjectURL(blobTemp);
+            resolve(url);
+        }
+    })
+}
diff --git a/src/views/genoTypeData/genoManage/index.vue b/src/views/genoTypeData/genoManage/index.vue
new file mode 100644
index 0000000..6ca703d
--- /dev/null
+++ b/src/views/genoTypeData/genoManage/index.vue
@@ -0,0 +1,345 @@
+<!--基因型数据管理-->
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <!--用户数据-->
+      <el-col :span="24" :xs="24">
+        <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
+          <el-row :gutter="10">
+            <el-col :span="6">
+              <el-form-item label="物种名称">
+                <el-input
+                    v-model="queryParams.userName"
+                    placeholder="请输入物种名称"
+                    clearable
+                    @keyup.enter="handleQuery"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="属类">
+                <el-input
+                    v-model="queryParams.userName"
+                    placeholder="请输入属类"
+                    clearable
+                    @keyup.enter="handleQuery"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item>
+                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+        <el-row :gutter="10" class="mb8">
+          <el-button type="primary" icon="Plus" @click="toAdd">上传基因型数据</el-button>
+          <el-button type="primary" icon="Download" @click="exportExcel">导出Excel</el-button>
+          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
+        </el-row>
+
+        <el-table v-loading="loading" :data="tableList" @selection-change="handleSelectionChange" border>
+          <el-table-column label="图片" align="center" key="userId" prop="userId" v-if="columns[0].visible">
+            <template #default="scope">
+              <el-image :src="scope.row.avatar" style="width: 100px; height: 100px;" :preview-src-list="[scope.row.avatar]"></el-image>
+            </template>
+          </el-table-column>
+          <el-table-column label="物种" align="center" key="userName" prop="userName" v-if="columns[1].visible"
+                           :show-overflow-tooltip="true"/>
+          <el-table-column label="属类" align="center" key="nickName" prop="nickName" v-if="columns[2].visible"
+                           :show-overflow-tooltip="true"/>
+          <el-table-column label="所属界" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible"
+                           :show-overflow-tooltip="true"/>
+          <el-table-column label="创建人" align="center" key="phonenumber" prop="phonenumber"
+                           v-if="columns[4].visible" width="120"/>
+          <el-table-column label="创建时间" align="center" key="phonenumber" prop="phonenumber"
+                           v-if="columns[5].visible" width="120"/>
+          <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
+            <template #default="scope">
+              <el-button link type="primary" @click="toView(scope.row)">详情</el-button>
+              <el-button link type="primary" @click="toEdit(scope.row)">编辑</el-button>
+              <el-button link type="primary" @click="handleDelete(scope.row)">删除</el-button>
+            </template>
+          </el-table-column>
+          <template #empty>
+            <el-result
+                title="暂无数据">
+              <template #icon>
+                <i-database-fail theme="outline" size="38" fill="#9b9b9b"/>
+              </template>
+            </el-result>
+          </template>
+        </el-table>
+        <pagination
+            v-show="total > 0"
+            :total="total"
+            v-model:page="queryParams.pageNum"
+            v-model:limit="queryParams.pageSize"
+            @pagination="getList"
+        />
+      </el-col>
+    </el-row>
+    <left-drawer v-model="showView" title="设备详情" width="35%">
+      <div>
+        <el-form :model="formData" ref="formRef">
+          <el-form-item label="所属基地/资源圃：" prop="baseName">
+            <div>{{ formData.baseName }}</div>
+          </el-form-item>
+        </el-form>
+      </div>
+      <template #footer>
+        <el-button @click="showView = false">关闭</el-button>
+      </template>
+    </left-drawer>
+    <left-drawer v-model="showGenoForm" title="上传基因型数据" width="35%">
+      <div>
+        <title-divider title="基本信息"/>
+        <el-form :model="formData" ref="formRef">
+          <el-form-item label="物种名称">
+            <el-input placeholder="请输入物种名称"></el-input>
+          </el-form-item>
+          <el-form-item label="所属界" prop="baseName">
+            <el-select v-model="queryParams.areaCode" filterable clearable>
+              <el-option v-for="item in data.pcTextArr" :label="item.label" :value="item.value"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="物种属类" prop="baseName">
+            <el-select v-model="queryParams.areaCode" filterable clearable>
+              <el-option v-for="item in data.pcTextArr" :label="item.label" :value="item.value"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="物种图片" prop="baseName">
+            <div v-if="formData.tempFileImage" class="avatar-uploader-image">
+              <div class="image" @click="delete formData.tempFileImage"><i-close theme="outline" size="24" fill="#FFFFFF"/></div>
+              <el-image :src="formData.tempFileImage" style="width: 130px;height: 130px"></el-image>
+            </div>
+            <el-upload
+                v-else
+                class="avatar-uploader"
+                :show-file-list="false"
+                accept="image/* "
+                :before-upload="beforeAvatarUpload"
+            >
+              <div class="avatar-uploader">
+                <div class="avatar-uploader-icon">
+                  <i-upload theme="outline" size="24" :fill="theme"/>
+                </div>
+                <div :style="{color:theme}">请上传</div>
+              </div>
+            </el-upload>
+          </el-form-item>
+        </el-form>
+        <el-tabs v-model="currentTabs">
+          <el-tab-pane label="Genome" :name="1">
+            <upload-geno></upload-geno>
+          </el-tab-pane>
+          <el-tab-pane label="Annotation" :name="2">
+            <upload-geno></upload-geno>
+          </el-tab-pane>
+          <el-tab-pane label="Molecular maker" :name="3">
+            <upload-geno></upload-geno>
+          </el-tab-pane>
+          <el-tab-pane label="Gene Expression Level (FPKM) Data" :name="4">
+            <upload-geno></upload-geno>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+      <template #footer>
+        <el-button type="primary" :loading="loading" @click="saveMassif">保存</el-button>
+        <el-button @click="showGenoForm = false">取消</el-button>
+      </template>
+    </left-drawer>
+  </div>
+</template>
+
+<script setup name="User">
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect
+} from "@/api/system/user";
+import TitleDivider from "@/components/titleDivider/index.vue";
+import useSettingsStore from "@/store/modules/settings.js";
+import UploadGeno from "@/views/genoTypeData/genoManage/uploadGeno.vue";
+import {fileToBlobURL} from "@/utils/ruoyi.js";
+
+const router = useRouter();
+const {proxy} = getCurrentInstance();
+const {sys_normal_disable} = proxy.useDict("sys_normal_disable");
+const tableList = ref([]);
+const open = ref(false);
+const loading = ref(false);
+const showSearch = ref(true);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const currentTabs = ref(1);
+const title = ref("");
+// 查看页面
+const showView = ref(false)
+// 配置基地
+const showGenoForm = ref(false)
+const dateRange = ref([]);
+const settingsStore = useSettingsStore()
+const theme = computed(() => settingsStore.theme);
+// 列显隐信息
+const columns = ref([
+  {key: 0, label: `图片`, visible: true},
+  {key: 1, label: `物种`, visible: true},
+  {key: 2, label: `属类`, visible: true},
+  {key: 3, label: `所属界`, visible: true},
+  {key: 4, label: `创建人`, visible: true},
+  {key: 5, label: `创建时间`, visible: true},
+]);
+const exportExcel = () => {
+
+}
+const formData = ref({
+  tempFileImage:undefined,
+  Genome:[],
+  Annotation:[],
+  Molecular:[],
+  GeneLevel:[],
+})
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    plantingSeason: 2023,
+    status: undefined,
+    deptId: undefined
+  },
+});
+const {queryParams, form,} = toRefs(data);
+
+/** 查询用户列表 */
+function getList() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(res => {
+    loading.value = false;
+    tableList.value = res.rows;
+    total.value = res.total;
+  });
+};
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+const beforeAvatarUpload = (file) => {
+  fileToBlobURL(file).then(res =>{
+    formData.value.tempFileImage = res
+  })
+  console.log(file);
+  return false
+}
+/** 重置按钮操作 */
+function resetQuery() {
+  dateRange.value = [];
+  proxy.resetForm("queryRef");
+  queryParams.value.deptId = undefined;
+  proxy.$refs.deptTreeRef.setCurrentKey(null);
+  handleQuery();
+};
+
+/** 选择条数  */
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.userId);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+};
+
+const toView = (row) => {
+  formData.value = row
+  showView.value = true
+}
+const toAdd = () => {
+  formData.value = {}
+  showGenoForm.value = true
+}
+const handleUpdate = (row) => {
+  formData.value = row
+  showGenoForm.value = true
+}
+</script>
+<style scoped lang="scss">
+.base-title {
+  margin: 10px 0;
+
+  .handoff-model {
+    padding-right: 20px;
+    text-align: right;
+  }
+}
+
+.belongs-base-info {
+  &-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 10px 0;
+    .label{
+      color: var(--el-text-color-regular);
+      font-size: var(--el-form-label-font-size);
+    }
+  }
+  border: 1px solid #d0d0d0;
+  border-radius: 10px;
+  padding: 10px 20px;
+  margin-bottom: 10px;
+}
+
+.el-form-item {
+  width: 100%;
+}
+.avatar-uploader .avatar {
+  width: 130px;
+  height: 130px;
+  display: block;
+}
+.avatar-uploader :deep(.el-upload) {
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+}
+
+.avatar-uploader :deep(.el-upload:hover) {
+  border-color: var(--el-color-primary);
+}
+.avatar-uploader-image{
+  position: relative;
+  .image{
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    right: 0;
+    width: 24px;
+    height: 24px;
+    background: rgba(59, 60, 61, 0.5);
+    //鼠标悬浮变成点击
+    cursor: pointer;
+  }
+}
+.avatar-uploader {
+  width: 130px;
+  height: 130px;
+  text-align: center;
+}
+.avatar-uploader-icon{
+  margin-top: 30px;
+}
+</style>
diff --git a/src/views/genoTypeData/genoManage/uploadGeno.vue b/src/views/genoTypeData/genoManage/uploadGeno.vue
new file mode 100644
index 0000000..508224f
--- /dev/null
+++ b/src/views/genoTypeData/genoManage/uploadGeno.vue
@@ -0,0 +1,31 @@
+<script setup>
+import useSettingsStore from "@/store/modules/settings.js";
+
+const props = defineProps({
+  uploadType:Number
+})
+const modelValue = defineModel({type:Array})
+const settingsStore = useSettingsStore()
+const theme = computed(() => settingsStore.theme);
+</script>
+
+<template>
+<div>
+  <el-upload
+      class="upload-demo"
+      drag
+      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+      multiple
+  >
+    <i-upload theme="outline" size="24" :fill="theme"/>
+    <div class="el-upload__text">
+      <em>点击上传附件</em>
+      <div>或将附件拖动至此上传</div>
+    </div>
+  </el-upload>
+</div>
+</template>
+
+<style scoped lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/src/views/system/base/baseRightControl.vue b/src/views/system/base/baseRightControl.vue
index ea3225b..d40dbf2 100644
--- a/src/views/system/base/baseRightControl.vue
+++ b/src/views/system/base/baseRightControl.vue
@@ -11,6 +11,9 @@ const route = useRoute();
 const toBaseTable = () => {
   router.push({path:'/system/base/baseTable',query:route.params})
 }
+const props = defineProps({
+  isBaseMap:Boolean
+})
 const control = defineModel({
   default: {
     // 地图类型
@@ -35,7 +38,7 @@ const control = defineModel({
 
 <template>
   <div class="right-control">
-    <el-select v-model="plantingSeason" class="operate" style="width: 150px">
+    <el-select v-model="plantingSeason" class="operate" style="width: 150px" v-if="!isBaseMap">
       <el-option v-for="item in plantingSeasonList" :value="item.value" :label="item.label"></el-option>
     </el-select>
     <div style="display: flex;
@@ -80,22 +83,22 @@ const control = defineModel({
             <el-dropdown-item @click="control.showPoi = !control.showPoi">
               显示地标名 <el-checkbox :model-value="control.showPoi"></el-checkbox>
             </el-dropdown-item>
-            <el-dropdown-item @click="control.massifLabel = !control.massifLabel">
+            <el-dropdown-item @click="control.massifLabel = !control.massifLabel" v-if="!isBaseMap">
               显示地块标签 <el-checkbox :model-value="control.massifLabel"></el-checkbox>
             </el-dropdown-item>
-            <el-dropdown-item @click="control.massifGrid = !control.massifGrid">
+            <el-dropdown-item @click="control.massifGrid = !control.massifGrid" v-if="!isBaseMap">
               显示网格地块 <el-checkbox :model-value="control.massifGrid"></el-checkbox>
             </el-dropdown-item>
-            <el-dropdown-item @click="control.showRidge = !control.showRidge">
+            <el-dropdown-item @click="control.showRidge = !control.showRidge" v-if="!isBaseMap">
               显示垄 <el-checkbox :model-value="control.showRidge"></el-checkbox>
             </el-dropdown-item>
-            <el-dropdown-item @click="control.ridgeLabel = !control.ridgeLabel">
+            <el-dropdown-item @click="control.ridgeLabel = !control.ridgeLabel" v-if="!isBaseMap">
               显示垄标签 <el-checkbox :model-value="control.ridgeLabel"></el-checkbox>
             </el-dropdown-item>
-            <el-dropdown-item @click="control.showPlant = !control.showPlant">
+            <el-dropdown-item @click="control.showPlant = !control.showPlant" v-if="!isBaseMap">
               显示植株 <el-checkbox :model-value="control.showPlant"></el-checkbox>
             </el-dropdown-item>
-            <el-dropdown-item @click="control.plantLabel = !control.plantLabel">
+            <el-dropdown-item @click="control.plantLabel = !control.plantLabel" v-if="!isBaseMap">
               显示植株标签 <el-checkbox :model-value="control.plantLabel"></el-checkbox>
             </el-dropdown-item>
           </div>
diff --git a/src/views/system/base/mapMarkers.vue b/src/views/system/base/mapMarkers.vue
index f143a25..10b88bc 100644
--- a/src/views/system/base/mapMarkers.vue
+++ b/src/views/system/base/mapMarkers.vue
@@ -107,7 +107,7 @@ const selectPoi = ({poi}) => {
           @select="selectPoi"
       />
       <div class="top-block">
-        <base-right-control v-model="control"/>
+        <base-right-control v-model="control" is-base-map/>
       </div>
     </el-amap>
   </div>