在Vue 3项目中，你可以通过以下步骤将项目打包并部署到Tomcat服务器：

1. 在Vue 3项目中，确保你已经安装了所有必需的依赖，并且可以成功构建项目。
2. 构建你的Vue 3项目，生成生产环境下的静态文件：

npm run build

3. 接下来，你需要将构建的静态文件复制到Tomcat服务器的webapps目录下的某个应用文件夹中。例如，如果你的应用名为my-vue-app，你可以创建一个新的目录：

mkdir /path/to/tomcat/webapps/my-vue-app

4. 然后，将构建的静态文件复制到这个新目录：

cp -r /path/to/project/dist/* /path/to/tomcat/webapps/my-vue-app

5. 确保你的Vue项目配置文件vue.config.js（如果有的话）已经正确设置了基本URL：

module.exports = {
  publicPath: '/my-vue-app/'
}

6. 重启Tomcat服务器，以便加载新部署的应用。
7. 现在，你可以通过浏览器访问你的Vue 3应用，使用Tomcat服务器提供的地址加上你的应用名：

http://<tomcat_server_address>:<port>/my-vue-app

确保替换<tomcat_server_address>和<port>为你的Tomcat服务器的实际IP地址或域名以及端口号。

注意：如果你的Tomcat服务器使用的是默认的8080端口，并且你的Vue 3项目没有配置路由使用HTML5 History模式（即hash模式），你可能需要配置Tomcat服务器以支持单页面应用的路由。这通常意味着你需要设置一个web.xml文件来重写所有路由到你的index.html文件。

在Vue 2项目中使用Element UI时，如果你想要修改el-radio-group内单选框的选中样式，可以使用::v-deep选择器（或者>>>、/deep/，但::v-deep是官方推荐的写法）来穿透组件边界并应用CSS样式。

以下是一个示例，演示如何使用::v-deep来修改单选框选中的样式：

<style scoped>
::v-deep .el-radio-group {
  .el-radio__input.is-checked .el-radio__inner {
    border-color: #409EFF; /* 修改边框颜色 */
    background-color: #409EFF; /* 修改背景颜色 */
  }
  
  .el-radio__input.is-checked .el-radio__inner::after {
    background-color: #fff; /* 修改选中圆点颜色 */
  }
}
</style>

在上面的代码中，.el-radio__input.is-checked 选择器用于选中状态的单选框，然后通过修改.el-radio__inner和.el-radio__inner::after的样式来改变单选框的选中外观。

请注意，如果你使用的是Vue 2.x和Element UI 2.x版本，那么应该使用>>>或者/deep/而不是::v-deep，因为::v-deep是Sass/SCSS的深度选择器，在旧版本的Webpack和vue-loader中可能不被支持。在Vue 3中，::v-deep将作为>>>的新替代方案，并且是官方推荐的写法。

在Vue中使用Element UI的el-cascader组件时，可以通过监听节点选择事件来实现全选功能。以下是一个简单的实现示例：

<template>
  <el-cascader
    :options="options"
    v-model="selectedOptions"
    @change="handleChange"
    :props="{ multiple: true, checkStrictly: true }"
  ></el-cascader>
  <el-button @click="selectAll">全选</el-button>
</template>
 
<script>
export default {
  data() {
    return {
      selectedOptions: [],
      options: [
        {
          value: 'all',
          label: '全部',
          children: [
            {
              value: 'option1',
              label: '选项1'
            },
            {
              value: 'option2',
              label: '选项2'
            },
            // ...更多选项
          ]
        }
      ]
    };
  },
  methods: {
    handleChange(value) {
      if (value.includes('all')) {
        this.selectedOptions = ['all'];
      }
    },
    selectAll() {
      this.selectedOptions = ['all'];
    }
  }
};
</script>

在这个示例中，我们定义了一个带有全选项的el-cascader组件，并通过按钮点击触发selectAll方法。当用户手动选择全选项时，handleChange方法会被触发，并更新selectedOptions以保持只选择了全选项。如果需要实现真正的全选功能（选择所有子选项），则需要更复杂的逻辑来处理选项的选择。

在Vue项目中，可以使用Element UI库中的v-loading指令来实现页面局部加载效果。首先确保已经安装了Element UI，然后可以按照以下步骤进行操作：

