From a8c31579be14130cb704c5d60ab5297f9868c663 Mon Sep 17 00:00:00 2001
From: RogerWork <roger.x.sun@qq.com>
Date: Tue, 23 Jan 2024 21:42:30 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E6=9B=B4=E6=96=B0=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E7=AE=80=E5=8D=95=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |   2 +-
 src/apis/update.js                            |  15 ++
 .../mock/{api_block.vue => ApiBlock.vue}      |   0
 src/components/update/CinemaUpdate.vue        | 240 ++++++++++++++++++
 src/layout/index.vue                          |   2 +-
 src/main.js                                   |   3 +-
 src/request/config.js                         |   1 +
 src/store/index.js                            |  10 +-
 src/style.css                                 |   1 +
 src/views/mock/index.vue                      |   4 +-
 src/views/update/index.vue                    |  28 +-
 11 files changed, 299 insertions(+), 7 deletions(-)
 rename src/components/mock/{api_block.vue => ApiBlock.vue} (100%)
 create mode 100644 src/components/update/CinemaUpdate.vue

diff --git a/src/App.vue b/src/App.vue
index 2310cd8..a55628f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -27,6 +27,6 @@ export default defineComponent({
   padding: 0;
   margin: 0;
   height: 100%;
-  max-width: 1700px;
+  max-width: 100%;
 }
 </style>
diff --git a/src/apis/update.js b/src/apis/update.js
index 8468709..45ca1b9 100644
--- a/src/apis/update.js
+++ b/src/apis/update.js
@@ -44,4 +44,19 @@ export const change_cinema_user = (params) => {
         params: req_params,
         data: req_data,
     })
+}
+
+
+export const get_update_option = () => {
+    return request({
+        url: `/update/get_operation_cmd/`,
+        method: 'get',
+    })
+}
+
+export const get_git_ver = () => {
+    return request( {
+        url: `/update/get_git_version/`,
+        method: 'get',
+    })
 }
