PM2023XiAnShuBoHui_Web.git

<!--
 * @Description: 导航菜单
 * @Author: 王旭
 * @Date: 2022-03-03 17:18:01
 * @LastEditTime: 2023-05-14 13:45:22
 * @LastEditors: LuLu
-->
<template>
  <div class="device-state-panel">
    <!-- <div class="closeBtn" @click="closeWindow">x</div> -->
 
    <div class="block first">
      <p class="title"><p class="title-des">产业结构</p></p>
      <div id="product-container" style="width:435px;height:250px;">
 
    </div>
    </div>
    <div class="block seconde">
      <p class="title"><p class="title-des">签约客户&nbsp;&nbsp;&nbsp;<span class="num">{{dataList1.length}}&nbsp;</span><span class="danwei">家</span></p></p>
      <div class="aaa">
        <div class="kehu-wrap" v-for="(item,index) in dataList1">
          <img class="marker" src="../../assets/img/产业.png" />
          <div class="right-container">
            <p class='company-name'>{{item.companyName}}</p>
            <div class="qianyue-wrap">
              <div class="qianyue-area"><span>签约面积&nbsp;</span><span class="qianyue-num">{{item.area}}&nbsp;</span><span>㎡</span></div>
              <div class="time">{{item.time}}</div>
            </div>
          </div>
        </div>
 
 
      </div>
      <!-- <p class="title">资源信息</p> -->
 
    </div>
  </div>
</template>
 
