InternetCompetition/src/views/Index.vue

<template>
  <div id="app">
    <!-- 所有路由跳转链接 -->

    <div class="db_lite" style="background-color: aqua; height: 200px">
      <router-link to="/cockpit">驾驶舱</router-link>
      <router-link to="/ipsetting">IP设置</router-link>
      <router-link to="/datacollect">数据采集配置</router-link>

      <router-link to="/wirelessgatewayip">db网关-ip配置-无线网关</router-link>
      <router-link to="/wiredgatewayip">db网关-ip配置-有线网关</router-link>
      <router-link to="/mqttconfig">MQTT上云-MQTT1配置</router-link>
      <router-link to="/chwirelessgatewayip"
        >斥候工业网关-ip配置-无线网关</router-link
      >
      <router-link to="/chwiredgatewayip"
        >斥候工业网关-ip配置-有线网关</router-link
      >
      <router-link to="/gatewayconfiguration"
        >斥候工业网关-数据采集配置-网关配置</router-link
      >
      <router-link to="/configuration"
        >斥候工业网关-数据采集配置-设备配置</router-link
      >
      <router-link to="/collectionpoint"
        >斥候工业网关-数据采集配置-采集点配置</router-link
      >
      <router-link to="/chmqtt">斥候工业网关-数据上云配置-MQTT上云</router-link>
      <router-link to="/ckipconfig">串口服务器-Ip配置</router-link>
      <router-link to="/ckportconfig">串口服务器-端口配置</router-link>
      <router-link to="/towifi"
        >串口服务器-485towifi-串口及网络协议设置</router-link
      >
      <router-link to="/cknet">串口服务器-485towifi-网口配置</router-link>
      <router-link to="/ckwireless">串口服务器-485towifi-无线配置</router-link>
      <router-link to="/networkmanagement">工业网闸配置-网络管理</router-link>
      <router-link to="/objmanagement">工业网闸配置-对象管理</router-link>
      <router-link to="/strategyManagement">工业网闸配置-策略管理</router-link>
      <router-link to="/addstrategy"
        >工业网闸配置-策略管理-添加策略</router-link
      >
      <router-link to="/ntconfig">网络优化-网关配置</router-link>
      <router-link to="/ntmaintenance">网络优化-网关维护</router-link>

      <!-- 刘龙龙写的全部路由 -->
    </div>
    <div class="chihou">
      <h2>斥候工业网关</h2>
      <ChiGate></ChiGate>
      <ChiWireld></ChiWireld>
      <ChiGateway></ChiGateway>
      <ChiDevice></ChiDevice>
      <ChiCollection></ChiCollection>
      <ChiClone></ChiClone>
    </div>
    <IpConfiguration></IpConfiguration>
    <PortConfiguration></PortConfiguration>

    <div>
      <!-- //串口及网络协议设置 -->
      <netConfiguration />
      <!-- 网口配置 -->
      <NetworkConfiguration />
      <!-- 无线配置 -->
      <Wireles />
      <!-- 网络管理 -->
      <NetworkManagement />
      <!-- 对象管理 -->
      <ObjectManagement />
      <!-- 策略管理 -->
      <PolicyManagement />
      <!-- 网关配置 -->
      <GatewayConfiguration />
      <!-- 网关维护 -->
      <GatewayMaintenance />
      <div>
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import CollectionView from "../components/CollectionView.vue";
import CloneView from "../components/CloneView.vue";
import ChiGate from "../components/ChiGate.vue";
import ChiWireld from "../components/ChiWireld.vue";
import ChiGateway from "../components/ChiGateway.vue";
import IpConfiguration from "../components/IpConfiguration.vue";
import PortConfiguration from "../components/PortConfiguration.vue";
import ChiDevice from "../components/ChiDevice.vue";
import ChiCollection from "../components/ChiCollection.vue";
import ChiClone from "../components/ChiClone.vue";
import netConfiguration from "../components/netConfiguration.vue";
import NetworkConfiguration from "../components/NetworkConfiguration.vue";
import Wireles from "../components/Wireles.vue";
import NetworkManagement from "../components/NetworkManagement.vue";
import ObjectManagement from "../components/ObjectManagement.vue";
import PolicyManagement from "../components/PolicyManagement.vue";
import GatewayConfiguration from "../components/GatewayConfiguration.vue";
import GatewayMaintenance from "../components/GatewayMaintenance.vue";
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {},
  components: {
    CollectionView,
    CloneView,
    ChiGate,
    ChiWireld,
    ChiGateway,
    ChiDevice,
    ChiCollection,
    ChiClone,
    IpConfiguration,
    PortConfiguration,
    netConfiguration,
    NetworkConfiguration,
    Wireles,
    NetworkManagement,
    ObjectManagement,
    PolicyManagement,
    GatewayConfiguration,
    GatewayMaintenance,
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

#app {
  width: 100%;
  height: 100vh;
  background-color: #2b2d38;
}

.db_lite,
.chihou,
.ip {
  font-size: 18px;
  width: 100%;
  color: white;
  text-decoration: none;
  height: 60px;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
}
</style>