\ No newline at end of file
diff --git a/src/components/mock/api_block.vue b/src/components/mock/ApiBlock.vue
similarity index 100%
rename from src/components/mock/api_block.vue
rename to src/components/mock/ApiBlock.vue
diff --git a/src/components/update/CinemaUpdate.vue b/src/components/update/CinemaUpdate.vue
new file mode 100644
index 0000000..a28e2e6
--- /dev/null
+++ b/src/components/update/CinemaUpdate.vue
@@ -0,0 +1,240 @@
+<script setup>
+import {computed, ref, watch} from "vue";
+import {onBeforeMount, onUnmounted} from "vue";
+import {useStore} from "vuex";
+import {get_git_ver, get_update_option} from "@/apis/update.js"
+
+
+const store = useStore()
+
+const props = defineProps({
+  ip: {
+    type: String,
+    default: ''
+  },
+})
+
+
+onUnmounted(
+    () => {
+      // store.state.update_dialog_show = false
+      store.getters.dialog_change
+      console.log(store.state.update_dialog_show)
+    }
+)
+
+// 获取git版本
+const git_ver = ref([])
+const selectedVersion = ref('')
+
+onBeforeMount(() => {
+  get_git_ver().then(res => {
+    if (Array.isArray(res)) {
+      git_ver.value = [...res]
+    }
+    console.log(git_ver.value)
+  }).catch()
+})
+
+// 获取升级命令的功能
+const updateCmd = ref({setup: [], teardown: [], sql: [], client: []})
+
+onBeforeMount(
+    () => {
+      get_update_option().then(res => {
+        console.log("get_update_option")
+        if (Array.isArray(res)) {
+          res.forEach(
+              (value, index) => {
+                if (value.process === "setup") {
+                  updateCmd.value.setup.push(value)
+                }
+                if (value.process === "teardown") {
+                  updateCmd.value.teardown.push(value)
+                }
+                if (value.process === "sql") {
+                  updateCmd.value.sql.push(value)
+                }
+                if (value.process === "client") {
+                  updateCmd.value.client.push(value)
+                }
+              }
+          )
+          console.log(updateCmd.value)
+        }
+
+      }).catch()
+    }
+)
+
+// 提交升级相关逻辑
+const updateForm = ref()
+
+// 操作进度相关
+const progress = [
+  {
+    content: '执行脚本',
+    checked: true,
+    done: true,
+    time: '2018-04-12 20:46',
+  },
+  {
+    content: '对比数据库',
+    checked: true,
+    done: false,
+    time: '2018-04-03 20:46',
+  },
+  {
+    content: '执行升级',
+    checked: true,
+    done: false,
+    time: '2018-04-03 20:46',
+  },
+  {
+    content: '上传客户端',
+    checked: true,
+    done: false,
+    time: '',
+  },
+]
+
+</script>
+
+<template>
+  <el-dialog v-model="store.state.update_dialog_show" title="更新影院" :modal="true" width="720px">
+    <div><span class="update">更新单机：</span><span class="ip">{{ ip }}</span><span>目标版本：</span>
+
+      <el-select v-model="selectedVersion">
+        <el-option v-for="ver in git_ver" :label="ver.short_release" :value="ver.short_release" :key="ver.id"></el-option>
+      </el-select>
+    </div>
+    <el-form :model="updateForm">
+      <el-form-item>
+        <el-checkbox-group v-model="updateForm">
+          <el-divider content-position="left">
+            <span class="cmd_label">执行脚本</span>
+          </el-divider>
+          <el-checkbox v-for="cmd in updateCmd.setup" :label="cmd.desc" :name="cmd.id.toString()"
+                       :checked="cmd.is_checked" :disabled="cmd.is_force"></el-checkbox>
+          <el-divider content-position="left">
+            <span class="cmd_label">数据库</span>
+          </el-divider>
+          <el-checkbox v-for="cmd in updateCmd.sql" :label="cmd.desc" :name="cmd.id.toString()"
+                       :checked="cmd.is_checked" :disabled="cmd.is_force"></el-checkbox>
+          <el-divider content-position="left">
+            <span class="cmd_label">执行升级</span>
+          </el-divider>
+          <el-checkbox v-for="cmd in updateCmd.teardown" :label="cmd.desc" :name="cmd.id.toString()"
+                       :checked="cmd.is_checked" :disabled="cmd.is_force"></el-checkbox>
+          <el-divider content-position="left">
+            <span class="cmd_label">客户端</span>
+          </el-divider>
+          <el-checkbox v-for="cmd in updateCmd.client" :label="cmd.desc" :name="cmd.id.toString()"
+                       :checked="cmd.is_checked" :disabled="cmd.is_force"></el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+    </el-form>
+    <el-button type="primary">更新</el-button>
+    <div class="processBox">
+<!--      <el-divider />-->
+      <div class="timelineProcessBox">
+        <el-timeline class="timeline">
+          <el-timeline-item
+              class="lineitem"
+              :class="progress.done ? 'active' : 'inactive'"
+              v-for="(p, index) in progress"
+              :key="index"
+              :timestamp="p.time"
+          >
+            <span style="display: flex; flex-direction: column">
+            <span style="margin: 10px 0; font-size: 16px">
+              {{ p.content }}
+            </span>
+            <span style="color: #8c8c8c; font-size: 14px">
+              {{ p.checked }}
+            </span>
+          </span>
+          </el-timeline-item>
+        </el-timeline>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<style scoped>
+.el-checkbox-group {
+  text-align: left;
+  width: 640px;
+  padding-left: 25px;
+}
+
+.el-checkbox {
+  margin-left: 0;
+  margin-right: 25px;
+  width: 180px;
+  padding-left: 0;
+  text-align: left;
+}
+
+.el-divider--horizontal {
+  line-height: 1;
+}
+.update {
+  padding-left: 0;
+}
+.ip {
+  margin-right: 100px;
+}
+
+
+.processBox {
+  background-color: #fff;
+  height: 210px;
+
+  .title {
+    font-size: 16px;
+    font-weight: 600;
+    padding-left: 32px;
+    padding-top: 16px;
+  }
+  .timelineProcessBox {
+    .timeline {
+      display: flex;
+      width: 95%;
+      margin: 40px auto;
+      .lineitem {
+        transform: translateX(50%);
+        width: 25%;
+      }
+    }
+  }
+}
+
+:deep(.el-timeline-item__tail) {
+  border-left: none;
+  border-top: 2px solid #e4e7ed;
+  width: 100%;
+  position: absolute;
+  top: 6px;
+}
+:deep(.el-timeline-item__wrapper) {
+  padding-left: 0;
+  position: absolute;
+  top: 20px;
+  transform: translateX(-50%);
+  text-align: center;
+}
+:deep(.el-timeline-item__timestamp) {
+  font-size: 14px;
+}
+.active {
+  :deep(.el-timeline-item__node) {
+    background-color: $login_word;
+  }
+
+  :deep(.el-timeline-item__tail) {
+    border-color: $login_word;
+  }
+}
+
+</style>
\ No newline at end of file
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 1caeaac..c510b9b 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -25,7 +25,7 @@ import PageAside from "@/layout/components/PageAside.vue";
 
 <style>
 #app {
-  width: 100%;
+  background-color: white;
 }
 
 html,
diff --git a/src/main.js b/src/main.js
index 5ff8e7d..9252c70 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,6 +4,7 @@ import App from './App.vue'
 import ElementPlus from 'element-plus'
 import * as ELIcons from '@element-plus/icons-vue'
 import router from './router/index.js'
+import store from "@/store/index.js";
 import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 
 const app = createApp(App)
@@ -12,4 +13,4 @@ for (const name in ELIcons){
     app.component(name, ELIcons[name]);
 }
 
