1 line
61 KiB
JSON
1 line
61 KiB
JSON
{"remainingRequest":"C:\\Users\\LGZN-Digital\\Desktop\\新建文件夹\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!C:\\Users\\LGZN-Digital\\Desktop\\新建文件夹\\TransFlow\\src\\views\\index.vue?vue&type=style&index=0&id=a83bd3b0&scoped=true&lang=css&","dependencies":[{"path":"C:\\Users\\LGZN-Digital\\Desktop\\新建文件夹\\TransFlow\\src\\views\\index.vue","mtime":1673836338605},{"path":"C:\\Users\\LGZN-Digital\\Desktop\\新建文件夹\\TransFlow\\node_modules\\css-loader\\dist\\cjs.js","mtime":1673232711341},{"path":"C:\\Users\\LGZN-Digital\\Desktop\\新建文件夹\\TransFlow\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1673232720593},{"path":"C:\\Users\\LGZN-Digital\\Desktop\\新建文件夹\\TransFlow\\node_modules\\postcss-loader\\src\\index.js","mtime":1673232718046},{"path":"C:\\Users\\LGZN-Digital\\Desktop\\新建文件夹\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1673232709843},{"path":"C:\\Users\\LGZN-Digital\\Desktop\\新建文件夹\\TransFlow\\node_modules\\vue-loader\\lib\\index.js","mtime":1673232720592}],"contextDependencies":[],"result":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\r\n.el-form-item {\r\n margin-bottom: 15px;\r\n}\r\n.content-box::-webkit-scrollbar {\r\n display: none; /* Chrome Safari */\r\n}\r\n.content-box .tab-box {\r\n padding: 10px 20px;\r\n background-color: #fff;\r\n /* border-radius: 10px; */\r\n}\r\n.new-dialog {\r\n width: 49%;\r\n height: 11%;\r\n left: calc(24vw);\r\n top: 90vh;\r\n bottom: 0 /* right:auto;; */;\r\n}\r\n.formBox {\r\n margin-top: 20px;\r\n margin-left: 20px;\r\n}\r\n/* .new-dialog .el-dialog {\r\n width:100%!important;\r\n margin: 0vh auto !important;\r\n margin-top: 0vh!important;\r\n} */\r\n.new-dialog .el-dialog {\r\n width: 100% !important;\r\n margin: 0 auto 0px !important;\r\n /* margin-top: 0vh!important; */\r\n}\r\n.new-dialog .el-dialog__wrapper::-webkit-scrollbar {\r\n display: none; /* Chrome Safari */\r\n}\r\n.new-dialog .customWidth {\r\n width: 100%;\r\n min-width: 150px;\r\n}\r\n.mapModuleApp {\r\n /* width:100%; */\r\n width: 1600px;\r\n height: 900px;\r\n display: inline-block;\r\n border: 1px soild #eee;\r\n}\r\n.el-drawer.btt,\r\n.el-drawer.ttb {\r\n width: 100%;\r\n left: 0;\r\n right: 0;\r\n height: 100% !important;\r\n}\r\n\r\n.el-drawer__container {\r\n position: relative;\r\n left: 0;\r\n right: 0;\r\n top: 0;\r\n bottom: 0;\r\n height: 100%;\r\n width: 100%;\r\n}\r\n",{"version":3,"sources":["index.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkjCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"index.vue","sourceRoot":"src/views","sourcesContent":["<template>\r\n <div class=\"content-box\">\r\n <!-- <div class=\"container\"> -->\r\n <div class=\"tab-box\">\r\n <!-- <el-tabs type=\"border-card\" v-model=\"activeName\" tab-position=\"left\"> -->\r\n <el-tabs v-model=\"activeName\">\r\n <el-tab-pane :label=\"titName\" name=\"first\">\r\n <div class=\"mapModuleApp\">\r\n <iframe\r\n id=\"mapModule\"\r\n src=\"./VideoWeb/index.html\"\r\n frameborder=\"0\"\r\n style=\"width: 100%; height: 100%\"\r\n scrolling=\"no\"\r\n ></iframe>\r\n <!-- <iframe src=\"./VideoWeb/index.html\" style=\"height: 100%; width: 100%;border: none\" \r\n ref=\"iframe\"></iframe> -->\r\n </div>\r\n <!-- <div style=\"width:20%;height:100%;display:inline-block;border:1px soild #eee;padding:15px;\">\r\n\r\n <el-button type=\"primary\" @click=\"dialogFormVisible = true\">断面组件</el-button>\r\n <el-button type=\"primary\" @click=\"areaComponent = true\">区域组件</el-button>\r\n <el-button type=\"primary\" @click=\"trajectory=true\">轨迹组件</el-button>\r\n <el-button type=\"primary\" @click=\"speed = true\">速度组件</el-button>\r\n <el-button type=\"primary\" @click=\"flow = true\">流量组件</el-button>\r\n <el-button type=\"primary\" @click=\"indexModule = true\">车头时距</el-button>\r\n <el-button type=\"primary\" @click=\"indexModule = true\">排队数</el-button>\r\n <el-button type=\"primary\" @click=\"indexModule = true\">检测数</el-button>\r\n <el-button type=\"primary\" @click=\"indexModule = true\">延误</el-button>\r\n <el-button type=\"primary\" @click=\"indexModule = true\">拥堵</el-button>\r\n\r\n </div> -->\r\n </el-tab-pane>\r\n <el-tab-pane label=\"数据看板\" name=\"second\">\r\n <dataBoard :activeName=\"activeName\" :triggerData=\"triggerData\"></dataBoard>\r\n </el-tab-pane>\r\n <el-tab-pane label=\"分析配置\" name=\"third\">\r\n <analysisConfiguration :analysisConfigurationdata=\"analysisConfigurationdata\"></analysisConfiguration>\r\n </el-tab-pane>\r\n <el-tab-pane label=\"分析状态\" name=\"fourth\">\r\n <editModal></editModal>\r\n </el-tab-pane>\r\n <el-tab-pane label=\"存储\" name=\"five\">存储</el-tab-pane>\r\n </el-tabs>\r\n <!-- <div style=\"width:30%;height:300px;display:inline-block\">\r\n <img :src='imgUrl' width=\"100%\" height=\"100%\"/>\r\n </div> \r\n <div style=\"width:30%;height:300px;display:inline-block\">\r\n <img :src='imgUrl1' width=\"100%\" height=\"100%\"/>\r\n </div> \r\n <div style=\"width:30%;height:300px;display:inline-block\">\r\n <img :src='imgUrl2' width=\"100%\" height=\"100%\"/>\r\n </div> \r\n <div style=\"width:30%;height:300px;display:inline-block\">\r\n <img :src='imgUrl3' width=\"100%\" height=\"100%\"/>\r\n </div> \r\n <div style=\"width:30%;height:300px;display:inline-block\">\r\n <img :src='imgUrl4' width=\"100%\" height=\"100%\"/>\r\n </div> \r\n <div style=\"width:30%;height:300px;display:inline-block\">\r\n <img :src='imgUrl5' width=\"100%\" height=\"100%\"/>\r\n </div> -->\r\n </div>\r\n <!-- <div id=\"dialog\" style=\"height:500px\"> -->\r\n <!-- <el-dialog class=\"new-dialog\" :title=\"title+'组件'\" :modal=\"false\" :close-on-click-modal=\"false\" :visible.sync=\"dialogFormVisible\" v-alterELDialogMarginTop=\"{marginTop:'0vh'}\" customClass='customWidth' width=\"100%\" @close='closeForm(form)'>\r\n <el-form ref=\"form\" :model=\"form\" label-width=\"80px\">\r\n <el-form-item label=\"组件名称\">\r\n <el-input v-model=\"form.name\"></el-input>\r\n </el-form-item>\r\n <el-form-item label=\"断面方向\" v-if=\"form.type=='断面'\">\r\n <el-select v-model=\"form.Direction\" placeholder=\"请选择类型\">\r\n <el-option label=\"正向\" value=\"正向\"></el-option>\r\n <el-option label=\"反向\" value=\"反向\"></el-option>\r\n <el-option label=\"双向\" value=\"双向\"></el-option>\r\n </el-select>\r\n </el-form-item>\r\n <el-form-item label=\"速度阈值\" v-if=\"form.type=='区域'\">\r\n <el-input-number v-model=\"form.StoppingSpeed\" :precision=\"1\" :step=\"0.1\"></el-input-number>\r\n </el-form-item>\r\n <el-form-item>\r\n <el-button type=\"primary\" @click=\"onSubmit(form)\">确认</el-button>\r\n <el-button @click=\"closeFigure(form)\">取消</el-button>\r\n </el-form-item>\r\n </el-form>\r\n \r\n </el-dialog> -->\r\n <el-drawer\r\n class=\"new-dialog\"\r\n :visible.sync=\"dialogFormVisible\"\r\n direction=\"btt\"\r\n custom-class=\"demo-drawer\"\r\n ref=\"drawer\"\r\n :modal=\"false\"\r\n :close-on-click-modal=\"false\"\r\n v-alterELDialogMarginTop=\"{ marginTop: '0vh' }\"\r\n width=\"100%\"\r\n :wrapperClosable=\"false\"\r\n :with-header=\"false\"\r\n size=\"100%\"\r\n >\r\n <div class=\"formBox\">\r\n <el-form ref=\"form\" :model=\"form\" label-width=\"80px\" :inline=\"true\">\r\n <el-form-item label=\"组件名称\">\r\n <el-input v-model=\"form.name\"></el-input>\r\n </el-form-item>\r\n <el-form-item label=\"断面方向\" v-if=\"form.type == '断面'\">\r\n <el-select v-model=\"form.Direction\" placeholder=\"请选择类型\">\r\n <el-option label=\"正向\" value=\"正向\"></el-option>\r\n <el-option label=\"反向\" value=\"反向\"></el-option>\r\n <el-option label=\"双向\" value=\"双向\"></el-option>\r\n </el-select>\r\n </el-form-item>\r\n <!-- <el-form-item label=\"速度阈值\" v-if=\"form.type=='区域'\">\r\n <el-input-number v-model=\"form.StoppingSpeed\" :precision=\"1\" :step=\"0.1\"></el-input-number>\r\n </el-form-item> -->\r\n <el-form-item>\r\n <el-button type=\"primary\" @click=\"onSubmit(form)\">确认</el-button>\r\n <el-button @click=\"closeFigure(form)\">取消</el-button>\r\n </el-form-item>\r\n </el-form>\r\n </div>\r\n </el-drawer>\r\n <!-- 组件弹框 -->\r\n <el-dialog :title=\"componentTitle + '指标组件'\" width=\"40%\" :visible.sync=\"component\">\r\n <el-form ref=\"form\" :model=\"componentForm\" label-width=\"150px\" @close=\"closeComponentForm()\">\r\n <el-form-item label=\"名称：\">\r\n <el-input v-model=\"componentForm.componentName\"></el-input>\r\n </el-form-item>\r\n\r\n <el-form-item label=\"类型筛选：\" v-if=\"componentForm.componentType == '类型'\">\r\n <el-checkbox-group v-model=\"componentForm.type\" @change=\"handleTypeData\">\r\n <el-checkbox v-for=\"item in typeData\" :label=\"item\" :key=\"item\">{{ item }}</el-checkbox>\r\n <!-- <el-checkbox label=\"小汽车\" name=\"type\" ></el-checkbox>\r\n <el-checkbox label=\"公交车\" name=\"type\" ></el-checkbox>\r\n <el-checkbox label=\"卡车\" name=\"type\" ></el-checkbox>\r\n <el-checkbox label=\"非机动车\" name=\"type\" ></el-checkbox>\r\n <el-checkbox label=\"行人\" name=\"type\" ></el-checkbox> -->\r\n </el-checkbox-group>\r\n </el-form-item>\r\n <el-form-item label=\"数值筛选：\" v-if=\"componentForm.componentType != 'OD'\">\r\n <el-input-number v-model=\"componentForm.startValue\"></el-input-number>\r\n <el-input-number v-model=\"componentForm.endValue\" style=\"margin-left: 5%\"></el-input-number>\r\n </el-form-item>\r\n <el-form-item label=\"时间模式：\">\r\n <el-select v-model=\"componentForm.timeMode\" placeholder=\"请选择时间模式\">\r\n <el-option label=\"触发\" value=\"touch\"></el-option>\r\n <el-option\r\n label=\"周期时刻\"\r\n value=\"timeing\"\r\n v-if=\"\r\n componentForm.componentType != '排队数' &&\r\n componentForm.componentType != '检测数' &&\r\n componentForm.componentType != '延误' &&\r\n componentForm.componentType != '拥堵'\r\n \"\r\n ></el-option>\r\n <el-option label=\"周期统计\" value=\"date\" v-if=\"componentForm.componentType != 'OD'\"></el-option>\r\n </el-select>\r\n </el-form-item>\r\n <!-- <el-form-item label=\"触发类型：\" v-if=\"componentForm.timeModel=='touch'\">\r\n <el-radio-group v-model=\"componentForm.touchType\" >\r\n <el-radio label=\"实时（触发）\"></el-radio>\r\n <el-radio label=\"间隔\"></el-radio>\r\n </el-radio-group>\r\n </el-form-item> -->\r\n <el-form-item label=\"周期间隔：\">\r\n <!-- <el-slider v-model=\"componentForm.cycleInterval\" show-input>\r\n </el-slider> -->\r\n <el-slider v-model=\"componentForm.cycleInterval\"> </el-slider>\r\n <el-select v-model=\"componentForm.company\" placeholder=\"请选择单位\">\r\n <!-- <el-option label=\"秒\" value=\"ss\"></el-option>\r\n <el-option label=\"分钟\" value=\"mm\"></el-option>\r\n <el-option label=\"小时\" value=\"hh\"></el-option>\r\n <el-option label=\"天\" value=\"dd\"></el-option> -->\r\n <el-option v-for=\"item in timeSelect\" :key=\"item.value\" :label=\"item.label\" :value=\"item.value\"></el-option>\r\n </el-select>\r\n </el-form-item>\r\n <!-- <el-form-item label=\"单位：\" >\r\n \r\n </el-form-item> -->\r\n <el-form-item label=\"起点：\" v-if=\"componentForm.componentType == 'OD'\">\r\n <el-checkbox-group v-model=\"componentForm.startSection\" @change=\"handleCheckedStartSection\">\r\n <el-checkbox v-for=\"item in sectionals\" :label=\"item.graphicName\" :key=\"item.graphicId\">{{\r\n item.graphicName\r\n }}</el-checkbox>\r\n </el-checkbox-group>\r\n </el-form-item>\r\n <el-form-item label=\"终点：\" v-if=\"componentForm.componentType == 'OD'\">\r\n <el-checkbox-group v-model=\"componentForm.endSection\" @change=\"handleCheckedendSection\">\r\n <el-checkbox v-for=\"item in sectionals\" :label=\"item.graphicName\" :key=\"item.graphicId\">{{\r\n item.graphicName\r\n }}</el-checkbox>\r\n </el-checkbox-group>\r\n </el-form-item>\r\n <el-form-item label=\"展现形式：\" v-if=\"componentForm.componentType != 'OD'\">\r\n <el-checkbox-group v-model=\"componentForm.presentation\" @change=\"handlePresentation\">\r\n <el-checkbox label=\"数值\" name=\"presentation\"></el-checkbox>\r\n <el-checkbox label=\"表格\" name=\"presentation\" v-if=\"componentForm.componentType != '拥堵'\"></el-checkbox>\r\n <el-checkbox label=\"时间曲线图\" name=\"type\"></el-checkbox>\r\n <el-checkbox label=\"直方图\" name=\"presentation\" v-if=\"componentForm.componentType == '类型'\"></el-checkbox>\r\n <el-checkbox label=\"饼状图\" name=\"presentation\" v-if=\"componentForm.componentType == '类型'\"></el-checkbox>\r\n <el-checkbox label=\"均值图\" name=\"presentation\" v-if=\"componentForm.componentType != '拥堵'\"></el-checkbox>\r\n </el-checkbox-group>\r\n <!-- <el-checkbox-group v-model=\"componentForm.presentation\" @change=\"handlePresentation\">\r\n <el-checkbox v-for=\"item in sectionals\" :label=\"item.graphicName\" :key=\"item.graphicId\" >{{item.graphicName}}</el-checkbox>\r\n </el-checkbox-group> -->\r\n </el-form-item>\r\n\r\n <el-form-item>\r\n <el-button type=\"primary\" @click=\"onSubmitComponent(componentForm)\">确认</el-button>\r\n <el-button @click=\"closeComponent(componentForm)\">取消</el-button>\r\n </el-form-item>\r\n </el-form>\r\n </el-dialog>\r\n\r\n <!-- </div> -->\r\n </div>\r\n</template>\r\n\r\n<script>\r\n// import mqtt from \"mqtt\"; // mqtt协议\r\nimport editModal from '@/views/bounced/maintenanceRemind';\r\nimport analysisConfiguration from '@/views/bounced/analysisConfiguration';\r\nimport dataBoard from '@/views/bounced/dataBoard';\r\nimport { getComponentData, getSectionalData } from '../api/index';\r\nimport serverUrl from '../config/apiurl.js';\r\nimport axios from 'axios';\r\n// mqtt\r\n// import mqttHandle from \"../../../utils/mqttHandle\";\r\nimport mqttConfig from '@/utils/mqttConfig.js';\r\nvar mqtt; //mqtt 处理对象（全局变量）\r\nvar client;\r\n// var topicSends; //订阅的topic 例如：[\"Time1\", \"EngineMain1\", \"Console1\", \"Location1\"]\r\n// //判断\r\n// var number = 1\r\nexport default {\r\n data() {\r\n return {\r\n receiveNews: '',\r\n topicSends: ['img0', 'stream0', 'trajectory0', 'detection0'],\r\n trajectory: false, //轨迹\r\n hideBoxShow: true, //隐藏箱子按钮显示隐藏\r\n closeStatus: null,\r\n modelOthers: false,\r\n componentShow: '',\r\n isShowBtn: true, //菜单按钮隐藏\r\n isShowBtn1: false, //菜单按钮显示\r\n inputVal: '',\r\n dialogFormVisible: false,\r\n areaComponent: false,\r\n indexModule: false,\r\n //判断模拟区，画布区\r\n numberNew: 1,\r\n speed: false,\r\n component: false,\r\n sectionals: [],\r\n activeName: 'first',\r\n VideoId: '',\r\n title: '断面',\r\n componentTitle: '速度',\r\n form: {\r\n name: '',\r\n type: '',\r\n id: '',\r\n coordinate: '',\r\n Direction: '正向',\r\n StoppingSpeed: '5'\r\n },\r\n //初始图形名称\r\n startFigureName: '',\r\n areaComponentform: {\r\n name: '',\r\n region: '',\r\n date1: '',\r\n date2: '',\r\n delivery: false,\r\n type: [],\r\n resource: '实时（触发）',\r\n desc: ''\r\n },\r\n timeSelect: [\r\n {\r\n label: '秒',\r\n value: '秒'\r\n },\r\n {\r\n label: '分钟',\r\n value: '分钟'\r\n },\r\n {\r\n label: '小时',\r\n value: '小时'\r\n },\r\n {\r\n label: '天',\r\n value: '天'\r\n }\r\n ],\r\n titName: '',\r\n componentForm: {\r\n //单位\r\n company: '秒',\r\n componentName: '',\r\n componentParameterId: '01888e05fac246b29e3a19a27c3d2ab0',\r\n //周期间隔\r\n cycleInterval: '',\r\n startSectionIds: '',\r\n startSectionNames: '',\r\n endSectionIds: '',\r\n endSectionNames: '',\r\n endValue: '',\r\n //展现形式\r\n presentationForm: '',\r\n presentation: [],\r\n startValue: '',\r\n timeMode: '触发',\r\n type: [],\r\n startSection: [],\r\n endSection: [],\r\n componentType: '',\r\n typeFiltering: '',\r\n typeData: []\r\n },\r\n typeData: ['小汽车', '公交车', '卡车', '非机动车', '行人'],\r\n //展现形式\r\n presentation: ['数值', '表格', '时间曲线图', '均值图'],\r\n\r\n trackForm: {\r\n name: ''\r\n },\r\n // dateTime: this.$moment(new Date()).format(\"LL\"),\r\n nowTime: '',\r\n // weekday: this.$moment().format(\"dddd\"),\r\n ins: 0,\r\n imgUrl: '',\r\n imgUrl1: '',\r\n imgUrl2: '',\r\n imgUrl3: '',\r\n imgUrl4: '',\r\n imgUrl5: '',\r\n btnPic: [],\r\n Data: [\r\n {\r\n title: 'xx路口',\r\n url: ''\r\n },\r\n {\r\n title: '数据看板',\r\n url: ''\r\n },\r\n {\r\n title: '分析配置',\r\n url: ''\r\n },\r\n {\r\n title: '分析配置',\r\n url: ''\r\n }\r\n ],\r\n messageInfo: [],\r\n orderList: [],\r\n enterList: [],\r\n stockInfo: [],\r\n perCent: 0,\r\n perCent1: 0,\r\n perCent2: 0,\r\n facToal: '',\r\n wbContent: '',\r\n // wxContent:'',\r\n inContent: '',\r\n outContent: '',\r\n containerDetails: '',\r\n locdesc: '',\r\n weatherItem: {},\r\n loadingShow1: true,\r\n number: '',\r\n componentId: '',\r\n analysisConfigurationdata: {},\r\n //触发数据\r\n triggerData: ''\r\n };\r\n },\r\n\r\n //离开当前页面后执行\r\n destroyed: function () {\r\n console.log('离开当前页');\r\n // client.publish('msg_stream',JSON.stringify({\"msg_flag\":-1}))\r\n client.end();\r\n },\r\n created() {\r\n window.getFigure = this.getFigureD;\r\n window.getModifyTheName = this.getModifyTheNameN;\r\n // window.getModifyTheName = this.getModifyTheNameN;\r\n window.getSingleComponentId = this.getSingleComponentIdN;\r\n window.getSimulationAreaEdit = this.getSimulationAreaEdit;\r\n window.OnScene = this.OnSceneN;\r\n this.getAllSectionalData(this.$route.query.id);\r\n this.VideoId = this.$route.query.id;\r\n this.number = this.$route.query.num;\r\n this.titName = this.$route.query.name;\r\n },\r\n mounted() {\r\n // this.testMqtt()\r\n\r\n // this.getSingleComponentIdN()\r\n this.componentForm.company = this.timeSelect[0].value;\r\n this.createMqtt();\r\n },\r\n methods: {\r\n /** 创建mqtt */\r\n createMqtt() {\r\n //创建链接，接收数据\r\n this.topicSends = ['img' + this.number, 'stream' + this.number, 'trajectory' + this.number, 'detection' + this.number];\r\n mqtt = new mqttConfig(this.topicSends);\r\n client = mqtt.createConnect();\r\n client.subscribe(\r\n ['img' + this.number, 'stream' + this.number, 'trajectory' + this.number, 'detection' + this.number],\r\n { qos: 0 },\r\n (err) => {\r\n if (!err) {\r\n console.log('订阅成功');\r\n client.publish('msg_stream', JSON.stringify({ msg_flag: parseInt(this.number) }));\r\n } else {\r\n console.log('消息订阅失败！');\r\n }\r\n }\r\n );\r\n client.on('message', (topic, message) => {\r\n //数据分类\r\n try {\r\n // this.receiveNews = this.receiveNews.concat(message);\r\n // this.realInfo(topic, this.receiveNews);\r\n this.realInfo(topic, message);\r\n } catch (error) {}\r\n });\r\n },\r\n //停止订阅mqtt\r\n disConnect() {\r\n if (client != null) {\r\n client.unsubscribe(this.topicSends);\r\n client = null;\r\n }\r\n },\r\n /** 实时数据分类 */\r\n realInfo(topic, message) {\r\n switch (topic) {\r\n // 接收托片\r\n case 'img0':\r\n case 'img1':\r\n case 'img2':\r\n try {\r\n const utf8decoder = new TextDecoder();\r\n const u8arr = new Uint8Array(message);\r\n const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串\r\n const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据\r\n document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));\r\n if (msg.rate == 'high') {\r\n document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));\r\n } else {\r\n this.analysisConfigurationdata = msg;\r\n }\r\n } catch (error) {}\r\n break;\r\n // 树结构\r\n case 'stream0':\r\n case 'stream1':\r\n case 'stream2':\r\n try {\r\n const utf8decoder1 = new TextDecoder();\r\n const u8arr = new Uint8Array(message);\r\n const temp = utf8decoder1.decode(u8arr); // 将二进制数据转为字符串\r\n const msg = JSON.parse(temp);\r\n document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg));\r\n } catch (error) {}\r\n break;\r\n // 控制台输出\r\n case 'trajectory0':\r\n case 'trajectory1':\r\n case 'trajectory2':\r\n case 'trajectory3':\r\n try {\r\n const utf8decoder = new TextDecoder();\r\n const u8arr = new Uint8Array(message);\r\n // console.log(\"message11\",message)\r\n const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串\r\n // console.log(\"temp11\",temp)\r\n const msg = JSON.parse(temp);\r\n // console.log(\"msg11\",msg)\r\n document.getElementById('mapModule').contentWindow.getGuiJi(JSON.stringify(msg));\r\n } catch (error) {}\r\n break;\r\n // 触发\r\n case 'detection0':\r\n case 'detection1':\r\n case 'detection2':\r\n try {\r\n const utf8decoder = new TextDecoder();\r\n const u8arr = new Uint8Array(message);\r\n // console.log(\"message\",message)\r\n const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串\r\n // console.log(\"temp\",temp)\r\n var detId = [];\r\n const msgN = JSON.parse(temp);\r\n // console.log(\"msgN\",msgN)\r\n this.triggerData = msgN;\r\n if (temp.length != 0) {\r\n for (let i = 0; i < msgN.length; i++) {\r\n detId.push(msgN[i].det_id);\r\n }\r\n // console.log(\"detId\",detId)\r\n // const msg = detId\r\n // console.log(\"msg\",msg)\r\n document.getElementById('mapModule').contentWindow.getChuFa(JSON.stringify(detId));\r\n // document.getElementById(\"mapModule\").contentWindow.getChuFa(detId)\r\n }\r\n } catch (error) {}\r\n break;\r\n }\r\n this.receiveNews = '';\r\n },\r\n // handleClick(tab, event) {\r\n // console.log(tab, event);\r\n // },\r\n\r\n //初始化unity\r\n OnSceneN() {\r\n document.getElementById('mapModule').contentWindow.postVideoId(JSON.stringify(this.$route.query.id));\r\n },\r\n // //新增组件根据组件id获取单个组件数据\r\n getSingleComponentIdN(id, type, name) {\r\n console.log('id', id);\r\n console.log('type', type);\r\n console.log('name', name);\r\n this.componentId = id;\r\n this.componentForm.componentType = type;\r\n this.componentTitle = type;\r\n getComponentData({ AnalogAreaComponentId: id }).then((res) => {\r\n console.log('res', res);\r\n if (res.data.code == 200) {\r\n console.log('res', res.data.data);\r\n this.component = true;\r\n if (res.data.data.company != '') {\r\n this.componentForm.company = res.data.data.company;\r\n }\r\n if (res.data.data.timeMode != '') {\r\n this.componentForm.timeMode = res.data.data.timeMode;\r\n }\r\n // this.componentForm.componentName = res.data.data.componentName+'-'+type\r\n this.componentForm.componentName = res.data.data.componentName;\r\n this.componentForm.componentParameterId = res.data.data.componentParameterId;\r\n this.componentForm.cycleInterval = res.data.data.cycleInterval;\r\n this.componentForm.startSectionIds = res.data.data.startSectionIds;\r\n this.componentForm.startSectionNames = res.data.data.startSectionNames;\r\n this.componentForm.endSectionIds = res.data.data.endSectionIds;\r\n this.componentForm.endSectionNames = res.data.data.endSectionNames;\r\n this.componentForm.endValue = res.data.data.endValue;\r\n this.componentForm.startValue = res.data.data.startValue;\r\n this.componentForm.presentationForm = res.data.data.presentationForm;\r\n\r\n // this.componentForm.typeFiltering = res.data.data.typeFiltering\r\n // this.componentForm.type = res.data.data.type\r\n if (res.data.data.startSectionIds != '') {\r\n console.log('startSectionIds', res.data.data.startSectionIds);\r\n var startSectionIdArr = [];\r\n var startSectionArr = [];\r\n startSectionIdArr = res.data.data.startSectionIds.split(',');\r\n console.log('this.sectionals', this.sectionals);\r\n console.log('startSectionIdArr', startSectionIdArr);\r\n startSectionIdArr.forEach((item) => {\r\n this.sectionals.forEach((items) => {\r\n if (item == items.graphicId) {\r\n startSectionArr.push(items.graphicName);\r\n this.componentForm.startSection = startSectionArr;\r\n }\r\n });\r\n });\r\n }\r\n if (res.data.data.endSectionIds != '') {\r\n console.log('endSectionIds', res.data.data.endSectionIds);\r\n var endSectionIdArr = [];\r\n var endSectionArr = [];\r\n endSectionIdArr = res.data.data.endSectionIds.split(',');\r\n console.log('this.sectionals', this.sectionals);\r\n console.log('endSectionIdArr', endSectionIdArr);\r\n endSectionIdArr.forEach((item) => {\r\n this.sectionals.forEach((items) => {\r\n if (item == items.graphicId) {\r\n endSectionArr.push(items.graphicName);\r\n this.componentForm.endSection = endSectionArr;\r\n }\r\n });\r\n });\r\n }\r\n // if(res.data.data.presentationForm!=''){\r\n // var presentationN = []\r\n // presentationN = res.data.data.presentationForm.split(',')\r\n // this.componentForm.presentation = presentationN\r\n // }\r\n if (this.componentForm.presentationForm != '') {\r\n var arr = [];\r\n arr = this.componentForm.presentationForm.split(',');\r\n this.componentForm.presentation = arr;\r\n } else if (this.componentForm.presentationForm == '') {\r\n this.componentForm.presentation = [];\r\n }\r\n if (res.data.data.type != '') {\r\n var arr = [];\r\n arr = res.data.data.type.split(',');\r\n this.componentForm.type = arr;\r\n } else {\r\n this.componentForm.type = [];\r\n }\r\n console.log('this.componentForm', this.componentForm);\r\n }\r\n });\r\n },\r\n //修改模拟区组件、图形\r\n getSimulationAreaEdit(id, type, componentType, name, number) {\r\n console.log('number', number);\r\n this.numberNew = number;\r\n if (type == '图形') {\r\n this.form.id = id;\r\n this.form.name = name;\r\n this.form.type = componentType;\r\n this.startFigureName = name;\r\n if (this.form.type == '轨迹') {\r\n this.dialogFormVisible = true;\r\n } else if (this.form.type == '区域') {\r\n this.dialogFormVisible = true;\r\n } else if (this.form.type == '断面') {\r\n this.dialogFormVisible = true;\r\n }\r\n } else if (type == '组件') {\r\n this.componentId = id;\r\n this.componentForm.componentType = componentType;\r\n this.componentTitle = componentType;\r\n getComponentData({ AnalogAreaComponentId: id }).then((res) => {\r\n console.log('res', res);\r\n if (res.data.code == 200) {\r\n console.log('res', res.data.data);\r\n this.component = true;\r\n if (res.data.data.company != '') {\r\n this.componentForm.company = res.data.data.company;\r\n }\r\n if (res.data.data.timeMode != '') {\r\n this.componentForm.timeMode = res.data.data.timeMode;\r\n }\r\n // this.componentForm.componentName = res.data.data.componentName+'-'+type\r\n this.componentForm.componentName = res.data.data.componentName;\r\n this.componentForm.componentParameterId = res.data.data.componentParameterId;\r\n this.componentForm.cycleInterval = res.data.data.cycleInterval;\r\n this.componentForm.startSectionIds = res.data.data.startSectionIds;\r\n this.componentForm.startSectionNames = res.data.data.startSectionNames;\r\n this.componentForm.endSectionIds = res.data.data.endSectionIds;\r\n this.componentForm.endSectionNames = res.data.data.endSectionNames;\r\n this.componentForm.endValue = res.data.data.endValue;\r\n this.componentForm.startValue = res.data.data.startValue;\r\n this.componentForm.presentationForm = res.data.data.presentationForm;\r\n // this.componentForm.type = res.data.data.type\r\n if (res.data.data.startSectionIds != '') {\r\n console.log('startSectionIds', res.data.data.startSectionIds);\r\n var startSectionIdArr = [];\r\n var startSectionArr = [];\r\n startSectionIdArr = res.data.data.startSectionIds.split(',');\r\n console.log('this.sectionals', this.sectionals);\r\n console.log('startSectionIdArr', startSectionIdArr);\r\n startSectionIdArr.forEach((item) => {\r\n this.sectionals.forEach((items) => {\r\n if (item == items.graphicId) {\r\n startSectionArr.push(items.graphicName);\r\n this.componentForm.startSection = startSectionArr;\r\n }\r\n });\r\n });\r\n }\r\n if (res.data.data.endSectionIds != '') {\r\n console.log('endSectionIds', res.data.data.endSectionIds);\r\n var endSectionIdArr = [];\r\n var endSectionArr = [];\r\n endSectionIdArr = res.data.data.endSectionIds.split(',');\r\n console.log('this.sectionals', this.sectionals);\r\n console.log('endSectionIdArr', endSectionIdArr);\r\n endSectionIdArr.forEach((item) => {\r\n this.sectionals.forEach((items) => {\r\n if (item == items.graphicId) {\r\n endSectionArr.push(items.graphicName);\r\n this.componentForm.endSection = endSectionArr;\r\n }\r\n });\r\n });\r\n }\r\n if (this.componentForm.presentationForm != '') {\r\n var arr = [];\r\n arr = this.componentForm.presentationForm.split(',');\r\n this.componentForm.presentation = arr;\r\n } else if (this.componentForm.presentationForm == '') {\r\n this.componentForm.presentation = [];\r\n }\r\n if (res.data.data.type != '') {\r\n var arr = [];\r\n arr = res.data.data.type.split(',');\r\n this.componentForm.type = arr;\r\n } else {\r\n this.componentForm.type = [];\r\n }\r\n }\r\n });\r\n }\r\n },\r\n //获取所有断面数据\r\n getAllSectionalData(VideoId) {\r\n getSectionalData({ VideoId: VideoId }).then((res) => {\r\n console.log('res', res);\r\n if (res.data.code == 200) {\r\n this.sectionals = res.data.data;\r\n }\r\n });\r\n },\r\n figureType(type) {\r\n if (type == 'Move') {\r\n type = '轨迹';\r\n } else if (type == 'Poly') {\r\n type = '区域';\r\n } else if (type == 'Line') {\r\n type = '断面';\r\n }\r\n return type;\r\n },\r\n getFigureD(item, index, indexNew) {\r\n console.log('图形类型', item);\r\n console.log('初始图形名称', index);\r\n this.startFigureName = index;\r\n console.log('图形位置', indexNew);\r\n this.dialogFormVisible = true;\r\n this.form.name = index;\r\n this.form.type = this.figureType(item);\r\n this.form.coordinate = indexNew;\r\n this.form.id = '';\r\n this.title = this.figureType(item);\r\n },\r\n //双击图形修改图形名称弹框\r\n getModifyTheNameN(data, number) {\r\n console.log('data', data);\r\n console.log('number', number);\r\n this.numberNew = number;\r\n var arr = [];\r\n arr = data.split(',');\r\n console.log('arr', arr);\r\n this.form.id = arr[0];\r\n this.form.name = arr[1];\r\n this.form.type = arr[2];\r\n this.startFigureName = arr[1];\r\n if (this.form.type == '轨迹') {\r\n // this.open2()\r\n this.dialogFormVisible = true;\r\n } else if (this.form.type == '区域') {\r\n this.dialogFormVisible = true;\r\n } else if (this.form.type == '断面') {\r\n this.dialogFormVisible = true;\r\n }\r\n },\r\n //新增、编辑图形确认按钮\r\n onSubmit(form) {\r\n console.log('form', form);\r\n //新增\r\n if (form.id == '') {\r\n let formData = new FormData();\r\n if (form.type == '断面') {\r\n formData.append('GraphicName', form.name);\r\n formData.append('GraphicType', form.type);\r\n formData.append('Coordinate', form.coordinate);\r\n formData.append('VideoId', this.VideoId);\r\n formData.append('Direction', form.Direction);\r\n } else if (form.type == '区域') {\r\n formData.append('GraphicName', form.name);\r\n formData.append('GraphicType', form.type);\r\n formData.append('Coordinate', form.coordinate);\r\n formData.append('VideoId', this.VideoId);\r\n // formData.append(\"Direction\",form.Direction);\r\n // formData.append(\"StoppingSpeed\",form.StoppingSpeed);\r\n } else {\r\n formData.append('GraphicName', form.name);\r\n formData.append('GraphicType', form.type);\r\n formData.append('Coordinate', form.coordinate);\r\n formData.append('VideoId', this.VideoId);\r\n // formData.append(\"Direction\",form.Direction);\r\n }\r\n\r\n axios({\r\n method: 'post',\r\n url: serverUrl.addFigure,\r\n data: formData\r\n }).then((res) => {\r\n console.log('res', res);\r\n\r\n if (res.data.code == 200) {\r\n this.$message({\r\n message: res.data.msg,\r\n type: 'success'\r\n });\r\n document.getElementById('mapModule').contentWindow.postFigureId(JSON.stringify(res.data.data));\r\n document\r\n .getElementById('mapModule')\r\n .contentWindow.postFigureName(\r\n JSON.stringify(res.data.data + ',' + form.name + ',' + this.startFigureName + ',' + this.numberNew)\r\n );\r\n this.dialogFormVisible = false;\r\n } else {\r\n this.$message({\r\n message: res.data.msg,\r\n type: 'warning'\r\n });\r\n }\r\n });\r\n } else {\r\n //编辑\r\n let formData = new FormData();\r\n if (form.type == '断面') {\r\n formData.append('GraphicName', form.name);\r\n formData.append('GraphicType', form.type);\r\n formData.append('Direction', form.Direction);\r\n formData.append('GraphicId', form.id);\r\n formData.append('VideoId', this.VideoId);\r\n } else if (form.type == '区域') {\r\n formData.append('GraphicName', form.name);\r\n formData.append('GraphicType', form.type);\r\n formData.append('Direction', form.Direction);\r\n formData.append('GraphicId', form.id);\r\n formData.append('VideoId', this.VideoId);\r\n formData.append('StoppingSpeed', form.StoppingSpeed);\r\n } else {\r\n formData.append('GraphicName', form.name);\r\n formData.append('GraphicType', form.type);\r\n // formData.append(\"Direction\",form.Direction);\r\n formData.append('GraphicId', form.id);\r\n formData.append('VideoId', this.VideoId);\r\n }\r\n axios({\r\n method: 'post',\r\n url: serverUrl.editFigure,\r\n data: formData\r\n }).then((res) => {\r\n console.log('res', res);\r\n\r\n if (res.data.code == 200) {\r\n this.$message({\r\n message: res.data.msg,\r\n type: 'success'\r\n });\r\n console.log('startFigureName', this.startFigureName);\r\n // document.getElementById(\"mapModule\").contentWindow.postFigureId(JSON.stringify(res.data.data))\r\n console.log('this.numberNew', this.numberNew);\r\n document\r\n .getElementById('mapModule')\r\n .contentWindow.postFigureName(\r\n JSON.stringify(form.id + ',' + form.name + ',' + this.startFigureName + ',' + this.numberNew)\r\n );\r\n this.dialogFormVisible = false;\r\n } else {\r\n this.$message({\r\n message: res.data.msg,\r\n type: 'warning'\r\n });\r\n }\r\n });\r\n }\r\n },\r\n //新增编辑组件取消\r\n onSubmitComponent(componentForm) {\r\n this.component = false;\r\n let formData = new FormData();\r\n if (componentForm.componentType == 'OD') {\r\n //名称\r\n formData.append('componentName', componentForm.componentName);\r\n //单位\r\n formData.append('company', componentForm.company);\r\n //id\r\n formData.append('componentParameterId', componentForm.componentParameterId);\r\n formData.append('cycleInterval', componentForm.cycleInterval);\r\n formData.append('startSectionIds', componentForm.startSectionIds);\r\n formData.append('startSectionNames', componentForm.startSectionNames);\r\n formData.append('endSectionIds', componentForm.endSectionIds);\r\n formData.append('endSectionNames', componentForm.endSectionNames);\r\n formData.append('endValue', componentForm.endValue);\r\n formData.append('startValue', componentForm.startValue);\r\n formData.append('timeMode', componentForm.timeMode);\r\n formData.append('presentationForm', '矩阵图');\r\n } else if (componentForm.componentType == '类型') {\r\n //名称\r\n formData.append('componentName', componentForm.componentName);\r\n //单位\r\n formData.append('company', componentForm.company);\r\n //id\r\n formData.append('componentParameterId', componentForm.componentParameterId);\r\n formData.append('cycleInterval', componentForm.cycleInterval);\r\n formData.append('endValue', componentForm.endValue);\r\n formData.append('startValue', componentForm.startValue);\r\n formData.append('timeMode', componentForm.timeMode);\r\n formData.append('presentationForm', componentForm.presentationForm);\r\n formData.append('type', componentForm.type);\r\n } else {\r\n //名称\r\n formData.append('componentName', componentForm.componentName);\r\n //单位\r\n formData.append('company', componentForm.company);\r\n //id\r\n formData.append('componentParameterId', componentForm.componentParameterId);\r\n formData.append('cycleInterval', componentForm.cycleInterval);\r\n formData.append('endValue', componentForm.endValue);\r\n formData.append('startValue', componentForm.startValue);\r\n formData.append('timeMode', componentForm.timeMode);\r\n formData.append('presentationForm', componentForm.presentationForm);\r\n }\r\n axios({\r\n method: 'post',\r\n url: serverUrl.editComponent,\r\n data: formData\r\n }).then((res) => {\r\n console.log('res', res);\r\n\r\n if (res.data.code == 200) {\r\n this.$message({\r\n message: res.data.msg,\r\n type: 'success'\r\n });\r\n document.getElementById('mapModule').contentWindow.postFigureId(JSON.stringify(res.data.data));\r\n document.getElementById('mapModule').contentWindow.editComponent(this.componentId + ',' + componentForm.componentName);\r\n this.dialogFormVisible = false;\r\n } else {\r\n this.$message({\r\n message: res.data.msg,\r\n type: 'warning'\r\n });\r\n }\r\n });\r\n },\r\n //新增编辑组件取消\r\n closeComponent(componentForm) {\r\n this.component = false;\r\n this.componentForm = {\r\n //单位\r\n company: '秒',\r\n componentName: '',\r\n componentParameterId: '01888e05fac246b29e3a19a27c3d2ab0',\r\n //周期间隔\r\n cycleInterval: '',\r\n startSectionIds: '',\r\n startSectionNames: '',\r\n endSectionIds: '',\r\n endSectionNames: '',\r\n endValue: '',\r\n //展现形式\r\n presentationForm: '',\r\n presentation: [],\r\n startValue: '',\r\n timeMode: '触发',\r\n type: [],\r\n startSection: [],\r\n endSection: [],\r\n componentType: '',\r\n typeFiltering: '',\r\n typeData: []\r\n };\r\n },\r\n //新增、编辑图形取消按钮\r\n closeFigure(form) {\r\n console.log('form', form);\r\n if (form.id != '') {\r\n this.dialogFormVisible = false;\r\n // document.getElementById(\"mapModule\").contentWindow.closeEdit(JSON.stringify(form.type+','+form.id))\r\n document.getElementById('mapModule').contentWindow.closeEdit(JSON.stringify(form.type + ',' + form.id));\r\n } else {\r\n this.dialogFormVisible = false;\r\n document.getElementById('mapModule').contentWindow.delFigure();\r\n }\r\n },\r\n closeComponentForm() {\r\n this.component = false;\r\n },\r\n closeForm(form) {\r\n if (this.form.id != '') {\r\n this.dialogFormVisible = false;\r\n document.getElementById('mapModule').contentWindow.closeEdit(JSON.stringify(form.type + ',' + form.id));\r\n // document.getElementById(\"mapModule\").contentWindow.closeEdit(form.type,form.id)\r\n } else {\r\n this.dialogFormVisible = false;\r\n document.getElementById('mapModule').contentWindow.delFigure();\r\n }\r\n },\r\n //改变起点\r\n handleCheckedStartSection(value) {\r\n console.log('改变起点', value);\r\n var startSectionIdArr = [];\r\n var startSectionNameArr = [];\r\n value.forEach((item) => {\r\n this.sectionals.forEach((items) => {\r\n if (item == items.graphicName) {\r\n startSectionIdArr.push(items.graphicId);\r\n startSectionNameArr.push(items.graphicName);\r\n let newStartSectionId = startSectionIdArr.join(',');\r\n let newStartSectionName = startSectionNameArr.join(',');\r\n this.componentForm.startSectionIds = newStartSectionId;\r\n this.componentForm.startSectionNames = newStartSectionName;\r\n }\r\n });\r\n });\r\n },\r\n //改变终点\r\n handleCheckedendSection(value) {\r\n console.log('改变终点', value);\r\n var endSectionIdArr = [];\r\n var endSectionNameArr = [];\r\n value.forEach((item) => {\r\n this.sectionals.forEach((items) => {\r\n if (item == items.graphicName) {\r\n endSectionIdArr.push(items.graphicId);\r\n endSectionNameArr.push(items.graphicName);\r\n let newendSectionId = endSectionIdArr.join(',');\r\n let newEndSectionName = endSectionNameArr.join(',');\r\n console.log('newendSectionId', newendSectionId);\r\n console.log('newEndSectionName', newEndSectionName);\r\n this.componentForm.endSectionIds = newendSectionId;\r\n this.componentForm.endSectionNames = newEndSectionName;\r\n }\r\n });\r\n });\r\n },\r\n //修改展现形式\r\n handlePresentation(value) {\r\n console.log('展现形式', value);\r\n let presentation = value.join(',');\r\n this.componentForm.presentationForm = presentation;\r\n console.log('this.componentForm.presentationForm', this.componentForm.presentationForm);\r\n },\r\n //类型数据\r\n handleTypeData(value) {\r\n console.log('类型数据', value);\r\n let type = value.join(',');\r\n this.componentForm.typeData = type;\r\n },\r\n //模型加载等待\r\n loadingShow(data) {\r\n this.loadingShow1 = data;\r\n },\r\n\r\n handleSearch() {\r\n this.modelOthers = true;\r\n this.$refs.htModels.finbBox(this.inputVal);\r\n console.log(this.$refs.htModels, 'asdasdasd');\r\n this.inputVal = '';\r\n },\r\n handleRow(val) {\r\n this.modelOthers = true;\r\n this.$refs.htModels.finbBox(val);\r\n },\r\n // 天气\r\n handleWather() {\r\n axios({\r\n url: 'https://restapi.amap.com/v3/weather/weatherInfo?key=bc2b906032fdd8a63cbd0790d656b1d7&city=620100',\r\n methods: ''\r\n }).then((res) => {\r\n this.weatherItem = res.data.lives[0];\r\n console.log(this.weatherItem, 'asdsads');\r\n });\r\n }\r\n },\r\n components: {\r\n editModal,\r\n analysisConfiguration,\r\n dataBoard\r\n }\r\n};\r\n</script>\r\n<style scoped>\r\n.el-form-item {\r\n margin-bottom: 15px;\r\n}\r\n.content-box::-webkit-scrollbar {\r\n display: none; /* Chrome Safari */\r\n}\r\n.content-box .tab-box {\r\n padding: 10px 20px;\r\n background-color: #fff;\r\n /* border-radius: 10px; */\r\n}\r\n.new-dialog {\r\n width: 49%;\r\n height: 11%;\r\n left: calc(24vw);\r\n top: 90vh;\r\n bottom: 0 /* right:auto;; */;\r\n}\r\n.formBox {\r\n margin-top: 20px;\r\n margin-left: 20px;\r\n}\r\n/* .new-dialog .el-dialog {\r\n width:100%!important;\r\n margin: 0vh auto !important;\r\n margin-top: 0vh!important;\r\n} */\r\n.new-dialog .el-dialog {\r\n width: 100% !important;\r\n margin: 0 auto 0px !important;\r\n /* margin-top: 0vh!important; */\r\n}\r\n.new-dialog .el-dialog__wrapper::-webkit-scrollbar {\r\n display: none; /* Chrome Safari */\r\n}\r\n.new-dialog .customWidth {\r\n width: 100%;\r\n min-width: 150px;\r\n}\r\n.mapModuleApp {\r\n /* width:100%; */\r\n width: 1600px;\r\n height: 900px;\r\n display: inline-block;\r\n border: 1px soild #eee;\r\n}\r\n.el-drawer.btt,\r\n.el-drawer.ttb {\r\n width: 100%;\r\n left: 0;\r\n right: 0;\r\n height: 100% !important;\r\n}\r\n\r\n.el-drawer__container {\r\n position: relative;\r\n left: 0;\r\n right: 0;\r\n top: 0;\r\n bottom: 0;\r\n height: 100%;\r\n width: 100%;\r\n}\r\n</style>\r\n"]}]} |