1. 在Vue项目中创建一个自定义指令（如果还没有的话）。
2. 使用Element UI的Loading服务。
3. 应用这个指令到你想要显示加载效果的元素上。

以下是一个简单的自定义指令的示例代码：

// 在你的Vue组件或者Vue实例中
import { Loading } from 'element-ui';
 
export default {
  // ...
  directives: {
    'loading': {
      bind(el, binding, vnode) {
        // 当绑定了该指令的元素首次挂载到DOM上时
        if (binding.value) {
          // 创建一个Loading实例
          const loading = Loading.service({
            lock: true,
            text: '加载中...',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          // 将loading实例存储在元素的自定义数据属性上
          el.loading = loading;
        }
      },
      unbind(el, binding) {
        // 当元素被卸载时，关闭loading
        if (el.loading) {
          el.loading.close();
        }
      }
    }
  }
  // ...
};

在模板中使用这个自定义指令：

<template>
  <div v-loading="isLoading">
    <!-- 这里是页面的其他内容 -->
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      isLoading: false
    };
  },
  // ...
};
</script>

在这个例子中，isLoading是一个响应式数据，当它为true时，会在包含它的div上显示加载效果。当你不再需要显示加载效果时，将isLoading设置为false即可。

由于问题描述不具体，我将提供一个基于Spring Boot和Vue的简单应用程序示例。这个应用程序将包括一个后端API和一个前端界面，但不包括具体的灾害模拟和救援逻辑。

后端（Spring Boot）:

// 在pom.xml中添加Spring Boot和Web依赖
 
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
 
@SpringBootApplication
public class DisasterRecoverySystemApplication {
 
    public static void main(String[] args) {
        SpringApplication.run(DisasterRecoverySystemApplication.class, args);
    }
}
 
@RestController
class HelloController {
 
    @GetMapping("/hello")
    public String hello() {
        return "Hello, World!";
    }
}

前端（Vue.js）:

<!-- 在index.html中添加简单的Vue实例 -->
 
<div id="app">
  <h1>{{ message }}</h1>
</div>
 
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Disaster Recovery System'
  }
});
</script>

这个应用程序的后端提供了一个简单的REST API，用于返回“Hello, World!”。前端使用Vue.js显示这条消息。这个示例展示了如何使用Spring Boot和Vue.js创建一个简单的交云系统，但是不包括实际的灾害模拟和救援逻辑。

由于这个查询涉及的内容较多且复杂，我将提供一个概览性的解答，包括核心的代码和配置片段，但不是完整的项目源代码。

项目概览：

1. 数据可视化：使用Echarts等库进行数据可视化。
2. 后端开发：使用SpringBoot框架进行后端开发。
3. 前端开发：使用Vue.js进行前端开发。

核心代码和配置：

后端SpringBoot核心配置 (application.properties 或 application.yml):

spring.datasource.url=jdbc:mysql://localhost:3306/yourdb?useSSL=false
spring.datasource.username=root
spring.datasource.password=yourpassword
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
 
spring.jpa.hibernate.ddl-auto=update
spring.jpa.show-sql=true

后端核心Controller:

@RestController
@RequestMapping("/api/v1/products")
public class ProductController {
 
    @Autowired
    private ProductService productService;
 
    @GetMapping
    public ResponseEntity<List<Product>> getAllProducts() {
        List<Product> products = productService.findAll();
        return ResponseEntity.ok(products);
    }
 
    // 其他API端点...
}

前端Vue.js核心组件:

<template>
  <div>
    <product-list :products="products"></product-list>
  </div>
</template>
 
<script>
import ProductList from '@/components/ProductList.vue'
 
export default {
  components: {
    ProductList
  },
  data() {
    return {
      products: []
    }
  },
  created() {
    this.fetchProducts();
  },
  methods: {
    async fetchProducts() {
      try {
        const response = await this.axios.get('/api/v1/products');
        this.products = response.data;
      } catch (error) {
        console.error(error);
      }
    }
  }
}
</script>

部署说明：

部署该系统需要以下步骤：

