故障诊断书前端页面初次

@@ -40,5 +40,7 @@
 
 
 @import "../css/navTabs.css";
 @import "../css/navTabs.css";
 
 
+@import "../css/faultDiagnosis.css";
+
 /*对比分析*/
 /*对比分析*/
 @import "../css/analysis.css";
 @import "../css/analysis.css";

+.fault-book-input{
+    width: 75%;
+    text-align: center;
+    padding: 1.5%;
+}
+
+.fault-book-input-text{
+    width: 25%;
+    text-align: center;
+    margin-right: 3%;
+}
+
+.fault-book-title-card{
+    margin: 1%;
+    padding-left: 2%;
+}
+
+.fault-book-title-card-text{
+    color: #3A92FC;
+}
+
+#faultDiagnosisIndex{
+    background-color: #F4F5FA;
+    padding-top: 1%;
+    height: 100%;
+}
+
+.fault-definition .fault-definition-line{
+    padding-top: 1%;
+}
+.fault-definition .fault-definition-img{
+    padding-right: 0.5%;
+}
+
+.title-img{
+    position: absolute;
+    left: 5%;
+    width: 0.8%;
+    top: 19.5%;
+}
+
+.title-text{
+    position: absolute;
+    left: 7%;
+    font-size: 18px;
+    top: 19%;
+}
+
+.fault-definition .fault-definition-radio{
+    position: absolute;
+    left: 7%;
+    top: 22%;
+    width: 5%;
+}
+
+.fault-definition .fault-definition-select-up{
+    position: absolute;
+    top: 22%;
+    left: 20%;
+}
+
+.fault-definition .fault-definition-select-down{
+    position: absolute;
+    top: 27%;
+    left: 20%;
+}
+
+.network-monitor .context-radio{
+    position: absolute;
+    left: 2.7%;
+    top: 22%;
+    width: 20%;
+}
+
+.application-monitor .context-radio{
+    position: absolute;
+    left: 2.7%;
+    top: 22%;
+    width: 20%;
+}
+
+.apm-monitor .context-radio{
+    position: absolute;
+    left: 2.7%;
+    top: 22%;
+    width: 20%;
+}
+
+.log-detection .context-radio{
+    position: absolute;
+    left: 2.7%;
+    top: 22%;
+    width: 20%;
+}
+
+.basic-environment .context-radio{
+    position: absolute;
+    left: 2.7%;
+    top: 22%;
+    width: 20%;
+}
+
+.basic-environment .context-select{
+    position: absolute;
+    width: 40%;
+    top: 28%;
+    left: 0.8%;
+}
+
+.context-multiple-choice{
+    position: absolute;
+    left: 7%;
+    top: 27%;
+}
+
+.multiple-choice-icon{
+    position: relative;
+    top: 28.5%;
+    right: 18px;
+}
+
+.multiple-choice-button{
+    min-width: 140px;
+}
+
+.multiple-choice-add-icon{
+    position: relative;
+    top: 33%;
+    left: -132px;
+}
+
+.network-monitor-popup-left-context{
+
+}
+
+.network-monitor-popup-left{
+    background-color: #3B92FC;
+    padding-bottom: 3%;
+}
+
+.network-monitor-popup{
+
+}
+
+.network-monitor-popup .context-item{
+
+}
+
+.network-monitor-popup .context-head{
+    color: white;
+    padding-top: 10px;
+    font-size: 25px;
+}
+
+.network-monitor-popup .multiple-choice-button{
+    width: 100%;
+    color: #C7DBFE;
+    font-size: 18px;
+    margin-top: 15px;
+    padding-top: 10px;
+    height: 10%;
+}
+
+.network-monitor-popup-right .context-head{
+    color: #3B92FC;
+    font-size: 18px;
+    text-align: left;
+    margin-left: 4%;
+}

@@ -115,7 +115,12 @@ const routes = [{
         path: '/analysis/add',
         path: '/analysis/add',
         name: 'analysisAdd',
         name: 'analysisAdd',
         component: () => myImport('components/page/analysis/add/index')
         component: () => myImport('components/page/analysis/add/index')
-    }
+    },
+	{
+		path: '/faultDiagnosis',
+		name: 'faultDiagnosisIndex',
+		component: () => myImport('views/faultDiagnosis/index')
+	}
 ];
 ];
 
 
 // hash模式： createWebHashHistory
 // hash模式： createWebHashHistory