-app.use(router).use(ElementPlus, {locale: zhCn,}).mount('#app')
+app.use(router).use(store).use(ElementPlus, {locale: zhCn,}).mount('#app')
diff --git a/src/request/config.js b/src/request/config.js
index e4ad649..5f67651 100644
--- a/src/request/config.js
+++ b/src/request/config.js
@@ -1,5 +1,6 @@
 export default {
     // method: 'get',
+    // baseURL: 'http://172.16.1.63:8000',
     baseURL: 'http://127.0.0.1:8000',
     headers: {
         'Content-Type': 'application/json;charset=UTF-8',
diff --git a/src/store/index.js b/src/store/index.js
index 0f34861..0f452f1 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -2,7 +2,15 @@ import {createStore} from 'vuex';
 
 export default createStore({
     modules: {},
-    state: {},
+    state: {
+        update_dialog_show: false,
+    },
+    getters: {
+        dialog_change: (state) => {
+            state.update_dialog_show = !state.update_dialog_show
+            return state.update_dialog_show
+        }
+    },
     mutations: {},
     actions: {},
 })
\ No newline at end of file
diff --git a/src/style.css b/src/style.css
index bb131d6..8b078ad 100644
--- a/src/style.css
+++ b/src/style.css
@@ -60,6 +60,7 @@ button:focus-visible {
 
 #app {
   max-width: 1280px;
+  width: 100%;
   margin: 0 auto;
   padding: 2rem;
   text-align: center;
diff --git a/src/views/mock/index.vue b/src/views/mock/index.vue
index fe258b9..4e781fe 100644
--- a/src/views/mock/index.vue
+++ b/src/views/mock/index.vue
@@ -12,7 +12,7 @@ import {onMounted, onBeforeUnmount} from "vue";
 import {ref, computed} from "vue";
 import {InfoFilled} from "@element-plus/icons-vue";
 import JsonEditorVue from "json-editor-vue3";
-import Api_block from "@/components/mock/api_block.vue";
+import ApiBlock from "@/components/mock/ApiBlock.vue";
 import {onBeforeRouteLeave} from "vue-router";
 
 const mockConfigPost = ref()
@@ -525,7 +525,7 @@ onBeforeRouteLeave((from, to, next) => {
     </el-checkbox-group>
     <br>
     <el-drawer v-model="drawer" :with-header="false" size="1000px" style="height: 100%">
-      <api_block :tabs="tabs_dict"/>
+      <ApiBlock :tabs="tabs_dict"/>
     </el-drawer>
     <el-row justify="start">
       <el-row :span="12">
diff --git a/src/views/update/index.vue b/src/views/update/index.vue
index b52a402..ce9065e 100644
--- a/src/views/update/index.vue
+++ b/src/views/update/index.vue
@@ -1,6 +1,11 @@
 <script setup>
 import {onBeforeMount, onMounted, reactive, ref, unref} from 'vue';
+import {useStore} from "vuex";
 import {cinema_list, cinema_search, cinema_user, change_cinema_user} from "@/apis/update.js";
+import CinemaUpdate from "@/components/update/CinemaUpdate.vue";
+
+// 注册vuex
+const store = useStore()
 
 
 // region 表单代码
@@ -155,6 +160,18 @@ const cinemaUserChange = (user, id) => {
 // endregion
 
 // region 升级相关代码
+const update_ip = ref('')
+// const showDialog = ref(false)
+const changeDialogStatus = (val) => {
+  console.log(val)
+  console.log('dialogTableVisible')
+  console.log(store.state.update_dialog_show)
+  // showDialog.value = true
+  // store.state.update_dialog_show = true
+  store.getters.dialog_change
+  update_ip.value = val
+}
+
 // endregion
 
 </script>
@@ -188,7 +205,12 @@ const cinemaUserChange = (user, id) => {
     </el-row>
   </el-form>
   <el-table :data="tableData" style="width: 100%">
-    <el-table-column prop="update_time" label="最后查询时间" min-width="170"></el-table-column>
+    <el-table-column prop="update_time" label="最后查询时间" min-width="150"></el-table-column>
+    <el-table-column prop="ip" label="操作" min-width="80">
+      <template v-slot="scope">
+        <el-button type="info" size="small" @click="changeDialogStatus(scope.row.ip)">更新</el-button>
+      </template>
+    </el-table-column>
     <el-table-column prop="selectedUser" label="当前使用人" min-width="120">
       <template v-slot="scope">
         <el-select v-model="scope.row.user" class="m-2" size="small" laceholder="请选择" style="width: 80px"
@@ -215,8 +237,12 @@ const cinemaUserChange = (user, id) => {
     <el-table-column prop="db_user" label="数据库账号" min-width="90"></el-table-column>
     <el-table-column prop="db_pwd" label="数据库密码" min-width="120"></el-table-column>
   </el-table>
+<!--  <CinemaUpdate :visible="showDialog" :ip="update_ip"></CinemaUpdate>-->
+<!--  <CinemaUpdate :visible="store.state.update_dialog_show" :ip="update_ip"></CinemaUpdate>-->
+  <CinemaUpdate :ip="update_ip"></CinemaUpdate>
 </template>
 
+
 <style scoped>
 
 </style>