{"version":3,"sources":["webpack:///./src/views/Test.vue","webpack:///./src/views/Test.vue?11eb","webpack:///./src/views/Test.vue?a94c","webpack:///./node_modules/@babel/runtime/helpers/esm/defineProperty.js"],"names":["class","id","selectValue","placeholder","handleChangeSelect","popper-append-to-body","selectOptions","item","key","value","label","setup","options","dom","echartsInstance","xData","yData","url","url1","index","indexList","initOptions","getSelectOptions","document","getElementById","echarts","window","addEventListener","resize","removeEventListener","xAxis","type","data","boundaryGap","yAxis","max","axisLabel","formatter","tooltip","show","trigger","toolbox","feature","dataZoom","title","zoom","back","yAxisIndex","series","symbol","indexOf","updateDataToRender","getEchartsSoureData","handleClickBtn","length","message","a","get","res","status","resultCode","cache","forEach","Date","startTime","toLocaleString","replaceAll","push","post","result","i","renderEcharts","dispose","setOption","render","__scopeId","_defineProperty","obj","Object","defineProperty","enumerable","configurable","writable"],"mappings":"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","file":"js/chunk-3f7d27fe.c8b53569.js","sourcesContent":["<template>\r\n  <div class=\"rootWrap\">\r\n    <div class=\"selectWrap\">\r\n      <el-select v-model=\"selectValue\" placeholder=\"请选择\" @change=\"handleChangeSelect\" :popper-append-to-body=\"false\">\r\n        <el-option v-for=\"item in selectOptions\" :key=\"item.value\" :label=\"item.label\" :value=\"item.value\"> </el-option>\r\n      </el-select>\r\n      <!-- <el-button @click=\"handleClickBtn(false)\">上一个</el-button>\r\n      <el-button @click=\"handleClickBtn(true)\">下一个</el-button> -->\r\n    </div>\r\n\r\n    <div id=\"echartsContainer\"></div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { ref, shallowRef, onMounted, onUnmounted, nextTick, defineComponent } from 'vue'\r\nimport axios from 'axios'\r\nimport * as echarts from 'echarts'\r\nimport { getItem } from '../api'\r\nimport { ElMessage } from 'element-plus'\r\n// const unwarp = obj => obj && (obj.__v_raw || obj.valueOf() || obj)\r\nexport default defineComponent({\r\n  setup() {\r\n    const options = ref({})\r\n    const dom = ref(null)\r\n    let echartsInstance = shallowRef(null)\r\n    let xData = ref([])\r\n    let yData = ref([])\r\n    let selectValue = ref('')\r\n    let selectOptions = ref([])\r\n    let url = ref('http://47.101.177.0:9000/portal/ropeWayDevice/test/queryList')\r\n    let url1 = ref('http://47.101.177.0:9000/portal/ropeWayDevice/test/queryDetail')\r\n    let index = ref(0)\r\n    let indexList = ref([])\r\n\r\n    onMounted(() => {\r\n      initOptions()\r\n      getSelectOptions()\r\n      dom.value = document.getElementById('echartsContainer')\r\n      echartsInstance.value = echarts.init(dom.value)\r\n      window.addEventListener('resize', resize)\r\n    })\r\n\r\n    onUnmounted(() => {\r\n      window.removeEventListener('resize', resize)\r\n    })\r\n\r\n    const resize = () => {\r\n      echartsInstance.value.resize()\r\n    }\r\n    const initOptions = () => {\r\n      options.value = {\r\n        xAxis: {\r\n          type: 'category',\r\n          data: xData.value,\r\n          boundaryGap: false\r\n        },\r\n        yAxis: {\r\n          type: 'value',\r\n          max: 50,\r\n          axisLabel: {\r\n            formatter: '{value}%'\r\n          }\r\n        },\r\n        tooltip: {\r\n          show: true,\r\n          trigger: 'axis'\r\n        },\r\n        toolbox: {\r\n          feature: {\r\n            dataZoom: {\r\n              title: {\r\n                zoom: '缩放',\r\n                back: '还原'\r\n              },\r\n              yAxisIndex: false\r\n            }\r\n          }\r\n        },\r\n        series: [\r\n          {\r\n            data: yData.value,\r\n            type: 'line',\r\n            symbol: 'none'\r\n          }\r\n        ]\r\n      }\r\n    }\r\n    // 下拉框改变事件\r\n    const handleChangeSelect = value => {\r\n      index.value = indexList.value.indexOf(value)\r\n      updateDataToRender(value)\r\n    }\r\n    // 更新数据并重新渲染图\r\n    const updateDataToRender = id => {\r\n      getEchartsSoureData(id)\r\n    }\r\n    // 点击切换按钮事件\r\n    const handleClickBtn = value => {\r\n      if (!value) {\r\n        if (selectValue.value && index.value == 0) {\r\n          ElMessage({\r\n            type: 'warning',\r\n            message: '没有上一个了'\r\n          })\r\n        }\r\n        index.value--\r\n        if (index.value >= 0) {\r\n          selectValue.value = selectOptions.value[index.value].value\r\n          getEchartsSoureData(selectValue.value)\r\n        } else {\r\n          index.value = 0\r\n        }\r\n      } else {\r\n        if (selectValue.value && index.value == indexList.value.length - 1) {\r\n          ElMessage({\r\n            type: 'warning',\r\n            message: '没有下一个了'\r\n          })\r\n        }\r\n        index.value++\r\n        if (index.value <= indexList.value.length - 1) {\r\n          selectValue.value = selectOptions.value[index.value].value\r\n          getEchartsSoureData(selectValue.value)\r\n        } else {\r\n          index.value = indexList.value.length - 1\r\n        }\r\n      }\r\n    }\r\n    // 请求下拉框数据\r\n    const getSelectOptions = async () => {\r\n      const res = await axios.get(url.value)\r\n      if (res.status == 200 && res.data.resultCode == '0000') {\r\n        let data = res.data.data\r\n        let cache = {}\r\n        data.forEach(item => {\r\n          cache = {}\r\n          cache.label = new Date(item.startTime).toLocaleString().replaceAll('/', '-')\r\n          cache.value = item.id\r\n          selectOptions.value.push(cache)\r\n          indexList.value.push(item.id)\r\n        })\r\n      }\r\n    }\r\n    // 请求图形原始数据\r\n    const getEchartsSoureData = async id => {\r\n      const res = await axios.post(url1.value, { id: id })\r\n      if (res.status == 200 && res.data.resultCode == '0000') {\r\n        let { result } = res.data.data\r\n        yData.value = []\r\n        xData.value = []\r\n        // yData.value = result\r\n        for (let i = 0; i < result.length; i++) {\r\n          xData.value.push(i + 1)\r\n          yData.value.push(result[i] / 10)\r\n        }\r\n        renderEcharts()\r\n      }\r\n    }\r\n    // 渲染图\r\n    const renderEcharts = () => {\r\n      nextTick(() => {\r\n        options.value.series[0].data = yData.value\r\n        options.value.xAxis.data = xData.value\r\n        if (echartsInstance.value) {\r\n          echartsInstance.value.dispose()\r\n          dom.value = document.getElementById('echartsContainer')\r\n          echartsInstance.value = echarts.init(dom.value)\r\n          echartsInstance.value.setOption(options.value)\r\n        }\r\n      })\r\n    }\r\n    return {\r\n      handleChangeSelect,\r\n      renderEcharts,\r\n      getEchartsSoureData,\r\n      getSelectOptions,\r\n      handleClickBtn,\r\n      updateDataToRender,\r\n      handleChangeSelect,\r\n      selectOptions,\r\n      selectValue\r\n    }\r\n  }\r\n})\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.rootWrap {\r\n  width: 100%;\r\n  height: 100%;\r\n  .selectWrap {\r\n    padding: 20px 0;\r\n    .el-button {\r\n      margin-left: 40px;\r\n    }\r\n    :deep(.selected) {\r\n      background-color: #0099ff !important;\r\n    }\r\n  }\r\n\r\n  #echartsContainer {\r\n    width: 100%;\r\n    height: 80%;\r\n    background-color: #fff;\r\n  }\r\n}\r\n</style>\r\n","import { render } from \"./Test.vue?vue&type=template&id=8ba1c912&scoped=true\"\nimport script from \"./Test.vue?vue&type=script&lang=js\"\nexport * from \"./Test.vue?vue&type=script&lang=js\"\n\nimport \"./Test.vue?vue&type=style&index=0&id=8ba1c912&lang=scss&scoped=true\"\nscript.render = render\nscript.__scopeId = \"data-v-8ba1c912\"\n\nexport default script","export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/index.js??ref--0-1!./Test.vue?vue&type=style&index=0&id=8ba1c912&lang=scss&scoped=true\"","export default function _defineProperty(obj, key, value) {\n  if (key in obj) {\n    Object.defineProperty(obj, key, {\n      value: value,\n      enumerable: true,\n      configurable: true,\n      writable: true\n    });\n  } else {\n    obj[key] = value;\n  }\n\n  return obj;\n}"],"sourceRoot":""}