sprof 0.1.0

package/src/components/RSContainer.vue

@@ -0,0 +1,262 @@
+<template>
+  <div class="mainblock">
+    <div v-if="collapsed1 | collapsed2" class="blur" @click="handClick()"></div>
+    <div class="body">
+      <div
+        class="visability-block"
+        :style="{
+          maxWidth: mobileWindow ? '100%' : '300px',
+        }"
+      >
+        <slot name="visability" />
+      </div>
+      <div
+        class="filter-block"
+        :style="{
+          position: mobileWindow ? 'absolute' : '',
+          top: mobileWindow ? '10px' : '',
+          right: mobileWindow ? '0px' : '',
+          width: mobileWindow ? '100%' : '100%',
+          zIndex: mobileWindow ? '4' : '',
+          padding: mobileWindow ? '0px 0px 26px 0px' : '0',
+          marginRight: mobileWindow ? (collapsed1 ? '0' : '-200%') : '0',
+          transition: mobileWindow ? '0.3s' : '',
+          background: mobileWindow ? '#F5f5f5' : '',
+          borderTopLeftRadius: mobileWindow ? '5px' : '',
+          borderBottomLeftRadius: mobileWindow ? '5px' : '',
+          boxShadow: mobileWindow ? 'rgba(0, 0, 0, 0.35) 0px 5px 5px' : 'rgba(0, 0, 0, 0.35) 0px 5px 5px',
+          height: mobileWindow ? '60vh' : '60vh',
+        }"
+      >
+        <div v-if="mobileWindow" class="title">
+          <div class="title-line">
+            <svg
+              class="icon-filter"
+              :style="{
+                stroke: '#B0A4C0',
+                paddingLeft: '10px',
+              }"
+            >
+              <use xlink:href="#filter"></use>
+            </svg>
+            <svg
+              class="icon-close"
+              :style="{
+                marginRight: '5px',
+              }"
+              @click="handClick1()"
+            >
+              <use xlink:href="#close"></use>
+            </svg>
+          </div>
+          <slot name="title-tools" />
+        </div>
+        <slot name="filter" />
+      </div>
+      <div v-if="!mobileWindow" class="help-block"></div>
+      <div
+        class="download-block"
+        :style="{
+          position: mobileWindow ? 'absolute' : '',
+          top: mobileWindow ? '60px' : '',
+          right: mobileWindow ? '0px' : '',
+          width: mobileWindow ? '77px' : '',
+          zIndex: mobileWindow ? '4' : '',
+          padding: mobileWindow ? '0px 0px 26px 0px' : '0 0 0 10px',
+          marginRight: mobileWindow ? (collapsed2 ? '-2px' : '-130px') : '0',
+          transition: mobileWindow ? '0.3s' : '',
+          background: mobileWindow ? '#F5f5f5' : '',
+          borderTopLeftRadius: mobileWindow ? '5px' : '',
+          borderBottomLeftRadius: mobileWindow ? '5px' : '',
+          boxShadow: mobileWindow ? 'rgba(0, 0, 0, 0.35) 0px 5px 5px' : '',
+          height: mobileWindow ? '150px' : '',
+        }"
+      >
+        <div v-if="mobileWindow" class="title">
+          <div class="title-line">
+            <svg
+              class="icon-download"
+              :style="{
+                stroke: '#B0A4C0',
+                paddingLeft: '10px',
+              }"
+            >
+              <use xlink:href="#download"></use>
+            </svg>
+            <svg class="icon-close" @click="handClick2()">
+              <use xlink:href="#close"></use>
+            </svg>
+          </div>
+        </div>
+        <slot name="download" />
+      </div>
+
+      <div v-if="mobileWindow" class="icons">
+        <PButton skin="icon" margin="0 0 0 10px" @click="handClick1()"><IconFilter color="#006BB4" /></PButton>
+        <PButton skin="icon" margin="13px 0 0 10px" @click="handClick2()"><IconDownload color="#006BB4" /></PButton>
+      </div>
+    </div>
+  </div>
+  <svg width="0" height="0" class="hidden">
+    <symbol id="close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        d="M12 10.5857L16.95 5.63574L18.364 7.04974L13.414 11.9997L18.364 16.9497L16.95 18.3637L12 13.4137L7.04999 18.3637L5.63599 16.9497L10.586 11.9997L5.63599 7.04974L7.04999 5.63574L12 10.5857Z"
+      ></path>
+    </symbol>
+  </svg>
+</template>
+
+<script lang="ts" setup>
+import { onBeforeMount, PropType, Ref, ref } from 'vue';
+
+const props = defineProps({
+  menuWidth: {
+    type: String as PropType<string>,
+    required: false,
+    default: '0px',
+  },
+  mobileWidth: {
+    type: String as PropType<string>,
+    required: false,
+    default: '6000px',
+  },
+});
+const mounted = ref(false);
+const collapsed1: Ref<boolean> = ref(false);
+const collapsed2: Ref<boolean> = ref(false);
+const mobileWindow = ref(window.matchMedia('(max-width: 6000px)').matches);
+
+const handClick = () => {
+  collapsed1.value = false;
+  collapsed2.value = false;
+};
+
+const handClick1 = () => {
+  collapsed1.value = !collapsed1.value;
+};
+const handClick2 = () => {
+  collapsed2.value = !collapsed2.value;
+};
+
+onBeforeMount(async () => {
+  window.addEventListener('resize', () => {
+    switch (props.mobileWidth) {
+      case '1330px':
+        return (mobileWindow.value = window.matchMedia('(max-width: 1330px)').matches);
+      case '1215px':
+        return (mobileWindow.value = window.matchMedia('(max-width: 1215px)').matches);
+      case '1024px':
+        return (mobileWindow.value = window.matchMedia('(max-width: 1024px)').matches);
+      case '768px':
+        return (mobileWindow.value = window.matchMedia('(max-width: 768px)').matches);
+    }
+    return (mobileWindow.value = window.matchMedia('(max-width: 6000px)').matches);
+  });
+  mounted.value = true;
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@/services/assets/styles/index.scss';
+
+.hidden {
+  display: none;
+}
+
+.filter-block {
+  box-sizing: border-box;
+  overflow: hidden;
+  max-width: 600px;
+}
+
+.hidden {
+  display: none;
+}
+
+.mainblock {
+  position: relative;
+  display: flex;
+  z-index: 3;
+  justify-content: space-between;
+  align-items: center;
+  width: calc(100% - 20px);
+  padding: 10px;
+  background: #f5f5f5;
+  height: 100px;
+  border-bottom: 1px solid #c4c4c4;
+}
+
+.blur {
+  position: fixed;
+  height: 20000px;
+  width: 20000px;
+  background: #000000;
+  opacity: 0.2;
+  z-index: 4;
+}
+
+.body {
+  display: flex;
+  justify-content: space-between;
+  min-height: 20px;
+  height: auto;
+  width: 100%;
+}
+
+.visability-block {
+  width: 100%;
+}
+
+:deep(.icon-filter) {
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  stroke: #006bb4;
+  fill: none;
+}
+
+:deep(.icon-download) {
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  stroke: #006bb4;
+  fill: none;
+}
+
+.icon-close {
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  fill: #343e5c;
+  fill: red;
+}
+
+.icon-close:hover {
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  fill: #006bb4;
+}
+
+.help-block {
+  height: 92px;
+  width: 1px;
+}
+
+.title {
+  position: sticky;
+  top: 0px;
+  z-index: 10;
+  margin-bottom: 0px;
+  background: #f5f5f5;
+  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
+  margin-bottom: 10px;
+}
+
+.title-line {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 40px;
+}
+</style>

package/src/components/RemoteSearch.vue

@@ -0,0 +1,156 @@
+<template>
+  <PAutocomplete
+    ref="searchForm"
+    v-model="queryString"
+    :value-key="'label'"
+    style="width: 100%; margin-right: 10px"
+    :placeholder="placeholder"
+    :search-func="find"
+    :trigger-on-focus="showSuggestions"
+    :suggestions="searchModel.searchObjects"
+    @select="handleSelect"
+    @input="handleInput"
+  >
+    <template #suffix>
+      <i class="el-icon-search" />
+    </template>
+  </PAutocomplete>
+</template>
+
+<script lang="ts" setup>
+import SearchGroup from '@/services/classes/SearchGroup';
+import SearchModel from '@/services/classes/SearchModel';
+import ISearchObject from '@/services/interfaces/ISearchObject';
+import ISearch from '@/services/interfaces/ISearchObject';
+
+const props = defineProps({
+  keyValue: {
+    type: String as PropType<string>,
+    default: '',
+  },
+  modelValue: {
+    type: String as PropType<string>,
+    default: '',
+  },
+  storeModule: {
+    type: String as PropType<string>,
+    default: '',
+  },
+  placeholder: {
+    type: String as PropType<string>,
+    default: 'Начните вводить запрос',
+  },
+  showSuggestions: {
+    type: Boolean as PropType<boolean>,
+    default: true,
+  },
+  maxWidth: {
+    type: [Number, String],
+    default: 350,
+  },
+  focus: {
+    type: Boolean as PropType<boolean>,
+    default: false,
+  },
+});
+const emit = defineEmits(['select', 'load', 'input']);
+const queryString: Ref<string> = ref(props.modelValue);
+const searchForm = ref();
+const searchModel: SearchModel = SearchStore.SearchModel();
+
+watch(
+  () => props.focus,
+  () => {
+    if (props.focus) {
+      setTimeout(() => {
+        searchForm.value.focus();
+        queryString.value = '';
+      }, 500);
+    }
+  }
+);
+
+const find = async (query: string): Promise<ISearchObject[] | undefined> => {
+  if (query.length < 2) {
+    return;
+  }
+  searchForm.value.activated = true;
+  searchModel.searchObjects = [];
+  searchModel.query = query;
+  searchModel.key = props.keyValue;
+  const groupForSearch = searchModel.searchGroups.find((group: SearchGroup) => group.key === props.keyValue);
+  if (groupForSearch) {
+    searchModel.searchGroup = groupForSearch;
+  }
+  await SearchStore.Search(searchModel);
+
+  // emit('input', searchModel.searchObjects);
+  // if (props.showSuggestions) {
+  //   resolve(searchModel.searchObjects);
+  //   return;
+  // }
+  return searchModel.searchObjects;
+};
+
+const handleSelect = async (item: ISearch): Promise<void> => {
+  emit('select', item);
+  queryString.value = '';
+};
+
+const handleInput = (value: string) => {
+  emit('input', value);
+  if (value.length === 0) {
+    emit('input', '');
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+$margin: 20px 0;
+
+.flex-column {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.flex-row-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: $margin;
+}
+
+.flex-row-end {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin: $margin;
+}
+
+:deep(.el-input__inner) {
+  padding-left: 10px;
+  height: 34px;
+  display: flex;
+  font-family: Comfortaa, Arial, Helvetica, sans-serif;
+  font-size: 15px;
+  border-radius: 5px;
+  border: 1px solid #c4c4c4;
+}
+
+:deep(.el-input__suffix) {
+  top: -2px;
+}
+
+:deep(.el-form-item) {
+  margin: 0;
+}
+
+.el-form {
+  width: 100%;
+}
+
+.el-icon-search {
+  margin-right: 5px;
+}
+</style>

package/src/components/ResearcheContainer.vue

@@ -0,0 +1,71 @@
+<template>
+  <div
+    class="mainblock"
+    :style="{
+      background: background,
+      padding: padding,
+    }"
+  >
+    <div
+      class="mainblock-header"
+      :style="{
+        background: background,
+      }"
+    >
+      <slot name="header" />
+    </div>
+    <div class="mainblock-body">
+      <slot name="body" />
+    </div>
+
+    <div class="mainblock-footer">
+      <slot name="footer" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  background: {
+    type: String as PropType<string>,
+    required: false,
+    default: 'inherit',
+  },
+  padding: {
+    type: String as PropType<string>,
+    required: false,
+    default: '0px 10px',
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@/services/assets/styles/index.scss';
+
+.mainblock {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: auto;
+}
+
+.mainblock-header {
+  position: sticky;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: auto;
+  z-index: 3;
+}
+
+.mainblock-body {
+  width: 100%;
+  padding-bottom: 70px;
+}
+
+.mainblock-footer {
+  width: 100%;
+  height: auto;
+}
+</style>

package/src/components/RightSliderContainer.vue

@@ -0,0 +1,181 @@
+<template>
+  <div
+    class="right-slider"
+    :style="{
+      marginRight: isToggle ? `calc(${sliderOffWidth} - ${sliderOnWidth})` : `0`,
+      width: sliderOnWidth,
+    }"
+  >
+    <div class="click-line" @click="toggleSlider(!isToggle)">
+      <PString v-if="isToggle" :string="titleClose" font-size="16px" padding="0" color="#343E5C" />
+      <PString v-if="!isToggle" :string="titleOpen" font-size="16px" padding="0" color="#343E5C" />
+    </div>
+    <div class="right-slider-content">
+      <div class="right-slider-content-header">
+        <slot name="header" />
+      </div>
+      <div class="right-slider-content-box">
+        <slot />
+      </div>
+    </div>
+    <div class="right-slider-button">
+      <slot name="button" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+  sliderOffWidth: {
+    type: String as PropType<string>,
+    required: false,
+    default: '30px',
+  },
+  sliderOnWidth: {
+    type: String as PropType<string>,
+    required: false,
+    default: '260px',
+  },
+  background: {
+    type: String as PropType<string>,
+    required: false,
+    default: 'inherit',
+  },
+  toggle: {
+    type: Boolean as PropType<boolean>,
+    default: false,
+  },
+  titleOpen: {
+    type: String as PropType<string>,
+    required: false,
+    default: 'Скрыть список исследований',
+  },
+  titleClose: {
+    type: String as PropType<string>,
+    required: false,
+    default: 'Показать список исследований',
+  },
+});
+const emit = defineEmits(['toggle']);
+const isToggle = ref(false);
+watch(
+  () => props.toggle,
+  () => {
+    isToggle.value = !isToggle.value;
+  }
+);
+
+// const mobileWindow = ref(window.matchMedia('(max-width: 768px)').matches);
+const toggleSlider = (toggle: boolean) => {
+  isToggle.value = !isToggle.value;
+  emit('toggle', toggle);
+};
+</script>
+
+<style lang="scss" scoped>
+@import '@/services/assets/styles/index.scss';
+
+* {
+  box-sizing: border-box;
+}
+
+.right-slider {
+  position: fixed;
+  display: flex;
+  top: 165px;
+  right: 0px;
+  background: #f5f5f5;
+  z-index: 3;
+  height: 75vh;
+  border: $dark-border;
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+  overflow: hidden;
+  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 5px;
+  transition: 0.3s;
+}
+
+.click-line {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 35px;
+  height: 100%;
+  writing-mode: vertical-lr;
+  background: #c1efeb;
+  background: #f5f5f5;
+  cursor: pointer;
+  border-right: $normal-darker-border;
+}
+
+.right-slider-content {
+  width: 100%;
+  height: calc(100% - 90px);
+}
+
+.right-slider-content-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 62px;
+  border-bottom: $normal-darker-border;
+  margin-left: -1px;
+  background: #f5f5f5;
+}
+
+.right-slider-content-box {
+  width: 100%;
+  height: calc(100% - 33px);
+  overflow: hidden;
+  overflow-y: auto;
+  padding: 0px 3px 10px 7px;
+  border-bottom: $normal-darker-border;
+  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  background: #f5f5f5;
+}
+
+.right-slider-button {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  height: 62px;
+  width: calc(100% - 30px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-left: -1px;
+  background: #f5f5f5;
+}
+
+@media (max-width: 1690px) {
+  .right-slider {
+    height: 65vh;
+    top: 205px;
+  }
+}
+
+@media (max-width: 1436px) {
+  .right-slider {
+    top: 205px;
+  }
+}
+
+@media (max-width: 1050px) {
+  .right-slider {
+    top: 245px;
+  }
+}
+
+@media (max-width: 992px) {
+  .right-slider {
+    top: 205px;
+  }
+}
+
+@media screen and (max-width: 822px) {
+  .right-slider {
+    top: 245px;
+  }
+}
+</style>