{"remainingRequest":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!E:\\2023\\yancheng0718\\yanchengPowerSupply\\src\\component\\routeDetail.vue?vue&type=script&lang=js&","dependencies":[{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\src\\component\\routeDetail.vue","mtime":1689642397092},{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1689642389292},{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\babel-loader\\lib\\index.js","mtime":1689642388897},{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1689642389292},{"path":"E:\\2023\\yancheng0718\\yanchengPowerSupply\\node_modules\\vue-loader\\lib\\index.js","mtime":1689642396086}],"contextDependencies":[],"result":["\r\nimport axios from \"axios\";\r\nlet docx = require(\"docx-preview\");\r\nwindow.JSZip = require(\"jszip\");\r\nexport default {\r\n  name: \"routeDetail\",\r\n  props: [\"routeItem\"],\r\n  data() {\r\n    return {\r\n      // titleList:['班组','故障路线','故障状态','故障类型','故障时间','故障描述','故障处理']\r\n      wordShow: false,\r\n    };\r\n  },\r\n  mounted() {\r\n    console.log(this.routeItem, \"sssssssssssss\");\r\n  },\r\n  methods: {\r\n    closeWord() {\r\n      // word文档的显隐\r\n      this.wordShow = false;\r\n    },\r\n    handleClose() {\r\n      this.$parent.routeShow = \"\";\r\n      this.$parent.routeItem = null;\r\n    },\r\n    detailBtn(url) {\r\n      // console.log(url, \"word下载链接\");\r\n      var url = \"/\" + url.split(\"/\")[3] + \"/\" + url.split(\"/\")[4];\r\n      var that = this;\r\n      axios({\r\n        url: \"/app\" + url,\r\n        responseType: \"blob\",\r\n      }).then(({ data }) => {\r\n        console.log(data, \"数据\");\r\n\r\n        that.$nextTick(() => {\r\n          // doc.renderAsync(data,that.$refs.word)\r\n          docx\r\n            .renderAsync(data, that.$refs.word, null, {\r\n              className: \"docx\", //默认和文档样式类的类名/前缀\r\n              inWrapper: true, //启用围绕文档内容呈现包装器\r\n              ignoreWidth: true, //禁用页面的渲染宽度\r\n              ignoreHeight: true, //禁用页面的渲染高度\r\n              ignoreFonts: false, //禁用字体渲染\r\n              breakPages: true, //在分页符上启用分页\r\n              ignoreLastRenderedPageBreak: true, //在lastRenderedPageBreak元素上禁用分页\r\n              experimental: false, //启用实验功能（制表符停止计算）\r\n              trimXMLDeclaration: true, //如果为true，则在解析之前将从xml文档中删除xml声明\r\n              useBase64URL: false, //如果为true，图像、字体等将转换为base 64 URL，否则使用URL.createObjectURL\r\n              useMathMLPolyfill: false, //包括用于铬、边等的MathML多填充。\r\n              showChanges: true, //启用文档更改的实验渲染（插入/删除）\r\n              debug: false, //启用额外的日志记录\r\n            })\r\n            .then((res) => {\r\n              that.wordShow = true;\r\n            });\r\n        });\r\n      });\r\n    },\r\n    created() {\r\n      // console.log(this.routeItem, \"故障详情\");\r\n      // console.log(this.routeItem, \"路线详细数据\");\r\n      // var arr = Object.keys(this.routeItem);\r\n      // console.log(arr);\r\n    },\r\n  },\r\n};\r\n",{"version":3,"sources":["routeDetail.vue"],"names":[],"mappings":";AA6DA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"routeDetail.vue","sourceRoot":"src/component","sourcesContent":["<template>\r\n  <div class=\"route\">\r\n    <div class=\"word\" v-show=\"wordShow\">\r\n      <div class=\"wordBox\" ref=\"word\"></div>\r\n    </div>\r\n    <!-- 关闭word的按钮 -->\r\n    <div class=\"closeWord\" @click=\"closeWord\" v-show=\"wordShow\">\r\n      <img src=\"@/assets/images/close.png\" style=\"cursor: pointer\" />\r\n    </div>\r\n    <div class=\"close\">\r\n      <img @click=\"handleClose\" src=\"@/assets/images/close.png\" style=\"cursor: pointer\" />\r\n    </div>\r\n    <div class=\"route-title\"><span class=\"text\">故障详情</span></div>\r\n    <div class=\"route-main\">\r\n      <div class=\"mainLeft\">\r\n        <div class=\"route-item\">\r\n          <div class=\"item-title\">班组:</div>\r\n          <div>{{ routeItem.bz }}</div>\r\n        </div>\r\n        <div class=\"route-item\">\r\n          <div class=\"item-title\">故障状态:</div>\r\n          <div style=\"color: #b16f18\">{{ routeItem.gz_state_dsc }}</div>\r\n        </div>\r\n        <div class=\"route-item\">\r\n          <div class=\"item-title1\">故障发生时间:</div>\r\n          <div style=\"margin-left: 0px\">{{ routeItem.gz_time }}</div>\r\n        </div>\r\n        <div class=\"route-item\">\r\n          <div class=\"item-title1\">处理完成时间:</div>\r\n          <div style=\"margin-left: 0px\">{{ routeItem.gz_time_deal }}</div>\r\n        </div>\r\n        <div class=\"route-item\" style=\"width: 100%\">\r\n          <div class=\"item-title1\">影响时户数:</div>\r\n          <div style=\"color: #3ebaa7\">{{ routeItem.yxshs }}</div>\r\n        </div>\r\n        <div class=\"route-item\" style=\"width: 100%\">\r\n          <div class=\"item-title1\">故障处理与分析:</div>\r\n          <div @click=\"detailBtn(routeItem.file_url)\" class=\"detailBtn\"></div>\r\n        </div>\r\n      </div>\r\n      <div class=\"mainRight\">\r\n        <div class=\"route-item\">\r\n          <div class=\"item-title\">故障线路:</div>\r\n          <div style=\"color: #b16f18\">{{ routeItem.gzxl }}</div>\r\n        </div>\r\n\r\n        <div class=\"route-item\">\r\n          <div class=\"item-title\">故障类型:</div>\r\n          <div>{{ routeItem.gz_type_dsc }}</div>\r\n        </div>\r\n\r\n        <div class=\"route-item\" style=\"display: flex; align-items: flex-start\">\r\n          <div class=\"item-title\">故障描述:</div>\r\n          <div style=\"text-align: left\">{{ routeItem.dsc }}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport axios from \"axios\";\r\nlet docx = require(\"docx-preview\");\r\nwindow.JSZip = require(\"jszip\");\r\nexport default {\r\n  name: \"routeDetail\",\r\n  props: [\"routeItem\"],\r\n  data() {\r\n    return {\r\n      // titleList:['班组','故障路线','故障状态','故障类型','故障时间','故障描述','故障处理']\r\n      wordShow: false,\r\n    };\r\n  },\r\n  mounted() {\r\n    console.log(this.routeItem, \"sssssssssssss\");\r\n  },\r\n  methods: {\r\n    closeWord() {\r\n      // word文档的显隐\r\n      this.wordShow = false;\r\n    },\r\n    handleClose() {\r\n      this.$parent.routeShow = \"\";\r\n      this.$parent.routeItem = null;\r\n    },\r\n    detailBtn(url) {\r\n      // console.log(url, \"word下载链接\");\r\n      var url = \"/\" + url.split(\"/\")[3] + \"/\" + url.split(\"/\")[4];\r\n      var that = this;\r\n      axios({\r\n        url: \"/app\" + url,\r\n        responseType: \"blob\",\r\n      }).then(({ data }) => {\r\n        console.log(data, \"数据\");\r\n\r\n        that.$nextTick(() => {\r\n          // doc.renderAsync(data,that.$refs.word)\r\n          docx\r\n            .renderAsync(data, that.$refs.word, null, {\r\n              className: \"docx\", //默认和文档样式类的类名/前缀\r\n              inWrapper: true, //启用围绕文档内容呈现包装器\r\n              ignoreWidth: true, //禁用页面的渲染宽度\r\n              ignoreHeight: true, //禁用页面的渲染高度\r\n              ignoreFonts: false, //禁用字体渲染\r\n              breakPages: true, //在分页符上启用分页\r\n              ignoreLastRenderedPageBreak: true, //在lastRenderedPageBreak元素上禁用分页\r\n              experimental: false, //启用实验功能（制表符停止计算）\r\n              trimXMLDeclaration: true, //如果为true，则在解析之前将从xml文档中删除xml声明\r\n              useBase64URL: false, //如果为true，图像、字体等将转换为base 64 URL，否则使用URL.createObjectURL\r\n              useMathMLPolyfill: false, //包括用于铬、边等的MathML多填充。\r\n              showChanges: true, //启用文档更改的实验渲染（插入/删除）\r\n              debug: false, //启用额外的日志记录\r\n            })\r\n            .then((res) => {\r\n              that.wordShow = true;\r\n            });\r\n        });\r\n      });\r\n    },\r\n    created() {\r\n      // console.log(this.routeItem, \"故障详情\");\r\n      // console.log(this.routeItem, \"路线详细数据\");\r\n      // var arr = Object.keys(this.routeItem);\r\n      // console.log(arr);\r\n    },\r\n  },\r\n};\r\n</script>\r\n\r\n<style scoped lang=\"less\">\r\n.route {\r\n  position: fixed;\r\n  top: 0;\r\n  margin: auto;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  background-image: url(\"../assets/images/baojingxinxiKuang.png\");\r\n  width: 1034px;\r\n  height: 608px;\r\n  background-size: 100% 100%;\r\n  padding: 20px 26px;\r\n  box-sizing: border-box;\r\n  .word {\r\n    position: fixed;\r\n    z-index: 999;\r\n    left: 0;\r\n    top: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    margin: auto;\r\n    width: 1511px;\r\n    height: 1071px;\r\n    background: url(\"../assets/images/ringMainUnitKuang.png\") no-repeat;\r\n    background-size: 100% 100%;\r\n    -webkit-animation: fadeInDown 0.3s;\r\n    animation: fadeInDown 0.3s;\r\n    padding: 15px 25px;\r\n    box-sizing: border-box;\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    align-content: space-between;\r\n    .wordBox {\r\n      margin-top: 3.1%;\r\n      height: 94%;\r\n      width: 100%;\r\n      overflow: scroll;\r\n    }\r\n  }\r\n\r\n  .closeWord {\r\n    top: -33%;\r\n    right: -20%;\r\n    z-index: 1001;\r\n    position: absolute;\r\n  }\r\n  .wordBox::-webkit-scrollbar {\r\n    display: none;\r\n  }\r\n  .route-main {\r\n    height: 90%;\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    margin-left: 30px;\r\n    overflow: auto;\r\n    .mainLeft{\r\n      width:50%;\r\n      height:100%;\r\n      display: flex;\r\n    flex-direction: column;\r\n    justify-content: flex-start;\r\n      .route-item {\r\n      width: 100%;\r\n      // height: 100%;\r\n      margin-top: 40px;\r\n      display: flex;\r\n      align-items: center;\r\n      .detailBtn {\r\n        width: 128px;\r\n        height: 37px;\r\n        background-image: url(\"../assets/images/detailBtn.png\");\r\n        background-size: 100% 100%;\r\n      }\r\n      .item-title {\r\n        letter-spacing: 2px;\r\n        // height: 65px;\r\n        width: 150px;\r\n        line-height: 30px;\r\n        background-size: 100% 100%;\r\n        font-size: 22px;\r\n        color: #fff;\r\n        // font-weight: 900;\r\n        // letter-spacing: ;\r\n        text-align: left;\r\n        white-space: nowrap;\r\n      }\r\n      .item-title1 {\r\n        width: 168px;\r\n        line-height: 30px;\r\n        background-size: 100% 100%;\r\n        font-size: 22px;\r\n        color: #fff;\r\n        // font-weight: 900;\r\n        // letter-spacing: ;\r\n        text-align: left;\r\n      }\r\n      & > div:nth-child(2) {\r\n        vertical-align: middle;\r\n        margin-left: 30px;\r\n        font-size: 23px;\r\n        color: #fff;\r\n        // margin-left: 20px;\r\n        letter-spacing: 3px;\r\n      }\r\n    }\r\n    }\r\n    .mainRight{\r\n      width:50%;\r\n      height:100%;\r\n      display: flex;\r\n    flex-direction: column;\r\n    justify-content: flex-start;\r\n      .route-item {\r\n      width: 100%;\r\n      // height: 100%;\r\n      margin-top: 40px;\r\n      display: flex;\r\n      align-items: center;\r\n      .detailBtn {\r\n        width: 128px;\r\n        height: 37px;\r\n        background-image: url(\"../assets/images/detailBtn.png\");\r\n        background-size: 100% 100%;\r\n      }\r\n      .item-title {\r\n        letter-spacing: 2px;\r\n        // height: 65px;\r\n        width: 150px;\r\n        line-height: 30px;\r\n        background-size: 100% 100%;\r\n        font-size: 22px;\r\n        color: #fff;\r\n        // font-weight: 900;\r\n        // letter-spacing: ;\r\n        text-align: left;\r\n        white-space: nowrap;\r\n      }\r\n      .item-title1 {\r\n        width: 168px;\r\n        line-height: 30px;\r\n        background-size: 100% 100%;\r\n        font-size: 22px;\r\n        color: #fff;\r\n        // font-weight: 900;\r\n        // letter-spacing: ;\r\n        text-align: left;\r\n      }\r\n      & > div:nth-child(2) {\r\n        vertical-align: middle;\r\n        margin-left: 30px;\r\n        font-size: 23px;\r\n        color: #fff;\r\n        // margin-left: 20px;\r\n        letter-spacing: 3px;\r\n      }\r\n    }\r\n    }\r\n    \r\n  }\r\n  .route-title {\r\n    font-size: 28px;\r\n    height: 10%;\r\n    width: 91%;\r\n    display: flex;\r\n    align-items: center;\r\n    margin-left: 50px;\r\n    // justify-content: center;\r\n    // display: flex;\r\n    align-content: flex-start;\r\n\r\n    .text {\r\n      //   font-weight: 900;\r\n      color: transparent;\r\n      -webkit-background-clip: text;\r\n      background-clip: text;\r\n      background-image: linear-gradient(to bottom, rgb(255, 255, 255), rgb(86, 244, 254));\r\n    }\r\n  }\r\n  .close {\r\n    position: absolute;\r\n    right: 5%;\r\n    top: 6%;\r\n  }\r\n}\r\n::-webkit-scrollbar {\r\n  display: none;\r\n}\r\n/deep/ .docx span {\r\n  // font-size: 25px !important;\r\n  color: #fff !important;\r\n}\r\n/deep/ .docx-wrapper {\r\n  background-color: transparent !important;\r\n  box-shadow: none !important;\r\n  // background-image: url(\"../assets/images/wordBg1.png\");\r\n  background-size: 100% 100%;\r\n}\r\n/deep/ .docx {\r\n  width: 100% !important;\r\n  background-color: transparent !important;\r\n  box-shadow: none !important;\r\n}\r\n/deep/ .docx table {\r\n  width: 100% !important;\r\n}\r\n// /deep/ .docx p {\r\n//   text-align: center !important;\r\n// }\r\n// /deep/ p.docx_a3 {\r\n//   border-bottom: none !important;\r\n// }\r\n/deep/ .docx p {\r\n  // text-align: unset !important;\r\n  line-height: unset !important;\r\n  background-color: transparent !important;\r\n  border: unset !important;\r\n  // text-indent: unset !important;\r\n}\r\n// /dee/ .docx img{\r\n//   margin: 0 auto !important;\r\n// }\r\n// /deep/ .docx_normalcharacter>div{\r\n//   margin: 0 auto !important;\r\n\r\n// }\r\n/deep/ p:before {\r\n  color: #fff;\r\n}\r\n</style>\r\n"]}]}