1. 配置好数据库和相关数据库连接。
2. 构建后端SpringBoot项目的jar包或war包。
3. 构建前端Vue.js项目的生产版本。
4. 将后端jar包部署到服务器，配置好外部访问的URL。
5. 将构建好的Vue.js项目上传到服务器，配置Nginx或其他服务器软件指向Vue.js项目的静态文件目录。
6. 确保服务器的安全组和防火墙规则允许外部访问配置的端口。

以上是一个概览性的回答，实际的源代码和部署过程将依赖于具体的项目需求和环境配置。

由于提问中包含了大量的代码和视频内容，我无法在这里提供完整的代码实例。不过，我可以提供一个简化的Spring Boot后端服务的核心方法示例，用于处理酒店预订的功能。

import org.springframework.web.bind.annotation.*;
 
@RestController
@RequestMapping("/api/reservations")
public class ReservationController {
 
    // 假设有一个服务层处理业务逻辑
    @Autowired
    private ReservationService reservationService;
 
    // 创建酒店预订
    @PostMapping
    public ReservationDto createReservation(@RequestBody ReservationDto reservationDto) {
        return reservationService.createReservation(reservationDto);
    }
 
    // 获取酒店预订列表
    @GetMapping
    public List<ReservationDto> getAllReservations() {
        return reservationService.getAllReservations();
    }
 
    // 根据ID获取酒店预订详情
    @GetMapping("/{id}")
    public ReservationDto getReservationById(@PathVariable("id") Long id) {
        return reservationService.getReservationById(id);
    }
 
    // 更新酒店预订
    @PutMapping("/{id}")
    public ReservationDto updateReservation(@PathVariable("id") Long id, @RequestBody ReservationDto reservationDto) {
        return reservationService.updateReservation(id, reservationDto);
    }
 
    // 删除酒店预订
    @DeleteMapping("/{id}")
    public void deleteReservation(@PathVariable("id") Long id) {
        reservationService.deleteReservation(id);
    }
}

在这个简化的例子中，我们定义了一个ReservationController，它提供了创建、获取、更新和删除酒店预订的基本操作。每个操作都会调用ReservationService中对应的方法来实现业务逻辑。这个例子展示了如何使用Spring Boot创建REST API，并且如何通过简单的方法来处理数据。

请注意，这个代码示例假设你已经有了一个ReservationService服务层和对应的数据传输对象（DTOs）。在实际的应用中，你需要根据自己的业务逻辑来实现这些类。

以下是一个简化的步骤指南，用于创建一个基于Spring Boot 3和Vue 3的后端管理项目：

后端（Spring Boot 3）:

1. 创建一个Spring Boot项目。
2. 添加必要的依赖，如Spring Security、Spring Data JPA、MySQL等。
3. 配置数据库连接和Spring Security。
4. 创建实体、仓库接口及相应的服务层。
5. 创建RESTful API。
6. 配置CORS。

前端（Vue 3）:

1. 创建一个Vue 3项目。
2. 添加必要的依赖，如Vue Router、Vuex、Axios等。
3. 设置Vue Router和Vuex。
4. 创建组件。
5. 使用Axios发送HTTP请求调用后端API。
6. 配置路由和导航守卫。

整合前后端:

1. 确保后端API可用。
2. 在前端Vue项目中安装axios。
3. 配置API接口的基础路径，使其指向后端服务地址。
4. 创建API服务模块，封装API请求。
5. 在组件中使用API服务模块发送请求并处理响应。

示例代码:

后端代码（Spring Boot）:

// build.gradle 或 pom.xml 中添加依赖
// ...
 
// 实体
@Entity
public class User {
    // ...
}
 
// Repository
public interface UserRepository extends JpaRepository<User, Long> {
    // ...
}
 
// Service
@Service
public class UserService {
    // ...
}
 
// RestController
@RestController
@RequestMapping("/api/users")
public class UserController {
    // ...
}
 
// Security配置
@Configuration
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    // ...
}
 
// 应用主类
@SpringBootApplication
public class BackendApplication {
    public static void main(String[] args) {
        SpringApplication.run(BackendApplication.class, args);
    }
}

前端代码（Vue 3）:

// main.js 中配置axios
import axios from 'axios';
 
axios.defaults.baseURL = 'http://localhost:8080/api';
 
// UserService.js
import axios from 'axios';
 