+<div id="faultDiagnosisIndex">
+    <!--搜索输入框部分-->
+    <el-row>
+        <el-col :span="6">
+            <div class="grid-content bg-purple">
+                <span class="fault-book-input-text">所属业务</span>
+                <el-input v-model="input" placeholder="Please input 1" class="fault-book-input"/>
+            </div>
+        </el-col>
+        <el-col :span="6">
+            <div class="grid-content bg-purple">
+                <span class="fault-book-input-text">名称</span>
+                <el-input v-model="input" placeholder="Please input 2" class="fault-book-input"/>
+            </div>
+        </el-col>
+    </el-row>
+
+    <!--卡片分页排头-->
+    <el-row :gutter="12" class="fault-book-title-card">
+        <el-col :span="3">
+            <el-card class="fault-book-title-card-text" @click="clickDaultDefinitionFunc()" shadow="hover">故障定义</el-card>
+        </el-col>
+        <el-col :span="3">
+            <el-card class="fault-book-title-card-text" @click="clickNetworkMonitorFunc()" shadow="hover">网络监测</el-card>
+        </el-col>
+        <el-col :span="3">
+            <el-card class="fault-book-title-card-text" @click="applicationMonitorFunc()" shadow="hover">应用检测</el-card>
+        </el-col>
+        <el-col :span="3">
+            <el-card class="fault-book-title-card-text" @click="basicEnvironmentFunc()" shadow="hover">基础环境</el-card>
+        </el-col>
+        <el-col :span="3">
+            <el-card class="fault-book-title-card-text" @click="apmMonitorFunc()" shadow="hover">APM</el-card>
+        </el-col>
+        <el-col :span="3">
+            <el-card class="fault-book-title-card-text" @click="logDetectionFunc()" shadow="hover">日志检测</el-card>
+        </el-col>
+        <el-col :span="3">
+            <el-card class="fault-book-title-card-text" @click="subscriptionReportFunc()" shadow="hover">报告订阅</el-card>
+        </el-col>
+    </el-row>
+
+    <!---主体卡片部分-->
+    <!--故障定义-->
+    <div class="fault-definition" v-if="faultDefinitionHide">
+        <div>
+            <span>
+                <img src="./src/assets/images/faultDiagnosis/icon-gzdy.png" class="title-img">
+                <span class="title-text">故障定义</span>
+            </span>
+        </div>
+        <div>
+            <span class="fault-definition-radio">
+                <el-radio v-model="faultDefinitionRadio" label="1">产生告警时触发</el-radio>
+                <el-radio v-model="faultDefinitionRadio" label="2">自定义规则</el-radio>
+            </span>
+            <span class="fault-definition-select-up">
+                当
+                <el-select v-model="value" placeholder="Select">
+                    <el-option
+                        v-for="item in options"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                    >
+                    </el-option>
+                </el-select>
+                的警告级别为
+                <el-select v-model="value" placeholder="Select">
+                    <el-option
+                        v-for="item in options"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                    >
+                    </el-option>
+                </el-select>
+                时触发
+            </span>
+            <span class="fault-definition-select-down">
+                当
+                <el-select v-model="value" placeholder="Select">
+                    <el-option
+                            v-for="item in options"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                    >
+                    </el-option>
+                </el-select>
+                的警告级别为
+                <el-select v-model="value" placeholder="Select">
+                    <el-option
+                            v-for="item in options"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                    >
+                    </el-option>
+                </el-select>
+                时触发
+            </span>
+
+        </div>
+    </div>
+
+    <!--网络检测-->
+    <div class="network-monitor" v-if="networkMonitorHide">
+        <div>
+            <span>
+                <img src="./src/assets/images/faultDiagnosis/icon-wljc.png" class="title-img">
+                <span class="title-text">网络检测</span>
+            </span>
+        </div>
+        <div class="context-radio">
+            <span class="fault-book-input-text">状态选择</span>
+            <el-radio v-model="radio1" label="1">启用</el-radio>
+            <el-radio v-model="radio1" label="2">不启用</el-radio>
+        </div>
+        <div class="context-multiple-choice">
+            <span v-for="(item, index) in networkMonitorList" :key="index">
+                <span>
+                    <el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button>
+                    <img :id="item.id" @click="deleteItem(item.id, networkMonitorList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon">
+                </span>
+            </span>
+            <span>
+                <el-button class="multiple-choice-button" @click="networkMonitorVisible = true">添加网络检测</el-button>
+                <img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
+            </span>
+        </div>
+    </div>
+
+    <!--应用监测-->
+    <div class="application-monitor" v-if="applicationMonitorHide">
+        <div>
+            <span>
+                <img src="./src/assets/images/faultDiagnosis/icon-yyjc.png" class="title-img">
+                <span class="title-text">应用检测</span>
+            </span>
+        </div>
+        <div class="context-radio">
+            <span class="fault-book-input-text">状态选择</span>
+            <el-radio v-model="radio1" label="1">启用</el-radio>
+            <el-radio v-model="radio1" label="2">不启用</el-radio>
+        </div>
+        <div class="context-multiple-choice">
+            <span v-for="(item, index) in applicationMonitorList" :key="index">
+                <span>
+                    <el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button>
+                    <img :id="item.id" @click="deleteItem(item.id, applicationMonitorList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon">
+                </span>
+            </span>
+            <span>
+                <el-button class="multiple-choice-button" @click="addNetworkMonitorItem()">添加应用检测</el-button>
+                <img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
+            </span>
+        </div>
+    </div>
+
+    <!--基础环境 Basic environment-->
+    <div class="basic-environment" v-if="basicEnvironmentHide">
+        <div>
+            <span>
+                <img src="./src/assets/images/faultDiagnosis/icon-jchj.png" class="title-img">
+                <span class="title-text">基础环境</span>
+            </span>
+        </div>
+        <div class="context-radio">
+            <span class="fault-book-input-text">状态选择</span>
+            <el-radio v-model="radio1" label="1">启用</el-radio>
+            <el-radio v-model="radio1" label="2">不启用</el-radio>
+        </div>
+        <div class="context-select">
+            <span class="fault-book-input-text context-select-text">选择类型</span>
+            <el-select v-model="value" placeholder="从业务选择">
+                <el-option
+                        v-for="item in options"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                >
+                </el-option>
+            </el-select>
+            <el-select v-model="value" placeholder="从资源选择">
+                <el-option
+                        v-for="item in options"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                >
+                </el-option>
+            </el-select>
+        </div>
+    </div>
+
+    <!--APM-->
+    <div class="apm-monitor" v-if="apmMonitorHide">
+        <div>
+            <span>
+                <img src="./src/assets/images/faultDiagnosis/icon-apm.png" class="title-img">
+                <span class="title-text">APM</span>
+            </span>
+        </div>
+        <div class="context-radio">
+            <span class="fault-book-input-text">状态选择</span>
+            <el-radio v-model="radio1" label="1">启用</el-radio>
+            <el-radio v-model="radio1" label="2">不启用</el-radio>
+        </div>
+        <div class="context-multiple-choice">
+            <span v-for="(item, index) in apmMonitorList" :key="index">
+                <span>
+                    <el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button>
+                    <img :id="item.id" @click="deleteItem(item.id, apmMonitorList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon">
+                </span>
+            </span>
+            <span>
+                <el-button class="multiple-choice-button" @click="addNetworkMonitorItem()">添加 APM</el-button>
+                <img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
+            </span>
+        </div>
+    </div>
+
+    <!--日志检测-->
+    <div class="log-detection" v-if="logDetectionHide">
+        <div>
+            <span>
+                <img src="./src/assets/images/faultDiagnosis/icon-rzjc.png" class="title-img">
+                <span class="title-text">日志检测</span>
+            </span>
+        </div>
+        <div class="context-radio">
+            <span class="fault-book-input-text">状态选择</span>
+            <el-radio v-model="radio1" label="1">启用</el-radio>
+            <el-radio v-model="radio1" label="2">不启用</el-radio>
+        </div>
+        <div class="context-multiple-choice">
+            <span v-for="(item, index) in logDetectionList" :key="index">
+                <span>
+                    <el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button>
+                    <img :id="item.id" @click="deleteItem(item.id, logDetectionList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon">
+                </span>
+            </span>
+            <span>
+                <el-button class="multiple-choice-button" @click="addNetworkMonitorItem()">添加日志检测</el-button>
+                <img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
+            </span>
+        </div>
+    </div>
+
+    <!--订阅报告-->
+    <div class="subscription-report" v-if="subscriptionReportHide">
+        <div>
+            <span>
+                <img src="./src/assets/images/faultDiagnosis/icon-bgdy.png" class="title-img">
+                <span class="title-text">报告订阅</span>
+            </span>
+        </div>
+        <div class="context-multiple-choice">
+            <span v-for="(item, index) in subscriptionReportList" :key="index">
+                <span>
+                    <el-button class="multiple-choice-button" type="primary">{{item.title}}</el-button>
+                    <img :id="item.id" @click="deleteItem(item.id, subscriptionReportList)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="multiple-choice-icon">
+                </span>
+            </span>
+            <span>
+                <el-button class="multiple-choice-button" @click="addNetworkMonitorItem()">添加订阅人员</el-button>
+                <img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
+            </span>
+        </div>
+    </div>
+
+    <!--网络检测弹窗-->
+    <div class="network-monitor-popup">
+        <el-dialog v-model="networkMonitorVisible" title="故障新增内容">
+            <el-row>
+                <el-col :span="6">
+                    <div class="grid-content bg-purple network-monitor-popup-left">
+                        <span>
+                            <div class="context-head">
+                                已配置链路
+                            </div>
+                        </span>
+                                <span v-for="(item, index) in networkMonitorList" :key="index">
+                            <span>
+                                <div class="multiple-choice-button">{{item.title}}</div>
+                                <!--img-->
+                            </span>
+                        </span>
+                                <span>
+                            <div class="multiple-choice-button">
+                                <img src="./src/assets/images/faultDiagnosis/icon-popup-add.png">
+                            </div>
+                        </span>
+
+                    </div>
+                </el-col>
+                <el-col :span="18">
+                    <div class="grid-content bg-purple-light network-monitor-popup-right">
+                        <div class="context-head">
+                            <span>电子税务局网络链路配置</span>
+                            <span >
+                                <img src="./src/assets/images/faultDiagnosis/icon-popup-right-delete.png">
+                            </span>
+                        </div>
+                    </div>
+                </el-col>
+            </el-row>
+<!--            <div class="network-monitor-popup-left">-->
+<!--                <span>-->
+<!--                    <div class="context-head">-->
+<!--                        已配置链路-->
+<!--                    </div>-->
+<!--                </span>-->
+<!--                <span v-for="(item, index) in networkMonitorList" :key="index">-->
+<!--                    <span>-->
+<!--                        <div class="multiple-choice-button">{{item.title}}</div>-->
+<!--                       &lt;!&ndash;img&ndash;&gt;-->
+<!--                    </span>-->
+<!--                </span>-->
+<!--                <span>-->
+<!--                    <div class="multiple-choice-button">-->
+<!--                        <img src="./src/assets/images/faultDiagnosis/icon-popup-add.png">-->
+<!--                    </div>-->
+<!--                </span>-->
+<!--            </div>-->
+<!--            <div class="network-monitor-popup-right">-->
+<!--                <div class="context-head">-->
+<!--                    <span>电子税务局网络链路配置</span>-->
+<!--                    <span>-->
+<!--                        <img src="./src/assets/images/faultDiagnosis/icon-popup-right-delete.png">-->
+<!--                    </span>-->
+<!--                </div>-->
+<!--            </div>-->
+        </el-dialog>
+    </div>
+
+</div>