<script>
export default {
  name: "ProductInfo",
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      myChart1: null,
      option: null,
      dataList1: [],
      dataList: [
        {
          companyName: "杭州市宇信科技集团股份有限公司",
          area: 92,
          time: "2022/11/13",
          type: "新一代信息技术",
        },
        {
          companyName: "杭州市阿里集团股份有限公司",
          area: 102,
          type: "新一代信息技术",
          time: "2012/8/23",
        },
        // {
        //   companyName: "杭州市菜鸟集团股份有限公司",
        //   area: 132,
        //   type: "新一代信息技术",
        //   time: "2022/8/13",
        // },
        // {
        //   companyName: "杭州市盒马集团股份有限公司",
        //   area: 132,
        //   type: "新一代信息技术",
        //   time: "2022/8/13",
        // },
        {
          companyName: "杭州市网易集团股份有限公司",
          area: 111,
          type: "智能电网",
          time: "2021/9/13",
        },
        {
          companyName: "杭州市比亚迪科技集团股份有限公司",
          area: 142,
          type: "新能源",
          time: "2022/5/11",
        },
        {
          companyName: "杭州市山河科技集团股份有限公司",
          area: 122,
          type: "高端装备",
          time: "2022/4/13",
        },
      ],
    };
  },
  watch: {},
  mounted() {
    this.dataList1 = this.dataList;
    this.initChart1();
  },
  //方法集合
  methods: {
    closeWindow() {
      this.$emit('closeWindow')
    },
    initChart1() {
      this.myChart1 = this.$echarts.init(
        document.getElementById("product-container")
      );
 
      this.option = {
        legend: {
          textStyle: {
            fontSize: 14, //字体大小
            color: "#ffffff", //字体颜色
          },
          right: 40,
          itemHeight: 5,
          itemWidth: 12,
          adius: 3,
        },
        tooltip: {},
        dataset: {
          source: [
            ["Walnut Brownie", "已签约", "商机储备"],
            ["高端装备制造", 80, 30],
            ["新能源/智联汽车", 90, 70],
            ["新一代信息技术", 66, 33],
            ["智能电网装备", 80, 20],
          ],
        },
        xAxis: {
          type: "category",
          axisLine: {
            show: true,
            lineStyle: {
              color: "#027975",
              opacity: 0.5,
              type: "solid",
            },
          },
          triggerEvent: true,
          axisLabel: {
            textStyle: {
              fontSize: "16",
              color: "#FFFFFF",
              fontFamily: "SourceHanSansSC-Medium",
            },
            formatter: function (params) {
              var newParamsName = "";
              var paramsNameNumber = params.length;
              var provideNumber = 4; // 一行显示几个字
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
              if (paramsNameNumber > provideNumber) {
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = "";
                  var start = p * provideNumber;
                  var end = start + provideNumber;
                  if (p === rowNumber - 1) {
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    tempStr = params.substring(start, end) + "\n";
                  }
                  newParamsName += tempStr;
                }
              } else {
                newParamsName = params;
              }
              return newParamsName;
            },
          },
        },
        grid: {
          bottom: 40,
          top: 50,
        },
        yAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "#027975",
              opacity: 0.5,
              type: "solid",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#027975"],
              width: 1,
              type: "solid",
            },
          },
 
          axisLabel: {
            textStyle: {
              fontSize: "16",
              color: "#FFFFFF",
              fontFamily: "SourceHanSansSC-Medium",
            },
          },
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: "bar",
            barWidth: "10%",
            itemStyle: {
              normal: {
                barBorderRadius: [10, 10, 0, 0],
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "rgb(40,73,76,1)", // 0% 处的颜色
                  },
                  {
                    offset: 0.6,
                    color: "rgb(45,157,123,1)", // 60% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#29EEA2", // 100% 处的颜色
                  },
                ]),
              },
            },
          },
          {
            type: "bar",
            barWidth: "10%",
            itemStyle: {
              normal: {
                barBorderRadius: [10, 10, 0, 0],
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "rgb(52,75,77,1)", // 0% 处的颜色
                  },
                  {
                    offset: 0.6,
                    color: "rgb(152,157,157,1)", // 60% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#F5D98B", // 100% 处的颜色
                  },
                ]),
              },
            },
          },
        ],
      };
      // debugger;
      this.option && this.myChart1.setOption(this.option);
      let _this = this;
      this.myChart1.on("click", function (params) {
        if (params.componentType == "xAxis") {
          _this.dataList1 = _this.dataList.filter((item) => {
            return params.value.includes(item.type);
          });
          // alert("单击了" +/ params.value + "x轴标签");
        } else {
          return;
          // alert("单击了" + params.name + "柱状图");
        }
      });
 
      // this.myChart1 = this.$echarts.init(document.getElementById("product-container"));
    },
    created() {
      //当前路由高亮
      this.pathName = this.$route.path;
    },
  },
};
</script>
<style lang="less" scoped>
//@import url(); 引入公共css类
@font-face {
  font-family: "SourceHanSansCN-Bold";
  src: url("../../assets/font/SourceHanSansCN-Bold.otf");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSansCNRegular";
  src: url("../../assets/font/SourceHanSansSC-Regular.otf");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "arialbd";
  src: url("../../assets/font/Arial-ItalicMT.otf");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSansSC-Medium";
  src: url("../../assets/font/SourceHanSansSC-Medium.otf");
  font-weight: normal;
  font-style: normal;
}
* {
  font-size: 16px;
  font-family: SourceHanSansCNRegular;
  font-weight: bold;
  color: #feffff;
  line-height: 30px;
}
.danwei {
  font-size: 12px;
 
  font-weight: 400;
  color: #ffffff;
  line-height: 28px;
  opacity: 0.7;
}
.qianyue-num {
  font-size: 24px;
  font-family: Arial;
  font-weight: bold;
  font-style: italic;
  color: #f5ce33;
  line-height: 11px;
}
.block {
  padding-bottom: 55px;
}
.kehu-wrap {
  display: flex;
  padding: 10px 0px;
}
.qianyue-wrap {
  display: flex;
  // flex-direction: column;
  // align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}
.company-name {
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #3deaff;
  line-height: 28px;
  opacity: 0.9;
}
.right-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.num-show {
  width: 29px;
  height: 18px;
  font-size: 25px;
 
  font-weight: bold;
  font-style: italic;
  color: #ffd427;
  line-height: 11px;
  font-family: arialbd;
}
.danwei-show {
  width: 26px;
  height: 13px;
  font-size: 13px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #ffffff;
  line-height: 22px;
}
.device-state-panel {
  height: 700px;
  position: fixed;
  bottom: 43px;
  top: 110px;
  right: 112px;
  width: 460px;
  // height: 70px;
  border: 1px solid #264c67;
  // background: linear-gradient(0deg, #00193c 0%, #0d364d 100%);
  z-index: 999;
  background-image: url("../../assets/img/outerbox.png");
  padding: 27px;
  background-size: 100% 100%;
}
.title {
  background-image: url("../../assets/img/tittle.svg");
  width: 172px;
  height: 11px;
}
.show-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.qianyue-area,
.time {
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  line-height: 28px;
  opacity: 0.7;
}
.data-show {
  position: relative;
  width: 105px;
  padding-top: 10px;
  padding-right: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.position {
  position: absolute;
  right: 29px;
  top: 28px;
  min-width: 55px;
}
.title-des {
  margin-top: -29px;
  margin-left: 7px;
}
.chart-des {
  // width: 58px;
  height: 13px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #ffffff;
  line-height: 22px;
}
.total-num {
  content: url("../../assets/img/totalNum-bg.svg");
  width: 98px;
  height: 48px;
}
.kjgk {
  background-image: url("../../assets/img/kjgk.png") no-repeat;
  width: 90px;
  height: 78px;
}
.seconde {
  position: relative;
  height: 325px;
}
.third {
  position: relative;
}
.zyxx {
  background-image: url("../../assets/img/zyxx.png") no-repeat;
  width: 240px;
  height: 225px;
  position: absolute;
  top: 23px;
  left: -59px;
}
.zyxz {
  // position: absolute;
  // top: 23px;
  // left: -59px;
}
.zyxx-tit {
  display: inline-block;
  width: 90px;
  height: 14px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  line-height: 31px;
}
.num {
  width: 24px;
  height: 18px;
  font-size: 24px;
  font-family: arialbd;
  font-weight: normal;
  color: #3deaff;
}
.aaa {
  height: 100%;
  overflow: auto;
}
.dingwei {
  position: absolute;
  // top: 23px;
  left: 190px;
}
.d1 {
  top: 23px;
}
.d2 {
  top: 85px;
}
.d3 {
  top: 155px;
}
.d4 {
  top: 217px;
}
.dingwei1 {
  position: absolute;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
  // top: 23px;
  // left: 190px;
}
.e1 {
  top: 2/3px;
  top: 23px;
  left: 54px;
}
.e2 {
  // top: 85px;
  top: 22px;
  left: 312px;
}
.e3 {
  top: 104px;
  left: 51px;
}
.e4 {
  // top: 217px;
  top: 88px;
  left: 312px;
}
.zyxz-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}
.zyxz {
  background-image: url("../../assets/img/zyxz.png") no-repeat;
  width: 162px;
  height: 161px;
}
.closeBtn{
  position: absolute;
  right: 16px;
  top: 10px;
  cursor: pointer;
}
// radar-chart-wrap{
 
// }
</style>