export default {
    getUsers() {
        return axios.get('/users');
    },
    // ...
}
 
// UserList.vue 组件中使用UserService
import UserService from './UserService';
 
export default {
    data() {
        return {
            users: []
        };
    },
    created() {
        this.fetchUsers();
    },
    methods: {
        async fetchUsers() {
            try {
                const response = await UserService.getUsers();
                this.users = response.data;
            } catch (error) {
                console.error('An error occurred while fetching users:', error);
            }
        }
    }
}

注意: 这只是一个简化的示例，实际项目中还需要考虑更多的安全性、性能和可维护性方面的要素。

<template>
  <div class="order-submit">
    <!-- 订单提交表单 -->
    <form @submit.prevent="submitOrder">
      <!-- 其他表单内容 -->
      <button type="submit" :disabled="isSubmitting">
        {{ isSubmitting ? '提交中...' : '提交订单' }}
      </button>
    </form>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, ref } from 'vue';
 
export default defineComponent({
  setup() {
    const isSubmitting = ref(false);
 
    // 模拟订单提交函数
    async function submitOrder() {
      isSubmitting.value = true;
 
      try {
        // 这里应该是与后端API的交互逻辑
        // 例如使用axios发送请求
        // const response = await axios.post('/api/orders', orderData);
        // 假设response.data是后端返回的数据
        const response = { data: { success: true, orderId: '12345' } };
 
        if (response.data.success) {
          // 订单提交成功的处理逻辑
          console.log('订单提交成功，订单号：', response.data.orderId);
          // 清空购物车、显示成功提示等
        } else {
          // 处理失败的情况
          console.error('订单提交失败：', response.data.error);
        }
      } catch (error) {
        // 处理异常情况
        console.error('订单提交发生错误：', error);
      } finally {
        isSubmitting.value = false;
      }
    }
 
    return {
      isSubmitting,
      submitOrder,
    };
  },
});
</script>
 
<style scoped>
.order-submit form {
  /* 表单样式 */
}
 
.order-submit button[type="submit"] {
  /* 按钮样式 */
}
</style>

这个代码实例展示了如何在Vue 3.2和TypeScript中实现一个订单提交功能。它使用了Vite作为构建工具，并提供了一个简单的模拟订单提交函数。在实际应用中，需要替换模拟的API调用和响应处理逻辑，以与后端API正确交互。

由于篇幅所限，下面仅展示如何使用Spring Boot创建一个简单的RESTful API服务器，以及如何使用Vue和Element UI创建一个简单的前端页面。

后端（Spring Boot）:

1. 创建一个Spring Boot项目，并添加相关依赖（如spring-boot-starter-web）。
2. 定义一些RESTful API。

@RestController
@RequestMapping("/api")
public class CarController {
 
    @GetMapping("/cars")
    public List<Car> getAllCars() {
        // 模拟数据
        return Arrays.asList(new Car("Toyota", "Corolla"), new Car("Ford", "Focus"));
    }
 
    @PostMapping("/cars")
    public Car createCar(@RequestBody Car car) {
        // 模拟保存操作
        return car;
    }
 
    // ... 其他API方法
}
 
class Car {
    private String make;
    private String model;
 
    // 构造器、getter和setter
}

前端（Vue + Element UI）:

1. 创建一个Vue项目，并添加Element UI。
2. 创建一个简单的页面来显示车辆信息并发送API请求。

<template>
  <div>
    <el-button @click="fetchCars">加载车辆信息</el-button>
    <el-table :data="cars" style="width: 100%">
      <el-table-column prop="make" label="制造商"></el-table-column>
      <el-table-column prop="model" label="型号"></el-table-column>
    </el-table>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      cars: []
    };
  },
  methods: {
    fetchCars() {
      this.axios.get('/api/cars')
        .then(response => {
          this.cars = response.data;
        })
        .catch(error => {
          console.error('There was an error!', error);
        });
    }
  }
};
</script>

这只是一个非常基础的示例，实际的驾校管理系统需要包含更多的功能，如用户管理、车辆管理、租赁管理等。在实际开发中，你需要设计数据库模型、API端点、以及相应的业务逻辑。同时，你还需要考虑权限控制、异常处理、日志记录等方面。