+export default {
+    name: 'faultDiagnosis',
+    template: '',
+    components: {},
+    data () {
+        return {
+            multiple_choice_button_id_Tmpl: '',
+            multiple_choice_button_id: '',
+            faultDefinitionHide: false,
+            networkMonitorHide: false,
+            applicationMonitorHide: false,
+            basicEnvironmentHide: false,
+            apmMonitorHide: false,
+            logDetectionHide: false,
+            subscriptionReportHide: false,
+            //网络检测选中项集合
+            networkMonitorList: [
+                {
+                    title: "电子税务局外用链路1",
+                    type: "networkMonitor",
+                    id: "networkMonitor1"
+                },
+                {
+                    title: "电子税务局外用链路2",
+                    type: "networkMonitor",
+                    id: "networkMonitor2"
+                },
+                {
+                    title: "电子税务局外用链路3",
+                    type: "networkMonitor",
+                    id: "networkMonitor3"
+                }
+            ],
+            //应用检测选中项集合
+            applicationMonitorList: [
+                {
+                    title: "从对接过来的NPM中选择",
+                    type: "applicationMonitor",
+                    id: "applicationMonitor1"
+                }
+            ],
+            //APM
+            apmMonitorList: [
+                {
+                    title: "arms",
+                    type: "apmMonitor",
+                    id: " apmMonitor1"
+                }
+            ],
+            //日志检测
+            logDetectionList: [
+                {
+                    title: "日志检测1",
+                    type: "logDetection",
+                    id: " logDetection1"
+                }
+            ],
+            //订阅人员
+            //订阅人员
+            subscriptionReportList: [
+                {
+                    title: "张三",
+                    type: "subscriptionReport",
+                    id: " subscriptionReport1"
+                },
+                {
+                    title: "李四",
+                    type: "subscriptionReport",
+                    id: " subscriptionReport2"
+                },
+                {
+                    title: "王五",
+                    type: "subscriptionReport",
+                    id: " subscriptionReport3"
+                }
+
+            ],
+            networkMonitorVisible: false,
+        }
+    },
+    computed: {},
+    methods: {
+        hiddenAll(){
+            this.faultDefinitionHide = false;
+            this.networkMonitorHide = false;
+            this.applicationMonitorHide = false;
+            this.basicEnvironmentHide = false;
+            this.apmMonitorHide = false;
+            this.logDetectionHide = false;
+            this.subscriptionReportHide = false;
+        },
+        // 打开故障定义卡片
+        clickDaultDefinitionFunc(){
+            this.hiddenAll();
+            this.faultDefinitionHide = true;
+        },
+        //打开网络监测卡片
+        clickNetworkMonitorFunc(){
+            this.hiddenAll();
+            this.networkMonitorHide = true;
+        },
+        //打开应用监测卡片
+        applicationMonitorFunc(){
+            this.hiddenAll();
+            this.applicationMonitorHide = true;
+        },
+        //打开基础环境卡片
+        basicEnvironmentFunc(){
+            this.hiddenAll();
+            this.basicEnvironmentHide = true;
+        },
+        //APM
+        apmMonitorFunc(){
+            this.hiddenAll();
+            this.apmMonitorHide = true;
+        },
+        //日志检测
+        logDetectionFunc(){
+            this.hiddenAll();
+            this.logDetectionHide = true;
+        },
+        //报告订阅
+        subscriptionReportFunc(){
+            this.hiddenAll();
+            this.subscriptionReportHide = true;
+        },
+        //遍历集合，动态增加集合内item
+        showItemList(){
+        },
+        deleteItem(id, list){
+            var newList = [];
+            var type = '';
+            $.each(list,function (index, value) {
+                var valueId = value.id;
+                type = value.type;
+                if(valueId === id){
+                    console.log("点击删除id为:" + valueId + "的值")
+                } else {
+                    newList.push(value)
+                }
+            });
+            switch (type) {
+                case "networkMonitor":
+                    //网络检测
+                    this.networkMonitorList = newList;
+                    break;
+                case "applicationMonitor":
+                    //网络检测
+                    this.applicationMonitorList = newList;
+                    break;
+                case "apmMonitor":
+                    //APM
+                    this.apmMonitorList = newList;
+                    break;
+                case "logDetection":
+                    //日志检测
+                    this.logDetectionList = newList;
+                    break;
+                case "subscriptionReport":
+                    //订阅人员
+                    this.subscriptionReportList = newList;
+                    break;
+                case "networkMonitor5":
+                    //网络检测
+                    break;
+                case "networkMonitor6":
+                    //网络检测
+                    break;
+
+            }
+        },
+        //点击添加网络检测item
+        addNetworkMonitorItem(){
+
+        }
+
+    },
+    mounted () {},
+    unmounted () {}
+
+}